*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0f172a;color:#e2e8f0}
.app-header{display:flex;align-items:center;justify-content:center;padding:12px 16px;background:#0b1220;border-bottom:1px solid #1f2937}
.logo{height:42px}
.container{max-width:880px;margin:24px auto;padding:0 16px}
.card{background:#0b1220;border:1px solid #1f2937;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.25);margin-bottom:16px}
.card h1,.card h2{margin:0 0 12px 0}
p{line-height:1.6}
.hidden{display:none}
.btn{background:#3b82f6;border:none;color:white;padding:12px 18px;border-radius:12px;cursor:pointer;font-weight:600;box-shadow:0 6px 16px rgba(59,130,246,.35);transition:transform .06s ease,opacity .2s}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn.secondary{background:#111827;border:1px solid #334155;color:#e2e8f0;box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.chip{padding:12px 14px;border-radius:999px;background:#111827;border:1px solid #334155;color:#e2e8f0;cursor:pointer;font-weight:600}
.chip:hover{border-color:#3b82f6}
.options{display:grid;gap:10px;margin-top:12px}
.option{padding:12px;border:1px solid #334155;border-radius:12px;background:#0a1220;cursor:pointer;font-weight:600;text-align:left}
.option.correct{border-color:#22c55e;background:#05250f}
.option.wrong{border-color:#ef4444;background:#2a0f10}
.row{display:flex;gap:10px;align-items:center}
.space-between{justify-content:space-between}
.footer{text-align:center;opacity:.7;margin:20px 0;font-size:14px}
@media (max-width:480px){.card{padding:16px;border-radius:14px}}