[hidden]{display:none!important}

/* Layout: exam-room workspace. Left rail of study modes, a centred "answer sheet" in the middle, a narrow progress column on the right. */
:root{
  --bg:#F3F5FA; --surface:#FFFFFF; --sunk:#E9EDF6; --ink:#121A33; --muted:#586079; --line:#D9DEEA;
  --blue:#022DC1; --navy:#011E8A; --blue-soft:#E3E9FC; --green:#06C633; --green-ink:#03822A; --green-soft:#E2F7E7;
  --red:#C2261F; --red-soft:#FBE7E5; --amber:#A35F00; --amber-soft:#FFF2DB; --on-blue:#FFFFFF; --wm:rgba(2,45,193,.06);
  --display:"Lato","Helvetica Neue",Arial,sans-serif; --body:"Lato","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
  --r:4px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0F1F; --surface:#121931; --sunk:#0E1428; --ink:#E7EAF4; --muted:#9AA3BE; --line:#26304D;
  --blue:#7A93FF; --navy:#4C68E0; --blue-soft:#1A2550; --green:#2FD65A; --green-ink:#4BE172; --green-soft:#10301C;
  --red:#FF7A70; --red-soft:#3A1614; --amber:#F2B252; --amber-soft:#36270C; --on-blue:#0A0F1F; --wm:rgba(122,147,255,.07); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0F1F; --surface:#121931; --sunk:#0E1428; --ink:#E7EAF4; --muted:#9AA3BE; --line:#26304D;
  --blue:#7A93FF; --navy:#4C68E0; --blue-soft:#1A2550; --green:#2FD65A; --green-ink:#4BE172; --green-soft:#10301C;
  --red:#FF7A70; --red-soft:#3A1614; --amber:#F2B252; --amber-soft:#36270C; --on-blue:#0A0F1F; --wm:rgba(122,147,255,.07); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media print{body{display:none}}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
.num{font-variant-numeric:tabular-nums}

/* watermark */
.wm{position:fixed;inset:0;pointer-events:none;z-index:50;background-repeat:repeat}

/* app shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr) 280px;min-height:100%}
.rail{background:var(--surface);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px}
.rail img{width:150px;height:auto;margin:0 6px}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail nav button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:var(--r);font-weight:700;font-size:15px;color:var(--muted)}
.rail nav button small{font-weight:400;font-size:12px}
.rail nav button:hover{background:var(--sunk);color:var(--ink)}
.rail nav button[aria-current="true"]{background:var(--blue-soft);color:var(--blue)}
.rail nav button:focus-visible{outline:3px solid var(--blue)}
.course{font-size:12px;color:var(--muted);padding:0 10px;line-height:1.4}
.course strong{display:block;color:var(--ink);font-size:14px}
.rail .foot{margin-top:auto;font-size:12px;color:var(--muted);padding:0 10px}

main{padding:28px 32px 48px;min-width:0}
.side{border-left:1px solid var(--line);background:var(--surface);padding:24px 20px;display:flex;flex-direction:column;gap:22px}
.view{display:none;max-width:760px;margin:0 auto}
.view.on{display:block}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head h1{font-size:28px;font-weight:900;line-height:1.15}
.head p{margin:4px 0 0;color:var(--muted)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.chip.green{background:var(--green-soft);color:var(--green-ink)}
.chip.amber{background:var(--amber-soft);color:var(--amber)}
.chip.blue{background:var(--blue-soft);color:var(--blue)}

.btn{border:0;border-radius:var(--r);padding:10px 18px;font-weight:700;background:var(--blue);color:var(--on-blue)}
.btn:hover{background:var(--navy)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--sunk)}
.btn.green{background:var(--green);color:#06210E}

/* dashboard */
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 30px}
.mode{all:unset;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px}
.mode:hover{border-color:var(--blue)}
.mode:focus-visible{outline:3px solid var(--blue)}
.mode h3{font-size:18px;font-weight:900}
.mode p{margin:0;color:var(--muted);font-size:14px}
.mode .meta{margin-top:6px;font-size:13px;color:var(--blue);font-weight:700}
.ready{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.ready h2{font-size:18px;font-weight:900;margin-bottom:14px}
.bars{display:grid;grid-template-columns:minmax(0,1fr) 150px 44px;gap:10px 14px;align-items:center;font-size:14px}
.track{height:8px;background:var(--sunk);border-radius:999px;overflow:hidden}
.fill{height:100%;background:var(--green);border-radius:999px}
.fill.mid{background:var(--amber)}
.fill.low{background:var(--red)}
.bars .pct{text-align:right;font-weight:700}

/* answer sheet */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.sheet-top .state{font-weight:700;color:var(--ink)}
.qbody{padding:26px 28px 22px}
.qno{font-family:var(--mono);font-size:13px;color:var(--muted)}
.stem{font-size:21px;font-weight:700;line-height:1.4;margin:6px 0 22px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{all:unset;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);font-size:17px}
.opt:hover{border-color:var(--blue);background:var(--blue-soft)}
.opt:focus-visible{outline:3px solid var(--blue)}
.bub{width:34px;height:34px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;font-weight:900;font-size:14px;color:var(--muted)}
.opt.right{border-color:var(--green);background:var(--green-soft)}
.opt.right .bub{background:var(--green);border-color:var(--green);color:#06210E}
.opt.wrong{border-color:var(--red);background:var(--red-soft)}
.opt.wrong .bub{background:var(--red);border-color:var(--red);color:#fff}
.opt.dim{opacity:.55}
.opt.picked{border-color:var(--blue);background:var(--blue-soft)}
.opt.picked .bub{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.fb{margin-top:20px;padding:16px 18px;border-radius:var(--r);background:var(--sunk);display:none}
.fb.on{display:block}
.fb h3{font-size:17px;font-weight:900;margin-bottom:4px}
.fb.ok h3{color:var(--green-ink)} .fb.no h3{color:var(--red)}
.fb p{margin:0 0 10px}
.cite{all:unset;cursor:pointer;font-size:14px;font-weight:700;color:var(--blue)}
.cite:focus-visible{outline:3px solid var(--blue)}
.cite-box{display:none;margin-top:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:14px}
.cite-box.on{display:block}
.cite-box .pg{font-family:var(--mono);font-size:13px;color:var(--blue);display:block;margin-bottom:4px}
.cite-box q{color:var(--ink)}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line)}
.report{all:unset;cursor:pointer;font-size:13px;color:var(--muted);text-decoration:underline}
.kbd{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* exam grid */
.grid100{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.grid100 span{aspect-ratio:1;max-width:100%;display:grid;place-items:center;font-size:11px;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-variant-numeric:tabular-nums}
.grid100 .a{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);font-weight:700}
.grid100 .cur{background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:700}
.grid100 .flag{border-color:var(--amber);color:var(--amber);font-weight:700}
.timer{font-family:var(--mono);font-size:30px;color:var(--ink)}

/* flashcards */
.card{all:unset;cursor:pointer;display:block;width:100%;min-height:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px 36px;position:relative}
.card:focus-visible{outline:3px solid var(--blue)}
.card .side-lbl{font-size:13px;font-weight:700;color:var(--muted)}
.card .front{font-size:23px;font-weight:700;line-height:1.4;margin-top:14px}
.card .back{display:none;margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)}
.card.flipped .back{display:block}
.card .answer{font-family:var(--display);font-size:44px;font-weight:900;color:var(--blue);line-height:1}
.card .hint{position:absolute;bottom:16px;right:20px;font-size:13px;color:var(--muted)}
.rate{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.rate button{flex:1;min-width:120px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;font-weight:700}
.rate button small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.rate .again{border-color:var(--red);color:var(--red)}
.rate .good{border-color:var(--green);color:var(--green-ink)}

/* math */
.work{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:none}
.work.on{display:block}
.work ol{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.work code{font-family:var(--mono);font-size:14px;background:var(--sunk);padding:1px 6px;border-radius:3px}
.given{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 20px}
.given div{background:var(--sunk);border-radius:var(--r);padding:10px 12px}
.given small{display:block;font-size:12px;color:var(--muted)}
.given b{font-family:var(--mono);font-size:17px;font-weight:500}
.ans-in{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ans-in input{font:inherit;font-family:var(--mono);font-size:18px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);width:200px;-webkit-user-select:text;user-select:text}

/* side column */
.side h2{font-size:14px;font-weight:900;color:var(--muted);margin-bottom:10px}
.access{border:1px solid var(--line);border-radius:var(--r);padding:14px}
.access .big{font-family:var(--display);font-size:34px;font-weight:900;line-height:1}
.access p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.statrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:var(--sunk);border-radius:var(--r);padding:10px 12px}
.stat b{display:block;font-size:22px;font-weight:900}
.stat small{font-size:12px;color:var(--muted)}
.notice{font-size:13px;color:var(--muted);line-height:1.45}
.notice b{color:var(--ink)}

/* login */
.screen{display:none;min-height:100%}
.screen.on{display:block}
.login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}
.login .l{background:var(--blue);color:var(--on-blue);padding:56px 56px;display:flex;flex-direction:column;justify-content:center;gap:18px}
:root .login .l{color:#fff}
.login .l h1{font-size:42px;font-weight:900;line-height:1.1;max-width:14ch;color:#fff}
.login .l p{font-size:17px;max-width:44ch;color:#fff;opacity:.9;margin:0}
.login .l ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px;color:#fff}
.login .l li:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#06C633;margin-right:10px;vertical-align:middle}
.login .r{background:var(--surface);padding:56px;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:520px;width:100%;justify-self:center}
.login .r img{width:200px;height:auto}
.login .r h2{font-size:24px;font-weight:900}
.login label{font-weight:700;font-size:14px}
.login input{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);width:100%;-webkit-user-select:text;user-select:text}
.terms{background:var(--amber-soft);color:var(--ink);border-radius:var(--r);padding:12px 14px;font-size:14px}
.terms b{color:var(--amber)}
.sent{display:none;background:var(--green-soft);border-radius:var(--r);padding:12px 14px;font-size:14px}
.sent.on{display:block}

/* bozena */
.admin{max-width:900px;margin:0 auto;padding:32px 24px 60px}
.admin .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:640px}
th{background:var(--navy);color:#fff;text-align:left;font-size:13px;padding:10px 14px}
td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:middle}
td.days{font-family:var(--mono);font-size:13px;letter-spacing:2px}
tr.off td{color:var(--muted)}
.tick{width:20px;height:20px;accent-color:var(--blue)}
.admin .sum{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}

@media (max-width:1100px){.app{grid-template-columns:210px minmax(0,1fr)}.side{display:none}}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .rail nav{flex-direction:row;flex-wrap:wrap}
  .rail .foot,.course{display:none}
  main{padding:20px 16px 40px}
  .modes{grid-template-columns:minmax(0,1fr)}
  .bars{grid-template-columns:minmax(0,1fr) 90px 40px}
  .qbody{padding:20px 16px}
  .stem{font-size:19px}
  .given{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:minmax(0,1fr)}
  .login .l,.login .r{padding:32px 16px}
  .login .l h1{font-size:32px}
}
@media (prefers-reduced-motion:no-preference){.opt,.mode,.btn{transition:background-color .12s,border-color .12s}}

/* live-app additions */
.loading{color:var(--muted);padding:40px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-weight:700;z-index:60}
.overlay{position:fixed;inset:0;background:var(--bg);z-index:70;display:grid;place-items:center;padding:24px}
.overlay .box{max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px}
.overlay h2{font-size:22px;font-weight:900}
.overlay p{margin:0;color:var(--muted)}
.err{background:var(--red-soft);color:var(--red);border-radius:var(--r);padding:12px 14px;font-size:14px;display:none}
.err.on{display:block}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.topics button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--muted)}
.topics button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.grid100 button{all:unset;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;font-size:11px;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-variant-numeric:tabular-nums}
.grid100 button.a{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);font-weight:700}
.grid100 button.cur{background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:700}
.grid100 button.flag{border-color:var(--amber);color:var(--amber);font-weight:700}
.grid100 button.r{background:var(--green-soft);border-color:var(--green);color:var(--green-ink)}
.grid100 button.w{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.score{font-family:var(--display);font-size:56px;font-weight:900;line-height:1;color:var(--blue)}
.rv{border-top:1px solid var(--line);padding:16px 0}
.rv .stem{font-size:17px;margin:4px 0 10px}
.rv .opt{cursor:default;font-size:15px;padding:8px 12px}
.rv .opts{gap:6px}
textarea{font:inherit;width:100%;min-height:90px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);-webkit-user-select:text;user-select:text}
.linkbtn{all:unset;cursor:pointer;color:var(--blue);font-weight:700;font-size:14px}
.signout{all:unset;cursor:pointer;color:var(--blue);font-weight:700}
/* brand panel stays brand blue in both themes; the logo sits on a white plate in dark mode */
.login .l{background:#022DC1}
.login .l li:before{background:#06C633}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) img[src$="logo.png"]{background:#fff;padding:6px 8px;border-radius:4px}}
:root[data-theme="dark"] img[src$="logo.png"]{background:#fff;padding:6px 8px;border-radius:4px}

/* Brand panels: CNTC blue rail on the left, CNTC green access panel on the right.
   Same in light and dark mode, because they are the brand colours themselves. */
:root{--brand-blue:#022DC1;--brand-blue-deep:#011E8A;--brand-green:#06C633;--brand-green-ink:#05301A}
.rail{background:var(--brand-blue);border-right:0;color:#fff}
.rail img{background:#fff;padding:8px 10px;border-radius:4px;width:170px;box-sizing:content-box;margin:0}
.course{color:rgba(255,255,255,.75)}
.course strong{color:#fff}
.rail nav button{color:rgba(255,255,255,.85)}
.rail nav button small{color:rgba(255,255,255,.6)}
.rail nav button:hover{background:rgba(255,255,255,.12);color:#fff}
.rail nav button[aria-current="true"]{background:#fff;color:var(--brand-blue)}
.rail nav button[aria-current="true"] small{color:var(--brand-blue)}
.rail nav button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rail .foot{color:rgba(255,255,255,.75)}
.rail .signout{color:#fff;text-decoration:underline}

.side{background:var(--brand-green);border-left:0;color:var(--brand-green-ink)}
.side h2{color:var(--brand-green-ink);opacity:.8}
.side .access{background:#fff;border:0;color:#121A33}
.side .access .big{color:var(--brand-green-ink)}
.side .access p{color:#3C4A40}
.side .stat{background:rgba(255,255,255,.28)}
.side .stat b{color:var(--brand-green-ink)}
.side .stat small{color:var(--brand-green-ink);opacity:.8}
.side .notice,.side .notice b{color:var(--brand-green-ink)}

/* practice: topic strength list in the green panel */
.side .tip{margin:-4px 0 10px;font-size:12px;color:var(--brand-green-ink);opacity:.85}
.stopics{display:flex;flex-direction:column;gap:6px}
.stopics button{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:4px 8px;align-items:center;background:rgba(255,255,255,.28);border-radius:4px;padding:8px 10px;color:var(--brand-green-ink);font-size:13px;font-weight:700}
.stopics button:hover{background:rgba(255,255,255,.5)}
.stopics button[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px var(--brand-blue)}
.stopics button:focus-visible{outline:3px solid var(--brand-blue)}
.stopics .pct{text-align:right;font-variant-numeric:tabular-nums}
.stopics .track{grid-column:1 / -1;height:6px;background:rgba(5,48,26,.15)}
.stopics .fill{background:var(--brand-blue)}
.stopics .fill.mid{background:#B26A00}
.stopics .fill.low{background:#C2261F}
.stopics .new{font-weight:400;opacity:.75}

/* tiles in the middle pick up the two brand colours */
.mode h3{color:var(--ink)}
.mode:hover{border-color:var(--brand-blue)}
.mode .meta{color:var(--blue)}
.fill{background:var(--brand-green)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rail img{background:#fff}}