:root{--bg:#f4f6f8;--card:#fff;--text:#14202b;--muted:#5f6f7c;--accent:#0b6e69;--line:#d9e0e6;--danger:#d64550}
@media (prefers-color-scheme:dark){:root{--bg:#10171d;--card:#18222b;--text:#eaf0f4;--muted:#8fa1af;--accent:#3fb8af;--line:#2a3844;color-scheme:dark}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:760px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 32px}
h1{font-size:1.6rem;margin:.3em 0 .6em}h2{font-size:1.2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.spacer{flex:1}.center{text-align:center}.big-text{font-size:1.35rem;font-weight:700}
button,input,select,textarea{font:inherit;border-radius:10px;border:1px solid var(--line);padding:10px 14px;background:var(--card);color:var(--text);max-width:100%}
input:not([type=radio],[type=checkbox],[type=file]),textarea{width:100%;margin:4px 0}textarea{min-height:120px}button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.primary:disabled{opacity:.5}
.danger{color:var(--danger)}.muted{color:var(--muted)}.error-text{color:var(--danger);min-height:1.4em}
.join-code{font-size:3.4rem;font-weight:800;letter-spacing:.18em;text-align:center;color:var(--accent)}
.qr-code{background:#fff;padding:8px;border-radius:10px;display:block;margin:8px auto;width:200px;height:200px}
.question-image{max-width:100%;max-height:42vh;border-radius:10px;display:block;margin:8px auto}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.option{color:#fff;border:0;min-height:88px;font-weight:700;text-align:left;padding:12px;border-radius:12px;background:var(--option-color)}
.option.dimmed{opacity:.3}.option.mine,.option.selected{outline:4px solid var(--text)}
.leaderboard-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.question-editor{border-left:4px solid var(--accent)}.option-row{display:flex;gap:8px;align-items:center}
pre{white-space:pre-wrap;font-size:.85rem}