:root{--ink:#15212b;--muted:#61707c;--teal:#1fb9a9;--teal-dark:#0f8077;--navy:#202b3b;--paper:#f5f7f8;--line:#dce4e7;--orange:#ff5a24;--good:#168a5b;--bad:#b84138}*{box-sizing:border-box}body{margin:0;font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit;text-decoration:none}header{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:10}.brand{font-size:24px;font-weight:900;color:var(--teal-dark)}.brand span{color:var(--navy);font-weight:600}nav{display:flex;gap:26px;font-weight:700}nav a:hover{color:var(--teal-dark)}main{max-width:1180px;margin:auto;padding:42px 24px 80px}footer{padding:28px;text-align:center;background:var(--navy);color:#cad3da;font-size:13px}.hero{display:grid;grid-template-columns:1.5fr .7fr;gap:48px;align-items:center;padding:60px 0}.eyebrow,.tag{letter-spacing:.13em;font-size:12px;font-weight:900;color:var(--teal-dark)}.hero h1,.page-head h1{font-size:clamp(42px,7vw,78px);line-height:1.02;margin:12px 0 20px;letter-spacing:-.045em}.hero p,.page-head p{font-size:20px;color:var(--muted);max-width:760px}.hero-card{background:var(--navy);color:#fff;border-radius:24px;padding:34px;display:grid;grid-template-columns:auto 1fr;gap:14px 16px;box-shadow:0 22px 60px #1b2a3b2a}.hero-card strong{font-size:34px;color:var(--teal)}.hero-card span{align-self:center}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button,button{border:0;border-radius:10px;background:var(--teal-dark);color:white;padding:13px 20px;font-weight:800;cursor:pointer;display:inline-block;font-size:15px}.button:hover,button:hover{filter:brightness(.93)}.secondary{background:white!important;color:var(--ink)!important;border:1px solid var(--line)!important}.stats{display:grid;grid-template-columns:repeat(3,1fr);background:white;border:1px solid var(--line);border-radius:18px;margin:10px 0 60px}.stats div{padding:25px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats b{display:block;font-size:30px}.stats span{color:var(--muted)}section{margin-bottom:60px}section h2{font-size:30px;margin-bottom:22px}.grid{display:grid;gap:20px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 7px 22px #263b4b0a;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #263b4b16}.card h3{font-size:21px;margin:3px 0 8px}.card p{color:var(--muted)}.module>span{display:inline-grid;place-items:center;min-width:38px;height:30px;padding:0 8px;border-radius:20px;background:#dff5f2;color:var(--teal-dark);font-weight:900;font-size:12px}.test-form{display:grid;gap:14px}.test-form label{display:grid;gap:7px;font-weight:800}.test-form input,.test-form select,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;background:white;font:inherit}.table{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.tr{display:grid;grid-template-columns:1.3fr 1fr 1.2fr .7fr;padding:14px 18px;border-bottom:1px solid var(--line)}.tr.head{font-weight:900;background:#eef3f4}.pass{color:var(--good);font-weight:900}.fail{color:var(--bad);font-weight:900}.page-head{padding:30px 0}.page-head h1{font-size:52px}.lesson,.activity-card{max-width:850px;background:white;border:1px solid var(--line);border-radius:20px;padding:34px}.learning-point{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line)}.learning-point b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dff5f2;color:var(--teal-dark)}.learning-point p{margin:4px 0}.flash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.flash{height:220px;position:relative;background:white!important;color:var(--ink)!important;border:1px solid var(--line)!important;perspective:1000px;padding:0}.flash .front,.flash .back{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;backface-visibility:hidden;transition:.45s;font-size:19px}.flash .back{transform:rotateY(180deg);background:var(--navy);color:white;border-radius:10px}.flash.flipped .front{transform:rotateY(180deg)}.flash.flipped .back{transform:rotateY(0)}.flash small{font-size:10px;letter-spacing:.15em;color:var(--teal);margin-bottom:14px}.term{display:grid;grid-template-columns:1fr 1.7fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}#sortable{padding:0;list-style:none}#sortable li{padding:15px;background:#f4f7f8;border:1px solid var(--line);margin:8px 0;border-radius:9px;cursor:grab}#sortable li.dragging{opacity:.35}.feedback{padding:16px;border-radius:10px;margin:18px 0}.feedback.good{background:#e4f6ed;color:#0d6b45}.feedback.bad{background:#fbe9e7;color:#8d3029}.exam-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.exam-top span{display:block;color:var(--muted)}#timer{font-size:28px;font-weight:900;background:var(--navy);color:white;padding:9px 18px;border-radius:10px}.exam-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}.navigator{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;position:sticky;top:95px}.navigator a{aspect-ratio:1;display:grid;place-items:center;background:white;border:1px solid var(--line);border-radius:7px;font-size:13px}.navigator a.answered{background:#dff5f2;border-color:#73d2c8}.navigator a.current{outline:3px solid var(--teal-dark)}.navigator a.flagged{box-shadow:inset 0 -5px var(--orange)}.question-card{background:white;border:1px solid var(--line);border-radius:20px;padding:35px}.question-card h1{font-size:27px;line-height:1.35;margin:16px 0 28px}.option{display:grid;grid-template-columns:auto 42px 1fr;align-items:center;border:1px solid var(--line);border-radius:12px;padding:13px;margin:10px 0;cursor:pointer}.option:has(input:checked){border:2px solid var(--teal-dark);background:#effaf8}.option input{width:18px;height:18px}.option>span{font-weight:900;color:var(--teal-dark)}.option p{margin:0}.exam-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:26px}.result-hero{text-align:center;padding:50px;border-radius:22px;background:var(--navy);color:white}.result-hero h1{font-size:72px;margin:5px}.result-hero>span{font-weight:900;letter-spacing:.15em;color:var(--teal)}.topic-results{background:white;border:1px solid var(--line);border-radius:15px;padding:20px}.topic-results>div{display:grid;grid-template-columns:180px 1fr 60px;gap:15px;align-items:center;padding:10px}progress{width:100%;height:16px}.review-item{background:white;border:1px solid var(--line);border-left:5px solid var(--bad);border-radius:10px;margin:10px 0;padding:5px 16px}.review-item.right{border-left-color:var(--good)}.review-item summary{display:flex;justify-content:space-between;gap:20px;padding:14px 0;cursor:pointer}.review-item summary span{font-weight:900}.review-item>div{padding:0 0 16px}.correct-answer{background:#e4f6ed;padding:10px;border-radius:7px}.your-answer{background:#fbe9e7;padding:10px;border-radius:7px}.rationale{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
@media(max-width:800px){nav{gap:12px;font-size:13px}.hero,.grid.two,.grid.three,.flash-grid,.exam-layout{grid-template-columns:1fr}.hero{padding-top:25px}.hero h1{font-size:48px}.stats{grid-template-columns:1fr}.stats div{border-right:0;border-bottom:1px solid var(--line)}.exam-layout aside{order:2}.navigator{position:static}.question-card{padding:22px}.exam-actions{flex-wrap:wrap}.term{grid-template-columns:1fr}.tr{grid-template-columns:1fr 1fr}.tr span:nth-child(2){display:none}}
/* Account and administration additions */
header nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.inline{display:inline;margin:0}.link-button{border:0;background:none;color:inherit;padding:0;cursor:pointer;font:inherit}.admin-link{font-weight:800}.announcement{padding:.75rem 5%;background:#fff4cc;border-bottom:1px solid #ead78d}.flash{max-width:1200px;margin:1rem auto;padding:1rem;border-radius:10px}.flash.success{background:#daf5e7}.flash.danger{background:#ffe0e0}.flash.warning{background:#fff2ce}.auth-card{max-width:480px;margin:4rem auto;background:white;padding:2rem;border-radius:18px;box-shadow:0 16px 50px rgba(20,40,60,.12)}.auth-card form,.card form{display:grid;gap:1rem}label{display:grid;gap:.4rem;font-weight:700}input,select,textarea{width:100%;box-sizing:border-box;padding:.8rem;border:1px solid #cbd5df;border-radius:8px;font:inherit}.small{padding:.5rem .8rem}.admin-nav{display:flex;gap:.5rem;flex-wrap:wrap;padding:1rem;background:#172334;border-radius:12px;margin-bottom:2rem}.admin-nav a{color:white;padding:.55rem .75rem;border-radius:7px}.admin-nav a:hover{background:#263c56}.section-title{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1rem 0}.list-row,.announcement-admin{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid #e6ebef}.list-row small{display:block;color:#64748b}.badge{display:inline-block;background:#e8eef4;padding:.35rem .65rem;border-radius:999px;font-size:.85rem}.badge.success{background:#d7f5e4;color:#176c42}.metric-row{display:grid;grid-template-columns:110px 1fr 50px;gap:.75rem;align-items:center;margin:.8rem 0}.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.checkbox{display:flex;grid-template-columns:auto 1fr;align-items:center}.checkbox input{width:auto}.danger-zone{border:1px solid #efb0b0}.danger{background:#b42318!important}.danger-text{color:#b42318}.searchbar{display:flex;gap:.7rem;margin:1rem 0}.searchbar input{flex:1}.admin-table .tr{grid-template-columns:1.4fr .8fr .7fr 1fr .7fr}.admin-table .tr span small{display:block}.narrow{max-width:650px;margin:1rem auto}.announcement-admin form{flex:none}code{background:#eef2f6;padding:.2rem .4rem;border-radius:5px}@media(max-width:800px){header{align-items:flex-start}header nav{width:100%}.admin-table{overflow-x:auto}.admin-table .tr{min-width:800px}.metric-row{grid-template-columns:90px 1fr 45px}}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.stack{display:grid;gap:.8rem}.stack label{display:grid;gap:.35rem}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{padding:.65rem;border-bottom:1px solid #dfe5e8;text-align:left;vertical-align:top;white-space:nowrap}.table-wrap td:nth-child(3),.table-wrap td:last-child{white-space:normal}.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:#e8eef1;font-size:.78rem}.badge.danger,.badge.high{background:#ffe1e1;color:#8a1010}.badge.warning{background:#fff0c7;color:#714d00}.badge.info{background:#dff0ff;color:#064f7a}.block{display:block;margin-top:.25rem;color:#68757d}.split{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}.blocked-card{max-width:620px;margin:4rem auto}.blocked-card dl{display:grid;grid-template-columns:130px 1fr;gap:.6rem}.danger{background:#a52222!important;color:white!important}

/* Version 2.1: light and dark appearance */
html{color-scheme:light;transition:background-color .2s ease}html[data-theme="dark"]{color-scheme:dark}
.theme-switch{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;color:var(--muted);cursor:pointer;user-select:none}.theme-switch input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.theme-switch-track{position:relative;display:inline-block;width:48px;height:26px;border:1px solid #b9c6cd;border-radius:999px;background:#e7edef;box-shadow:inset 0 1px 2px rgba(21,33,43,.12);transition:background .2s,border-color .2s}.theme-switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(21,33,43,.3);transition:transform .2s}.theme-switch input:checked+.theme-switch-track{background:var(--teal-dark);border-color:var(--teal-dark)}.theme-switch input:checked+.theme-switch-track .theme-switch-thumb{transform:translateX(22px)}.theme-switch input:focus-visible+.theme-switch-track{outline:3px solid rgba(15,128,119,.35);outline-offset:3px}.theme-switch:hover .theme-switch-track{border-color:var(--teal-dark)}

html[data-theme="dark"]{
  --ink:#e8eef3;
  --muted:#aab7c2;
  --teal:#39d1c1;
  --teal-dark:#58ddd0;
  --navy:#101923;
  --paper:#0b1219;
  --line:#2b3945;
  --orange:#ff8158;
  --good:#55d294;
  --bad:#ff8178;
  --surface:#141f29;
  --surface-soft:#192631;
}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] header{background:#101922;border-color:var(--line);box-shadow:0 8px 30px rgba(0,0,0,.22)}
html[data-theme="dark"] .brand span{color:var(--ink)}
html[data-theme="dark"] footer{background:#080d12;color:#aab7c2;border-top:1px solid var(--line)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .stats,
html[data-theme="dark"] .table,
html[data-theme="dark"] .lesson,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .topic-results,
html[data-theme="dark"] .review-item,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .navigator a,
html[data-theme="dark"] .test-form input,
html[data-theme="dark"] .test-form select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .theme-switch-track{border-color:#647485}
html[data-theme="dark"] .card{box-shadow:0 8px 24px rgba(0,0,0,.2)}
html[data-theme="dark"] .card:hover{box-shadow:0 15px 35px rgba(0,0,0,.33)}
html[data-theme="dark"] .tr.head,
html[data-theme="dark"] #sortable li{background:var(--surface-soft)}
html[data-theme="dark"] .module>span,
html[data-theme="dark"] .learning-point b,
html[data-theme="dark"] .navigator a.answered{background:#163d3a;color:#7ce9dd;border-color:#317d76}
html[data-theme="dark"] .option:has(input:checked){background:#153431;border-color:var(--teal-dark)}
html[data-theme="dark"] .flash{background:var(--surface)!important;color:var(--ink)!important}
html[data-theme="dark"] .flash .back,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] #timer,
html[data-theme="dark"] .result-hero,
html[data-theme="dark"] .admin-nav{background:#0d1720}
html[data-theme="dark"] .announcement{background:#3a3218;color:#f3e6b5;border-color:#665728}
html[data-theme="dark"] .flash.success{background:#143a2b;color:#b9f3d5}
html[data-theme="dark"] .flash.danger{background:#48201f;color:#ffd1ce}
html[data-theme="dark"] .flash.warning{background:#3a3017;color:#f7e6ae}
html[data-theme="dark"] .feedback.good,
html[data-theme="dark"] .correct-answer{background:#143a2b;color:#b9f3d5}
html[data-theme="dark"] .feedback.bad,
html[data-theme="dark"] .your-answer{background:#48201f;color:#ffd1ce}
html[data-theme="dark"] code{background:#202d38;color:#dce8f1}
html[data-theme="dark"] .badge{background:#25333f;color:#d9e4ec}
html[data-theme="dark"] .badge.success{background:#143a2b;color:#8ce1b6}
html[data-theme="dark"] .badge.warning{background:#403516;color:#f3d77e}
html[data-theme="dark"] .badge.info{background:#17364a;color:#91d4fa}
html[data-theme="dark"] .badge.danger,
html[data-theme="dark"] .badge.high{background:#48201f;color:#ffaaa4}
html[data-theme="dark"] progress{accent-color:var(--teal)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#7f8d98}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{outline:2px solid var(--teal-dark);outline-offset:1px}
@media(max-width:800px){.theme-switch-label{display:none}}
@media(prefers-reduced-motion:reduce){html,.card,.flash .front,.flash .back{transition:none!important}}

/* Version 2.1.1: flashcard layout repair
   The generic .flash notification class added margins and padding to the
   flashcard buttons. Grid items with auto side margins then shrank to their
   content width. Scope explicit dimensions to cards inside the flash grid. */
.flash-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.flash-grid > .flash{
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  height:220px;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:12px;
  text-align:center;
}
.flash-grid > .flash .front,
.flash-grid > .flash .back{
  width:100%;
  height:100%;
  padding:28px;
  overflow-wrap:anywhere;
}
@media(max-width:900px) and (min-width:601px){
  .flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .flash-grid{grid-template-columns:1fr}
  .flash-grid > .flash{height:200px}
}

/* v2.2 draggable matching activities */
.match-instructions{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-bottom:24px;padding:14px 16px;border-radius:12px;background:#eaf7f5;color:var(--ink)}
.match-instructions span{color:var(--muted);font-size:14px}
.match-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.8fr);gap:24px;align-items:start}
.match-board,.answer-panel{min-width:0}
.match-board h3,.answer-panel h3{margin:0 0 14px}
.match-row{display:grid;grid-template-columns:minmax(180px,.85fr) minmax(260px,1.35fr);gap:14px;align-items:stretch;padding:10px 0;border-bottom:1px solid var(--line)}
.match-row:last-child{border-bottom:0}
.match-term{display:flex;gap:12px;align-items:center;min-height:72px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#f7f9fa}
.match-number{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#dff5f2;color:var(--teal-dark);font-size:12px;font-weight:900}
.drop-zone{min-height:72px;padding:8px;border:2px dashed #b9c8cd;border-radius:12px;display:flex;align-items:center;transition:border-color .16s,background .16s,box-shadow .16s;cursor:pointer}
.drop-zone:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:2px}
.drop-zone.drag-over{border-color:var(--teal-dark);background:#effaf8;box-shadow:0 0 0 4px #1fb9a91c}
.drop-placeholder{width:100%;text-align:center;color:var(--muted);font-size:14px;font-weight:700;pointer-events:none}
.answer-panel{position:sticky;top:94px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#f7f9fa}
.answer-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
button.small{padding:8px 12px;font-size:13px}
.answer-bank{display:grid;gap:10px;min-height:130px;padding:4px;border-radius:12px}
.answer-bank.drag-over{background:#eaf7f5}
.answer-card{width:100%;min-height:62px;display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;text-align:left;padding:12px 14px;border:1px solid #cbd7db!important;border-radius:11px!important;background:#fff!important;color:var(--ink)!important;box-shadow:0 3px 10px #263b4b0c;cursor:grab;line-height:1.35;transition:transform .14s,box-shadow .14s,border-color .14s}
.answer-card:hover{filter:none;transform:translateY(-1px);box-shadow:0 8px 20px #263b4b18;border-color:var(--teal)!important}
.answer-card:active{cursor:grabbing}
.answer-card.dragging{opacity:.35;transform:scale(.98)}
.answer-card.selected{border:2px solid var(--teal-dark)!important;box-shadow:0 0 0 4px #1fb9a923}
.drag-handle{color:#8a989f;font-weight:900;letter-spacing:-5px;font-size:20px;overflow:hidden}
.drop-zone .answer-card{min-height:52px;margin:0;background:#fff!important}
.drop-zone.correct{border-style:solid;border-color:var(--good);background:#e8f7ef}
.drop-zone.wrong{border-style:solid;border-color:var(--bad);background:#fcedeb}
.match-correct .match-term{border-color:#83c7a9}
.match-wrong .match-term{border-color:#e1a49e}
.activity-actions{display:flex;justify-content:flex-end;margin-top:24px}

html[data-theme="dark"] .match-instructions{background:#163d39;color:var(--ink)}
html[data-theme="dark"] .match-term,
html[data-theme="dark"] .answer-panel{background:#18232d}
html[data-theme="dark"] .drop-zone{border-color:#4a5a65;background:#111b23}
html[data-theme="dark"] .drop-zone.drag-over,
html[data-theme="dark"] .answer-bank.drag-over{background:#153833}
html[data-theme="dark"] .answer-card,
html[data-theme="dark"] .drop-zone .answer-card{background:#25323d!important;color:#edf4f6!important;border-color:#4a5a65!important}
html[data-theme="dark"] .drop-zone.correct{background:#15372a;border-color:#47b77f}
html[data-theme="dark"] .drop-zone.wrong{background:#3d211f;border-color:#dc7168}

@media(max-width:860px){
  .match-layout{grid-template-columns:1fr}
  .answer-panel{position:static;order:-1}
  .answer-bank{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .match-row{grid-template-columns:1fr}
  .answer-bank{grid-template-columns:1fr}
  .match-term,.drop-zone{min-height:62px}
}

/* v2.3 visual learning */
.learning-visuals{margin:2.25rem 0 1.25rem;padding-top:1.75rem;border-top:1px solid var(--border)}
.visual-heading-row{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1rem}
.visual-heading-row h2{margin:.2rem 0 0}.visual-heading-row>p{max-width:32rem;margin:0;color:var(--muted)}
.learning-visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.learning-visual-grid.single{grid-template-columns:minmax(0,760px);justify-content:center}
.learning-visual{margin:0;background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.visual-open{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in;overflow:hidden}
.visual-open img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff;transition:transform .2s ease}
.visual-open:hover img,.visual-open:focus-visible img{transform:scale(1.015)}
.visual-zoom{position:absolute;right:.75rem;bottom:.75rem;width:2rem;height:2rem;display:grid;place-items:center;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-size:1rem}
.learning-visual figcaption{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.1rem;color:var(--text)}
.learning-visual figcaption small{color:var(--muted)}
.visual-dialog{width:min(94vw,1200px);max-height:92vh;padding:1rem;border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.visual-dialog::backdrop{background:rgba(2,6,23,.78);backdrop-filter:blur(4px)}
.visual-dialog img{display:block;max-width:100%;max-height:78vh;margin:auto;object-fit:contain;background:#fff;border-radius:12px}
.visual-dialog p{text-align:center;font-weight:700;margin:.8rem 3rem 0}
.visual-close{position:absolute;right:.75rem;top:.65rem;z-index:2;width:2.5rem;height:2.5rem;padding:0;border-radius:999px;background:rgba(15,23,42,.9);color:#fff;font-size:1.65rem;line-height:1}
@media(max-width:760px){.visual-heading-row{display:block}.visual-heading-row>p{margin-top:.5rem}.learning-visual-grid{grid-template-columns:1fr}.learning-visual-grid.single{display:grid}.visual-dialog{padding:.65rem}.visual-dialog p{margin:.7rem 2.5rem 0}}

/* Inline lesson action forms */
.inline-action-form { display: inline-flex; margin: 0; }
.inline-action-form .button { margin: 0; }
.section-subtitle{margin-top:2.2rem;margin-bottom:.35rem}.muted{color:var(--muted);max-width:900px}.badge{display:inline-flex;width:max-content;padding:.3rem .6rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.08em;background:rgba(31,142,127,.14);color:var(--accent)}.badge.academy{background:rgba(82,99,255,.12);color:var(--primary)}.official-paper{border-top:4px solid var(--accent)}

/* v2.5 multi-card classification activities */
.activity-card.wide-activity{max-width:1100px}
.classify-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.7fr);gap:24px;align-items:start}
.classify-bank-panel{position:sticky;top:96px}
.classify-bank{min-height:150px}
.category-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.category-column{min-width:0;border:1px solid var(--line);border-radius:14px;background:#f7f9fa;overflow:hidden;transition:.2s}
.category-column h3{font-size:16px;line-height:1.3;margin:0;padding:14px 16px;background:#edf3f4;border-bottom:1px solid var(--line)}
.category-drop-zone{min-height:150px;padding:12px;display:flex;flex-direction:column;gap:9px;outline:none;transition:.18s}
.category-drop-zone.drag-over{background:#e4f6f2;box-shadow:inset 0 0 0 3px var(--teal)}
.category-placeholder{display:grid;place-items:center;min-height:72px;border:2px dashed var(--line);border-radius:10px;color:var(--muted);font-size:13px;text-align:center;padding:10px}
.classify-card{width:100%;text-align:left;justify-content:flex-start}
.answer-card.correct{border-color:#43a77b!important;background:#e4f6ed!important;color:#0d6b45!important}
.answer-card.wrong{border-color:#d27369!important;background:#fbe9e7!important;color:#8d3029!important}
.category-column.all-correct{border-color:#43a77b;box-shadow:0 0 0 2px #43a77b22}
.category-column.has-errors{border-color:#d27369;box-shadow:0 0 0 2px #d2736922}
html[data-theme="dark"] .category-column{background:var(--surface-soft)}
html[data-theme="dark"] .category-column h3{background:#1e2b38}
html[data-theme="dark"] .category-drop-zone.drag-over{background:#163d39}
html[data-theme="dark"] .answer-card.correct{background:#163d2d!important;color:#b7f0d1!important}
html[data-theme="dark"] .answer-card.wrong{background:#492522!important;color:#ffd0ca!important}
@media(max-width:900px){.classify-layout{grid-template-columns:1fr}.classify-bank-panel{position:static}.category-board{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.category-board{grid-template-columns:1fr}.category-drop-zone{min-height:110px}}
/* Guided course */
.course-hero{max-width:900px}.course-day-card{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;padding:30px;border:1px solid var(--line);background:var(--card);border-radius:20px;box-shadow:var(--shadow);margin-bottom:30px}.course-day-card h2{margin:.35rem 0}.course-day-progress{min-width:180px}.course-day-progress strong{display:block;font-size:1.5rem}.course-day-progress span{color:var(--muted);font-size:.9rem}.progress-track{height:8px;background:var(--soft);border-radius:999px;overflow:hidden;margin-top:12px}.progress-track i{display:block;height:100%;background:var(--accent);border-radius:inherit}.coming-soon{padding:28px;border:1px dashed var(--line);border-radius:18px}.course-outline{display:grid;gap:14px}.course-outline-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:inherit;text-decoration:none;transition:.18s ease}.course-outline-item:hover{transform:translateY(-2px);border-color:var(--accent)}.course-outline-item.complete{box-shadow:inset 4px 0 var(--success)}.course-outline-item h2{margin:.2rem 0;font-size:1.25rem}.course-outline-item p{margin:0;color:var(--muted)}.course-outline-item small{color:var(--accent);font-weight:700}.course-step{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:800}.course-breadcrumb{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.9rem;margin-bottom:24px}.course-breadcrumb a{color:inherit}.course-unit-head .progress-track{max-width:520px}.course-objectives{padding:24px 28px;border-radius:18px;background:var(--soft);margin-bottom:30px}.course-objectives h2{margin-top:0}.course-objectives ul{columns:2;gap:36px}.course-objectives li{break-inside:avoid;margin:.65rem 0}.guided-unit{display:grid;gap:28px}.guided-section{padding:30px;border:1px solid var(--line);background:var(--card);border-radius:20px}.guided-copy{max-width:900px}.guided-copy h2{margin:.2rem 0 1rem}.guided-copy p{font-size:1.03rem;line-height:1.72;color:var(--text)}.section-number{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:.85rem}.course-visual{margin:24px 0 0}.course-visual img{display:block;width:100%;max-height:660px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px}.course-visual figcaption{text-align:center;color:var(--muted);padding:10px;font-size:.92rem}.course-visual-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.course-practice-block{margin-top:38px}.course-checkpoint{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px;margin-top:36px;border-radius:20px;background:var(--soft);border:1px solid var(--line)}.course-checkpoint h2{margin:.25rem 0}.course-complete-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px}.course-complete-row>div{display:flex;gap:10px}@media(max-width:850px){.course-day-card{grid-template-columns:1fr}.course-objectives ul{columns:1}.course-visual-pair{grid-template-columns:1fr}.course-checkpoint,.course-complete-row{align-items:stretch;flex-direction:column}.course-complete-row>div{flex-wrap:wrap}}@media(max-width:560px){.guided-section{padding:20px}.course-outline-item{grid-template-columns:44px 1fr}.course-outline-item>b{display:none}}

/* v2.8.1 — preserve complete learning diagrams without clipping */
.course-visual,
.course-visual-pair,
.learning-visual,
.visual-open {
  overflow: visible;
}
.course-visual img,
.visual-open img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}


/* Version 2.8.2: accessible theme switch and high-contrast dark palette */
:root{--card:#fff;--text:var(--ink);--border:var(--line);--shadow:0 7px 22px #263b4b0a;--accent:var(--teal-dark);--primary:var(--navy);--soft:#eef3f4;--success:var(--good)}
html[data-theme="dark"]{
  --ink:#f3f7fa;
  --text:#f3f7fa;
  --muted:#c3ced7;
  --teal:#63e6d5;
  --teal-dark:#5bd8c8;
  --accent:#5bd8c8;
  --navy:#172433;
  --primary:#8fa8ff;
  --paper:#0d141c;
  --surface:#17212c;
  --surface-soft:#202d39;
  --card:#17212c;
  --soft:#202d39;
  --line:#435160;
  --border:#435160;
  --orange:#ff9a72;
  --good:#72dfa9;
  --success:#72dfa9;
  --bad:#ff9188;
  --shadow:0 12px 30px rgba(0,0,0,.32);
}
html[data-theme="dark"] body{background:#0d141c;color:#f3f7fa}
html[data-theme="dark"] header{background:#131d27;border-bottom-color:#435160}
html[data-theme="dark"] nav a,html[data-theme="dark"] .link-button{color:#e8eef3}
html[data-theme="dark"] nav a:hover,html[data-theme="dark"] .link-button:hover{color:#63e6d5}
html[data-theme="dark"] .theme-switch{color:#d7e0e7}
html[data-theme="dark"] .theme-switch-track{background:#344252;border-color:#647485}
html[data-theme="dark"] .theme-switch input:checked+.theme-switch-track{background:#3fbfaf;border-color:#63e6d5}
html[data-theme="dark"] .card,html[data-theme="dark"] .stats,html[data-theme="dark"] .table,html[data-theme="dark"] .lesson,html[data-theme="dark"] .activity-card,html[data-theme="dark"] .question-card,html[data-theme="dark"] .topic-results,html[data-theme="dark"] .review-item,html[data-theme="dark"] .auth-card,html[data-theme="dark"] .course-day-card,html[data-theme="dark"] .course-outline-item,html[data-theme="dark"] .guided-section,html[data-theme="dark"] .learning-visual,html[data-theme="dark"] .visual-dialog{background:#17212c;color:#f3f7fa;border-color:#435160;box-shadow:var(--shadow)}
html[data-theme="dark"] .card p,html[data-theme="dark"] .page-head p,html[data-theme="dark"] .hero p,html[data-theme="dark"] .course-outline-item p,html[data-theme="dark"] .course-day-progress span,html[data-theme="dark"] .guided-copy p,html[data-theme="dark"] .learning-visual figcaption small{color:#c3ced7}
html[data-theme="dark"] .secondary{background:#263442!important;color:#f3f7fa!important;border-color:#647485!important}
html[data-theme="dark"] .secondary:hover{background:#314252!important;border-color:#63e6d5!important}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .test-form input,html[data-theme="dark"] .test-form select{background:#101820!important;color:#f3f7fa!important;border-color:#647485!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#9eacb8}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{outline:3px solid rgba(99,230,213,.35);border-color:#63e6d5}
html[data-theme="dark"] .tr.head,html[data-theme="dark"] #sortable li,html[data-theme="dark"] .course-objectives,html[data-theme="dark"] .course-checkpoint,html[data-theme="dark"] .course-step,html[data-theme="dark"] .answer-panel,html[data-theme="dark"] .match-term,html[data-theme="dark"] .category-column,html[data-theme="dark"] .category-column h3{background:#202d39;color:#f3f7fa;border-color:#435160}
html[data-theme="dark"] .option{background:#141e28;border-color:#526171;color:#f3f7fa}
html[data-theme="dark"] .option:hover{border-color:#63e6d5;background:#1c2b35}
html[data-theme="dark"] .option:has(input:checked){background:#173b38;border-color:#63e6d5;box-shadow:0 0 0 2px rgba(99,230,213,.18)}
html[data-theme="dark"] .option>span{color:#7cebdd}
html[data-theme="dark"] .navigator a{background:#17212c!important;color:#f3f7fa!important;border-color:#526171!important}
html[data-theme="dark"] .navigator a.answered{background:#17423d!important;color:#b8fff3!important;border-color:#58cbbb!important}
html[data-theme="dark"] .navigator a.current{outline-color:#63e6d5}
html[data-theme="dark"] .answer-card,html[data-theme="dark"] .drop-zone .answer-card{background:#263442!important;color:#f3f7fa!important;border-color:#647485!important}
html[data-theme="dark"] .answer-card:hover{border-color:#63e6d5!important;background:#2e4050!important}
html[data-theme="dark"] .drop-zone{background:#101820;border-color:#647485;color:#f3f7fa}
html[data-theme="dark"] .drop-placeholder,html[data-theme="dark"] .category-placeholder{color:#b9c6d0}
html[data-theme="dark"] .feedback.good,html[data-theme="dark"] .correct-answer,html[data-theme="dark"] .drop-zone.correct{background:#153b2c;color:#c7f9df;border-color:#55c98b}
html[data-theme="dark"] .feedback.bad,html[data-theme="dark"] .your-answer,html[data-theme="dark"] .drop-zone.wrong{background:#482725;color:#ffd7d3;border-color:#e77e76}
html[data-theme="dark"] .announcement{background:#41371d;color:#fff0bd;border-color:#806e32}
html[data-theme="dark"] .flash.success{background:#153b2c;color:#c7f9df}
html[data-theme="dark"] .flash.warning{background:#41371d;color:#fff0bd}
html[data-theme="dark"] .flash.danger{background:#482725;color:#ffd7d3}
html[data-theme="dark"] .hero-card,html[data-theme="dark"] #timer,html[data-theme="dark"] .result-hero,html[data-theme="dark"] .admin-nav,html[data-theme="dark"] .flash .back{background:#101820;color:#fff}
html[data-theme="dark"] .course-visual img,html[data-theme="dark"] .learning-visual img{background:#fff}
html[data-theme="dark"] a:focus-visible,html[data-theme="dark"] button:focus-visible{outline:3px solid #63e6d5;outline-offset:3px}


/* Version 2.8.3: registration controls and contextual dialog */
.setting-switch-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.setting-switch-row p{margin:.35rem 0 0}.admin-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;white-space:nowrap}.admin-toggle input{position:absolute;opacity:0;pointer-events:none}.admin-toggle-track{position:relative;width:52px;height:29px;border:1px solid #8a98a3;border-radius:999px;background:#c7d0d5;transition:.2s ease}.admin-toggle-thumb{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:.2s ease}.admin-toggle input:checked+.admin-toggle-track{background:var(--accent);border-color:var(--accent)}.admin-toggle input:checked+.admin-toggle-track .admin-toggle-thumb{transform:translateX(23px)}.admin-toggle input:focus-visible+.admin-toggle-track{outline:3px solid rgba(30,141,132,.3);outline-offset:3px}.admin-toggle-state{min-width:24px;font-weight:700}
.context-dialog{width:min(460px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.35)}.context-dialog::backdrop{background:rgba(7,15,22,.65);backdrop-filter:blur(3px)}.context-dialog-body{position:relative;padding:34px}.context-dialog-body h2{margin:0 0 12px}.context-dialog-body p{font-size:1.08rem;margin:0 0 24px}.dialog-close{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;border-radius:50%;background:transparent;color:var(--text);font-size:1.6rem;line-height:1;border:1px solid var(--line)}
html[data-theme="dark"] .admin-toggle-track{background:#344252;border-color:#647485}html[data-theme="dark"] .admin-toggle input:checked+.admin-toggle-track{background:#3fbfaf;border-color:#63e6d5}html[data-theme="dark"] .context-dialog{background:#17212c;color:#f3f7fa;border-color:#526171}
@media(max-width:600px){.setting-switch-row{align-items:flex-start;flex-direction:column}.context-dialog-body{padding:30px 24px}}