:root{--c-bg:#f1f5f9;--c-surface:#f8fafc;--c-surface-raised:#fff;--c-canvas-bg:#f0f4f8;--c-border:#e2e8f0;--c-border-strong:#cbd5e1;--c-text:#1e293b;--c-text-2:#374151;--c-text-muted:#6b7280;--c-text-faint:#9ca3af;--c-topbar-bg:#1e293b;--c-topbar-fg:#f1f5f9;--c-topbar-muted:#64748b;--c-primary:#2563eb;--c-primary-fg:#fff;--c-success:#059669;--c-danger:#dc2626;--c-danger-fg:#fff;--c-warning:#f59e0b}:root[data-theme=dark]{--c-bg:#0f172a;--c-surface:#1e293b;--c-surface-raised:#1e293b;--c-canvas-bg:#0f172a;--c-border:#334155;--c-border-strong:#475569;--c-text:#f1f5f9;--c-text-2:#cbd5e1;--c-text-muted:#94a3b8;--c-text-faint:#64748b;--c-topbar-bg:#0f172a;--c-topbar-fg:#f1f5f9;--c-topbar-muted:#475569;--c-primary:#3b82f6;--c-primary-fg:#fff;--c-success:#10b981;--c-danger:#f87171;--c-danger-fg:#450a0a;--c-warning:#fbbf24}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--c-bg:#0f172a;--c-surface:#1e293b;--c-surface-raised:#1e293b;--c-canvas-bg:#0f172a;--c-border:#334155;--c-border-strong:#475569;--c-text:#f1f5f9;--c-text-2:#cbd5e1;--c-text-muted:#94a3b8;--c-text-faint:#64748b;--c-topbar-bg:#0f172a;--c-topbar-fg:#f1f5f9;--c-topbar-muted:#475569;--c-primary:#3b82f6;--c-primary-fg:#fff;--c-success:#10b981;--c-danger:#f87171;--c-danger-fg:#450a0a;--c-warning:#fbbf24}}*{scrollbar-width:thin;scrollbar-color:var(--c-border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--c-border-strong);background-clip:padding-box;border:2px solid #0000;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:var(--c-text-muted)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}.player-layout{background:var(--c-bg);height:100dvh;color:var(--c-text);flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;overflow:hidden}.player-topbar{background:var(--c-topbar-bg);height:40px;color:var(--c-topbar-fg);border-bottom:1px solid var(--c-border);z-index:10;flex-shrink:0;align-items:center;gap:12px;padding:0 16px;font-size:13px;font-weight:600;display:flex}.player-topbar .title{color:var(--c-topbar-fg);letter-spacing:-.01em;font-size:14px;font-weight:700}.player-topbar .subtitle{color:var(--c-topbar-muted);font-size:11px}.player-topbar .switch-link{color:var(--c-topbar-fg);border:1px solid var(--c-topbar-muted);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}.player-topbar .switch-link:hover{border-color:var(--c-warning);background:#f59e0b1f}.player-body{flex:1;min-height:0;display:flex;overflow:hidden}.player-sidebar{border-right:1px solid var(--c-border);background:radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 45%), linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)) 0%, var(--c-surface) 100%);flex-direction:column;flex-shrink:0;gap:12px;width:260px;padding:16px;display:flex;overflow-y:auto}.player-main{background:var(--c-bg);flex:1;padding:16px;overflow-y:auto}