:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background:#10121b;color:#e9eaf6}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #b7a5ff;outline-offset:2px}::selection{background:#7564b7;color:white}.app{max-width:640px;margin:0 auto;min-height:100vh;background:radial-gradient(ellipse 380px 180px at 15% -30px,#35304f66,transparent),#10121b;padding:22px 20px 12px}.header{display:flex;align-items:center;gap:13px}.brand-symbol{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:#e0d9ff;background:linear-gradient(145deg,#6756aa,#323d7c);box-shadow:0 8px 26px #6756aa36;flex-shrink:0}.brand-copy{min-width:0;flex:1}.eyebrow{display:block;color:#ada6cd;letter-spacing:2.3px;font-weight:800;font-size:9px}.header h1{font-size:24px;letter-spacing:-.9px;line-height:1.15;font-weight:760;margin:4px 0 0}.role-pill{font-size:10px;letter-spacing:.8px;font-weight:800;border:1px solid #6b638b;background:#28243d;color:#d7caff;border-radius:100px;padding:7px 10px}.statusbar{display:flex;align-items:center;gap:8px;font-size:12px;color:#9699b0;margin:24px 0 20px}.led{display:block;width:7px;height:7px;border-radius:50%;background:#666a7b;box-shadow:0 0 0 4px #666a7b16}.led.online{background:#62d1a4;box-shadow:0 0 0 4px #62d1a41d,0 0 12px #62d1a4a8}.preview-tag{color:#f9bf72;border:1px solid #875a2f;padding:1px 6px;border-radius:5px;margin-left:auto;font-size:9px}.now-section,.new-section,.library-section{background:#191c29;border:1px solid #2a2d42;border-radius:16px;padding:17px 16px;margin-bottom:16px;box-shadow:0 3px 16px #00000018}.now-section{border-color:#373351;background:linear-gradient(155deg,#22213a,#1a1d2b 56%)}.section-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px}.section-caption{font-size:10px;letter-spacing:1.65px;color:#b5b0ca;font-weight:800}.timecode{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;letter-spacing:1px;color:#c6b7ff}.now-track{display:flex;align-items:center;gap:12px;margin:4px 0 16px}.cover{width:54px;height:54px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:19px}.cover.youtube{background:linear-gradient(145deg,#60262f,#34212c);color:#f85d6b}.cover.spotify{background:linear-gradient(145deg,#254b3a,#1d312e);color:#58dc92}.youtube-mark{display:grid;place-items:center;background:#fa4b55;color:white;border-radius:6px;font-size:11px;width:29px;height:20px;padding-left:2px}.spotify-mark{font-size:43px;line-height:.4;transform:rotate(90deg);font-weight:800}.now-copy{min-width:0;flex:1}.now-name{font-size:15px;line-height:1.4;font-weight:750;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.now-source{font-size:12px;color:#a5a3b5;margin-top:5px}.now-source span{color:#6b6983;padding:0 4px}.external{color:#b9b1d3;border:1px solid #4b4660;text-decoration:none;border-radius:9px;font-size:19px;padding:4px 9px;flex-shrink:0}.external:hover{color:white;background:#33314b}.play-controls{display:flex;gap:8px;margin-bottom:13px}.ctl{height:39px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;font-size:13px;font-weight:750}.ctl.primary{background:#aa92f9;color:#171222;flex:1}.ctl.primary:hover{background:#c2b0ff}.ctl.secondary{background:#2a2c3d;color:#d3cbe6;width:42px;border-color:#444359}.ctl.secondary:hover{background:#38364f}.listener-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin-bottom:12px}.listen-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#353047;border:1px solid #655b84;color:#eee6ff;border-radius:9px;font-size:12px;font-weight:760;min-height:38px;padding:0 12px;flex:1;white-space:nowrap}.listen-btn.active{background:#244238;color:#9bf1be;border-color:#488a69}.listen-btn:hover{filter:brightness(1.15)}.volume{display:flex;align-items:center;gap:6px;color:#bcb2d2;font-size:11px}.volume span{min-width:28px;text-align:right}.volume input{width:74px;accent-color:#b6a2ff;cursor:pointer}.embed-frame{width:100%;overflow:hidden;background:#10111d;border:1px solid #35364d;border-radius:12px;margin-top:2px}.youtube-frame{height:236px;aspect-ratio:16/9}.spotify-frame{height:154px}.video-mount,.spotify-mount,.video-mount iframe{width:100%;height:100%}.video-mount iframe{display:block;border:0}.spotify-mount>iframe{display:block}.small-hint{font-size:11px;line-height:1.55;color:#a1a0b6;margin-top:10px}.empty-playing{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#b6b4c6}.empty-playing strong{font-size:14px;color:#eceafa}.empty-playing span{font-size:12px}.empty-vinyl{width:53px;height:53px;border-radius:50%;background:radial-gradient(circle at center,#bda5ff 0 5px,#35344a 6px 10px,#504a69 11px 12px,#2b293d 13px);box-shadow:0 0 30px #a68dff11;display:grid;place-items:center;color:#c3afff;font-size:23px;margin-bottom:4px}.source-tags{font-size:10px;color:#9d96be}.add-form{display:flex;flex-direction:column;gap:9px}.input-label{font-size:11px;color:#b8b6c9;font-weight:700}.input-label span{color:#77768b;font-weight:500}.input-wrap{display:flex;align-items:center;gap:10px;color:#9f9bb9;background:#121521;border:1px solid #36374c;border-radius:10px;height:41px;padding:0 11px}.input-wrap:focus-within{border-color:#8c7fd0}.input-wrap input{min-width:0;width:100%;background:none;border:0;color:#f2f1fb;outline:none!important;font-size:12px}.input-wrap input::placeholder{color:#65677c}.add-btn{margin-top:6px;width:100%;border:1px solid #6c619a;border-radius:10px;min-height:41px;display:flex;align-items:center;justify-content:center;gap:8px;background:#302b49;color:#e0d6ff;font-size:13px;font-weight:800}.add-btn:hover{background:#42375f}.count{font-size:11px;padding:4px 8px;border:1px solid #45445c;color:#a8a5be;border-radius:7px}.track-list{display:flex;flex-direction:column;gap:5px}.track-row{display:flex;align-items:center;gap:10px;padding:11px 8px;border:1px solid transparent;border-radius:10px;min-height:61px}.track-row:hover{background:#222638}.track-row.selected{background:#302d47;border-color:#4d466b}.track-index{width:25px;flex:0 0 25px;font-size:12px;color:#787a94;text-align:center;font-variant-numeric:tabular-nums}.wave{color:#b5a0ff;font-size:11px;letter-spacing:2px;animation:blink 1.4s infinite alternate}@keyframes blink{from{opacity:.6}to{opacity:1}}.track-info{flex:1;min-width:0}.track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:750}.track-meta{font-size:11px;color:#8f91a9;display:flex;align-items:center;gap:6px;margin-top:6px}.provider-dot{width:6px;height:6px;border-radius:50%;background:#e76670}.provider-dot.spotify{background:#48d88a}.row-actions{display:flex;align-items:center;gap:5px}.mini-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid #414358;border-radius:9px;background:#292d3e;color:#b3a6e7}.mini-btn:hover{background:#453c65;color:white}.delete-mini{color:#ad8d98}.delete-mini:hover{color:#ffc0c0;background:#4f323c}.playing-tag{font-size:10px;color:#bfaaff}.empty-list{padding:24px 8px;text-align:center;color:#8b8d9e;font-size:12px}.alert{font-size:12px;line-height:1.45;background:#452a3b;border:1px solid #92576c;color:#ffc4ce;border-radius:8px;padding:9px 11px}.embed-error{margin-top:9px}.global-error{display:flex;gap:10px;justify-content:space-between;margin-bottom:10px}.global-error button{border:0;background:none;color:inherit;cursor:pointer;font-size:17px}footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#74778e;padding:1px 4px 12px}.demo-hint{color:#bbabdd;font-size:11px;line-height:1.5;margin:0 4px 15px}@media(max-width:430px){.app{padding:17px 12px 8px}.now-section,.new-section,.library-section{padding:14px 12px}.role-pill{font-size:9px;padding:6px 8px}.header h1{font-size:21px}.youtube-frame{height:220px}.volume input{width:58px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v0.1.2 — one prominent native Raven control surface. */
.listener-bar{align-items:stretch;margin-bottom:11px;gap:8px}
.listen-btn{min-width:0;white-space:normal;line-height:1.25;text-align:center;padding:9px 11px}
.retry-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:39px;min-width:116px;padding:7px 10px;border-radius:9px;border:1px solid #514a70;background:#2b2a3e;color:#c9b8f7;font-weight:700;font-size:11px}
.retry-btn:hover:not(:disabled){background:#3c3556}
.volume-panel{background:#141626;border:1px solid #35344f;border-radius:12px;padding:12px 14px 11px;margin-bottom:14px}
.volume-label{display:flex;align-items:center;gap:9px;color:#c8bbed;font-size:12px;font-weight:750}
.volume-label label{min-width:0;flex:1}
.volume-label strong{font-size:12px;color:#e4d9ff;font-variant-numeric:tabular-nums}
.volume-range{display:block;width:100%;height:23px;margin:9px 0 0;accent-color:#ad98f6;cursor:pointer;touch-action:pan-y}
.volume-range:disabled{cursor:not-allowed;opacity:.25}
.volume-limit{margin:7px 0 0;color:#a3a4bc;font-size:11px;line-height:1.5}
.player-label{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 2px 9px;color:#948fb1;font-size:9px;font-weight:750;letter-spacing:.7px}
.player-label span:last-child{text-transform:none;letter-spacing:0;font-weight:500}
.spotify-frame{height:82px;min-height:82px}
.spotify-mount{height:80px;width:100%}
.spotify-mount iframe{display:block;max-width:100%;height:80px;border:0;border-radius:10px}
.youtube-frame{min-height:200px;height:clamp(200px,52vw,236px)}
.inline-retry{display:inline-block;border:0;border-bottom:1px solid currentColor;background:transparent;color:#ffe5ed;font-size:11px;padding:0 1px 1px;margin:6px 0 0;cursor:pointer}
.embed-error{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:375px){.app{padding-left:8px;padding-right:8px}.now-section,.new-section,.library-section{padding-left:9px;padding-right:9px}.retry-btn{flex:1}}

.catbox-audio{display:none}.catbox-audio audio{display:none}.cover.catbox{background:linear-gradient(135deg,#6361b8,#262941);color:#e2e1ff;font-size:25px}.provider-dot.catbox{background:#9a8bff}.upload-help{display:block;text-align:center;color:#bbb0ff;font-size:12px;padding:9px 2px 2px;text-decoration:none}.upload-help:hover{text-decoration:underline}

/* v0.3.0 — persistent background player, concise player-facing UI */
.player-app{max-width:390px;padding:14px 12px 6px}
.player-app .header{margin-bottom:12px}
.player-app .now-section{padding:15px 14px 13px;margin-bottom:12px}
.player-app .now-track{margin:0 0 12px}
.player-app .cover{width:48px;height:48px}
.player-app .now-name{font-size:14px}
.player-app .empty-playing{min-height:112px}
.player-app footer{font-size:9px}
.engine-status{display:flex;align-items:center;gap:8px;color:#9daaba;font-size:11px;margin:5px 0 10px}
.engine-led{width:7px;height:7px;flex-shrink:0;background:#65687a;border-radius:50%}
.engine-led.active{background:#71d5a1;box-shadow:0 0 9px #71d5a166}
.engine-warning{color:#f3b4b4}
.engine-warning .engine-led{background:#d87c89}
.local-volume-panel{margin-bottom:6px;padding:11px 12px 9px}
.volume-range-endpoints{display:flex;justify-content:space-between;font-size:9px;color:#82859c;margin-top:2px}
.player-app .volume-label{font-size:13px}
.player-app .volume-range{height:28px;margin-top:8px}
.player-app .timecode{font-size:11px}
.track-row .mini-btn:disabled{cursor:not-allowed;opacity:.26}
.legacy-tag{font-size:10px;color:#d0a2b8;margin-left:4px}