:root{ --bg:#0b1220; --fg:#e9eef9; --pri:#5da9ff; --muted:#98a2b3; --danger:#ff6b6b; }
*{ box-sizing:border-box; }
body{ margin:0; font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--fg); }
.container{ max-width:900px; margin:40px auto; padding:0 16px; }
.center{ text-align:center; }
.screen .container{ max-width:1200px; }
h1,h2{ margin:12px 0; }
.card{ background:#131c2e; border:1px solid #22314f; border-radius:16px; padding:16px; margin:12px 0; }
.card.big{ font-size:1.6rem; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; background:#22314f; color:#fff; text-decoration:none; border:0; cursor:pointer; }
.btn.primary{ background:var(--pri); }
.btn.danger{ background:var(--danger); }
.btn.block{ width:100%; text-align:left; }
.btn.disabled{ opacity:.6; }
label{ display:block; margin:6px 0; color:#c8d3ea; }
input,textarea,select{ width:100%; padding:10px; border-radius:10px; border:1px solid #22314f; background:#0f1728; color:#fff; }
.flash{ padding:10px; background:#0f7; color:#012; border-radius:8px; margin:10px 0; }
.flash.error{ background:#ff6b6b; color:#180; }
.badge{ background:#22314f; padding:4px 8px; border-radius:8px; }
.qrc{ background:#fff; padding:8px; display:inline-block; border-radius:8px; }
.opt{ background:#0f1728; border:1px solid #22314f; border-radius:12px; padding:12px; }
.tag{ display:inline-block; background:#22314f; padding:2px 8px; border-radius:999px; margin-right:6px; }
.muted{ color:var(--muted); }
.chart{ display:flex; align-items:flex-end; gap:16px; height:240px; }
.bar{ width:80px; background:#0f1728; border:1px solid #22314f; border-radius:8px; display:flex; flex-direction:column; justify-content:flex-end; }
.fill{ width:100%; background:var(--pri); border-radius:8px 8px 0 0; }
.lab{ text-align:center; padding:6px; color:#c8d3ea; }
.timer{ font-size:2rem; font-weight:700; margin:8px 0 12px; }
/* copyright footer bottom-right */
.copy{ position:fixed; bottom:8px; right:10px; font-size:.8rem; color:var(--muted); pointer-events:none; }

.answers{ display:flex; flex-direction:column; gap:12px; }


.opt.correct{ border-color:#2ecc71; background:#0f2a1b; }
.opt.correct .tag{ background:#2ecc71; color:#082; }
.pie-wrap{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; }
.pie-legend{ display:flex; gap:12px; flex-wrap:wrap; }
.pie-legend .item{ display:flex; align-items:center; gap:6px; }
.pie-legend .swatch{ width:12px; height:12px; border-radius:3px; background:#22314f; display:inline-block; }
.pie{ width:220px; height:220px; }