/* Canonical Rift settings enhancements. The shell/navigation remain owned by ui/desktop.js. */
:root { --rift-user-accent: #d84b4b; }

#r021-settings .rift-unified-page { width: 100%; max-width: 760px; }
#r021-settings .rift-unified-page > h1 { margin: 0 0 8px; color: #f2f3f5; font-size: 25px; font-weight: 600; }
#r021-settings .rift-unified-section { margin: 0 0 30px; padding: 0 0 30px; border-bottom: 1px solid #262931; }
#r021-settings .rift-unified-section:last-child { border-bottom: 0; }
#r021-settings .rift-unified-section > h2 { margin: 0 0 16px; color: #e5e7eb; font-size: 20px; font-weight: 550; }
#r021-settings .rift-unified-section-copy { margin: -8px 0 16px; color: #9aa1aa; font-size: 12px; line-height: 1.5; }
#r021-settings .rift-unified-row { min-height: 64px; padding: 8px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
#r021-settings .rift-unified-row > div:first-child { min-width: 0; }
#r021-settings .rift-unified-row > div:first-child > strong { display: block; color: #e2e4e8; font-size: 13px; font-weight: 600; }
#r021-settings .rift-unified-row > div:first-child > span { display: block; margin-top: 4px; color: #9299a3; font-size: 11px; line-height: 1.45; }
#r021-settings .rift-unified-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

#r021-settings .rift-unified-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; padding: 0; border: 1px solid #3a3e46; border-radius: 999px; background: #111318; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
#r021-settings .rift-unified-switch > span { position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #f5f6f7; transition: transform .14s ease; }
#r021-settings .rift-unified-switch.on { background: var(--rift-user-accent); border-color: var(--rift-user-accent); }
#r021-settings .rift-unified-switch.on > span { transform: translateX(18px); }
#r021-settings .rift-unified-switch:focus-visible { outline: 2px solid color-mix(in srgb, var(--rift-user-accent), #fff 20%); outline-offset: 2px; }

#r021-settings .rift-unified-select { min-width: 215px; max-width: 330px; height: 38px; padding: 0 34px 0 11px; border: 1px solid #343842; border-radius: 7px; background: #111318; color: #e8eaed; font-size: 12px; outline: none; }
#r021-settings .rift-unified-select:focus { border-color: var(--rift-user-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rift-user-accent), transparent 78%); }
#r021-settings .rift-unified-select:disabled { opacity: .5; }
#r021-settings .rift-unified-range { width: min(325px, 34vw); display: flex; align-items: center; gap: 12px; }
#r021-settings .rift-unified-range input { width: 100%; accent-color: var(--rift-user-accent); }
#r021-settings .rift-unified-range output { width: 44px; text-align: right; color: #b7bdc5; font-size: 11px; font-variant-numeric: tabular-nums; }

#r021-settings .rift-unified-info { padding: 15px 16px; border: 1px solid #2c3038; border-radius: 8px; background: #111318; }
#r021-settings .rift-unified-info strong { color: #e3e5e8; font-size: 13px; }
#r021-settings .rift-unified-info p { margin: 6px 0 0; color: #969da7; font-size: 11.5px; line-height: 1.55; }
#r021-settings .rift-unified-link { margin-top: 6px; padding: 0; border: 0; background: transparent; color: color-mix(in srgb, var(--rift-user-accent), #fff 40%); font-size: 11px; cursor: pointer; }
#r021-settings .rift-unified-link:hover { text-decoration: underline; }
#r021-settings .rift-unified-note { margin: 7px 0 17px; color: #858c96; font-size: 10.5px; line-height: 1.45; }
#r021-settings .rift-unified-loading { padding: 60px 0; color: #959ca6; text-align: center; font-size: 13px; }

#r021-settings .rift-unified-radio-stack { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
#r021-settings .rift-unified-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; padding: 8px 0; cursor: pointer; }
#r021-settings .rift-unified-radio input { position: absolute; opacity: 0; pointer-events: none; }
#r021-settings .rift-unified-radio > i { position: relative; width: 20px; height: 20px; border: 1px solid #5a616b; border-radius: 50%; }
#r021-settings .rift-unified-radio input:checked + i { border-color: var(--rift-user-accent); background: var(--rift-user-accent); }
#r021-settings .rift-unified-radio input:checked + i::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
#r021-settings .rift-unified-radio strong, #r021-settings .rift-unified-radio small { display: block; }
#r021-settings .rift-unified-radio strong { color: #dfe2e6; font-size: 12.5px; }
#r021-settings .rift-unified-radio small { margin-top: 3px; color: #9198a2; font-size: 10.5px; line-height: 1.45; }

#r021-settings .rift-unified-device-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 12px; }
#r021-settings .rift-unified-device-grid label, #r021-settings .rift-unified-field { color: #d8dbe0; font-size: 11px; font-weight: 600; }
#r021-settings .rift-unified-device-grid select, #r021-settings .rift-unified-field select { display: block; width: 100%; max-width: none; margin-top: 7px; }
#r021-settings .rift-unified-mic-test { display: grid; grid-template-columns: auto minmax(150px, 1fr); gap: 10px 14px; align-items: center; margin: 16px 0 4px; }
#r021-settings .rift-unified-mic-test > span { grid-column: 2; color: #939aa4; font-size: 10.5px; }
#r021-settings .rift-unified-meter { height: 24px; overflow: hidden; border-radius: 5px; background: repeating-linear-gradient(90deg, #292d34 0 4px, transparent 4px 8px); }
#r021-settings .rift-unified-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #45c581, #d8a442, #e45a61); transition: width .06s linear; }
#r021-settings .rift-unified-keybind { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#r021-settings .rift-unified-keybind input { width: 160px; height: 36px; padding: 0 10px; border: 1px solid #343842; border-radius: 7px; background: #101217; color: #e6e8eb; font-size: 11px; }
#r021-settings .rift-unified-camera { height: 240px; margin: 13px 0; overflow: hidden; display: grid; place-items: center; border: 1px solid #292d35; border-radius: 9px; background: #08090b; }
#r021-settings .rift-unified-camera video { width: 100%; height: 100%; display: none; object-fit: contain; }
#r021-settings .rift-unified-camera > div { color: #7f868f; font-size: 12px; }

#r021-settings .rift-unified-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#r021-settings .rift-unified-theme { padding: 8px; border: 1px solid #30343c; border-radius: 8px; background: #111318; color: #cfd3d8; text-align: left; cursor: pointer; }
#r021-settings .rift-unified-theme i { display: block; height: 54px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; }
#r021-settings .rift-unified-theme strong { font-size: 10.5px; }
#r021-settings .rift-unified-theme.active { border-color: var(--rift-user-accent); box-shadow: 0 0 0 1px var(--rift-user-accent); }
#r021-settings .rift-unified-accents { display: flex; gap: 10px; flex-wrap: wrap; }
#r021-settings .rift-unified-accents button { width: 38px; height: 38px; padding: 5px; border: 2px solid transparent; border-radius: 10px; background: #17191e; cursor: pointer; }
#r021-settings .rift-unified-accents button span { display: block; width: 100%; height: 100%; border-radius: 6px; background: var(--rift-swatch); }
#r021-settings .rift-unified-accents button.active { border-color: #fff; }

/* Streamer mode masks sensitive values inside the one canonical settings panel. */
html.rift-streamer-hide-personal #r021-settings .rift-account-email-value > strong,
html.rift-streamer-hide-personal #r021-settings .rift-account-row > strong { filter: blur(7px); user-select: none; }
html.rift-compact-messages .message { padding-top: 2px !important; padding-bottom: 2px !important; }
html.rift-hide-reactions .reaction-strip { display: none !important; }
.primary-button, .send-button { background: var(--rift-user-accent) !important; }

/* Rift theme engine. */
html[data-rift-theme='graphite'] {
  --cleanup-main: #202226; --cleanup-side: #1b1d21; --cleanup-rail: #151619; --cleanup-hover: #2a2d32; --cleanup-active: #31343a; --cleanup-border: #363940; --cleanup-text: #f2f3f5; --cleanup-muted: #b0b5bc;
}
html[data-rift-theme='graphite'] body,
html[data-rift-theme='graphite'] .content-panel,
html[data-rift-theme='graphite'] .home-view,
html[data-rift-theme='graphite'] .chat-view { background: #202226 !important; }
html[data-rift-theme='graphite'] .channel-panel,
html[data-rift-theme='graphite'] .member-panel { background: #1b1d21 !important; }

html[data-rift-theme='light'] {
  --cleanup-main: #f5f6f8; --cleanup-side: #eceef1; --cleanup-rail: #e4e6ea; --cleanup-hover: #dfe2e7; --cleanup-active: #d5d9df; --cleanup-border: #d5d8de; --cleanup-text: #1c1e22; --cleanup-muted: #666c75; color-scheme: light;
}
html[data-rift-theme='light'] body,
html[data-rift-theme='light'] .content-panel,
html[data-rift-theme='light'] .home-view,
html[data-rift-theme='light'] .chat-view { background: #f5f6f8 !important; color: #1d2025 !important; }
html[data-rift-theme='light'] .channel-panel,
html[data-rift-theme='light'] .member-panel { background: #eceef1 !important; color: #24272c !important; }
html[data-rift-theme='light'] .server-rail { background: #e4e6ea !important; }
html[data-rift-theme='light'] .message-text,
html[data-rift-theme='light'] .message-author,
html[data-rift-theme='light'] .member-copy strong,
html[data-rift-theme='light'] .channel-name { color: #25282d !important; }
html[data-rift-theme='light'] .composer,
html[data-rift-theme='light'] .modal { background: #fff !important; color: #1d2025 !important; border-color: #d7dbe1 !important; }
html[data-rift-theme='light'] .composer textarea { color: #1d2025 !important; }

/* The preferred settings shell itself stays visually consistent with the existing second-panel design. */
html[data-rift-theme='light'] #r021-settings .rift-settings-card { background: #f7f8fa !important; color: #1d2025 !important; }
html[data-rift-theme='light'] #r021-settings .r021-settings-nav-wrap { background: #eef0f3 !important; }
html[data-rift-theme='light'] #r021-settings .rift-unified-page > h1,
html[data-rift-theme='light'] #r021-settings .rift-unified-section > h2,
html[data-rift-theme='light'] #r021-settings .rift-unified-row > div:first-child > strong,
html[data-rift-theme='light'] #r021-settings .rift-unified-radio strong { color: #202328 !important; }
html[data-rift-theme='light'] #r021-settings .rift-unified-row > div:first-child > span,
html[data-rift-theme='light'] #r021-settings .rift-unified-radio small { color: #68707a !important; }
html[data-rift-theme='light'] #r021-settings .rift-unified-select,
html[data-rift-theme='light'] #r021-settings .rift-unified-info,
html[data-rift-theme='light'] #r021-settings .rift-unified-theme,
html[data-rift-theme='light'] #r021-settings .rift-unified-keybind input { background: #fff; color: #202328; border-color: #cfd4db; }

@media (prefers-color-scheme: light) {
  html[data-rift-theme='system'] { color-scheme: light; }
  html[data-rift-theme='system'] body,
  html[data-rift-theme='system'] .content-panel,
  html[data-rift-theme='system'] .home-view,
  html[data-rift-theme='system'] .chat-view { background: #f5f6f8 !important; color: #1d2025 !important; }
}

@media (max-width: 800px) {
  #r021-settings .rift-unified-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  #r021-settings .rift-unified-device-grid { grid-template-columns: 1fr; }
  #r021-settings .rift-unified-range { width: min(280px, 48vw); }
  #r021-settings .rift-unified-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #r021-settings .rift-unified-camera { height: 205px; }
}

@media (max-width: 520px) {
  #r021-settings .rift-unified-control { max-width: 44vw; }
  #r021-settings .rift-unified-select { min-width: 145px; max-width: 44vw; }
  #r021-settings .rift-unified-range { width: 42vw; }
  #r021-settings .rift-unified-mic-test { grid-template-columns: 1fr; }
  #r021-settings .rift-unified-mic-test > span { grid-column: 1; }
  #r021-settings .rift-unified-camera { height: 170px; }
}