/* EduInteract Cerebra visual system. Void / Royal / Cyan / Gold.  Author: Adeoti, Olatunde Micheal */
:root{
  --void:#050B24; --void2:#0A1235; --panel:#0E1944; --panel2:#142057; --line:#25347A;
  --royal:#1A55E3; --royal2:#3B73F5; --cyan:#22D3FF; --gold:#FFC531; --gold2:#FFD974;
  --ink:#EAF0FF; --mut:#A9B7E6; --ok:#34D399; --warn:#FFC531; --bad:#FF6B81; --paper:#F4F7FF; --pink:#0B1330;
  --r:14px; --font:'Figtree','Segoe UI',system-ui,-apple-system,Roboto,sans-serif; --head:'Sora','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ink);font:16px/1.55 var(--font);min-height:100vh;
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(34,211,255,.16),transparent 60%),radial-gradient(800px 500px at -10% 10%,rgba(26,85,227,.35),transparent 60%);background-attachment:fixed}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4vw,3rem)} h2{font-size:clamp(1.3rem,2.4vw,1.8rem)} h3{font-size:1.1rem}
a{color:var(--cyan)} a:hover{color:var(--gold2)}
p{margin:0 0 1em} small,.mut{color:var(--mut)}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:12px}
.grow{flex:1 1 0;min-width:0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.card{background:linear-gradient(180deg,rgba(20,32,87,.85),rgba(10,18,53,.9));border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.card.glow{box-shadow:0 0 0 1px rgba(34,211,255,.25),0 0 40px rgba(34,211,255,.12)}
.paper{background:var(--paper);color:var(--pink);border-radius:var(--r);padding:22px;border:1px solid #cfd9f5}
.paper h2,.paper h3{color:#071044}.paper small,.paper .mut{color:#4a587f}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);background:rgba(5,11,36,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;text-decoration:none;color:var(--ink)}
.brand svg{width:34px;height:34px;flex:none}
.brand small{display:block;font-weight:500;font-size:.72rem;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.btn{appearance:none;border:1px solid transparent;border-radius:10px;padding:10px 18px;min-height:44px;font:600 .95rem var(--font);cursor:pointer;background:var(--royal);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:transform .08s,box-shadow .2s,background .2s}
.btn:hover{background:var(--royal2);box-shadow:0 0 22px rgba(59,115,245,.55);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn.gold{background:var(--gold);color:#1B1400}.btn.gold:hover{background:var(--gold2);box-shadow:0 0 22px rgba(255,197,49,.5);color:#1B1400}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn.ghost:hover{background:rgba(255,255,255,.06);box-shadow:none}
.btn.bad{background:#C42B47;color:#fff}.btn.bad:hover{background:#E0405C}
.btn.sm{min-height:36px;padding:6px 12px;font-size:.85rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:4px;color:var(--ink)}
input,select,textarea{width:100%;background:#071044;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;min-height:44px;font:inherit}
textarea{min-height:110px;resize:vertical}
.paper input,.paper select,.paper textarea{background:#fff;color:#0B1330;border-color:#aab8e6}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--royal);flex:none}
.field{margin-bottom:12px}
.hint{font-size:.82rem;color:var(--mut);margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:700;border:1px solid var(--line);background:rgba(255,255,255,.05);white-space:nowrap}
.chip.ok{color:#6EF0C0;border-color:#1f7a5c;background:rgba(52,211,153,.1)}
.chip.warn{color:var(--gold);border-color:#8a6a10;background:rgba(255,197,49,.1)}
.chip.bad{color:#FF9AAA;border-color:#8c2a3d;background:rgba(255,107,129,.12)}
.chip.info{color:var(--cyan);border-color:#1b6a85;background:rgba(34,211,255,.1)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mut);display:inline-block}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}.dot.warn{background:var(--gold);box-shadow:0 0 8px var(--gold)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(37,52,122,.7);vertical-align:middle}
th{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);position:sticky;top:0;background:#0A1235}
tr.click{cursor:pointer}tr.click:hover td{background:rgba(34,211,255,.06)}
.scroll{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab{background:none;border:0;color:var(--mut);padding:11px 16px;min-height:44px;font:700 .92rem var(--font);cursor:pointer;border-bottom:3px solid transparent}
.tab[aria-selected=true]{color:var(--gold);border-color:var(--gold)}
.tab:hover{color:var(--ink)}
.stat{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.stat b{display:block;font:700 1.7rem var(--head);color:var(--cyan)}.stat span{font-size:.78rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
/* timer */
.timer{font:700 clamp(2.4rem,9vw,6rem)/1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff;text-shadow:0 0 28px rgba(34,211,255,.55)}
.timer.low{color:var(--gold);text-shadow:0 0 28px rgba(255,197,49,.6)}
.timer.crit{color:#FF8FA0;text-shadow:0 0 30px rgba(255,107,129,.7);animation:pulse 1s infinite}
.timer.paused{opacity:.6}
@keyframes pulse{50%{opacity:.55}}
.timer-sm{font:700 1.35rem var(--head);font-variant-numeric:tabular-nums;color:#fff;background:#071044;border:1px solid var(--line);border-radius:10px;padding:4px 14px}
.timer-sm.low{color:var(--gold);border-color:#8a6a10}.timer-sm.crit{color:#FF8FA0;border-color:#8c2a3d;animation:pulse 1s infinite}
/* modal + toast */
.veil{position:fixed;inset:0;background:rgba(2,5,20,.8);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.modal{background:var(--void2);border:1px solid var(--line);border-radius:16px;max-width:720px;width:100%;max-height:92vh;overflow:auto;padding:24px;box-shadow:0 20px 80px #000}
.modal.wide{max-width:980px}
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{background:#0E1944;border:1px solid var(--line);border-left:5px solid var(--cyan);border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:.92rem}
.toast.bad{border-left-color:var(--bad)}.toast.warn{border-left-color:var(--gold)}.toast.ok{border-left-color:var(--ok)}
/* footer */
.foot{margin-top:48px;border-top:1px solid var(--line);padding:24px 0 36px;color:var(--mut);font-size:.88rem}
.social{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.social a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:.86rem;color:var(--ink)}
.social a:hover{border-color:var(--cyan);color:var(--cyan)}
/* warning banner */
.alarm{border:2px solid var(--gold);background:linear-gradient(90deg,rgba(255,197,49,.18),rgba(255,107,129,.12));border-radius:var(--r);padding:18px 22px;display:flex;gap:16px;align-items:flex-start}
.alarm svg{width:42px;height:42px;flex:none;color:var(--gold)}
.alarm h2{margin:0 0 4px;color:var(--gold2)}
/* exam */
.exam-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.exam-wrap{grid-template-columns:1fr}.nav-col{order:2}}
.qnum{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.qn{min-height:40px;border-radius:8px;border:1px solid var(--line);background:#071044;color:var(--ink);font:700 .85rem var(--font);cursor:pointer;position:relative}
.qn.done{background:var(--royal);border-color:var(--royal2);color:#fff}
.qn.cur{outline:3px solid var(--gold);outline-offset:1px}
.qn.rev::after{content:'';position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.opt{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:2px solid #bfcbef;border-radius:12px;background:#fff;cursor:pointer;margin-bottom:10px;color:#0B1330;font-size:1.02rem}
.opt:hover{border-color:var(--royal2)}
.opt.sel{border-color:var(--royal);background:#E7EEFF;box-shadow:0 0 0 3px rgba(26,85,227,.18)}
.opt .k{flex:none;width:30px;height:30px;border-radius:50%;background:#0B1B6B;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.opt.sel .k{background:var(--royal)}
.opt.right{border-color:#12805C;background:#E3F8EF}.opt.wrong{border-color:#C42B47;background:#FFE9ED}
.fig{margin:12px 0;text-align:center}.fig img{max-width:100%;max-height:340px;background:#fff;border:1px solid #c5d0f2;border-radius:10px;padding:6px}
.fig figcaption{font-size:.84rem;color:#4a587f;margin-top:4px}
.noselect{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.essay-box{width:100%;min-height:260px;font-size:1.02rem;line-height:1.6}
.wm{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.07}
.overlay{position:fixed;inset:0;z-index:150;background:rgba(2,5,20,.96);display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
.overlay .box{max-width:560px}
.bar{height:10px;background:#071044;border-radius:99px;overflow:hidden;border:1px solid var(--line)}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--royal),var(--cyan))}
.sev-high{color:#FF9AAA}.sev-medium{color:var(--gold)}.sev-low{color:var(--cyan)}.sev-info{color:var(--mut)}
.feed li{list-style:none;padding:9px 0;border-bottom:1px solid rgba(37,52,122,.6);font-size:.88rem}.feed{margin:0;padding:0}
.big{font:700 3rem var(--head);color:var(--cyan)}
pre.code{background:#071044;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-size:.82rem;white-space:pre-wrap;word-break:break-all}
.article{border-left:3px solid var(--gold);padding:2px 0 2px 16px;margin:0 0 16px}
.article h3{margin:0 0 4px;color:var(--gold2)}
@media print{body{background:#fff;color:#000}.topbar,.noprint,.foot .social{display:none!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- writing tools: handwriting pad and symbol keypad ---- */
.essay-box{min-height:52vh;resize:vertical}
.seg{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.inkpad{margin-top:6px}
.inkbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;border:1px solid #cfd9f5;border-radius:12px;background:#EEF3FF;color:#0B1330;position:sticky;top:0;z-index:5}
.inkbar .btn.ghost{color:#0B1330;border-color:#7c8cc0;background:#fff}
.inkbar .sz{display:flex;gap:6px;align-items:center;font-size:.9rem;color:#0B1330;font-weight:500}
.inkbar .chip{background:#fff;color:#0B1330;border:1px solid #cfd9f5}
.inkbar .sw{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #7c8cc0;cursor:pointer;padding:0}
.inkbar .sw.on{box-shadow:0 0 0 3px #1A55E3}
.inkview{position:relative;margin-top:10px;max-height:72vh;overflow:auto;border:1px solid #cfd9f5;border-radius:12px;background:#dfe6fb;padding:10px;user-select:none;-webkit-user-select:none}
.inkview.moving canvas{cursor:grab}
.inkpage{max-width:900px;margin:0 auto 14px}
.inklab{font-size:.8rem;color:#44517f;margin:0 0 4px 2px}
.inkpage canvas{display:block;width:100%;height:auto;aspect-ratio:1000/1400;background:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(11,19,48,.18);touch-action:none;cursor:crosshair}
.keypad{margin-top:8px;padding:10px;border:1px solid #cfd9f5;border-radius:12px;background:#F4F7FF}
.keypad[hidden]{display:none}
.krow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.klab{width:64px;font-size:.78rem;color:#44517f;font-weight:600}
.key{min-width:44px;min-height:44px;border:1px solid #7c8cc0;border-radius:10px;background:#fff;color:#0B1330;font:600 1.05rem var(--font);cursor:pointer}
.key:hover{background:#E4ECFF}.key:active{background:#CBDAFF}
.key.wide{padding:0 18px}
@media(max-width:720px){.klab{width:100%}.inkview{max-height:60vh}}
.paper .hint,.ans .hint{color:#44517f}
[hidden]{display:none!important}