:root{
  --bg-0:#eef1f8; --bg-1:#f7f8fc;
  --glass:rgba(255,255,255,0.72); --glass-brd:rgba(20,28,56,0.10);
  --ink:#1a2030; --ink-2:#54607a; --ink-3:#8893ab;
  --accent:#4f46e5; --accent-soft:rgba(79,70,229,0.12);
  --teal:#0d9488; --teal-soft:rgba(13,148,136,0.12);
  --ok:#16a34a; --ok-soft:rgba(22,163,74,0.14);
  --warn:#d97706; --warn-soft:rgba(217,119,6,0.14);
  --danger:#dc2626; --danger-soft:rgba(220,38,38,0.14);
  --track:rgba(20,28,56,0.08);
  --radius:16px; --shadow:0 1px 2px rgba(20,28,56,.06), 0 8px 24px rgba(20,28,56,.07);
  --sheen:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  --side:212px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg-0:#0c1019; --bg-1:#0c1019;
    --glass:rgba(28,34,52,0.62); --glass-brd:rgba(255,255,255,0.08);
    --ink:#e8ecf6; --ink-2:#a6b1ca; --ink-3:#6f7a96;
    --accent:#818cf8; --accent-soft:rgba(129,140,248,0.16);
    --teal:#2dd4bf; --teal-soft:rgba(45,212,191,0.14);
    --ok:#34d399; --ok-soft:rgba(52,211,153,0.16);
    --warn:#fbbf24; --warn-soft:rgba(251,191,36,0.16);
    --danger:#f87171; --danger-soft:rgba(248,113,113,0.16);
    --track:rgba(255,255,255,0.09);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --sheen:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -8%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, var(--teal-soft), transparent 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;
}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}

/* ── sidebar ── */
.side{position:sticky;top:0;height:100vh;padding:18px 12px;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
.brand .mk{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
  background:linear-gradient(140deg,var(--accent),var(--teal));box-shadow:var(--shadow)}
.brand b{font-size:14px;font-weight:650;letter-spacing:-.2px;line-height:1.1}
.brand .sub{font-size:10.5px;color:var(--ink-3)}
.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;cursor:pointer;color:var(--ink-2);
  font-size:13.5px;font-weight:550;text-decoration:none;border:1px solid transparent}
.nav .ic{width:18px;text-align:center;font-size:15px}
.nav .ct{margin-left:auto;font-size:10.5px;color:var(--ink-3);background:var(--track);padding:0 7px;border-radius:999px}
.nav:hover{background:var(--track);color:var(--ink)}
.nav.on{background:var(--accent-soft);color:var(--accent);border-color:var(--glass-brd)}
.nav.on .ic{color:var(--accent)}
.side-foot{margin-top:auto;font-size:10.5px;color:var(--ink-3);padding:10px 8px 2px;line-height:1.5}
.side-foot .stamp{color:var(--ink-2);font-weight:600}

/* ── main ── */
.main{padding:24px 26px 56px;max-width:1080px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.head h1{font-size:21px;margin:0;font-weight:650;letter-spacing:-.3px}
.head .as{font-size:12px;color:var(--ink-2)}
.head .as b{color:var(--ink)}
.band{display:flex;align-items:center;gap:10px;margin:22px 2px 12px;font-size:11px;font-weight:650;
  letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3)}
.band::after{content:"";flex:1;height:1px;background:var(--glass-brd)}

/* glass cards + viz */
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden;
  opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.card::before{content:"";position:absolute;inset:0;background:var(--sheen);pointer-events:none}
.card.in{opacity:1;transform:none}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hero{display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .n{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .n .v{font-size:22px;font-weight:700;line-height:1}
.ring .n .l{font-size:9px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.stat .v{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1}
.stat .l{font-size:11.5px;color:var(--ink-2);margin-top:3px}
.kpi{background:rgba(127,127,127,.05);border-radius:12px;padding:11px 13px}
.kpi .v{font-size:21px;font-weight:700}
.kpi .l{font-size:11px;color:var(--ink-2);margin-top:2px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.brief{background:var(--accent-soft);border:1px solid var(--glass-brd);border-radius:12px;padding:11px 13px;margin-bottom:14px}
.brief h3{margin:0 0 7px;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.5px;color:var(--accent)}
.brief ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.brief li{font-size:12.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start}
.brief li .d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:none}
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{display:flex;gap:9px;align-items:flex-start;border-radius:11px;padding:10px 12px;font-size:12.5px;border:1px solid var(--glass-brd)}
.alert.warn{background:var(--warn-soft)} .alert.danger{background:var(--danger-soft)} .alert.ok{background:var(--ok-soft)}
.sc{display:flex;flex-direction:column;gap:8px}
.sc .top{display:flex;align-items:center;gap:8px}
.sc h2{font-size:13px;margin:0;font-weight:650}
.sc .pill{margin-left:auto;font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:999px}
.p-ok{background:var(--ok-soft);color:var(--ok)} .p-warn{background:var(--warn-soft);color:var(--warn)}
.p-acc{background:var(--accent-soft);color:var(--accent)} .p-mut{background:var(--track);color:var(--ink-2)}
.sc .nums{display:flex;gap:16px;flex-wrap:wrap}
.sc .nums .v{font-size:17px;font-weight:700} .sc .nums .l{font-size:10.5px;color:var(--ink-2)}

/* kanban */
.board{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px}
.col{background:rgba(127,127,127,.04);border:1px solid var(--glass-brd);border-radius:13px;padding:10px;min-height:80px}
.col .ch{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:650;color:var(--ink-2);margin-bottom:9px;padding:0 2px}
.col .ch .c{font-size:10.5px;background:var(--track);color:var(--ink-2);padding:0 7px;border-radius:999px}
.tk{background:var(--glass);border:1px solid var(--glass-brd);border-left:3px solid var(--ink-3);border-radius:9px;
  padding:8px 10px;margin-bottom:8px;font-size:12px;line-height:1.35;box-shadow:0 1px 2px rgba(20,28,56,.05)}
.tk .pty{font-size:10px;color:var(--ink-3);margin-top:3px}
.tk.owner{border-left-color:var(--warn)} .tk.teacher{border-left-color:var(--teal)}
.tk.wd2{border-left-color:var(--accent)} .tk.qgen{border-left-color:#0d9488} .tk.mad{border-left-color:#a855f7}
.muted{color:var(--ink-2)} .small{font-size:12px}
.note{font-size:12px;color:var(--ink-2);background:var(--track);border-radius:11px;padding:11px 13px}
.note b{color:var(--ink)}

@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:6px}
  .side-foot{display:none}.brand{width:100%}
  .hero{grid-template-columns:1fr 1fr}
  .board{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.card{opacity:1;transform:none;transition:none}}