*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fafafa;--fg:#171717;--muted:#737373;--border:#e5e5e5;--card:#fff;
  --primary:#171717;--primary-fg:#fafafa;--accent:#2563eb;--success:#16a34a;
  --danger:#dc2626;--radius:8px;--font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0a0a0a;--fg:#ededed;--muted:#a3a3a3;--border:#262626;--card:#171717;
    --primary:#ededed;--primary-fg:#0a0a0a;--accent:#3b82f6;--success:#22c55e;
    --danger:#ef4444;
  }
}
html,body{height:100%;font-family:var(--font);color:var(--fg);background:var(--bg)}
body{display:flex;flex-direction:column;min-height:100vh}

.header{border-bottom:1px solid var(--border);background:var(--card)}
.header__inner{max-width:640px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.header__logo{font-weight:800;font-size:15px;letter-spacing:0.04em}
.header__round{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0.08em}

.app{flex:1;max-width:640px;width:100%;margin:0 auto;padding:24px 16px 64px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.card__title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);font-size:14px;font-weight:500;padding:10px 16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer;transition:background 0.15s,border-color 0.15s}
.btn:hover{background:var(--border)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn--primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.btn--primary:hover{opacity:0.9}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--accent:hover{opacity:0.9}
.btn--danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn--sm{font-size:12px;padding:6px 10px}
.btn--full{width:100%}

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:12px;font-weight:500;color:var(--muted)}
.input{font-family:var(--font);font-size:14px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--fg);outline:none;transition:border-color 0.15s}
.input:focus{border-color:var(--accent)}
.input--code{font-size:24px;font-weight:700;letter-spacing:0.2em;text-align:center;text-transform:uppercase}

.avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:border-color 0.15s,transform 0.1s}
.swatch:hover{transform:scale(1.1)}
.swatch--on{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}

.badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:0.04em}
.badge--you{background:var(--accent);color:#fff}
.badge--host{background:#f59e0b;color:#000}
.badge--off{background:var(--border);color:var(--muted)}

.player{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.player:last-child{border-bottom:none}
.player__name{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px}
.player--offline{opacity:0.4}

.roomcode{text-align:center;padding:24px 0}
.roomcode__code{font-size:48px;font-weight:800;letter-spacing:0.1em;font-variant-numeric:tabular-nums}
.roomcode__hint{font-size:12px;color:var(--muted);margin-top:4px}

.upload-zone{display:block;border:2px dashed var(--border);border-radius:var(--radius);padding:32px;text-align:center;cursor:pointer;transition:border-color 0.15s,background 0.15s}
.upload-zone:hover{border-color:var(--accent);background:var(--card)}
.upload-zone__text{font-size:14px;color:var(--muted)}

.progress{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:12px}
.progress__fill{height:100%;background:var(--accent);transition:width 0.15s}

.clip-preview{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;min-height:80px;display:flex;align-items:center;justify-content:center}
.clip-preview video{width:100%;max-height:320px;display:block}
.clip-preview__icon{font-size:32px;color:var(--muted)}
.spec-canvas{width:100%;height:80px;border-radius:var(--radius);display:block;margin-bottom:8px;background:var(--bg)}

.rec{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:16px}
.rec__dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1.5s ease infinite}
.rec__label{font-size:14px;font-weight:600;color:var(--danger);letter-spacing:0.1em}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}

.meter{height:32px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
#meter-canvas{width:100%;height:100%;display:block}

.progress-bar{margin-bottom:16px}
.progress-bar__track{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-bar__fill{height:100%;background:var(--accent);transition:width 0.1s linear}
.progress-bar__meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}

.take{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;transition:border-color 0.15s}
.take:hover{border-color:var(--muted)}
.take--mine{border-color:var(--accent)}
.take__info{flex:1;min-width:0}
.take__name{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px}
.take__meta{font-size:11px;color:var(--muted);margin-top:2px}
.take__actions{display:flex;gap:6px;flex-shrink:0}

.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-bottom:24px}
.podium__step{flex:1;max-width:180px;text-align:center;padding:16px 8px 0;border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;background:var(--card)}
.podium__step--1{border-color:#f59e0b;box-shadow:0 0 16px rgba(245,158,11,0.15)}
.podium__place{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.podium__step--1 .podium__place{color:#f59e0b}
.podium__name{font-size:14px;font-weight:600;margin:8px 0 4px}
.podium__votes{font-size:12px;color:var(--muted)}
.podium__bar{height:12px;border-radius:6px 6px 0 0;margin-top:12px}
.podium__step--1 .podium__bar{background:#f59e0b;height:20px}
.podium__step--2 .podium__bar{background:#a3a3a3;height:14px}
.podium__step--3 .podium__bar{background:#cd7f32;height:10px}

.scores{width:100%;border-collapse:collapse}
.scores th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);text-align:left;padding:8px 0;border-bottom:1px solid var(--border)}
.scores td{padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.scores tr:last-child td{border-bottom:none}
.scores .score-num{font-weight:700;font-variant-numeric:tabular-nums}

.waiting{text-align:center;padding:16px 0;color:var(--muted);font-size:14px}
.waiting__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 2px;animation:blink 1.2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

.toasts{position:fixed;top:12px;right:12px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:320px}
.toast{padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);font-size:13px;display:flex;align-items:flex-start;gap:8px;transform:translateX(120%);transition:transform 0.25s ease,opacity 0.25s ease}
.toast--in{transform:translateX(0)}
.toast--out{transform:translateX(120%);opacity:0}
.toast--error{border-color:var(--danger)}
.toast--success{border-color:var(--success)}
.toast__close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0}

.countdown-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85)}
.countdown-overlay[hidden]{display:none}
.countdown-num{font-size:120px;font-weight:800;color:#fff;animation:punch 0.4s cubic-bezier(0.2,1.6,0.4,1) both}
.countdown-num.go{color:var(--accent);animation:punch 0.4s cubic-bezier(0.2,1.6,0.4,1) both,shake 0.3s ease 0.4s both}
@keyframes punch{0%{transform:scale(2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.confetti-canvas{position:fixed;inset:0;z-index:90;pointer-events:none;display:none}

.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions--center{justify-content:center}

.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-sm{font-size:12px}
.text-xs{font-size:11px}
.mt-2{margin-top:8px}
.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}
.mb-4{margin-bottom:16px}
.gap-2{gap:8px}

.toggle-group{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.toggle-btn{flex:1;padding:8px 12px;font-size:13px;font-weight:500;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:background 0.15s,color 0.15s}
.toggle-btn--on{background:var(--accent);color:#fff}
.toggle-btn:not(.toggle-btn--on):hover{background:var(--card)}

.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

@media(max-width:480px){
  .podium{flex-direction:column;align-items:stretch}
  .podium__step{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001s!important;transition-duration:0.001s!important}
}