:root { --ink:#182b38; --muted:#526774; --paper:#f5f1e8; --surface:#fffdf8; --line:#d3ddd7; --teal:#176b62; --teal-dark:#104e48; --coral:#b9472e; --coral-soft:#fff0e9; --gold:#d5a83d; font-family:"Trebuchet MS",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 8% 12%,#fff4d9 0,transparent 30%),linear-gradient(135deg,#f5f1e8,#e4efeb); font-size:16px; } button { font:inherit; -webkit-tap-highlight-color:transparent; }
.app-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:34px 0 52px; } .app-header,.action-row,.results-actions { display:flex; align-items:center; justify-content:space-between; gap:24px; } .app-header { margin-bottom:42px; }
.eyebrow,.kicker { margin:0 0 8px; color:var(--teal); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; } h1,h2 { margin:0; letter-spacing:0; } h1 { font-size:clamp(2rem,4vw,3.4rem); line-height:1; } h2 { font-size:clamp(1.7rem,3vw,2.45rem); }
.progress-block { width:230px; } .progress-block span { display:block; margin-bottom:8px; text-align:right; color:var(--muted); font-size:.9rem; font-weight:700; } .progress-track { height:8px; overflow:hidden; border-radius:99px; background:#d3dfda; } .progress-bar { width:20%; height:100%; background:var(--coral); transition:width 240ms ease; }
.instruction { margin:18px 0 28px; color:var(--muted); line-height:1.55; }.series-list { display:grid; grid-template-columns:1fr; gap:18px; }.series-card { padding:16px 18px 18px; border:1px solid var(--line); border-radius:10px; background:rgba(255,253,248,.9); box-shadow:0 14px 34px rgba(24,43,56,.09); }.series-card h3 { margin:0 0 6px; font-size:1.05rem; }.series-label { color:var(--muted); font-size:.88rem; }.choice-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }.choice { position:relative; display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 12px; border:2px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); cursor:pointer; font-weight:700; }.choice:has(input:checked) { border-color:var(--teal); background:#e5f2ee; }.choice input { width:18px; height:18px; accent-color:var(--teal); }.choice:focus-within { outline:3px solid rgba(213,168,61,.4); outline-offset:2px; }
.action-row { margin-top:26px; }.form-status { min-height:24px; margin:0; color:var(--coral-dark); }.primary-button,.secondary-button { min-height:48px; padding:0 18px; border-radius:7px; font-weight:700; cursor:pointer; }.primary-button { border:0; color:#fffaf5; background:var(--coral); }.primary-button:hover,.primary-button:focus-visible { background:#8f3322; outline:3px solid rgba(185,71,46,.25); }.secondary-button { border:2px solid var(--teal); color:var(--teal-dark); background:transparent; }.secondary-button:hover,.secondary-button:focus-visible { color:#fff; background:var(--teal); outline:3px solid rgba(23,107,98,.25); }
.results-view { animation:rise-in 360ms ease both; }.results-view > h2 { margin-bottom:10px; } #score-summary { margin:0 0 24px; color:var(--muted); font-size:1.1rem; }.results-list { display:grid; gap:12px; margin-bottom:30px; }.result-item { display:grid; grid-template-columns:48px 1fr auto; gap:12px 16px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-left:5px solid var(--teal); border-radius:8px; background:var(--surface); }.result-item.is-wrong { border-left-color:var(--coral); }.result-number { color:var(--muted); font-weight:700; }.result-title { font-weight:700; }.result-detail { margin-top:3px; color:var(--muted); font-size:.9rem; }.result-notation { min-height:190px; margin-top:10px; overflow-x:auto; }.result-mark { font-size:1.35rem; font-weight:700; }.result-mark.correct { color:var(--teal-dark); }.result-mark.wrong { color:var(--coral); }.scorm-status { color:var(--muted); font-size:.85rem; }.app-footer { padding:0 20px 24px; text-align:center; color:var(--muted); font-size:.8rem; } [hidden] { display:none!important; } @keyframes rise-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:700px) { .app-shell { width:min(100% - 24px,620px); padding-top:22px; } .app-header { align-items:flex-start; flex-direction:column; margin-bottom:32px; }.progress-block { width:100%; }.progress-block span { text-align:left; }.series-list { grid-template-columns:1fr; }.action-row,.results-actions { align-items:stretch; flex-direction:column; }.primary-button,.secondary-button { width:100%; } }