:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0806;--surface:#0f0d0b;--surface-elevated:#171412;--surface-hover:#1d1916;--divider:#2a2520;--text:#fff;--text-secondary:#aaa;--text-hint:#6b6660;--amber:#f59e0b;--amber-variant:#d97706;--amber-wash:#f59e0b24;--danger:#ff5252;--queued-blue:#448aff;--success:#00c853;--cabinet-wood-light:#54331e;--cabinet-wood:#3d2416;--cabinet-dark:#150c08;--brass:#c89b4a;--brass-light:#e8c887;--neon-teal:#3ff0dd;--neon-pink:#ff3d7f;--card-cream:#f3e9d2;--card-cream-shade:#e5d8b8;--card-ink:#2a1d12;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;min-height:100dvh;margin:0}button{cursor:pointer;font-family:inherit}.screen{flex-direction:column;gap:1rem;max-width:480px;min-height:100dvh;margin:0 auto;padding:1.25rem;display:flex}.screen.center{text-align:center;justify-content:center;align-items:center}.screen.controller{max-width:760px;padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}h1{margin:0;font-family:Sora,sans-serif;font-size:1.5rem;font-weight:700}.logo{display:block}.logo-horizontal{width:auto;height:28px}.logo-stacked{width:200px;max-width:60%;height:auto}.status{color:var(--text-hint);min-height:1.2em;margin:.25rem 0 0;font-size:.85rem}.search-field{background:var(--surface);border:1px solid var(--divider);border-radius:12px;align-items:center;gap:10px;padding:12px 14px;display:flex}.search-field svg{opacity:.55;flex:none}.search-field:focus-within{border-color:var(--amber)}.search-field input{min-width:0;color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:Manrope,sans-serif;font-size:.95rem}.search-field input::placeholder{color:var(--text-hint)}.search-field input::-webkit-search-cancel-button{display:none}.results,.queue{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}h2{color:var(--text-secondary);margin:0 0 .5rem;font-family:Sora,sans-serif;font-size:1rem;font-weight:600}.art,.art-placeholder{object-fit:cover;background:linear-gradient(135deg,#2a2520,#171412);border-radius:10px;flex-shrink:0;width:48px;height:48px}.track-meta{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.row-meta{font-variant-numeric:tabular-nums;color:var(--text-hint);text-align:right;flex:none;min-width:3.4em;font-family:JetBrains Mono,monospace;font-size:.78rem}.row-actions{flex:none;gap:6px;display:flex}.icon-btn{appearance:none;border:1px solid var(--divider);background:var(--surface);color:var(--text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:.95rem;transition:transform .12s,border-color .12s,color .12s,background-color .12s;display:flex}.icon-btn:active{transform:scale(.92)}.icon-btn:disabled{opacity:.5;transform:none}.icon-btn.play{border-color:var(--amber);color:var(--amber)}.icon-btn.play:active{background:var(--amber-wash)}.icon-btn.queue:active{border-color:var(--queued-blue);color:var(--queued-blue)}.icon-btn.play-next:active{border-color:var(--amber-variant);color:var(--amber-variant)}.icon-btn.remove:active{border-color:var(--danger);color:var(--danger)}.promote-button{border:1px dashed var(--amber-variant);color:var(--amber);background:0 0;border-radius:12px;padding:.75rem 1rem;font-family:Manrope,sans-serif;font-weight:600}.promote-button:disabled{opacity:.6;border-color:var(--divider);color:var(--text-hint)}.controller-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:9px;font-family:Sora,sans-serif;font-size:1.05rem;font-weight:700;display:flex}.brand-icon{border-radius:6px;flex:none;width:22px;height:22px;display:block}.ghost-button{border:1px solid var(--divider);background:var(--surface);color:var(--text-secondary);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600}.now-playing-bar{z-index:5;background:var(--surface-elevated);border-top:1px solid var(--divider);padding:12px max(16px,50% - 364px);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:.6rem;display:flex;position:fixed;bottom:0;left:0;right:0}.np-top{align-items:center;gap:14px;display:flex}.np-art,.np-art-placeholder{object-fit:cover;background:linear-gradient(135deg,#2a2520,#171412);border-radius:10px;flex:none;width:52px;height:52px}.np-info{flex-direction:column;flex:auto;gap:1px;min-width:0;display:flex}.np-title{white-space:nowrap;text-overflow:ellipsis;font-family:Sora,sans-serif;font-size:.95rem;font-weight:600;overflow:hidden}.np-progress{flex-direction:column;gap:.3rem;display:flex}.np-progress-track{background:var(--divider);border-radius:999px;height:4px;overflow:hidden}.np-progress-fill{background:var(--amber);border-radius:999px;width:0%;height:100%;transition:width .3s linear}.np-times{color:var(--text-hint);font-variant-numeric:tabular-nums;justify-content:space-between;font-family:JetBrains Mono,monospace;font-size:.72rem;display:flex}.transport{justify-content:center;align-items:center;gap:1.25rem;display:flex}.transport-button{background:var(--surface-hover);width:44px;height:44px;color:var(--text);border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1rem;display:flex}.transport-primary{background:var(--amber);color:#1a1206;width:58px;height:58px;font-size:1.3rem}.toast{left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));background:var(--surface-elevated);border:1px solid var(--divider);border-left:3px solid var(--amber);color:var(--text);opacity:0;pointer-events:none;z-index:20;border-radius:10px;align-items:center;gap:8px;max-width:calc(100% - 2.5rem);padding:11px 18px;font-size:.85rem;font-weight:500;transition:opacity .22s,transform .22s;display:flex;position:fixed;transform:translate(-50%,12px);box-shadow:0 12px 30px -10px #0009}.toast.show{opacity:1;transform:translate(-50%)}.toast .tick{color:var(--success);font-weight:700}.screen:not(.controller) .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}#panel-music{flex-direction:column;gap:.75rem;display:flex}#panel-jukebox{flex-direction:column;gap:1rem;display:flex}.mode-toggle{background:var(--surface);border:1px solid var(--divider);border-radius:999px;align-self:flex-start;gap:2px;padding:4px;display:flex}.mode-btn{appearance:none;color:var(--text-secondary);background:0 0;border:none;border-radius:999px;padding:8px 18px;font-family:Manrope,sans-serif;font-size:.88rem;font-weight:600;transition:background-color .18s,color .18s}.mode-btn.active{background:var(--amber);color:#1a1206}.breadcrumb{align-items:center;gap:10px;display:flex}.back-btn{appearance:none;background:var(--surface);color:var(--text);border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:1rem;display:flex}.subtabs{gap:8px;display:flex}.subtab{appearance:none;border:1px solid var(--divider);background:var(--surface);color:var(--text-secondary);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600}.subtab.active{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)}.grid-list{flex-direction:column;gap:2px;display:flex}.row{border-radius:12px;align-items:center;gap:14px;min-height:56px;padding:10px 6px;display:flex}.row .art{border-radius:10px;width:44px;height:44px}.swatch{color:#ffffffeb;border-radius:10px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;font-family:Sora,sans-serif;font-size:.9rem;font-weight:700;display:flex}.swatch.round{border-radius:50%}.action-row{cursor:pointer}.action-row .swatch{background:var(--amber);color:#1a1206;font-size:1.1rem}.action-row .row-title{color:var(--amber)}.action-divider{background:var(--divider);height:1px;margin:6px 4px 8px}.row-main{cursor:pointer;flex-direction:column;flex:auto;gap:2px;min-width:0;display:flex}.row-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.row-sub{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.chevron{color:var(--text-hint);flex:none;font-size:.85rem}.empty-state{text-align:center;color:var(--text-hint);padding:2.5rem .5rem;font-size:.88rem;line-height:1.6}.np-top{cursor:pointer}.sheet-backdrop{opacity:0;pointer-events:none;z-index:8;background:#0000008c;transition:opacity .22s;position:fixed;inset:0}.sheet-backdrop.open{opacity:1;pointer-events:auto}.up-next-sheet{background:var(--surface-elevated);border-top:1px solid var(--divider);z-index:9;border-radius:20px 20px 0 0;flex-direction:column;max-width:760px;max-height:70vh;margin-inline:auto;transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -18px 40px -20px #0009}.up-next-sheet.open{transform:translateY(0)}.sheet-handle{background:var(--divider);border-radius:999px;flex:none;width:36px;height:4px;margin:10px auto 2px}.sheet-header{flex:none;justify-content:space-between;align-items:center;padding:8px 20px 10px;display:flex}.sheet-header h3{margin:0;font-family:Sora,sans-serif;font-size:1rem;font-weight:600}.sheet-close{appearance:none;border:1px solid var(--divider);background:var(--surface);color:var(--text-secondary);border-radius:50%;flex:none;width:32px;height:32px;font-size:.9rem}.sheet-list{padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));flex:auto;overflow-y:auto}.up-next-row{cursor:pointer}.up-next-row.current{background:var(--amber-wash);cursor:default;border-radius:12px}.up-next-row.current .row-title{color:var(--amber)}.now-playing-tag{letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-bottom:1px;font-family:JetBrains Mono,monospace;font-size:.63rem;font-weight:600;display:block}.jukebox-screen{gap:.75rem}.jukebox-cabinet{border:4px solid var(--brass);background:radial-gradient(120% 90% at 50% -10%, var(--cabinet-wood-light), var(--cabinet-wood) 55%, var(--cabinet-dark) 100%);border-radius:26px;flex-direction:column;padding:20px 16px 22px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px -20px #000c,inset 0 2px #ffffff0d}.jukebox-marquee{text-align:center;letter-spacing:.03em;color:var(--text);text-shadow:0 0 6px var(--neon-teal), 0 0 18px var(--neon-teal), 0 0 36px #3ff0dd80;font-family:Bungee,cursive;font-size:clamp(26px,8vw,32px)}.jukebox-tagline{text-align:center;color:var(--neon-pink);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 10px #ff3d7f99;margin-top:2px;font-family:Special Elite,monospace;font-size:12px}.jukebox-status{text-align:center;color:var(--text-secondary);margin:6px 0 14px;font-size:.8rem}.jukebox-slot{background:var(--card-cream);box-shadow:0 0 0 2px var(--brass), 0 6px 14px -6px #0009;color:var(--card-ink);border-radius:999px;align-items:center;gap:10px;padding:12px 16px;display:flex}.jukebox-slot input{color:var(--card-ink);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:.95rem}.jukebox-slot input::placeholder{color:#8a7a5c}.jukebox-cards{flex-direction:column;gap:10px;margin:14px 0 0;padding:0;list-style:none;display:flex}.jukebox-card{background:linear-gradient(180deg, var(--card-cream), var(--card-cream-shade));border-radius:12px;align-items:center;gap:12px;padding:10px 12px;animation:.35s both jukebox-card-in;display:flex;box-shadow:0 10px 20px -12px #000000b3,0 0 0 1px #00000026}@keyframes jukebox-card-in{0%{opacity:0;transform:translateY(10px)rotate(-2deg)scale(.97)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.jukebox-card{animation:none}}.jukebox-card-art,.jukebox-card-art-placeholder{object-fit:cover;border-radius:8px;flex:none;width:52px;height:52px}.jukebox-card-art-placeholder{color:#0000008c;justify-content:center;align-items:center;font-family:Special Elite,monospace;font-size:1rem;display:flex}.jukebox-card-main{flex:1;min-width:0}.jukebox-card-title{color:var(--card-ink);text-overflow:ellipsis;white-space:nowrap;font-family:Special Elite,monospace;font-size:.95rem;line-height:1.25;overflow:hidden}.jukebox-card-sub{color:#6b5c3f;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.75rem;overflow:hidden}.jukebox-card-meta{color:#6b5c3f;flex:none;font-family:JetBrains Mono,monospace;font-size:.72rem}.jukebox-card-queue{background:linear-gradient(180deg, var(--neon-teal), #12a396);color:#04211d;border:none;border-radius:50%;flex:none;width:34px;height:34px;font-size:1.1rem;font-weight:700;line-height:1;box-shadow:0 0 10px #3ff0dd99}.jukebox-card-queue:disabled{opacity:.6}.jukebox-now-playing{border:1px solid var(--brass);background:linear-gradient(#231609,#130b05);border-radius:16px;align-items:center;gap:14px;margin-top:18px;padding:14px;display:flex;box-shadow:0 0 20px #3ff0dd1f}.jukebox-np-art,.jukebox-np-art-placeholder{object-fit:cover;border-radius:10px;flex:none;width:56px;height:56px}.jukebox-np-art-placeholder{color:#0000008c;justify-content:center;align-items:center;font-family:Special Elite,monospace;display:flex}.jukebox-np-meta{min-width:0}.jukebox-np-label{letter-spacing:.14em;text-transform:uppercase;color:var(--neon-teal);font-family:Special Elite,monospace;font-size:.68rem}.jukebox-np-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-family:Bungee,cursive;font-size:1.05rem;overflow:hidden}.jukebox-np-artist{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.8rem;overflow:hidden}.jukebox-upnext-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-hint);margin:16px 0 8px 2px;font-family:Special Elite,monospace;font-size:.68rem}.jukebox-upnext{gap:10px;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.jukebox-ticket{border:1px solid var(--brass);background:linear-gradient(#241a12,#170f0a);border-radius:10px;flex:none;align-items:center;gap:8px;max-width:200px;padding:8px 10px;display:flex}.jukebox-ticket-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-family:Special Elite,monospace;font-size:.8rem;overflow:hidden}.jukebox-ticket-artist{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.jukebox-ticket-remove{width:22px;height:22px;color:var(--text-secondary);background:#ffffff14;border:none;border-radius:50%;flex:none;font-size:.9rem;line-height:1}.jukebox-screen .promote-button{margin-top:4px}