:root {
  color-scheme: dark;
  --bg: #0a0d13;
  --s1: #10141c;
  --s2: #151b26;
  --s3: #1a2130;
  --bd: rgba(255, 255, 255, 0.09);
  --bd2: rgba(255, 255, 255, 0.2);
  --tx: #e6eaf2;
  --dim: #a5b1c5;
  --faint: #929db2;
  --a1: #8183ff;
  --a2: #22d3ee;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --grad: linear-gradient(135deg, #6366f1 0%, #0891b2 100%);
  --ink: 255, 255, 255;
  --header: rgba(10, 13, 19, 0.92);
  --input: #0c1018;
  --hero-ink1: #c7d2fe;
  --hero-ink2: #67e8f9;
  --shadow-card: 0 8px 26px rgba(0, 0, 0, 0.35);
  --shadow-login: 0 24px 70px rgba(0, 0, 0, 0.5);
  --tip-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --error-text: #fecaca;
  --info-text: #c7d2fe;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5fa;
  --s1: #ffffff;
  --s2: #ffffff;
  --s3: #edf1f8;
  --bd: #d7deeb;
  --bd2: #adbcd2;
  --tx: #162238;
  --dim: #465570;
  --faint: #52627a;
  --a1: #5145cd;
  --a2: #087a94;
  --ok: #08794d;
  --warn: #915e07;
  --err: #bc3247;
  --ink: 15, 23, 42;
  --header: rgba(248, 250, 254, 0.94);
  --input: #ffffff;
  --hero-ink1: #4338ca;
  --hero-ink2: #0e7490;
  --shadow-card: 0 8px 26px rgba(30, 50, 80, 0.08);
  --shadow-login: 0 20px 60px rgba(30, 50, 80, 0.14);
  --tip-shadow: 0 8px 24px rgba(30, 50, 80, 0.16);
  --error-text: #a5273a;
  --info-text: #4338a1;
}
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 12px;
  flex: none;
}
.theme-picker select {
  color: var(--tx);
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  font: inherit;
  padding: 7px 5px;
  max-width: 108px;
  cursor: pointer;
}
.theme-picker select:focus-visible {
  outline: 2px solid var(--a2);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .theme-picker > span {
    display: none;
  }
  .theme-picker select {
    max-width: 87px;
  }
}