:root { --navy:#12355b; --blue:#1967a8; --ink:#17212b; --muted:#647181; --line:#dce3ea; --bg:#f5f7fa; --danger:#b42318; --success:#137333; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.topbar { height:64px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; color:#fff; background:var(--navy); }
.brand { color:inherit; font-size:1.2rem; font-weight:750; text-decoration:none; }.topbar-actions { display:flex; gap:1rem; align-items:center; font-size:.92rem; }
.language,.link-button { color:inherit; background:transparent; border:0; cursor:pointer; font:inherit; }.language { padding:.25rem .4rem; border:1px solid #83a7ce; border-radius:4px; }
.page,.card { max-width:980px; margin:2.5rem auto; padding:0 1.25rem; }.card { max-width:480px; padding:2rem; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px rgba(12,32,52,.06); }
.login-card { margin-top:8vh; }.centered { text-align:center; }.muted,.eyebrow { color:var(--muted); }.eyebrow { margin:0; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
h1 { margin:.25rem 0 1.4rem; font-size:clamp(1.7rem,4vw,2.2rem); } h2 { margin:.25rem 0 .65rem; font-size:1.25rem; }
label { display:block; margin:.9rem 0; font-weight:600; } input,textarea { display:block; width:100%; margin-top:.35rem; padding:.7rem; color:inherit; border:1px solid #aeb9c4; border-radius:6px; background:#fff; font:inherit; }
input[type="radio"],input[type="checkbox"] { display:inline-block; width:auto; margin:0 .4rem 0 0; } input[type="number"] { display:inline-block; width:5.25rem; margin:.1rem 0 .1rem .5rem; }
button,.button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:.55rem .95rem; color:var(--ink); border:1px solid #9da9b6; border-radius:6px; background:#fff; cursor:pointer; font:600 .95rem inherit; text-decoration:none; }
button:disabled { opacity:.55; cursor:not-allowed; }.primary { color:#fff; border-color:var(--blue); background:var(--blue); }.wide { width:100%; }.error { color:var(--danger); }.small { margin:.35rem 0; font-size:.85rem; }.required { margin-left:.25rem; color:var(--danger); }
.assignment { display:flex; gap:1rem; align-items:center; justify-content:space-between; margin:1rem 0; padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:10px; }.assignment h2 { margin:.35rem 0; }.assignment p { margin:.3rem 0; }
.badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#e7edf4; color:#29445f; font-size:.75rem; font-weight:700; }.badge.in_progress { background:#e7f0fb; color:#075da3; }.badge.finished { background:#e5f6ea; color:var(--success); }.badge.unavailable { background:#f5e8e8; color:var(--danger); }
.progress { overflow:hidden; width:min(420px,100%); height:7px; margin:.75rem 0 .25rem; border-radius:999px; background:#e5eaf0; }.progress span { display:block; height:100%; background:var(--blue); }
.back { color:var(--blue); text-decoration:none; }.section-card { margin:1.5rem 0; padding:1.5rem; background:#fff; border:1px solid var(--line); border-radius:10px; }.question { margin:1.5rem 0; padding-top:1.25rem; border-top:1px solid var(--line); }.question.invalid { padding-left:.7rem; border-left:3px solid var(--danger); }.question-text { margin:0 0 .65rem; }.question-number { color:var(--blue); font-weight:750; }.options { display:grid; gap:.5rem; }.options label { margin:0; font-weight:400; }.feedback { padding:.85rem; background:#f4f8fc; border-radius:6px; }.ranking { display:grid; gap:.4rem; }.ranking label { margin:0; font-weight:400; }
.matrix { width:100%; border-collapse:collapse; font-size:.92rem; }.matrix th,.matrix td { padding:.65rem; border:1px solid var(--line); text-align:center; }.matrix th:first-child,.matrix td:first-child { text-align:left; }.matrix input { margin:0; }.matrix tr.invalid td { border-top-color:var(--danger); border-bottom-color:var(--danger); }.matrix tr.invalid td:first-child { border-left:3px solid var(--danger); }.question,.matrix tr { scroll-margin-top:1rem; }.completion-status { margin:1.5rem 0 .75rem; padding:.8rem 1rem; border-left:4px solid #b7791f; background:#fff8e7; font-weight:600; }.completion-status.ready { border-color:var(--success); background:#eaf7ed; color:var(--success); }.actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end; margin:1.5rem 0 4rem; }.notice { margin:1rem 0; padding:.75rem 1rem; border-left:4px solid var(--blue); background:#eaf3fb; }.notice.success { border-color:var(--success); background:#eaf7ed; }.check { width:64px; height:64px; margin:0 auto 1rem; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--success); font-size:2rem; }
@media (max-width:640px) { .topbar { padding:0 1rem; }.topbar-actions span { display:none; }.page,.card { margin:1.25rem auto; }.assignment { align-items:flex-start; flex-direction:column; }.assignment button { width:100%; }.section-card { padding:1rem; overflow-x:auto; }.matrix { min-width:640px; }.actions { justify-content:stretch; }.actions button { flex:1 1 100%; } }