:root { --ink:#172033; --muted:#61708a; --line:#dbe3ee; --sea:#0678b7; --sea-dark:#075e92; --paper:#fff; --page:#eaf4fa; --good:#137a43; --bad:#bb2d3b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--page); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { border:0; border-radius:10px; padding:12px 16px; color:#fff; background:var(--sea); cursor:pointer; font-weight:750; }
button:hover { background:var(--sea-dark); }
button:focus-visible,input:focus-visible { outline:3px solid rgba(6,120,183,.28); outline-offset:2px; }
input { width:100%; padding:12px 14px; color:var(--ink); border:1px solid #bbc9d8; border-radius:10px; background:#fff; }
.quiz-shell { display:grid; min-height:100vh; place-items:center; padding:20px; }
.quiz-card { width:min(100%,920px); padding:clamp(20px,4vw,40px); background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 55px rgba(19,48,74,.12); }
.quiz-header { margin-bottom:24px; }.eyebrow { margin:0 0 4px; color:var(--sea-dark); font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { margin:0; line-height:1.15; } h1 { font-size:clamp(2rem,6vw,3.3rem); } h2 { font-size:clamp(1.35rem,4vw,1.9rem); }.intro,.muted { color:var(--muted); }.intro { margin:12px 0 0; }
.welcome { max-width:520px; }.welcome p { color:var(--muted); }.welcome label,.reset-form label,#service-login label { display:block; margin:18px 0 7px; font-weight:700; }.welcome-actions,.learning-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }.service-entry { margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }.service-entry .muted { margin:4px 0 0; font-size:.9rem; }.service-export { margin-top:22px; padding:18px; border-radius:12px; background:#eef8f2; }.service-export h3 { margin:0; }.service-export p { color:var(--muted); }.service-export button { margin:4px 6px 0 0; }
.secondary-button { color:var(--sea-dark); background:#e2f1f9; }.secondary-button:hover { background:#cce8f5; }.text-button { padding:5px 0; color:var(--sea-dark); background:transparent; text-decoration:underline; }.text-button:hover { color:var(--sea-dark); background:transparent; }
.status-row { display:flex; justify-content:space-between; gap:16px; margin:0 0 12px; color:var(--muted); font-size:.93rem; font-weight:750; }.question { margin:0 0 5px; font-size:clamp(1.2rem,3.7vw,1.6rem); font-weight:800; }.map-instruction { margin:0 0 12px; color:var(--muted); }
.map-frame { position:relative; overflow:hidden; border:1px solid #a9c9dc; border-radius:14px; background:#8bd1ef; line-height:0; touch-action:manipulation; }.map-frame:not(.learning-map) { cursor:crosshair; }.map-frame img { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.marker { position:absolute; width:28px; height:28px; border:4px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 1px 7px rgba(0,0,0,.45); pointer-events:none; }.user-marker { background:var(--bad); }.correct-marker { background:var(--good); }.correct-marker::after { content:""; position:absolute; inset:-10px; border:2px solid var(--good); border-radius:50%; opacity:.8; }
.feedback { min-height:28px; margin-top:14px; font-weight:800; }.feedback.correct { color:var(--good); }.feedback.wrong { color:var(--bad); }.feedback.learning { color:var(--sea-dark); }.results { margin-top:36px; padding-top:22px; border-top:1px solid var(--line); }.results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.results-columns { display:flex; justify-content:space-between; gap:14px; margin-top:12px; padding:0 4px; color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.results-list { margin:3px 0 0; padding-left:26px; }.results-list li { padding:8px 4px; border-bottom:1px solid #eef2f6; }.result-row { display:flex; justify-content:space-between; gap:14px; }.result-name { font-weight:750; }.result-meta { color:var(--muted); white-space:nowrap; }.reset-form { max-width:400px; margin-top:14px; }.reset-controls { display:flex; gap:8px; }.reset-feedback { min-height:22px; margin:7px 0 0; color:var(--bad); font-weight:700; }.summary { text-align:center; }.summary p:not(.eyebrow) { color:var(--muted); }.summary button { margin:8px 4px 0; }.mistake-review { margin:24px 0; padding-top:20px; border-top:1px solid var(--line); text-align:left; }.mistake-review h3 { margin:0; text-align:center; }.summary-map { margin-top:12px; }.summary-marker { position:absolute; display:grid; width:25px; height:25px; place-items:center; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); color:#fff; background:var(--bad); box-shadow:0 1px 6px rgba(0,0,0,.45); font-size:.78rem; font-weight:850; line-height:1; pointer-events:none; }.mistakes-list { margin:14px 0; padding-left:30px; }.mistakes-list li { padding:3px 0; font-weight:700; }.no-mistakes { margin:20px 0; color:var(--good)!important; font-weight:800; }.rematch-note { margin:6px 0 0; color:var(--muted); font-size:.88rem; }
@media (max-width:560px) { .quiz-shell { padding:10px; align-items:start; }.quiz-card { border-radius:15px; }.status-row { font-size:.84rem; }.marker { width:24px; height:24px; border-width:3px; }.summary-marker { width:22px; height:22px; font-size:.7rem; }.learning-actions { display:grid; grid-template-columns:1fr 1fr; }.learning-actions button { padding:12px 7px; }.welcome-actions { display:grid; }.welcome-actions button { width:100%; }.reset-controls { flex-direction:column; }.result-row { align-items:flex-start; flex-direction:column; gap:1px; }.result-meta { white-space:normal; } }