/* L3 Biochimie G1 — "Coomassie" identity.
   The palette comes from the bench: Coomassie blue (protein gel stain) as the brand ground,
   Ponceau red-pink for exams, amber for TD and deadlines. A rotating alpha-helix is the one bold moment;
   everything below it stays calm so the daily tools are quick to read. */
:root{
  --bg:#f4f5fb; --surface:#ffffff; --surface-2:#eceff9; --ink:#121633; --ink-2:#2e3458; --muted:#5b6185; --line:#dde1f0; --line-2:#c7cde6;
  --accent:#2b3fd1; --accent-hover:#2233b3; --accent-ink:#ffffff; --accent-soft:#e4e8ff;
  --amber:#a05a00; --amber-soft:#fdeed8; --rose:#c22a5a; --rose-soft:#fde4ec; --ok:#16794b; --ok-soft:#ddf3e7;
  --hero-1:#0e1660; --hero-2:#1a2aa0; --hero-ink:#f3f5ff; --hero-muted:#b9c1f5; --hero-line:rgba(255,255,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05);
  --shadow-lift:0 2px 6px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.10);
  --display:"Bricolage Grotesque","Readex Pro",system-ui,sans-serif;
  --sans:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --r-sm:10px; --r:14px; --r-lg:20px;
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem; --t-lg:1.25rem; --t-xl:1.5rem; --t-2xl:2.125rem; --t-hero:clamp(2.4rem,5.4vw,4.4rem);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0d1c; --surface:#131731; --surface-2:#1a1f3f; --ink:#eaecfb; --ink-2:#c6cbef; --muted:#959cc8; --line:#262c52; --line-2:#333b6a;
  --accent:#8c9bff; --accent-hover:#a9b4ff; --accent-ink:#0b0f33; --accent-soft:#232b66;
  --amber:#f4ad55; --amber-soft:#3a2914; --rose:#ff86a8; --rose-soft:#43172a; --ok:#5fd39a; --ok-soft:#123424;
  --hero-1:#080b2e; --hero-2:#141f7a; --hero-ink:#f3f5ff; --hero-muted:#a9b2ee; --hero-line:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3); --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0d1c; --surface:#131731; --surface-2:#1a1f3f; --ink:#eaecfb; --ink-2:#c6cbef; --muted:#959cc8; --line:#262c52; --line-2:#333b6a;
  --accent:#8c9bff; --accent-hover:#a9b4ff; --accent-ink:#0b0f33; --accent-soft:#232b66;
  --amber:#f4ad55; --amber-soft:#3a2914; --rose:#ff86a8; --rose-soft:#43172a; --ok:#5fd39a; --ok-soft:#123424;
  --hero-1:#080b2e; --hero-2:#141f7a; --hero-ink:#f3f5ff; --hero-muted:#a9b2ee; --hero-line:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3); --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark}

/* ---------- base + browser surfaces ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--t-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--accent);accent-color:var(--accent)}
::selection{background:var(--accent-soft);color:var(--ink)}
*{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.015em;font-family:var(--display)}
h3,h4{font-family:var(--sans)}
p{margin:0}
a{color:inherit}
select,input,textarea,button{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:0}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:15px;height:15px}
[dir="rtl"] .flip{transform:scaleX(-1)}

.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;min-height:60px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;flex:1;text-decoration:none}
.mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.mark svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.brand-txt{min-width:0}
.brand h1{font-size:var(--t-md);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;color:var(--muted);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctrls{display:flex;gap:8px;align-items:center}
.seg{display:flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px}
.seg button{background:none;border:0;border-radius:7px;padding:4px 9px;font-size:var(--t-xs);font-weight:600;color:var(--muted);transition:background-color 140ms var(--ease),color 140ms var(--ease)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:var(--t-sm);border:0;transition:transform 160ms var(--ease)}
.avatar:active{transform:scale(.95)}

nav.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
nav.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:7px;background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px 11px;color:var(--muted);font-weight:500;font-size:var(--t-sm);white-space:nowrap;transition:color 140ms var(--ease),border-color 200ms var(--ease)}
.tab[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.tab .badge{background:var(--rose);color:#fff;border-radius:99px;font-size:11px;font-weight:700;min-width:17px;height:17px;display:grid;place-items:center;padding:0 5px}
@media (hover:hover) and (pointer:fine){.tab:hover{color:var(--ink)}}

/* bottom bar on phones */
nav.dock{display:none}
@media (max-width:720px){
  nav.tabs{display:none}
  nav.dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset:auto 0 0;z-index:6;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .dock .tab{flex-direction:column;gap:3px;border:0;padding:6px 2px;font-size:11.5px;justify-content:center;border-radius:10px;position:relative}
  .dock .tab .ico{width:21px;height:21px}
  .dock .tab[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
  .dock .tab .badge{position:absolute;top:2px;inset-inline-end:calc(50% - 20px)}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  .brand small{display:none}
}

/* ---------- layout ---------- */
main{padding-block:28px 64px;display:grid;gap:28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h2{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.page-head p{color:var(--muted);margin-top:4px}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.stack{display:grid;gap:24px;min-width:0}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;min-width:0;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.panel-h h3{font-size:var(--t-md);font-weight:600;display:flex;align-items:center;gap:8px}
.count{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);font-weight:500;background:var(--surface-2);border-radius:6px;padding:1px 7px}
.more{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--accent);font-weight:600;font-size:var(--t-sm);padding:4px 2px}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--accent-hover)}.more:hover .ico{transform:translateX(2px)}[dir="rtl"] .more:hover .ico{transform:translateX(-2px) scaleX(-1)}}
.more .ico{transition:transform 160ms var(--ease)}

