:root{color-scheme:dark;--bg:#0b0b0d;--panel:#151519;--line:#2b2b31;--text:#f7f5f2;--muted:#a8a5a0;--accent:#f27622;--accent2:#ffad55;--danger:#d84b45;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}html,body{min-width:280px;min-height:100%;margin:0;background:radial-gradient(circle at 95% 0,rgba(242,118,34,.16),transparent 35%),var(--bg);color:var(--text)}body{padding:14px}.dock-shell{display:grid;gap:12px;max-width:560px;margin:0 auto}.dock-header,.queue-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{display:block;color:var(--accent2);font-size:10px;font-weight:900;letter-spacing:.18em}.dock-header h1,.queue-head h2{margin:3px 0 0;font-size:20px}.connection-state{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:700}.connection-state i,.playback-state:before{width:8px;height:8px;border-radius:50%;background:#72727c;content:"";display:inline-block}.connection-state.online i{background:#43d17a;box-shadow:0 0 12px rgba(67,209,122,.65)}.connection-state.offline i{background:var(--danger)}.now-playing,.queue-card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(28,28,33,.98),rgba(17,17,20,.98));box-shadow:0 14px 35px rgba(0,0,0,.25)}.now-playing{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:14px;padding:14px}.cover{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,var(--accent),#762d06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.cover img{width:100%;height:100%;object-fit:cover}.cover span{font-size:22px;font-weight:1000;font-style:italic}.track-copy{min-width:0}.playback-state{display:flex;align-items:center;gap:7px;color:var(--accent2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.playback-state.playing:before{background:#43d17a}.playback-state.paused:before{background:#f5bb45}.playback-state.stopped:before{background:#72727c}.track-copy h2{margin:7px 0 4px;font-size:17px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-copy p{margin:0;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dock-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.dock-controls button{min-height:42px;border:1px solid #393940;border-radius:11px;background:#1b1b20;color:var(--text);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.dock-controls button:hover,.dock-controls button:focus-visible{border-color:var(--accent);background:#262027;outline:none}.dock-controls button:disabled{opacity:.45;cursor:wait}.dock-controls .danger{border-color:rgba(216,75,69,.72);color:#fff;background:linear-gradient(145deg,#b92f2a,#7b211e);box-shadow:0 7px 18px rgba(216,75,69,.2)}.dock-controls .danger:hover,.dock-controls .danger:focus-visible{border-color:#ff817b;background:linear-gradient(145deg,#d34039,#932723)}.dock-feedback{min-height:18px;margin:0;color:var(--accent2);font-size:12px;text-align:center}.queue-card{padding:13px}.queue-head h2{font-size:14px}.queue-head span{display:grid;place-items:center;min-width:28px;height:24px;border-radius:20px;background:rgba(242,118,34,.16);color:var(--accent2);font-size:12px;font-weight:900}.queue-list{display:grid;gap:7px;margin:11px 0 0;padding:0;list-style:none;max-height:240px;overflow:auto}.queue-list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;padding:9px;border-radius:10px;background:#101013}.queue-list li:before{content:counter(list-item);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#25252b;color:var(--muted);font-size:10px;font-weight:900}.queue-list strong,.queue-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-list strong{font-size:12px}.queue-list small{margin-top:3px;color:var(--muted);font-size:10px}.queue-list .empty{display:block;color:var(--muted);font-size:12px;text-align:center}.queue-list .empty:before{display:none}@media(max-width:380px){body{padding:10px}.dock-controls{grid-template-columns:repeat(2,1fr)}.now-playing{grid-template-columns:56px 1fr}.cover{width:56px;height:56px}.track-copy h2{font-size:14px}}