@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--bg-primary:#fafafa;--bg-secondary:#fff;--bg-tertiary:#f3f4f6;--bg-elevated:#fff;--border-color:#e5e7eb;--border-subtle:#f3f4f6;--text-primary:#0f0f14;--text-secondary:#6b7280;--text-muted:#9ca3af;--text-inverse:#fff;--brand-primary:#7c3aed;--brand-light:#a855f7;--brand-subtle:#f5f3ff;--brand-border:#ddd6fe;--accent:#06b6d4;--accent-subtle:#ecfeff;--success:#10b981;--success-subtle:#ecfdf5;--error:#ef4444;--error-subtle:#fef2f2;--warning:#f59e0b;--warning-subtle:#fffbeb;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 16px #0000001a;--shadow-lg:0 8px 32px #0000001f;--shadow-brand:0 4px 20px #7c3aed33;--overlay:#00000080;--player-bg:#fff;--player-border:#e5e7eb;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--bottom-nav-h:64px;--mini-player-h:68px;--header-h:60px;--sidebar-w:280px}[data-theme=dark]{--bg-primary:#0d0d12;--bg-secondary:#111118;--bg-tertiary:#161620;--bg-elevated:#1a1a24;--border-color:#1e1e2e;--border-subtle:#161620;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#0f0f14;--brand-primary:#7c3aed;--brand-light:#a855f7;--brand-subtle:#1a1030;--brand-border:#2d1b69;--accent:#06b6d4;--accent-subtle:#0c2a30;--success:#10b981;--success-subtle:#0c2a1f;--error:#ef4444;--error-subtle:#2a0f0f;--warning:#f59e0b;--warning-subtle:#2a1f0c;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-brand:0 4px 20px #7c3aed4d;--overlay:#000000b3;--player-bg:#111118;--player-border:#1e1e2e}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;height:100%}body{background-color:var(--bg-primary);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:DM Sans,sans-serif;font-size:15px;line-height:1.5;transition:background-color .3s,color .3s;overflow-x:hidden}#root{height:100%}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-family:Syne,sans-serif;font-weight:700;line-height:1.2}h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}h4{font-size:16px}p{color:var(--text-secondary)}a{color:var(--brand-primary);text-decoration:none;transition:opacity .2s}a:hover{opacity:.8}:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;border-radius:4px}.font-display{font-family:Syne,sans-serif}.font-body{font-family:DM Sans,sans-serif}.font-mono{font-family:Space Mono,monospace}.text-brand{color:var(--brand-primary)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.bg-elevated{background:var(--bg-elevated)}.bg-tertiary{background:var(--bg-tertiary)}.border-default{border:1px solid var(--border-color)}.border-subtle{border:1px solid var(--border-subtle)}.shadow-brand{box-shadow:var(--shadow-brand)}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;height:48px;padding:0 20px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:disabled:active{transform:none}.btn-primary{background:var(--brand-primary);color:#fff}.btn-primary:hover{filter:brightness(1.1);box-shadow:var(--shadow-brand);transform:translateY(-1px)}.btn-ghost{color:var(--brand-primary);border:1.5px solid var(--brand-primary);background:0 0}.btn-ghost:hover{background:var(--brand-subtle)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{filter:brightness(1.05)}.btn-full{width:100%}.input{background:var(--bg-tertiary);border:1.5px solid var(--border-color);width:100%;height:52px;color:var(--text-primary);border-radius:12px;outline:none;padding:0 16px;font-family:DM Sans,sans-serif;font-size:15px;transition:all .2s}.input:focus{border-color:var(--brand-primary);background:var(--bg-elevated);box-shadow:0 0 0 3px #7c3aed1f}.input::placeholder{color:var(--text-muted)}.input.error{border-color:var(--error);box-shadow:0 0 0 3px #ef44441f}.input.success{border-color:var(--success)}.card{background:var(--bg-elevated);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:20px;padding:20px}.sheet{background:var(--bg-elevated);border-top:1px solid var(--border-color);border-radius:28px 28px 0 0;padding:0 16px 32px}.sheet-handle{background:var(--border-color);border-radius:2px;width:36px;height:4px;margin:12px auto 20px}.overlay{background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40;animation:.2s fadeIn;position:fixed;inset:0}.page{background:var(--bg-primary);flex-direction:column;height:100vh;display:flex;overflow:hidden}.page-header{height:var(--header-h);background:var(--bg-elevated);border-bottom:1px solid var(--border-color);z-index:10;flex-shrink:0;align-items:center;gap:12px;padding:0 16px;display:flex;position:sticky;top:0}.page-content{padding-bottom:calc(var(--mini-player-h) + var(--bottom-nav-h) + 16px);flex:1;overflow-y:auto}@media (width>=768px){.page-content{padding-bottom:calc(var(--mini-player-h) + 16px)}}.section-label{letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);padding:16px 16px 8px;font-size:11px;font-weight:600}.divider{background:var(--border-subtle);height:1px;margin:8px 0}.skeleton{background:linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);background-size:200% 100%;border-radius:8px;animation:1.5s infinite shimmer}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes heartPop{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}@keyframes wave{0%,to{height:6px}50%{height:18px}}.animate-fadeIn{animation:.3s fadeIn}.animate-slideUp{animation:.3s cubic-bezier(.16,1,.3,1) slideUp}.animate-sheetUp{animation:.35s cubic-bezier(.16,1,.3,1) sheetUp}.animate-scaleIn{animation:.25s cubic-bezier(.16,1,.3,1) scaleIn}.animate-shake{animation:.4s shake}.animate-heartPop{animation:.35s heartPop}.animate-pulse-brand{animation:2s infinite pulse}