/* ---------- hero: today ---------- */
.hero-today{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 18px;display:grid;gap:18px;min-width:0}
.hero-today .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.hero-today .date{font-size:var(--t-sm);color:var(--muted);font-weight:500}
.hero-today h2{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:2px}
.hero-today h2 .hl{color:var(--accent)}
.clock{font-family:var(--mono);font-size:var(--t-lg);font-weight:500;color:var(--ink-2)}
.track{position:relative;height:44px;background:var(--surface-2);border-radius:10px;overflow:hidden;padding:6px 8px}
.track-in{position:relative;height:100%}
.track .blk{position:absolute;top:0;bottom:0;border-radius:7px;display:block;line-height:32px;padding-inline:8px;font-size:11.5px;font-weight:600;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:4px}
.track .blk.done{opacity:.45}
.track .now-line{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);border-radius:2px}
.track .now-line::before{content:"";position:absolute;top:-1px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:6px;direction:ltr}
.sessions{display:grid;gap:2px}
.sess{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 12px;border-radius:10px}
.sess.live{background:var(--accent-soft)}
.sess .time{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-2);direction:ltr;text-align:start}
.sess .name{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.sess .sub{color:var(--muted);font-size:var(--t-sm);display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:2px}
.sess .sub span{display:inline-flex;align-items:center;gap:4px}
.sess.done .name{color:var(--muted)}
.state{font-size:var(--t-xs);font-weight:600;padding:3px 8px;border-radius:99px;white-space:nowrap}
.state.live{background:var(--accent);color:var(--accent-ink)}
.state.next{background:var(--surface-2);color:var(--ink-2)}
.state.done{color:var(--muted)}
.dot{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block}
@media (max-width:520px){.seg button{padding:4px 7px}.bar{gap:10px}.sess{grid-template-columns:64px minmax(0,1fr)}.sess .state{grid-column:2;justify-self:start}.hero-today h2{font-size:var(--t-xl)}.track .blk{font-size:0;padding:0}}

/* ---------- exam countdown ---------- */
.exam{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:14px}
.prow + .prow{box-shadow:inset 0 1px 0 var(--line)}
.exam:first-child{border-top:0;padding-top:2px}
.cd{width:58px;height:58px;padding:6px;border-radius:12px;background:var(--surface-2);display:grid;place-content:center;text-align:center;line-height:1}
.cd b{font-family:var(--mono);font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums}
.cd small{font-size:11px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.cd.soon{background:var(--rose-soft);color:var(--rose)}
.cd.soon small{color:var(--rose)}
.cd.past{opacity:.55}
.exam b.t{font-weight:600;display:block;line-height:1.3;overflow-wrap:anywhere}

/* ---------- lists ---------- */
.list{display:grid}
.item{padding-block:14px;border-top:1px solid var(--line);display:grid;gap:5px;min-width:0}
.item:first-child{border-top:0;padding-top:0}
.item:last-child{padding-bottom:0}
.item h4{margin:0;font-size:var(--t-md);font-weight:600;line-height:1.35}
.item p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2);max-width:72ch}
.meta{color:var(--muted);font-size:var(--t-sm);display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.meta .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);line-height:1.6}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--rose-soft);color:var(--rose)}
.empty{color:var(--muted);font-size:var(--t-sm);padding:22px 18px;border:1px dashed var(--line-2);border-radius:var(--r);display:grid;gap:4px;justify-items:center;text-align:center}
.empty b{color:var(--ink-2);font-weight:600;font-size:var(--t-base)}

