:root{--canvas: #fbfcfe;--surface: #ffffff;--field: #efeff9;--rail: #181c27;--stage: #040a18;--player: #1d2031;--panel: #262e45;--nav-active: #2f2d45;--hairline: #eef0f5;--border: #e4e7ef;--border-strong: #dde0ea;--accent: #6b66de;--accent-hover: #5a55ce;--accent-soft: #f4f1fd;--accent-on-dark: #8e86c9;--text: #181c27;--text-secondary: #5a6070;--text-body: #6e7482;--text-muted: #8a90a0;--text-on-dark: #ffffff;--text-on-dark-secondary: #c9cedc;--text-on-dark-muted: #8b92a6;--chip-scrim: rgba(24, 28, 39, .72);--danger: #e4483d;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--shadow-hover: 0 4px 16px rgba(24, 28, 39, .06);--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--canvas);color:var(--text);font-family:DM Sans,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,.display{font-weight:700;letter-spacing:-.02em;margin:0}button{font-family:inherit;cursor:pointer;border:none}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input{font-family:inherit}.btn{border-radius:var(--radius-pill);padding:14px 24px;font-size:.95rem;font-weight:500;transition:background-color .12s var(--ease),color .12s var(--ease),transform 80ms ease;text-align:center;text-decoration:none;display:inline-block}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--field);color:var(--text);border:1px solid var(--text-muted)}.btn-secondary:hover{background:var(--border)}.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.top-bar{width:100%;background:var(--surface);border-bottom:1px solid var(--hairline);padding:3px 24px;position:sticky;top:0;z-index:100}.top-bar-inner{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700;font-size:1.1rem}.logo:hover{opacity:.8}.logo img{height:75px;width:auto;display:block}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#181c2780;display:flex;align-items:center;justify-content:center;z-index:200}.modal-content{background:var(--surface);border-radius:var(--radius-lg);padding:32px;max-width:400px;width:90%;box-shadow:0 20px 60px #181c271a;display:flex;flex-direction:column;gap:16px}.modal-content h2{margin:0 0 8px;font-size:1.4rem;color:var(--accent)}.modal-content input{padding:14px 20px}.modal-buttons{display:flex;gap:12px;justify-content:flex-end}.modal-buttons .btn{flex:1}.page{min-height:calc(100vh - 56px);display:flex;flex-direction:column;align-items:center;padding:32px 24px;max-width:1440px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:24px;width:100%;max-width:480px}.main-content{width:100%;max-width:960px;margin-inline:auto}.card.main-content{max-width:960px}.text-dim{color:var(--text-body)}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:12px}.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);border-radius:var(--radius-pill);padding:4px 12px;font-size:.85rem;font-weight:500;color:var(--accent)}.pill-energy{background:var(--accent-soft);color:var(--accent)}input[type=text],input[type=password],input[type=number]{background:var(--field);border:1px solid transparent;border-radius:var(--radius-pill);padding:14px 20px;color:var(--text);font-size:.95rem;width:100%}input[type=text]:focus,input[type=password]:focus,input[type=number]:focus{border-color:var(--accent);outline:none}input[type=range]{flex:1;accent-color:var(--accent)}.host-stage{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:40px;text-align:center;background:var(--stage);color:var(--text-on-dark)}.host-stage .text-dim{color:var(--text-on-dark-muted)}.host-stage .pill,.host-stage .pill-energy{background:var(--chip-scrim);color:var(--text-on-dark)}.host-stage .btn-secondary{background:var(--panel);color:var(--text-on-dark);border-color:#ffffff29}.host-stage .btn-secondary:hover{background:#323b58}.host-video-frame{position:relative;width:100%;max-width:1500px;aspect-ratio:16 / 9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.08)}.host-video-frame:fullscreen{max-width:none;width:100vw;height:100vh;border-radius:0;aspect-ratio:auto}.host-video-frame:-webkit-full-screen{max-width:none;width:100vw;height:100vh;border-radius:0;aspect-ratio:auto}.host-fullscreen-btn{position:absolute;bottom:16px;right:16px;padding:8px 14px;font-size:.85rem;opacity:.85;z-index:2}.host-fullscreen-btn:hover{opacity:1}.host-fullscreen-error{position:absolute;bottom:60px;right:16px;left:16px;z-index:2;padding:10px 14px;border-radius:var(--radius-md);background:#e4483dd9;color:#fff;font-size:.85rem;text-align:right}.host-tap-to-play{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:none;background:#0a0c18b8;color:var(--text-on-dark);font-size:clamp(1.2rem,3vw,2rem);font-weight:600;letter-spacing:.01em;cursor:pointer}.host-tap-to-play:hover{background:#0a0c18d1}.host-idle-qr{background:var(--surface);padding:20px;border-radius:var(--radius-lg)}.host-next-up{position:fixed;bottom:24px;right:24px;background:var(--player);border-radius:var(--radius-lg);padding:16px 20px;max-width:320px}.host-extension-notice{position:fixed;top:20px;left:20px;right:20px;max-width:640px;margin:0 auto;background:var(--panel);border-radius:var(--radius-md);padding:12px 16px;display:flex;align-items:center;gap:16px;font-size:.85rem;color:var(--text-on-dark-secondary);text-align:left;z-index:3}.host-extension-notice code{background:#ffffff1a;padding:1px 6px;border-radius:var(--radius-sm);font-size:.85em}.host-extension-notice .btn{flex-shrink:0;padding:8px 14px;font-size:.85rem}.host-eyebrow{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on-dark)}.guest-page{max-width:960px;margin:0 auto;padding:32px 24px 48px;width:100%}.guest-queue-container{width:100%}.search-results,.queue-list-items{display:flex;flex-direction:column;gap:12px}.search-result{display:flex;gap:12px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:12px;align-items:center;cursor:pointer;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}.search-result:hover,.search-result:active{border-color:var(--border-strong);box-shadow:var(--shadow-hover)}.search-result img{width:88px;height:66px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0}.queue-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:10px 14px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}.queue-item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-hover)}.queue-item.now-playing{background:var(--accent-soft);border-color:var(--accent-soft)}.queue-item.guest-song{border-color:var(--accent);background:#6b66de0d}.queue-item.dragging{position:relative;z-index:10;box-shadow:var(--shadow-hover);cursor:grabbing}.queue-position{font-size:1.1rem;font-weight:700;color:var(--accent);width:28px;text-align:center;flex-shrink:0}.drag-handle{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:grab;touch-action:none;border-radius:var(--radius-sm, 6px);user-select:none;-webkit-user-select:none}.drag-handle:hover{color:var(--text);background:var(--field)}.drag-handle.disabled{cursor:default;opacity:.3;pointer-events:none}.pitch-sheet{position:fixed;top:0;right:0;bottom:0;left:0;background:#181c2780;display:flex;align-items:flex-end;justify-content:center;z-index:50}.pitch-sheet-inner{background:var(--surface);border-radius:24px 24px 0 0;width:100%;max-width:520px;padding:28px 24px 32px}.pitch-slider-row{display:flex;align-items:center;gap:16px;margin:20px 0}.pitch-value{font-size:2rem;font-weight:700;min-width:70px;text-align:center}.tab-bar{display:flex;background:var(--field);border-radius:var(--radius-pill);padding:4px;gap:8px;margin-bottom:16px;max-width:320px}.tab-btn{flex:1;background:transparent;color:var(--text-muted);padding:10px;border-radius:var(--radius-md);font-weight:500}.tab-btn.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-hover)}.admin-shell{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center}.admin-header{width:100%;background:var(--rail);color:var(--text-on-dark);padding:18px 24px;display:flex;align-items:center;justify-content:center}.admin-header-inner{width:100%;max-width:640px;display:flex;align-items:center;justify-content:space-between}.admin-brand{font-weight:700;font-size:1.1rem;letter-spacing:-.01em}.admin-dashboard{max-width:640px}.admin-room-control{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px}.admin-control-col,.admin-playlist-col{max-width:none;margin:0}.admin-room-list{display:flex;flex-direction:column;gap:12px}.admin-room-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:16px;text-decoration:none;color:var(--text);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}.admin-room-row:hover{border-color:var(--border-strong);box-shadow:var(--shadow-hover)}.admin-links{flex-wrap:wrap}.admin-now-playing{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:20px}.admin-player-transport{display:flex;align-items:center;justify-content:center;gap:12px}.admin-player-transport .btn-primary{border-radius:var(--radius-pill);width:52px;height:52px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}@media (min-width: 700px){.card{max-width:560px}.guest-page{max-width:960px;padding-bottom:32px}.page{padding:40px 24px}.search-results,.admin-room-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.admin-dashboard,.admin-header-inner{max-width:900px}}@media (min-width: 900px){.admin-room-control,.admin-header-inner{max-width:1040px}.admin-room-control{flex-direction:row;align-items:flex-start}.admin-control-col{flex:0 0 380px}.admin-playlist-col{flex:1;min-width:0}}@media (min-width: 1100px){.search-results{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}