:root{--bg:#16171e;--panel:#1e2029;--panel-2:#1b1d25;--panel-3:#20222c;--panel-4:#252732;--text:#eceef5;--muted:#9a9db0;--dim:#6a6d80;--purple:#b98cff;--cyan:#6fe6ff;--red:#ff6b6b;--border:#ffffff17;--border-strong:#ffffff1f;--mono:"JetBrains Mono", ui-monospace, monospace;--sans:"Space Grotesk", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--sans);margin:0}a{color:inherit;text-decoration:none}button{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#a0a0b44d;border-radius:6px}::-webkit-scrollbar-track{background:0 0}.app{background:radial-gradient(120% 80% at 80% -10%,#23202f 0%,#16171e 55%);min-height:100vh}.topbar{z-index:30;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#16171ed1;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:16px 5vw;display:flex;position:sticky;top:0}.brand{cursor:pointer;align-items:center;gap:13px;display:flex}.brand-logo{color:#16171e;background:linear-gradient(135deg,#b98cff,#6fe6ff);border-radius:10px;place-items:center;width:36px;height:36px;font-size:18px;font-weight:700;display:grid}.brand-name{letter-spacing:-.01em;font-size:18px;font-weight:700}.brand-sub{font-family:var(--mono);color:var(--cyan);letter-spacing:.15em;font-size:10px}.tabs{background:var(--panel-3);border:1px solid var(--border-strong);border-radius:11px;align-items:center;gap:6px;padding:4px;display:flex}.tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .15s}.tab:hover{color:var(--text)}.tab.active{background:var(--panel-4);color:var(--text)}.section{max-width:1400px;margin:0 auto;padding:38px 5vw 80px}.head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px;display:flex}.head-title{letter-spacing:-.02em;font-size:clamp(30px,4.4vw,46px);font-weight:700;line-height:1}.head-sub{font-family:var(--mono);color:var(--muted);margin-top:12px;font-size:13px}.search-wrap{position:relative}.search-input{background:var(--panel-3);border:1px solid var(--border-strong);width:min(320px,72vw);color:var(--text);font-family:var(--mono);border-radius:11px;outline:none;padding:12px 14px 12px 40px;font-size:13px;transition:border-color .15s}.search-input:focus{border-color:var(--purple)}.search-icon{border:2px solid var(--muted);pointer-events:none;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.filters{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;display:flex}.chip{background:var(--panel-3);border:1px solid var(--border-strong);color:var(--muted);font-family:var(--mono);cursor:pointer;border-radius:999px;padding:8px 14px;font-size:12px;transition:all .15s}.chip:hover{border-color:var(--purple);color:var(--text)}.chip.active{background:var(--purple);border-color:var(--purple);color:#16171e}.filters .divider{background:#ffffff24;width:1px;height:22px;margin:0 6px}.sort-label{font-family:var(--mono);color:var(--dim);letter-spacing:.1em;font-size:11px}.sort-btn{color:var(--dim);font-family:var(--mono);cursor:pointer;background:0 0;border:none;padding:6px 4px;font-size:12px;transition:all .15s}.sort-btn:hover{color:var(--text)}.sort-btn.active{color:var(--purple)}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.grid.hl{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.card{background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:16px;transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden}.card:hover{border-color:var(--purple);transform:translateY(-4px);box-shadow:0 16px 40px #0006}.card.hl:hover{border-color:var(--cyan)}.cover{aspect-ratio:16/9;background:#000 50%/cover no-repeat;width:100%;position:relative;overflow:hidden}.cover-grad{background:linear-gradient(#16171e00 40%,#16171e8c);position:absolute;inset:0}.cover-grad.hl{background:linear-gradient(#16171e00 35%,#16171eb8)}.badge{font-family:var(--mono);border-radius:6px;position:absolute}.badge-genre{letter-spacing:.12em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cyan);background:#16171ec7;padding:5px 9px;font-size:10px;top:12px;left:12px}.badge-tag{letter-spacing:.12em;color:#16171e;background:#6fe6ffeb;padding:5px 9px;font-size:10px;font-weight:700;top:12px;left:12px}.badge-dur{background:#16171ec7;padding:5px 8px;font-size:11px;bottom:12px;right:12px}.badge-time{color:var(--cyan);background:#16171ed1;padding:5px 9px;font-size:11px;bottom:12px;right:12px}.playbtn{border-radius:50%;place-items:center;width:44px;height:44px;transition:all .18s;display:grid;position:absolute;bottom:12px;left:12px}.playbtn.purple{opacity:0;background:#b98cffe6}.card:hover .playbtn.purple{opacity:1}.playbtn.cyan{background:#6fe6fff2}.tri{border-top:8px solid #0000;border-bottom:8px solid #0000;border-left:13px solid #16171e;width:0;height:0;margin-left:3px}.card-body{padding:15px 16px 18px}.card-title{letter-spacing:-.01em;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:42px;margin-bottom:9px;font-size:16px;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.card-meta{font-family:var(--mono);color:var(--muted);justify-content:space-between;align-items:center;font-size:12px;display:flex}.card-meta .accent{color:var(--purple)}.card-views{font-family:var(--mono);color:var(--dim);margin-top:6px;font-size:11px}.hl-title{letter-spacing:-.01em;margin-bottom:6px;font-size:16px;font-weight:600;line-height:1.3}.hl-sub{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:10px;font-size:13px;display:-webkit-box;overflow:hidden}.hl-foot{font-family:var(--mono);color:var(--dim);justify-content:space-between;align-items:center;gap:10px;font-size:11px;display:flex}.hl-foot span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.detail{max-width:1500px;margin:0 auto;padding:24px 5vw 60px}.back-btn{border:1px solid var(--border-strong);color:var(--muted);font-family:var(--mono);cursor:pointer;background:0 0;border-radius:10px;margin-bottom:20px;padding:9px 15px;font-size:12px;transition:all .15s}.back-btn:hover{color:var(--text);border-color:var(--purple)}.detail-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:26px;display:grid}.player-col{position:sticky;top:84px}.player-frame{aspect-ratio:16/9;border:1px solid var(--border-strong);background:#000;border-radius:14px;width:100%;position:relative;overflow:hidden}.player-frame>div{width:100%;height:100%;position:absolute;inset:0}.meta-genre{font-family:var(--mono);letter-spacing:.15em;color:var(--cyan);margin-top:18px;font-size:11px}.meta-title{letter-spacing:-.02em;margin-top:8px;font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.12}.meta-row{font-family:var(--mono);color:var(--muted);flex-wrap:wrap;gap:18px;margin-top:14px;font-size:13px;display:flex}.meta-row .accent{color:var(--purple)}.yt-link{background:var(--panel-3);border:1px solid var(--border-strong);font-family:var(--mono);color:var(--red);border-radius:10px;align-items:center;gap:8px;margin-top:16px;padding:9px 14px;font-size:12px;transition:all .15s;display:inline-flex}.yt-link:hover{border-color:var(--red)}.yt-tri{border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0}.nowplaying{background:linear-gradient(90deg,#b98cff24,#6fe6ff0d);border:1px solid #b98cff47;border-radius:12px;margin-top:16px;padding:15px 17px}.np-label{font-family:var(--mono);color:var(--purple);letter-spacing:.1em;margin-bottom:8px;font-size:11px}.np-title{font-size:16px;font-weight:600}.np-artist{color:var(--muted);margin-top:2px;font-size:13px}.tracklist{background:var(--panel-2);border:1px solid #ffffff14;border-radius:16px;overflow:hidden}.tl-head{border-bottom:1px solid #ffffff12;padding:18px 20px 14px}.tl-head-row{justify-content:space-between;align-items:center;display:flex}.tl-h-title{font-size:18px;font-weight:700}.tl-count{font-family:var(--mono);color:var(--muted);font-size:12px}.tl-hint{font-family:var(--mono);color:var(--dim);margin-top:10px;font-size:11px}.tl-rows{max-height:70vh;padding:8px;overflow-y:auto}.tl-row{border-radius:11px;align-items:center;gap:12px;margin-bottom:2px;padding:10px;transition:background .15s;display:flex}.tl-row.now{box-shadow:inset 3px 0 0 var(--purple);background:linear-gradient(90deg,#b98cff33,#6fe6ff0d)}.tl-time{text-align:center;min-width:66px;font-family:var(--mono);cursor:pointer;border:1px solid var(--border-strong);background:var(--panel-4);color:var(--cyan);border-radius:8px;flex:none;padding:8px 6px;font-size:12px;font-weight:500;transition:all .15s}.tl-time:hover,.tl-time.now{background:var(--purple);color:#16171e;border-color:var(--purple)}.tl-main{flex:auto;min-width:0}.tl-track{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.tl-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.tl-artist .dim{color:var(--dim)}.tl-actions{flex:none;gap:6px;display:flex}.icon-btn{background:var(--panel-4);border:1px solid var(--border-strong);cursor:pointer;width:32px;height:32px;color:var(--muted);border-radius:8px;place-items:center;transition:all .15s;display:grid}.icon-btn:hover{color:var(--text);border-color:var(--cyan)}.icon-btn.yt{color:var(--red)}.icon-btn.yt:hover{border-color:var(--red);background:#2c1a1c}.copy-box{border:1.5px solid;border-radius:2px;width:11px;height:13px}.yt-tri-sm{border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0;margin-left:2px}.state{text-align:center;color:var(--muted);font-family:var(--mono);padding:60px 5vw}.state .big{color:var(--text);font-size:20px;font-family:var(--sans);margin-bottom:8px;font-weight:700}.toast{opacity:0;background:var(--purple);color:#16171e;font-family:var(--mono);pointer-events:none;z-index:60;border-radius:11px;padding:12px 20px;font-size:13px;font-weight:500;transition:all .25s;position:fixed;bottom:26px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 12px 34px #b98cff73}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=860px){.detail-grid{grid-template-columns:1fr}.player-col{position:static}}