*{box-sizing:border-box}html,body{margin:0;padding:0}:root{--bg-base:#121212;--bg-surface:#181818;--bg-surface-alt:#1f1f1f;--bg-card-alt:#252525;--text-base:#fff;--text-emphasis:#fdfdfd;--text-secondary:#b3b3b3;--text-tertiary:#cbcbcb;--accent-pink:#ffd0ee;--accent-pink-contrast:#121212;--accent-pink-hover:color-mix(in srgb, var(--accent-pink) 85%, white);--danger:#eb0981;--danger-hover:color-mix(in srgb, var(--danger) 80%, black);--border-subtle:#4d4d4d;--border-strong:#7c7c7c;--bg-surface-alt-hover:color-mix(in srgb, var(--bg-surface-alt) 85%, white);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:32px;--radius-xs:2px;--radius-sm:6px;--radius-md:8px;--radius-lg:16px;--radius-pill:500px;--radius-full:9999px;--radius-circle:50%;--shadow-medium:0 8px 8px #0000004d;--shadow-heavy:0 8px 24px #00000080;--shadow-inset-border:0 1px 0 #121212, 0 0 0 1px #7c7c7c inset;--font-family-base:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}body{background:var(--bg-base);color:var(--text-base);font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.4}#root{min-height:100vh}h1,h2,h3{margin:0 0 var(--space-3);font-weight:700}h1{font-size:24px}h2{color:var(--text-base);font-size:18px;font-weight:600;line-height:1.3}p{margin:0 0 var(--space-3);color:var(--text-secondary)}a{color:var(--accent-pink)}ul,ol{gap:var(--space-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.icon{flex-shrink:0;width:20px;height:20px}.view{max-width:520px;padding:var(--space-4);margin:0 auto}.room-screen{max-width:520px;margin:0 auto}button,.btn{text-transform:uppercase;letter-spacing:1.4px;border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);justify-content:center;align-items:center;gap:var(--space-2);cursor:pointer;background:var(--bg-surface-alt);min-height:44px;color:var(--text-base);border:none;font-family:inherit;font-size:14px;font-weight:700;transition:background-color .15s,opacity .15s;display:inline-flex}button:hover:not(:disabled){background:var(--bg-surface-alt-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.btn-primary,form button[type=submit]{background:var(--accent-pink);color:var(--accent-pink-contrast);border-radius:var(--radius-pill);padding:0 var(--space-6)}button.btn-primary:hover:not(:disabled),form button[type=submit]:hover:not(:disabled){background:var(--accent-pink-hover)}button.btn-danger{color:var(--danger);border:1px solid var(--danger);background:0 0}button.btn-danger:hover:not(:disabled){background:var(--danger);color:var(--text-base)}button.btn-sm{min-height:36px;padding:var(--space-1) var(--space-3);letter-spacing:1.2px;font-size:12px}button.btn-sm .icon{width:14px;height:14px}button.btn-icon{border-radius:var(--radius-circle);min-width:36px;min-height:36px;color:var(--text-secondary);background:0 0;padding:0}button.btn-icon:hover:not(:disabled){background:var(--bg-surface-alt);color:var(--text-base)}button.btn-icon:active{color:var(--text-base)}.now-playing-card__controls .btn-icon{background:var(--accent-pink);min-width:44px;min-height:44px;color:var(--accent-pink-contrast)}.now-playing-card__controls .btn-icon:hover:not(:disabled){background:var(--accent-pink-hover);color:var(--accent-pink-contrast)}.view form{gap:var(--space-3);flex-direction:column;max-width:360px;margin:0 auto;display:flex}.view label{gap:var(--space-1);color:var(--text-secondary);flex-direction:column;font-size:14px;display:flex}.checkbox-label{align-items:center;gap:var(--space-2);flex-direction:row}.checkbox-label input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent-pink);flex-shrink:0;padding:0}input{background:var(--bg-surface-alt);box-shadow:var(--shadow-inset-border);color:var(--text-base);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);text-align:center;border:none;min-height:44px;font-family:inherit;font-size:1rem}input:focus{outline:2px solid var(--accent-pink);outline-offset:2px}input::placeholder{color:var(--text-secondary);opacity:.7}.search-view{text-align:center}.search-view form{text-align:center;flex-direction:row;align-items:center;max-width:none}.search-view__field{margin-bottom:var(--space-3);flex:1;align-items:center;display:flex;position:relative}.search-view__field .icon{left:var(--space-4);color:var(--text-secondary);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.search-view__field input{text-align:left;flex:1;padding-left:44px}.error{color:var(--danger);font-size:14px}.status-muted{color:var(--text-secondary);font-size:14px}.empty-state{color:var(--text-secondary);text-align:center;padding:var(--space-4) 0;font-size:16px;font-style:italic}.card{background:var(--bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-medium);padding:var(--space-4)}.landing-hero{text-align:center;margin-bottom:var(--space-5)}.landing-hero__icon{width:44px;height:44px;color:var(--text-base);margin:0 auto var(--space-2)}.landing-hero__icon .icon{width:100%;height:100%}.landing-option{margin-bottom:var(--space-4)}.badge--ready{background:color-mix(in srgb, var(--accent-pink) 15%, transparent);color:var(--accent-pink);border-radius:var(--radius-full);text-transform:uppercase;align-items:center;gap:4px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-flex}.badge--ready .icon{width:12px;height:12px}.list-item{align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:var(--bg-base);transition:background-color .15s;display:flex}.list-item:hover,.list-item:active{background:var(--bg-surface-alt-hover)}.list-item--dragging{box-shadow:var(--shadow-heavy);background:var(--bg-card-alt);border-radius:var(--radius-md);opacity:.92;z-index:1;position:relative}.drag-handle{cursor:grab;color:var(--text-secondary);touch-action:none}.drag-handle:active{cursor:grabbing}.list-item img{object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;width:44px;height:44px}.list-item__title{flex:1;min-width:0;font-size:16px}.list-item__meta{color:var(--text-secondary);white-space:nowrap;font-size:14px}.top-bar{z-index:10;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-surface);box-shadow:var(--shadow-medium);display:flex;position:sticky;top:0}.top-bar__identity{align-items:center;gap:var(--space-2);min-width:0;display:flex}.top-bar__code{background:var(--bg-surface-alt);border-radius:var(--radius-full);letter-spacing:.05em;padding:4px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700}.top-bar__nickname{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.top-bar__actions{gap:var(--space-2);flex-shrink:0;display:flex}.now-playing-card{align-items:center;gap:var(--space-3);margin:var(--space-4);background:var(--bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-medium);padding:var(--space-4);display:flex}.now-playing-card img{object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;width:56px;height:56px}.now-playing-card__info{flex:1;min-width:0}.now-playing-card__title{font-size:16px;font-weight:700}.now-playing-card__progress{align-items:center;gap:var(--space-2);margin-top:var(--space-1);display:flex}.progress-bar{border-radius:var(--radius-full);background:var(--bg-surface-alt);flex:1;height:4px;overflow:hidden}.progress-bar__fill{background:var(--accent-pink);border-radius:var(--radius-full);height:100%;transition:width .3s linear}.now-playing-card__time{color:var(--text-secondary);flex-shrink:0;font-size:12px}.now-playing-card__controls{align-items:center;gap:var(--space-2);display:flex}.now-playing-card audio{max-width:160px;height:32px}.tabs{gap:var(--space-1);margin:0 var(--space-4) var(--space-3);background:var(--bg-surface);border-radius:var(--radius-full);padding:4px;display:flex}.tabs__tab{color:var(--text-secondary);min-height:40px;padding:var(--space-2);border-radius:var(--radius-full);background:0 0;flex:1;font-size:12px}.tabs__tab:hover:not(:disabled){background:var(--bg-surface-alt);color:var(--text-base)}.tabs__tab.is-active{background:var(--accent-pink);color:var(--accent-pink-contrast)}.tab-panel{padding:0 var(--space-4) var(--space-5)}.modal-overlay{padding:var(--space-4);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-heavy);padding:var(--space-5);text-align:center;width:100%;max-width:360px}.modal h1{margin:0 0 var(--space-2);font-size:18px;font-weight:600;line-height:1.3}.modal__qr{background:var(--text-base);padding:var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-medium);margin:var(--space-3) 0;display:inline-flex}.modal__link{word-break:break-all;font-size:14px}.landing-option__actions{gap:var(--space-3);flex-direction:column;align-items:flex-start;display:flex}@media (width<=400px){.now-playing-card{margin:var(--space-3)}.tabs{margin:0 var(--space-3) var(--space-3)}.tab-panel{padding:0 var(--space-3) var(--space-4)}}