:root{--bg: #07070a;--bg-2: #101016;--bg-3: #17171f;--bg-4: #1e1e28;--line: rgba(255, 255, 255, .06);--text: #f4f1ea;--muted: #9a958c;--dim: #6d685f;--gold: #e8b86d;--gold-2: #c9923a;--amber: #ffb347;--red: #e85d4c;--teal: #6fd3c2;--shadow: 0 24px 60px rgba(0, 0, 0, .55);--radius: 18px;--safe-b: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:Outfit,system-ui,sans-serif;overflow:hidden}button,input{font-family:inherit}button{background:none;border:0;color:inherit;cursor:pointer}.app{height:100%;display:grid;grid-template-columns:280px 1fr 360px;grid-template-rows:1fr 92px;background:radial-gradient(1200px 500px at 10% -10%,rgba(232,184,109,.08),transparent 50%),radial-gradient(900px 400px at 90% 0%,rgba(111,211,194,.06),transparent 45%),var(--bg)}.sidebar,.now{border-right:1px solid var(--line);background:#0a0a0eb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;min-height:0}.now{border-right:0;border-left:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;padding:22px 22px 16px}.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--gold),#8a5a18);display:grid;place-items:center;box-shadow:0 8px 20px #c9923a59}.brand h1{font-size:18px;letter-spacing:.18em;font-weight:700}.brand span{display:block;font-size:11px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase}.nav{padding:8px 14px;display:flex;flex-direction:column;gap:4px}.nav button,.chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--muted);text-align:left}.nav button.active,.chip.active{background:var(--bg-4);color:var(--text)}.stats{margin:16px 18px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--bg-3);display:grid;gap:8px;font-size:12px;color:var(--muted)}.stats b{color:var(--gold);font-weight:600}.drop{margin:auto 18px 18px;border:1px dashed rgba(232,184,109,.35);border-radius:16px;padding:18px;text-align:center;color:var(--muted);font-size:13px;background:#e8b86d0a}.drop.over{background:#e8b86d1f;color:var(--text)}.library{min-width:0;min-height:0;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;gap:10px;padding:18px 22px 10px}.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:8px 14px}.search input{flex:1;background:none;border:0;outline:none;color:var(--text);font-size:14px}.btn{height:38px;padding:0 14px;border-radius:999px;background:var(--bg-4);border:1px solid var(--line);font-size:13px;color:var(--text)}.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1a1208;border:0;font-weight:600}.filters{display:flex;gap:8px;padding:0 22px 12px;overflow:auto}.chip{white-space:nowrap;background:var(--bg-3);border:1px solid var(--line);font-size:12px}.list{flex:1;overflow:auto;padding:0 12px 16px}.row{display:grid;grid-template-columns:44px 1fr 160px 90px 88px 56px;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer}.row:hover,.row.current{background:var(--bg-3)}.art{width:44px;height:44px;border-radius:10px;object-fit:cover;background:linear-gradient(145deg,#2a241c,#12110f)}.art.lg{width:100%;aspect-ratio:1;border-radius:22px;box-shadow:var(--shadow)}.t1{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t2{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{justify-self:start;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#e8b86d1f;color:var(--gold)}.badge.hq{background:#6fd3c21f;color:var(--teal)}.dur{color:var(--dim);font-size:12px;text-align:right}.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);padding:40px}.empty h2{color:var(--text);margin-bottom:8px}.now-body{padding:22px;overflow:auto;flex:1}.cover-wrap{position:relative}.meta-block{margin-top:18px}.meta-block h2{font-size:22px;line-height:1.2}.spec{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.spec div{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.spec small{color:var(--dim);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.viz{width:100%;height:72px;margin-top:16px;display:block}.eq-panel{padding:8px 4px 0}.eq-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.toggle{width:42px;height:24px;border-radius:999px;background:#2a2a33;position:relative}.toggle.on{background:var(--gold-2)}.toggle i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s ease}.toggle.on i{left:21px}.bands{display:flex;gap:8px;height:180px;align-items:stretch;justify-content:space-between}.band{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}.band input{writing-mode:vertical-lr;direction:rtl;width:18px;height:140px;accent-color:var(--gold)}.band span{font-size:10px;color:var(--dim)}.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.presets button{font-size:11px;padding:6px 10px;border-radius:999px;background:var(--bg-4);color:var(--muted)}.presets button.on{color:#1a1208;background:var(--gold)}.bar{grid-column:1 / -1;display:grid;grid-template-columns:280px 1fr 360px;align-items:center;gap:16px;padding:0 18px;border-top:1px solid var(--line);background:#08080be6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mini{display:flex;align-items:center;gap:12px;min-width:0}.mini img{width:56px;height:56px;border-radius:12px;object-fit:cover}.controls{display:flex;flex-direction:column;align-items:center;gap:8px}.btns{display:flex;align-items:center;gap:8px}.icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}.icon:hover{color:var(--text);background:var(--bg-4)}.icon.on{color:var(--gold)}.play{width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1a1208;display:grid;place-items:center}.seek{width:100%;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--dim)}.seek input,.vol input,.preamp{width:100%;accent-color:var(--gold)}.vol{display:flex;align-items:center;gap:8px;color:var(--muted)}.queue{padding:0 18px 18px;overflow:auto;flex:1}.q-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}@media(max-width:1100px){.app{grid-template-columns:1fr;grid-template-rows:1fr 92px}.sidebar,.now{display:none}.bar{grid-template-columns:1fr}.vol,.mini span{display:none}.row{grid-template-columns:44px 1fr 70px}.row .hide-sm{display:none}}