:root{--color-bg:var(--ink);--color-surface-1:var(--ink-raised);--color-surface-2:var(--steel-800);--color-surface-3:var(--steel-700);--color-text-1:var(--fg-1);--color-text-2:var(--fg-2);--color-text-3:var(--fg-3);--color-accent:var(--lime);--color-border:var(--hair)}html,body,#root{height:100%}body{font-family:var(--font-sans);color:var(--fg-1);-webkit-font-smoothing:antialiased;margin:0}#root{flex-direction:column;display:flex}.ph{line-height:0;display:inline-block}.msk-label{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--fg-3);font-size:11px;font-weight:600}.app-body{flex:1;min-height:0;display:flex}.app-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.app-screen{flex:1;min-height:0;overflow-y:auto}.sidebar{border-right:1px solid var(--hair);background:linear-gradient(#0000001f,#00000038);flex-direction:column;flex-shrink:0;width:236px;min-height:0;display:flex;overflow-x:hidden}.sb-scroll{flex:1;min-height:0;padding:14px 12px 6px;overflow:hidden auto}.sb-brand{font-family:var(--font-display,var(--font-sans));letter-spacing:var(--track-snug);color:var(--fg-1);align-items:center;gap:9px;padding:4px 8px 14px;font-size:18px;font-weight:700;display:flex}.sb-brand .ph{color:var(--lime);font-size:20px}.sb-sec{margin-bottom:18px}.sb-sec .msk-label{padding:0 8px 7px;display:block}.nav-item{box-sizing:border-box;border-radius:var(--r-md);width:100%;min-width:0;color:var(--fg-2);cursor:pointer;text-align:left;transition:background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);background:0 0;border:1px solid #0000;align-items:center;gap:11px;padding:8px 10px;font-size:14px;font-weight:500;text-decoration:none;display:flex}.nav-item .ph{color:var(--fg-3);flex-shrink:0;font-size:18px}.nav-item>span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.nav-item:hover{color:var(--fg-1);background:#ffffff0a}.nav-item:hover .ph{color:var(--fg-2)}.nav-item.active{color:var(--fg-1);background:linear-gradient(#bef26429,#bef26412);border-color:#bef26440;box-shadow:inset 0 1px #ffffff0a}.nav-item.active .ph{color:var(--lime)}.nav-item .nav-badge{font-family:var(--font-mono);color:var(--fg-on-ember,#fff);background:var(--ember);border-radius:var(--r-pill);margin-left:auto;padding:1px 6px;font-size:10px;font-weight:600}.nav-item .nav-count{font-family:var(--font-mono);color:var(--fg-3);margin-left:auto;font-size:11px}.pl-item{box-sizing:border-box;border-radius:var(--r-md);width:100%;min-width:0;color:var(--fg-2);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:9px;padding:6px 10px;font-size:13px;text-decoration:none;display:flex}.pl-item .ph{color:var(--fg-3);font-size:15px}.pl-item .pl-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.pl-item:hover{color:var(--fg-1);background:#ffffff0a}.pl-item.active{color:var(--fg-1);border-color:var(--hair);background:#ffffff0d}.pl-item .sync-led{border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-left:auto}.sync-synced{background:var(--lime);box-shadow:0 0 5px var(--lime)}.sync-pending{background:var(--warning)}.sync-conflict{background:var(--ember);box-shadow:0 0 5px var(--ember)}.sb-foot{border-top:1px solid var(--hair);flex-direction:column;flex-shrink:0;gap:4px;padding:10px 12px;display:flex}.user-chip{border-radius:var(--r-md);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:6px;display:flex}.user-chip:hover{background:#ffffff0a}.user-av{width:30px;height:30px;color:var(--lime-ink);background:linear-gradient(180deg, var(--lime-bright), var(--lime-deep));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.user-meta{flex:1;min-width:0;line-height:1.2}.user-meta .nm{color:var(--fg-1);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.user-meta .rl{color:var(--fg-3);font-size:11px}.user-chip .uc-action{color:var(--fg-3);margin-left:auto;font-size:16px;display:inline-flex}.user-chip .uc-action:hover{color:var(--fg-1)}.conn{box-sizing:border-box;border-radius:var(--r-pill);width:100%;color:var(--fg-2);cursor:default;background:var(--steel-900);border:1px solid var(--hair);box-shadow:var(--shadow-inset-well);align-items:center;gap:7px;padding:5px 11px 5px 9px;font-size:12px;font-weight:600;display:flex}.conn .led{border-radius:50%;width:7px;height:7px;box-shadow:0 0 6px}.conn.online .led{background:var(--lime);color:var(--lime)}.conn.offline .led{background:var(--fg-3);color:var(--fg-3);box-shadow:none}.conn.syncing .led{background:var(--info);color:var(--info);animation:conn-pulse 1.2s var(--ease-out) infinite}.conn.error .led{background:var(--ember);color:var(--ember)}@keyframes conn-pulse{50%{opacity:.35}}.iconbtn{border-radius:var(--r-md);border:1px solid var(--hair-strong);background:var(--grad-key);width:30px;height:30px;box-shadow:var(--shadow-raised);color:var(--fg-2);cursor:pointer;transition:background var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick), transform var(--dur-quick);justify-content:center;align-items:center;font-size:16px;display:inline-flex}.iconbtn:hover{background:var(--grad-key-hover);color:var(--fg-1)}.iconbtn:active{box-shadow:var(--shadow-pressed,var(--shadow-inset-well));transform:translateY(1px)}.iconbtn.sm{width:26px;height:26px;font-size:14px}.iconbtn.on{color:var(--lime);border-color:#bef2644d}.arttile{flex-shrink:0;display:block;position:relative;overflow:hidden;box-shadow:0 1px 2px #0006,0 0 0 1px #00000040}.arttile-sheen{pointer-events:none;background:linear-gradient(155deg,#ffffff52,#0000 45%);position:absolute;inset:0}.arttile-initials{font-family:var(--font-display,var(--font-sans));color:#ffffffd1;text-shadow:0 1px 2px #0006;letter-spacing:.02em;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.avail{align-items:center;gap:4px;font-size:14px;display:inline-flex}.avail .avail-pct{font-family:var(--font-mono);font-size:10px}.player{border-top:1px solid var(--hair-strong);background:linear-gradient(180deg, var(--steel-800), var(--steel-900));flex-shrink:0;grid-template-columns:minmax(220px,1fr) minmax(380px,2fr) minmax(220px,1fr);align-items:center;gap:16px;height:84px;padding:0 18px;display:grid;box-shadow:inset 0 1px #ffffff0d}.player.empty{color:var(--fg-3);justify-content:center;font-size:13px;display:flex}.pl-now{align-items:center;gap:13px;min-width:0;display:flex}.pl-now-tt{min-width:0}.pl-now .t{color:var(--fg-1);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.pl-now .a{color:var(--fg-3);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.pl-srcbadge{align-items:center;gap:4px;font-size:10px;font-weight:600;display:inline-flex}.pl-center{flex-direction:column;align-items:center;gap:7px;display:flex}.pl-transport{align-items:center;gap:14px;display:flex}.pl-tbtn{color:var(--fg-2);cursor:pointer;transition:color var(--dur-quick);background:0 0;border:none;align-items:center;font-size:19px;display:flex}.pl-tbtn:hover{color:var(--fg-1)}.pl-tbtn.on{color:var(--lime)}.pl-play{width:40px;height:40px;color:var(--lime-ink);background:var(--grad-primary);border:1px solid var(--lime-deep);box-shadow:0 1px 0 #ffffff4d inset, var(--glow-lime), 0 2px 4px #00000059;cursor:pointer;transition:filter var(--dur-quick), transform var(--dur-quick);border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex}.pl-play:hover{filter:brightness(1.05)}.pl-play:active{transform:translateY(1px)}.pl-seek{align-items:center;gap:10px;width:100%;max-width:560px;display:flex}.pl-time{font-family:var(--font-mono);color:var(--fg-3);text-align:center;flex-shrink:0;width:36px;font-size:11px}.pl-seek-slider{flex:1}.pl-right{justify-content:flex-end;align-items:center;gap:12px;display:flex}.pl-vol{color:var(--fg-3);align-items:center;gap:8px;display:flex}.pl-vol-slider{width:84px}.qd{border-left:1px solid var(--hair);width:336px;transition:width .24s var(--ease-out), border-left-color .24s var(--ease-out);background:linear-gradient(#0000001a,#0003);flex-shrink:0;overflow:hidden}.qd.closed{border-left-color:#0000;width:0}.qd-inner{flex-direction:column;width:336px;height:100%;min-height:0;display:flex}.qd-head{border-bottom:1px solid var(--hair);flex-shrink:0;padding:16px 18px 12px}.qd-head .row{align-items:center;gap:8px;display:flex}.qd-head h3{color:var(--fg-1);margin:0;font-size:15px;font-weight:700}.qd-src{color:var(--fg-3);align-items:center;gap:7px;margin-top:4px;font-size:12px;display:flex}.qd-scroll{flex:1;min-height:0;padding:12px 12px 18px;overflow-y:auto}.qd-now{border-radius:var(--r-md);background:linear-gradient(#bef26421,#bef2640d);border:1px solid #bef26433;align-items:center;gap:11px;margin-bottom:14px;padding:10px;display:flex}.qd-now .qt{flex:1;min-width:0}.qd-now .qt .t{color:var(--fg-1);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.qd-now .qt .r{color:var(--fg-3);font-size:11px}.qrow{border-radius:var(--r-md);cursor:grab;text-align:left;background:0 0;border:none;align-items:center;gap:11px;width:100%;padding:8px;display:flex}.qrow:hover{background:#ffffff0a}.qrow .grip{color:var(--fg-3);cursor:grab;font-size:15px;display:inline-flex}.qrow .qt{flex:1;min-width:0}.qrow .qt .t{color:var(--fg-1);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.qrow .qt .r{color:var(--fg-3);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:4px;font-size:11px;display:flex;overflow:hidden}.qrow .qt .r .ph{color:var(--lime);font-size:11px}.qd-radio{border-radius:var(--r-md);background:var(--steel-900);border:1px solid var(--hair);box-shadow:var(--shadow-inset-well);margin-bottom:14px;padding:12px}.qd-radio .row{align-items:center;gap:8px;margin-bottom:10px;display:flex}.qd-radio .row .ph{color:var(--lime)}.expl{align-items:center;gap:10px;display:flex}.expl .lab{color:var(--fg-3);white-space:nowrap;font-size:11px}.expl-slider{flex:1}.qd-empty{text-align:center;color:var(--fg-3);padding:40px 20px;font-size:13px}.qd-loadmore{text-align:center;color:var(--fg-3);padding:14px 0;font-size:12px}.page-title{font-family:var(--font-display,var(--font-sans));letter-spacing:var(--track-snug);color:var(--fg-1);margin:0;font-size:22px;font-weight:700}.sub-nav{border-bottom:1px solid var(--hair);gap:4px;display:flex}.sub-nav-item{color:var(--fg-2);border-bottom:2px solid #0000;margin-bottom:-1px;padding:8px 12px;font-size:14px;font-weight:500;transition:color .12s,border-color .12s}.sub-nav-item:hover{color:var(--fg-1)}.sub-nav-item.active{color:var(--fg-1);border-bottom-color:var(--lime)}.sb-sec-link.active{color:var(--fg-1)}