/* =====================================================================
   Study Hub UI — shadcn/ui design language (neutral palette, Geist type,
   radius 0.625rem), ChatGPT-style sidebar shell, light + dark themes.
   Loaded LAST on every page; it maps the older tokens onto shadcn tokens.
   ===================================================================== */
:root{
  --radius:10px;
  /* shadcn neutral — light */
  --background:#ffffff; --foreground:#0a0a0a;
  --card:#ffffff; --card-foreground:#0a0a0a;
  --popover:#ffffff;
  --primary:#171717; --primary-foreground:#fafafa;
  --secondary:#f5f5f5; --secondary-foreground:#171717;
  --muted-bg:#f5f5f5; --muted-foreground:#737373;
  --accent-bg:#f5f5f5;
  --border:#e5e5e5; --input:#e5e5e5; --ring:#a3a3a3;
  --sidebar:#f9f9f9; --sidebar-hover:#ececec; --sidebar-active:#e3e3e3; --sidebar-border:#ececec;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .08),0 1px 2px -1px rgb(0 0 0 / .06);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --overlay:rgb(0 0 0 / .5);

  /* legacy tokens used across lessons, widgets and SVG figures */
  --bg:var(--background); --surface:var(--card); --sunk:var(--muted-bg); --ink:var(--foreground);
  --muted:var(--muted-foreground); --line:var(--border);
  --code:#f6f6f6; --codeink:#1f2328;
  --teal:#0f766e; --teal-soft:#effcf9; --gold:#a16207; --gold-soft:#fefbeb; --blue:#2563eb; --blue-soft:#eff5ff;
  --ok:#15803d; --ok-soft:#effdf3; --bad:#dc2626; --bad-soft:#fef2f2; --purple:#7c3aed; --purple-soft:#f6f3ff;

  --f-d:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-b:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-m:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sbw:260px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;
  --background:#212121; --foreground:#ececec; --card:#262626; --card-foreground:#ececec; --popover:#2a2a2a;
  --primary:#ececec; --primary-foreground:#171717; --secondary:#2f2f2f; --secondary-foreground:#ececec;
  --muted-bg:#2f2f2f; --muted-foreground:#a3a3a3; --accent-bg:#2f2f2f;
  --border:#ffffff1a; --input:#ffffff26; --ring:#737373;
  --sidebar:#171717; --sidebar-hover:#212121; --sidebar-active:#2a2a2a; --sidebar-border:#ffffff0f;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .3); --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .4); --shadow-lg:0 12px 32px -6px rgb(0 0 0 / .6);
  --overlay:rgb(0 0 0 / .6);
  --code:#1a1a1a; --codeink:#e6e6e6;
  --bg:var(--background); --surface:var(--card); --sunk:var(--muted-bg); --ink:var(--foreground); --muted:var(--muted-foreground); --line:var(--border);
  --teal:#2dd4bf; --teal-soft:#2dd4bf17; --gold:#fbbf24; --gold-soft:#fbbf2414; --blue:#60a5fa; --blue-soft:#60a5fa17;
  --ok:#4ade80; --ok-soft:#4ade8017; --bad:#f87171; --bad-soft:#f8717117; --purple:#a78bfa; --purple-soft:#a78bfa17;}}
:root[data-theme="dark"]{color-scheme:dark;
  --background:#212121; --foreground:#ececec; --card:#262626; --card-foreground:#ececec; --popover:#2a2a2a;
  --primary:#ececec; --primary-foreground:#171717; --secondary:#2f2f2f; --secondary-foreground:#ececec;
  --muted-bg:#2f2f2f; --muted-foreground:#a3a3a3; --accent-bg:#2f2f2f;
  --border:#ffffff1a; --input:#ffffff26; --ring:#737373;
  --sidebar:#171717; --sidebar-hover:#212121; --sidebar-active:#2a2a2a; --sidebar-border:#ffffff0f;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .3); --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .4); --shadow-lg:0 12px 32px -6px rgb(0 0 0 / .6);
  --overlay:rgb(0 0 0 / .6);
  --code:#1a1a1a; --codeink:#e6e6e6;
  --bg:var(--background); --surface:var(--card); --sunk:var(--muted-bg); --ink:var(--foreground); --muted:var(--muted-foreground); --line:var(--border);
  --teal:#2dd4bf; --teal-soft:#2dd4bf17; --gold:#fbbf24; --gold-soft:#fbbf2414; --blue:#60a5fa; --blue-soft:#60a5fa17;
  --ok:#4ade80; --ok-soft:#4ade8017; --bad:#f87171; --bad-soft:#f8717117; --purple:#a78bfa; --purple-soft:#a78bfa17;}

:root[data-theme="light"]{color-scheme:light;--bg:var(--background); --surface:var(--card); --sunk:var(--muted-bg); --ink:var(--foreground); --muted:var(--muted-foreground); --line:var(--border)}
/* ---------------------------------------------------------------- base */
html{-webkit-text-size-adjust:100%;background:var(--background)}
body{background:var(--background);color:var(--foreground);font-family:var(--f-b);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"rlig" 1,"calt" 1}
::selection{background:color-mix(in srgb,var(--blue) 25%,transparent)}
a{color:var(--foreground);text-decoration-color:color-mix(in srgb,var(--foreground) 35%,transparent);text-underline-offset:3px}
a:hover{text-decoration-color:var(--foreground)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-d);color:var(--foreground);letter-spacing:-.025em}
h1{font-size:clamp(28px,4.2vw,38px);font-weight:700;line-height:1.15}
h2{font-size:22px;font-weight:650;margin-top:44px;padding-top:4px}
h3{font-size:17.5px;font-weight:600}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--border)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--foreground) 18%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--foreground) 16%,transparent);border-radius:99px;border:3px solid transparent;background-clip:content-box}
code{font-family:var(--f-m);font-size:.86em;background:var(--muted-bg);color:var(--foreground);padding:.15em .4em;border-radius:6px;border:0}
pre{font-family:var(--f-m);font-size:13.5px;background:var(--code);color:var(--codeink);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
pre code{background:none;border:0;padding:0}
kbd{font-family:var(--f-m);font-size:11px;color:var(--muted-foreground);background:var(--background);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px;line-height:18px}

/* ---------------------------------------------------------------- shadcn primitives */
.btn,.v2k{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  height:34px;padding:0 13px;border-radius:8px;font-family:var(--f-b);font-size:13.5px;font-weight:500;line-height:1;
  background:var(--background);color:var(--foreground);border:1px solid var(--border);box-shadow:var(--shadow-xs);
  transition:background-color .15s,border-color .15s,color .15s,opacity .15s}
.btn:hover,.v2k:hover{background:var(--accent-bg);border-color:var(--border)}
.btn.p{background:var(--primary);color:var(--primary-foreground);border-color:transparent}
.btn.p:hover{background:var(--primary);opacity:.88}
.btn[aria-pressed="true"]{background:var(--secondary);color:var(--foreground);border-color:var(--ring)}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 45%,transparent);border-color:var(--ring)}
.ui-icon-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;color:var(--muted-foreground);flex:none;transition:background-color .15s,color .15s}
.ui-icon-btn:hover{background:var(--sidebar-hover);color:var(--foreground)}
.ui-icon-btn:focus-visible{box-shadow:0 0 0 2px var(--ring)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],input:not([type]),select,textarea,.v2in{
  font-family:var(--f-b);font-size:15px;color:var(--foreground);background:transparent;border:1px solid var(--input);border-radius:8px;padding:7px 11px;box-shadow:var(--shadow-xs);
  transition:border-color .15s,box-shadow .15s}
