/* Study Lab — design system. Light + dark, cohesive across all pages.
   v10 "friendly" (2026-11): one token set (color, type, space, radius, motion) that every page
   uses, softer cards, pressable buttons, colored answer feedback, Today dashboard, focus timer.
   Every animation is decorative and switches off under prefers-reduced-motion. */
:root{
  /* color */
  --bg:#f5f6fc; --bg-grad1:#eceefe; --bg-grad2:#f7f2fb;
  --fg:#1a1c28; --muted:#646b7b; --card:#ffffff; --card-2:#f9f9ff;
  --line:#e6e7f1; --line-strong:#d3d6e6;
  --accent:#5b5bf0; --accent-2:#8b5cf6; --accent-fg:#ffffff;
  --accent-edge:#3f3fc4;                     /* darker bottom edge of pressable buttons */
  --accent-weak:rgba(91,91,240,.10); --accent-ring:rgba(91,91,240,.35);
  --ok:#0ea371; --ok-weak:rgba(14,163,113,.14); --ok-ink:#07774f; --ok-edge:#0a7a55;
  --warn:#c98a1b; --warn-weak:rgba(201,138,27,.16); --warn-ink:#8f5f08;
  --danger:#e04141; --danger-weak:rgba(224,65,65,.13); --danger-ink:#b42323; --danger-edge:#a92c2c;
  --flame:#ff8a1f;
  --shadow:0 1px 2px rgba(20,22,40,.05), 0 8px 24px rgba(20,22,40,.06);
  --shadow-sm:0 1px 2px rgba(20,22,40,.06);
  --shadow-lg:0 2px 4px rgba(20,22,40,.06), 0 18px 40px rgba(20,22,40,.10);
  /* shape */
  --radius:16px; --radius-sm:10px; --radius-lg:22px; --radius-pill:999px;
  /* type: system UI for text, the rounded system face (iPhone/Mac) for headings + numbers */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:.78rem; --fs-sm:.88rem; --fs-md:1rem; --fs-lg:1.15rem; --fs-xl:1.4rem; --fs-2xl:1.8rem; --fs-3xl:2.4rem;
  /* space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  /* motion */
  --dur-1:.12s; --dur-2:.2s; --dur-3:.35s;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* touch */
  --tap:44px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c0e13; --bg-grad1:#0f1220; --bg-grad2:#0b0d12;
    --fg:#e8e9f1; --muted:#9aa1b0; --card:#151821; --card-2:#181c25;
    --line:#262a34; --line-strong:#353a48;
    --accent:#8b8bff; --accent-2:#a78bfa; --accent-fg:#0c0e13; --accent-edge:#5f5fd6;
    --accent-weak:rgba(139,139,255,.14); --accent-ring:rgba(139,139,255,.45);
    --ok:#2bd39a; --ok-weak:rgba(43,211,154,.15); --ok-ink:#5fe3b4; --ok-edge:#1c9c70;
    --warn:#e0b25a; --warn-weak:rgba(224,178,90,.16); --warn-ink:#efc77a;
    --danger:#ff6b6b; --danger-weak:rgba(255,107,107,.15); --danger-ink:#ff9a9a; --danger-edge:#c94a4a;
    --flame:#ffa24a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0c0e13; --bg-grad1:#0f1220; --bg-grad2:#0b0d12;
  --fg:#e8e9f1; --muted:#9aa1b0; --card:#151821; --card-2:#181c25;
  --line:#262a34; --line-strong:#353a48;
  --accent:#8b8bff; --accent-2:#a78bfa; --accent-fg:#0c0e13; --accent-edge:#5f5fd6;
  --accent-weak:rgba(139,139,255,.14); --accent-ring:rgba(139,139,255,.45);
  --ok:#2bd39a; --ok-weak:rgba(43,211,154,.15); --ok-ink:#5fe3b4; --ok-edge:#1c9c70;
  --warn:#e0b25a; --warn-weak:rgba(224,178,90,.16); --warn-ink:#efc77a;
  --danger:#ff6b6b; --danger-weak:rgba(255,107,107,.15); --danger-ink:#ff9a9a; --danger-edge:#c94a4a;
  --flame:#ffa24a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}   /* never let a stray wide element force horizontal page scroll */
body{
  margin:0; color:var(--fg);
  font:16px/1.6 var(--font-ui);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--bg-grad1), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, var(--bg-grad2), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* ---- header / nav ---- */
header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.65rem 1.1rem; background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:-.01em;
  font-family:var(--font-display);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand::before{
  content:""; width:18px; height:18px; border-radius:6px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 2px 8px var(--accent-ring);
}
nav{display:flex; gap:.25rem; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-left:.25rem;}
nav a{
  text-decoration:none; color:var(--muted); font-weight:600; font-size:.92rem;
  padding:.4rem .7rem; border-radius:var(--radius-pill); white-space:nowrap; transition:color var(--dur-2), background var(--dur-2);
}
nav a:hover{color:var(--fg); background:var(--accent-weak)}
nav a.on{color:var(--accent); background:var(--accent-weak)}

main{max-width:940px; margin:1.6rem auto; padding:0 1rem}
footer{max-width:940px; margin:2.5rem auto 3rem; padding:1rem; color:var(--muted); border-top:1px solid var(--line); font-size:.85rem}

/* ---- typography ---- */
h1,h2,h3{font-family:var(--font-display)}
h1{font-size:var(--fs-2xl); letter-spacing:-.02em; margin:.2rem 0 1rem; line-height:1.2}
h2{font-size:var(--fs-lg); letter-spacing:-.01em; margin:1.5rem 0 .6rem}
h3{font-size:var(--fs-md); margin:1rem 0 .4rem}
a{color:var(--accent)}
.muted{color:var(--muted)}
code{background:var(--accent-weak); color:var(--accent); padding:.08rem .35rem; border-radius:5px; font-size:.9em}
.num{font-family:var(--font-display); font-variant-numeric:tabular-nums}
kbd,.kbd{display:inline-block; min-width:1.4em; padding:0 .35em; border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:6px; font:600 .72rem/1.5 var(--font-ui); color:var(--muted); background:var(--card-2); text-align:center}

/* ---- cards ---- */
.card,section.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem 1.25rem; margin:1.1rem 0; box-shadow:var(--shadow);
}

