:root { --bg:#08141f; --panel:#102333; --line:#284357; --text:#eef6fb; --muted:#93acba; --cyan:#6ee7f7; --green:#66e3a4; --red:#ff7d7d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 15% 0%,#17374b 0,var(--bg) 34rem),var(--bg); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.topbar,.shell { max-width:1120px; margin:auto; }
.topbar { padding:36px 22px 20px; }
.eyebrow,.kicker { margin:0 0 8px; color:var(--cyan); font-size:.72rem; letter-spacing:.16em; font-weight:800; }
h1 { margin:0 0 4px; font-size:clamp(2.3rem,5vw,4rem); letter-spacing:-.06em; }
h2,h3,p { margin-top:0; }
h2 { margin-bottom:10px; }
.subtitle,.muted { color:var(--muted); }
.shell { padding:0 22px 40px; }
.tabs { display:flex; gap:8px; margin:0 0 18px; }
.tab,.stage { border:1px solid var(--line); color:var(--muted); background:transparent; border-radius:10px; padding:11px 15px; font-weight:800; }
.tab.active,.tab:hover { color:var(--bg); background:var(--cyan); border-color:var(--cyan); }
.card { margin-bottom:18px; padding:24px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(20,43,61,.96),rgba(12,29,43,.96)); box-shadow:0 18px 44px rgba(0,0,0,.22); }
.hidden { display:none !important; }
.primary { color:var(--bg); background:var(--cyan); border:0; border-radius:10px; padding:12px 16px; font-weight:900; }
.primary:hover { filter:brightness(1.08); }
.status { min-height:1.4em; margin-top:12px; color:var(--red); font-size:.85rem; }
.status.good { color:var(--green); }
.room-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.room-code { display:block; font-size:2.8rem; letter-spacing:.16em; color:var(--cyan); }
.pill { padding:7px 11px; border:1px solid rgba(110,231,247,.35); border-radius:99px; color:var(--cyan); font-size:.78rem; white-space:nowrap; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:grid; gap:7px; margin:0 0 15px; color:var(--muted); font-size:.84rem; }
input,textarea,select { width:100%; color:var(--text); background:rgba(0,0,0,.16); border:1px solid var(--line); border-radius:10px; padding:11px 12px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(110,231,247,.1); }
.stage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.stage:disabled { opacity:.45; }
.stage:hover { border-color:var(--cyan); color:var(--cyan); }
.stage-message { margin:12px 0 20px; padding:14px; border-left:3px solid var(--green); color:var(--muted); background:rgba(102,227,164,.06); }
.choices { display:grid; gap:9px; border:0; padding:0; margin:0 0 16px; }
.choices legend { color:var(--muted); margin-bottom:3px; }
.choices label { padding:11px 12px; border:1px solid var(--line); border-radius:10px; }
.choices label:has(input:checked) { border-color:var(--cyan); background:rgba(110,231,247,.08); }
.participants { display:grid; gap:9px; }
.participant { display:grid; gap:4px; padding:13px; border:1px solid var(--line); border-radius:12px; }
.participant small,.participant span { color:var(--muted); font-size:.8rem; }
@media (max-width:700px) { .form-grid,.stage-grid { grid-template-columns:1fr; } .room-head { align-items:flex-start; flex-direction:column; } .room-code { font-size:2.2rem; } }