:root{--bg: #0f0f12;--bg-grad-1: #0f0f12;--bg-grad-2: #15151a;--panel: rgba(30,30,38,.75);--panel-solid: #18181f;--text: #ffffff;--muted: rgba(255,255,255,.64);--muted-2: rgba(255,255,255,.4);--accent: #1ed760;--accent-2: #7bf5a6;--left-w: 300px;--right-w: 340px;--bar-h: 88px;--top-h: 64px;--radius-s: 8px;--radius-m: 12px;--radius-l: 16px;--shadow-1: 0 10px 30px rgba(0,0,0,.35);--shadow-2: 0 6px 18px rgba(0,0,0,.25);--ring: 0 0 0 2px rgba(30,215,96,.3), 0 0 0 6px rgba(30,215,96,.12)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:radial-gradient(1200px 1200px at 10% -20%,rgba(30,215,96,.07),transparent 55%),radial-gradient(900px 900px at 100% 10%,rgba(124,58,237,.08),transparent 50%),linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2))}body{overflow:hidden}img{display:block;max-width:100%}button{font:inherit}.shell{display:grid;grid-template-rows:var(--top-h) 1fr var(--bar-h);height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:linear-gradient(180deg,#000c,#0000008c);-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}.topbar h1{font-size:clamp(16px,2.2vw,20px);margin:0;letter-spacing:.2px}.logout-btn{background:#ffffff0a;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;color:var(--text);cursor:pointer;transition:transform .12s ease,background .2s ease,border-color .2s ease}.logout-btn:hover{background:#ffffff1a;border-color:#fff3}.logout-btn:active{transform:translateY(1px) scale(.98)}.logout-btn:focus-visible{outline:none;box-shadow:var(--ring)}.main{display:grid;grid-template-columns:1fr var(--right-w);gap:24px;padding:24px;height:calc(100vh - var(--bar-h) - var(--top-h))}.center-list{overflow:auto;background:var(--panel);border-radius:var(--radius-m);box-shadow:var(--shadow-1);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}.center-list::-webkit-scrollbar{width:10px;height:10px}.center-list::-webkit-scrollbar-track{background:transparent}.center-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffffff40,#ffffff26);border-radius:999px}.right-pane{overflow:hidden;background:var(--panel);border-radius:var(--radius-m);box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);padding:16px}.track-info{text-align:center}.track-image{width:100%;border-radius:var(--radius-m);object-fit:cover;box-shadow:0 8px 24px #00000059}.preview-visualizer{height:220px}.visualizer{width:100%;height:100%;display:block}.dropzone{border:2px dashed rgba(255,255,255,.25);border-radius:var(--radius-m);padding:18px;text-align:center;background:linear-gradient(180deg,#ffffff0d,#ffffff08);cursor:pointer;margin-bottom:16px;transition:border-color .2s ease,background .2s ease,transform .12s ease}.dropzone:hover{transform:translateY(-1px)}.dropzone.over{border-color:var(--accent);background:linear-gradient(180deg,#1ed76024,#1ed76014)}.dz-inner{display:flex;flex-direction:column;gap:6px;align-items:center}.dz-icon{font-size:22px;color:var(--accent)}.dz-text{font-size:14px;color:#c9c9c9}.list-header{display:grid;grid-template-columns:40px 1fr 220px 160px 90px;gap:16px;padding:10px 16px;position:sticky;top:0;background:var(--panel-solid);z-index:2;font-weight:700;letter-spacing:.3px;border-bottom:1px solid rgba(255,255,255,.08)}ul.playlist.table{list-style:none;margin:0;padding:0}ul.playlist.table li.row{display:grid;grid-template-columns:40px 1fr 220px 160px 90px;gap:16px;align-items:center;padding:10px 16px;cursor:pointer;transition:background .15s ease,transform .06s ease}ul.playlist.table li.row:hover{background:#ffffff12}ul.playlist.table li.row:active{transform:scale(.998)}ul.playlist.table li.row.active{background:#ffffff1f}.col.title{display:flex;align-items:center;gap:12px;min-width:0}.col.title .thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0}.col.title .meta{display:flex;flex-direction:column;min-width:0}.col.title .name,.col.title .artist,.col.album,.col.added,.col.dur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.col.title .name{font-weight:600}.col.title .artist{opacity:.8;font-size:12px}.bottom-player{height:var(--bar-h)}.bottom-inner{height:100%}.npbar{position:fixed;left:0;right:0;bottom:0;height:var(--bar-h);display:grid;grid-template-columns:var(--left-w) 1fr var(--right-w);align-items:center;padding:0 16px;gap:16px;background:linear-gradient(180deg,#18181feb,#121217eb);border-top:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}.np-left{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;min-width:0}.np-cover{width:56px;height:56px;border-radius:6px;object-fit:cover;box-shadow:0 6px 16px #00000059}.np-meta{min-width:0}.np-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}.np-sub{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-like{margin-left:8px;opacity:.95}.np-center{justify-self:center;width:min(720px,calc(100vw - var(--left-w) - var(--right-w) - 80px));display:flex;flex-direction:column;align-items:center;gap:8px}.np-controls{display:flex;align-items:center;justify-content:center;gap:14px}.np-ghost{background:transparent;border:0;color:var(--text);font-size:16px;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s ease,transform .06s ease,color .15s ease}.np-ghost:hover{background:#ffffff1f}.np-ghost:active{transform:translateY(1px) scale(.98)}.np-ghost:focus-visible{outline:none;box-shadow:var(--ring)}.np-play{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:#000;background:linear-gradient(180deg,#fff,#eaeaea);box-shadow:0 5px 16px #00000059,inset 0 -2px 6px #00000012;transition:transform .12s ease,box-shadow .2s ease}.np-play:hover{box-shadow:0 8px 20px #0006,inset 0 -2px 6px #00000012}.np-play:active{transform:translateY(1px) scale(.98)}.np-play:focus-visible{outline:none;box-shadow:var(--ring)}.np-progress{width:100%;max-width:640px;margin:0 auto;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px}.np-time{font-variant-numeric:tabular-nums;font-size:12px;text-align:center;opacity:.86}.np-progress input[type=range],.np-volume input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:linear-gradient(var(--accent) 0 0) 0 0/var(--fill, 0%) 100% no-repeat,#535353;border-radius:999px;outline:none;position:relative}.np-progress input[type=range]::-webkit-slider-runnable-track,.np-volume input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(var(--accent) 0 0) 0 0/var(--fill, 0%) 100% no-repeat,#535353;border-radius:999px}.np-progress input[type=range]::-webkit-slider-thumb,.np-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#eaeaea 60%,#d7d7d7);border:0;margin-top:-6px;box-shadow:0 4px 10px #00000059}.np-progress input[type=range]::-moz-range-track,.np-volume input[type=range]::-moz-range-track{height:4px;background:#535353;border-radius:999px}.np-progress input[type=range]::-moz-range-thumb,.np-volume input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:0;background:radial-gradient(circle at 30% 30%,#fff,#eaeaea 60%,#d7d7d7)}.np-progress input[type=range],.np-volume input[type=range]{accent-color:var(--accent)}.np-progress input[type=range]::-moz-range-progress,.np-volume input[type=range]::-moz-range-progress{background:var(--accent);height:4px;border-radius:999px}.np-right{justify-self:end;display:flex;align-items:center;gap:14px}.np-volume{display:grid;grid-template-columns:16px minmax(90px,140px);align-items:center;gap:8px}.eq-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2000;display:grid;place-items:center;padding:16px}.eq-card{width:min(820px,92vw);max-height:84vh;overflow:auto;background:linear-gradient(180deg,#1e1e26d1,#16161cd1);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 20px 60px #00000073;padding:18px 18px 12px;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}.eq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:linear-gradient(180deg,#18181fe6,#18181f99);padding:8px 0 10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}.eq-title{font-size:18px;font-weight:800;letter-spacing:.3px}.eq-close{background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}.eq-row{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:12px;padding:10px 0}.eq-row+.eq-row{border-top:1px dashed rgba(255,255,255,.08)}.eq-row .eq-label{opacity:.85;font-weight:700}.eq-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:linear-gradient(var(--accent) 0 0) 0 0/var(--fill, 50%) 100% no-repeat,#535353;border-radius:999px}.eq-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:0;box-shadow:0 4px 10px #00000059}.eq-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 0 2px}.eq-chip{background:#ffffff0f;border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;cursor:pointer}.eq-chip.active{background:#1ed7602e;border-color:#1ed76080}.eq-note{opacity:.75;font-size:12px}@media (max-width: 1200px){:root{--left-w: 260px;--right-w: 280px}}@media (max-width: 980px){:root{--left-w: 220px;--right-w: 240px}.list-header,ul.playlist.table li.row{grid-template-columns:40px 1fr 180px 110px 70px}}@media (max-width: 768px){body{overflow:auto}.shell{height:auto;min-height:100vh;grid-template-rows:var(--top-h) auto var(--bar-h)}.main{grid-template-columns:1fr;grid-template-rows:auto auto;gap:16px;padding:12px;height:auto;min-height:calc(100vh - var(--top-h) - var(--bar-h));padding-bottom:calc(var(--bar-h) + 12px)}.right-pane{order:2;overflow:auto;margin-top:6px;max-height:calc(100vh - var(--top-h) - var(--bar-h) - 24px)}.track-image{max-height:40vh;height:auto;object-fit:contain}.preview-visualizer{height:min(160px,28vh)}.visualizer{width:100%;height:100%}.list-header{grid-template-columns:32px 1fr 70px}.list-header .col.album,.list-header .col.added{display:none}ul.playlist.table li.row{grid-template-columns:32px 1fr 70px;padding:10px 12px}ul.playlist.table li.row .col.album,ul.playlist.table li.row .col.added{display:none}.npbar{grid-template-columns:1fr;height:auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));gap:12px;z-index:1000}.np-left{grid-template-columns:56px 1fr auto}.np-center{width:100%}.np-right{justify-self:stretch;justify-content:space-between}.bottom-player{height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}}@media (max-width: 420px){.preview-visualizer,.visualizer{height:160px}.np-left{grid-template-columns:48px 1fr auto}.np-cover{width:48px;height:48px}.np-title{font-size:14px}.np-sub{font-size:11px}.np-play{width:38px;height:38px}}@media (max-width: 340px){.np-progress{grid-template-columns:1fr}.np-time{display:none}}.icon{display:inline-block;vertical-align:middle;color:inherit;filter:invert(1);transition:opacity .15s ease,transform .06s ease}.np-ghost .icon,.np-play .icon{pointer-events:none}.np-ghost:hover .icon{opacity:.8;transform:scale(1.05)}.np-play .icon{filter:invert(0)}.np-volume .icon{width:16px;height:16px}:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}@media (prefers-reduced-motion: reduce){*{transition:none!important}}:fullscreen{transition:transform .3s ease-in-out;background:#000}.np-ghost.active{opacity:1;filter:drop-shadow(0 0 6px var(--accent))}.icon{color:#fff}.np-progress input[type=range]::-webkit-slider-thumb,.np-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 0 2px #0000004d}.np-progress input[type=range]::-moz-range-thumb,.np-volume input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:none}@media (max-width: 768px){:root{--bar-h: 72px;--top-h: 56px}.np-cover{width:48px;height:48px}.np-play{width:38px;height:38px;font-size:16px}.topbar{padding:0 12px}.topbar h1{font-size:16px}.list-header,ul.playlist.table li.row{grid-template-columns:40px 1fr 160px 70px}.col.added{display:none}}@media (max-width: 600px){.npbar{left:10px;right:10px;bottom:12px;border-radius:16px;background:#2a2a2a;box-shadow:0 10px 30px #00000073;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:0;height:auto;z-index:1000}.topbar{padding-top:env(safe-area-inset-top,0px)}.bottom-player{height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}.main{height:calc(100vh - var(--top-h) - var(--bar-h) - env(safe-area-inset-bottom,0px))}.list-header,ul.playlist.table li.row{grid-template-columns:32px 1fr 60px}.col.album{display:none}.np-progress{grid-template-columns:40px 1fr 40px}.np-time{font-size:11px}.np-right{gap:8px}.np-volume{grid-template-columns:16px 90px}.np-cover{border-radius:8px;position:relative}.np-cover:after{content:"";position:absolute;right:-6px;bottom:-4px;width:18px;height:12px;background:linear-gradient(#1ed760,#1ed760) 0 100%/2px 30% no-repeat,linear-gradient(#1ed760,#1ed760) 50% 100%/2px 60% no-repeat,linear-gradient(#1ed760,#1ed760) 100% 100%/2px 45% no-repeat;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));animation:eqpulse 1.1s infinite ease-in-out}}@media (max-width: 480px){.list-header,ul.playlist.table li.row{grid-template-columns:28px 1fr}.col.dur{display:none}.np-cover{width:42px;height:42px}.np-ghost{padding:4px}.np-center{gap:4px}.np-progress{grid-template-columns:1fr}.np-time,.np-volume input[type=range]{display:none}.np-volume{grid-template-columns:16px}}@media (max-width: 360px){.topbar h1{font-size:14px}.np-play{width:34px;height:34px;font-size:14px}}.row.active .name{color:#1ed760;position:relative;padding-right:18px}.row.active .name:after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:14px;height:10px;background:linear-gradient(#1ed760,#1ed760) 0 100%/2px 30% no-repeat,linear-gradient(#1ed760,#1ed760) 50% 100%/2px 60% no-repeat,linear-gradient(#1ed760,#1ed760) 100% 100%/2px 45% no-repeat;animation:eqpulse 1s infinite ease-in-out}@keyframes eqpulse{0%{background-size:2px 25%,2px 55%,2px 35%}25%{background-size:2px 60%,2px 30%,2px 70%}50%{background-size:2px 35%,2px 75%,2px 40%}75%{background-size:2px 70%,2px 40%,2px 60%}to{background-size:2px 25%,2px 55%,2px 35%}}