/* Atlas Liquid Glass */
:root {
  --glass-line: rgba(222,238,255,.17);
  --glass-fill: linear-gradient(145deg,rgba(47,62,80,.78),rgba(19,26,40,.79));
  --glass-shadow: 0 16px 46px rgba(1,5,15,.29), inset 0 1px rgba(255,255,255,.13);
  --glass-ease: cubic-bezier(.2,.75,.25,1);
}
body {
  background: radial-gradient(ellipse at 84% 3%,#263351 0%,transparent 43%),
    radial-gradient(ellipse at 8% 28%,#1b3937 0%,transparent 47%),#0a101b;
  background-attachment: fixed;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
.sidebar, .topbar {
  background: rgba(14,22,33,.83);
  border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.hero, .stat, .panel, .subject-card, .table-wrap, .focus-panel, .timer-panel, .timer-card, .auth-card, .card, dialog {
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  border-radius: 26px;
}
.hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 91% 18%,rgba(110,195,169,.29),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(115,147,242,.28),transparent 57%),var(--glass-fill);
}
.hero::after {
  content: '';
  position: absolute;
  inset: -35% -7% -40% 50%;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(225,251,255,.24);
  box-shadow: inset 0 0 45px rgba(181,236,255,.12),0 0 56px rgba(131,202,232,.1);
  transform: rotate(-26deg);
}
button, .btn, a.link, header a, .pill, select, input:not([type=checkbox]) {
  border-radius: 999px;
}
button, .btn, a.link, .subject-card, .stat, select {
  transition: transform .24s var(--glass-ease),background-color .24s ease,border-color .24s ease,box-shadow .24s ease;
}
button, .btn, select, input:not([type=checkbox]) {
  border-color: var(--glass-line);
}
button:not(.primary), .btn:not(.primary), select, input:not([type=checkbox]) {
  background-color: rgba(25,37,55,.84);
}
.btn.primary, #submit {
  background: linear-gradient(155deg,#e4ffc4,#afe482);
  color: #14210e;
  box-shadow: 0 6px 22px rgba(174,234,115,.24), inset 0 1px rgba(255,255,255,.65);
}
#nav button.active, button[aria-pressed=true] {
  background: linear-gradient(125deg,rgba(176,233,132,.26),rgba(176,233,132,.08));
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(198,251,160,.23);
}
:where(button,a,input,select):focus-visible {
  outline: 2px solid #d2ffa5;
  outline-offset: 3px;
}
@media (hover:hover) and (pointer:fine) {
  button:enabled:hover, .btn:hover, a.link:hover, .subject-card:hover {
    transform: translateY(-2px);
    border-color: rgba(222,242,255,.32);
    box-shadow: 0 9px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.18);
  }
  .stat:hover { transform: translateY(-3px); }
  .table-wrap tbody tr:hover { background: rgba(181,215,255,.08); }
}
button:enabled:active, .btn:active, .subject-card:active { transform: scale(.965); }
dialog::backdrop {
  background: rgba(4,9,19,.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
@media (prefers-reduced-motion:no-preference) {
  .glass-arrive > :is(.intro,.hero,.stats,.toolbar,.table-wrap,.panel,.grid-two), dialog[open] {
    animation: glass-enter .38s var(--glass-ease) both;
  }
  .glass-arrive > :nth-child(2) { animation-delay: 35ms; }
  .glass-arrive > :nth-child(3) { animation-delay: 65ms; }
  @keyframes glass-enter {
    from { opacity: .42; transform: translateY(9px) scale(.989); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  button:enabled:hover, button:enabled:active, .btn:hover, .btn:active, .subject-card:hover, .subject-card:active, .stat:hover { transform: none; }
}


/* The dashboard and account page share the same material. */
body > aside, .shell > header {
  background: rgba(14,22,33,.85);
  border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.form-panel, .story {
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.form-panel { background: var(--glass-fill); }
.story {
  background: radial-gradient(ellipse at 93% 80%,rgba(118,189,141,.29),transparent 60%),var(--glass-fill);
}
.primary {
  background: linear-gradient(155deg,#e4ffc4,#afe482);
  color: #14210e;
  box-shadow: 0 6px 22px rgba(174,234,115,.24),inset 0 1px rgba(255,255,255,.65);
}
.star.on, .star[aria-pressed=true] { color: #d2ffa5; text-shadow: 0 0 12px rgba(174,234,115,.65); }
@media (prefers-reduced-motion:no-preference) {
  .glass-arrive > :is(#results,.subject-grid,.focus-panel), .form-panel, .story {
    animation: glass-enter .38s var(--glass-ease) both;
  }
}

.theme-toggle { white-space: nowrap; margin-inline-end: 8px; }
.account-header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
:root[data-theme=light] {
  color-scheme: light;
  --bg: #edf3fa;
  --panel: #f7faff;
  --line: #c4d0dd;
  --muted: #4e5f74;
  --text: #15263a;
  --green: #30612a;
  --purple: #6552a2;
  --glass-line: #bccbdc;
  --glass-fill: linear-gradient(145deg,rgba(255,255,255,.89),rgba(231,241,251,.88));
  --glass-shadow: 0 14px 32px rgba(53,79,114,.12),inset 0 1px rgba(255,255,255,.85);
}
[data-theme=light] body {
  background: radial-gradient(ellipse at 83% 0,#dce7ff,transparent 48%),
    radial-gradient(ellipse at 8% 33%,#d9efdf,transparent 50%),var(--bg);
  background-attachment: fixed;
}
[data-theme=light] body > aside, [data-theme=light] .shell > header {
  background: rgba(244,249,255,.84);
}
[data-theme=light] .hero, [data-theme=light] .story {
  background: radial-gradient(ellipse at 88% 20%,#d1ebdb,transparent 63%),var(--glass-fill);
}
[data-theme=light] :is(header,.pill,.nav-label,.aside-bottom small,nav button,#subjects button,
  .hero p,.stat label,.stat small,.file-copy small,.legend div,.note,th,footer,
  .story p,.story-foot,label,.privacy) { color: var(--muted); }
[data-theme=light] :is(.hero .eyebrow,.text-button,.orbit span,.orbit i,.orbit b,.star.on) { color:var(--green); }
[data-theme=light] .legend b, [data-theme=light] .dialog-head button { color:var(--text); }
[data-theme=light] :is(button:not(.primary),.btn:not(.primary),select,input:not([type=checkbox]),.tabs) {
  background-color: rgba(248,252,255,.86);
}
[data-theme=light] :is(#nav button.active,.tabs button[aria-pressed=true],nav b) {
  background: #dbeed6;
  color: #234e20;
}
[data-theme=light] :is(.logo,.brand b,#toast) { background:#c5e9ab; color:#173014; }
[data-theme=light] :is(.avatar,.file-icon) { background:#ebe5fa; color:#514181; border-color:#cec4e4; }
[data-theme=light] .badge { background:#e4ebf5; color:#344860; border-color:#c2cfdf; }
[data-theme=light] :is(.progress,.chart-track,.subject-card .bar) { background:#d4deea; }
[data-theme=light] .subject-card .symbol { color:#394f72; }
[data-theme=light] .star.on { text-shadow:none; }
[data-theme=light] .notice { background:#fff4d5; color:#594513; border-color:#d8c58e; }
[data-theme=light] #status { color:#814138; }
[data-theme=light] :is(button,a,input,select):focus-visible { outline-color:#30612a; }
@media (max-width:540px) {
  .theme-toggle { padding:7px 9px; margin-inline-end:4px; }
}