/* NETFIVE Student — design system.
   Green rail, warm cream ground, Fraunces headings. Light and dark. */

:root{
  --paper:#FBFAF6; --surface:#FFFFFF; --surface-2:#F4F5F1; --surface-3:#EBEEE7;
  --ink:#16211B; --ink-2:#4C5B52; --ink-3:#7C8A80;
  --line:#E2E7DE; --line-2:#D2DACD;
  --brand:#1F6B45; --brand-ink:#FFFFFF; --brand-soft:#E7F1EA; --brand-line:#BFDCCB;
  --lime:#C9EF5B; --lime-ink:#1E2A12;
  --amber:#9A6712; --amber-soft:#FBF0DC; --amber-line:#E8D4A8;
  --rose:#A93F33; --rose-soft:#FAE7E4; --rose-line:#EEC4BE;
  --violet:#5F4FA8; --violet-soft:#EDEAF8;
  --rail-bg:#1B3A2A; --rail-ink:#DCE8DF; --rail-dim:#8FAE9A; --rail-on:#2A5540;
  --shadow:0 1px 2px rgba(22,33,27,.05),0 10px 28px -18px rgba(22,33,27,.3);
  --display:'Fraunces',Georgia,serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#0F1411; --surface:#161D18; --surface-2:#1C2520; --surface-3:#232E27;
  --ink:#ECF1EA; --ink-2:#A6B3AA; --ink-3:#7A887F;
  --line:#293430; --line-2:#374541;
  --brand:#54BE88; --brand-ink:#07160E; --brand-soft:#16301F; --brand-line:#26513A;
  --amber:#DCA84B; --amber-soft:#2C2313; --amber-line:#4A3A1C;
  --rose:#E58B7E; --rose-soft:#331F1C; --rose-line:#563029;
  --violet:#A497E8; --violet-soft:#221E36;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -18px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --paper:#0F1411; --surface:#161D18; --surface-2:#1C2520; --surface-3:#232E27;
  --ink:#ECF1EA; --ink-2:#A6B3AA; --ink-3:#7A887F;
  --line:#293430; --line-2:#374541;
  --brand:#54BE88; --brand-ink:#07160E; --brand-soft:#16301F; --brand-line:#26513A;
  --amber:#DCA84B; --amber-soft:#2C2313; --amber-line:#4A3A1C;
  --rose:#E58B7E; --rose-soft:#331F1C; --rose-line:#563029;
  --violet:#A497E8; --violet-soft:#221E36;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
p{margin:0}
a{color:var(--brand)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- rail ---------------- */
.side{position:fixed;left:0;top:0;bottom:0;width:214px;background:var(--rail-bg);color:var(--rail-ink);display:flex;flex-direction:column;padding:18px 0;z-index:60;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:9px;padding:0 18px 18px;font-family:var(--display);font-weight:700;font-size:16px;color:#fff;text-decoration:none}
.side .brand i{width:26px;height:26px;border-radius:7px;background:var(--lime);color:#16281A;display:grid;place-items:center;font-style:normal;font:700 10px var(--body)}
.side .lbl{padding:14px 18px 6px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-dim)}
.side a.nav{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:13.5px;color:var(--rail-ink);text-decoration:none;border-left:3px solid transparent}
.side a.nav:hover{background:rgba(255,255,255,.06)}
.side a.nav.on{background:var(--rail-on);border-left-color:var(--lime);font-weight:700}
.side a.nav em{font-style:normal;width:15px;text-align:center;opacity:.85;font-size:12px}
.side a.nav s{text-decoration:none;margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--rail-dim)}
.side .bot{margin-top:auto;padding:16px 18px 0;border-top:1px solid rgba(255,255,255,.11)}
.side .setup{width:100%;background:var(--lime);color:#16281A;border-radius:9px;padding:9px;font-weight:700;font-size:13px}
.side .prof{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:12.5px}
.side .prof i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font:700 10px var(--body);color:#fff;flex:none}
.side .prof small{display:block;color:var(--rail-dim);font-size:11px}
.side .out{display:block;margin-top:11px;font-size:12px;color:var(--rail-dim);text-decoration:underline}
.shell{margin-left:214px;min-height:100vh}
.sidetoggle{display:none}
@media(max-width:900px){
  .side{transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:59}
  .side{z-index:60}
  .shell{margin-left:0}
  .sidetoggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;font-size:15px}
}

/* ---------------- chrome ---------------- */
.chrome{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.chrome-in{max-width:1300px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:16px;white-space:nowrap}
.logo i{width:26px;height:26px;border-radius:7px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-style:normal;font:700 10px var(--body)}
.logo small{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.chrome-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.me{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 11px var(--body)}
.wrap{max-width:1300px;margin:0 auto;padding:24px 22px 90px}

/* ---------------- primitives ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:9px;font-weight:700;font-size:14px;background:var(--brand);color:var(--brand-ink);transition:filter .12s,transform .12s;white-space:nowrap;text-decoration:none}
.btn:hover{filter:brightness(1.09)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink);font-weight:500}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.danger{background:var(--rose);color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font:500 11.5px/1.5 var(--body);border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface);white-space:nowrap}
.chip.done{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.chip.doing{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.chip.open{background:var(--surface-2);border-style:dashed;color:var(--ink-3)}
.av{border-radius:50%;display:grid;place-items:center;color:#fff;font:700 10px var(--body);flex:none;width:26px;height:26px}
.av.none{background:var(--surface-3);color:var(--ink-3)}
.sec{margin-bottom:32px;scroll-margin-top:70px}
.sec-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:13px;flex-wrap:wrap}
.sec-head h2{font-size:20px}
.sec-head p{font-size:13px;color:var(--ink-3);margin-top:3px}
.sec-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.cols{display:grid;grid-template-columns:1fr 328px;gap:22px;align-items:start}
@media(max-width:1020px){.cols{grid-template-columns:1fr}}
.muted{color:var(--ink-3)}
.empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ---------------- hero ---------------- */
.hero{background:var(--ink);color:var(--paper);border-radius:16px;padding:25px 28px;margin-bottom:16px}
.hero .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lime)}
.hero h1{font-size:clamp(21px,2.8vw,29px);color:var(--paper);margin:10px 0 0;max-width:28ch}
.hero h1 u{text-decoration:none;border-bottom:3px solid var(--lime);padding-bottom:1px}
.hero h1 u.bad{border-bottom-color:var(--rose)}
.hero-acts{display:flex;gap:9px;margin-top:19px;flex-wrap:wrap}
.hero-acts button{border:1px solid color-mix(in srgb,var(--paper) 26%,transparent);border-radius:9px;padding:9px 14px;font-size:13.5px;color:var(--paper);display:flex;align-items:center;gap:9px;text-align:left}
.hero-acts button:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}
.hero-acts i{font-style:normal;width:7px;height:7px;border-radius:50%;flex:none}
.t-urgent{background:#E58B7E}.t-watch{background:#DCA84B}.t-good{background:#7ED6A4}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:26px}
.strip>div{padding:14px 17px}
.strip>div+div{border-left:1px solid var(--line)}
@media(max-width:780px){.strip>div+div{border-left:0;border-top:1px solid var(--line)}}
.strip h4{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.strip .big{font-family:var(--display);font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:6px}
.strip .big s{text-decoration:none;font-size:13px;font-weight:500;color:var(--ink-3);font-family:var(--body);letter-spacing:0}
.delta{font-family:var(--mono);font-size:11px;margin-top:6px;display:inline-block}
.up{color:var(--brand)}.down{color:var(--rose)}.flat{color:var(--ink-3)}

/* ---------------- solver ---------------- */
.solver{padding:18px 20px;display:grid;gap:14px;border-color:var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),var(--surface) 62%)}
.solver .sh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.solver h3{font-size:17px}
.goalset{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.goalset input{width:74px;padding:6px 9px;border:1.5px solid var(--brand-line);background:var(--surface);border-radius:8px;font:700 15px var(--body);text-align:center;font-variant-numeric:tabular-nums}
.goalset input:focus{outline:none;border-color:var(--brand)}
.gpabar{position:relative;height:30px;border-radius:8px;background:var(--surface-3)}
.gpabar i{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:8px;transition:width .45s cubic-bezier(.3,1,.4,1)}
.gpabar u{position:absolute;top:0;bottom:0;text-decoration:none;background:repeating-linear-gradient(45deg,transparent,transparent 4px,color-mix(in srgb,var(--brand) 30%,transparent) 4px,color-mix(in srgb,var(--brand) 30%,transparent) 8px);transition:all .45s}
.gpabar b{position:absolute;top:-5px;bottom:-5px;width:2.5px;background:var(--ink);border-radius:2px;transition:left .45s}
.gpabar b::after{content:attr(data-l);position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--ink-2);white-space:nowrap}
.gpalegend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.gpalegend span{display:flex;align-items:center;gap:6px}
.gpalegend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.wins{display:grid;gap:8px}
.win{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.win.settled{opacity:.6}
.win .rank{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:700 11px var(--mono)}
.win p{font-size:13.5px;line-height:1.45}
.win .gain{font-family:var(--mono);font-size:13px;color:var(--brand);white-space:nowrap;font-weight:500}
.verdict{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;font-size:13.5px;line-height:1.45}
.v-ok{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line)}
.v-warn{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line)}
.v-bad{background:var(--rose-soft);color:var(--rose);border:1px solid var(--rose-line)}
.v-empty{background:var(--surface-2);color:var(--ink-3);border:1px dashed var(--line-2)}
.verdict button{margin-left:auto;font-size:12.5px;font-weight:700;text-decoration:underline;color:inherit;white-space:nowrap}