/* resource rows */
.doc{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;margin-inline:-10px;border-radius:10px;text-decoration:none;color:inherit;transition:background-color 140ms var(--ease)}
.doc + .doc{margin-top:2px}
.doc .ftype{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.doc .ftype.td{background:var(--amber-soft);color:var(--amber)}
.doc .ftype.tp{background:var(--ok-soft);color:var(--ok)}
.doc .ftype.exam,.doc .ftype.corr{background:var(--rose-soft);color:var(--rose)}
.doc .ftype.cours{background:var(--accent-soft);color:var(--accent)}
.doc .dt{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.doc .go{color:var(--muted);transition:transform 160ms var(--ease),color 140ms var(--ease)}
@media (hover:hover) and (pointer:fine){a.doc:hover{background:var(--surface-2)}a.doc:hover .go{color:var(--accent);transform:translate(2px,-2px)}}
a.doc:active{transform:scale(.99)}

/* module filter */
.mods{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 13px;font-size:var(--t-sm);color:var(--ink-2);transition:border-color 140ms var(--ease),background-color 140ms var(--ease),transform 160ms var(--ease)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
@media (hover:hover) and (pointer:fine){.chip:not([aria-pressed="true"]):hover{border-color:var(--line-2);background:var(--surface-2)}}

/* module section header */
.mod-h{display:flex;align-items:center;gap:10px}
.mod-h .sw{width:12px;height:12px;border-radius:4px;flex:none}

/* ---------- timetable ---------- */
.tt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:6px}
.tt{display:grid;grid-template-columns:78px repeat(6,minmax(132px,1fr));min-width:880px}
.tt .hd{padding:12px 10px;font-weight:600;font-size:var(--t-sm);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);display:flex;align-items:center;gap:6px}
.tt .hd.today{color:var(--accent)}
.tt .hd.today::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tt .tm{padding:10px;font-family:var(--mono);font-size:12px;color:var(--muted);border-top:1px solid var(--line);line-height:1.35;direction:ltr}
.tt .cell{border-top:1px solid var(--line);border-inline-start:1px solid var(--line);padding:5px;min-height:84px}
.tt .cell.today{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.tt .cls{height:100%;border-radius:9px;padding:9px 10px;display:grid;gap:3px;align-content:start;background:color-mix(in srgb,var(--c) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 28%,transparent);position:relative;overflow:hidden}
.tt .cls.live{box-shadow:0 0 0 2px var(--accent)}
.tt .cls b{font-size:var(--t-sm);font-weight:600;line-height:1.3}
.tt .cls span{font-size:var(--t-xs);color:var(--ink-2)}
.tt .cls .mono{font-size:12px;color:var(--muted)}
.days{display:none;gap:14px}
@media (max-width:820px){.tt-wrap{display:none}.days{display:grid}}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.day.today{border-color:var(--accent)}
.day h3{font-size:var(--t-md);font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.day .tag{font-size:var(--t-xs);font-weight:600;background:var(--accent);color:var(--accent-ink);padding:1px 8px;border-radius:99px}
.day .sess{padding-inline:0}
.day .sess.live{padding-inline:10px;margin-inline:-10px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:var(--accent-ink);border:1px solid transparent;border-radius:10px;padding:9px 16px;font-weight:600;font-size:var(--t-sm);text-decoration:none;line-height:1.2;transition:background-color 140ms var(--ease),border-color 140ms var(--ease),transform 160ms var(--ease)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--accent-hover)}}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--surface-2)}}
.btn.small{padding:6px 11px;font-size:var(--t-xs);border-radius:8px}
.btn.danger{background:var(--surface);color:var(--rose);border-color:var(--line-2)}
@media (hover:hover) and (pointer:fine){.btn.danger:hover{background:var(--rose-soft)}}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.wide{width:100%}
.adminrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--accent);padding:4px 0;font-weight:600}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- quiz ---------- */
.quiz-card{display:grid;gap:4px}
.q{display:grid;gap:9px;padding-block:18px;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0}
.q b.qt{font-weight:600;line-height:1.45}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:var(--surface);text-align:start;width:100%;line-height:1.45;transition:border-color 140ms var(--ease),background-color 140ms var(--ease),transform 160ms var(--ease)}
.opt:active:not(:disabled){transform:scale(.99)}
.opt .k{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);flex:none}
@media (hover:hover) and (pointer:fine){.opt:not(:disabled):hover{border-color:var(--line-2);background:var(--surface-2)}}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opt[aria-pressed="true"] .k{background:var(--accent);color:var(--accent-ink)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .k{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--rose);background:var(--rose-soft)}
.opt.wrong .k{background:var(--rose);color:#fff}
.opt:disabled{cursor:default}
.explain{font-size:var(--t-sm);color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:10px 13px;line-height:1.5}
.quiz-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.score{font-size:var(--t-lg);font-weight:600}
.score .mono{color:var(--accent)}
.meter{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;flex:1;min-width:120px}
.meter i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width 300ms var(--ease)}