select{background:var(--background)}
select option,select optgroup{background:var(--popover);color:var(--foreground)}
input:focus,select:focus,textarea:focus,.v2in:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 35%,transparent)}
textarea{font-family:var(--f-m);font-size:13.5px;line-height:1.55}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--primary)}
::placeholder{color:var(--muted-foreground);opacity:1}

/* ---------------------------------------------------------------- sidebar shell (ChatGPT-like) */
.ui-sidebar{background:var(--sidebar);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;gap:1px;
  font-family:var(--f-b);font-size:14px;line-height:1.35}
.ui-sbhead{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 6px;min-height:40px}
.ui-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--foreground);font-weight:600;font-size:15px;letter-spacing:-.01em;padding:4px 6px;border-radius:8px}
.ui-brand:hover{background:var(--sidebar-hover)}
.ui-logo{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--primary);color:var(--primary-foreground);font-family:var(--f-m);font-size:10.5px;font-weight:600;letter-spacing:0}
.ui-sbitem{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;border-radius:8px;
  color:var(--foreground);font-size:14px;line-height:1.3;text-decoration:none;transition:background-color .12s}
.ui-sbitem svg{flex:none;color:var(--muted-foreground)}
.ui-sbitem>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-sbitem:hover{background:var(--sidebar-hover)}
.ui-sbitem[aria-current="page"]{background:var(--sidebar-active);font-weight:500}
.ui-sbitem[aria-current="page"] svg{color:var(--foreground)}
.ui-sbitem kbd{margin-left:auto;opacity:.8}
.ui-sbitem:focus-visible{box-shadow:inset 0 0 0 2px var(--ring)}
.ui-count{font-style:normal;font-family:var(--f-m);font-size:11px;font-weight:600;background:var(--primary);color:var(--primary-foreground);border-radius:99px;padding:1px 7px;margin-left:auto}
.ui-sblabel{font-size:12px;font-weight:500;color:var(--muted-foreground);padding:16px 10px 4px}
.ui-course i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;margin:0 4px}
:root[data-theme="dark"] .ui-course i{background:var(--cd)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ui-course i{background:var(--cd)}}
.ui-sbfoot{margin-top:auto;order:99;position:sticky;bottom:0;background:var(--sidebar);padding:10px 0 2px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--sidebar-border)}
.ui-account{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;text-decoration:none;color:var(--foreground)}
.ui-account:hover{background:var(--sidebar-hover)}
.ui-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--muted-bg);color:var(--muted-foreground);flex:none;font-weight:600;font-size:13px}
.ui-avatar.ui-initial{background:var(--primary);color:var(--primary-foreground)}
.ui-acct{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ui-acct b{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-acct small{font-size:12px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* theme switcher — shadcn "tabs" look */
.ui-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--muted-bg);border-radius:9px;padding:3px}
.ui-seg button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--muted-foreground);transition:all .15s}
.ui-seg button:hover{color:var(--foreground)}
.ui-seg button[aria-checked="true"]{background:var(--background);color:var(--foreground);box-shadow:var(--shadow-sm)}
:root[data-theme="dark"] .ui-seg button[aria-checked="true"]{background:#3a3a3a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ui-seg button[aria-checked="true"]{background:#3a3a3a}}
.ui-seg button:focus-visible{box-shadow:0 0 0 2px var(--ring)}
.ui-scrim{display:none}
.ui-sbopen{display:none}

/* ---- app pages (hub, review, cards, …) ---- */
.v2app .v2sb{position:fixed;inset:0 auto 0 0;width:var(--sbw);padding:10px 10px 10px;overflow-y:auto;z-index:40}
.v2app{padding-left:var(--sbw);transition:padding-left .2s}
.ui-top{display:none}
.v2wrap{max-width:1000px;padding:36px clamp(16px,4vw,44px) 96px}
:root[data-sb="closed"] .v2app{padding-left:0}
:root[data-sb="closed"] .v2app .v2sb{transform:translateX(-100%);visibility:hidden}
:root[data-sb="closed"] .v2app .ui-top{display:flex}
.v2app .v2sb{transition:transform .2s,visibility .2s}
.ui-top{position:sticky;top:0;z-index:30;align-items:center;gap:6px;height:56px;padding:0 10px;background:color-mix(in srgb,var(--background) 85%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px)}
.ui-top .ui-brand{font-size:16px}
.ui-top [data-theme-toggle]{display:inline-flex}

/* ---- course pages: the lesson rail becomes the sidebar ---- */
.shell{grid-template-columns:var(--sbw) minmax(0,1fr);transition:grid-template-columns .2s}
.rail{padding:10px 10px 0;height:100vh;height:100dvh;border-right:1px solid var(--sidebar-border)}
.rail>.brand{font-family:var(--f-d);font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--foreground);padding:16px 10px 0;line-height:1.3}
.rail>.brand b{color:var(--foreground)}
.rail>.sub{font-family:var(--f-b);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted-foreground);margin:2px 10px 6px}
.rail .home{border:0;margin:0;font-family:var(--f-b);font-size:14px;color:var(--foreground)}
.rail .home:hover{border:0;color:var(--foreground)}
.toc .part{font-family:var(--f-b);font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted-foreground);margin:14px 10px 4px}
.toc button{grid-template-columns:22px 1fr 14px;gap:6px;padding:7px 10px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--foreground)}
.toc button:hover{background:var(--sidebar-hover)}
.toc button[aria-current="true"]{background:var(--sidebar-active);box-shadow:none;font-weight:500}
.toc .n{font-family:var(--f-m);font-size:11px;color:var(--muted-foreground);padding-top:1px}
.toc .tick{color:var(--ok)}
.prog{margin:14px 10px 4px;font-family:var(--f-b);font-size:12px;color:var(--muted-foreground)}
.bar{height:4px;background:var(--muted-bg);border-radius:99px}.bar i{background:var(--primary);border-radius:99px}
.rail .v2side{margin:8px 0 8px;font-family:var(--f-b);font-size:13.5px;gap:1px}
.rail .v2side>a,.rail .v2side>button{display:flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:8px;color:var(--foreground);box-sizing:border-box;width:100%}
.rail .v2side>a:hover,.rail .v2side>button:hover{background:var(--sidebar-hover);color:var(--foreground)}
.rail .v2side .due{color:var(--foreground);font-weight:600}
.rail .v2side .v2timer{margin:6px 0 2px}
.rail .ui-sbfoot{margin:auto -10px 0;padding:10px 10px 12px}
.ui-sbopen{position:fixed;top:10px;left:10px;z-index:35;background:var(--background);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
:root[data-sb="closed"] .shell{grid-template-columns:0 minmax(0,1fr)}
:root[data-sb="closed"] .rail{visibility:hidden;overflow:hidden;padding:0;border:0}
:root[data-sb="closed"] .ui-sbopen{display:inline-grid}
main{padding-block:44px 96px}
.les{max-width:740px}
.kick{font-family:var(--f-b);font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted-foreground)}
.one{font-size:19px;line-height:1.55;border-left:3px solid var(--accent);padding:2px 0 2px 16px;color:var(--foreground)}
p,li{max-width:68ch}