/* ---------------- courses ---------------- */
.courses{display:grid;gap:11px}
.course{padding:16px 18px;display:grid;gap:12px}
.course-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.swatch{width:5px;align-self:stretch;min-height:38px;border-radius:3px;flex:none}
.course-top .nm{font-weight:700;font-size:15px;flex:1;min-width:150px}
.course-top .nm small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:2px}
.course-top .nm small b{font-family:var(--mono);font-weight:500;color:var(--ink-2)}
.grades{display:flex;align-items:center;gap:13px}
.gfield{text-align:right}
.gfield label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.gfield .val{font:700 20px var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.gfield input{width:62px;text-align:right;padding:5px 8px;border:1px dashed var(--line-2);background:var(--surface);border-radius:7px;font:500 16px var(--body);font-variant-numeric:tabular-nums}
.gfield input:focus{outline:none;border-color:var(--brand);border-style:solid;background:var(--brand-soft)}
.gp{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px}
.track{position:relative;height:8px;border-radius:6px;background:var(--surface-3)}
.track i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transition:width .4s}
.track b{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink);border-radius:2px;transition:left .4s}
.track b::after{content:attr(data-l);position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:var(--ink-3);white-space:nowrap}
.breakdown{display:grid;gap:5px}
.brow{display:grid;grid-template-columns:1fr 54px 78px;gap:10px;align-items:center;font-size:13px;padding:5px 0;border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow .bn{color:var(--ink-2)}
.brow .bw{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}
.brow input{width:100%;text-align:right;padding:4px 8px;border:1px solid var(--line);background:var(--surface-2);border-radius:6px;font:500 13px var(--body);font-variant-numeric:tabular-nums}
.brow input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.brow.pending .bn{color:var(--ink-3)}
.course-foot{display:flex;gap:14px;font-size:12px;color:var(--ink-3);flex-wrap:wrap;align-items:center}
.course-foot .link{text-decoration:underline;cursor:pointer}

/* ---------------- schedule ---------------- */
.daytabs{display:flex;gap:5px;margin-bottom:11px;overflow-x:auto;padding-bottom:2px}
.daytabs button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 13px;text-align:center;min-width:64px;line-height:1.25}
.daytabs button b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--ink-3);font-weight:500}
.daytabs button s{text-decoration:none;display:block;font-size:16px;font-weight:700;font-family:var(--display)}
.daytabs button i{display:block;font-style:normal;font-size:9px;font-family:var(--mono);color:var(--ink-3);margin-top:2px}
.daytabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.daytabs button[aria-pressed="true"] b,.daytabs button[aria-pressed="true"] i{color:var(--lime)}
.classrow{display:grid;grid-template-columns:66px 5px 1fr auto;gap:13px;align-items:center;padding:13px 16px;border-top:1px solid var(--line)}
.classrow:first-child{border-top:0}
.classrow time{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);line-height:1.35}
.classrow time small{display:block;font-size:10px;color:var(--ink-3)}
.classrow .cs{align-self:stretch;border-radius:3px;min-height:32px}
.classrow .n{font-weight:500;font-size:14.5px}
.classrow .m{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---------------- planner ---------------- */
.tasks{display:grid;gap:7px}
.task{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;padding:12px 15px;background:var(--surface);border:1px solid var(--line);border-radius:11px}
.task input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.task .ttl{font-size:14.5px;font-weight:500}
.task .sub{font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center;margin-top:2px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;padding:2px 7px;border-radius:5px;background:var(--surface-2)}
.when{font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap}
.when b{display:block;font-size:13px;font-weight:500}
.w-now{color:var(--rose)}.w-soon{color:var(--amber)}.w-far{color:var(--ink-3)}
.task.done{opacity:.42}
.task.done .ttl{text-decoration:line-through}
.addbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 15px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface-2)}
.addbar input,.addbar select{padding:8px 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);font-size:13.5px}
.addbar input:focus,.addbar select:focus{outline:none;border-color:var(--brand)}
.addbar .grow{flex:1;min-width:150px}