/* ---------- forum ---------- */
.thread{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 12px;margin-inline:-12px;border-radius:12px;text-decoration:none;color:inherit;transition:background-color 140ms var(--ease)}
.thread + .thread{border-top:1px solid var(--line);border-radius:0 0 12px 12px}
@media (hover:hover) and (pointer:fine){.thread:hover{background:var(--surface-2);border-radius:12px}}
.thread h3{margin:0 0 4px;font-size:var(--t-base);font-weight:600;line-height:1.35}
.replies-n{display:grid;justify-items:center;min-width:52px;color:var(--muted);font-size:11.5px;line-height:1.2}
.replies-n b{font-family:var(--mono);font-size:var(--t-md);color:var(--ink-2)}
.thread-head{display:grid;gap:10px}
.thread-head h2{font-size:var(--t-xl);font-weight:600}
.thread-head p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;max-width:72ch}
.reply{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding-block:14px;border-top:1px solid var(--line)}
.reply:first-of-type{border-top:0;padding-top:4px}
.reply .av{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:var(--t-xs)}
.reply p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:3px;line-height:1.55}
.who{font-weight:600;color:var(--ink)}
.notice{background:var(--amber-soft);color:var(--amber);border-radius:var(--r);padding:12px 16px;font-size:var(--t-sm);font-weight:500;display:flex;gap:10px;align-items:flex-start}
.notice.info{background:var(--accent-soft);color:var(--accent)}

/* ---------- admin ---------- */
.userrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:12px;border-top:1px solid var(--line)}
.userrow:first-of-type{border-top:0;padding-top:0}
.userrow .u{display:flex;gap:10px;align-items:center;min-width:0}
.userrow .av{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:700;font-size:var(--t-xs);flex:none}

/* ---------- sheet (dialog) ---------- */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(6,14,11,.42);display:grid;place-items:end center;opacity:1;transition:opacity 200ms var(--ease)}
.sheet .box{background:var(--surface);width:100%;max-width:540px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:22px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:grid;gap:14px;box-shadow:var(--shadow-lift);transform:none;transition:transform 240ms var(--ease-drawer,cubic-bezier(.32,.72,0,1))}
.sheet .box h2{font-size:var(--t-lg);font-weight:600}
@starting-style{.sheet{opacity:0}.sheet .box{transform:translateY(24px)}}
@media (min-width:640px){.sheet{place-items:center}.sheet .box{border-radius:18px;transition:transform 200ms var(--ease),opacity 200ms var(--ease)}@starting-style{.sheet .box{transform:scale(.96);opacity:0}}}
.field{display:grid;gap:6px}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:10px 12px;width:100%;transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input[type=checkbox]{width:18px;height:18px;box-shadow:none}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field .hint{font-size:var(--t-xs);color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.err{color:var(--rose);font-size:var(--t-sm);font-weight:500}
.sheet-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.progress{height:5px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width 200ms linear}

/* ---------- toast ---------- */
.toast{position:fixed;inset-inline:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:30;pointer-events:none}
@media (max-width:720px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.toast span{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;font-size:var(--t-sm);font-weight:500;box-shadow:var(--shadow-lift);transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
@starting-style{.toast span{transform:translateY(12px);opacity:0}}

/* ---------- skeleton ---------- */
.sk{background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 50%,var(--surface)) 50%,var(--surface-2) 100%);background-size:200% 100%;border-radius:10px;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

.copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy code{font-family:var(--mono);font-size:var(--t-xs);background:var(--surface-2);padding:6px 10px;border-radius:8px;overflow-wrap:anywhere;min-width:0}

footer{color:var(--muted);font-size:var(--t-xs);padding-block:8px 32px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media (max-width:720px){footer{display:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0ms!important;animation:none!important}}

@media (max-width:720px){
  .mods{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px));padding-block:2px}
  .mods::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}
  .login-txt{display:none}
  .btn.login{padding:7px;border-radius:50%;width:34px;height:34px}
  .page-head h2{font-size:var(--t-xl)}
}
@media (min-width:721px){.login-ico{display:none}}