/* ---- pills / stats ---- */
.stats{display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0}
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--accent-weak); color:var(--accent); font-weight:600;
  border-radius:var(--radius-pill); padding:.3rem .8rem; font-size:.85rem;
}
.pill.ok{background:var(--ok-weak); color:var(--ok-ink)}
.pill.warn{background:var(--warn-weak); color:var(--warn-ink)}
.pill.danger{background:var(--danger-weak); color:var(--danger-ink)}
.pill.plain{background:var(--card-2); color:var(--muted); border:1px solid var(--line)}

/* ---- buttons ----
   Primary = filled accent with a darker bottom edge that flattens when pressed. */
button,.btn{
  font:inherit; font-weight:650; cursor:pointer; border:0; border-radius:12px;
  padding:.55rem 1.05rem; margin:.15rem .25rem .15rem 0; color:var(--accent-fg);
  background:var(--accent);
  box-shadow:0 3px 0 var(--accent-edge);
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-2), background var(--dur-2);
}
button:hover,.btn:hover{filter:brightness(1.06)}
button:active,.btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--accent-edge)}
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px}
button:disabled{cursor:default}
button.ghost,.btn.ghost{
  background:var(--card); color:var(--fg); border:1px solid var(--line-strong); box-shadow:0 2px 0 var(--line-strong);
}
button.ghost:hover,.btn.ghost:hover{background:var(--accent-weak); border-color:var(--accent); filter:none}
button.ghost:active,.btn.ghost:active{box-shadow:0 0 0 var(--line-strong)}
button.ok,.btn.ok{background:var(--ok); color:#fff; box-shadow:0 3px 0 var(--ok-edge)}
button.ok:active,.btn.ok:active{box-shadow:0 1px 0 var(--ok-edge)}

/* multiple-choice option buttons (Study + Watch): neutral until answered */
button.opt, button.wopt{
  background:var(--card-2); color:var(--fg); border:1px solid var(--line-strong);
  box-shadow:none; font-weight:500; text-align:left;
}
button.opt:hover, button.wopt:hover{ filter:none; background:var(--accent-weak); border-color:var(--accent); }
button.opt:disabled, button.wopt:disabled{ opacity:1; cursor:default; }

/* compact, neutral buttons inside table rows (View / Rename / ⭐ / delete) */
.row-actions button, .row-actions a button{
  padding:.3rem .55rem; font-size:.82rem; font-weight:600;
  background:transparent; color:var(--fg); border:1px solid var(--line-strong); box-shadow:none;
}
.row-actions a{text-decoration:none}
.row-actions button:hover{background:var(--accent-weak); border-color:var(--accent); color:var(--accent); filter:none}

/* ---- inputs ---- */
input,select,textarea{
  font:inherit; color:var(--fg); background:var(--card);
  padding:.5rem .6rem; border:1px solid var(--line-strong); border-radius:10px;
  margin:.2rem .3rem .2rem 0; transition:border-color var(--dur-2), box-shadow var(--dur-2);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
textarea{width:100%; display:block}
::placeholder{color:var(--muted); opacity:.8}

/* ---- tables ---- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:12px; margin:.5rem 0; background:var(--card)}
.table-wrap table{border:0; margin:0; border-radius:0; min-width:560px}
table{width:100%; border-collapse:separate; border-spacing:0; margin:.5rem 0;
  background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
th,td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line)}
thead th{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--card-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--accent-weak)}
.hide-sm{} /* hidden on phones via the breakpoint below */

/* ---- progress bars ---- */
.bar{background:var(--line); border-radius:var(--radius-pill); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}

/* ---- misc ---- */
.out{background:#0d1117; color:#e6edf3; padding:.9rem; border-radius:12px; white-space:pre-wrap;
  min-height:1rem; font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; overflow:auto; border:1px solid var(--line)}
.path{background:var(--accent-weak); color:var(--accent); padding:.5rem .6rem; border-radius:8px; font:13px/1.4 ui-monospace,Consolas,monospace; overflow:auto}
.notice{background:var(--warn-weak); border:1px solid var(--warn); padding:.7rem 1rem; border-radius:12px}
.hidden{display:none}
.flashcard{border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; margin:.6rem 0; background:var(--card); box-shadow:var(--shadow-sm)}
.flashcard .front{font-weight:650}
.flashcard .back{margin:.4rem 0; color:var(--accent)}
details summary{cursor:pointer}

/* ---- phones (iPhone etc.) ---- */
@media (max-width:640px){
  main{margin:1rem auto; padding:0 .85rem}
  h1{font-size:1.5rem} h2{font-size:1.08rem}
  .card,section.card{padding:.95rem 1rem; margin:.85rem 0; border-radius:var(--radius)}
  header{gap:.45rem; padding:.55rem .7rem}
  .brand{font-size:.98rem}
  nav{gap:.1rem}
  nav a{padding:.32rem .5rem; font-size:.86rem}
  #theme-toggle{padding:.3rem .5rem !important}
  select,input{max-width:100%}
  textarea{max-width:100%}
  button,.btn{padding:.6rem .9rem}
  .pill{font-size:.8rem; padding:.28rem .7rem}
  .table-wrap table{min-width:480px}
  .hide-sm{display:none !important}   /* drop low-priority columns on phones */
}

/* =====================================================================
   v7 — navigation, dashboard, practice + shared quiz components
   ===================================================================== */
a.brand{text-decoration:none}
.icon-btn{margin-left:auto; padding:.35rem .6rem !important}
.topnav{align-items:center; overflow:visible}
details.more{position:relative}
details.more > summary{list-style:none; color:var(--muted); font-weight:600; font-size:.92rem;
  padding:.4rem .7rem; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap}
details.more > summary::-webkit-details-marker{display:none}
details.more[open] > summary, details.more.on > summary, details.more > summary:hover{color:var(--accent); background:var(--accent-weak)}
.more-menu{position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:220px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px}
.more-menu a, .sheet a{display:block; padding:.6rem .8rem; border-radius:9px; color:var(--fg); text-decoration:none; font-weight:550}
.more-menu a:hover, .sheet a:hover{background:var(--accent-weak); color:var(--accent)}
/* PC header: spread the "More" pages out inline as the window gets wider (Hector 2026-10-28).
   <960px: Today..Progress + More · 960-1179px: + Library, Add files · >=1180px: everything, no More. */
.topnav a.nx1, .topnav a.nx2{display:none}
details.more.on1 > summary{color:var(--accent); background:var(--accent-weak)}
@media (min-width:960px){
  .topnav a.nx1{display:inline-block}
  .more-menu a.mx1{display:none}
  details.more.on1:not(.on) > summary:not(:hover){color:var(--muted); background:none}
}
@media (min-width:1180px){
  .topnav a.nx2{display:inline-block}
  .topnav details.more{display:none}
}
/* count badge on a nav item (due cards) */
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem; height:1.25rem; padding:0 .32rem;
  border-radius:var(--radius-pill); background:var(--accent); color:var(--accent-fg); font:700 .68rem/1 var(--font-ui);
  margin-left:.3rem; vertical-align:1px}
.badge:empty,.badge[hidden]{display:none}

/* header pills: MCAT countdown + live timer */
.mcat-cd{margin-left:auto; white-space:nowrap; font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums;
  padding:.3rem .7rem; border-radius:var(--radius-pill); background:var(--accent-weak); color:var(--accent);
  border:1px solid var(--accent-ring)}
.mcat-cd.soon{background:var(--warn-weak); color:var(--warn-ink); border-color:var(--warn)}
.mcat-cd:empty{display:none}
.timer-pill{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; text-decoration:none;
  font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; padding:.3rem .75rem .3rem .55rem;
  border-radius:var(--radius-pill); background:var(--ok-weak); color:var(--ok-ink); border:1px solid color-mix(in srgb, var(--ok) 55%, transparent)}
.timer-pill[hidden]{display:none}
.timer-pill .tp-dot{width:.55rem; height:.55rem; border-radius:50%; background:var(--ok); flex:none}
.timer-pill.paused{background:var(--card-2); color:var(--muted); border-color:var(--line-strong)}
.timer-pill.paused .tp-dot{background:var(--muted)}
.timer-pill.low{background:var(--warn-weak); color:var(--warn-ink); border-color:var(--warn)}
.timer-pill.low .tp-dot{background:var(--warn)}
.timer-pill:not([hidden]) + .mcat-cd{margin-left:.5rem}
.timer-pill:not([hidden]){margin-left:auto}

/* phone bottom tab bar */
.tabbar, .sheet{display:none}
.card > h2:first-child, section.card > h2:first-child{margin-top:0}
@media (max-width:760px){
  .topnav{display:none}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:saturate(1.4) blur(10px);
    border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar > a, .tabbar > button{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; position:relative;
    min-height:52px; font-size:.7rem; font-weight:650; color:var(--muted); text-decoration:none; padding:5px 0 3px; border-radius:12px;
    cursor:pointer; margin:0; background:none; border:0; box-shadow:none; font-family:inherit}
  .tabbar > button:hover{filter:none}
  .tabbar > button:active, .tabbar > a:active{transform:scale(.96)}
  .tabbar span{font-size:1.25rem; line-height:1.2}
  .tabbar .on, .tabbar > button.open{color:var(--accent); background:var(--accent-weak)}
  .tabbar .badge{position:absolute; top:2px; left:calc(50% + 6px); margin:0}
  .sheet{display:block; position:fixed; left:8px; right:8px; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:80;
    background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:8px}
  .sheet[hidden]{display:none}
  .sheet a{padding:.8rem .9rem; font-size:1rem}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  footer{display:none}
  /* static header; no backdrop blur here because it would trap the fixed timer pill inside the header */
  header{position:static; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--card)}
  /* the live timer floats just above the tab bar so it stays in view while scrolling */
  .timer-pill:not([hidden]){position:fixed; left:12px; bottom:calc(70px + env(safe-area-inset-bottom)); z-index:65;
    margin:0; padding:.45rem .85rem .45rem .65rem; box-shadow:var(--shadow-lg); background:var(--card)}
  .timer-pill.low:not([hidden]){background:color-mix(in srgb, var(--warn) 18%, var(--card))}
}