/* ---------------- rail widgets ---------------- */
.rail{display:grid;gap:16px;position:sticky;top:74px}
.rail section{padding:17px 18px}
.rail h4{font-size:13px;margin-bottom:13px;display:flex;align-items:center;gap:8px}
.rail h4 span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.timer{text-align:center;padding:6px 0 2px}
.tdisplay{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tsub{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.tctl{display:flex;gap:8px;margin-top:13px}.tctl .btn{flex:1}
.tpick{width:100%;margin-top:11px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);font-size:13px}
.chart{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:92px;position:relative}
.chart::before{content:"";position:absolute;left:0;right:0;bottom:var(--goal-y,55%);border-top:1px dashed var(--line-2)}
.bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bar i{display:block;background:var(--brand);border-radius:4px 4px 2px 2px;min-height:3px;transition:height .4s}
.bar.today i{background:var(--lime)}
.bar.empty i{background:var(--surface-3)}
.chart-x{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:7px}
.chart-x span{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);text-align:center;line-height:1.4}
.chart-x span.t{color:var(--ink);font-weight:500}
.chart-legend{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.chart-legend b{color:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:500}
.goals{display:grid}
.goal{display:grid;grid-template-columns:17px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.goal:first-child{border-top:0}
.goal input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.goal.checked span{color:var(--ink-3);text-decoration:line-through}
.streak{font-family:var(--mono);font-size:11px;color:var(--amber);white-space:nowrap}
.streak.cold{color:var(--ink-3)}

/* ---------------- groups ---------------- */
.grouprow{display:grid;grid-template-columns:4px 1fr auto;gap:13px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.grouprow:first-child{border-top:0}
.gtype{width:4px;align-self:stretch;border-radius:3px;min-height:34px}
.grouprow .n{font-weight:500;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grouprow .m{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.grouprow .m em{font-style:normal;color:var(--amber)}
.kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.k-study{background:var(--brand-soft);color:var(--brand)}
.k-project{background:var(--violet-soft);color:var(--violet)}
.faces{display:flex}
.faces i{width:24px;height:24px;border-radius:50%;margin-left:-6px;border:2px solid var(--surface);font-style:normal;display:grid;place-items:center;font:700 9px var(--body);color:#fff}
.faces i:first-child{margin:0}
.gactions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:640px){.gactions{grid-template-columns:1fr}}
.gbtn{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:center;text-align:left;padding:15px 17px;border:1px dashed var(--line-2);border-radius:13px;background:var(--surface)}
.gbtn:hover{border-color:var(--brand);border-style:solid;background:var(--brand-soft)}
.gbtn .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px}
.gbtn .ic.s{background:var(--brand-soft);color:var(--brand)}
.gbtn .ic.a{background:var(--violet-soft);color:var(--violet)}
.gbtn b{font-size:14.5px;display:block}
.gbtn small{font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px;line-height:1.45}

/* ---------------- project workspace ---------------- */
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-3);padding:6px 11px;border:1px solid var(--line);border-radius:8px;margin-bottom:18px}
.backlink:hover{color:var(--ink);background:var(--surface)}
.pj-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pj-head h1{font-size:clamp(21px,2.8vw,29px)}
.pj-head .sub{font-size:13.5px;color:var(--ink-3);margin-top:6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pj-right{margin-left:auto;display:flex;align-items:center;gap:11px}
.pj-tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.pj-tabs button{padding:10px 15px;font-size:14px;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:7px;align-items:center}
.pj-tabs button:hover{color:var(--ink)}
.pj-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand);font-weight:700}
.pj-tabs .ct{font-family:var(--mono);font-size:10px;background:var(--surface-3);color:var(--ink-3);padding:1px 6px;border-radius:20px}
.pbar{padding:15px 18px;margin-bottom:16px}
.pbar .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.pbar h3{font-size:15.5px}
.pbar .due{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--amber)}
.pbar .pl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.parts-list{display:grid;gap:8px}
.pt{background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.pt.unclaimed{border-style:dashed;background:transparent}
.pt-main{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:13px 15px}
.pt .tt{font-size:14.5px;font-weight:500}
.pt .mt{font-size:12px;color:var(--ink-3);display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:3px}
.pt .mt a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.pt .mt a:hover{color:var(--brand);border-color:var(--brand)}
.pt .act{display:flex;gap:7px;align-items:center}
.pt.done .tt{color:var(--ink-3)}
.cbtn{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);padding:2px 7px;border-radius:6px;border:1px solid var(--line)}
.cbtn:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}
.cbtn.has{color:var(--brand);border-color:var(--brand-line)}
.thread{border-top:1px solid var(--line);background:var(--surface-2);padding:13px 15px;display:none}
.pt.open-thread .thread{display:block}
.cm{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:7px 0}
.cm .av{width:24px;height:24px;font-size:9px}
.cm b{font-size:13px;font-weight:700}
.cm time{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:7px}
.cm p{font-size:13.5px;color:var(--ink-2);margin-top:1px;line-height:1.5;white-space:pre-wrap}
.creply{display:flex;gap:8px;margin-top:9px}
.creply input{flex:1;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:8px 11px;font-size:13.5px}
.creply input:focus{outline:none;border-color:var(--brand)}
.chatbox{display:flex;flex-direction:column;height:480px;overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:15px}
.msg{display:grid;grid-template-columns:26px 1fr;gap:11px}
.msg b{font-size:13.5px;font-weight:700}
.msg time{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:7px}
.msg p{font-size:14.5px;color:var(--ink-2);margin-top:1px;white-space:pre-wrap}
.msg.me p{color:var(--ink)}
.msg .toact{margin-top:6px;font-size:12px;color:var(--brand);text-decoration:underline}
.composer{border-top:1px solid var(--line);padding:11px 14px;display:flex;gap:10px;align-items:center;background:var(--surface-2)}
.composer input{flex:1;border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:10px 13px;font-size:14.5px}
.composer input:focus{outline:none;border-color:var(--brand)}
.frow{display:flex;gap:13px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.frow>div{flex:1 1 160px;min-width:0}
.frow .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow:first-child{border-top:0}
.fico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font:500 10px var(--mono);background:var(--surface-2);color:var(--ink-3)}
.frow .fn{font-size:14px;font-weight:500}
.frow .fm{font-size:12px;color:var(--ink-3);margin-top:2px}
.frow .fv{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.drop{margin-top:9px;padding:18px;border:1px dashed var(--line-2);border-radius:12px;text-align:center;color:var(--ink-3);font-size:13.5px;background:var(--surface-2)}
.drop.over{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.mrow{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.mrow:first-child{border-top:0}
.mrow small{display:block;font-size:11.5px;color:var(--ink-3)}
.rsel{padding:5px 8px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);font-size:12.5px}
@media(max-width:520px){.mrow{grid-template-columns:26px 1fr;} .mrow>span:last-child{grid-column:2;justify-content:flex-start!important}}
.mrow .rl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mrow.pend{opacity:.6}
.mrow.pend .rl{color:var(--amber)}
.cbar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:4px;background:var(--brand)}

/* ---------------- modal ---------------- */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 44%,transparent);backdrop-filter:blur(3px);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.scrim.on{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;width:min(560px,100%);max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);animation:pop .2s cubic-bezier(.3,1.2,.5,1)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-h{padding:20px 22px 0;display:flex;align-items:flex-start;gap:12px}
.modal-h h3{font-size:20px}
.modal-h p{font-size:13px;color:var(--ink-3);margin-top:5px}
.modal-h .x{margin-left:auto;color:var(--ink-3);font-size:20px;line-height:1;padding:2px 6px}
.modal-b{padding:18px 22px;display:grid;gap:15px}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;background:var(--surface-2);border-radius:0 0 16px 16px;position:sticky;bottom:0;z-index:1}
.fld label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.fld .h{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-left:5px}
.fld input:not([type]),.fld input[type=text],.fld input[type=email],.fld input[type=password],.fld input[type=number],
.fld select,.fld input[type=time],.fld input[type=date]{width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:9px;background:var(--surface);font-size:15px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--brand)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
@media(max-width:520px){.row2,.row3{grid-template-columns:1fr}}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{padding:6px 12px;border-radius:20px;border:1px solid var(--line-2);font-size:13px;color:var(--ink-2)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500}
.daypick{display:flex;gap:5px}
.daypick button{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);font-size:12.5px;font-weight:500;color:var(--ink-2)}
.daypick button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.wrows{display:grid;gap:6px}
.wrow{display:grid;grid-template-columns:1fr 78px 30px;gap:8px;align-items:center;padding:7px 10px;background:var(--surface-2);border-radius:9px}
.wrow input{background:transparent;border:0;font-size:13.5px;width:100%}
.wrow input:focus{outline:none}
.wrow .pct{display:flex;align-items:center;gap:3px;border:1px solid var(--line-2);border-radius:7px;padding:3px 7px;background:var(--surface)}
.wrow .pct input{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.wrow .pct span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.wtotal{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;padding-top:6px;color:var(--ink-3)}
.wtotal.bad{color:var(--rose)}.wtotal.good{color:var(--brand)}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.presets button{font-size:12px;padding:5px 10px;border-radius:16px;border:1px dashed var(--line-2);color:var(--ink-3)}
.presets button:hover{border-style:solid;border-color:var(--brand);color:var(--brand)}
.parts{display:grid;gap:6px}
.part{display:grid;grid-template-columns:1fr 30px;gap:8px;align-items:center;padding:8px 11px;background:var(--surface-2);border-radius:9px;font-size:13.5px}
.part input{background:transparent;border:0;width:100%}
.part input:focus{outline:none}
.linkrow{display:flex;gap:9px;align-items:center;padding:9px 9px 9px 14px;border:1.5px solid var(--brand-line);background:var(--brand-soft);border-radius:11px}
.linkrow code{flex:1;font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emailbox{border:1.5px solid var(--line-2);border-radius:10px;padding:8px;background:var(--surface);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.emailbox:focus-within{border-color:var(--brand)}
.echip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand);border-radius:18px;padding:3px 6px 3px 11px;font-size:13px}
.echip.bad{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.echip button{color:inherit;font-size:14px;line-height:1;padding:0 3px;opacity:.7}
.emailbox input{flex:1;min-width:170px;border:0;background:transparent;padding:6px;font-size:14.5px}
.emailbox input:focus{outline:none}
.steps{display:flex;gap:6px;padding:0 22px;margin-top:14px}
.steps div{flex:1;height:3px;border-radius:3px;background:var(--surface-3)}
.steps div.on{background:var(--brand)}
.stepnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.wpane{display:none}
.wpane.on{display:grid;gap:15px}
.goalrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.goalrow input[type=range]{flex:1;min-width:170px;accent-color:var(--brand)}
.goalbig{font-family:var(--display);font-size:38px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.checklist{display:grid;gap:9px}
.ci{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:14px;align-items:flex-start}
.ci i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--brand-soft);color:var(--brand);font-weight:700}
.ci small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:1px}