/* ================= hero ================= */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--hero-ink);background:linear-gradient(160deg,var(--hero-2) 0%,var(--hero-1) 62%);border-radius:0 0 28px 28px;margin-top:-1px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center;padding-block:56px 44px;min-height:440px}
.hero canvas{width:100%;height:470px;display:block}
.hero .viz{position:relative;min-width:0}
.hero .viz-cap{position:absolute;inset:auto 0 -10px 0;text-align:center;font-family:var(--mono);font-size:var(--t-xs);color:var(--hero-muted);letter-spacing:.02em}
.eyebrow-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid var(--hero-line);border-radius:99px;padding:5px 12px 5px 6px;font-size:var(--t-sm);color:var(--hero-ink)}
.eyebrow-chip b{background:#ffd166;color:#1a1300;border-radius:99px;padding:1px 8px;font-size:var(--t-xs);font-weight:600}
.hero h2{font-size:var(--t-hero);font-weight:700;line-height:1.02;letter-spacing:-.035em;margin-top:18px;color:#fff}
.hero h2 .soft{color:var(--hero-muted);font-weight:500}
.hero .lead{font-size:var(--t-md);color:var(--hero-muted);max-width:46ch;margin-top:16px;line-height:1.6}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn.hero-btn{background:#fff;color:var(--hero-1);padding:12px 20px;font-size:var(--t-base);border-radius:12px}
@media (hover:hover) and (pointer:fine){.btn.hero-btn:hover{background:#e8ebff}}
.btn.hero-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:var(--hero-line);padding:12px 20px;font-size:var(--t-base);border-radius:12px}
@media (hover:hover) and (pointer:fine){.btn.hero-ghost:hover{background:rgba(255,255,255,.16)}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hero-line);border:1px solid var(--hero-line);border-radius:16px;overflow:hidden;margin-top:34px;max-width:560px}
.stat{background:var(--hero-1);padding:14px 16px;min-width:0}
.stat b{display:block;font-family:var(--display);font-size:var(--t-xl);font-weight:700;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:var(--t-xs);color:var(--hero-muted);margin-top:5px;line-height:1.4;overflow-wrap:anywhere}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr);padding-block:36px 28px;min-height:0}
  .hero .viz{position:absolute;inset:-40px -90px auto auto;width:280px;pointer-events:none;z-index:-1}
  .hero .viz canvas{opacity:.32}
  [dir="rtl"] .hero .viz{inset:-40px auto auto -90px}
  .hero canvas{height:340px}
  .hero .viz-cap{display:none}
  .stats{max-width:none}
}
@media (max-width:520px){.stat{padding:12px}.stat b{font-size:var(--t-lg)}.hero .lead{font-size:var(--t-base)}}
main.home{padding-top:28px}

/* ================= module tiles ================= */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.tile{position:relative;overflow:hidden;border-radius:18px;padding:16px;min-height:132px;display:grid;align-content:space-between;gap:12px;text-align:start;border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 16%,var(--surface)) 0%,var(--surface) 70%);color:var(--ink);transition:transform 180ms var(--ease),box-shadow 180ms var(--ease),border-color 180ms var(--ease)}
.tile:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}}
.tile[aria-pressed="true"]{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 60%,transparent)}
.tile .glyph{width:42px;height:42px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center}
.tile .glyph .ico{width:22px;height:22px}
.tile b{font-size:var(--t-base);font-weight:600;line-height:1.3;display:block}
.tile small{color:var(--muted);font-size:var(--t-xs);font-family:var(--mono)}

