@font-face{font-family:Morris Roman;src:url(../fonts/MorrisRoman-Black.ttf)format("truetype");font-display:swap}:root{--bg:#141118;--surface:#1d1823;--surface-2:#262030;--surface-3:#30293b;--border:#3a3147;--text:#ede6d8;--muted:#a99d8f;--faint:#776c80;--gold:#d9a74a;--gold-soft:#d9a74a24;--red:#d0584a;--radius:10px;--title:"Morris Roman", "Palatino Linotype", Georgia, serif;--dither:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'><rect x='0' y='0' width='1' height='1' fill='%23000' fill-opacity='0.22'/><rect x='1' y='0' width='1' height='1' fill='%23fff' fill-opacity='0.004'/><rect x='2' y='0' width='1' height='1' fill='%23000' fill-opacity='0.165'/><rect x='3' y='0' width='1' height='1' fill='%23fff' fill-opacity='0.013'/><rect x='0' y='1' width='1' height='1' fill='%23fff' fill-opacity='0.022'/><rect x='1' y='1' width='1' height='1' fill='%23000' fill-opacity='0.11'/><rect x='2' y='1' width='1' height='1' fill='%23fff' fill-opacity='0.031'/><rect x='3' y='1' width='1' height='1' fill='%23000' fill-opacity='0.055'/><rect x='0' y='2' width='1' height='1' fill='%23000' fill-opacity='0.138'/><rect x='1' y='2' width='1' height='1' fill='%23fff' fill-opacity='0.018'/><rect x='2' y='2' width='1' height='1' fill='%23000' fill-opacity='0.193'/><rect x='3' y='2' width='1' height='1' fill='%23fff' fill-opacity='0.009'/><rect x='0' y='3' width='1' height='1' fill='%23fff' fill-opacity='0.035'/><rect x='1' y='3' width='1' height='1' fill='%23000' fill-opacity='0.028'/><rect x='2' y='3' width='1' height='1' fill='%23fff' fill-opacity='0.026'/><rect x='3' y='3' width='1' height='1' fill='%23000' fill-opacity='0.083'/></svg>") 0 0 / 8px 8px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "gg sans", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--dither), radial-gradient(ellipse at top, #221a2b 0%, var(--bg) 60%) fixed, var(--bg);color:var(--text);font:14px/1.4 var(--sans);-webkit-font-smoothing:antialiased;background-attachment:fixed;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}[hidden]{display:none!important}h1,h2{margin:0;font-weight:600}h2{font-size:17px}.muted,.sub{color:var(--muted)}.sub{font-size:12px}.app{flex-direction:column;gap:12px;max-width:1400px;height:100%;margin:0 auto;padding:12px;display:flex}.topbar{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.logo{background:linear-gradient(135deg, var(--gold), #a8702a);color:#241a0e;border-radius:9px;flex-shrink:0;place-items:center;width:34px;height:34px;font-size:18px;display:grid}.brand-name,.brand-title{font-family:var(--title);letter-spacing:.02em;font-size:22px;font-weight:400;line-height:1}.room-label{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.listeners{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;display:flex}.conn{color:var(--gold);margin-right:6px;font-size:12px}.avatar{background:var(--surface-3);border:2px solid var(--surface);border-radius:50%;place-items:center;width:28px;height:28px;font-size:12px;font-weight:600;display:grid;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.layout{flex-direction:column;flex:1;gap:12px;min-height:0;display:flex}.layout.wide{grid-template-columns:minmax(340px,1fr) minmax(380px,1.15fr);display:grid}.col-left{flex-direction:column;gap:12px;min-height:0;display:flex}.layout:not(.wide) .col-left{flex-shrink:0}.panel{background:var(--dither), linear-gradient(170deg, #211b28, #19141e);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.panel>div:not([hidden]),.panel-body{flex-direction:column;flex:1;min-height:0;display:flex}.panel-body{gap:10px;padding:12px;overflow-y:auto}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.head-actions{gap:6px;display:flex}.tabs{border-bottom:1px solid var(--border);flex-shrink:0;gap:2px;padding:6px 6px 0;display:flex;overflow-x:auto}.tabs button{color:var(--muted);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:8px 12px 10px;font-weight:500}.tabs button:hover{color:var(--text)}.tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}.btn{background:var(--gold);color:#20170c;white-space:nowrap;border:1px solid #0000;border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:disabled{opacity:.5;cursor:default}.btn.ghost{background:var(--surface-2);color:var(--text);border-color:var(--border);padding:5px 10px;font-size:13px;font-weight:500}.btn.ghost:hover{background:var(--surface-3)}.btn.danger{color:var(--red);border-color:var(--red)}.icon-btn{aspect-ratio:1;width:32px;height:32px;color:var(--muted);background:0 0;border:none;border-radius:8px;flex-shrink:0;place-items:center;padding:0;display:inline-grid;position:relative}.icon-btn:hover{background:var(--surface-3);color:var(--text)}.icon-btn.on{color:var(--gold)}.icon-btn.danger:hover{color:var(--red)}.icon-btn.star:not(.on) svg path{fill:none;stroke:currentColor;stroke-width:1.6px}.loop-one{font-size:9px;font-weight:700;position:absolute;bottom:2px;right:3px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.now-playing{background:var(--dither), radial-gradient(circle at 90px 80px, #d9a74a17, transparent 260px), linear-gradient(160deg, var(--surface-2), var(--surface));border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;flex-shrink:0;gap:10px;padding:14px;display:flex;position:relative}.turntable{--tt:116px;width:calc(var(--tt) * 1.3);height:var(--tt);image-rendering:pixelated;filter:drop-shadow(0 6px 12px #00000073);flex-shrink:0}.layout.wide .turntable{--tt:136px}.turntable.interactive{touch-action:none}.turntable.interactive.over-arm{cursor:grab}.turntable.interactive.dragging{cursor:grabbing}.np-head{align-items:center;gap:14px;display:flex}.np-head>.star{align-self:flex-start}.np-text{flex:1;min-width:0}.np-label{text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-size:11px;font-weight:600}.np-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:17px;font-weight:600;line-height:1.25;display:-webkit-box;overflow:hidden}.np-meta{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.np-progress{align-items:center;gap:8px;display:flex}.time{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;min-width:36px;font-size:11px}.np-transport{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.np-controls{justify-content:center;align-items:center;gap:clamp(0px,1vw,6px);min-width:0;display:flex}.play-btn{aspect-ratio:1;background:var(--gold);color:#20170c;border:none;border-radius:50%;flex:0 0 46px;place-items:center;width:46px;height:46px;margin:0 4px;padding:0;display:grid;box-shadow:0 4px 14px #d9a74a4d}.play-btn:hover{filter:brightness(1.1)}.np-volume{align-items:center;gap:4px;width:100%;min-width:0;max-width:170px;display:flex}.np-error{color:var(--red);font-size:12px}input[type=range]{appearance:none;background:linear-gradient(to right, transparent var(--pct,0%), var(--surface-3) var(--pct,0%)), var(--ramp-bg,linear-gradient(var(--gold), var(--gold))) 0 0 / 100% 100%;height:4px;image-rendering:pixelated;cursor:pointer;border-radius:2px;flex:1;min-width:0}input[type=range]:disabled{cursor:default;opacity:.5}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:none;border-radius:50%;width:13px;height:13px}input[type=range]::-moz-range-thumb{background:var(--text);border:none;border-radius:50%;width:13px;height:13px}.gesture-overlay{border-radius:var(--radius);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:var(--gold);background:#141118db;border:none;justify-content:center;align-items:center;gap:10px;font-size:18px;font-weight:600;display:flex;position:absolute;inset:0}.track-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.track-list.loading{opacity:.5}.track-list li{border-radius:8px;position:relative}.track-list li.dragging{z-index:2;background:var(--surface-3);box-shadow:0 8px 24px #00000080}.track{border-radius:8px;align-items:center;gap:10px;padding:6px;display:flex}.track:hover{background:var(--surface-2)}.thumb{aspect-ratio:16/9;object-fit:cover;background:var(--surface-3);border-radius:5px;flex-shrink:0;width:64px}.track-text{flex:1;min-width:0}.track-title{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.track-meta{color:var(--muted);flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12px;display:flex}.track-meta>span{white-space:nowrap;text-overflow:ellipsis;max-width:220px;overflow:hidden}.track-actions{flex-shrink:0;align-items:center;display:flex}@media (hover:hover){.track .track-actions .icon-btn:not(.on){opacity:.55}.track:hover .track-actions .icon-btn{opacity:1}}.grip{color:var(--faint);cursor:grab;touch-action:none;background:0 0;border:none;flex-shrink:0;align-items:center;gap:2px;padding:4px 2px;display:flex}.grip:active{cursor:grabbing}.grip .pos{text-align:right;font-variant-numeric:tabular-nums;min-width:18px;font-size:12px}.tag,.tag-select{background:var(--gold-soft);color:var(--gold);border:1px solid #0000;border-radius:999px;padding:1px 6px;font-size:11px}.tag-select{cursor:pointer;appearance:none}.tag-select option{background:var(--surface);color:var(--text)}.search-bar{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:9px;align-items:center;gap:8px;padding:4px 4px 4px 10px;display:flex}.search-bar:focus-within{border-color:var(--gold)}.search-bar input{background:0 0;border:none;outline:none;flex:1;min-width:0;padding:6px 0}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:12px}.chip:hover{color:var(--text);border-color:var(--faint)}.chip.on{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}.segmented{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px;display:inline-flex}.segmented button{color:var(--muted);background:0 0;border:none;border-radius:6px;padding:4px 12px;font-size:13px}.segmented button.on{background:var(--surface-3);color:var(--text)}.notice{background:var(--gold-soft);border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:13px;display:flex}.notice.error{color:#f0a197;background:#d0584a24}.empty{color:var(--muted);text-align:center;flex-direction:column;align-items:center;gap:12px;max-width:420px;margin:0 auto;padding:28px 12px;display:flex}.empty p{margin:0}.center-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;height:100%;padding:24px;display:flex}.center-screen p{max-width:420px;margin:0}.text-input{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;width:min(280px,100%);padding:9px 12px}.spinner{border:3px solid var(--surface-3);border-top-color:var(--gold);border-radius:50%;width:30px;height:30px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toasts{pointer-events:none;z-index:10;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 32px);display:flex;position:fixed;bottom:14px;left:50%;transform:translate(-50%)}.toast{background:var(--surface-3);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:13px;animation:.2s ease-out rise;box-shadow:0 6px 20px #00000073}.toast.error{border-color:var(--red);color:#f0a197}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--surface-3);border:2px solid var(--surface);border-radius:5px}@media (width<=560px){.app{gap:8px;padding:8px}.thumb{width:52px}}@media (height<=300px){.layout>.panel,.col-left>.panel,.np-volume,.topbar{display:none}}.seek{cursor:pointer;touch-action:none;outline:none;flex:1;align-items:center;min-width:0;height:22px;display:flex;position:relative}.seek.disabled{cursor:default;opacity:.5}.seek-track{background:var(--surface-3);border-radius:2px;width:100%;height:4px;transition:height .1s;position:relative}.seek:hover:not(.disabled) .seek-track,.seek:focus-visible .seek-track{height:6px}.seek-fill{width:var(--pct);border-radius:inherit;background:var(--gold);position:absolute;inset:0 auto 0 0;overflow:hidden}.seek-fill canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.seek-thumb{top:50%;left:var(--pct);background:var(--text);border-radius:50%;width:13px;height:13px;transition:transform .1s;position:absolute;transform:translate(-50%,-50%)scale(0)}.seek:hover:not(.disabled) .seek-thumb,.seek:focus-visible .seek-thumb,.seek:active .seek-thumb{transform:translate(-50%,-50%)scale(1)}.seek:focus-visible .seek-track{outline:2px solid var(--gold);outline-offset:4px}.seek-tip{background:var(--surface-3);border:1px solid var(--border);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;border-radius:5px;padding:1px 6px;font-size:11px;position:absolute;bottom:100%;transform:translate(-50%)}.added-by{background:var(--surface-3);color:var(--text);border-radius:999px;align-items:center;gap:5px;max-width:160px;padding:1px 8px 1px 1px;font-size:11px;display:inline-flex!important}.added-by .avatar{border:none;flex-shrink:0}.np-meta{align-items:center;gap:8px;margin-top:3px;display:flex}.np-channel{text-overflow:ellipsis;min-width:0;overflow:hidden}.center-screen .brand-title{color:var(--gold);font-size:44px}.now-playing{container-type:inline-size}@container (width<=430px){.turntable,.layout.wide .turntable{--tt:84px}.np-transport{grid-template-columns:1fr}.np-controls{order:-1}.np-volume{max-width:none}}@container (width<=250px){.turntable{display:none}.np-controls .icon-btn{width:28px}.play-btn{flex-basis:40px;width:40px;height:40px}}.demo-about p{max-width:60ch;margin:0;line-height:1.55}