/* Layout: squared maths-paper ground, one centred working column, white "worksheet" panels; biro blue for actions, highlighter yellow for the current item. */
:root{
  --bg:#eef3fa; --grid:#dbe5f3; --surface:#ffffff; --ink:#14213d; --muted:#586680; --line:#cfd9e8;
  --accent:#1f5fd6; --on-accent:#ffffff; --hi:#ffd84a; --on-hi:#14213d;
  --good:#17804f; --good-bg:#e1f5ea; --bad:#c23434; --bad-bg:#fbe6e6; --warn:#946200; --warn-bg:#fff2cf; --idle-bg:#e8edf5;
  --nav-quiz:#1f5fd6; --nav-lessons:#7a3fd1; --nav-homework:#c4520b; --nav-exams:#17804f;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1524; --grid:#172238; --surface:#18233a; --ink:#e9effb; --muted:#9cabc6; --line:#2d3d5c;
  --accent:#82adff; --on-accent:#0e1524; --hi:#ffd84a; --on-hi:#14213d;
  --good:#58d6a0; --good-bg:#14382b; --bad:#ff8a8a; --bad-bg:#472022; --warn:#f3c25e; --warn-bg:#40330f; --idle-bg:#22304c;
  --nav-quiz:#3d7bf0; --nav-lessons:#8b5cf6; --nav-homework:#e0661f; --nav-exams:#22a06b;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0e1524; --grid:#172238; --surface:#18233a; --ink:#e9effb; --muted:#9cabc6; --line:#2d3d5c;
  --accent:#82adff; --on-accent:#0e1524; --hi:#ffd84a; --on-hi:#14213d;
  --good:#58d6a0; --good-bg:#14382b; --bad:#ff8a8a; --bad-bg:#472022; --warn:#f3c25e; --warn-bg:#40330f; --idle-bg:#22304c;
  --nav-quiz:#3d7bf0; --nav-lessons:#8b5cf6; --nav-homework:#e0661f; --nav-exams:#22a06b;
  color-scheme:dark }
