:root{--bg: #0a0a0c;--surface: #141418;--surface-2: #1d1d23;--surface-3: #26262e;--border: #2a2a33;--text: #f4f4f5;--muted: #9b9ba6;--faint: #6a6a76;--accent: #f97316;--accent-soft: rgba(249, 115, 22, .14);--danger: #ef4444;--warn: #eab308;--ok: #22c55e;--nav-h: 60px;--mini-h: 62px;--radius: 10px;--radius-lg: 16px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}input,select{font:inherit;color:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;width:100%}input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}a{color:inherit;text-decoration:none}h1,h2,h3{margin:0;line-height:1.2}h1{font-size:26px;letter-spacing:-.02em}h2{font-size:18px;letter-spacing:-.01em}.app{min-height:100%;display:flex;flex-direction:column}.main{flex:1;padding:16px 16px calc(var(--nav-h) + var(--mini-h) + 24px);max-width:1100px;width:100%;margin:0 auto}.nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0c0c0ff0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border);display:flex;z-index:40}.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--faint)}.nav a.active{color:var(--accent)}.nav svg{width:21px;height:21px}.mini{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));height:var(--mini-h);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 12px;z-index:39}.mini-progress{position:absolute;top:0;left:0;height:2px;background:var(--accent);transition:width .2s linear}.mini-meta{flex:1;min-width:0}.cover{background:var(--surface-2);border-radius:var(--radius);object-fit:cover;display:block;flex-shrink:0}.cover-fallback{display:flex;align-items:center;justify-content:center;color:var(--faint);background:linear-gradient(135deg,var(--surface-2),var(--surface-3))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muted{color:var(--muted)}.faint{color:var(--faint);font-size:13px}.row{display:flex;align-items:center;gap:12px}.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.stack{display:flex;flex-direction:column;gap:8px}.section{margin-bottom:28px}.section>h2{margin-bottom:12px}.btn{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;transition:background .15s}.btn:hover{background:var(--surface-3)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a0d02;font-weight:600}.btn-primary:hover{background:#fb8b3d}.btn-danger{color:var(--danger);border-color:#ef444459}.btn-sm{padding:6px 12px;font-size:13px}.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;background:var(--surface-2);color:var(--muted)}.chip-warn{background:#eab30826;color:var(--warn)}.chip-danger{background:#ef444426;color:var(--danger)}.chip-ok{background:#22c55e26;color:var(--ok)}.tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:7px 14px;border-radius:999px;font-size:14px;color:var(--muted);white-space:nowrap}.tab.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.track{display:flex;align-items:center;gap:12px;padding:7px 6px;border-radius:var(--radius);width:100%;text-align:left}.track:hover{background:var(--surface)}.track.playing .track-title{color:var(--accent)}.track-meta{flex:1;min-width:0}.track-title{font-size:14.5px;font-weight:500}.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);flex-shrink:0}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.icon-btn.on{color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}.shelf{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.shelf::-webkit-scrollbar{display:none}.shelf>*{flex:0 0 148px}.card-title{font-size:14px;font-weight:500;margin-top:8px}.np{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;flex-direction:column;padding:16px 20px calc(28px + env(safe-area-inset-bottom));overflow-y:auto}.np-art{width:min(78vw,340px);aspect-ratio:1;margin:4vh auto 3vh;border-radius:var(--radius-lg);box-shadow:0 24px 60px #0009}.scrub{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;padding:0;border:none;cursor:pointer}.scrub::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--surface-3)}.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);margin-top:-4.5px}.scrub::-moz-range-track{height:4px;border-radius:2px;background:var(--surface-3)}.scrub::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--accent)}.transport{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0}.play-big{width:66px;height:66px;border-radius:50%;background:var(--accent);color:#1a0d02;display:flex;align-items:center;justify-content:center}.sheet-backdrop{position:fixed;inset:0;background:#0009;z-index:70;display:flex;align-items:flex-end;justify-content:center}.sheet{background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:520px;max-height:78vh;overflow-y:auto;padding:18px 18px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--border)}.sheet-item{display:flex;align-items:center;gap:12px;padding:12px 6px;width:100%;text-align:left;border-radius:var(--radius)}.sheet-item:hover{background:var(--surface-2)}.empty{text-align:center;padding:48px 20px;color:var(--faint)}.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}.login form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}.error{color:var(--danger);font-size:14px}.bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}.bar>div{height:100%;background:var(--accent);transition:width .25s}.drop{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:34px 20px;text-align:center;transition:border-color .15s,background .15s}.drop.over{border-color:var(--accent);background:var(--accent-soft)}.dragging{opacity:.4}.drag-target{box-shadow:inset 0 2px 0 var(--accent)}@media(min-width:900px){.app{flex-direction:row}.nav{position:sticky;inset:0 auto auto;height:100dvh;width:210px;flex-direction:column;justify-content:flex-start;gap:2px;padding:22px 12px;border-top:none;border-right:1px solid var(--border);flex-shrink:0}.nav a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;font-size:14.5px;padding:10px 12px;border-radius:var(--radius);width:100%}.nav a.active{background:var(--accent-soft)}.main{padding:28px 32px calc(var(--mini-h) + 40px)}.mini{bottom:0;left:210px}.np{left:210px}}