/* Dark theme: black base + rainbow accents. Applied when <html data-theme="dark">; the light (cream/gold) theme stays the default.
   Every rule is scoped to html[data-theme="dark"] so the light theme is untouched. */
html[data-theme="dark"]{
  --bg:#070a12; --surface:#0f1421; --surface-2:#161d2e; --surface-3:#1d2539;
  --text:#e8ecf6; --muted:#97a1b8; --line:#232c42;
  --rainbow:linear-gradient(90deg,#38bdf8 0%,#818cf8 28%,#e879f9 55%,#fb923c 80%,#facc15 100%);
  --rainbow-btn:linear-gradient(90deg,#0369a1 0%,#6d28d9 50%,#be185d 100%);
  --green:#7dd3fc; --gold:#c4b5fd; --cream:var(--surface);
  color-scheme:dark; color:var(--text); background:var(--bg);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}

/* text */
html[data-theme="dark"] :is(h1,h2,h3,h4,strong,th,td,.profile-name,.stat-value,.point-number){color:var(--text)}
html[data-theme="dark"] :is(label,.muted,.nav-button,.stat-label,.stat-foot,.lesson-date span,.lesson-meta,.calendar-head div,.field-hint,.list-subtitle,.booking-legend,.booking-day-count,.close,.page-heading p,.topline,.topline>span,small){color:var(--muted)}
html[data-theme="dark"] a,html[data-theme="dark"] .link{color:#7dd3fc}
html[data-theme="dark"] .eyebrow{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .page-heading h1,html[data-theme="dark"] .booking-intro h2{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}

/* frame: sidebar, header line with the rainbow */
html[data-theme="dark"] .shell,html[data-theme="dark"] .student-shell{background:var(--bg)}
html[data-theme="dark"] .student-shell{border-color:var(--line)}
html[data-theme="dark"] .sidebar{background:#0a0e18;border-right:1px solid var(--line)}
html[data-theme="dark"] .topline{border-bottom:2px solid transparent;border-image:var(--rainbow) 1}
html[data-theme="dark"] .nav-button:hover{color:var(--text);background:var(--surface)}
html[data-theme="dark"] .nav-button.active{color:#e0f2fe;background:linear-gradient(90deg,#0ea5e922,#a855f71a);box-shadow:inset 3px 0 0 #38bdf8,0 0 0 1px #38bdf855,0 0 18px #38bdf822;font-weight:600}
html[data-theme="dark"] .mobile-bottom{background:#0a0e18f2;border-top:1px solid transparent;border-image:var(--rainbow) 1}
html[data-theme="dark"] .mobile-bottom button{color:var(--muted)}
html[data-theme="dark"] .mobile-bottom button.active{color:#e0f2fe}
html[data-theme="dark"] .mobile-bottom button.active .icon{text-shadow:0 0 10px #38bdf8}

/* surfaces: rainbow hairline on top of cards */
html[data-theme="dark"] :is(.panel,.stat,.lesson,.calendar,.point-card,.booking-month,.empty,.date-chip,.note,.tabs,.chat-bubble){background-color:var(--surface);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] :is(.stat,.panel,.lesson,.booking-month){background-image:var(--rainbow);background-size:100% 2px;background-repeat:no-repeat;background-position:top}
html[data-theme="dark"] .stat{box-shadow:0 0 0 1px var(--line),0 10px 30px #00000055}
html[data-theme="dark"] .note{background:var(--surface-2);color:var(--muted)}
html[data-theme="dark"] .note.warning{background:#3b2a0b;color:#fcd34d;border-color:#78350f}
html[data-theme="dark"] .empty{border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .point-card{background:linear-gradient(135deg,#1e1b4b,#3b0764 55%,#4a044e);color:#f5f3ff}
html[data-theme="dark"] .point-card .eyebrow{-webkit-text-fill-color:initial;color:#f0abfc;background:none}
html[data-theme="dark"] .reward-icon,html[data-theme="dark"] .avatar{background:var(--surface-3);color:var(--text)}
html[data-theme="dark"] .date-chip{color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .mock-pill{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* tables, badges */
html[data-theme="dark"] :is(td,th){border-color:var(--line)}
html[data-theme="dark"] .badge{background:#0c4a6e55;color:#7dd3fc;border-color:#075985}
html[data-theme="dark"] .badge.pending{background:#78350f55;color:#fcd34d}
html[data-theme="dark"] .badge.red{background:#7f1d1d66;color:#fca5a5}
html[data-theme="dark"] .badge.grey{background:var(--surface-3);color:var(--muted)}

/* calendars */
html[data-theme="dark"] .calendar-cell{border-color:var(--line)}
html[data-theme="dark"] .calendar-cell.dim{background:#0b0f19}
html[data-theme="dark"] .calendar-cell.today .day,html[data-theme="dark"] .booking-day.is-today .booking-day-number{background:var(--rainbow);color:#0b1020;font-weight:700}
html[data-theme="dark"] .calendar-event{background:#0c4a6e66;color:#bae6fd}
html[data-theme="dark"] .calendar-event.cancelled{background:var(--surface-2);color:var(--muted)}
html[data-theme="dark"] .booking-day{color:var(--text)}
html[data-theme="dark"] .booking-day.outside{opacity:.35}
html[data-theme="dark"] .booking-day:hover{background:var(--surface-2)}
html[data-theme="dark"] .booking-day.is-selected{background:var(--surface-2);box-shadow:0 0 0 1px #38bdf8,0 0 16px #38bdf833}
html[data-theme="dark"] .booking-course{background:#1e3a5f;color:#bae6fd}
html[data-theme="dark"] .booking-course.mine{background:linear-gradient(90deg,#6d28d9,#be185d);color:#fff}
html[data-theme="dark"] .booking-course.full{background:var(--surface-2);color:var(--muted)}
html[data-theme="dark"] .booking-day-status{background:var(--surface-3);color:var(--muted)}
html[data-theme="dark"] .tabs button.selected{background:var(--surface-3);color:#e0f2fe;box-shadow:none}

/* controls */
html[data-theme="dark"] :is(input,select,textarea){background:var(--surface-2);border-color:#2c3650;color:var(--text)}
html[data-theme="dark"] :is(input,select,textarea):focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}
html[data-theme="dark"] button:not(.ghost):not(.secondary):not(.link):not(.close):not(.danger):not(.choice):not(.booking-day):not(.nav-button):not(.mobile-bottom button){background:var(--rainbow-btn);color:#fff;border-color:transparent}
html[data-theme="dark"] .mobile-bottom button{background:transparent!important}
html[data-theme="dark"] button.secondary{background:var(--surface-2);color:var(--text)}
html[data-theme="dark"] button.ghost{background:transparent;color:#bae6fd;border-color:#2c3650}
html[data-theme="dark"] button.ghost:hover{border-color:#38bdf8}
html[data-theme="dark"] button.danger{background:#7f1d1d;color:#fecaca}
html[data-theme="dark"] button:disabled{opacity:.45}
html[data-theme="dark"] .account-choice .choice-card{background:var(--surface-2);border-color:#2c3650}
html[data-theme="dark"] .account-choice .choice-card>span{color:var(--text)}
html[data-theme="dark"] .choice-card:has(input:checked){border-color:#38bdf8;box-shadow:inset 0 0 0 1px #38bdf8,0 0 16px #38bdf822;background:#0c4a6e33}
html[data-theme="dark"] .party-total{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}

/* dialog, toast */
html[data-theme="dark"] dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 20px 80px #000c,0 0 0 1px #38bdf822}
html[data-theme="dark"] dialog::backdrop{background:#000000b3}
html[data-theme="dark"] #toast{background:var(--surface-3);color:var(--text);box-shadow:0 0 0 1px #38bdf855,0 10px 30px #000a}
html[data-theme="dark"] #toast.error{background:#7f1d1d;color:#fee2e2}

/* background art: rainbow aurora glows (screen) instead of tinting (multiply); figure watermark as faint light */
html[data-theme="dark"] body:has(.shell)::before,html[data-theme="dark"] .shell::before{mix-blend-mode:screen}
html[data-theme="dark"] body:has(.shell)::before{background:radial-gradient(ellipse 46% 8% at 42% 40%,rgba(56,189,248,.20),transparent 75%),radial-gradient(ellipse 40% 7% at 58% 57%,rgba(232,121,249,.16),transparent 75%),radial-gradient(ellipse 30% 10% at 50% 47%,rgba(129,140,248,.18),transparent 75%)}
html[data-theme="dark"] .shell::before{background:radial-gradient(ellipse 44% 7% at 46% 60%,rgba(251,146,60,.12),transparent 75%),radial-gradient(ellipse 48% 6% at 55% 43%,rgba(52,211,153,.12),transparent 75%),radial-gradient(ellipse 26% 9% at 62% 52%,rgba(250,204,21,.10),transparent 75%)}
html[data-theme="dark"] .shell::after{mix-blend-mode:screen;opacity:.07}

/* splash / welcome / login */
html[data-theme="dark"] .login{background:var(--bg)}
/* night sky: deep navy depth, a warm halo behind the moon / lotus, slow aurora bands and a few faint stars */
html[data-theme="dark"] :is(.login-story,.splash){position:relative;overflow:hidden;isolation:isolate;background:
  radial-gradient(circle at 50% 38%,rgba(214,160,80,.15),transparent 30%),
  radial-gradient(ellipse 120% 65% at 50% 112%,#16203d 0%,transparent 62%),
  radial-gradient(ellipse 80% 55% at 0% 0%,#0e1530 0%,transparent 62%),
  linear-gradient(180deg,#04060c,#070b16)}
html[data-theme="dark"] .splash{background:
  radial-gradient(circle at 50% 42%,rgba(214,160,80,.13),transparent 34%),
  radial-gradient(ellipse 120% 60% at 50% 115%,#16203d 0%,transparent 62%),
  radial-gradient(ellipse 80% 55% at 0% 0%,#0e1530 0%,transparent 62%),
  linear-gradient(180deg,#04060c,#070b16)}
html[data-theme="dark"] :is(.login-story,.splash)::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;filter:blur(10px);
  background:radial-gradient(ellipse 38% 7% at 38% 30%,rgba(56,189,248,.17),transparent 72%),radial-gradient(ellipse 34% 7% at 64% 72%,rgba(232,121,249,.13),transparent 72%),radial-gradient(ellipse 28% 9% at 56% 52%,rgba(129,140,248,.12),transparent 72%),radial-gradient(ellipse 26% 6% at 30% 80%,rgba(250,204,21,.06),transparent 72%);
  animation:night-drift 22s ease-in-out infinite alternate}
html[data-theme="dark"] :is(.login-story,.splash)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background:radial-gradient(1px 1px at 9% 14%,#fff9,transparent),radial-gradient(1px 1px at 23% 61%,#fff6,transparent),radial-gradient(1.4px 1.4px at 37% 8%,#fffa,transparent),radial-gradient(1px 1px at 52% 88%,#fff5,transparent),radial-gradient(1px 1px at 68% 22%,#fff8,transparent),radial-gradient(1.4px 1.4px at 81% 47%,#fff7,transparent),radial-gradient(1px 1px at 91% 9%,#fff6,transparent),radial-gradient(1px 1px at 14% 86%,#fff5,transparent),radial-gradient(1px 1px at 76% 79%,#fff6,transparent),radial-gradient(1.2px 1.2px at 44% 34%,#fff4,transparent),radial-gradient(1px 1px at 61% 6%,#fff5,transparent),radial-gradient(1px 1px at 4% 42%,#fff5,transparent)}
@keyframes night-drift{to{transform:translate(4%,-3%) rotate(5deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){html[data-theme="dark"] :is(.login-story,.splash)::before{animation:none}}
html[data-theme="dark"] .login-panel{background:radial-gradient(ellipse 60% 42% at 100% 0%,rgba(129,140,248,.10),transparent 70%),radial-gradient(ellipse 55% 40% at 0% 100%,rgba(232,121,249,.07),transparent 70%),#080b15;
  border-left:1px solid transparent;border-image:linear-gradient(180deg,transparent,#38bdf866 30%,#e879f966 70%,transparent) 1}
@media (max-width:760px){html[data-theme="dark"] .login-panel{border-left:0;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,#38bdf866 30%,#e879f966 70%,transparent) 1}}
/* concept link: rainbow hairline pill */
html[data-theme="dark"] a.concept-link{color:var(--text);border:1px solid transparent;background:linear-gradient(#0a0e1a,#0a0e1a) padding-box,var(--rainbow) border-box;box-shadow:0 0 22px #818cf81f}
html[data-theme="dark"] a.concept-link:hover{box-shadow:0 0 28px #a855f744}
html[data-theme="dark"] a.concept-link img{filter:brightness(1.7)}
html[data-theme="dark"] .splash-lotus,html[data-theme="dark"] .splash-lettering,html[data-theme="dark"] .login-lettering,html[data-theme="dark"] .brand-lettering,html[data-theme="dark"] .mobile-lettering,html[data-theme="dark"] .brand img,html[data-theme="dark"] .mobile-brand img{filter:brightness(1.55) saturate(1.1)}
html[data-theme="dark"] .login-logo{filter:invert(1) hue-rotate(180deg) brightness(1.05);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
html[data-theme="dark"] .login-story p{color:var(--muted)}
html[data-theme="dark"] :is(.splash-tagline,.login-tagline){color:#e9d5ff}
html[data-theme="dark"] .welcome .welcome-hello{color:var(--text)}
html[data-theme="dark"] .welcome-lead,html[data-theme="dark"] .splash-status{color:var(--muted)}
html[data-theme="dark"] .welcome-enter{background:var(--rainbow-btn);border-color:transparent;color:#fff;box-shadow:0 0 24px #a855f744}
html[data-theme="dark"] .welcome-concept,html[data-theme="dark"] .login-about{color:#7dd3fc}
html[data-theme="dark"] .login-box h2{color:var(--text)}

html[data-theme="dark"] button.theme-toggle{color:#bae6fd;border-color:#2c3650}
html[data-theme="dark"] button.theme-toggle:hover{border-color:#38bdf8;box-shadow:0 0 12px #38bdf833}
html[data-theme="dark"] .icon-btn{color:#bae6fd;border-color:#2c3650}
html[data-theme="dark"] .icon-btn:hover{color:#e0f2fe;border-color:#38bdf8;box-shadow:0 0 12px #38bdf833}
html[data-theme="dark"] :is(.corner-tools .icon-btn,.corner-tools .theme-toggle){background:#0a0e1acc!important}
/* segmented tabs (month / week / list) stay quiet; only the selected one lights up */
html[data-theme="dark"] .tabs button{background:transparent!important;color:var(--muted)!important;border-color:transparent!important}
html[data-theme="dark"] .tabs button.selected{background:var(--surface-3)!important;color:#e0f2fe!important;box-shadow:inset 0 -2px 0 #38bdf8!important}
html[data-theme="dark"] :is(input[type=radio],input[type=checkbox]){accent-color:#38bdf8}