:root{--bg-0: #07080b;--bg-1: #0e1116;--bg-2: #161a22;--bg-3: #1f242e;--fg: #e9ecf2;--muted: #8a90a0;--muted-2: #5d6373;--line: #262b36;--accent: #ff7a3d;--accent-2: #ffb37a;--accent-glow: rgba(255, 122, 61, .35);--ok: #4ec9a6;--warn: #ffd166;--err: #ec6a6a}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(1200px 600px at 30% -10%,rgba(255,122,61,.06),transparent 60%),var(--bg-0);color:var(--fg);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overflow:hidden}#app{height:100%;width:100%}.login{display:grid;place-items:center;height:100%}.login form{display:grid;gap:8px;padding:24px;background:var(--bg-1);border:1px solid var(--line);min-width:280px}.login input,.login button{padding:10px 12px;background:var(--bg-2);color:var(--fg);border:1px solid var(--line);font-size:14px}.login button{background:var(--accent);color:#1a0a00;font-weight:700;cursor:pointer;border-color:var(--accent)}.login .err{color:var(--err);font-size:12px;min-height:1em}.master{display:grid;grid-template-rows:56px auto 1fr;height:100%;gap:0}.master .topbar{display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--bg-1);font-size:13px}.master .topbar h1{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em}.master .topbar .grow{flex:1}.master .topbar .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;height:32px;background:var(--bg-2);border:1px solid var(--line);font-size:12px}.master .topbar select,.master .topbar input,.master .topbar button{background:var(--bg-2);color:var(--fg);border:1px solid var(--line);height:32px;padding:0 12px;font-size:12px}.master .topbar button{cursor:pointer}.master .topbar .peers{color:var(--muted);font-variant-numeric:tabular-nums}.master .topbar .status-on{color:var(--ok)}.master .topbar .status-off{color:var(--muted-2)}.master .stage{padding:12px 16px 8px;overflow:hidden;min-height:0}.master .np{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:stretch;background:linear-gradient(135deg,#ffffff08,#ffffff03),var(--bg-1);border:1px solid var(--line);padding:14px;position:relative;overflow:hidden}.master .np:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(600px 220px at 0% 0%,var(--accent-glow),transparent 70%);opacity:.35;pointer-events:none}.master .np>*{position:relative}.master .np .art{height:clamp(180px,28vh,300px);aspect-ratio:1 / 1;width:auto;background:var(--bg-2);background-size:cover;background-position:center;box-shadow:0 24px 60px #0009;border:1px solid var(--line);position:relative;overflow:hidden;flex-shrink:0}.master .np .art .art-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.master .np .art.empty:after{content:"♪";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:64px;color:var(--muted-2)}.master .np .meta{display:grid;gap:6px;align-content:center;min-width:0}.master .np .meta .tiny{color:var(--muted-2);text-transform:uppercase;letter-spacing:.14em;font-size:10px}.master .np .meta h2{margin:0;font-size:clamp(20px,2.4vw,34px);font-weight:800;line-height:1.05;letter-spacing:-.01em}.master .np .meta .genres{display:flex;flex-wrap:wrap;gap:6px}.master .np .meta .tag{padding:3px 10px;background:#ffb37a1a;color:var(--accent-2);border:1px solid rgba(255,179,122,.18);font-size:12px}.master .np .meta .stats{display:flex;gap:16px;color:var(--muted);font-size:13px}.master .np .meta .stats b{color:var(--fg)}.master .np .transport{display:flex;align-items:center;gap:10px;margin-top:2px}.master .ctrl{width:38px;height:38px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);font-size:15px;cursor:pointer;transition:background .12s,border-color .12s,transform 80ms}.master .ctrl:hover:not(:disabled){background:var(--bg-3);border-color:var(--accent)}.master .ctrl:active:not(:disabled){transform:scale(.96)}.master .ctrl:disabled{opacity:.35;cursor:default}.master .ctrl.primary{width:46px;height:46px;background:var(--accent);border-color:var(--accent);color:#1a0a00;font-size:18px;font-weight:900;box-shadow:0 6px 20px var(--accent-glow)}.master .ctrl.primary:hover:not(:disabled){background:#ff8a55;border-color:#ff8a55}.master .vol{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:12px;flex:1;max-width:320px}.master .vol .vol-icon{font-size:14px}.master .vol input[type=range]{flex:1;accent-color:var(--accent)}.master .vol .val{width:36px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.master .np .peer-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:4px}.master .np .peer-line-label{color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.master .peer{display:inline-flex;align-items:center;gap:6px}.master .peer .role-tag{font-size:10px;padding:1px 6px;background:var(--bg-2);border:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em}.master .peer.role-display .role-tag{color:var(--accent-2);border-color:#ff7a3d66}.master .stations-bar{padding:0 24px 20px;overflow:hidden;min-height:0}.master .err-banner{background:#ec6a6a1f;border:1px solid rgba(236,106,106,.4);color:var(--err);padding:4px 10px;font-size:12px;margin-left:12px}.master .np .meta .title-row{display:flex;align-items:center;gap:14px}.master .np .meta .title-row h2{margin:0;flex:1;min-width:0;word-break:break-word}.master .np .meta .fav-toggle{width:40px;height:40px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .12s,color .12s,border-color .12s}.master .np .meta .fav-toggle:hover{border-color:var(--accent);color:var(--accent-2)}.master .np .meta .fav-toggle.on{background:linear-gradient(180deg,#ff7a3d40,#ff7a3d1f);border-color:#ff7a3d80;color:var(--accent);text-shadow:0 0 12px var(--accent-glow)}.master .topbar .out-btn{cursor:pointer;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.master .topbar .out-btn.active{border-color:var(--accent);color:var(--accent-2)}.out-popover-wrap{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:start center;padding-top:64px;z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.out-popover{width:min(440px,92vw);max-height:70vh;overflow:auto;background:var(--bg-1);border:1px solid var(--line);padding:14px;box-shadow:0 24px 80px #00000080}.out-popover-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.out-popover-head h3{flex:1;margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.out-popover .close{width:32px;height:32px;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);font-size:18px;cursor:pointer}.out-popover .device-list{display:grid;gap:6px}.out-popover .device{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;font-size:13px;color:var(--fg);text-align:left}.out-popover .device:hover{border-color:var(--accent)}.out-popover .device.active{background:linear-gradient(180deg,#ff7a3d2e,#ff7a3d14);border-color:#ff7a3d66;color:var(--accent-2)}.out-popover .device .dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2);flex-shrink:0}.out-popover .device.active .dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.out-popover .device .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.out-popover .device .kind{color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.master .favs-card{background:var(--bg-1);border:1px solid var(--line);padding:10px 12px;height:100%;display:flex;flex-direction:column;min-height:0}.master .favs-card .favs-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-shrink:0}.master .favs-card .favs-header h3{flex:1;margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}.master .favs-card .genre-filter{background:var(--bg-2);color:var(--fg);border:1px solid var(--line);padding:4px 8px;font-size:12px;max-width:200px}.master .favs-nav{width:32px;height:32px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,transform 80ms}.master .favs-nav:hover{background:var(--bg-3);border-color:var(--accent)}.master .favs-nav:active{transform:scale(.94)}.master .favs-grid{flex:1;min-height:0;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:8px;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-gutter:stable;cursor:grab;-webkit-user-select:none;user-select:none;scroll-behavior:smooth}.master .favs-grid.dragging{cursor:grabbing;scroll-behavior:auto}.master .favs-grid.dragging .fav-tile{pointer-events:none}.master .favs-grid::-webkit-scrollbar{height:10px}.master .fav-tile{display:grid;grid-template-rows:1fr auto;gap:6px;padding:6px;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);cursor:pointer;text-align:left;transition:transform 80ms ease,border-color .12s,background .12s;height:calc((100% - 8px)/2);aspect-ratio:1 / 1;flex-shrink:0;scroll-snap-align:start;min-height:0}.master .fav-tile:hover{border-color:var(--accent);background:var(--bg-3)}.master .fav-tile:active{transform:scale(.97)}.master .fav-tile.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 0 16px var(--accent-glow)}.master .fav-art{width:100%;min-height:0;background:var(--bg-1) center/cover no-repeat;position:relative;aspect-ratio:1 / 1;justify-self:center;max-height:100%}.master .fav-art.empty:after{content:"♪";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted-2);font-size:28px}.master .fav-name{font-size:12px;line-height:1.2;color:var(--fg);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.master .favs-empty{color:var(--muted);font-size:12px;padding:12px 4px;text-align:center;width:100%}