@media (max-width:620px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{min-height:0;padding:12px;border-radius:14px;gap:10px}
  .tile .glyph{width:34px;height:34px;border-radius:10px}
  .tile .glyph .ico{width:18px;height:18px}
  .tile b{font-size:var(--t-sm)}
}
.tt .cls bdi,.meta bdi{white-space:nowrap}

/* ---------- interface guidelines pass ---------- */
html{-webkit-tap-highlight-color:transparent}
@media (pointer:fine){html{overscroll-behavior:none}}
button,a,.tab,.chip,.tile,.opt{touch-action:manipulation}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top 160ms var(--ease)}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
main:focus{outline:none}
[id]{scroll-margin-top:120px}
a.tab{text-decoration:none}
.sheet .box{overscroll-behavior:contain}
.field select{background-color:var(--surface);color:var(--ink)}
.viz-pause{position:absolute;inset-inline-end:8px;bottom:28px;width:36px;height:36px;border-radius:50%;border:1px solid var(--hero-line);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;pointer-events:auto;transition:background-color 140ms var(--ease),transform 160ms var(--ease)}
.viz-pause:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.viz-pause:hover{background:rgba(255,255,255,.2)}}
@media (max-width:900px){.viz-pause{bottom:auto;top:60px;inset-inline-end:110px}}
@media (prefers-reduced-motion:reduce){.viz-pause{display:none}}

/* ================= tools ================= */
.icon-btn{width:36px;height:36px;border-radius:10px;border:0;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;transition:background-color 140ms var(--ease),transform 160ms var(--ease)}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--line)}}
@media (max-width:520px){.icon-btn{width:32px;height:32px}.ctrls{gap:6px}}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.tool{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform 180ms var(--ease),box-shadow 180ms var(--ease)}
.tool:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.tool:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}.tool:hover .go{color:var(--accent)}}
.tool .glyph{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.tool b{display:block;font-weight:600;line-height:1.3}
.tool small{display:block;color:var(--muted);font-size:var(--t-xs);margin-top:3px;line-height:1.4;overflow-wrap:anywhere}
.tool .go{color:var(--muted);transition:color 140ms var(--ease)}

/* grades */
.grades{display:grid;gap:0;padding-block:8px}
.grow{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px 64px auto 64px;gap:10px;align-items:center;padding-block:12px;border-top:1px solid var(--line)}
.grow:first-child{border-top:0}
.gname{display:flex;gap:8px;align-items:center;min-width:0}
.gname b{font-weight:600;font-size:var(--t-sm);line-height:1.3}
.gcell{display:grid;gap:3px}
.gcell span{font-size:var(--t-xs);color:var(--muted)}
.gcell input{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:7px 8px;background:var(--surface);font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:center}
.gcell input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gcell input:disabled{opacity:.45}
.gchk{display:flex;gap:6px;align-items:center;font-size:var(--t-xs);color:var(--muted);white-space:nowrap}
.gavg{font-family:var(--mono);font-weight:600;text-align:center;border-radius:8px;padding:6px 4px;background:var(--surface-2)}
.gavg.ok{background:var(--ok-soft);color:var(--ok)}
.gavg.bad{background:var(--rose-soft);color:var(--rose)}
@media (max-width:720px){.grow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}.gname{grid-column:1/-1}.gchk{grid-column:1/3}.gavg{grid-column:3}}
.sem{display:grid;gap:10px;justify-items:start}
.label2{font-size:var(--t-sm);color:var(--muted);font-weight:500}
.big{font-family:var(--display);font-size:3rem;line-height:1;font-weight:700;letter-spacing:-.03em}
.big small{font-size:var(--t-lg);color:var(--muted);font-weight:500;margin-inline-start:4px}
.big.ok{color:var(--ok)}.big.bad{color:var(--rose)}
.sem .meter{width:100%}

