:root{color-scheme:dark;--bg: #0b1020;--bg-elevated: #121a2f;--bg-card: #161f38;--border: rgba(255, 255, 255, .08);--text: #e8eefc;--muted: #9aa8c7;--accent: #3d8bfd;--accent-2: #22c55e;--danger: #f87171;--warn: #fbbf24;--shadow: 0 18px 50px rgba(0, 0, 0, .35);--radius: 16px;--font: "DM Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font);background:radial-gradient(1200px 600px at 10% -10%,rgba(61,139,253,.18),transparent 60%),radial-gradient(900px 500px at 90% 0%,rgba(34,197,94,.12),transparent 55%),var(--bg);color:var(--text)}button,input{font:inherit}a{color:var(--accent)}.app{max-width:1200px;margin:0 auto;padding:24px 20px 64px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#7c5cff);display:grid;place-items:center;font-weight:700;box-shadow:var(--shadow)}.brand h1{margin:0;font-size:1.25rem;letter-spacing:-.02em}.brand p{margin:2px 0 0;color:var(--muted);font-size:.85rem}.user-box{display:flex;align-items:center;gap:10px}.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:#ffffff08;border-radius:999px;padding:8px 12px;color:var(--muted);font-size:.9rem}.btn{border:1px solid var(--border);background:var(--bg-card);color:var(--text);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.15s ease}.btn:hover{border-color:#3d8bfd80;transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,#2f6fed,#3d8bfd);border-color:transparent;font-weight:600}.btn-danger{background:#f871711f;border-color:#f8717159;color:#fecaca}.btn-success{background:#22c55e1f;border-color:#22c55e59;color:#bbf7d0}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}@media(max-width:960px){.grid{grid-template-columns:1fr}}.card{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card h2{margin:0 0 14px;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);font-weight:600}.now{display:grid;grid-template-columns:160px 1fr;gap:18px}@media(max-width:640px){.now{grid-template-columns:1fr}}.art{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;background:#0a0f1c;border:1px solid var(--border)}.art-fallback{display:grid;place-items:center;color:var(--muted);font-size:2rem}.meta h3{margin:0 0 6px;font-size:1.45rem;letter-spacing:-.02em}.meta .artist{color:var(--muted);margin-bottom:14px}.stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.vote-bar{flex:1;min-width:160px;height:10px;background:#ffffff0f;border-radius:999px;overflow:hidden}.vote-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--danger),#fb923c)}.list{display:flex;flex-direction:column;gap:10px}.row{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:12px;background:#ffffff05;border:1px solid transparent}.row:hover{border-color:var(--border);background:#ffffff0a}.row img,.row .mini-art{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#0a0f1c}.row .title{font-weight:600;line-height:1.2}.row .sub{color:var(--muted);font-size:.85rem;margin-top:2px}.row-actions{display:flex;gap:6px}.toolbar{display:flex;gap:10px;margin-bottom:12px}.toolbar input{flex:1;border-radius:12px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);padding:12px 14px;outline:none}.toolbar input:focus{border-color:#3d8bfd99}.muted{color:var(--muted)}.toast{position:fixed;right:20px;bottom:20px;background:#0f172a;border:1px solid var(--border);color:var(--text);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);max-width:360px;z-index:50}.empty{padding:18px;text-align:center;color:var(--muted)}.section-stack{display:flex;flex-direction:column;gap:18px}.badge-live{background:#f8717126;color:#fecaca;border-color:#f8717159}.mono{font-family:var(--mono);font-size:.8rem}.player-box{margin-top:4px}.native-audio{width:100%;max-width:420px;height:40px;border-radius:10px;background:#00000059;opacity:1;filter:none;vertical-align:middle}.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}.browse-toolbar{align-items:center}.browse-label{color:var(--muted);font-size:.9rem;white-space:nowrap}.browse-select{border-radius:12px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);padding:12px 14px;min-width:140px;outline:none}.browse-select:focus{border-color:#3d8bfd99}.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#040812b8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:80;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal{width:min(640px,100%);max-height:min(80vh,720px);overflow:hidden;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.modal-header h2{margin:0;font-size:1.1rem;text-transform:none;letter-spacing:-.01em;color:var(--text)}.modal-list{overflow:auto;flex:1;min-height:0;padding-right:4px}.row-button{width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.row-button:hover{border-color:#3d8bfd73;background:#3d8bfd14}.track-time{margin-top:12px;max-width:420px}.time-bar{height:8px;border-radius:999px;background:#ffffff14;overflow:hidden}.time-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7c5cff);transition:width .4s linear}.time-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-size:.9rem}.badge-request{background:#3d8bfd29;border-color:#3d8bfd66;color:#bfdbfe;font-size:.75rem;padding:4px 8px}.title .pill{margin-left:8px;vertical-align:middle}.pill-btn{cursor:pointer;font:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pill-btn:disabled{opacity:.5;cursor:not-allowed}.pill-btn:not(:disabled):hover{border-color:#f871718c;color:#fecaca}.badge-skip{background:#f871711f;border-color:#f8717159;color:#fecaca}.badge-skip .mono{margin-left:2px;opacity:.9}