/* ---- mobile: top bar + sheet sidebar ---- */
@media (max-width:900px){
  .v2app,:root[data-sb="closed"] .v2app{padding-left:0}
  .v2app .v2sb,:root[data-sb="closed"] .v2app .v2sb{transform:translateX(-100%);visibility:hidden;width:min(300px,86vw);box-shadow:var(--shadow-lg)}
  .v2app .ui-top{display:flex}
  .shell,:root[data-sb="closed"] .shell{grid-template-columns:minmax(0,1fr)}
  .rail,:root[data-sb="closed"] .rail{display:flex;position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility .2s;box-shadow:var(--shadow-lg);padding:10px 10px 0;overflow-y:auto}
  .ui-sbopen,:root[data-sb="closed"] .ui-sbopen{display:none}
  :root.sb-sheet .rail,:root.sb-sheet .v2app .v2sb{transform:none;visibility:visible;z-index:60}
  :root.sb-sheet .ui-scrim{display:block;position:fixed;inset:0;background:var(--overlay);z-index:55;animation:uiFade .15s}
  :root.sb-sheet body{overflow:hidden}
  .mbar{gap:6px;padding:8px 10px;height:56px;box-sizing:border-box;background:color-mix(in srgb,var(--background) 88%,transparent);backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--border)}
  .mbar .brand{font-family:var(--f-d);font-size:15px;font-weight:600}
  .mbar select{height:36px;font-size:14px;border-radius:8px;border:1px solid var(--input);background:var(--background);color:var(--foreground);padding:0 8px}
  .mbar [data-theme-toggle]{display:inline-flex}
  main{padding-block:28px 90px}
  body{font-size:16.5px}
}
@keyframes uiFade{from{opacity:0}to{opacity:1}}

/* ---------------------------------------------------------------- lesson components → shadcn cards / alerts */
.les h2{border-top:0}
.pic,.note,.cons,.origin,.ex,.rule,.interview{border-radius:var(--radius);border:1px solid;padding:14px 18px;box-shadow:none}
.pic{background:var(--teal-soft);border-color:color-mix(in srgb,var(--teal) 22%,transparent)}
.note{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 24%,transparent)}
.cons{background:color-mix(in srgb,var(--accent) 7%,var(--background));border-color:color-mix(in srgb,var(--accent) 24%,transparent)}
.origin,.rule{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 22%,transparent)}
.ex{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);border-left:3px solid var(--gold);border-radius:var(--radius)}
.interview{background:var(--muted-bg);border-color:var(--border)}
.pic .lbl,.try .lbl,.words .lbl,.quiz .lbl,.note .lbl,.cons .lbl,.origin .lbl,.lab .lbl,.ex .lbl,.interview .lbl,.v2lbl,.pane .h{
  font-family:var(--f-b);font-size:12px;letter-spacing:.01em;text-transform:none;font-weight:600}