/* flashcards */
.decks{display:grid;gap:10px}
.deck{display:grid;grid-template-columns:42px minmax(0,1fr) 120px;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-align:start;box-shadow:var(--shadow);transition:transform 180ms var(--ease)}
.deck:active{transform:scale(.99)}
.deck .glyph{width:42px;height:42px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center}
.deck b{display:block;font-weight:600}
.deck small{color:var(--muted);font-size:var(--t-xs)}
@media (max-width:520px){.deck{grid-template-columns:42px minmax(0,1fr)}.deck .meter{grid-column:1/-1}}
.study{display:grid;gap:14px;justify-items:center;max-width:620px;margin-inline:auto;width:100%}
.flash{width:100%;min-height:260px;border-radius:22px;border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,var(--surface)),var(--surface) 70%);box-shadow:var(--shadow-lift);display:grid;place-content:center;gap:12px;padding:28px;text-align:center;transition:transform 220ms var(--ease)}
.flash:active{transform:scale(.985)}
.flash .side{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,1.9rem);font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.flash.is-back .side{font-family:var(--sans);font-weight:500;font-size:clamp(1.05rem,2.6vw,1.3rem)}
.flash small{color:var(--muted);font-size:var(--t-xs)}
.study-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* polls */
.popts{display:grid;gap:8px;margin-bottom:10px}
.popt{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;background:var(--surface);text-align:start;transition:border-color 140ms var(--ease)}
.popt .pbar{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);z-index:0;transition:width 300ms var(--ease)}
[dir="rtl"] .popt .pbar{inset:0 0 0 auto}
.popt .ptxt,.popt .pval{position:relative;z-index:1}
.popt .pval{font-family:var(--mono);font-weight:600;color:var(--ink-2)}
.popt.mine{border-color:var(--accent)}
.popt:disabled{cursor:default}
@media (hover:hover) and (pointer:fine){.popt:not(:disabled):hover{border-color:var(--accent)}}

/* progress */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.kpi b{display:block;font-family:var(--display);font-size:var(--t-2xl);font-weight:700;line-height:1.1}
.kpi span{color:var(--muted);font-size:var(--t-sm)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:14px;align-items:center;padding-block:14px}
.prow + .prow{box-shadow:inset 0 1px 0 var(--line)}
@media (max-width:620px){.prow{grid-template-columns:minmax(0,1fr)}}

/* search */
.hits{display:grid;gap:4px;max-height:52vh;overflow:auto;overscroll-behavior:contain}
.hit{display:grid;gap:2px;text-align:start;padding:10px 12px;border-radius:10px;border:0;background:none;text-decoration:none;color:var(--ink)}
.hit small{font-size:var(--t-xs);color:var(--accent);font-weight:600}
.hit b{font-weight:500}
@media (hover:hover) and (pointer:fine){.hit:hover{background:var(--surface-2)}}
.panel-h h3 .ico{color:var(--accent)}

@media (max-width:520px){.icon-btn[data-act="theme"]{display:none}}

/* bulk import */
.drop{display:flex;gap:10px;align-items:center;justify-content:center;border:1.5px dashed var(--line-2);border-radius:14px;padding:22px;color:var(--ink-2);cursor:pointer;transition:border-color 140ms var(--ease),background-color 140ms var(--ease)}
@media (hover:hover) and (pointer:fine){.drop:hover{border-color:var(--accent);background:var(--accent-soft)}}
.bulk{display:grid;margin-top:12px}
.brow{display:grid;grid-template-columns:28px minmax(0,1fr) 200px 130px 44px;gap:10px;align-items:center;padding-block:10px;box-shadow:inset 0 1px 0 var(--line)}
.brow.off .binp{background:var(--surface-2);color:var(--muted)}
.binp{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:7px 9px;background:var(--surface);color:var(--ink);min-width:0}
.binp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bstate{font-family:var(--mono);font-size:var(--t-xs);color:var(--ok);text-align:center}
@media (max-width:720px){.brow{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr)}.brow>div{grid-column:2/-1}.brow select[data-bulk="mod"]{grid-column:2}.bstate{grid-column:1;grid-row:1}}

/* courses split by type */
.kseg{display:flex;gap:8px;flex-wrap:wrap}
.kseg .chip .count{margin-inline-start:2px;background:transparent;padding:0}
.kseg .chip[aria-pressed="true"] .count{color:inherit;opacity:.8}
.kgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.kgroup{min-width:0}
.khead{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:var(--t-sm);font-weight:600}
.khead .pill{font-size:var(--t-sm);padding:3px 10px}
@media (max-width:720px){.kseg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px))}.kseg .chip{flex:none}}