:root{color-scheme:dark;--bg: #0d0e10;--panel: #131519;--line: #1e2024;--line-soft: #16181b;--text: #e9e9ec;--muted: #8b909a;--dim: #5a5e66;--accent: #00e5a0;--accent-ink: #04120d;--mono: "SF Mono", Menlo, monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,sans-serif}.app{display:flex;height:100vh}.sidebar{width:200px;flex:0 0 200px;border-right:1px solid var(--line);padding:14px 0;overflow-y:auto}.sidebar h4{font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;padding:0 14px 8px;margin:0}.sidebar .brand{font:700 15px/1 -apple-system,sans-serif;color:#fff;padding:0 14px 16px;letter-spacing:-.02em}.sidebar .brand span{color:var(--accent)}.sidebar .stat{padding:4px 14px;font:600 10px/1.5 var(--mono);color:var(--dim);display:flex;justify-content:space-between}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.nav{display:flex;gap:18px;padding:12px 16px;border-bottom:1px solid var(--line)}.nav button{font-size:12px;font-weight:600;color:var(--dim);background:none;border:0;cursor:pointer;padding:0}.nav button.on{color:#fff}.list{flex:1;overflow-y:auto;padding-bottom:56px}.group{display:flex;align-items:center;gap:8px;padding:12px 16px 6px;font-size:12.5px;color:var(--accent)}.group .line{flex:1;height:1px;background:var(--line)}.count{font:600 9px/1 var(--mono);color:var(--dim);background:var(--line);padding:2px 5px;border-radius:3px}.row{display:flex;align-items:center;gap:11px;padding:8px 16px;border-bottom:1px solid var(--line-soft)}.row img{width:38px;height:38px;border-radius:3px;background:var(--line)}.row .title{font-size:12.5px;font-weight:600;color:#fff}.row .sub{font-size:10.5px;color:var(--muted);margin-top:2px}.bpm{font:700 16px/1 var(--mono);color:var(--accent);text-align:right}.key{font:600 9.5px/1 var(--mono);color:var(--dim);text-align:right;margin-top:3px}.tag{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:3px;background:var(--line);color:var(--muted);white-space:nowrap}.badge{font:700 8px/1 var(--mono);padding:2px 4px;border-radius:2px;background:var(--accent);color:var(--accent-ink);letter-spacing:.06em}.badge.pick{background:#f5a623;color:#2a1a02}.badge.follow{background:none;color:var(--accent);padding:0}.btn{font:700 9.5px/1 var(--mono);letter-spacing:.06em;padding:6px 9px;border-radius:4px;background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;text-decoration:none;display:inline-block}.btn:disabled{opacity:.3;cursor:default}.player{position:fixed;left:200px;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:11px;padding:0 16px;background:var(--panel);border-top:1px solid #22252a}.player .bar{flex:1;height:3px;background:#22252a;border-radius:2px}.player .bar i{display:block;height:100%;background:var(--accent);border-radius:2px}.empty{padding:40px 16px;color:var(--dim);font-size:13px}.login{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg)}.login form{display:flex;flex-direction:column;gap:10px;width:260px;text-align:center}.login .brand{font:700 28px/1 -apple-system,sans-serif;color:#fff;letter-spacing:-.03em}.login .brand span{color:var(--accent)}.login .hint{color:var(--dim);font-size:11px;margin:0 0 10px}.login input{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:10px 12px;color:var(--text);font-size:13px;outline:none}.login input:focus{border-color:var(--accent)}.login .btn{padding:10px;font-size:11px}.login .err{color:#ff5a5a;font-size:11px;margin:4px 0 0}.chev{background:none;border:0;color:var(--dim);cursor:pointer;font-size:11px;width:16px;padding:0;flex:0 0 16px}.row>div[style]{cursor:pointer}.tracks{background:#0a0b0d;border-bottom:1px solid var(--line)}.trk{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 62px;border-bottom:1px solid var(--line-soft)}.trk:last-child{border-bottom:0}.trk.dim{color:var(--dim);font-size:11px;padding-left:62px}.trk .num{font:600 10px/1 var(--mono);color:var(--dim);width:18px;flex:0 0 18px}.trk .tname{font-size:11.5px;color:#fff}.trk .tsub{font-size:10px;color:var(--muted);margin-top:1px}.trk .tmeta{font:600 9.5px/1 var(--mono);color:var(--dim);white-space:nowrap}.btn.sm{padding:4px 7px;font-size:8.5px}::selection{background:#00e5a047;color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}*{scrollbar-width:thin;scrollbar-color:#2b2f35 transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#2b2f35;border-radius:6px;border:3px solid var(--bg)}*::-webkit-scrollbar-thumb:hover{background:#3a3f47}.player{position:fixed;left:200px;right:0;bottom:0;height:60px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--panel);border-top:1px solid #22252a}.transport{display:flex;align-items:center;gap:4px}.pbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:none;transition:color .16s cubic-bezier(.16,1,.3,1),background-color .16s cubic-bezier(.16,1,.3,1)}.pbtn:hover:not(:disabled){color:#fff;background:#1e2228}.pbtn:disabled{color:#3a3e45;cursor:default}.pbtn.primary{width:34px;height:34px;background:var(--accent);color:var(--accent-ink)}.pbtn.primary:hover:not(:disabled){background:#24f5b4}.pcover{width:36px;height:36px;border-radius:3px;background:var(--line)}.pmeta{min-width:150px;max-width:280px}.ptitle{font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.psub{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcount{color:var(--dim)}.ptime{font:600 10px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.pseek{flex:1;position:relative;height:34px;cursor:pointer;display:flex;align-items:center;touch-action:none;min-width:120px}.wavemask{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.wave-rest{position:absolute;top:0;right:0;bottom:0;left:0;background:#333941}.wave-done{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}.pseek:hover .wave-rest{background:#3d444d}.pbar-rail{position:absolute;left:0;right:0;height:3px;background:#262a30;border-radius:2px}.pbar-fill{position:absolute;left:0;height:3px;background:var(--accent);border-radius:2px;pointer-events:none}.pbar-knob{position:absolute;width:3px;top:3px;bottom:3px;border-radius:2px;background:#fff;transform:translate(-1.5px) scaleY(0);transition:transform .18s cubic-bezier(.16,1,.3,1);pointer-events:none;box-shadow:0 0 8px #0009}.pseek:hover .pbar-knob,.pseek:focus-visible .pbar-knob,.pseek.scrubbing .pbar-knob{transform:translate(-1.5px) scaleY(1)}.btn.icon{display:inline-flex;align-items:center;justify-content:center}.btn.sm.icon{padding:4px 6px}.chev{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--dim);cursor:pointer;width:18px;height:18px;padding:0;flex:0 0 18px}.chev:hover{color:var(--accent)}