:root { color-scheme: light; --ink:#16233e; --muted:#64728b; --purple:#4c47bf; --purple-hover:#3d389d; --border:#e1e7f0; --bg:#f7f9fd; --white:#ffffff; --bluebg:#eff2ff; --green:#197246; --orange:#905e12; --red:#a4343b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); line-height:1.55; }
.topbar { background:white; border-bottom:1px solid var(--border); padding:16px max(22px, calc((100% - 900px)/2)); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { font-weight:750; letter-spacing:-.025em; display:flex; align-items:center; gap:11px; white-space:nowrap; }
.brand-icon { background:#eceaff; border-radius:11px; color:#4542b2; padding:7px 10px; font-weight:800; }
.top-note { font-size:13px; color:var(--muted); }
.container { max-width:900px; padding:40px 22px 80px; margin:auto; min-height:65vh; }
.hero { background:white; border:1px solid var(--border); border-radius:20px; padding:35px; }
h1 { font-size:clamp(29px, 4.5vw, 40px); letter-spacing:-.035em; line-height:1.17; margin:12px 0 15px; }
h2 { font-size:24px; margin:8px 0; letter-spacing:-.02em; }
p { margin:8px 0 14px; }
.eyebrow { color:var(--purple); font-size:12px; text-transform:uppercase; font-weight:800; letter-spacing:.095em; }
.muted,.section-heading p,.footnote { color:var(--muted); }
.section-heading { margin-bottom:26px; }
.panel,.question-card,.feedback-card { border:1px solid var(--border); background:var(--white); box-shadow:0 6px 30px rgba(45,56,85,.035); border-radius:15px; padding:25px; }
.stack { display:flex; flex-direction:column; gap:19px; }
.stack > * { margin-top:0; margin-bottom:0; }
.two-col { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
label { font-weight:650; font-size:14px; display:block; }
input,textarea,select { width:100%; display:block; border:1px solid #cad3e2; border-radius:10px; background:white; padding:12px 13px; margin-top:7px; color:var(--ink); font:inherit; font-size:15px; }
textarea { resize:vertical; min-height:74px; }
input:focus,select:focus,textarea:focus { outline:3px solid #e1e0ff; border-color:var(--purple); }
small { font-size:12px; color:var(--muted); font-weight:400; display:block; margin-top:5px; }
button { cursor:pointer; background:white; border:1px solid #cad3e2; color:var(--ink); border-radius:10px; font:inherit; font-weight:650; padding:11px 17px; }
button:hover { background:#f4f5ff; }
button:disabled { opacity:.55; cursor:wait; }
button.primary { background:var(--purple); border-color:var(--purple); color:white; padding:15px 20px; }
button.primary:hover { background:var(--purple-hover); }
button.wide { width:100%; }
.alert { color:#9c2732; border:1px solid #f0c9cd; border-radius:11px; background:#fff0f1; padding:13px 15px; }
.share-panel { margin-top:20px; }
.copy-row { display:flex; align-items:end; gap:10px; }
.copy-row input { min-width:0; flex:1; }
.copy-row button { flex-shrink:0; }
.actions { display:flex; flex-wrap:wrap; gap:15px; align-items:center; margin-top:14px; font-size:14px; }
a { color:var(--purple); text-underline-offset:3px; }
.info-line { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.info-line span { font-size:12px; background:#ecefff; border-radius:999px; padding:5px 11px; color:#514ca6; font-weight:650; }
#questions { display:flex; flex-direction:column; gap:16px; }
.question-head { display:flex; gap:12px; align-items:flex-start; }
.number { background:var(--bluebg); color:var(--purple); border-radius:9px; padding:4px 11px; flex-shrink:0; font-weight:800; }
.question-text { white-space:pre-wrap; overflow-wrap:anywhere; margin:2px 0 14px; font-size:16px; font-weight:600; }
.question-card textarea { min-height:88px; }
.results { margin-top:38px; border-top:1px solid var(--border); padding-top:25px; }
.results-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; }
.summary { padding:17px 20px; border:1px solid #dce4fb; background:#edf3ff; border-radius:13px; margin-bottom:18px; white-space:pre-wrap; overflow-wrap:anywhere; }
.feedback-card { padding:20px; }
.feedback-card .fb-title { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:700; }
.feedback-card p { white-space:pre-wrap; overflow-wrap:anywhere; }
.status { font-size:12px; font-weight:750; border-radius:999px; padding:4px 10px; }
.status.correct { color:var(--green); background:#e8f8ef; }
.status.partial { color:var(--orange); background:#fff4df; }
.status.incorrect { color:var(--red); background:#ffe9eb; }
.status.unanswered { color:#506078; background:#ecf0f5; }
.corrected { margin-top:12px; padding:13px; background:#eff9f4; border-left:3px solid #2c9160; border-radius:6px; }
.caption { font-size:12px; color:var(--muted); font-weight:650; margin-bottom:3px; }
.footnote { font-size:12px; margin-top:20px; }
.center { text-align:center; }
.footer { text-align:center; font-size:12px; color:#8490a7; padding:25px; border-top:1px solid var(--border); }
[hidden] { display:none!important; }
@media(max-width:630px) { .topbar { padding:12px 16px; } .top-note { display:none; } .container { padding:24px 14px 55px; } .two-col { grid-template-columns:1fr; } .panel,.question-card,.feedback-card { padding:17px; } .copy-row { flex-direction:column; align-items:stretch; } .copy-row input { width:100%; } .results-head { align-items:start; } h2 { font-size:21px; } }
@media print { body { background:white; } .topbar,.footer,form,#check-progress,#print-button,.footnote { display:none!important; } .container { padding:0; max-width:none; } .results { border:none; margin:0; } .feedback-card { break-inside:avoid; box-shadow:none; } }