/* ---------------- toast & misc ---------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:500;z-index:99;opacity:0;transition:all .3s cubic-bezier(.3,1,.4,1);pointer-events:none;box-shadow:var(--shadow);max-width:min(90vw,460px);text-align:center}
.toast.up{transform:translate(-50%,0);opacity:1}
.toast.err{background:var(--rose);color:#fff}
.err-inline{color:var(--rose);font-size:13px;margin-top:8px}
.loading{padding:60px 20px;text-align:center;color:var(--ink-3);font-size:14px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------- auth pages ---------------- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.authcard{width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.authcard .logo{justify-content:center;margin-bottom:6px}
.authcard h1{font-size:24px;text-align:center;margin-bottom:6px}
.authcard .sub{text-align:center;color:var(--ink-3);font-size:13.5px;margin-bottom:20px}
.authcard .fld{margin-bottom:14px}
.authcard .btn{width:100%;margin-top:4px}
.authfoot{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:16px}
.pitch{max-width:430px;margin:20px auto 0;font-size:13px;color:var(--ink-3);line-height:1.7;text-align:center}

/* ---------------- notifications ---------------- */
.bell{position:relative;width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;font-size:14px;display:grid;place-items:center}
.bell:hover{background:var(--surface-2)}
.bell .dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--rose);border:2px solid var(--paper)}
.notifpanel{position:absolute;right:22px;top:56px;width:min(370px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);z-index:70;max-height:60vh;overflow-y:auto}
.nph{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.nph button{margin-left:auto;font-size:12.5px;color:var(--brand);text-decoration:underline}
.nrow{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:11px 16px;border-top:1px solid var(--line);font-size:13.5px;align-items:start}
.nrow:first-of-type{border-top:0}
.nrow.unread{background:var(--brand-soft)}
.nrow time{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:2px}

/* ---------------- notes ---------------- */
.notesplit{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:start}
@media(max-width:760px){.notesplit{grid-template-columns:1fr}}
.nitem{padding:11px 14px;border-top:1px solid var(--line);cursor:pointer}
.nitem:first-child{border-top:0}
.nitem:hover{background:var(--surface-2)}
.nitem.on{background:var(--brand-soft)}
.nitem b{font-size:13.5px;font-weight:500;display:block}
.nitem small{font-size:11.5px;color:var(--ink-3)}
.noteedit{padding:16px 18px;display:flex;flex-direction:column;gap:11px;min-height:340px}
.noteedit input.t{border:0;border-bottom:1px solid var(--line);padding:6px 0;font:700 17px var(--display);background:transparent}
.noteedit input.t:focus{outline:none;border-color:var(--brand)}
.noteedit textarea{flex:1;border:1px solid var(--line);border-radius:10px;padding:12px;font:14.5px/1.7 var(--body);background:var(--surface-2);resize:vertical;min-height:220px}
.noteedit textarea:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.notefoot{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.newdocs{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;padding:11px 14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface-2)}

/* ---------------- syllabus preview ---------------- */
.sylfield{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13.5px;margin-bottom:12px}
.sylfield dt{color:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.sylfield dd{margin:0}
.sylcomp{display:grid;grid-template-columns:1fr 54px;gap:10px;font-size:13px;padding:5px 0;border-top:1px solid var(--line)}
.sylcomp:first-child{border-top:0}
.sylcomp span:last-child{font-family:var(--mono);text-align:right;color:var(--ink-3)}

/* ---------------- record / history ---------------- */
.rrow{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.rrow:first-child{border-top:0}
.rrow .rb{height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.rrow .rb i{display:block;height:100%;background:var(--brand);border-radius:4px}
.rrow em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.termcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:11px;background:var(--surface)}
.termcard h4{font-size:15px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.termcard h4 span{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--brand)}
.termrow{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--ink-2)}
.rocourse{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.rocourse:first-child{border-top:0}
.rocourse input{width:16px;height:16px;accent-color:var(--brand)}

/* ---------- the spreadsheet editor ----------
   The editor is a whole application in an iframe, so on a phone it should get
   the screen rather than sit inside a rounded card with 22px of padding on
   every side — that inset costs about four rows of grid. */
.edmodal{width:min(1100px,100%);height:88vh;display:flex;flex-direction:column}
.hide-sm{display:inline}
@media(max-width:720px){
  .hide-sm{display:none}
  #mEditor{padding:0}
  #mEditor .edmodal{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  #mEditor .modal-h{padding:12px 14px 0}
  #mEditor .modal-h h3{font-size:16px}
  #mEditor .modal>div:last-child{padding:0 8px 8px}
  #mEditor #edMount{border-radius:8px}
}