:root{--bg: #0f1419;--surface: #1a2332;--surface2: #243044;--text: #e6edf3;--text-muted: #8b9cb3;--accent: #3b82f6;--accent-hover: #2563eb;--correct: #22c55e;--incorrect: #ef4444;--pass: #22c55e;--fail: #ef4444;--radius: 12px;--font-sans: "DM Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}#app{min-height:100vh}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}.screen{min-height:100vh;display:flex;flex-direction:column;padding:1.5rem;max-width:720px;margin:0 auto}.home-screen,.hazard-intro-screen,.quick-select-screen{justify-content:center}.home-content,.results-content{width:100%}.title{font-size:1.75rem;font-weight:700;margin:0 0 .25rem;letter-spacing:-.02em}.subtitle{color:var(--text-muted);margin:0 0 2rem;font-size:1rem}.card-grid{display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.card-grid{grid-template-columns:repeat(4,1fr)}}.card{display:block;background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius);padding:1.5rem;color:inherit;text-decoration:none;transition:border-color .2s,transform .15s}.card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;color:inherit}.card-icon{font-size:2rem;display:block;margin-bottom:.75rem}.card h2{font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.card p{margin:0;font-size:.875rem;color:var(--text-muted)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;font-size:.875rem}.header .progress{color:var(--text-muted);font-variant-numeric:tabular-nums}.question-screen{padding-bottom:5rem}.question-content{flex:1}.question-text{font-size:1.125rem;font-weight:500;margin-bottom:1rem}.question-image{margin-bottom:1.25rem;overflow:hidden}.question-image img{display:block;max-width:100%;height:auto}.answers{display:flex;flex-direction:column;gap:.5rem}.answer{display:flex;align-items:flex-start;gap:.75rem;width:100%;padding:.875rem 1rem;background:var(--surface);border:2px solid var(--surface2);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:.9375rem;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}.answer:hover:not(.disabled){border-color:var(--accent);background:var(--surface2)}.answer.selected{border-color:var(--accent);background:var(--surface2)}.answer.correct{border-color:var(--correct);background:#22c55e1f}.answer.incorrect{border-color:var(--incorrect);background:#ef44441f}.answer.disabled{cursor:default;opacity:.9}.answer-letter{flex-shrink:0;width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:6px;font-weight:600;font-size:.75rem}.answer-text{flex:1}.explanation{margin-top:1.25rem;padding:1rem;background:var(--surface);border-radius:var(--radius);font-size:.9375rem;color:var(--text-muted)}.explanation.hidden{display:none}.explanation strong{color:var(--text)}.question-footer{position:fixed;bottom:0;left:0;right:0;padding:1rem 1.5rem;background:var(--bg);border-top:1px solid var(--surface2);display:flex;justify-content:space-between;gap:1rem;max-width:720px;margin:0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;border-radius:8px;font-family:inherit;font-size:.9375rem;font-weight:500;cursor:pointer;border:none;text-decoration:none;transition:background .2s,color .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--surface2);color:var(--text)}.btn-secondary:hover:not(:disabled){background:var(--surface)}.results-screen{justify-content:center;text-align:center}.result-score{font-size:1.25rem;margin:.5rem 0}.result-pass{color:var(--text-muted);margin:.5rem 0}.result-time{font-size:.875rem;color:var(--text-muted);margin:1rem 0}.results-actions{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.results-actions .btn{min-width:120px}.hazard-intro-screen .results-actions{margin-top:1rem}.hazard-intro-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.5rem 0}.hazard-intro-actions .card{display:block;text-align:left;padding:1.25rem;text-decoration:none;color:inherit;border-radius:var(--radius);background:var(--surface);border:1px solid var(--surface2);transition:border-color .15s,box-shadow .15s}.hazard-intro-actions .card:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.2)}.hazard-intro-actions .card-icon{font-size:1.5rem;display:block;margin-bottom:.5rem}.hazard-intro-actions .card h2{font-size:1.125rem;margin:0 0 .5rem}.hazard-intro-actions .card p{font-size:.875rem;color:var(--text-muted);margin:0}.hazard-test-intro-content .hazard-test-rules{text-align:left;max-width:42rem;margin:1rem 0}.hazard-test-intro-content .hazard-test-rules p,.hazard-test-intro-content .hazard-test-rules ul{margin:.75rem 0}.hazard-test-intro-content .hazard-test-rules ul{padding-left:1.5rem}.hazard-test-intro-content .hazard-test-rules li{margin:.35rem 0}.hazard-test-screen .hazard-test-header{display:flex;justify-content:center;padding:.75rem 1rem}.hazard-test-screen .hazard-test-header .progress{font-weight:600}.hazard-test-video-wrap{cursor:pointer}.hazard-test-video{display:block;width:100%;max-height:65vh}.hazard-test-start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;color:#fff;font-size:1.125rem;font-weight:500;pointer-events:none}.hazard-test-start-overlay[hidden]{display:none}.hazard-test-actions{justify-content:center}.hazard-test-actions .btn:disabled{opacity:.6;cursor:not-allowed}.hazard-test-results-screen .result-score.hazard-result-score{font-size:1.25rem;margin:.5rem 0}.hazard-test-results-screen .result-pass-mark{color:var(--text-muted);margin:.25rem 0}.hazard-test-results-screen .result-message{margin:1rem 0}.hazard-instruction{margin:.5rem 0 .75rem;font-size:.9375rem;color:var(--text-muted)}.hazard-instruction.hazard-no-scoring{font-style:italic}.hazard-screen .hazard-video-wrap{margin:1rem 0;border-radius:var(--radius);overflow:hidden;background:#000;position:relative;cursor:pointer}.hazard-video{display:block;width:100%;max-height:60vh}.hazard-feedback{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);padding:.5rem 1rem;border-radius:var(--radius);font-size:.9375rem;font-weight:500;pointer-events:none;background:#000000bf;color:#fff;transition:opacity .2s}.hazard-feedback[hidden]{opacity:0;visibility:hidden}.hazard-feedback-good{background:#228b22e6}.hazard-feedback-miss{background:#b45050e6}.hazard-feedback-muted{background:#505050e6}.hazard-score-summary{font-size:.9375rem;color:var(--text-muted);margin-top:.5rem}.hazard-score-summary[hidden]{display:none}.hazard-actions{display:flex;gap:1rem;margin-top:1rem}.quick-select-screen .subtitle{margin-bottom:1rem}.category-actions{display:flex;gap:.5rem;margin-bottom:1rem}.btn-sm{padding:.375rem .75rem;font-size:.8125rem}.category-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;max-height:40vh;overflow-y:auto}.category-check{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--surface);border-radius:8px;cursor:pointer;border:1px solid transparent}.category-check:hover{border-color:var(--surface2)}.category-check input{flex-shrink:0;accent-color:var(--accent)}.category-label{flex:1;font-size:.9375rem}.category-count{font-size:.8125rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.quick-selected-count,.quick-select-screen .results-actions{margin-top:1rem}