*{box-sizing:border-box}html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f8fafc;color:#111}
.container{max-width:960px;margin:24px auto;padding:0 16px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand{font-weight:700}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.question{font-size:1.15rem;margin:0 0 12px}
.options{display:grid;gap:10px;margin:12px 0}
.option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer}
.option input{margin-top:3px}
.option:hover{background:#f3f4f6}
.actions{display:flex;align-items:center;margin-top:12px}
.spacer{flex:1}
.btn{appearance:none;border:none;background:#1d4ed8;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.ghost{background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe}
.btn.primary{background:#2563eb}
.error{position:fixed;left:0;right:0;bottom:0;background:#fee2e2;color:#991b1b;padding:12px 16px;border-top:2px solid #ef4444;font-size:14px}
.hidden{display:none}
.note{font-size:.9rem;color:#555;margin-top:10px}
.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:8px 0 12px}
.progress>div{height:8px;background:#60a5fa;width:0%}
.table-wrap{overflow-x:auto;margin-top:12px}
table.qi{width:100%;border-collapse:collapse;font-size:.95rem}
table.qi th,table.qi td{border:1px solid #e5e7eb;padding:8px;text-align:left}
table.qi thead th{background:#f3f4f6}
table.qi tbody tr.hi{background:#eef2ff}
.mt{margin-top:16px}
kbd{background:#111;color:#fff;padding:2px 6px;border-radius:6px;font-size:.75rem}