/* SolaimanLipi for every Bangla letter in the admin panel and teacher dashboard.
   unicode-range limits it to the Bengali block, so English text keeps the normal interface font.
   Put the font file in backend/admin/ui/fonts/ (see the README.txt there). Until then Bangla falls back to Noto Sans Bengali. */
@font-face{
  font-family:'SolaimanLipi';
  src:local('SolaimanLipi'),local('Solaiman Lipi'),local('SolaimanLipi Regular'),
      url('fonts/SolaimanLipi.woff2') format('woff2'),
      url('fonts/SolaimanLipi.woff') format('woff'),
      url('fonts/SolaimanLipi.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+0964-0965,U+25CC;
}
:root{
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:rgba(79,70,229,.10);
  --text:#0f172a;--text-2:#475569;--text-3:#94a3b8;
  --glass:rgba(255,255,255,.76);--glass-soft:rgba(255,255,255,.52);--glass-border:rgba(255,255,255,.65);
  --hair:rgba(15,23,42,.08);--shadow:0 8px 30px rgba(30,41,59,.10);--shadow-lg:0 20px 45px rgba(30,41,59,.14);
  --ok:#15803d;--ok-soft:rgba(21,128,61,.11);--warn:#b45309;--warn-soft:rgba(180,83,9,.12);
  --bad:#b91c1c;--bad-soft:rgba(185,28,28,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:calc(var(--bar-h,4rem) + 1.5rem) 1.25rem 3rem;max-width:1220px;margin-inline:auto;min-height:100vh;
  font-family:'SolaimanLipi','Noto Sans Bengali',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 12% 8%,rgba(99,102,241,.16),transparent 42%),
    radial-gradient(circle at 88% 0%,rgba(56,189,248,.14),transparent 40%),
    linear-gradient(160deg,#eef1fb,#e7ecf7 45%,#eef2fb);background-attachment:fixed;
}
.boot{text-align:center;color:var(--text-2);margin-top:30vh}
a{color:var(--accent)}
h2{margin:0 0 .25rem;font-size:1.6rem;letter-spacing:-.02em}
h3{margin:0 0 1rem;font-size:1.05rem}
.muted{color:var(--text-2)}.tiny{font-size:.8rem}.tabular{font-variant-numeric:tabular-nums}

/* top bar — see "Navigation" at the end of this file */

/* layout pieces */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-head p{margin:0;color:var(--text-2);font-size:.9rem}
.card{background:var(--glass);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);padding:1.3rem;margin-bottom:1.1rem}
.grid{display:grid;gap:1.1rem}
.two{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.6rem}
.stat{text-align:center;padding:1.2rem}.stat .num{font-size:2rem;font-weight:800;color:var(--accent)}
.stat .label{font-size:.75rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.tile{display:block;text-align:center;padding:1.4rem 1rem;text-decoration:none;color:var(--text);font-weight:600;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);transition:transform .15s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile i{display:block;font-size:1.6rem;color:var(--accent);margin-bottom:.6rem}

/* forms */
label{display:block;font-size:.78rem;font-weight:700;color:var(--text-2);margin:0 0 .3rem;text-transform:uppercase;letter-spacing:.04em}
input[type=text],input[type=number],input[type=password],input[type=datetime-local],select,textarea{
  width:100%;padding:.65rem .8rem;font:inherit;font-size:.92rem;color:var(--text);background:rgba(255,255,255,.85);
  border:1px solid var(--hair);border-radius:10px;outline:none}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field{margin-bottom:.9rem}
.opt{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.opt input[type=radio]{accent-color:var(--ok);width:18px;height:18px;flex:none}
.opt .letter{font-weight:800;color:var(--text-3);width:1.2rem}
.opt.is-correct input[type=text]{border-color:rgba(21,128,61,.5);background:var(--ok-soft)}
.hint{font-size:.78rem;color:var(--text-2);margin:.2rem 0 .9rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;border-radius:10px;padding:.6rem 1.05rem;
  font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none;background:var(--glass-soft);color:var(--text);border-color:var(--hair)}
.btn:hover{filter:brightness(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-hover)}
.btn.danger{background:var(--bad-soft);color:var(--bad);border-color:rgba(185,28,28,.25)}
.btn.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(21,128,61,.25)}
.btn.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(180,83,9,.25)}
.btn.sm{padding:.32rem .65rem;font-size:.76rem;border-radius:8px}
.btn.block{width:100%;justify-content:center}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* tables */
.table-wrap{overflow-x:auto;border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);padding:.7rem .8rem;border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:.7rem .8rem;border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.4)}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.neutral{background:var(--accent-soft);color:var(--accent)}
.opts-list{margin:0;padding:0;list-style:none;font-size:.82rem;color:var(--text-2);line-height:1.5}
.opts-list li.correct{color:var(--ok);font-weight:700}
.empty{text-align:center;color:var(--text-2);padding:2.2rem 1rem}
.empty i{font-size:2rem;color:var(--accent);display:block;margin-bottom:.6rem}
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.toolbar input{max-width:340px}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.tab{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--hair);background:var(--glass-soft);font-weight:600;font-size:.82rem;cursor:pointer;color:var(--text-2)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem 0;border-bottom:1px solid var(--hair)}
.list li:last-child{border-bottom:none}