*{box-sizing:border-box}
body{background:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font:16px/1.5 var(--body);padding-inline:16px;padding-block:20px 48px}
.wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:1.9rem;font-weight:700} h2{font-size:1.35rem} h3{font-size:1.05rem}
p{margin:0}
.eyebrow{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
header.top{display:flex;flex-direction:column;gap:14px}
/* student header: title + red Log out on one line, then equal-size colour-coded page buttons */
.titlebar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.titlebar>div{min-width:0}
.logout{flex:none;background:#c23434;color:#fff;border:2px solid #c23434;border-radius:999px;padding:8px 18px;font-weight:700;text-decoration:none;font-family:var(--display)}
.logout:hover{background:#a52a2a;border-color:#a52a2a}
.pnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:620px){.pnav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pbtn{--c:var(--nav-quiz);display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:8px 10px;border-radius:14px;
  font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.2;text-decoration:none;
  color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--surface));border:2px solid color-mix(in srgb,var(--c) 40%,transparent)}
.pbtn:hover{background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.pbtn[aria-current="page"]{background:var(--c);border-color:var(--c);color:#fff}
.pb-quiz{--c:var(--nav-quiz)} .pb-lessons{--c:var(--nav-lessons)} .pb-homework{--c:var(--nav-homework)} .pb-exams{--c:var(--nav-exams)}
.subnav{gap:8px}
nav{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;cursor:pointer;color:inherit}
.btn{border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700;padding:9px 18px;border-radius:8px}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.small{padding:5px 12px;font-size:.9rem}
.btn:disabled{opacity:.4;cursor:default}
.tab{border:2px solid var(--line);background:var(--surface);padding:7px 16px;border-radius:999px;font-weight:700}
.tab[aria-pressed="true"]{background:var(--hi);border-color:var(--hi);color:var(--on-hi)}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spread{justify-content:space-between}
.muted{color:var(--muted)} .sm{font-size:.9rem}
label.name{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--muted)}
input[type=text]{font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:8px;padding:8px 12px;min-width:0}
input[type=text]:focus{border-color:var(--accent);outline:none}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.topic{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.topic .grow{flex:1}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:999px;white-space:nowrap}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.idle{background:var(--idle-bg);color:var(--muted)}
/* quiz */
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font-size:.8rem;font-weight:700;padding:0;font-variant-numeric:tabular-nums}
.dot.done{background:var(--idle-bg);border-color:var(--muted)}
.dot.cur{background:var(--hi);border-color:var(--hi);color:var(--on-hi)}
.qtext{font-size:1.3rem;line-height:1.6}
.fr{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;font-size:.85em;line-height:1.15;margin:0 3px}
.fr>span:first-child{border-bottom:2px solid currentColor;padding:0 4px}
.fr>span:last-child{padding:0 4px}
.ansrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ansrow input{font-size:1.3rem;width:200px;max-width:100%}
.ansrow.long{align-items:flex-start;flex-direction:column}
.ansrow textarea{width:100%;font:inherit;font-size:1rem;line-height:1.5;padding:10px;border-radius:10px;border:1px solid var(--line,#ccc);box-sizing:border-box}
.qtext table{border-collapse:collapse;margin:8px 0;max-width:100%;display:block;overflow-x:auto}
.qtext td,.qtext th{border:1px solid var(--line,#ccc);padding:4px 8px;text-align:center}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.opt{border:2px solid var(--line);background:var(--surface);border-radius:10px;padding:12px;font-size:1.15rem;text-align:center}
.opt.sel{border-color:var(--accent);background:var(--idle-bg);font-weight:700}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.qt{font-size:1rem;margin-top:8px} .qt th,.qt td{border:1px solid var(--line);padding:5px 14px;text-align:left} .qt th{background:var(--idle-bg)}
.note{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:10px 14px;font-weight:700}
/* report */
.score{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.big{font-family:var(--display);font-size:3.2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
ul.plain{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.rev{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.rev .q{font-size:1.05rem}
.ex{color:var(--muted);font-size:.95rem}
textarea{width:100%;min-height:170px;font:inherit;font-size:.9rem;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:8px;padding:10px}
/* dashboard */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.tile b{display:block;font-family:var(--display);font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.prog{width:100%;min-width:560px} .prog th,.prog td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
.prog th{color:var(--muted);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}
.bar{height:10px;background:var(--idle-bg);border-radius:5px;overflow:hidden;min-width:90px}
.bar>i{display:block;height:100%;background:var(--accent)}
svg text{fill:var(--muted);font:12px var(--body)}
/* stage 2: sign-in and saving */
body{margin:0}
label.field{display:flex;flex-direction:column;gap:6px;font-weight:700}
label.field input{font-size:1.15rem}
input[type=password]{font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:8px;padding:8px 12px;min-width:0}
input[type=password]:focus{border-color:var(--accent);outline:none}
.who{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.who b{font-family:var(--display)}
a.btn{text-decoration:none;display:inline-block}
.saved{font-size:.9rem;font-weight:700}
.saved.ok{color:var(--good)} .saved.bad{color:var(--bad)} .saved.wait{color:var(--muted)}
a.tab{text-decoration:none;color:inherit;display:inline-block}
/* stage 3: exam papers */
.wrap.wide{max-width:1400px}
.exam-bar{position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 16px;box-shadow:0 6px 18px rgba(20,33,61,.08)}
.exam-timer{font-family:var(--display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 14px;border-radius:8px;background:var(--idle-bg)}
.exam-timer.low{background:var(--bad-bg);color:var(--bad)}
.exam-layout{display:grid;gap:20px;align-items:start}
.exam-layout.paper{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.exam-pdf{position:sticky;top:76px}
.exam-pdf iframe{width:100%;height:calc(100vh - 170px);min-height:480px;border:1px solid var(--line);border-radius:8px;background:#fff}
.exam-sheet{display:flex;flex-direction:column;gap:14px;min-width:0}
.qcard .qtext{font-size:1.15rem}
a.dot{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;width:auto;min-width:30px;padding:0 6px;border-radius:15px}
.pad{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.pad canvas{display:block;background-color:#fff;background-image:linear-gradient(#eef2f8 1px,transparent 1px),linear-gradient(90deg,#eef2f8 1px,transparent 1px);background-size:24px 24px;cursor:crosshair}
.pad-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 8px;background:var(--idle-bg);border-bottom:1px solid var(--line)}
.pad-col{width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line);padding:0}
.pad-col.on{box-shadow:0 0 0 3px var(--accent)}
.pad-btn{border:1px solid var(--line);background:#fff;color:#14213d;border-radius:6px;padding:3px 10px;font-size:.85rem;font-weight:700}
.pad-btn.on{background:var(--hi);border-color:var(--hi)}
.pad-overlay{position:absolute;inset:0;background:transparent;border:0}
.pad-overlay canvas{background:transparent}
.pad-overlay .pad-tools{position:absolute;right:8px;top:8px;border:1px solid var(--line);border-radius:8px}
.workimg{max-width:100%;border:1px solid var(--line);border-radius:8px;margin-top:6px;background:#fff}
@media (max-width:900px){.exam-layout.paper{grid-template-columns:1fr}.exam-pdf{position:static}.exam-pdf iframe{height:70vh}.exam-timer{font-size:1.3rem}}
@media (max-width:600px){.exam-bar{padding:8px 10px;gap:8px}.exam-bar>div:first-child{display:none}.exam-bar .saved{display:none}.exam-bar{flex-wrap:nowrap}.wrap.wide header.top h1{font-size:1.2rem}}
.install-app-btn{font:inherit;font-weight:700;border:2px solid #1B3A66;color:#1B3A66;background:#fff;border-radius:12px;padding:10px 16px;cursor:pointer}
@media (display-mode: standalone){.install-app-btn{display:none!important}}
/* revision-video links under wrong answers */
.lessonhelp{margin-top:10px;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;padding:10px 14px;background:color-mix(in srgb,var(--accent) 6%,transparent);display:flex;flex-direction:column;gap:8px}
.lessonhelp:empty{display:none}
.lessonhelp blockquote{margin:0;padding:0;font-size:1rem;line-height:1.55}
.lessonhelp .lh-head{font-size:.92rem}
.lessonhelp a.btn{text-decoration:none;display:inline-block}
.lh-pick{display:flex;flex-direction:column;gap:6px}

/* exam board choice (GCSE Science, Years 9–11) */
.boardpick{display:flex;flex-direction:column;gap:10px}
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.boardbtn{text-align:left;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;font:inherit;cursor:pointer;min-width:0}
.boardbtn b{font-size:1.15rem}
.boardbtn span{font-size:.8rem;color:var(--muted)}
.boardbtn:hover,.boardbtn[aria-pressed="true"]{border-color:var(--accent)}
.boardbar{align-items:center;gap:8px}
.sback{flex:none;align-self:center;border:2px solid currentColor;border-radius:999px;padding:7px 14px;font-weight:700;text-decoration:none;color:var(--ink,#2b2550);font-family:var(--display);margin-right:12px}
.sback:hover{background:rgba(0,0,0,.05)}

/* ---------- Report & progress: game screen (Years 5–7) — one dark look in both themes ---------- */
.gx{--gx-bg:#16163a;--gx-card:#24245a;--gx-deep:#0f0f2c;--gx-ink:#f3f2ff;--gx-muted:#b8b5ea;--gx-line:#3b3b80;--gx-xp:#ffd23f;--gx-gem:#38e1c4;--gx-hot:#ff5d8f;
  background:var(--gx-bg);color:var(--gx-ink);border-radius:26px;padding:clamp(14px,3vw,26px);display:flex;flex-direction:column;gap:16px;font-family:"Baloo 2",var(--display);font-size:1.05rem}
.gx h2,.gx h3{font-family:"Baloo 2",var(--display);font-weight:800;color:var(--gx-ink)}
.gx h2{font-size:1.7rem} .gx h3{font-size:1.2rem}
.gx-h{margin-top:4px}
.gx-muted{color:var(--gx-muted)} .gx-sm{font-size:.9rem}
.gx-card{background:var(--gx-card);border:2px solid var(--gx-line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.gx-lvl{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.gx-rank{display:flex;align-items:center;gap:14px;min-width:0}
.gx-shield{width:64px;height:72px;flex:none}
.gx-grow{flex:1 1 220px;display:flex;flex-direction:column;gap:4px}
.gx-xp{position:relative;height:22px;border-radius:999px;background:var(--gx-deep);border:2px solid var(--gx-line);overflow:hidden}
.gx-xp i{display:block;height:100%;background:linear-gradient(90deg,var(--gx-xp),#ff9f1c)}
.gx-xp span{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
.gx-up{background:var(--gx-xp);color:#1b1340;border-radius:14px;padding:8px 14px;font-weight:800}
.gx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.gx-stat{background:#1b1b47;border-radius:16px;padding:12px;text-align:center;display:flex;flex-direction:column}
.gx-stat b{font-size:1.7rem;line-height:1.15;font-variant-numeric:tabular-nums}
.gx-stat span{color:var(--gx-muted);font-size:.9rem}
.gx-stat.g b{color:var(--gx-gem)} .gx-stat.x b,.gx-stat.h b{color:var(--gx-xp)}
.gx-path{display:flex;flex-wrap:wrap;gap:8px}
.gx-dot{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;text-decoration:none;border:2px solid transparent}
.gx-dot.ok{background:var(--gx-gem);color:#06312a} .gx-dot.no{border-color:var(--gx-hot);color:var(--gx-hot)}
.gx-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.gx-chips{display:flex;flex-wrap:wrap;gap:8px}
.gx-chip{border-radius:999px;padding:4px 12px;font-weight:700;font-size:.92rem}
.gx-chip.ok{background:var(--gx-gem);color:#06312a} .gx-chip.no{background:#3d1630;color:#ffb3cb;border:1px solid var(--gx-hot)}
.gx-quest{background:linear-gradient(90deg,#3a2470,var(--gx-card));border:2px solid var(--gx-xp);border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;font-weight:700}
.gx-quest svg{flex:none}
.gx-btns{display:flex;flex-wrap:wrap;gap:10px}
.gx-btn{border:0;border-radius:14px;padding:11px 18px;font:800 1rem "Baloo 2",var(--display);background:#33337a;color:var(--gx-ink);cursor:pointer}
.gx-btn.main{background:var(--gx-xp);color:#1b1340;box-shadow:0 4px 0 #b58a00}
.gx-btn.small{padding:6px 14px;font-size:.92rem;align-self:flex-start}
.gx-btn:hover{filter:brightness(1.1)}
.gx-q{background:var(--gx-card);border:2px solid var(--gx-line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:8px;scroll-margin-top:16px}
.gx-q.no{border-color:var(--gx-hot)}
.gx-q .q{font-size:1.1rem;font-family:var(--body)}
.gx-qh{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gx-pill{border-radius:999px;padding:2px 12px;font-weight:800;font-size:.85rem}
.gx-pill.ok{background:var(--gx-gem);color:#06312a} .gx-pill.no{background:var(--gx-hot);color:#3d0618} .gx-pill.xp{background:var(--gx-deep);color:var(--gx-xp)}
.gx-fix{background:var(--gx-deep);border-radius:14px;padding:10px 12px}
.gx-fix b{color:var(--gx-gem)}
.gx .lessonhelp{background:var(--gx-deep);border-color:var(--gx-line);border-left-color:var(--gx-xp);color:var(--gx-ink)}
.gx .lessonhelp .muted{color:var(--gx-muted)}
.gx .q table td,.gx .q table th{border-color:var(--gx-line)}
.gx .saved.ok{color:var(--gx-gem)} .gx .saved.bad{color:#ffb3cb} .gx .saved.wait{color:var(--gx-muted)}
.gx textarea{background:var(--gx-deep);color:var(--gx-ink);border-color:var(--gx-line)}
.gx-week{display:flex;gap:6px;flex-wrap:wrap}
.gx-day{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:.8rem;font-weight:800;background:var(--gx-deep);color:var(--gx-muted)}
.gx-day.on{background:var(--gx-hot);color:#fff} .gx-day.today{outline:2px solid var(--gx-xp);outline-offset:1px}
.gx-badges{display:flex;flex-wrap:wrap;gap:12px}
.gx-bdg{width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:.82rem;font-weight:700;line-height:1.2}
.gx-bdg svg{width:56px;height:56px} .gx-bdg.off{opacity:.4}
.gx-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
.gx-node{background:#1b1b47;border:2px solid var(--gx-line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.gx-node.gold{border-color:var(--gx-xp)} .gx-node.new{border-style:dashed}
.gx-stars{color:var(--gx-xp);letter-spacing:2px;font-size:1.2rem}
.gx-recent{display:flex;flex-direction:column;gap:6px}
.gx-recent div{display:grid;grid-template-columns:4.5rem 1fr auto;gap:10px;align-items:center;border-bottom:1px solid var(--gx-line);padding-bottom:6px}
.gx-recent div span:first-child{color:var(--gx-muted);font-size:.9rem}
.gx a:focus-visible,.gx button:focus-visible{outline:3px solid var(--gx-xp);outline-offset:2px}

/* ---------- Report & progress: clean and calm (Years 8–11) ---------- */
.cx-sum{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
@media (max-width:520px){.cx-sum{grid-template-columns:1fr}}
.cx-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.cx-of{font-size:1.5rem;color:var(--muted)}
.cx-split{display:flex;height:18px;gap:3px;border-radius:999px;overflow:hidden}
.cx-split a{flex:1;background:var(--good)} .cx-split a.no{background:var(--bad)}
.cx-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cx-next{border-left:6px solid var(--hi);background:var(--warn-bg);border-radius:10px;padding:10px 14px}
.cx-light{font-weight:400;font-family:var(--body)}
.cx-q{border:1px solid var(--line);border-radius:14px;background:var(--surface);scroll-margin-top:16px}
.cx-q summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cx-q summary::-webkit-details-marker{display:none}
.cx-q summary::after{content:"▾";margin-left:auto;color:var(--muted)}
.cx-q[open] summary::after{content:"▴"}
.cx-skill{color:var(--muted);font-size:.95rem}
.cx-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.cx-ic.g{background:var(--good)} .cx-ic.r{background:var(--bad)}
.cx-body{padding:0 14px 14px 52px;display:flex;flex-direction:column;gap:8px}
@media (max-width:520px){.cx-body{padding-left:14px}}
.cx-body .q{font-size:1.05rem}
.cx-ok{color:var(--good)} .cx-no{color:var(--bad)}
.cx .panel>.cx-q+.cx-q{margin-top:8px}
.cx-heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px}
.cx-cell{border:0;border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;font:700 .95rem var(--body);text-align:left;cursor:pointer}
.cx-cell b{font-variant-numeric:tabular-nums}
.cx-cell.good{background:var(--good-bg);color:var(--good)} .cx-cell.warn{background:var(--warn-bg);color:var(--warn)} .cx-cell.bad{background:var(--bad-bg);color:var(--bad)}
.cx-cell.idle{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.cx-cell:hover{filter:brightness(.96)}
.gx svg.gx-shield text{font:800 26px "Baloo 2",var(--display);fill:#ffd23f}
.gx .gx-bdg svg text{font:800 20px "Baloo 2",var(--display);fill:#1b1340}