:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f2efe8;--bg-accent:#f9f5ee;--ink:#1b1a17;--muted:#5e5a53;--primary:#ff7a59;--primary-dark:#e86446;--surface:#fff;--border:#1b1a171a;--shadow:0 25px 60px #1b1a171f;font-family:Space Grotesk,system-ui,sans-serif;line-height:1.4}*{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(circle at top,#fff8f0 0%,#f2efe8 45%,#e7e1d8 100%);margin:0}.page{flex-direction:column;gap:32px;min-height:100vh;padding:48px 6vw 64px;display:flex}.page.tv-mode{height:100vh;padding:0;overflow:hidden}.hero{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.24em;color:var(--muted);margin-bottom:12px;font-size:.75rem}h1{margin:0 0 12px;font-family:Fraunces,serif;font-size:clamp(2.2rem,3.5vw,3.6rem);font-weight:700}.subtitle{max-width:560px;color:var(--muted);margin:0;font-size:1.05rem}.mode-toggle{background:var(--surface);box-shadow:var(--shadow);border-radius:999px;gap:6px;padding:6px;display:inline-flex}.mode-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:10px 20px;font-weight:600}.mode-toggle button.active{background:var(--ink);color:#fff6ee}.panel{background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--border);border-radius:28px;flex-direction:column;gap:24px;padding:28px;display:flex}.host-live{min-height:85vh}.host-screen{background:linear-gradient(135deg,#fff4ea 0%,#fff 45%,#fef7f0 100%)}.join-screen{background:linear-gradient(#fff 0%,#f7f0e7 100%)}.panel-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.panel-header h2{margin:0;font-family:Fraunces,serif;font-size:2rem}.panel-header p{color:var(--muted);margin:6px 0 0}.pill{color:#c5543a;background:#fff2e7;border-radius:999px;padding:8px 16px;font-weight:600}.field-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end;gap:16px;display:grid}.field{gap:8px;font-weight:600;display:grid}.field input{border:1px solid var(--border);background:var(--bg-accent);border-radius:14px;padding:12px 14px;font-family:inherit;font-size:1rem}button.primary{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;padding:14px 18px;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 18px 35px #ff7a5959}button.primary:hover{background:var(--primary-dark)}.link.primary{width:fit-content}button.secondary,button.ghost{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:14px;padding:12px 16px;font-weight:600}button.ghost{color:var(--muted);background:0 0}.room-card{background:var(--bg-accent);border:1px dashed var(--border);border-radius:22px;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;display:flex}.host-room{background:#fff;border-style:solid}.host-grid{grid-template-columns:minmax(240px,1fr) minmax(280px,1fr);gap:20px;display:grid}.host-live-layout{grid-template-columns:minmax(300px,1fr) 240px;align-items:start;gap:24px;display:grid}.host-main{gap:24px;display:grid}.host-side{justify-items:center;gap:16px;display:grid;position:sticky;top:32px}.host-header{border:1px solid var(--border);background:#fff;border-radius:20px;justify-content:space-between;align-items:center;gap:16px;padding:18px;display:flex}.host-actions{flex-wrap:wrap;gap:12px;display:flex}.qr-card{border:1px solid var(--border);text-align:center;background:#fff;border-radius:20px;padding:12px;box-shadow:0 14px 30px #1b1a1714}.qr-card img{object-fit:cover;width:200px;height:200px}.qr-caption{color:var(--muted);margin:8px 0 0}.room-label{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:0;font-size:.75rem}.room-code{margin:6px 0;font-size:2rem;font-weight:700}.room-help{color:var(--muted);margin:0}.winner{color:#c5543a;margin:10px 0 0;font-weight:600}.room-actions{flex-wrap:wrap;gap:12px;display:flex}.countdown{background:#fff7f0;border:1px solid #ff7a5933;border-radius:18px;grid-template-columns:minmax(200px,1fr) minmax(200px,1.5fr);align-items:center;gap:16px;padding:16px 18px;display:grid}.countdown.closed{background:#f1f1ef;border-color:#1b1a1733}.countdown-label{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.75rem}.countdown-time{margin:6px 0;font-size:2rem;font-weight:700}.countdown-help{color:var(--muted);margin:0}.countdown-bar{background:#f0e4da;border-radius:999px;height:12px;position:relative;overflow:hidden}.countdown-bar span{background:linear-gradient(90deg,#ff7a59,#ffbf8a);height:100%;transition:width .4s;display:block}@keyframes glow{0%{background-position:0%}to{background-position:200%}}.vote-timer-bar{background:#1b1a1714;border-radius:999px;height:12px;margin-top:16px;position:sticky;bottom:0;overflow:hidden}.vote-timer-bar span{background:linear-gradient(90deg,#ff7a59,#ffd2a1,#ff7a59) 0 0/200% 100%;height:100%;transition:width .4s;animation:6s linear infinite glow;display:block}.alert{color:#9a3c28;background:#ffe8df;border-radius:14px;padding:12px 16px;font-weight:600}.vote-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.host-scoreboard{gap:16px;display:grid}.score-card{border:1px solid var(--border);background:#fff;border-radius:18px;grid-template-columns:80px 72px 1fr 90px;align-items:center;gap:16px;padding:18px;display:grid;box-shadow:0 10px 20px #1b1a170f}.score-card.leader{border-color:#ff7a5980;transform:scale(1.03);box-shadow:0 18px 35px #ff7a5933}.score-rank{color:var(--primary-dark);font-size:1.6rem;font-weight:700}.score-info{gap:8px;display:grid}.score-bar{background:#f1e5db;border-radius:999px;height:12px;overflow:hidden}.score-bar span{background:linear-gradient(90deg,#ff7a59,#ffb37a);height:100%;transition:width .4s;display:block}.score-votes{text-align:right;font-weight:700}.score-art{object-fit:cover;border-radius:12px;width:64px;height:64px}.track-card{border:1px solid var(--border);background:#fff;border-radius:18px;justify-content:space-between;align-items:center;padding:16px;display:flex}.track-info{align-items:center;gap:12px;display:flex}.track-art{object-fit:cover;border-radius:12px;width:48px;height:48px}.mobile-votes .track-card{padding:18px}.track-title{margin:0 0 6px;font-weight:600}.track-artist{color:var(--muted);margin:0}.track-votes{text-align:right;gap:2px;font-weight:700;display:grid}.vote-button{background:var(--ink);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:10px 18px;font-weight:600}.vote-button:disabled{cursor:not-allowed;background:#c2beb7}.footer{text-align:center;color:var(--muted)}.meta{color:var(--muted);font-size:.9rem}@media (width<=720px){.page{padding:32px 6vw 48px}.panel{padding:22px}.room-card{flex-direction:column;align-items:flex-start}.host-grid,.host-live-layout{grid-template-columns:1fr}.host-live-layout{grid-template-columns:1fr}.host-header{flex-direction:column;align-items:flex-start}.host-side{justify-items:flex-start;position:static}.score-card{text-align:left;grid-template-columns:1fr}.score-votes{text-align:left}}.tv-screen{background:radial-gradient(circle at top,#fff7ef 0%,#f6efe7 45%,#e9dfd3 100%);grid-template-rows:1fr auto;gap:24px;min-height:100vh;padding:5vh 6vw 4vh;display:grid}.tv-top{justify-content:space-between;align-items:center;gap:24px;display:flex}.tv-room{border:1px solid var(--border);background:#fff;border-radius:24px;padding:24px 28px;box-shadow:0 20px 40px #1b1a1714}.tv-label{text-transform:uppercase;letter-spacing:.24em;color:var(--muted);margin:0 0 10px;font-size:.8rem}.tv-code{text-align:center;margin:0;font-size:clamp(3rem,3vw,5rem);font-weight:700}.tv-sub{color:var(--muted);margin:6px 0 0}.tv-qr{border:1px solid var(--border);background:#fff;border-radius:20px;width:100%;padding:12px;box-shadow:0 20px 40px #1b1a1714}.tv-qr img{aspect-ratio:1;width:100%;height:auto}.tv-ranking{grid-template-columns:420px auto 300px;align-items:start;gap:24px;display:grid}.tv-leader-info .tv-cover{aspect-ratio:1;width:100%!important;height:auto!important}.tv-leader{background:#fff;border:2px solid #ff7a5966;border-radius:28px;gap:12px;padding:28px;display:grid;box-shadow:0 24px 50px #ff7a5933}.tv-leader-info{align-items:center;gap:18px}.tv-rank{color:var(--primary-dark);margin:0;font-size:2rem;font-weight:700}.tv-title{margin:0;font-size:clamp(1.8rem,2.4vw,2.6rem);font-weight:700}.tv-artist{color:var(--muted);margin:0;font-size:1.1rem}.tv-votes{align-items:baseline;gap:10px;font-size:2rem;font-weight:700;display:flex}.tv-list{gap:12px;display:grid}.tv-item{border:1px solid var(--border);background:#fffc;border-radius:18px;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;display:flex}.tv-item-info{align-items:center;gap:12px;width:100%;display:flex}.tv-cover{object-fit:cover;border-radius:14px;flex-shrink:0;width:64px;height:64px}.tv-item-rank{color:var(--primary-dark);font-weight:700}.tv-item-title{margin:0;font-weight:600}.tv-item-artist{color:var(--muted);margin:0;font-size:.95rem}.tv-item-votes{font-size:1.2rem;font-weight:700}.tv-bottom{border:1px solid var(--border);background:#fff;border-radius:24px;grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:18px 24px;display:grid;box-shadow:0 16px 32px #1b1a1714}.tv-bottom-label{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0;font-size:.75rem}.tv-bottom-time{margin:6px 0 0;font-size:2rem;font-weight:700}.tv-bottom-bar{background:#f0e4da;border-radius:999px;height:16px;overflow:hidden}.tv-bottom-bar span{background:linear-gradient(90deg,#ff7a59,#ffbf8a);height:100%;transition:width .4s;display:block}.toast-stack{gap:10px;display:grid;position:absolute;bottom:4vh;left:6vw}.toast{color:#fff;background:#1b1a17eb;border-radius:999px;padding:12px 18px;font-weight:600;animation:4s forwards toastUp}@keyframes toastUp{0%{opacity:0;transform:translateY(16px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(-6px)}to{opacity:0;transform:translateY(-20px)}}