/* alerts / toasts / modal */
.alert{padding:.8rem 1rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem}
.alert.bad{background:var(--bad-soft);color:var(--bad)}.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.warn{background:var(--warn-soft);color:var(--warn)}
#toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:200;max-width:min(380px,92vw)}
.toast{padding:.8rem 1rem;border-radius:12px;color:#fff;font-weight:600;font-size:.88rem;box-shadow:var(--shadow-lg);animation:in .2s ease}
.toast.ok{background:#15803d}.toast.bad{background:#b91c1c}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal{background:#fff;border-radius:16px;max-width:680px;width:100%;max-height:88vh;overflow:auto;padding:1.4rem;box-shadow:var(--shadow-lg)}
.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.modal header h3{margin:0}
.x{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-2)}

/* login */
.login{max-width:380px;margin:12vh auto 0;text-align:center}
.login .logo{font-size:2.4rem}
.login form{text-align:left;margin-top:1rem}

/* OMR */
.bar{height:8px;border-radius:999px;background:var(--hair);overflow:hidden;margin-top:.4rem}
.bar .fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .25s ease}
.omr-preview canvas{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border:1px solid var(--hair);border-radius:6px;background:#fff;box-shadow:var(--shadow)}
input[type=color]{cursor:pointer;border-radius:10px}

/* answers review, paper, slides */
.qcard{margin-bottom:1rem}
.qcard .qt{font-weight:700;margin-bottom:.6rem}
.qcard ul{list-style:none;margin:0;padding:0}
.qcard li{padding:.45rem .7rem;border-radius:8px;margin-bottom:.3rem;background:rgba(255,255,255,.6);border:1px solid var(--hair)}
.qcard li.correct{background:var(--ok-soft);border-color:rgba(21,128,61,.35)}
.qcard li.wrong{background:var(--bad-soft);border-color:rgba(185,28,28,.35)}
.qcard li.skipped{background:var(--warn-soft);border-color:rgba(180,83,9,.35)}
.paper{background:#fff;border-radius:6px;padding:2.2rem;max-width:850px;margin:0 auto}
.paper .q{margin-bottom:1.3rem;break-inside:avoid}
.paper .q b{display:block;margin-bottom:.35rem}
.paper ol{list-style:none;margin:0;padding-left:1rem}
.slide-wrap{max-width:900px;margin:0 auto}
.slide{min-height:340px;padding:2rem}
.slide .qt{font-size:1.45rem;font-weight:700;margin-bottom:1.4rem;line-height:1.35}
.slide .num{color:var(--accent);font-weight:800;font-size:.85rem;margin-bottom:.5rem}
.sopt{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;padding:.9rem 1.1rem;margin-bottom:.6rem;font:inherit;font-size:1.05rem;
  background:rgba(255,255,255,.75);border:1.5px solid var(--hair);border-radius:12px;cursor:pointer}
.sopt:hover{border-color:var(--accent)}
.sopt b{color:var(--text-3)}
.sopt.correct{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.sopt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.rank-1 td{background:rgba(250,204,21,.16)}
@media print{
  body{background:#fff;padding:0}.topbar,#toasts,.noprint{display:none!important}
  .paper{box-shadow:none;padding:0}.card{box-shadow:none;border:none;background:none;backdrop-filter:none}
}

/* face attendance */
.face-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:760px){.face-grid{grid-template-columns:1fr}}
.face-video{width:100%;border-radius:12px;background:#000;aspect-ratio:4/3;object-fit:cover}
.face-status{margin:.7rem 0 0;color:var(--text-2);font-size:.88rem}
.face-card{display:flex;gap:1rem;align-items:flex-start}
.face-card img{width:130px;height:130px;object-fit:cover;border-radius:12px}
.face-card h3{margin:.1rem 0 .4rem}.face-card p{margin:.25rem 0;font-size:.9rem}
.face-thumb{width:48px;height:48px;border-radius:50%;object-fit:cover}

/* Question Bank */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.split2>*{min-width:0}
@media(max-width:520px){.split2{grid-template-columns:1fr}}
.toolbar select{width:auto;min-width:140px;flex:1 1 140px;max-width:220px}

/* Question Bank: sets browser */
.stabs{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.stab{border:1px solid var(--border,#dbe0ee);background:#fff;border-radius:999px;padding:.32rem .8rem;font:inherit;font-size:.8rem;font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;gap:.45rem;align-items:center}
.stab:hover{border-color:var(--accent);color:var(--accent)}
.stab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.stab .n{font-size:.7rem;background:rgba(100,116,139,.15);border-radius:999px;padding:0 .45rem;min-width:1.2rem;text-align:center}
.stab.on .n{background:rgba(255,255,255,.25)}
.stabs .sep{width:1px;height:1.4rem;background:rgba(100,116,139,.3);margin:0 .2rem}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.setcard{display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:.65rem .8rem;border-radius:12px;border:1px solid var(--border,#dbe0ee);background:#fff;font:inherit;cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s}
.setcard:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(79,70,229,.12)}
.setcard.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.setcard .t{font-weight:700;font-size:.9rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.setcard .m{font-size:.74rem;color:var(--text-2);display:flex;align-items:center;gap:.35rem}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#cbd5e1;flex:none}
.dot.pub{background:#16a34a}
.sbar{display:flex;gap:.7rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 .8rem}
.sbar-t{min-width:200px;flex:1}
.screate{gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .8rem;padding:.7rem;border:1px dashed var(--accent);border-radius:12px;background:var(--accent-soft)}

.crumbs{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;margin-bottom:.7rem}
.crumb{border:0;background:none;font:inherit;font-size:.82rem;font-weight:600;color:var(--accent);cursor:pointer;padding:.15rem .35rem;border-radius:6px}
.crumb:hover{background:var(--accent-soft)}
.crumb.on{color:var(--text);cursor:default}
.sepc{color:var(--text-2);font-size:.8rem}


/* ===== Question paper designer ===== */
.pd-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:1rem;align-items:start}
.pd-panel{position:sticky;top:calc(var(--bar-h,64px) + .5rem);max-height:calc(100vh - var(--bar-h,64px) - 1rem);overflow:auto;padding-right:2px}
.pd-sec{background:rgba(255,255,255,.78);border:1px solid var(--hair);border-radius:12px;margin-bottom:.6rem}
.pd-sec summary{cursor:pointer;font-weight:700;padding:.7rem .9rem;list-style:none}
.pd-sec summary::-webkit-details-marker{display:none}
.pd-sec summary::after{content:'+';float:right;color:var(--text-3)}
.pd-sec[open] summary::after{content:'\2013'}
.pd-sec-body{padding:0 .9rem .5rem}
.pd-sec-body .field{margin-bottom:.7rem}
.pd-sec-body textarea{width:100%;font:inherit;padding:.5rem .6rem;border:1.5px solid var(--hair);border-radius:10px;background:rgba(255,255,255,.85)}
.pd-chk{display:flex;align-items:center;gap:.5rem;margin:.4rem 0;text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer}
.pd-chk input{width:auto}
.pd-chk.sub{margin-left:1.5rem;font-weight:400}
.pd-bar{display:flex;gap:.8rem;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.pd-preview{background:#cbd5e1;border-radius:12px;padding:1.2rem;overflow:auto;max-height:calc(100vh - 160px)}
.pd-logo-prev{max-height:48px;max-width:120px;border:1px solid var(--hair);border-radius:6px;background:#fff;padding:2px}
@media(max-width:980px){.pd-layout{grid-template-columns:1fr}.pd-panel{position:static;max-height:none}.pd-preview{max-height:none}}

/* the paper itself: used for the on-screen preview AND for printing */
.pd-sheet{position:relative;box-sizing:border-box;width:var(--pd-w);min-height:var(--pd-h);padding:var(--pd-m);margin:0 auto;background:#fff;color:#111;
  font-size:var(--pd-fs);line-height:var(--pd-lh);box-shadow:0 8px 30px rgba(15,23,42,.28);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}
.pd-sheet>*:not(.pd-wm):not(.pd-foot){position:relative}
.pd-head{display:flex;gap:4mm;align-items:center;margin-bottom:2.5mm;padding-bottom:2.5mm}
.pd-head.a-center{justify-content:center;text-align:center}
.pd-head.a-left{text-align:left}
.pd-head.lg-center{flex-direction:column}
.pd-head.lg-right .pd-logo{order:2}
.pd-ht{flex:0 1 auto;min-width:0}
.pd-logo{max-height:20mm;max-width:38mm;object-fit:contain}
.pd-inst{font-size:1.35em;font-weight:800;line-height:1.25}
.pd-title{font-size:1.12em;font-weight:700}
.pd-sub{font-size:.95em;color:#333}
.pd-head.h-underline{border-bottom:2px solid var(--pd-accent)}
.pd-head.h-boxed{border:1.5px solid var(--pd-accent);padding:3mm;border-radius:1.5mm}
.pd-head.h-band{background:var(--pd-accent);color:#fff;padding:3mm;border-radius:1.5mm}
.pd-head.h-band .pd-sub{color:rgba(255,255,255,.88)}
.pd-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1mm 6mm;margin:0 0 3mm;font-size:.95em}
.pd-sb{display:flex;flex-wrap:wrap;gap:3mm 6mm;margin:0 0 3.5mm}
.pd-sbw{display:flex;align-items:flex-end;gap:1.5mm;flex:1 1 40mm}
.pd-sbw em{font-style:normal;white-space:nowrap}
.pd-sbw i{flex:1;border-bottom:1px solid #444;min-width:15mm;height:1.1em}
.pd-ins{border:1px solid #999;border-left:3px solid var(--pd-accent);padding:2mm 3mm;margin:0 0 3.5mm;font-size:.92em;white-space:pre-line}
.pd-ins b{display:block;margin-bottom:.5mm}
.pd-qs{column-count:var(--pd-cols);column-gap:10mm;column-rule:1px solid #d4d4d8}
.pd-q{break-inside:avoid;page-break-inside:avoid;margin:0 0 3.5mm}
.pd-qt{display:flex;gap:1.5mm;font-weight:600}
.pd-n{flex:none;min-width:5mm}
.pd-qx{flex:1;white-space:pre-line;overflow-wrap:anywhere}
.pd-m{flex:none;font-weight:600;color:#444}
.pd-opts{margin:1mm 0 0 6.5mm}
.pd-opts.o-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6mm 5mm}
.pd-opts.o-row{display:flex;flex-wrap:wrap;gap:.6mm 7mm}
.pd-o{display:flex;gap:1.5mm;overflow-wrap:anywhere}
.pd-ol{flex:none}
.pd-o.is-ans{font-weight:700;background:rgba(0,0,0,.08);border-radius:1mm;padding:0 1mm}
.pd-empty{color:#777;text-align:center;padding:10mm 0}
.pd-key{break-before:page;page-break-before:always;margin-top:6mm}
.pd-key h3{margin:0 0 3mm;font-size:1.1em;border-bottom:1.5px solid var(--pd-accent);padding-bottom:1.5mm}
.pd-keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24mm,1fr));gap:1.5mm 4mm}
.pd-wm{position:absolute;inset:0;display:grid;place-items:center;font-size:60pt;font-weight:800;color:rgba(0,0,0,.07);transform:rotate(-30deg);text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:0}
.pd-foot{position:absolute;left:0;right:0;bottom:4mm;text-align:center;font-size:8.5pt;color:#555}

@media print{
  .page-head,.pd-panel,.pd-bar{display:none!important}
  .pd-layout{display:block}
  .pd-preview{background:none;padding:0;max-height:none;overflow:visible;border-radius:0}
  .pd-sheet{width:auto!important;min-height:0!important;padding:0!important;margin:0!important;box-shadow:none!important;overflow:visible!important;zoom:1!important}
  .pd-wm{position:fixed}
  .pd-foot{position:fixed;left:0;right:0;bottom:calc(var(--pd-m) * -1 + 4mm)}
}

/* AI basic explanation under a question (Exam Questions + Question Bank) */
.expl-box{margin-top:.55rem;padding:.5rem .65rem;border-radius:10px;background:var(--bg-soft,rgba(99,102,241,.08));border:1px dashed rgba(99,102,241,.35);font-weight:400}

/* =====================================================================
   Live Chat inbox (admin only) - see chat-admin.js
   ===================================================================== */
.lc{
  --lc-spring:cubic-bezier(.2,.9,.3,1.15);--lc-ease:cubic-bezier(.22,.8,.3,1);
  display:grid;grid-template-columns:minmax(290px,350px) 1fr;height:calc(100vh - var(--bar-h,4rem) - 4rem);min-height:520px;
  background:var(--glass);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;
  animation:lc-rise .5s var(--lc-ease) both;
}
@keyframes lc-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.lc [hidden]{display:none!important}
.lc button{font-family:inherit}

/* ---- left: conversation list ---- */
.lc-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--hair);background:rgba(255,255,255,.35)}
.lc-side-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1rem .5rem}
.lc-side-head h3{margin:0;font-size:1.15rem;flex:1}
.lc-conn{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--text-2)}
.lc-live{width:9px;height:9px;border-radius:50%;background:var(--text-3);transition:background .3s}
.lc-live.on{background:#22c55e;animation:lc-pulse 2s infinite}
@keyframes lc-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.lc-icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--hair);background:var(--glass-soft);color:var(--text-2);cursor:pointer;
  display:grid;place-items:center;transition:transform .2s var(--lc-spring),background .2s,color .2s}
.lc-icon-btn:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.lc-icon-btn:active{transform:scale(.92)}
.lc-search{margin:.35rem 1rem .6rem;padding:.6rem .85rem;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.7);font:inherit;font-size:.9rem;outline:none;
  transition:border-color .2s,box-shadow .2s}
.lc-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lc-filters{display:flex;gap:.4rem;padding:0 1rem .7rem;flex-wrap:wrap}
.lc-chip{border:1px solid var(--hair);background:var(--glass-soft);color:var(--text-2);padding:.3rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,transform .2s var(--lc-spring),border-color .2s}
.lc-chip:hover{border-color:var(--accent);color:var(--accent)}
.lc-chip:active{transform:scale(.94)}
.lc-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lc-list{flex:1;overflow-y:auto;padding:0 .5rem .6rem;scrollbar-width:thin}
.lc-none{padding:2rem 1rem;text-align:center;font-size:.9rem}
.lc-item{display:flex;gap:.7rem;width:100%;text-align:left;border:0;background:transparent;padding:.7rem .65rem;border-radius:14px;cursor:pointer;color:inherit;
  transition:background .2s,transform .25s var(--lc-ease)}
.lc-item:hover{background:rgba(255,255,255,.75);transform:translateX(2px)}
.lc-item.active{background:var(--accent-soft)}
.lc-item.lc-new{animation:lc-slide .45s var(--lc-ease) both}
@keyframes lc-slide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.lc-avatar{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  background:linear-gradient(135deg,hsl(var(--h,235) 70% 55%),hsl(calc(var(--h,235) + 40) 75% 62%));box-shadow:0 4px 12px rgba(30,41,59,.18)}
.lc-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--text-3);border:2px solid #fff;transition:background .3s}
.lc-dot.on{background:#22c55e}
.lc-item-body{flex:1;min-width:0}
.lc-item-top,.lc-item-bot{display:flex;align-items:center;gap:.5rem}
.lc-item-top b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.lc-time{font-size:.72rem;color:var(--text-3);flex:none}
.lc-prev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;color:var(--text-2)}
.lc-item.unread .lc-prev{color:var(--text);font-weight:600}
.lc-item.unread .lc-time{color:var(--accent);font-weight:700}
.lc-tag{font-size:.66rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--ok-soft);color:var(--ok);flex:none}
.lc-count{flex:none;min-width:20px;height:20px;padding:0 .4rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;
  animation:lc-pop .4s var(--lc-spring)}

/* ---- right: thread ---- */
.lc-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.lc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:2rem}
.lc-empty-ic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:var(--accent);background:var(--accent-soft);margin-bottom:.4rem;
  animation:lc-float 3.4s ease-in-out infinite}
@keyframes lc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lc-thread{flex:1;display:flex;flex-direction:column;min-height:0;animation:lc-fade .3s ease both}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
.lc-thead{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.5)}
.lc-back{display:none}
.lc-who{flex:1;min-width:0;display:flex;flex-direction:column}
.lc-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-sub{font-size:.78rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-pill{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:var(--hair);color:var(--text-2);transition:background .3s,color .3s}
.lc-pill.on{background:var(--ok-soft);color:var(--ok)}
.lc-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--hair);background:var(--glass-soft);color:var(--text);padding:.45rem .8rem;border-radius:10px;
  font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s var(--lc-spring)}
.lc-btn:hover{background:var(--accent-soft);color:var(--accent)}
.lc-btn:active{transform:scale(.95)}
.lc-btn.danger{color:var(--bad)}.lc-btn.danger:hover{background:var(--bad-soft);color:var(--bad)}
.lc-call{display:inline-flex;align-items:center;gap:.4rem}.lc-call[hidden]{display:none}
.lc-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.lc-btn.primary:hover{filter:brightness(1.08);background:var(--accent);color:#fff}
.lc-handled[hidden]{display:none}.lc-tag.me{background:var(--accent-soft);color:var(--accent)}
/* "a student needs support" pop-ups (only admins who are not already in a chat or on a call get them) */
.lc-alerts{position:fixed;left:1rem;bottom:1rem;z-index:150;display:flex;flex-direction:column;gap:.6rem;width:min(92vw,330px)}
.lc-alert{background:#0f172a;color:#fff;border-radius:14px;padding:.85rem 1rem;box-shadow:0 12px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:.45rem;animation:in .22s ease}
.lc-alert b{font-size:.95rem}.lc-alert span{font-size:.82rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lc-alert-row{display:flex;gap:.5rem;margin-top:.15rem}.lc-alert-row button{flex:1;border:0;border-radius:999px;padding:.55rem .8rem;font:600 .85rem inherit;font-family:inherit;cursor:pointer;color:#fff}
.lc-alert-yes{background:#16a34a}.lc-alert-no{background:rgba(255,255,255,.16)}
.lc-btn:disabled{opacity:.45;cursor:not-allowed}.lc-btn:disabled:hover{background:var(--glass-soft);color:var(--text)}

.lc-msgs{flex:1;overflow-y:auto;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;
  background:radial-gradient(circle at 85% 10%,rgba(99,102,241,.07),transparent 45%),radial-gradient(circle at 10% 90%,rgba(56,189,248,.07),transparent 45%)}
.lc-day{align-self:center;margin:.8rem 0 .5rem;padding:.2rem .75rem;border-radius:999px;background:rgba(255,255,255,.8);font-size:.72rem;font-weight:600;color:var(--text-2);box-shadow:0 1px 4px rgba(30,41,59,.08)}
.lc-row{display:flex;animation:lc-in .38s var(--lc-spring) both}
.lc-row.gap{margin-top:.55rem}
.lc-row.me{justify-content:flex-end;transform-origin:100% 100%}
.lc-row.them{justify-content:flex-start;transform-origin:0 100%}
@keyframes lc-in{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.lc-msgs.noanim .lc-row{animation:none}
.lc-bubble{max-width:min(76%,540px);padding:.55rem .8rem .35rem;border-radius:18px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(30,41,59,.08)}
.lc-row.them .lc-bubble{background:#fff;border-bottom-left-radius:6px}
.lc-row.me .lc-bubble{background:linear-gradient(135deg,var(--accent),#6366f1 55%,#0ea5e9);color:#fff;border-bottom-right-radius:6px}
.lc-meta{display:flex;justify-content:flex-end;align-items:center;gap:.3rem;font-size:.68rem;opacity:.7;margin-top:.15rem}
.lc-tick{display:inline-flex;font-size:.65rem;transition:color .3s,opacity .3s}
.lc-row.seen .lc-tick{color:#7dd3fc;opacity:1}
.lc-row.sending .lc-bubble{opacity:.65}
.lc-row.failed .lc-bubble{background:var(--bad);animation:lc-shake .4s}
@keyframes lc-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

.lc-typing{display:flex;align-items:center;gap:.5rem;padding:0 1.3rem;font-size:.78rem;color:var(--text-2);height:0;overflow:hidden;opacity:0;
  transition:height .25s var(--lc-ease),opacity .25s}
.lc-typing.on{height:26px;opacity:1}
.lc-dots{display:inline-flex;gap:3px}
.lc-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:lc-bounce 1.2s infinite ease-in-out}
.lc-dots i:nth-child(2){animation-delay:.15s}.lc-dots i:nth-child(3){animation-delay:.3s}
@keyframes lc-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.lc-quick{display:flex;gap:.4rem;padding:.4rem 1rem 0;overflow-x:auto;scrollbar-width:none}
.lc-quick::-webkit-scrollbar{display:none}
.lc-quick .lc-chip{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.lc-compose{display:flex;align-items:flex-end;gap:.6rem;padding:.7rem 1rem 1rem}
.lc-input{flex:1;resize:none;max-height:130px;padding:.7rem .95rem;border-radius:16px;border:1px solid var(--hair);background:rgba(255,255,255,.85);font:inherit;font-size:.93rem;line-height:1.4;outline:none;
  transition:border-color .2s,box-shadow .2s}
.lc-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lc-input:disabled{opacity:.6}
.lc-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),#0ea5e9);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(79,70,229,.35);transition:transform .25s var(--lc-spring),opacity .2s,box-shadow .2s}
.lc-send:hover:not(:disabled){transform:scale(1.08) rotate(-8deg)}
.lc-send:active:not(:disabled){transform:scale(.9)}
.lc-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* nav badge + shared pop */
.lc-nav-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 .35rem;margin-left:.4rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.7rem;font-weight:700;
  vertical-align:middle;animation:lc-pop .4s cubic-bezier(.2,.9,.3,1.15)}
.lc-nav-badge.pop{animation:lc-pop .4s cubic-bezier(.2,.9,.3,1.15)}
@keyframes lc-pop{0%{transform:scale(.4)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

/* phones: one pane at a time */
@media(max-width:760px){
  .lc{grid-template-columns:1fr;height:calc(100vh - 7rem);border-radius:14px}
  .lc .lc-main{display:none}
  .lc.show-thread .lc-side{display:none}
  .lc.show-thread .lc-main{display:flex}
  .lc-back{display:grid}
  .lc-thead{flex-wrap:wrap}
  .lc-pill{display:none}
  .lc-bubble{max-width:86%}
}
@media(prefers-reduced-motion:reduce){
  .lc *,.lc-nav-badge{animation:none!important;transition:none!important}
}

/* AI support in the Live Chat inbox */
.lc-tag.human{background:var(--bad-soft,#fee2e2);color:var(--bad,#b91c1c)}
.lc-handoff{margin:0;padding:.55rem .9rem;background:#fff7ed;border-bottom:1px solid #fed7aa;color:#9a3412;font-size:.85rem;line-height:1.4}
.lc-handoff[hidden]{display:none}
.lc-aitag{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:.15rem}
.lc-row.ai .lc-bubble{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.lc-action{align-self:center;max-width:92%;margin:.35rem 0;padding:.3rem .75rem;border-radius:12px;background:#eef2ff;color:#3730a3;font-size:.78rem;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.lc-action.bad{background:#fef2f2;color:#991b1b}
.lc-action.esc{background:#fff7ed;color:#9a3412}
.lc-action-tag{font-weight:700}
.lc-action-time{margin-left:.5rem;opacity:.6}

/* Topic Bank: compact, collapsible subject tree (stays tidy with many subjects/topics) */
.tb-search{width:100%;margin:.6rem 0}
.tb-tree{max-height:70vh;overflow:auto;border:1px solid var(--hair);border-radius:12px;background:#fff}
.tb-sub{border-bottom:1px solid var(--hair)}
.tb-sub:last-child{border-bottom:none}
.tb-sub-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .7rem;cursor:pointer;font-size:.9rem}
.tb-sub-h:hover{background:#f6f7ff}
.tb-sub.open>.tb-sub-h{background:#f3f4ff}
.tb-chev{display:inline-block;transition:transform .2s ease;margin-right:.2rem}
.tb-sub.open .tb-chev{transform:rotate(90deg)}
.tb-body{padding:.2rem .7rem .7rem 1.4rem}
.tb-topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;max-height:260px;overflow:auto}
.tb-topics li{display:flex;align-items:center;gap:.3rem}
.tb-topics .btn.sm{padding:.2rem .5rem;font-size:.8rem}

/* ---- AI Training ---- */
.ait-two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:600px){.ait-two{grid-template-columns:1fr}}
.ait-check{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.ait-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.9rem}
.ait-item{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .85rem;border:1px solid var(--hair);border-radius:12px;background:var(--glass-soft)}
.ait-item.off{opacity:.6}
.ait-sw{padding-top:.15rem}.ait-sw input{width:auto}
.ait-main{flex:1;min-width:0}
.ait-badges{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin-bottom:.3rem}
.ait-q{font-weight:700;white-space:pre-wrap;overflow-wrap:anywhere}
.ait-a{color:var(--text-2);font-size:.88rem;margin-top:.15rem;white-space:pre-wrap;overflow-wrap:anywhere}
.ait-meter{margin:.2rem 0 .4rem}
.ait-bar{height:8px;border-radius:99px;background:var(--hair);overflow:hidden;margin-top:.3rem}
.ait-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}.ait-bar i.hot{background:var(--warn)}
.ait-chat{height:260px;overflow:auto;display:flex;flex-direction:column;gap:.5rem;padding:.7rem;border:1px solid var(--hair);border-radius:12px;background:var(--glass-soft)}
.ait-msg{max-width:85%;padding:.5rem .75rem;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem}
.ait-msg.me{align-self:flex-end;background:var(--accent);color:#fff}
.ait-msg.ai{align-self:flex-start;background:#fff;border:1px solid var(--hair)}
.ait-msg.err{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.ait-out{margin-top:.8rem;padding:.8rem 1rem;border-radius:12px;background:var(--accent-soft);white-space:pre-wrap}
.ait-built summary{cursor:pointer;font-weight:700}
.ait-built pre{white-space:pre-wrap;font-family:inherit;font-size:.82rem;color:var(--text-2);max-height:420px;overflow:auto;margin:.6rem 0 0}

.lc-teach{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;padding:0;margin-right:.4rem;opacity:.9}
.lc-teach:hover{opacity:1}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash{display:block}
.hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.7rem 1.9rem;margin-bottom:1.25rem;border-radius:20px;color:#fff;
  background:radial-gradient(circle at 92% 12%,rgba(56,189,248,.55),transparent 45%),radial-gradient(circle at 8% 110%,rgba(168,85,247,.5),transparent 50%),linear-gradient(135deg,#4338ca,#4f46e5 55%,#6366f1);
  box-shadow:0 18px 40px rgba(79,70,229,.28)}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:34px solid rgba(255,255,255,.07);pointer-events:none}
.hero h2{color:#fff;font-size:1.75rem;margin:.25rem 0 .35rem}
.hero p{margin:0;color:rgba(255,255,255,.86);font-size:.92rem;max-width:560px;line-height:1.5}
.hero-date{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hero-actions{display:flex;gap:.6rem;flex-wrap:wrap;position:relative;z-index:1}
.hero-btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.hero-btn:hover{background:rgba(255,255,255,.26);filter:none}
.hero-btn.primary{background:#fff;color:var(--accent);border-color:#fff}
.hero-btn.primary:hover{background:#eef2ff}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.25rem}
.kpis.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.kpis.n6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.kpis.n6{grid-template-columns:1fr}}
.kpi{--c:79,70,229;display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.1rem;text-decoration:none;color:var(--text);position:relative;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.kpi{container-type:inline-size}
@container (max-width:250px){.kpi .spark{display:none}}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.kpi.indigo{--c:79,70,229}.kpi.violet{--c:139,92,246}.kpi.sky{--c:14,165,233}.kpi.amber{--c:217,119,6}.kpi.green{--c:22,163,74}.kpi.rose{--c:225,29,72}
.kpi-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.15rem;color:rgb(var(--c));background:rgba(var(--c),.12)}
.kpi-body{min-width:0;flex:1}
.kpi-num{font-size:1.65rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.kpi-label{font-size:.72rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}
.kpi .spark{flex:none;width:80px;height:30px;color:rgb(var(--c));opacity:.9}

.attention{border-left:4px solid #f59e0b;padding:1.1rem 1.3rem}
.attention.clear{border-left-color:#16a34a}
.attention.clear .card-title h3{color:var(--ok)}
.attn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.6rem}
.attn{display:flex;align-items:center;gap:.65rem;padding:.65rem .8rem;border-radius:12px;text-decoration:none;color:var(--text);background:rgba(255,255,255,.7);border:1px solid var(--hair);font-size:.88rem;font-weight:600;transition:background .15s}
.attn:hover{background:#fff}
.attn-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--warn-soft);color:var(--warn);flex:none}
.attn-t{flex:1}
.attn > i{color:var(--text-3);font-size:.75rem}

.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-bottom:.4rem}
.dash-grid .card{margin-bottom:0;min-width:0}
.dash-grid .span-2{grid-column:span 2}
@media(max-width:1000px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dash-grid{grid-template-columns:1fr}.dash-grid .span-2{grid-column:auto}.hero{padding:1.3rem}}
.card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.card-title h3{margin:0;font-size:1rem}
.card-title h3 i{margin-right:.2rem}
.link-sm{font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}
.link-sm:hover{text-decoration:underline}
.section-h{margin:1.6rem 0 .9rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}

/* charts */
.chart-svg{display:block;width:100%;height:auto;overflow:visible}
.ch-grid{stroke:var(--hair);stroke-width:1;stroke-dasharray:3 4}
.ch-axis{fill:var(--text-3);font-size:11px;font-weight:600}
.ch-val{fill:var(--text-2);font-size:12px;font-weight:700}
.ch-hit .ch-cross,.ch-hit .ch-dot{opacity:0;transition:opacity .12s}
.ch-hit:hover .ch-cross,.ch-hit:hover .ch-dot{opacity:1}
.ch-cross{stroke:var(--text-3);stroke-width:1;stroke-dasharray:3 3}
.ch-dot{fill:#fff;stroke-width:2.5}
.ch-bar rect{transition:opacity .15s}.ch-bar:hover rect{opacity:.8}
.chart-sum b{color:var(--text)}
.segs{display:inline-flex;padding:3px;border-radius:10px;background:rgba(15,23,42,.06);gap:2px}
.seg{border:0;background:transparent;padding:.3rem .75rem;border-radius:8px;font:inherit;font-size:.76rem;font-weight:700;color:var(--text-2);cursor:pointer}
.seg.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px rgba(15,23,42,.12)}
.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:170px;color:var(--text-3);text-align:center}
.chart-empty i{font-size:1.9rem;color:rgba(79,70,229,.35)}.chart-empty p{margin:0;font-size:.85rem;color:var(--text-2)}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.donut-svg{width:min(190px,100%);height:auto}
.donut-track{stroke:rgba(15,23,42,.07)}
.donut-num{font-size:25px;font-weight:800;fill:var(--text)}
.donut-sub{font-size:10px;font-weight:700;fill:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.legend{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:.4rem}
.legend li{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--text-2)}
.legend li span{flex:1}.legend li b{color:var(--text)}
.legend .dot{width:10px;height:10px;border-radius:50%;flex:none}

/* ranking list */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.rank-top{display:flex;align-items:center;gap:.55rem;font-size:.86rem}
.rank-n{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:800}
.rank-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600;text-decoration:none}
.rank-t:hover{color:var(--accent)}
.rank-c{min-width:1.6rem;text-align:right}
.rank .bar{margin-top:.4rem;height:6px}
.fill.bad{background:var(--bad)}

/* recent results table */
.dash-table td,.dash-table th{padding:.65rem .7rem}
.who{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font-weight:600}
.who:hover span:last-child{color:var(--accent)}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#6366f1,#0ea5e9)}

/* plan meters (teacher) */
.meter{margin:.7rem 0}
.meter-top{display:flex;justify-content:space-between;font-size:.85rem}
.meter .bar{height:8px}

/* quick-access tiles: compact, in-line icon */
.dash .tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.dash .tile{display:flex;align-items:center;gap:.7rem;text-align:left;padding:.85rem 1rem;font-size:.88rem;border-radius:14px}
.dash .tile i{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0;border-radius:10px;font-size:1rem;background:var(--accent-soft)}

/* Admins page + signed-in admin label */
.perm-grid{display:grid;gap:.35rem;max-height:46vh;overflow:auto;padding-right:.25rem}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.4rem .6rem;border:1px solid rgba(0,0,0,.08);border-radius:.6rem}
.perm-row select{width:auto;min-width:8.5rem}

/* ---------- Navigation ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--hair);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 24px rgba(30,41,59,.06)}
.topbar .inner{max-width:1480px;margin:0 auto;height:4rem;padding:0 1.25rem;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.65rem;color:#fff;font-size:.95rem;
  background:linear-gradient(135deg,#6366f1,#4338ca);box-shadow:0 4px 12px rgba(79,70,229,.35)}
.nav-wrap{flex:1;min-width:0}
.nav{display:flex;align-items:center;gap:.1rem;flex-wrap:nowrap}
.nav>a,.nav-btn,.brand,.user{flex-shrink:0;white-space:nowrap}
.nav>a,.nav-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border:0;border-radius:.65rem;background:none;cursor:pointer;
  color:var(--text-2);font-weight:600;font-size:.88rem;line-height:1;font-family:inherit;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.nav>a i,.nav-btn>i:first-child{font-size:.85rem;opacity:.8}
.nav-btn>i:last-child{font-size:.62rem;opacity:.6;transition:transform .15s}
.nav>a:hover,.nav-btn:hover,.nav-group.open>.nav-btn{background:rgba(15,23,42,.05);color:var(--text)}
.nav>a.active,.nav-group.has-active>.nav-btn{background:var(--accent-soft);color:var(--accent)}
.nav-group.open>.nav-btn>i:last-child{transform:rotate(180deg)}
.nav-group{position:relative}
.nav-group.has-badge>.nav-btn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px #fff}
.nav-menu{display:none;position:absolute;top:calc(100% + .35rem);left:0;min-width:13.5rem;padding:.4rem;background:#fff;border:1px solid var(--hair);
  border-radius:.9rem;box-shadow:var(--shadow-lg);z-index:60}
.nav-group.open>.nav-menu,.user.open>.nav-menu{display:block;animation:nav-pop .14s ease-out}
@media(hover:hover) and (min-width:1230px){.nav-group:hover>.nav-menu{display:block}.nav-group:hover>.nav-btn{background:rgba(15,23,42,.05);color:var(--text)}
  .nav-group::after{content:"";position:absolute;left:0;right:0;top:100%;height:.45rem}}
@keyframes nav-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-menu a,.menu-item{display:flex;align-items:center;gap:.65rem;width:100%;padding:.55rem .7rem;border:0;border-radius:.55rem;background:none;cursor:pointer;
  color:var(--text);font-weight:600;font-size:.88rem;line-height:1.2;font-family:inherit;text-decoration:none;text-align:left}
.nav-menu a i,.menu-item i{width:1.1rem;text-align:center;color:var(--text-3);font-size:.85rem}
.nav-menu a:hover,.menu-item:hover{background:rgba(15,23,42,.05)}
.nav-menu a:hover i{color:var(--accent)}
.nav-menu a.active{background:var(--accent-soft);color:var(--accent)}.nav-menu a.active i{color:var(--accent)}
.nav-menu .lc-nav-badge{margin-left:auto}
.user{position:relative;margin-left:auto}
.user-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.3rem .65rem .3rem .3rem;border:1px solid var(--hair);border-radius:999px;background:#fff;cursor:pointer;
  color:var(--text);font-weight:600;font-size:.85rem;line-height:1;font-family:inherit;transition:box-shadow .15s}
.user-btn:hover,.user.open>.user-btn{box-shadow:0 2px 10px rgba(30,41,59,.12)}
.user-btn>i{font-size:.62rem;opacity:.55}
.avatar{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff;font-weight:800;font-size:.85rem}
.user-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu{left:auto;right:0;min-width:14.5rem}
.user-head{padding:.55rem .7rem .65rem;border-bottom:1px solid var(--hair);margin-bottom:.35rem}
.menu-item.danger{color:var(--bad)}.menu-item.danger i{color:var(--bad)}.menu-item.danger:hover{background:var(--bad-soft)}
.burger{display:none;width:2.4rem;height:2.4rem;border:1px solid var(--hair);border-radius:.7rem;background:#fff;cursor:pointer;color:var(--text);font-size:1rem}

/* medium desktops: drop the small menu icons and tighten spacing so every item fits beside the user chip */
@media(min-width:1230px) and (max-width:1439px){.nav>a i,.nav-btn>i:first-child{display:none}.nav>a,.nav-btn{padding:.5rem .5rem}.brand span:last-child{font-size:.95rem}}

@media(max-width:1229px){
  .topbar .inner{gap:.75rem}
  .user{margin-left:auto}.user-name{display:none}.user-btn{padding:.3rem .5rem .3rem .3rem}
  .burger{display:grid;place-items:center}
  .nav-wrap{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 4rem);overflow:auto;padding:.6rem 1rem 1rem;
    background:#fff;border-bottom:1px solid var(--hair);box-shadow:0 18px 30px rgba(30,41,59,.14)}
  .topbar.menu-open .nav-wrap{display:block}
  .nav{flex-direction:column;align-items:stretch;gap:.1rem}
  .nav>a{padding:.7rem .8rem}
  .nav-group{border-top:1px solid var(--hair);margin-top:.35rem;padding-top:.35rem}
  .nav-btn{pointer-events:none;padding:.4rem .8rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
  .nav-btn>i:last-child{display:none}
  .nav-group .nav-menu{display:block;position:static;min-width:0;padding:0;border:0;box-shadow:none;background:none}
  .nav-menu a{padding:.65rem .8rem}
  .user-menu{position:absolute}
}

/* account options sit at the bottom of the last drop-down (System / Account); open it towards the left so it stays on screen */
.nav-group.acct>.nav-menu{left:auto;right:0}
.burger{margin-left:auto}
.acct-head{display:flex;align-items:center;gap:.65rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:.35rem 0}
.nav-menu .menu-item{font-family:inherit;font-size:.9rem;text-align:left}

/* ---- Video courses (course-ui.js) ---- */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.cs-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.cs-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:linear-gradient(135deg,#4f46e5,#0ea5e9) center/cover no-repeat;color:#fff;font-size:2.4rem;text-decoration:none}
.cs-thumb .badge{position:absolute;top:.6rem;left:.6rem}
.cs-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.cs-title{font-weight:800;font-size:1rem;color:var(--text);text-decoration:none;line-height:1.35}
.cs-acts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.cs-two{grid-template-columns:1fr}}
.cs-check{display:flex;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:600;color:var(--text);cursor:pointer}
.cs-check input{width:18px;height:18px;accent-color:var(--accent)}
.cs-prev{margin:-.3rem 0 .9rem}.cs-prev img{width:240px;max-width:100%;border-radius:10px;display:block}
.cs-section{margin-top:1.1rem}
.cs-shead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.cs-lesson{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--hair)}
.cs-lesson img{width:92px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none;background:#e2e8f0}
.cs-lmain{flex:1;min-width:0}
.cs-slide{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.5rem .7rem;margin-bottom:.45rem;border:1px solid var(--hair);border-radius:10px}
.cs-slide b{word-break:break-all}
@media(max-width:700px){.cs-lesson{flex-wrap:wrap}.cs-lesson img{width:70px}}

/* ---- School & college admission (admission-ui.js) ---- */
.adm-thumb{font-size:2.6rem}
.adm-edit{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:1.1rem;align-items:start}
@media (max-width:980px){.adm-edit{grid-template-columns:1fr}}
.adm-fields{display:flex;flex-direction:column;gap:.7rem}
.adm-field{border:1px solid var(--hair);border-radius:12px;padding:.7rem .8rem;background:var(--glass-soft)}
.adm-field .field{margin:.5rem 0 0}.adm-field>input,.adm-field>.hint{margin-top:.5rem}
.adm-fhead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.adm-num{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.8rem}
.adm-fmain{flex:1 1 220px;min-width:180px}.adm-ftype{flex:0 1 210px;min-width:150px}
.adm-fmain input,.adm-ftype select{width:100%}
.adm-preset select{max-width:260px}
.adm-dirty{box-shadow:0 0 0 3px rgba(245,158,11,.35)}
.adm-prev .field{margin-bottom:.9rem}.adm-prev input,.adm-prev select,.adm-prev textarea{width:100%}
.adm-opts{display:flex;flex-direction:column;gap:.3rem}
.adm-filebox{border:1.5px dashed var(--hair);border-radius:10px;padding:.8rem;text-align:center;color:var(--text-2)}
.adm-answers{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.adm-ans{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:.8rem;padding:.55rem .8rem;border-top:1px solid var(--hair)}
.adm-ans:first-child{border-top:0}
.adm-q{font-weight:700;font-size:.83rem;color:var(--text-2)}.adm-a{font-size:.9rem;word-break:break-word;white-space:pre-wrap}
.adm-img{display:block;max-width:180px;max-height:200px;border-radius:8px;border:1px solid var(--hair);margin-bottom:.35rem}
@media (max-width:560px){.adm-ans{grid-template-columns:1fr;gap:.15rem}}
.adm-head-row{background:var(--accent-soft);border-color:var(--accent)}
.adm-head-row .adm-num{background:var(--accent);color:#fff}
.adm-head-row .adm-fmain input{font-weight:700}
/* ---- School management (school-ui.js) ---- */
.sch-sheet{background:#fff;color:#111;border:1px solid var(--hair);border-radius:10px;padding:1.2rem;margin-bottom:1rem}
.sch-sheet table{width:100%;border-collapse:collapse;margin:.7rem 0}.sch-sheet th,.sch-sheet td{border:1px solid #888;padding:.35rem .55rem;font-size:.85rem;text-align:left}
.sch-sheet th{background:#eee}.sch-sheet .r{text-align:right}.sch-sheet .c{text-align:center}
.sch-sheet .meta{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;margin:.6rem 0}
.sch-sheet .sig{display:flex;justify-content:space-between;margin-top:2.4rem;font-size:.78rem}.sch-sheet .sig div{border-top:1px solid #444;padding-top:.2rem;min-width:120px;text-align:center}
.sch-att{min-width:2.2rem}.sch-att[aria-pressed=true].present{background:#16a34a;color:#fff;border-color:#16a34a}.sch-att[aria-pressed=true].absent{background:#dc2626;color:#fff;border-color:#dc2626}
.sch-att[aria-pressed=true].late{background:#d97706;color:#fff;border-color:#d97706}.sch-att[aria-pressed=true].leave{background:#2563eb;color:#fff;border-color:#2563eb}

/* ---------- Live Chat: files + voice messages ---------- */
.lc [hidden]{display:none!important}
.lc-tool{flex:none;width:38px;height:44px;border:0;background:none;color:#64748b;cursor:pointer;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;transition:color .2s,background .2s,transform .2s}
.lc-tool:hover{color:var(--accent);background:var(--accent-soft)}
.lc-tool:active{transform:scale(.9)}
.lc-compose:not(.has-text)>.lc-send:not(.lc-mic){display:none}
.lc-compose.has-text>.lc-mic{display:none}
.lc-mic:hover:not(:disabled){transform:scale(1.08) rotate(0)}
.lc-rec{display:none;flex:1;align-items:center;gap:.7rem;min-height:44px}
.lc-compose.recording>:not(.lc-rec){display:none!important}
.lc-compose.recording>.lc-rec{display:flex}
.lc-rec .lc-send{display:grid}
.lc-rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:lc-rec-pulse 1.1s ease-in-out infinite}
.lc-rec-time{font-variant-numeric:tabular-nums;font-weight:600;min-width:2.6rem}
.lc-rec-bars{flex:1;display:flex;align-items:center;gap:4px;height:24px}
.lc-rec-bars i{width:4px;height:6px;border-radius:2px;background:#c7d2fe;animation:lc-rec-bar 1s ease-in-out infinite}
.lc-rec-bars i:nth-child(2){animation-delay:.15s}.lc-rec-bars i:nth-child(3){animation-delay:.3s}.lc-rec-bars i:nth-child(4){animation-delay:.45s}.lc-rec-bars i:nth-child(5){animation-delay:.6s}
.lc-rec-cancel{color:#ef4444}.lc-rec-cancel:hover{color:#dc2626;background:rgba(239,68,68,.1)}
@keyframes lc-rec-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes lc-rec-bar{0%,100%{height:6px}50%{height:22px}}

.lc-bubble:has(.lc-att){white-space:normal}
.lc-att{position:relative;min-width:170px;max-width:100%}
.lc-cap{margin-top:.4rem;white-space:pre-wrap}
.lc-att-imgwrap{display:block;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;min-width:150px;min-height:90px;max-width:260px;background:rgba(100,116,139,.16)}
.lc-att-imgwrap img{display:block;width:100%;max-height:280px;object-fit:cover;opacity:0;transition:opacity .3s}
.lc-att-imgwrap.ok img{opacity:1}
.lc-att-imgwrap.tap,.lc-att-imgwrap.bad{display:grid;place-items:center;height:110px;cursor:pointer;color:inherit;font:inherit;font-size:.82rem}
.lc-att-imgwrap.bad::after{content:'⚠';font-size:1.2rem}
.lc-file{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .6rem;border:0;border-radius:12px;background:rgba(100,116,139,.13);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.lc-row.me .lc-file{background:rgba(255,255,255,.18)}
.lc-file:hover{background:rgba(100,116,139,.22)}.lc-row.me .lc-file:hover{background:rgba(255,255,255,.28)}
.lc-file-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.lc-row.me .lc-file-ic{background:rgba(255,255,255,.22);color:#fff}
.lc-file-t{min-width:0;display:flex;flex-direction:column}
.lc-file-t b{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.lc-file-t small{font-size:.7rem;opacity:.7}
.lc-att-voice{display:flex;align-items:center;gap:.6rem;min-width:220px}
.lc-vbtn{flex:none;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#0ea5e9);color:#fff;font-size:.8rem;transition:transform .2s}
.lc-vbtn:active{transform:scale(.9)}
.lc-row.me .lc-vbtn{background:#fff;color:var(--accent)}
.lc-vtrack{flex:1;height:5px;border-radius:3px;background:rgba(100,116,139,.28);overflow:hidden}
.lc-vtrack i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .25s linear}
.lc-row.me .lc-vtrack{background:rgba(255,255,255,.3)}.lc-row.me .lc-vtrack i{background:#fff}
.lc-vtime{font-size:.75rem;font-variant-numeric:tabular-nums;opacity:.8;min-width:2rem;text-align:right}
.lc-prog{display:none;height:3px;margin-top:.4rem;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.lc-prog.on{display:block}
.lc-prog i{display:block;height:100%;width:0;background:#fff;transition:width .15s linear}

/* ============================================================
   DASHBOARD v2 - "answer sheet" look (overrides the earlier dashboard rules)
   ============================================================ */
.dash{--ink:#12153a;--ink-2:#1d2264;--mark:#ffd23f;--paper:#fff;--card-b:rgba(15,23,42,.09);
  --card-sh:0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(30,41,59,.06)}

/* hero */
.dash .hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;padding:2rem 2.2rem;margin-bottom:1.3rem;border-radius:22px;color:#fff;
  background:
    radial-gradient(520px 260px at 88% 0%,rgba(99,102,241,.55),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px),
    linear-gradient(135deg,var(--ink),var(--ink-2));
  box-shadow:0 22px 50px rgba(18,21,58,.35)}
.dash .hero::after{display:none}
.dash .hero-main{min-width:0}
.dash .hero-date{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.72)}
.dash .hero h2{margin:.55rem 0 .5rem;font-size:2.15rem;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#fff}
.dash .hero p{max-width:34rem;margin:0 0 1.35rem;font-size:.97rem;line-height:1.6;color:rgba(255,255,255,.8)}
.dash .hero-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.dash .hero-btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:none}
.dash .hero-btn:hover{background:rgba(255,255,255,.2);filter:none}
.dash .hero-btn.primary{background:var(--mark);border-color:var(--mark);color:var(--ink)}
.dash .hero-btn.primary:hover{background:#ffe082;border-color:#ffe082}
.dash .hero-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* the answer sheet: left timing marks like a real OMR form, answers fill in once on load */
.hero-sheet{position:relative;flex:none;width:236px;padding:.9rem 1rem .85rem 1.55rem;border-radius:12px;background:var(--paper);color:var(--ink);transform:rotate(2.2deg);
  box-shadow:0 24px 44px rgba(0,0,0,.38),0 2px 0 rgba(255,255,255,.6) inset}
.hero-sheet::before{content:"";position:absolute;left:.6rem;top:1.9rem;bottom:3.3rem;width:6px;
  background:repeating-linear-gradient(180deg,var(--ink) 0 5px,transparent 5px 10px);border-radius:1px;opacity:.85}
.sheet-cols,.sheet-row{display:grid;grid-template-columns:1.1rem repeat(4,1fr);align-items:center;justify-items:center;gap:.3rem}
.sheet-cols{margin-bottom:.35rem;font-size:.7rem;font-weight:700;color:#7b82a8}
.sheet-row{margin:.3rem 0}
.sheet-q{font-size:.72rem;font-weight:700;color:#7b82a8;justify-self:start}
.bub{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px solid #aab0cf}
.bub::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--ink);transform:scale(0)}
.bub.on{border-color:var(--ink)}
.bub.on::after{animation:bub-fill .4s cubic-bezier(.3,1.5,.5,1) var(--d,0ms) forwards}
@keyframes bub-fill{to{transform:scale(1)}}
.sheet-foot{display:flex;align-items:baseline;gap:.5rem;margin-top:.7rem;padding-top:.6rem;border-top:1.5px dashed #c9cde2}
.sheet-foot b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.sheet-foot span{font-size:.78rem;font-weight:600;color:#5b6288}
@media(prefers-reduced-motion:reduce){.bub.on::after{animation:none;transform:scale(1)}}

/* KPI cards */
.dash .kpis{gap:.9rem;margin-bottom:1.3rem}
.dash .kpi{container-type:normal;display:flex;flex-direction:column;align-items:stretch;gap:.35rem;padding:1.05rem 1.15rem 1rem;border-radius:14px;
  background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--card-b);box-shadow:var(--card-sh);
  transition:transform .15s,border-color .15s,box-shadow .15s}
.dash .kpi:hover{transform:translateY(-2px);border-color:rgba(var(--c),.55);box-shadow:0 14px 30px rgba(var(--c),.16)}
.dash .kpi:focus-visible{outline:3px solid rgba(var(--c),.45);outline-offset:2px}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.dash .kpi-label{margin:0;font-size:.86rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
.dash .kpi-ic{width:34px;height:34px;border-radius:10px;font-size:.95rem}
.dash .kpi-num{font-size:2.15rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--text)}
.dash .kpi .spark{display:block;width:100%;height:30px;margin-top:.25rem;opacity:1}
.kpi-rule{display:none}
@media(min-width:1000px){.dash .kpis.n6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.dash .kpi-num{font-size:clamp(1.7rem,2.4vw,2.15rem)}

/* cards */
.dash .card{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--card-b);border-radius:14px;box-shadow:var(--card-sh);padding:1.25rem 1.3rem}
.dash .card-title h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.dash .attention{background:#fffbeb;border-color:#fde68a;border-left-width:1px}
.dash .attention.clear{background:#f0fdf4;border-color:#bbf7d0}
.dash .attn{background:#fff;border-color:rgba(180,83,9,.18)}
.dash .section-h{margin:1.8rem 0 .85rem;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text)}
.dash .tile{background:var(--paper);backdrop-filter:none;border:1px solid var(--card-b);border-radius:12px;box-shadow:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.dash .tile:hover{transform:translateY(-2px);border-color:rgba(79,70,229,.5);box-shadow:0 10px 22px rgba(79,70,229,.12)}
.dash .tile:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.dash .rank-n{background:var(--ink);color:#fff;border-radius:50%}
.dash .segs{background:rgba(15,23,42,.06)}

@media(max-width:820px){
  .dash .hero{grid-template-columns:1fr;padding:1.5rem 1.4rem}
  .hero-sheet{display:none}
  .dash .hero h2{font-size:1.75rem}
}
@media(max-width:460px){
  .dash .kpis,.dash .kpis.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash .kpi{padding:.85rem .9rem}.dash .kpi-ic{display:none}
  .dash .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* MathJax output: keep long formulas inside their box (scroll sideways instead of breaking the layout) */
mjx-container { max-width: 100%; }
mjx-container[display="true"] { display: block; overflow-x: auto; overflow-y: hidden; margin: .6em 0 !important; }
mjx-container svg { vertical-align: middle; }

/* ---- Math equation editor (math-editor.js) ---- */
:root { --keyboard-zindex: 100000; }
#mathEdBtn { position: fixed; left: 16px; bottom: 16px; z-index: 99985; border: 0; border-radius: 999px; padding: .6rem 1rem; font: 700 .95rem/1 inherit; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, #0f3d3a, #4f46e5); box-shadow: 0 6px 18px rgba(30, 30, 80, .3); }
#mathEdBtn span { font-weight: 600; }
#mathEd { display: none; position: fixed; inset: 0; z-index: 99990; align-items: center; justify-content: center; background: rgba(15, 23, 42, .55); padding: 12px; }
.mathed-card { background: #fff; color: #111827; width: min(580px, 100%); max-height: 94vh; overflow: auto; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.mathed-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid #eef1f5; }
.mathed-head button { border: 0; background: #f1f5f9; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; }
.mathed-body { padding: 1rem; display: grid; gap: .7rem; }
.mathed-mf { display: block; width: 100%; font-size: 1.6rem; padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: 10px; min-height: 64px; box-sizing: border-box; }
.mathed-ta { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px; padding: .6rem; font: 1rem/1.4 monospace; }
.mathed-load, .mathed-tip, .mathed-lbl, .mathed-msg { font-size: .82rem; color: #64748b; }
.mathed-lbl { font-weight: 600; }
.mathed-chk { font-size: .88rem; display: flex; gap: .4rem; align-items: center; }
.mathed-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.mathed-pal[hidden], #mathEdPrevWrap[hidden] { display: none; }
.mathed-pal button { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 8px; padding: .35rem .6rem; cursor: pointer; font-size: .95rem; }
.mathed-prev { min-height: 48px; padding: .6rem; border: 1px dashed #cbd5e1; border-radius: 10px; font-size: 1.2rem; overflow-x: auto; }
.mathed-out { display: block; padding: .55rem .7rem; background: #f1f5f9; border-radius: 10px; font-size: .9rem; word-break: break-all; }
.mathed-act { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mathed-act button { border: 1px solid #cbd5e1; background: #fff; border-radius: 10px; padding: .55rem .9rem; cursor: pointer; font-weight: 600; }
.mathed-act .mathed-pri { background: #4f46e5; border-color: #4f46e5; color: #fff; }


/* ---------- Main admin acting on behalf of a school (teacher dashboard only) ---------- */
.actas-bar{position:fixed;inset:0 0 auto 0;z-index:60;height:2.6rem;display:flex;align-items:center;gap:.7rem;padding:0 1.25rem;
  background:linear-gradient(90deg,#b45309,#d97706);color:#fff;font-size:.86rem;box-shadow:0 2px 10px rgba(120,53,15,.35)}
.actas-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actas-bar .btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff;white-space:nowrap}
.actas-bar .btn:hover{background:rgba(255,255,255,.3)}
body.actas .topbar{top:2.6rem}
body.actas #content{margin-top:2.6rem}
@media (max-width:640px){.actas-bar span{white-space:normal;font-size:.76rem;line-height:1.2}.actas-bar{height:3.4rem}body.actas .topbar{top:3.4rem}body.actas #content{margin-top:3.4rem}}