:root{
  --ungu:#46178f; --ungu2:#5b21b6; --merah:#e21b3c; --biru:#1368ce;
  --kuning:#d89e00; --hijau:#26890c; --bg:#1a0a3c; --card:#2b1655;
  --border:rgba(255,255,255,.14); --muted:rgba(255,255,255,.6);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:#fff;min-height:100vh}
a{color:#c4b5fd;text-decoration:none}
.container{max-width:980px;margin:0 glm-5.3-flash;padding:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:16px}
.btn{display:inline-block;border:0;border-radius:10px;padding:12px 20px;font-size:16px;font-weight:700;cursor:pointer;background:var(--ungu2);color:#fff}
.btn:hover{filter:brightness(1.15)}
.btn-red{background:var(--merah)} .btn-green{background:var(--hijau)} .btn-blue{background:var(--biru)} .btn-ghost{background:transparent;border:1px solid var(--border)}
.btn-sm{padding:7px 12px;font-size:13px}
input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:#fff;font-size:15px}
label{display:block;margin:10px 0 5px;font-size:13px;color:var(--muted)}
h1,h2,h3{margin:0 0 12px}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 8px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;background:rgba(255,255,255,.12)}
.jawap-btn{width:100%;padding:20px;border:0;border-radius:12px;font-size:20px;font-weight:800;color:#fff;cursor:pointer;margin-bottom:10px}
.jawap-merah{background:var(--merah)} .jawap-biru{background:var(--biru)} .jawap-kuning{background:var(--kuning)} .jawap-hijau{background:var(--hijau)}
.jawap-btn.dim{opacity:.35;pointer-events:none}
.jawap-btn.betul{outline:4px solid #fff}
.timerbar{height:8px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin:10px 0}
.timerbar>div{height:100%;background:#fff;width:100%}
.nav{display:flex;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(26,10,60,.92);backdrop-filter:blur(8px);z-index:5}
.nav a{font-weight:600;color:#fff}
.nav .spacer{flex:1}
.lb-row{display:flex;justify-content:space-between;padding:9px 12px;border-radius:9px;margin-bottom:6px;background:rgba(255,255,255,.06)}
.lb-row.top{background:linear-gradient(90deg,var(--kuning),transparent)}
.big-pin{font-size:64px;font-weight:900;letter-spacing:8px;text-align:center}
.center{text-align:center}
@media(max-width:600px){ .grid2{grid-template-columns:1fr} .big-pin{font-size:44px} }