:root{--bg0:#07080b;--bg1:#0c0f16;--panel:#0f1420cc;--stroke:#1f2a3f;--text:#eaf0ff;--muted:#9fb0d3;--accent:#7cffd4;--accent2:#8aa3ff;--danger:#ff4d7d;--shadow: 0 18px 50px rgba(0,0,0,.55);--radius: 18px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--text);background:radial-gradient(1200px 800px at 15% -10%,rgba(122,255,212,.16),transparent 55%),radial-gradient(900px 700px at 85% 10%,rgba(138,163,255,.14),transparent 60%),radial-gradient(900px 900px at 50% 120%,rgba(255,77,125,.1),transparent 55%),linear-gradient(180deg,var(--bg0),var(--bg1));font-family:ui-sans-serif,system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif}a{color:inherit;text-decoration:none}.grain{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay}.appShell{min-height:100vh;padding:28px 22px 120px}.topBar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.brand{display:flex;align-items:baseline;gap:10px}.brand h1{margin:0;font-family:ui-serif,Songti SC,STSong,serif;letter-spacing:.6px;font-weight:700;font-size:22px}.brand .sub{color:var(--muted);font-size:12px}.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--stroke);background:linear-gradient(180deg,#0f1420bf,#0a0c128c);border-radius:999px;box-shadow:0 10px 30px #00000059}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--stroke);background:linear-gradient(180deg,#101624d9,#0a0c12a6);color:var(--text);border-radius:999px;padding:10px 14px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.btn:hover{transform:translateY(-1px);border-color:#7cffd473}.btn:active{transform:translateY(0)}.btn.primary{border-color:#7cffd459;background:linear-gradient(180deg,#7cffd42e,#101624bf)}.btn.danger{border-color:#ff4d7d59;background:linear-gradient(180deg,#ff4d7d29,#101624bf)}.layout{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}@media(max-width:980px){.layout{grid-template-columns:1fr}}.panel{border:1px solid var(--stroke);border-radius:var(--radius);background:linear-gradient(180deg,#0f1420bf,#0a0c128c);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panelHeader{padding:14px 14px 10px;border-bottom:1px solid rgba(31,42,63,.6);display:flex;justify-content:space-between;align-items:center;gap:12px}.panelHeader h2{margin:0;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}.panelBody{padding:14px}.input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--stroke);background:#07080b59;color:var(--text);outline:none}.input:focus{border-color:#8aa3ff80}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 10px;border-radius:999px;border:1px solid rgba(31,42,63,.9);background:#07080b40;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}.chip.on{border-color:#7cffd473;color:var(--text);background:#7cffd41f}.trackTable{width:100%;border-collapse:collapse}.trackTable th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid rgba(31,42,63,.6)}.trackTable td{padding:12px;border-bottom:1px solid rgba(31,42,63,.35);vertical-align:middle}.trackTitle{display:flex;flex-direction:column}.trackTitle .t{font-weight:650}.trackTitle .m{color:var(--muted);font-size:12px;margin-top:2px}.badge{font-size:12px;color:var(--muted);border:1px solid rgba(31,42,63,.8);border-radius:999px;padding:6px 10px;display:inline-flex;align-items:center;gap:8px}.dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}.playerDock{position:fixed;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(180deg,#07080b00,#07080ba6 25%,#07080be0)}.playerBar{max-width:1240px;margin:0 auto;border:1px solid rgba(31,42,63,.9);border-radius:24px;background:linear-gradient(180deg,#0f1420d1,#0a0c12b8);box-shadow:0 24px 60px #0009;display:grid;grid-template-columns:320px 1fr 260px;gap:10px;padding:12px;align-items:center}@media(max-width:980px){.playerBar{grid-template-columns:1fr;gap:10px}}.playerMeta{display:flex;gap:12px;align-items:center;min-width:0}.cover{width:44px;height:44px;border-radius:14px;border:1px solid rgba(31,42,63,.9);background:radial-gradient(18px 18px at 30% 30%,rgba(124,255,212,.45),transparent 55%),radial-gradient(18px 18px at 70% 70%,rgba(138,163,255,.35),transparent 55%),#07080b59}.playerMeta .line1{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playerMeta .line2{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;align-items:center;justify-content:center;gap:10px}.iconBtn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(31,42,63,.9);background:#07080b40;color:var(--text);cursor:pointer;display:grid;place-items:center}.iconBtn.on{border-color:#7cffd473;background:#7cffd41a}.iconBtn:hover{border-color:#8aa3ff73}.iconBtn.primary{width:48px;height:48px;border-color:#7cffd459;background:#7cffd41f}.rangeRow{display:flex;align-items:center;gap:10px}.range{width:100%;accent-color:var(--accent)}.time{font-size:12px;color:var(--muted);min-width:90px;text-align:right}.viz{width:100%;height:160px;border-radius:18px;border:1px solid rgba(31,42,63,.7);background:#07080b40}