/* Shared browser preference, loaded after each page's component styles. */
:root { --gold-line: #ecd594; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121019;
  --bg-alt: #17131f;
  --surface: #1d1827;
  --surface-2: #282132;
  --line: #45384f;
  --line-soft: #332a3e;
  --ink: #f5f0fc;
  --ink-2: #cec4da;
  --ink-3: #aca0bb;
  --accent: #c7a4ff;
  --accent-hover: #dcc4ff;
  --accent-soft: #322244;
  --accent-ink: #1a102a;
  --violet-2: #dcc4ff;
  --gold: #efc45c;
  --gold-soft: #302615;
  --gold-ink: #f3d17d;
  --gold-line: #756038;
  --amber: #f3cd72;
  --danger: #ff9b98;
  --info: #9cc6ff;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] .nav { background: rgba(18, 16, 25, .94); }
html[data-theme="dark"] .nav.is-stuck,
html[data-theme="dark"] .topbar { background: rgba(18, 16, 25, .98); }
html[data-theme="dark"] .inv { --slot-bg: #211c2b; --slot-line: #51435f; }
html[data-theme="dark"] .inv-slot.is-filled { background: #2b2338; }
html[data-theme="dark"] .input:hover,
html[data-theme="dark"] .select:hover,
html[data-theme="dark"] .pillar:hover { border-color: #9b7fb7; }
html[data-theme="dark"] .backdrop,
html[data-theme="dark"] .inv-sheet,
html[data-theme="dark"] .scrim { background: rgba(0, 0, 0, .64); }
.hero__eyebrow, .step__n, .mode-chip--demo, .player__avatar.tone-2,
.badge--amber, .auth__points li::before { border-color: var(--gold-line); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 0 0 auto; min-height: 38px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-2);
  font: 600 12px/1.2 var(--sans); cursor: pointer; white-space: nowrap;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; }
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.theme-toggle[aria-pressed="true"] { color: var(--gold-ink); background: var(--gold-soft); border-color: var(--gold-line); }
.nav__menu { margin-left: auto; }
.nav__inner > .theme-toggle { order: 2; }
.nav__toggle { order: 3; }
.auth__aside { position: relative; }
.auth__aside > .theme-toggle { position: absolute; right: 24px; top: 16px; }
.auth__aside > .auth__brand { margin-top: 32px; }
@media (max-width: 1100px) {
  .nav__inner > .theme-toggle { margin-left: auto; }
}
@media (max-width: 620px) {
  .topbar { gap: 9px; flex-wrap: wrap; }
  .topbar__actions { margin-left: auto; }
  .topbar .theme-toggle { padding: 8px; }
  .topbar .theme-toggle span { display: none; }
}
@media (max-width: 420px) {
  .nav__inner { gap: 9px; }
  .nav__inner > .theme-toggle span { display: none; }
  .nav__inner > .theme-toggle { width: 38px; padding: 8px; }
}
@media (forced-colors: active) {
  .theme-toggle { border: 1px solid ButtonText; }
}