.try,.lab,.fig,.anim,.qq,.card,.screen,.cmp>div,.v2card,.v2q,.v2teach,.v2timer,.javarun,.labterm{border-radius:calc(var(--radius) + 2px)}
.try{border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm);padding:18px 20px}
.try .ttl,.anim .ttl{font-family:var(--f-d);font-weight:600;font-size:17px;letter-spacing:-.015em}
.lab{border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);background:var(--card)}
.fig,.anim{border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-xs)}
.fig .cap,.anim .fcap{font-size:14.5px}
.anim .ctl input[type=range]{accent-color:var(--primary)}
.anim .fcap b{color:var(--foreground)}
.cmp>div{background:var(--card);border-color:var(--border)}
.cmp h4{font-family:var(--f-d);font-weight:600;font-size:16px}
.pane{background:var(--muted-bg);border-color:var(--border);border-radius:var(--radius)}
.pane .h{color:var(--muted-foreground)}
.screen,.card{background:var(--card);border-color:var(--border)}
.lines{border-color:var(--border);border-radius:var(--radius);background:var(--card)}
.lines li{border-top-color:var(--border);font-size:15px}
.lines li>code{color:var(--foreground)}
dfn{border-bottom:1.5px dashed color-mix(in srgb,var(--foreground) 45%,transparent)}
.words dl{gap:8px 18px}.words dt{font-weight:600}
.words .lbl{color:var(--muted-foreground)}
/* quiz → shadcn radio-card list */
.quiz .lbl{color:var(--muted-foreground)}
.qq,.v2q{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-xs);padding:16px 18px}
.qq .q,.v2q .q{font-weight:600;font-size:16px;line-height:1.5}
.qq .opts,.v2q .opts{gap:8px}
.qq .opt,.v2q .opt{border:1px solid var(--border);border-radius:9px;padding:10px 13px;font-size:15px;line-height:1.45;background:var(--background);transition:background-color .12s,border-color .12s}
.qq .opt:hover,.v2q .opt:not(:disabled):hover{background:var(--accent-bg);border-color:var(--border)}
.qq .opt.right,.v2q .opt.right{border-color:color-mix(in srgb,var(--ok) 55%,transparent);background:var(--ok-soft)}
.qq .opt.wrong,.v2q .opt.wrong{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:var(--bad-soft)}
.qq .opt .owhy,.v2q .opt .owhy{font-size:13.5px}
.qq .why,.v2q .why{font-size:15px;background:var(--muted-bg);border-radius:9px;padding:10px 13px;margin-top:10px}
.v2q .opt .k{border-color:var(--border);border-radius:5px}
/* tables → shadcn table */
table.t{background:transparent;font-size:14.5px;border:1px solid var(--border);border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden}
table.t th,table.t td{border:0;border-bottom:1px solid var(--border);padding:9px 12px}
table.t tr:last-child td{border-bottom:0}
table.t th{background:var(--muted-bg);font-family:var(--f-b);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted-foreground)}
table.t tbody tr:hover td{background:color-mix(in srgb,var(--muted-bg) 55%,transparent)}
/* badges */
.tag,.v2pill,.status{font-family:var(--f-b);font-size:11.5px;font-weight:500;border-radius:6px;padding:1px 8px;border:1px solid var(--border);background:var(--secondary);color:var(--secondary-foreground)}
.status.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.status.err{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.status.loading{background:var(--gold-soft);color:var(--gold);border-color:transparent}
.flow .b{border-radius:8px;border-color:var(--border);background:var(--card);font-size:12.5px}
.foot{max-width:740px;border-top:1px solid var(--border)}
.done{font-family:var(--f-b);font-size:14px}
.done input{accent-color:var(--primary)}
/* code runners keep a dark console in both themes (like ChatGPT code blocks) */
.javarun textarea,.py textarea,.jsrun textarea,.tsrun textarea{background:var(--code);color:var(--codeink);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none}
.pyout,.py .pyout,.term{background:#0d0d0d;color:#e6e6e6;border-radius:var(--radius);border:1px solid #ffffff14}
.labterm{border-color:var(--border)}
.labterm .lh{background:#171717;color:#d4d4d4;font-family:var(--f-b);font-size:12.5px}
/* glossary popover, highlight popover, toast, palette → shadcn popover / command / sonner */
#pop,#v2pop{background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
#pop{font-size:15px}
#pop b{font-family:var(--f-d);font-weight:600}
#v2pop button{font-family:var(--f-b);font-size:12.5px;font-weight:500}
#v2pop button:hover{background:var(--accent-bg)}
#v2toast{background:var(--popover);color:var(--foreground);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-family:var(--f-b);font-size:13.5px;font-weight:500;border-radius:10px;padding:11px 16px}
#v2pal{background:var(--overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding-top:12vh}
#v2pal .box{background:var(--popover);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
#v2pal .top{border-bottom:1px solid var(--border);padding:6px 8px;align-items:center}
#v2pal input.q{font-family:var(--f-b);font-size:15px;box-shadow:none;border:0}
#v2pal input.q:focus{box-shadow:none}
#v2pal .tabs{border-bottom:1px solid var(--border)}
#v2pal .tabs button{font-family:var(--f-b);font-size:13px;font-weight:500;color:var(--muted-foreground)}
#v2pal .tabs button[aria-selected="true"]{background:var(--secondary);color:var(--foreground)}
#v2pal .res{border-radius:8px;font-size:14px}
#v2pal .res:hover,#v2pal .res.sel{background:var(--accent-bg)}
#v2pal .res small{font-family:var(--f-b);font-size:11.5px}
#v2pal form input,#v2pal form textarea,#v2pal form select{background:transparent;border-color:var(--input)}

/* ---------------------------------------------------------------- app page pieces */
.v2wrap h1{font-size:clamp(26px,3.6vw,32px);font-weight:700;letter-spacing:-.03em}
.v2card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-xs);padding:18px 20px}
.v2stat{font-family:var(--f-d);font-weight:700;letter-spacing:-.03em}
.v2lbl{color:var(--muted-foreground);font-size:12.5px;font-weight:500}
.v2empty{border:1px dashed var(--border);border-radius:var(--radius)}
.v2wrap textarea{font-family:var(--f-b)}
.v2lv .badge{background:var(--primary);color:var(--primary-foreground);border-radius:14px;font-family:var(--f-d);font-weight:700}
.v2lv .bar,.v2lvchip .bar,.v2timer .pbar{background:var(--muted-bg)}
.v2lv .bar i,.v2lvchip .bar i{background:var(--primary)}
.v2lvchip{border-color:var(--border);border-radius:9px;font-family:var(--f-b)}
.v2lvchip b{color:var(--foreground)}
.v2timer{background:var(--card);border-color:var(--border);font-family:var(--f-b)}
.v2timer .tm{font-family:var(--f-m);font-weight:600}
.v2timer[data-phase=work]:not(.paused) .tm{color:var(--foreground)}
.v2timer .pbar i{background:var(--primary)}
.v2timer .ctl button,.v2timer .cfg button,.v2side .v2timer .ctl button,.v2side .v2timer .cfg button{border-color:var(--border);border-radius:6px;background:var(--background)}
.v2timer .ctl button:hover{background:var(--accent-bg);border-color:var(--border)}
.v2xpfloat{background:var(--popover);color:var(--foreground);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-family:var(--f-b)}
.v2cele{background:var(--popover);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.v2warm{border:1px dashed var(--border);background:var(--muted-bg)}
.v2warm .v2lbl{color:var(--muted-foreground)}
.v2teach{border:1px solid var(--border);border-top:1px solid var(--border);box-shadow:var(--shadow-xs)}
.v2teach .v2lbl{color:var(--purple)}
.v2bar .btn{height:30px;font-size:12.5px;padding:0 10px}
.v2bar .btn[aria-pressed="true"]{background:var(--gold-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
mark.hl.yellow{background:rgba(250,204,21,.38)}
:root[data-theme="dark"] mark.hl.yellow{background:rgba(250,204,21,.28)}
@media (prefers-reduced-motion:reduce){.v2app,.v2app .v2sb,.shell,.rail{transition:none!important}}
@media print{.ui-sidebar,.ui-top,.mbar,.ui-sbopen,.v2sb{display:none!important}.v2app{padding-left:0}.shell{display:block}}
/* hub course cards */
.cc{border:1px solid var(--border)!important;border-radius:14px;box-shadow:var(--shadow-xs);padding:18px;transition:border-color .15s,box-shadow .15s}
.cc:hover{border-color:color-mix(in srgb,var(--foreground) 22%,transparent)!important;box-shadow:var(--shadow-sm)}
.cc .tg{font-family:var(--f-b);font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted-foreground);display:flex;align-items:center;gap:7px}
.cc .tg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.cc h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.cc p{font-size:14.5px}
.cc .meter{font-family:var(--f-m);font-size:11.5px}
.cc .meter .bar{height:6px;background:var(--muted-bg)}
.cc .go{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;background:var(--primary);color:var(--primary-foreground);font-family:var(--f-b);font-size:13.5px;font-weight:500}
.cc .go:hover{opacity:.88}
.cc.soon{opacity:.62}
.today .it{border-top-color:var(--border)}
/* per-course colours follow the theme live (no reload) */
:root[data-theme="dark"] [style*="--cd:"]{--c:var(--cd)!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [style*="--cd:"]{--c:var(--cd)!important}}
/* SQL runner (PGlite) */
.sqlrun{margin:16px 0}
.sqlrun textarea{min-height:110px;background:var(--code);color:var(--codeink);border:1px solid var(--border);border-radius:var(--radius)}
.sqlout{margin-top:8px;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--card);overflow:auto;max-height:420px}
.sqlout table.sqlt{margin:4px 0;font-family:var(--f-m);font-size:13px}
.sqlout table.sqlt td,.sqlout table.sqlt th{padding:5px 10px;white-space:pre}
.sqlout .nul{color:var(--muted-foreground);font-style:italic}
.sqlmeta{font-family:var(--f-m);font-size:12px;color:var(--muted-foreground);margin:2px 0 8px}
.sqlerr{font-family:var(--f-m);font-size:13px;color:var(--bad);white-space:pre-wrap}
.sqlout pre{margin:0}
/* enlarge button + lightbox */
.fig,.anim{position:relative}
.ui-zoom{all:unset;cursor:pointer;position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:var(--muted-foreground);background:color-mix(in srgb,var(--card) 85%,transparent);border:1px solid var(--border);opacity:.75;transition:opacity .15s}
.ui-zoom:hover{opacity:1;color:var(--foreground)}
.anim .ttl{padding-right:36px}
.ui-lightbox{position:fixed;inset:0;z-index:90;background:var(--overlay);display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));animation:uiFade .15s;backdrop-filter:blur(3px)}
.ui-lb-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff;font-size:13px;margin-bottom:8px}
.ui-lb-body{flex:1;overflow:auto;background:var(--card);border-radius:12px;padding:12px;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.ui-lb-body svg{display:block;width:100%;min-width:760px;height:auto;margin:auto}
@media (min-width:900px){.ui-lb-body svg{min-width:0;max-height:calc(100vh - 140px)}}
.ui-lb-cap{background:var(--card);color:var(--foreground);border-radius:10px;padding:10px 14px;margin-top:8px;font-size:15px;max-height:30vh;overflow:auto}

/* =================================================================== colour & scenery */
/* hero landscape: day in light mode, night in dark mode */
:root{--sc-sky1:#7dd3fc;--sc-sky2:#bae6fd;--sc-sky3:#fde68a;--sc-glow:#fde68a;--sc-sun:#fbbf24;--sc-m1:#93c5fd;--sc-m2:#34d399;--sc-m3:#059669;--sc-lake1:#38bdf8;--sc-lake2:#0ea5e9;--sc-path:#ffffff;--sc-tree:#047857;--sc-snow:#ffffff;--sc-stars:0;--sc-clouds:.9;--sc-bite:0}
:root[data-theme="dark"]{--sc-sky1:#020617;--sc-sky2:#1e1b4b;--sc-sky3:#4c1d95;--sc-glow:#a5b4fc;--sc-sun:#f8fafc;--sc-m1:#312e81;--sc-m2:#1e3a8a;--sc-m3:#172554;--sc-lake1:#1e1b4b;--sc-lake2:#0f172a;--sc-path:#fde68a;--sc-tree:#0b1530;--sc-snow:#c7d2fe;--sc-stars:1;--sc-clouds:0;--sc-bite:1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sc-sky1:#020617;--sc-sky2:#1e1b4b;--sc-sky3:#4c1d95;--sc-glow:#a5b4fc;--sc-sun:#f8fafc;--sc-m1:#312e81;--sc-m2:#1e3a8a;--sc-m3:#172554;--sc-lake1:#1e1b4b;--sc-lake2:#0f172a;--sc-path:#fde68a;--sc-tree:#0b1530;--sc-snow:#c7d2fe;--sc-stars:1;--sc-clouds:0;--sc-bite:1}}
.ui-scene{position:relative;border-radius:18px;overflow:hidden;height:220px;margin:0 0 22px;box-shadow:var(--shadow-sm);isolation:isolate}
.ui-scene svg{position:absolute;inset:0;width:100%;height:100%}
.ui-scene .sc-sky1{stop-color:var(--sc-sky1)}.ui-scene .sc-sky2{stop-color:var(--sc-sky2)}.ui-scene .sc-sky3{stop-color:var(--sc-sky3)}
.ui-scene .sc-glow1{stop-color:var(--sc-glow);stop-opacity:.75}.ui-scene .sc-glow2{stop-color:var(--sc-glow);stop-opacity:0}
.ui-scene .sc-lake1{stop-color:var(--sc-lake1)}.ui-scene .sc-lake2{stop-color:var(--sc-lake2)}
.ui-scene .sc-sun{fill:var(--sc-sun)}
.ui-scene .sc-moonbite{fill:var(--sc-sky1);opacity:var(--sc-bite)}
.ui-scene .sc-stars{fill:#fff;opacity:var(--sc-stars)}
.ui-scene .sc-stars circle{animation:scTwinkle 3s ease-in-out infinite}
.ui-scene .sc-stars circle:nth-child(3n){animation-delay:1s}.ui-scene .sc-stars circle:nth-child(3n+1){animation-delay:2s}
.ui-scene .sc-clouds{fill:#fff;opacity:var(--sc-clouds);animation:scDrift 40s linear infinite alternate}
.ui-scene .sc-m1{fill:var(--sc-m1)}.ui-scene .sc-m2{fill:var(--sc-m2)}.ui-scene .sc-m3{fill:var(--sc-m3)}
.ui-scene .sc-snow{fill:var(--sc-snow);opacity:.9}
.ui-scene .sc-path{stroke:var(--sc-path);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;opacity:.9}
.ui-scene .sc-flags line{stroke:var(--sc-path);stroke-width:2}
.ui-scene .sc-trees{fill:var(--sc-tree)}
.ui-scene-txt{position:absolute;left:clamp(16px,4vw,32px);top:22px;display:flex;flex-direction:column;gap:2px;color:#fff;text-shadow:0 1px 12px rgb(0 0 0 / .25)}
.ui-scene-kick{font-size:13px;font-weight:500;opacity:.95}
.ui-scene-txt b{font-family:var(--f-d);font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.ui-scene-txt b span{opacity:.8}
.ui-scene-txt small{font-size:12.5px;opacity:.92;max-width:42ch;line-height:1.4}
:root:not([data-theme="dark"]) .ui-scene-txt{color:#0c4a6e;text-shadow:0 1px 10px rgb(255 255 255 / .55)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ui-scene-txt{color:#fff;text-shadow:0 1px 12px rgb(0 0 0 / .35)}}
@media (max-width:640px){.ui-scene{height:170px;border-radius:14px}.ui-scene-txt small{display:none}}
@keyframes scTwinkle{50%{opacity:.25}}
@keyframes scDrift{to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.ui-scene *{animation:none!important}}

/* colourful brand mark */
.ui-logo{background:linear-gradient(135deg,#6366f1 0%,#a855f7 45%,#ec4899 75%,#f59e0b 100%);color:#fff}

/* course cards get a little landscape banner in their own colour */
.cc{position:relative;overflow:hidden;padding-top:92px!important}
.cc::before{content:"";position:absolute;inset:0 0 auto 0;height:76px;background:linear-gradient(135deg,var(--c) 0%,color-mix(in srgb,var(--c) 60%,var(--mix,#fde68a)) 100%)}
.cc:nth-child(3n+1){--mix:#fde68a}.cc:nth-child(3n+2){--mix:#67e8f9}.cc:nth-child(3n){--mix:#c4b5fd}
.cc::after{content:"";position:absolute;left:0;right:0;top:36px;height:41px;background:var(--card);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M0 26 L40 12 L70 22 L110 4 L150 24 L190 10 L230 26 L270 14 L300 22 V40 H0Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 34 C60 22 110 30 160 32 S250 22 300 30 V40 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M0 26 L40 12 L70 22 L110 4 L150 24 L190 10 L230 26 L270 14 L300 22 V40 H0Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 34 C60 22 110 30 160 32 S250 22 300 30 V40 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.cc.soon::before{filter:saturate(.5)}
.cc .tg::before{display:none}
.cc .tg{position:absolute;top:12px;left:16px;color:#fff;font-weight:600;text-shadow:0 1px 6px rgb(0 0 0 / .25);background:rgb(255 255 255 / .18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:3px 9px;border-radius:99px;font-size:11.5px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* soft aurora at the top of every page, tinted by the course colour */
main{position:relative}
main::before{content:"";position:absolute;inset:0 0 auto 0;height:460px;pointer-events:none;z-index:0;
  background:radial-gradient(55% 90% at 12% -10%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
             radial-gradient(45% 80% at 88% -15%,color-mix(in srgb,#a855f7 13%,transparent),transparent 70%),
             radial-gradient(40% 70% at 55% -20%,color-mix(in srgb,#f59e0b 9%,transparent),transparent 70%)}
main>*{position:relative;z-index:1}
.v2app main::before{background:radial-gradient(55% 90% at 10% -10%,color-mix(in srgb,#6366f1 14%,transparent),transparent 70%),
             radial-gradient(45% 80% at 90% -15%,color-mix(in srgb,#ec4899 11%,transparent),transparent 70%),
             radial-gradient(40% 70% at 50% -25%,color-mix(in srgb,#14b8a6 10%,transparent),transparent 70%)}
.kick{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:color-mix(in srgb,var(--accent) 85%,var(--foreground));padding:3px 10px;border-radius:99px;font-weight:600;font-size:12.5px}
.les>h1,.les>.one{position:relative}
.toc button[aria-current="true"] .n{color:var(--accent);font-weight:600}
.bar i{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#f59e0b))}
/* per-lesson landscape strip */
.ui-lscene{position:relative;height:92px;border-radius:16px;overflow:hidden;margin:0 0 18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,#bae6fd) 0%,color-mix(in srgb,var(--accent) 10%,#fef3c7) 100%)}
.ui-lscene svg{position:absolute;inset:0;width:100%;height:100%}
.ui-lscene .ls-sun{fill:#fbbf24;opacity:.9}
.ui-lscene .ls-far{fill:color-mix(in srgb,var(--accent) 45%,#fff)}
.ui-lscene .ls-near{fill:color-mix(in srgb,var(--accent) 80%,#000)}
.ui-lscene .ls-num{position:absolute;right:14px;bottom:6px;font-family:var(--f-m);font-size:28px;font-weight:600;color:#fff;opacity:.85;letter-spacing:-.04em}
:root[data-theme="dark"] .ui-lscene{background:linear-gradient(180deg,#0b1026 0%,color-mix(in srgb,var(--accent) 30%,#1e1b4b) 100%)}
:root[data-theme="dark"] .ui-lscene .ls-sun{fill:#e2e8f0;opacity:.85}
:root[data-theme="dark"] .ui-lscene .ls-far{fill:color-mix(in srgb,var(--accent) 35%,#1e1b4b)}
:root[data-theme="dark"] .ui-lscene .ls-near{fill:color-mix(in srgb,var(--accent) 22%,#0b1026)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ui-lscene{background:linear-gradient(180deg,#0b1026 0%,color-mix(in srgb,var(--accent) 30%,#1e1b4b) 100%)}
  :root:not([data-theme="light"]) .ui-lscene .ls-sun{fill:#e2e8f0;opacity:.85}
  :root:not([data-theme="light"]) .ui-lscene .ls-far{fill:color-mix(in srgb,var(--accent) 35%,#1e1b4b)}
  :root:not([data-theme="light"]) .ui-lscene .ls-near{fill:color-mix(in srgb,var(--accent) 22%,#0b1026)}}
@media (max-width:640px){.ui-lscene{height:64px;border-radius:12px}.ui-lscene .ls-num{font-size:20px}}
/* highlight popover: [hidden] must win over display:flex (this is why it never went away) */
#v2pop[hidden]{display:none!important}
#v2pop{padding:6px 34px 6px 6px}
#v2pop .x{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0!important;display:grid!important;place-items:center;color:var(--muted-foreground)}
#v2pop .ai-row{display:flex;flex-wrap:wrap;gap:2px;border-top:1px solid var(--border);padding-top:4px;margin-top:2px}
#v2pop .ai-row button{color:var(--purple)}

/* =================================================================== AI tutor */
.ai-fab{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:75;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 14px;border-radius:99px;
  color:#fff;font-weight:600;font-size:14px;background:linear-gradient(135deg,#6366f1,#a855f7 55%,#ec4899);box-shadow:0 8px 24px -6px rgb(99 102 241 / .55);transition:transform .15s,box-shadow .15s}
.ai-fab:hover{transform:translateY(-1px);box-shadow:0 10px 28px -6px rgb(168 85 247 / .6)}
.ai-open .ai-fab{display:none}
@media (max-width:640px){.ai-fab span{display:none}.ai-fab{width:46px;height:46px;padding:0;justify-content:center}}
.ai-panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:85;display:flex;flex-direction:column;background:var(--background);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);animation:aiIn .18s ease}
.ai-panel[hidden]{display:none}
@keyframes aiIn{from{transform:translateX(24px);opacity:.4}}

.ai-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--border)}
.ai-title{display:flex;align-items:center;gap:8px;min-width:0}.ai-title svg{color:#a855f7}
.ai-model{all:unset;cursor:pointer;font-family:var(--f-m);font-size:11.5px;color:var(--muted-foreground);border:1px solid var(--border);border-radius:99px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.ai-model:hover{color:var(--foreground)}
.ai-hacts{display:flex;gap:2px}
.ai-list{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.ai-msg{font-size:15px;line-height:1.6;max-width:100%;overflow-wrap:anywhere}
.ai-msg .ai-body>:first-child{margin-top:0}.ai-msg .ai-body>:last-child{margin-bottom:0}
.ai-user{align-self:flex-end;max-width:88%}
.ai-user .ai-body{background:var(--secondary);border-radius:16px 16px 4px 16px;padding:9px 13px}
.ai-assistant .ai-body p,.ai-sys p{margin:.5em 0}
.ai-assistant .ai-body pre{font-size:12.5px;max-width:100%;overflow-x:auto}
.ai-assistant .ai-body table{border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto}
.ai-assistant .ai-body th,.ai-assistant .ai-body td{border:1px solid var(--border);padding:4px 8px;text-align:left}
.ai-assistant .ai-body h1,.ai-assistant .ai-body h2,.ai-assistant .ai-body h3{font-size:16px;margin:14px 0 4px}
.ai-assistant .ai-body details{border:1px solid var(--border);border-radius:8px;padding:6px 10px;margin:6px 0}
.ai-sys{background:var(--muted-bg);border-radius:12px;padding:10px 14px;font-size:14.5px}
.ai-acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;opacity:0;transition:opacity .15s}
.ai-msg.ai-done .ai-acts,.ai-msg:hover .ai-acts{opacity:1}
.ai-acts button{all:unset;cursor:pointer;font-size:12px;color:var(--muted-foreground);padding:3px 8px;border-radius:6px;border:1px solid var(--border)}
.ai-acts button:hover{color:var(--foreground);background:var(--accent-bg)}
.ai-src{font-size:12.5px;margin-top:6px;color:var(--muted-foreground)}.ai-src summary{cursor:pointer}.ai-src a{display:block;padding:2px 0;color:var(--foreground)}
.ai-err{color:var(--bad);background:var(--bad-soft);border-radius:8px;padding:8px 12px;font-size:14px}
.ai-typing{display:inline-flex;gap:4px;padding:6px 2px}.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground);animation:aiDot 1s infinite}.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ai-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 0;scrollbar-width:none}
.ai-chip{all:unset;cursor:pointer;flex:none;font-size:12.5px;padding:5px 11px;border-radius:99px;border:1px solid var(--border);background:var(--card);color:var(--foreground)}
.ai-chip:hover{background:var(--accent-bg)}
.ai-form{padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
.ai-form textarea{width:100%;min-height:52px;max-height:200px;resize:none;font-family:var(--f-b);font-size:15px;border-radius:14px;padding:10px 12px;box-sizing:border-box}
.ai-frow{display:flex;align-items:center;gap:8px}
.ai-tog{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted-foreground);cursor:pointer}
.ai-send{height:32px}
.ai-attach{display:flex;flex-wrap:wrap;gap:6px}
.ai-att{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:4px 26px 4px 4px;background:var(--card);max-width:100%}
.ai-att img{width:56px;height:56px;object-fit:cover;border-radius:7px}
.ai-att.ai-q{padding:6px 28px 6px 10px;flex-direction:column;align-items:flex-start;gap:0;font-size:13px}.ai-att.ai-q small{color:var(--muted-foreground)}
.ai-att button{all:unset;cursor:pointer;position:absolute;top:3px;right:6px;color:var(--muted-foreground);font-size:12px}
.ai-diagram{border:1px solid var(--border);border-radius:12px;padding:10px;margin:8px 0;background:var(--card);overflow-x:auto}
.ai-diagram svg{max-width:100%;height:auto;display:block;margin:auto}
.ai-dg-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.ai-dg-acts .btn{height:28px;font-size:12px;padding:0 9px}
.ai-card{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin:6px 0;cursor:pointer}
.ai-card span{display:flex;flex-direction:column;gap:2px;font-size:14px}.ai-card small{color:var(--muted-foreground);font-size:13px}
.ai-score{font-size:15px}
.ai-why{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:500;color:var(--purple)}
.ai-barbtn svg{color:#a855f7}
@media (max-width:640px){.ai-panel{width:100vw;border-left:0}}
@media print{.ai-fab,.ai-panel{display:none!important}}
.ai-list>*{min-width:0;max-width:100%}.ai-body{min-width:0;max-width:100%}
.ai-assistant .ai-body pre{white-space:pre;overflow-x:auto;max-width:100%}

/* =================================================================== study clock */
.shc{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.shc-btn{all:unset;cursor:pointer;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--primary-foreground);transition:transform .1s}
.shc-btn:active{transform:scale(.94)}
.shc.on .shc-btn{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,#10b981 22%,transparent);animation:shcPulse 2s ease-in-out infinite}
@keyframes shcPulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,#10b981 10%,transparent)}}
.shc-time{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--foreground);line-height:1.2}
.shc-time b{font-family:var(--f-m);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.shc:not(.on) .shc-time b{font-family:var(--f-b);font-size:14px}
.shc-time small{font-size:12px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shc-mini{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:99px;border:1px solid var(--border);font-family:var(--f-m);font-size:12px;color:var(--foreground);flex:none;font-variant-numeric:tabular-nums}
.shc-mini.on{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border-color:transparent}
.ui-top .shc-mini{margin-right:2px}
.shc-banner{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:88;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;width:min(680px,calc(100vw - 24px));box-sizing:border-box;background:var(--popover);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:14px;padding:12px 14px;font-size:14.5px;animation:aiIn .2s}
.shc-bacts{display:flex;gap:6px;flex-wrap:wrap}.shc-bacts .btn{height:30px;font-size:13px}
@media (prefers-reduced-motion:reduce){.shc.on .shc-btn{animation:none}}

/* ================================================================ v2.1 chrome: calmer sidebar, account menu, toolbar, AI panel */
/* sidebar: fixed header + search, scrolling middle, compact footer */
.v2app .v2sb{overflow:hidden;padding:10px 10px 8px}
.ui-sbscroll{flex:1;min-height:0;overflow-y:auto;margin:6px -10px 0;padding:0 10px 8px;scrollbar-width:thin;overscroll-behavior:contain}
.ui-sbhacts{display:inline-flex;gap:2px}
.ui-sbhead .ui-icon-btn{width:32px;height:32px;color:var(--muted-foreground)}
.ui-sbhead .ui-icon-btn:hover{color:var(--foreground)}
.ui-sbsearch{all:unset;box-sizing:border-box;cursor:text;display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px;margin:2px 0 4px;border:1px solid var(--border);border-radius:10px;background:var(--background);color:var(--muted-foreground);font-size:14px;transition:border-color .12s}
.ui-sbsearch:hover{border-color:var(--ring)}
.ui-sbsearch span{flex:1}
.ui-sbsearch:focus-visible{box-shadow:0 0 0 2px var(--ring)}
.ui-aiitem svg{color:#a855f7}
.ui-sbnav{display:flex;flex-direction:column;gap:1px}
.ui-grp{margin-top:6px}
.ui-grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;border-radius:8px;user-select:none;padding:12px 10px 4px}
.ui-grp>summary::-webkit-details-marker{display:none}
.ui-grp>summary svg{transition:transform .15s;opacity:.7}
.ui-grp[open]>summary svg{transform:rotate(90deg)}
.ui-grp>summary:hover{color:var(--foreground)}
.ui-grpbody{display:flex;flex-direction:column;gap:1px}
.ui-sbfoot{gap:6px;padding:8px 0 0}
.ui-sbfoot .shc{padding:6px 8px;border-radius:10px;gap:9px;background:transparent}
.ui-sbfoot .shc-btn{width:30px;height:30px}
.ui-account{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:10px;color:var(--foreground)}
.ui-account:hover,.ui-account[aria-expanded="true"]{background:var(--sidebar-hover)}
.ui-account:focus-visible{box-shadow:inset 0 0 0 2px var(--ring)}
.ui-account .ui-acct{flex:1}
.ui-acct-more{color:var(--muted-foreground);display:grid;place-items:center}
.ui-avatar{width:28px;height:28px}
@media (hover:none){.ui-sbitem kbd,.ui-sbsearch kbd{display:none}}

/* course rail: same chrome, lesson list is the scrolling part */
.rail.ui-sidebar{overflow:hidden}
.rail.ui-sidebar>*{flex:none}
.rail.ui-sidebar>.ui-sbhead{order:0}.rail.ui-sidebar>.ui-sbsearch{order:1}.rail.ui-sidebar>.ui-rquick{order:2}
.rail.ui-sidebar>.brand{order:3}.rail.ui-sidebar>.sub,.rail.ui-sidebar>.brand-sub,.rail.ui-sidebar>.sweeps{order:4}
.rail.ui-sidebar>.prog,.rail.ui-sidebar>.progress{order:5}
.rail.ui-sidebar>nav{order:6;flex:1 1 auto;min-height:0;overflow-y:auto;margin:6px -10px 0;padding:0 10px 10px;scrollbar-width:thin;overscroll-behavior:contain}
.rail.ui-sidebar>.ui-sbfoot{order:99}
.rail .home,.rail .themebtn{display:none!important}
.ui-rquick{display:flex;flex-direction:column;gap:1px}
.rail>.brand{border-top:1px solid var(--sidebar-border);margin-top:8px;padding:14px 10px 0}
.rail>.prog,.rail>.progress{margin:8px 10px 2px}
.rail>.ui-sbfoot{margin:0 -10px;padding:8px 10px 10px}

/* account menu (shadcn dropdown) */
.ui-menu{position:fixed;z-index:95;box-sizing:border-box;overflow-y:auto;background:var(--popover);color:var(--foreground);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;font-family:var(--f-b);font-size:14px;animation:uiPop .12s ease-out}
.ui-menu[hidden]{display:none}
@keyframes uiPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ui-mwho{display:flex;align-items:center;gap:10px;padding:8px}
.ui-mwho .ui-acct small{white-space:normal}
.ui-mlv:empty{display:none}.ui-mlv{padding:0 8px 6px}
.ui-msignin{margin:0 8px 6px;display:flex;justify-content:center}
.ui-msep{height:1px;background:var(--border);margin:4px -6px}
.ui-mrow{padding:6px 8px 4px;font-size:12px;font-weight:500;color:var(--muted-foreground)}
.ui-mtheme{margin:0 4px 6px}
.ui-mitem{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:8px;color:var(--foreground);text-decoration:none}
.ui-mitem svg{color:var(--muted-foreground)}
.ui-mitem:hover,.ui-mitem:focus-visible{background:var(--accent-bg)}
.ui-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px}
.ui-mgrid a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:9px;color:var(--foreground);text-decoration:none;font-size:12px;text-align:center}
.ui-mgrid a svg{color:var(--muted-foreground)}
.ui-mgrid a:hover{background:var(--accent-bg)}
.ui-keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:4px 10px 8px;font-size:12.5px;color:var(--muted-foreground)}
.ui-keys[hidden]{display:none}
.ui-keys kbd{margin-right:4px}

/* lesson toolbar: one tidy row of icon buttons; scrolls sideways on phones instead of wrapping into a wall */
.v2bar{flex-wrap:wrap;gap:6px}
.v2bar .btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;font-size:13px;white-space:nowrap;flex:none}
.v2bar .btn svg{color:var(--muted-foreground);flex:none}
.v2bar .btn.ai-barbtn svg{color:#a855f7}
.v2bar .btn[aria-pressed="true"] svg{color:var(--gold);fill:currentColor}
@media (max-width:640px){
  .v2bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 4px}
  .v2bar::-webkit-scrollbar{display:none}
}

/* AI panel: docks beside the content on wide screens, a drawer on tablets, full screen on phones */
:root{--aiw:420px}
@media (min-width:1440px){:root{--aiw:460px}}
.ai-panel{width:min(var(--aiw),100vw)}
@media (min-width:1240px){.ai-open .v2app,.ai-open .shell{margin-right:var(--aiw)}.ai-panel{box-shadow:none}}
.ai-listwrap{position:relative;flex:1;min-height:0;display:flex}
.ai-listwrap>.ai-list{flex:1;min-width:0}
.ai-jump{all:unset;cursor:pointer;position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--background);color:var(--foreground);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:16px}
.ai-jump[hidden]{display:none}
.ai-md>:first-child{margin-top:0}.ai-md>:last-child{margin-bottom:0}
.ai-md+.ai-md>:first-child{margin-top:.5em}
.ai-body:not(.ai-started) .ai-live::before{content:"";display:inline-block;width:34px;height:10px;margin:6px 0;background:radial-gradient(circle,var(--muted-foreground) 3.5px,transparent 4px) 0 50%/12px 10px repeat-x;animation:aiPulse 1s ease-in-out infinite}
@keyframes aiPulse{50%{opacity:.35}}
.ai-live>:last-child:not(pre):not(ul):not(ol):not(table):not(.ai-diagram)::after,.ai-live>:is(ul,ol):last-child>li:last-child::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:text-bottom;border-radius:1px;background:currentColor;opacity:.55;animation:aiBlink 1s steps(1) infinite}
@keyframes aiBlink{50%{opacity:0}}
.ai-dg-wait{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;color:var(--muted-foreground);font-size:13px}
.ai-dg-wait .ai-typing{padding:0}
.ai-send.ai-stop{background:var(--secondary);color:var(--foreground);border:1px solid var(--border)}
.ai-head{min-height:52px;box-sizing:border-box}
.ai-msg{font-size:14.5px}
@media (max-width:640px){
  .ai-panel{top:0;bottom:auto;height:var(--vvh,100dvh);width:100vw;animation:aiUp .2s ease}
  .ai-form textarea{font-size:16px}
  .ai-frow{flex-wrap:wrap}
  .ai-model{max-width:120px}
  .ai-open body{overflow:hidden}
}
@keyframes aiUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.ui-top .ui-aitop svg{color:#a855f7}
/* app pages already have Ask AI in the top bar on phones */
@media (max-width:900px){body:has(.ui-top) .ai-fab{display:none}}
.v2bar{flex-wrap:nowrap}
.v2more{position:relative;flex:none}
.v2more-m{position:absolute;top:calc(100% + 6px);left:0;width:250px;z-index:50;display:flex;flex-direction:column}
.v2more-m[hidden]{display:none}
@media (max-width:640px){.v2more-b span{display:none}.v2more-m{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto}}
@media (min-width:641px){.v2bar{flex-wrap:wrap}}
/* small-screen guards */
.v2row>select,.v2row>input,select.v2in{max-width:100%;min-width:0}
#signedin{overflow-wrap:anywhere}
.v2wrap{min-width:0}
@media (max-width:640px){.v2wrap{padding-top:20px}}
.v2row{max-width:100%;min-width:0}
.rv-top>*{min-width:0;max-width:100%}
@media (max-width:640px){.v2more-m{z-index:96}select.v2in{text-overflow:ellipsis}}