:root { color-scheme: dark; --bg:#101826; --panel:#172235; --line:#2c3b54; --text:#eef3fb; --muted:#aebbd0; --accent:#5dd9b6; --bad:#ff8e8e; --good:#7ce0a9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#0c1422,#172844); color:var(--text); font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.shell { width:min(960px,calc(100% - 32px)); margin:42px auto; }
header { display:flex; justify-content:space-between; gap:20px; align-items:start; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(2rem,5vw,3rem); margin-bottom:4px; } h2 { font-size:1.2rem; } .eyebrow { margin:0; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; font-weight:700; } .subtle { color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0; }.stats div,.stats .stat-card,.panel,.toolbar { border:1px solid var(--line); background:rgba(23,34,53,.92); border-radius:14px; }.stats div,.stats .stat-card { padding:14px 16px; text-align:left; color:var(--text); }.stats .stat-card { text-decoration:none; }.stats .stat-card:hover { border-color:var(--bad); filter:none; }.stats strong,.stats span { display:block; }.stats strong { font-size:1.55rem; }.stats span { color:var(--muted); font-size:.82rem; }
.toolbar { display:flex; gap:16px; align-items:end; padding:16px; margin-bottom:18px; }.toolbar label { display:grid; gap:5px; color:var(--muted); font-size:.82rem; } select,input,button { border-radius:9px; border:1px solid transparent; padding:10px 13px; font:inherit; } select:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #fff; outline-offset:2px; } select,input { background:#0f1a2b; color:var(--text); border-color:var(--line); } button { background:var(--accent); color:#09241e; font-weight:750; cursor:pointer; } button:hover { filter:brightness(1.08); } button:disabled { opacity:.55; cursor:not-allowed; } .ghost { background:transparent; color:var(--text); border-color:var(--line); }
.question-lookup { margin-top:-6px; }.lookup-error { align-self:center; margin:0; color:var(--bad); font-size:.9rem; }
.panel { padding:24px; margin:18px 0; }.warning { color:#ffd18a; }.hidden { display:none !important; }.question-meta { display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:.88rem; }.badge { color:#ffd18a; border:1px solid #765f32; border-radius:999px; padding:1px 8px; }.prompt-text { white-space:pre-wrap; font:inherit; margin:20px 0; }.question-table-scroll { overflow-x:auto; margin:16px 0 22px; border:1px solid var(--line); border-radius:10px; }.question-table { width:100%; min-width:520px; border-collapse:collapse; background:#101b2c; }.question-table th,.question-table td { padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; vertical-align:top; white-space:pre-line; }.question-table th:last-child,.question-table td:last-child { border-right:0; }.question-table tbody tr:last-child td { border-bottom:0; }.question-table th { background:#26364e; color:#fff; font-weight:750; }.question-table tbody tr:nth-child(even) { background:#142238; }.visual { width:100%; max-height:680px; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:white; margin:0 0 18px; }
fieldset { border:0; margin:0; padding:0; display:grid; gap:10px; } legend { margin-bottom:10px; color:var(--muted); }.choice { display:flex; align-items:flex-start; gap:12px; padding:13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }.choice:has(input:checked) { border-color:var(--accent); background:#14362e; }.choice.correct { border-color:var(--good); background:#173a2c; }.choice.incorrect { border-color:var(--bad); background:#401f2a; }.choice input { margin-top:5px; }.choice b { min-width:22px; } textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:10px; background:#0f1a2b; color:var(--text); padding:12px; font:inherit; }.manual-note { margin:0; color:#ffd18a; font-size:.9rem; }.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.result { margin-top:18px; padding:13px; border-radius:9px; }.result.good { background:#173a2c; color:#c5f7d6; }.result.bad { background:#401f2a; color:#ffd0d0; }.source-note { color:var(--muted); font-size:.92rem; }
.result.info { background:#17304a; color:#d5eaff; }
.drag-board { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(280px,1.1fr); gap:24px; align-items:start; }
.drag-bank,.drop-targets { display:grid; gap:10px; }
.drag-card,.drop-target { width:100%; text-align:left; color:var(--text); background:#0f1a2b; border:1px solid var(--line); font-weight:600; }
.drag-card { cursor:grab; }.drag-card:active { cursor:grabbing; }.drag-card.selected { border-color:var(--accent); background:#14362e; }
.drop-row { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(180px,1.3fr); gap:10px; align-items:center; }.drop-row>span { color:var(--muted); text-align:right; }
.drop-target { min-height:48px; border-style:dashed; color:var(--muted); }.drop-target.over,.drop-target.filled { border-color:var(--accent); background:#14362e; color:var(--text); }
.dropdown-fields { display:grid; gap:14px; }.dropdown-fields label { display:grid; grid-template-columns:minmax(120px,.45fr) minmax(240px,1.55fr); gap:12px; align-items:center; color:var(--muted); }.question-select { width:100%; }
.statement-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:10px; }.statement-row + .statement-row { margin-top:10px; }
.answer-explanation { margin-top:14px; padding-top:12px; border-top:1px solid currentColor; }.answer-explanation p { margin:.45rem 0; }.answer-explanation ul { margin:.35rem 0 0; padding-left:1.2rem; }
.records-heading { display:flex; align-items:start; justify-content:space-between; gap:18px; }.records-heading h2 { margin-bottom:4px; }.wrong-list { display:grid; gap:12px; }.wrong-record { padding:16px; border:1px solid var(--line); border-radius:12px; background:#101b2c; }.wrong-record h3 { margin:0 0 10px; font-size:1rem; }.wrong-record-metrics { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:.9rem; }.wrong-record-metrics strong { color:var(--text); }.wrong-record details { margin-top:12px; }.wrong-record summary { cursor:pointer; color:var(--accent); font-weight:700; }.attempt-history { margin:10px 0 0; padding-left:1.4rem; color:var(--muted); }.attempt-history li + li { margin-top:5px; }.legacy-note { margin:10px 0 0; font-size:.86rem; }
.button-link { display:inline-block; border-radius:9px; border:1px solid var(--line); padding:10px 13px; color:var(--text); text-decoration:none; font-weight:750; }.button-link:hover { border-color:var(--accent); }.records-page-header { align-items:center; margin-bottom:24px; }
@media(max-width:640px) { .shell { width:min(100% - 20px,960px); margin:20px auto; } header,.toolbar,.drag-board { display:grid; grid-template-columns:1fr; }.stats { grid-template-columns:repeat(2,1fr); } .panel { padding:18px; }.drop-row,.dropdown-fields label { grid-template-columns:1fr; }.drop-row>span { text-align:left; } }