/* buttons: sizes + consistent big primary on phones */
.btn-lg, button.btn-lg{padding:.8rem 1.3rem; font-size:1.02rem; border-radius:14px; min-height:var(--tap)}
.btn-xl, button.btn-xl{padding:1rem 1.6rem; font-size:1.12rem; border-radius:16px; min-height:56px; box-shadow:0 4px 0 var(--accent-edge)}
.btn-xl:active{box-shadow:0 1px 0 var(--accent-edge); transform:translateY(3px)}
.btn-row{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
a.btn{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none}
a.btn.ghost{color:var(--fg)}
@media (max-width:640px){
  .btn-lg, button.btn-lg, .btn-xl, button.btn-xl{width:100%; justify-content:center}
  input, select, textarea{font-size:16px}   /* stops iPhone zooming into fields */
}
.lead{font-size:1.02rem; color:var(--muted); margin:-.4rem 0 1rem}

/* segmented tabs (Practice: weak spots | one lecture) */
.seg{display:inline-flex; background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:3px; gap:3px; margin:0 0 1rem}
.seg a{padding:.5rem .95rem; border-radius:11px; font-weight:650; font-size:.92rem; color:var(--muted); text-decoration:none}
.seg a.on{background:var(--card); color:var(--accent); box-shadow:var(--shadow-sm)}
@media (max-width:640px){ .seg{display:flex} .seg a{flex:1; text-align:center} }

/* ---- Today dashboard (v7 parts, still used) ---- */
.hero{position:relative; overflow:hidden; border:1px solid var(--accent-ring);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--card)), var(--card) 70%)}
.hero .kicker{font-size:.78rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.hero h2{margin:.25rem 0 .35rem; font-size:1.35rem}
.hero p{margin:0 0 .9rem; color:var(--muted)}
.hero .meta{font-size:.85rem; color:var(--muted); margin-left:.4rem}
.statrow{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin:.4rem 0 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.65rem .75rem}
.stat b{display:block; font-size:1.3rem; letter-spacing:-.02em; font-family:var(--font-display)}
.stat span{font-size:.78rem; color:var(--muted)}
@media (max-width:640px){ .statrow{grid-template-columns:repeat(2,1fr)} }
.nextlist{display:flex; flex-direction:column; gap:.5rem}
.nextitem{display:flex; align-items:center; gap:.8rem; padding:.75rem .85rem; border:1px solid var(--line);
  border-radius:14px; background:var(--card); text-decoration:none; color:var(--fg); transition:border-color var(--dur-2), background var(--dur-2)}
.nextitem:hover{border-color:var(--accent); background:var(--accent-weak)}
.nextitem .ic{font-size:1.4rem; width:2rem; text-align:center}
.nextitem .tx{flex:1; min-width:0}
.nextitem .tx b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nextitem .tx small{color:var(--muted)}
.nextitem .go{color:var(--accent); font-weight:700}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{display:inline-flex; gap:.35rem; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  padding:.25rem .7rem; font-size:.85rem; background:var(--card); color:var(--fg)}
a.chip{text-decoration:none}
a.chip:hover{border-color:var(--accent)}
.chip small{color:var(--muted)}
.chip.on{border-color:var(--accent); background:var(--accent-weak); color:var(--accent)}
.chip.bad{border-color:var(--danger); background:var(--danger-weak)}
.chip.mid{border-color:var(--warn); background:var(--warn-weak)}

/* ---- loading / error ---- */
.loadbox{display:flex; gap:.8rem; align-items:center; padding:1rem; border:1px dashed var(--line-strong);
  border-radius:14px; background:var(--card-2)}
.loadbox.slim{padding:.7rem .9rem; margin:.6rem 0}
.lb-msg{font-weight:650}
.lb-sub{font-size:.82rem; margin-top:.15rem}
.spinner{width:22px; height:22px; flex:none; border-radius:50%; border:3px solid var(--accent-weak);
  border-top-color:var(--accent); animation:slspin .8s linear infinite}
@keyframes slspin{to{transform:rotate(360deg)}}
.progress{height:8px; background:var(--line); border-radius:var(--radius-pill); overflow:hidden; margin:.45rem 0 .1rem}
.progress > div{height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:var(--radius-pill); transition:width var(--dur-3) var(--ease)}
.errbox{display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:.9rem 1rem; border:1px solid var(--danger); background:var(--danger-weak); border-radius:14px}
.errbox button{flex:none}

/* ---- quiz (shared by Practice pages) ---- */
.scorebar{position:sticky; top:0; z-index:20; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:.55rem .8rem .4rem; margin:0 0 .8rem; box-shadow:var(--shadow-sm)}
@media (min-width:761px){ .scorebar{top:58px} }
.sb-row{display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; flex-wrap:wrap}
.sb-score{font-size:.88rem}
.sb-combo{font-size:.8rem; font-weight:750; color:var(--flame); margin-left:.4rem}
.sb-combo:empty{display:none}
.q-card{border:1px solid var(--line); border-radius:16px; padding:.95rem; margin:0 0 .9rem; background:var(--card);
  transition:border-color var(--dur-2), box-shadow var(--dur-2)}
.q-card.is-right{border-color:color-mix(in srgb, var(--ok) 60%, var(--line)); box-shadow:0 0 0 3px var(--ok-weak)}
.q-card.is-wrong{border-color:color-mix(in srgb, var(--danger) 55%, var(--line)); box-shadow:0 0 0 3px var(--danger-weak)}
.q-stem{display:flex; gap:.6rem; margin-bottom:.6rem; font-weight:600; line-height:1.45}
.q-num{flex:none; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent-weak); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:750}
.q-card.is-right .q-num{background:var(--ok); color:#fff}
.q-card.is-wrong .q-num{background:var(--danger); color:#fff}
button.q-opt{display:flex; gap:.65rem; align-items:flex-start; width:100%; text-align:left; margin:.4rem 0;
  min-height:50px; padding:.75rem .85rem; background:var(--card-2); color:var(--fg); border:1.5px solid var(--line-strong);
  box-shadow:0 2px 0 var(--line-strong); font-weight:500; line-height:1.4; border-radius:14px}
button.q-opt:hover{filter:none; border-color:var(--accent); background:var(--accent-weak)}
button.q-opt:active{box-shadow:none}
button.q-opt:disabled{cursor:default; opacity:1; transform:none}
button.q-opt:disabled:not(.right):not(.wrong){opacity:.7}
button.q-opt.right{background:var(--ok-weak); border-color:var(--ok); box-shadow:0 2px 0 var(--ok)}
button.q-opt.wrong{background:var(--danger-weak); border-color:var(--danger); box-shadow:0 2px 0 var(--danger)}
.q-letter{flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem;
  border-radius:8px; border:1.5px solid var(--line-strong); font-weight:750; font-size:.82rem; color:var(--muted)}
button.q-opt.right .q-letter{background:var(--ok); border-color:var(--ok); color:#fff}
button.q-opt.wrong .q-letter{background:var(--danger); border-color:var(--danger); color:#fff}
.q-expl{margin-top:.6rem; font-size:.95rem; line-height:1.55}
/* the verdict banner: icon + word + color (never color alone) */
.q-verdict{display:flex; align-items:center; gap:.5rem; font-weight:750; margin:0 0 .4rem; padding:.5rem .75rem;
  border-radius:12px; font-family:var(--font-display)}
.q-verdict .qv-ic{display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%;
  color:#fff; font-size:.9rem; flex:none}
.q-verdict.ok{background:var(--ok-weak); color:var(--ok-ink)}
.q-verdict.ok .qv-ic{background:var(--ok)}
.q-verdict.bad{background:var(--danger-weak); color:var(--danger-ink)}
.q-verdict.bad .qv-ic{background:var(--danger)}
.oe-right{color:var(--ok-ink); margin:.15rem 0}
.oe-wrong{color:var(--muted); margin:.15rem 0}
.q-tip{margin-top:.6rem; padding:.55rem .75rem; border-left:3px solid var(--accent-2); background:var(--accent-weak); border-radius:8px}
.donebox{display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:1.1rem; border-radius:18px;
  border:1px solid var(--accent-ring); background:var(--accent-weak); margin:.5rem 0 1rem}
.donebox.great{border-color:color-mix(in srgb, var(--ok) 55%, transparent); background:var(--ok-weak)}
.db-big{font-size:2.2rem; font-weight:800; color:var(--accent); letter-spacing:-.03em; font-family:var(--font-display)}
.donebox.great .db-big{color:var(--ok-ink)}
.db-text{flex:1; min-width:180px}
.db-actions{display:flex; gap:.4rem; flex-wrap:wrap}

/* answer feedback motion (decorative; off under reduced motion) */
@keyframes sl-pop{0%{transform:scale(1)} 40%{transform:scale(1.025)} 100%{transform:scale(1)}}
@keyframes sl-shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
@keyframes sl-rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes sl-fade{from{opacity:0} to{opacity:1}}
.fb-pop{animation:sl-pop .32s var(--ease-spring)}
.fb-shake{animation:sl-shake .38s var(--ease)}
.fb-rise{animation:sl-rise .25s var(--ease) both}

/* ---- Practice builder ---- */
.fmt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.4rem 0 .8rem}
@media (max-width:640px){ .fmt-grid{grid-template-columns:1fr} }
.fmt{position:relative; display:block; border:1.5px solid var(--line-strong); border-radius:16px; padding:.85rem .95rem;
  cursor:pointer; background:var(--card); transition:border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
  box-shadow:0 2px 0 var(--line-strong)}
.fmt:hover{border-color:var(--accent)}
.fmt input{position:absolute; opacity:0; pointer-events:none}
.fmt b{display:block; font-size:1rem; font-family:var(--font-display)}
.fmt small{color:var(--muted)}
.fmt.sel{border-color:var(--accent); background:var(--accent-weak); box-shadow:0 0 0 3px var(--accent-ring)}
.step{font-size:.78rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:.2rem 0 .3rem}
details.topics-edit > summary{cursor:pointer; color:var(--accent); font-weight:600; list-style:none}
details.topics-edit > summary::-webkit-details-marker{display:none}
.topic-chip{border:1px solid var(--line-strong); border-radius:var(--radius-pill); padding:.3rem .75rem; cursor:pointer;
  font-size:.88rem; background:var(--card); display:inline-flex; gap:.35rem; align-items:center; user-select:none}
.topic-chip input{margin:0}
.topic-chip.off{opacity:.45}

/* flashcard review (Cards page) */
.fc-stage{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); padding:1.4rem 1.2rem; min-height:200px;
  display:flex; flex-direction:column; justify-content:center; text-align:center; box-shadow:var(--shadow);
  cursor:pointer; position:relative}
.fc-stage.flipped{cursor:default}
.fc-front{font-size:1.2rem; font-weight:650; font-family:var(--font-display); line-height:1.4}
.fc-back{margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line-strong); color:var(--fg); font-size:1.05rem}
.fc-back b, .fc-back strong{color:var(--accent)}
.fc-hint{position:absolute; bottom:.5rem; left:0; right:0; font-size:.75rem; color:var(--muted)}
.fc-top{display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted); margin:.6rem 0 .2rem}
.grade-row{display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-top:.9rem}
.grade-row button{margin:0; padding:.65rem .3rem; font-size:.95rem; min-height:58px; border-radius:14px; line-height:1.2}
.grade-row small{display:block; font-weight:600; opacity:.85; font-size:.72rem; margin-top:.15rem}
.grade-row .kbd{display:none}
@media (hover:hover) and (min-width:761px){ .grade-row .kbd{display:inline-block; margin-left:.3rem; color:inherit; background:transparent; border-color:currentColor; opacity:.6} }
button.g-again{background:var(--danger); color:#fff; box-shadow:0 3px 0 var(--danger-edge)}
button.g-hard{background:var(--warn); color:#1d1300; box-shadow:0 3px 0 color-mix(in srgb, var(--warn) 70%, #000)}
button.g-good{background:var(--ok); color:#04281b; box-shadow:0 3px 0 var(--ok-edge)}
button.g-easy{background:var(--accent); color:var(--accent-fg); box-shadow:0 3px 0 var(--accent-edge)}
.grade-row button:active{box-shadow:none}
.fc-done{text-align:center; padding:.6rem 0}
.fc-done .big{font-size:2.6rem; line-height:1}

/* Watch page: keep the review-note bubble above the phone tab bar */
@media (max-width:760px){
  #rf-open{bottom:calc(80px + env(safe-area-inset-bottom)) !important; right:12px !important}
  #rf-panel{bottom:calc(130px + env(safe-area-inset-bottom)) !important}
}

/* =====================================================================
   v10 — friendly Today dashboard, focus timer, toast, Progress tiles
   ===================================================================== */
.dash-head{display:flex; justify-content:space-between; align-items:flex-end; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 .9rem}
.dash-head h1{margin:0}
.dash-head .lead{margin:.2rem 0 0}

/* Today's plan */
.plan{padding:1.3rem 1.35rem}
.plan .kicker{display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap}
.plan-steps{list-style:none; margin:.8rem 0 1.1rem; padding:0; display:flex; flex-direction:column; gap:.45rem}
.plan-step a{display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:14px; text-decoration:none; color:var(--fg);
  background:color-mix(in srgb, var(--card) 70%, transparent); border:1px solid var(--line); transition:border-color var(--dur-2), background var(--dur-2)}
.plan-step a:hover{border-color:var(--accent); background:var(--card)}
.plan-step .ps-n{flex:none; width:1.75rem; height:1.75rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; background:var(--accent-weak); color:var(--accent); font-family:var(--font-display)}
.plan-step.first .ps-n{background:var(--accent); color:var(--accent-fg)}
.plan-step .ps-tx{flex:1; min-width:0}
.plan-step .ps-tx b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650}
.plan-step .ps-tx small{display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plan-step .ps-t{flex:none; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums}
.plan-cta{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.plan-cta .sub{font-size:.88rem; color:var(--muted)}
.linkish{background:none; border:0; box-shadow:none; color:var(--accent); padding:.2rem 0; margin:0; font-weight:650; text-decoration:underline; text-underline-offset:3px}
.linkish:hover{filter:none}
.linkish:active{transform:none; box-shadow:none}

/* tiles */
.dash-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin:.2rem 0 1rem}
@media (max-width:860px){ .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem .95rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.2rem; min-width:0;
  text-decoration:none; color:var(--fg)}
a.tile:hover{border-color:var(--accent)}
.tile .t-label{font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.tile .t-big{font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.tile .t-big small{font-size:.95rem; font-weight:700; color:var(--muted); letter-spacing:0}
.tile .t-sub{font-size:.82rem; color:var(--muted); line-height:1.35}
.tile.streak .t-big{color:var(--flame)}
.tile.streak.cold .t-big{color:var(--muted)}
.tile-ring{flex-direction:row; align-items:center; gap:.75rem}

/* ring (daily goal + focus timer): set --p from 0 to 1 */
.ring{--p:0; --size:64px; --stroke:3.4px; position:relative; width:var(--size); height:var(--size); flex:none}
.ring > svg{width:100%; height:100%; transform:rotate(-90deg); display:block}
.ring .r-track{fill:none; stroke:var(--line); stroke-width:var(--stroke)}
.ring .r-fill{fill:none; stroke:var(--ok); stroke-width:var(--stroke); stroke-linecap:round;
  stroke-dasharray:100px; stroke-dashoffset:calc(100px - 100px * var(--p)); transition:stroke-dashoffset .6s var(--ease);
  opacity:calc(var(--p) * 1000)}   /* no round-cap dot at 0% */
.ring .r-mid{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); font-weight:800; font-size:.9rem; line-height:1.1}

/* 7-day week strip */
.weekstrip{display:flex; gap:.3rem; margin-top:.35rem}
.weekstrip .wd{flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; font-size:.66rem; font-weight:700; color:var(--muted)}
.weekstrip .wd i{width:100%; max-width:1.5rem; aspect-ratio:1; border-radius:50%; border:2px solid var(--line-strong); background:var(--card)}
.weekstrip .wd.on i{background:var(--flame); border-color:var(--flame)}
.weekstrip .wd.today i{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent-ring)}
.weekstrip .wd.today{color:var(--fg)}

/* focus timer (Forest/Flora-style: a sprout grows as the minutes pass) */
.focus{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center}
@media (max-width:520px){ .focus{grid-template-columns:1fr; justify-items:center; text-align:center} }
.focus .ring{--size:140px; --stroke:2.6px}
.focus .ring .r-fill{stroke:var(--ok); transition:stroke-dashoffset 1s linear}
.focus .ring .r-mid{flex-direction:column; gap:.1rem}
.focus .f-time{font-size:1.45rem; font-variant-numeric:tabular-nums}
.focus .f-state{font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.sprout{width:34px; height:34px; display:block}
.sprout .sp-stem{stroke:var(--ok); stroke-width:3; stroke-linecap:round; fill:none}
.sprout .sp-leaf{fill:var(--ok); transform-box:fill-box; transition:transform .6s var(--ease)}
.sprout .sp-leaf.l1{transform-origin:100% 100%}
.sprout .sp-leaf.l2{transform-origin:0% 100%}
.sprout .sp-soil{fill:color-mix(in srgb, var(--warn) 55%, var(--card))}
.focus .presets{display:flex; gap:.4rem; flex-wrap:wrap; margin:.5rem 0}
@media (max-width:520px){ .focus .presets, .focus .btn-row{justify-content:center} }
.preset{border:1.5px solid var(--line-strong); background:var(--card); color:var(--fg); border-radius:var(--radius-pill);
  padding:.4rem .9rem; font-weight:700; box-shadow:0 2px 0 var(--line-strong); min-height:40px}
.preset:hover{border-color:var(--accent); filter:none}
.preset.sel{border-color:var(--accent); background:var(--accent-weak); color:var(--accent); box-shadow:0 2px 0 var(--accent-ring)}
.focus .f-note{font-size:.85rem; color:var(--muted); margin:.3rem 0 0}

/* empty states */
.empty{display:flex; gap:.9rem; align-items:center; padding:.9rem 1rem; border:1px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--card-2)}
.empty .e-ic{font-size:1.8rem; flex:none}
.empty p{margin:0}

/* toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; max-width:min(92vw,460px);
  background:var(--fg); color:var(--bg); padding:.7rem 1rem; border-radius:14px; box-shadow:var(--shadow-lg);
  font-weight:600; display:flex; gap:.6rem; align-items:center}
.toast[hidden]{display:none}
.toast.show{animation:sl-rise .25s var(--ease) both}
@media (max-width:760px){ .toast{bottom:calc(84px + env(safe-area-inset-bottom))} }

/* Progress page: status badges */
.status{display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:700; border-radius:var(--radius-pill);
  padding:.15rem .6rem; white-space:nowrap}
.status.mastered{background:var(--ok-weak); color:var(--ok-ink)}
.status.learning{background:var(--warn-weak); color:var(--warn-ink)}
.status.not_started{background:var(--card-2); color:var(--muted); border:1px solid var(--line)}

/* Active Recall (Watch): feedback colors from the tokens so they read in light AND dark */
.rc-fb{display:block; font-weight:650; padding:.5rem .7rem; border-radius:10px}
.rc-fb.ok{background:var(--ok-weak); color:var(--ok-ink)}
.rc-fb.bad{background:var(--danger-weak); color:var(--danger-ink)}
.rc-fb.late{background:var(--warn-weak); color:var(--warn-ink)}
.rc-opt.rc-right, .wopt.rc-right{background:var(--ok-weak) !important; border-color:var(--ok) !important}
.rc-opt.rc-wrong, .wopt.rc-wrong{background:var(--danger-weak) !important; border-color:var(--danger) !important}
.rc-continue{display:block; width:100%; margin-top:12px; min-height:var(--tap); font-size:1.02rem}

/* ---- reduced motion: keep every state change, drop the movement ---- */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  .fb-pop,.fb-shake,.fb-rise,.toast.show{animation:none !important}
  .spinner{animation-duration:2.4s}
  button:active,.btn:active,.btn-xl:active,.tabbar > a:active,.tabbar > button:active{transform:none}
  .ring .r-fill,.sprout .sp-leaf,.progress > div,.q-card,.nextitem,.plan-step a,.fmt{transition:none}
}

/* ---- first-login tour (online copy; static/tour.js) ---- */
.tour-veil{position:fixed; inset:0; z-index:300; background:transparent}
.tour-veil.dark{background:rgba(10,12,24,.55)}
.tour-spot{position:fixed; z-index:301; border-radius:var(--radius-sm); pointer-events:none;
  box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(10,12,24,.55); transition:all var(--dur-2) var(--ease)}
.tour-card{position:fixed; z-index:302; background:var(--card); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:var(--sp-4) var(--sp-4) var(--sp-3);
  max-height:calc(100vh - 32px); overflow:auto}
.tour-card h2{margin:.15rem 0 .35rem; font-size:var(--fs-lg)}
.tour-card p{margin:0 0 var(--sp-3); line-height:1.5}
.tour-step{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.tour-btns{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.tour-btns button{min-height:var(--tap)}
.start-here .btn-row{flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){ .tour-spot{transition:none} }