@import"https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";.sidebar{position:sticky;top:16px;z-index:11;margin:16px 0 16px 16px;height:calc(100dvh - 116px);max-height:calc(100dvh - 116px);background:color-mix(in srgb,var(--panel-sidebar) 38%,transparent);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--border-base);border-radius:20px;box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--mood-a),.06);padding:0;display:flex;flex-direction:column;width:280px;flex-shrink:0;transition:box-shadow .4s ease,width var(--transition-normal);overflow:hidden}.sidebar-header{padding:24px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid transparent;transition:none}.sidebar-brand{display:flex;align-items:center;gap:12px;min-width:0}.sidebar-brand:hover .brand-logo-mark{transform:scale(1.05)}.sidebar-brand .brand-logo-title{margin:0;font-size:22px;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;color:var(--text-base);white-space:nowrap}.sidebar-mode-toggle{width:32px;height:32px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:none}.sidebar-mode-toggle svg{width:18px;height:18px}.sidebar-mode-toggle:hover{background:var(--bg-elevated);color:var(--text-base)}.sidebar-mode-toggle:active{transform:scale(.95)}.sidebar-content{flex:1;display:flex;flex-direction:column;gap:24px;padding:20px 16px;overflow-y:auto}.sidebar-nav-section{display:flex;flex-direction:column;gap:12px}.sidebar-section-title{margin:0 0 8px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-subdued);padding-left:12px}.sidebar-nav-links{display:flex;flex-direction:column;gap:4px}.sidebar-link{display:flex;align-items:center;gap:16px;border:none;border-radius:var(--radius-md);padding:12px;color:var(--text-subdued);background:transparent;cursor:pointer;text-decoration:none;font-size:14px;font-weight:500;transition:none;width:100%;text-align:left;position:relative;overflow:hidden}.sidebar-link:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-green);transform:scaleY(0);transition:none}.sidebar-link:hover{color:var(--text-base);background:var(--bg-elevated);transform:translate(4px)}.sidebar-link.active{color:var(--text-base);background:var(--bg-elevated)}.sidebar-link.active:before{transform:scaleY(1)}.sidebar-link svg{width:24px;height:24px;flex-shrink:0;transition:none}.sidebar-link:hover svg{transform:scale(1.1)}.sidebar-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-link-action{border:1px dashed var(--border-base);margin-top:8px}.sidebar-link-action:hover{border-color:var(--border-highlight);border-style:solid;background:var(--bg-elevated)}.sidebar-footer{padding:16px;border-top:1px solid var(--border-subdued);background:var(--bg-subdued)}.sidebar-footer-row{display:flex;align-items:center;gap:8px}.sidebar-logout-btn{display:flex;align-items:center;gap:12px;padding:12px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--text-subdued);cursor:pointer;font-size:14px;font-weight:500;transition:none;width:100%}.sidebar-logout-btn:hover{color:var(--error);background:#f15e6c1a}.sidebar-logout-btn:active{transform:scale(.98)}.sidebar-logout-btn svg{width:24px;height:24px;flex-shrink:0}.sidebar.sidebar-collapsed{width:88px}.sidebar.sidebar-collapsed .sidebar-header{padding:20px 12px;flex-direction:column;gap:16px;border-bottom:none}.sidebar.sidebar-collapsed .sidebar-brand{flex-direction:column}.sidebar.sidebar-collapsed .brand-logo-title{display:none}.sidebar.sidebar-collapsed .sidebar-content{padding:16px 12px;gap:20px}.sidebar.sidebar-collapsed .sidebar-section-title{display:none}.sidebar.sidebar-collapsed .sidebar-link{justify-content:center;padding:12px}.sidebar.sidebar-collapsed .sidebar-link:before{display:none}.sidebar.sidebar-collapsed .sidebar-link span{display:none}.sidebar.sidebar-collapsed .sidebar-footer{padding:16px 12px}.sidebar.sidebar-collapsed .sidebar-footer-row{flex-direction:column;gap:12px}.sidebar.sidebar-collapsed .sidebar-logout-btn span{display:none}.sidebar.sidebar-collapsed .sidebar-logout-btn{justify-content:center;width:48px;height:48px;padding:0;border-radius:var(--radius-full)}.sidebar.sidebar-collapsed .sidebar-mode-toggle svg{width:18px;height:18px;transform:rotate(180deg)}.sidebar.sidebar-collapsed .sidebar-logout-btn:hover{background:#f15e6c26}@media (max-width: 900px){.sidebar{position:fixed;top:auto;margin:0;bottom:max(8px,env(safe-area-inset-bottom));left:10px;right:10px;z-index:20;width:auto;max-width:none;height:75px;border:1px solid var(--border-base);background:var(--panel-overlay);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-xl);flex-direction:row;align-items:center}.sidebar-header,.sidebar-section-title,.sidebar-footer{display:none}.sidebar-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:100%;padding:0;gap:0;overflow:hidden}.sidebar-nav-section{display:contents}.sidebar-nav-links{display:flex;flex-direction:row;flex:1;gap:10px;width:100%;padding:9px 10px;justify-content:center;align-items:center}.sidebar-link{flex:1;justify-content:center;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 8px;border-radius:var(--radius-lg);font-size:12px}.sidebar-link svg{width:21px;height:21px}.sidebar.sidebar-collapsed{width:auto;max-width:none}.sidebar-link span{display:block;overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:.03em;text-transform:uppercase;font-weight:600}.sidebar-link-action{display:flex}.sidebar-link.active{background:var(--brand-accent-soft);color:var(--brand-green)}.sidebar-link.active:before{display:none}}:root[data-theme=light] .sidebar-brand .brand-logo-mark .music-logo{color:var(--brand-green)}:root[data-theme=light] .sidebar-mode-toggle:hover{background:var(--bg-highlight)}:root[data-theme=light] .sidebar-link:hover{background:var(--bg-highlight)}:root[data-theme=light] .sidebar-link.active{background:var(--bg-highlight)}:root[data-theme=light] .sidebar-footer{background:var(--bg-subdued);border-top-color:var(--border-subdued)}.topbar{position:sticky;top:0;z-index:10;flex-shrink:0;padding:20px var(--app-gutter-x, clamp(20px, 2.5vw, 32px)) 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;background:transparent;border-bottom:1px solid transparent;transition:border-color .35s cubic-bezier(.22,1,.36,1)}.topbar-scrolled{border-bottom-color:var(--border-base)}.topbar-main{min-width:0}.topbar-label{margin:0 0 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--brand-green)}.topbar-title{margin:0;font-size:clamp(26px,4vw,42px);font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;color:var(--text-base);line-height:1.05}.topbar-controls{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-bottom:2px}.topbar-action-btn{width:40px;height:40px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-base);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast)}.topbar-action-btn svg{width:18px;height:18px}.topbar-action-btn:hover{border-color:var(--border-base);background:var(--bg-strong)}.topbar-logout-btn:hover{color:var(--error);border-color:#ff6b6b59;background:#ff6b6b14}.topbar-logout-btn,.topbar-action-theme{display:none}.role-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg-elevated);border:1px solid var(--border-subdued);border-radius:var(--radius-full)}.role-chip-full{font-size:13px;font-weight:600;color:var(--text-base)}.role-chip-mobile{display:none;width:32px;height:32px;border-radius:var(--radius-full);background:var(--gradient-accent);color:var(--brand-on-accent);font-size:14px;font-weight:700;align-items:center;justify-content:center}@media (max-width: 900px){.topbar{padding:16px var(--app-gutter-x, 20px) 14px;align-items:center}.topbar-label{display:none}.topbar-title{font-size:22px}.topbar-main{flex:1;min-width:0}.topbar-controls{gap:8px;padding-bottom:0}.topbar-action-theme,.topbar-logout-btn{display:grid}.topbar-action-theme.theme-toggle-compact{width:40px;min-width:40px;height:40px}.role-chip{width:40px;height:40px;border-radius:var(--radius-full);padding:0;display:grid;place-items:center}.role-chip-full{display:none}.role-chip-mobile{display:grid}}:root{--mood-a: 255, 95, 109;--mood-b: 255, 195, 113;--font-body: "Inter", "SF Pro Text", "Segoe UI", sans-serif;--font-heading: "Sora", "SF Pro Display", sans-serif;--font-display: "Sora", "SF Pro Display", sans-serif;--bg-base: #0b0b0d;--bg-subdued: #111113;--bg-highlight: #17171a;--bg-elevated: #1c1c1f;--bg-strong: #242429;--brand-green: rgb(var(--mood-a));--brand-green-hover: rgb(var(--mood-b));--brand-secondary: rgb(var(--mood-b));--brand-accent-rgb: var(--mood-a);--brand-accent-soft: rgba(var(--mood-a), .14);--brand-accent-medium: rgba(var(--mood-a), .28);--brand-accent-glow: rgba(var(--mood-a), .45);--brand-on-accent: #0b0b0d;--text-base: #f5f5f7;--text-subdued: #98989f;--text-placeholder: #6e6e76;--interactive-normal: #98989f;--interactive-hover: #f5f5f7;--interactive-active: rgb(var(--mood-a));--border-subdued: rgba(255, 255, 255, .08);--border-base: rgba(255, 255, 255, .13);--border-highlight: rgba(255, 255, 255, .22);--success: #34d399;--warning: #ffb347;--error: #ff5f6d;--notice: #6b9dff;--panel-card: #141416;--panel-card-hover: #1b1b1e;--panel-sidebar: rgba(11, 11, 13, .92);--panel-player: rgba(17, 17, 19, .94);--panel-overlay: rgba(11, 11, 13, .82);--gradient-hero: linear-gradient(180deg, #111113 0%, var(--bg-base) 100%);--gradient-card: linear-gradient(145deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%), #141416;--gradient-sidebar: linear-gradient(180deg, #111113 0%, #0b0b0d 100%);--gradient-accent: linear-gradient(135deg, rgb(var(--mood-a)) 0%, rgb(var(--mood-b)) 100%);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);--shadow-xl: 0 24px 56px rgba(0, 0, 0, .6);--shadow-glow: 0 0 32px var(--brand-accent-glow);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .45s cubic-bezier(.22, 1, .36, 1);--ease-out-expo: cubic-bezier(.22, 1, .36, 1)}:root[data-theme=light]{--bg-base: #f5f5f7;--bg-subdued: #ececed;--bg-highlight: #e2e2e4;--bg-elevated: #ffffff;--bg-strong: #d8d8da;--brand-on-accent: #0b0b0d;--text-base: #1d1d1f;--text-subdued: #6e6e73;--text-placeholder: #98989d;--interactive-normal: #6e6e73;--interactive-hover: #1d1d1f;--interactive-active: rgb(var(--mood-a));--border-subdued: rgba(0, 0, 0, .07);--border-base: rgba(0, 0, 0, .12);--border-highlight: rgba(0, 0, 0, .22);--success: #1f9d6f;--warning: #b9790a;--error: #d92d3f;--notice: #3568d4;--panel-card: #ffffff;--panel-card-hover: #f4f4f5;--panel-sidebar: rgba(255, 255, 255, .95);--panel-player: rgba(255, 255, 255, .96);--panel-overlay: rgba(245, 245, 247, .9);--gradient-hero: radial-gradient(ellipse 100% 70% at 0% -10%, rgba(var(--mood-a), .12) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 100% 0%, rgba(var(--mood-b), .1) 0%, transparent 45%), linear-gradient(180deg, #ffffff 0%, var(--bg-base) 100%);--gradient-card: linear-gradient(145deg, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, 0) 100%), #ffffff;--gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 8px 24px rgba(0, 0, 0, .08);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .1);--shadow-xl: 0 24px 56px rgba(0, 0, 0, .12);--shadow-glow: 0 0 24px var(--brand-accent-glow)}.app-shell-layout,.landing-page{--brand-green: rgb(var(--mood-a));--brand-green-hover: rgb(var(--mood-b));--brand-secondary: rgb(var(--mood-b));--brand-accent-rgb: var(--mood-a);--brand-accent-soft: rgba(var(--mood-a), .14);--brand-accent-medium: rgba(var(--mood-a), .28);--brand-accent-glow: rgba(var(--mood-a), .45);--interactive-active: rgb(var(--mood-a));--gradient-accent: linear-gradient(135deg, rgb(var(--mood-a)) 0%, rgb(var(--mood-b)) 100%)}:root[data-theme=light] .app-shell-layout,:root[data-theme=light] .landing-page{--brand-green: color-mix(in srgb, rgb(var(--mood-a)) 45%, black 55%);--brand-green-hover: color-mix(in srgb, rgb(var(--mood-b)) 45%, black 55%);--brand-secondary: color-mix(in srgb, rgb(var(--mood-b)) 45%, black 55%)}*{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;font-family:var(--font-body);background:var(--bg-base);color:var(--text-base);line-height:1.55;overflow-x:hidden;letter-spacing:.01em}h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-heading);font-weight:700;line-height:1.15;letter-spacing:-.03em}p{margin:0;line-height:1.6}a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--brand-green)}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}input,textarea,select{font:inherit;border:1px solid var(--border-subdued);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-base);padding:12px 16px;transition:all var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand-green);box-shadow:0 0 0 3px var(--brand-accent-soft)}input::placeholder,textarea::placeholder{color:var(--text-placeholder)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-base);border-radius:999px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:var(--border-highlight)}::selection{background:var(--brand-accent-medium);color:var(--text-base)}:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:12px;left:12px;z-index:300;padding:10px 16px;border-radius:var(--radius-full);background:var(--gradient-accent);color:var(--brand-on-accent);font-size:14px;font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform var(--transition-fast)}.skip-link:focus{transform:translateY(0)}.text-subdued{color:var(--text-subdued)}.text-placeholder{color:var(--text-placeholder)}.text-brand{color:var(--brand-green)}.bg-elevated{background:var(--bg-elevated)}.bg-subdued{background:var(--bg-subdued)}.border-base{border:1px solid var(--border-subdued)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}@keyframes slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in{animation:fade-in var(--transition-normal) ease-out}.animate-slide-up{animation:slide-up var(--transition-slow) ease-out}.animate-scale-in{animation:scale-in var(--transition-normal) ease-out}.hover-lift{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.glow-brand{box-shadow:var(--shadow-glow)}.gradient-hero{background:var(--gradient-hero)}.gradient-card{background:var(--gradient-card)}body{position:relative;isolation:isolate}#root{position:relative;z-index:1;min-height:100vh}.app-shell-layout,.landing-page{position:relative}.app-page>section{position:relative;animation:page-reveal .6s var(--ease-out-expo) both}@keyframes page-reveal{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.track-card,.playlist-card,.result-item,.playlist-track-item{animation:card-rise .55s var(--ease-out-expo) both}.track-card:nth-child(1),.playlist-card:nth-child(1),.result-item:nth-child(1),.playlist-track-item:nth-child(1){animation-delay:.04s}.track-card:nth-child(2),.playlist-card:nth-child(2),.result-item:nth-child(2),.playlist-track-item:nth-child(2){animation-delay:.08s}.track-card:nth-child(3),.playlist-card:nth-child(3),.result-item:nth-child(3),.playlist-track-item:nth-child(3){animation-delay:.12s}.track-card:nth-child(4),.playlist-card:nth-child(4),.result-item:nth-child(4),.playlist-track-item:nth-child(4){animation-delay:.16s}.track-card:nth-child(5),.playlist-card:nth-child(5),.result-item:nth-child(5),.playlist-track-item:nth-child(5){animation-delay:.2s}.track-card:nth-child(n+6),.playlist-card:nth-child(n+6),.result-item:nth-child(n+6),.playlist-track-item:nth-child(n+6){animation-delay:.24s}@keyframes card-rise{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.mood-chip,.genre-tag{animation:chip-in .45s var(--ease-out-expo) both}.mood-chip:nth-child(1),.genre-tag:nth-child(1){animation-delay:.05s}.mood-chip:nth-child(2),.genre-tag:nth-child(2){animation-delay:.1s}.mood-chip:nth-child(3),.genre-tag:nth-child(3){animation-delay:.15s}.mood-chip:nth-child(4),.genre-tag:nth-child(4){animation-delay:.2s}.mood-chip:nth-child(5),.genre-tag:nth-child(5){animation-delay:.25s}@keyframes chip-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.landing-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.landing-backdrop:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 90% 55% at 12% -8%,rgba(var(--mood-a),.14) 0%,transparent 58%),radial-gradient(ellipse 70% 50% at 88% 108%,rgba(var(--mood-b),.12) 0%,transparent 55%),radial-gradient(ellipse 55% 40% at 50% 42%,rgba(var(--mood-a),.06) 0%,transparent 70%)}.landing-orb{position:absolute;border-radius:50%;filter:blur(88px)}@media (prefers-reduced-motion: no-preference){.landing-orb{will-change:transform}}.landing-orb-1{width:min(440px,52vw);height:min(440px,52vw);top:-16vh;left:-10vw;background:rgba(var(--mood-a),.3);animation:orb-drift-1 26s ease-in-out infinite}.landing-orb-2{width:min(340px,40vw);height:min(340px,40vw);bottom:-12vh;right:-4vw;background:rgba(var(--mood-b),.2);animation:orb-drift-2 32s ease-in-out infinite}.landing-orb-3{width:min(460px,52vw);height:min(460px,52vw);left:38vw;bottom:-20vh;background:rgba(var(--mood-a),.14);animation:orb-drift-3 38s ease-in-out infinite}.landing-orb-4{width:min(280px,34vw);height:min(280px,34vw);top:24vh;left:10vw;background:rgba(var(--mood-b),.16);animation:orb-drift-4 30s ease-in-out infinite}@keyframes orb-drift-1{0%,to{transform:translate(0) scale(1);opacity:.85}50%{transform:translate(30px,20px) scale(1.08);opacity:1}}@keyframes orb-drift-2{0%,to{transform:translate(0) scale(1);opacity:.8}50%{transform:translate(-24px,-18px) scale(1.05);opacity:1}}@keyframes orb-drift-3{0%,to{transform:translate(0) scale(1);opacity:.75}50%{transform:translate(-18px,-26px) scale(1.1);opacity:1}}@keyframes orb-drift-4{0%,to{transform:translate(0) scale(1);opacity:.6}50%{transform:translate(16px,-20px) scale(1.12);opacity:.95}}@media (prefers-reduced-motion: reduce){.landing-orb{animation:none;opacity:1}.app-page>section,.track-card,.playlist-card,.result-item,.playlist-track-item,.mood-chip,.genre-tag{animation:none}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:200;animation:fade-in .15s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content{background:var(--bg-elevated);border:1px solid var(--border-subdued);border-radius:var(--radius-xl);padding:24px;width:90%;max-width:440px;animation:slide-up .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-header h2{margin:0;font-size:20px;font-weight:700;color:var(--text-base);font-family:var(--font-heading)}.modal-close-btn{width:32px;height:32px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast)}.modal-close-btn:hover{color:var(--text-base);background:#ffffff1a}.modal-close-btn svg{width:20px;height:20px}.modal-field{margin-bottom:16px}.modal-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--text-subdued)}.modal-input{width:100%;border:1px solid var(--border-subdued);border-radius:var(--radius-md);padding:10px 14px;background:var(--bg-base);color:var(--text-base);font-size:15px;font-family:var(--font-body);outline:none;transition:all var(--transition-fast);box-sizing:border-box}.modal-input::placeholder{color:var(--text-placeholder)}.modal-input:focus{border-color:var(--brand-green);box-shadow:0 0 0 2px var(--brand-accent-soft)}.modal-textarea{resize:vertical;min-height:80px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.modal-btn{border:none;border-radius:var(--radius-full);padding:10px 24px;font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast)}.modal-btn-primary{background:var(--gradient-accent);color:var(--brand-on-accent)}.modal-btn-primary:hover:not(:disabled){background:var(--brand-green-hover);transform:scale(1.02)}.modal-btn-primary:disabled{opacity:.5;cursor:not-allowed}.modal-btn-secondary{background:transparent;color:var(--text-base);border:1px solid var(--border-subdued)}.modal-btn-secondary:hover{border-color:var(--border-base);background:var(--bg-strong)}.modal-content-confirm{max-width:400px}.modal-confirm-text{margin:0;color:var(--text-subdued);font-size:15px;line-height:1.5}.modal-btn-danger{background:#ef4444;color:#fff}.modal-btn-danger:hover{background:#dc2626;transform:scale(1.02)}:root[data-theme=light] .modal-overlay{background:#0006}:root[data-theme=light] .modal-content{background:var(--bg-elevated)}:root[data-theme=light] .modal-close-btn:hover{background:#0000000f}.brand-logo{display:inline-flex;align-items:center;gap:12px;min-width:0}.brand-logo-mark{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;transition:transform var(--transition-fast)}.brand-logo-mark .music-logo{width:40px;height:40px;color:var(--brand-green);filter:drop-shadow(0 0 12px var(--brand-accent-glow))}.brand-logo-title{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text-base)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:var(--radius-full);font-size:15px;font-weight:700;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;border:none;white-space:nowrap}.btn:active{transform:scale(.98)}.btn-primary{background:var(--gradient-accent);color:var(--brand-on-accent);box-shadow:0 4px 20px var(--brand-accent-glow)}.btn-primary:hover{background:var(--brand-green-hover);transform:scale(1.02);box-shadow:0 8px 28px var(--brand-accent-glow)}.btn-secondary{background:transparent;color:var(--text-base);border:1px solid var(--border-base)}.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--border-highlight);transform:scale(1.02)}.btn-outline{background:transparent;color:var(--text-base);border:1px solid var(--border-highlight)}.btn-outline:hover{border-color:var(--text-base);background:#ffffff0a}.btn-sm{padding:10px 20px;font-size:13px}.btn-lg{padding:18px 36px;font-size:16px}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-base);transition:all var(--transition-fast)}.theme-toggle:hover{border-color:var(--border-base);background:var(--bg-strong)}.theme-toggle-compact{width:36px;min-width:36px;padding:0}.card{background:var(--gradient-card);border:1px solid var(--border-subdued);border-radius:var(--radius-xl);padding:20px;transition:all var(--transition-normal)}.card:hover{background:var(--panel-card-hover);border-color:var(--border-base);transform:translateY(-4px)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title{font-size:18px;font-weight:700;color:var(--text-base);margin:0}.card-subtitle{font-size:13px;color:var(--text-subdued);margin:0}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;white-space:nowrap;transition:all var(--transition-fast)}.chip-default{background:var(--bg-elevated);color:var(--text-subdued);border:1px solid var(--border-subdued)}.chip-brand{background:var(--brand-accent-soft);color:var(--brand-green);border:1px solid var(--brand-accent-medium)}.chip-warning{background:#ffbf241f;color:var(--warning);border:1px solid rgba(255,191,36,.2)}.chip-error{background:#f15e6c1f;color:var(--error);border:1px solid rgba(241,94,108,.2)}.chip:hover{transform:scale(1.02)}.input{width:100%;padding:14px 18px;background:var(--bg-elevated);border:1px solid var(--border-subdued);border-radius:var(--radius-full);color:var(--text-base);font-size:15px;transition:all var(--transition-fast)}.input:focus{outline:none;border-color:var(--brand-green);box-shadow:0 0 0 3px var(--brand-accent-soft)}.input::placeholder{color:var(--text-placeholder)}.input-with-icon{position:relative}.input-with-icon .input{padding-left:48px}.input-with-icon .input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-subdued);pointer-events:none}.spinner{width:24px;height:24px;border:2px solid var(--border-subdued);border-top-color:var(--brand-green);border-radius:50%;animation:spin .8s linear infinite}.spinner-sm{width:16px;height:16px;border-width:1.5px}.spinner-lg{width:40px;height:40px;border-width:3px}.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-strong) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-text{height:16px;margin-bottom:8px}.skeleton-title{height:24px;margin-bottom:12px}.skeleton-image{aspect-ratio:1;border-radius:var(--radius-lg);margin-bottom:12px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.tooltip{position:relative;display:inline-block}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);padding:8px 12px;background:var(--bg-strong);color:var(--text-base);font-size:12px;font-weight:500;border-radius:var(--radius-md);white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--transition-fast);box-shadow:var(--shadow-md);z-index:1000}.tooltip:hover:after{opacity:1;transform:translate(-50%) translateY(-4px)}.divider{height:1px;background:var(--border-subdued);border:none;margin:0}.divider-vertical{width:1px;height:100%;background:var(--border-subdued)}.icon-btn{width:40px;height:40px;border-radius:var(--radius-full);border:none;background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{background:var(--bg-elevated);color:var(--text-base)}.icon-btn:active{transform:scale(.95)}.icon-btn.active{color:var(--brand-green)}.icon-btn-sm{width:32px;height:32px}.icon-btn-lg{width:48px;height:48px}.scroll-to-top{position:fixed;bottom:100px;right:24px;width:48px;height:48px;border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--border-base);color:var(--text-base);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:all var(--transition-fast);z-index:90;box-shadow:var(--shadow-lg)}.scroll-to-top.visible{opacity:1;pointer-events:auto}.scroll-to-top:hover{background:var(--bg-strong);transform:translateY(-2px)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-icon{width:80px;height:80px;border-radius:var(--radius-xl);background:var(--bg-elevated);display:grid;place-items:center;color:var(--text-subdued);margin-bottom:20px}.empty-state-title{font-size:20px;font-weight:700;color:var(--text-base);margin-bottom:8px}.empty-state-description{font-size:14px;color:var(--text-subdued);max-width:400px;line-height:1.6}:root[data-theme=light] .btn-secondary:hover{background:var(--bg-highlight)}:root[data-theme=light] .icon-btn:hover{background:var(--bg-highlight)}:root[data-theme=light] .chip-default{background:var(--bg-highlight)}.landing-page{font-family:var(--font-body);min-height:100dvh;display:flex;flex-direction:column;gap:28px;padding:24px clamp(20px,4vw,40px) 32px;background:transparent;position:relative;overflow:visible}.landing-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1180px,100%);margin:0 auto}.landing-cta-slot{width:100%;min-height:56px;grid-area:body;max-width:560px}.landing-cta-dock{width:100%}.landing-cta-dock .landing-cta{width:100%;align-self:stretch}.landing-shell{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,480px);grid-template-rows:auto auto;grid-template-areas:"intro preview" "body preview";gap:clamp(24px,4vw,56px);align-items:start;align-content:start;width:min(1180px,100%);margin:0 auto}.landing-intro{grid-area:intro;display:flex;flex-direction:column;gap:20px;max-width:560px}.landing-auth-body{grid-area:body;display:flex;flex-direction:column;gap:20px;max-width:560px}.landing-auth-kicker{margin:0;color:var(--brand-green);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;transition:color .4s ease}.landing-intro h1{margin:0;font-size:clamp(38px,5.5vw,58px);font-family:var(--font-display);font-weight:800;color:var(--text-base);letter-spacing:-.03em;line-height:1.04}.landing-auth-lead{margin:0;color:var(--text-subdued);font-size:clamp(15px,2vw,18px);line-height:1.65;max-width:42ch}.landing-features{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.landing-features li{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-subdued);font-size:13px;font-weight:500;white-space:nowrap}.landing-feature-led{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0;background:var(--brand-green);box-shadow:0 0 0 3px var(--brand-accent-soft),0 0 10px var(--brand-accent-glow);transition:background-color .4s ease,box-shadow .4s ease}.landing-actions{display:flex;flex-direction:column;gap:14px;margin-top:4px;max-width:420px}.landing-actions--dock{margin-top:0;max-width:none;width:100%}.landing-auth-hint{margin-top:8px}.landing-cta{width:auto;align-self:flex-start;position:relative;transition:background .4s ease}@media (prefers-reduced-motion: no-preference){.landing-cta{animation:landing-cta-pulse 3.2s ease-in-out infinite}}@keyframes landing-cta-pulse{0%,to{box-shadow:0 4px 20px var(--brand-accent-glow)}50%{box-shadow:0 4px 20px var(--brand-accent-glow),0 0 0 6px var(--brand-accent-soft)}}.landing-divider{position:relative;color:var(--text-subdued);font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;text-align:center}.landing-divider:before,.landing-divider:after{content:"";position:absolute;top:50%;width:calc(50% - 36px);height:1px;background:var(--border-subdued)}.landing-divider:before{left:0}.landing-divider:after{right:0}.landing-hint{margin:0;color:var(--text-subdued);font-size:13px;line-height:1.5}.landing-footer{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-subdued);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.landing-preview{grid-area:preview;align-self:start;position:relative;min-width:0;overflow:visible}.landing-preview-shell{position:relative;padding:0;overflow:visible}.landing-preview-panel{position:relative;z-index:1;border:1px solid var(--border-base);border-radius:calc(var(--radius-xl) + 4px);background:color-mix(in srgb,var(--panel-card) 88%,transparent);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);padding:24px;display:flex;flex-direction:column;gap:16px;overflow:visible;box-shadow:var(--shadow-xl)}.landing-preview-kicker,.landing-preview-heading,.landing-preview-section{position:relative;z-index:1;margin:0}.landing-preview-kicker{color:var(--brand-green);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:color .4s ease}.landing-preview-heading{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--text-base)}.landing-preview-section{font-size:13px;font-weight:700;color:var(--text-subdued);text-transform:uppercase;letter-spacing:.08em}.landing-preview-moods{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}.landing-preview-mood{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-full);border:1px solid var(--border-subdued);background:var(--bg-elevated);color:var(--text-subdued);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:background-color .35s ease,border-color .35s ease,color .35s ease,transform .15s ease}.landing-preview-mood:hover{border-color:var(--border-highlight)}.landing-preview-mood:active{transform:scale(.96)}.landing-preview-mood:focus-visible{outline:2px solid rgb(var(--mood-a));outline-offset:2px}.landing-preview-mood-active{border-color:rgba(var(--brand-accent-rgb),.4);background:rgba(var(--brand-accent-rgb),.16);color:var(--text-base)}.landing-preview-mood-active .mood-icon{animation:mood-icon-pop .45s var(--ease-out-expo)}.landing-preview-mood-active .mood-icon svg{color:rgb(var(--mood-a));filter:drop-shadow(0 0 8px rgba(var(--mood-a),.55))}@media (prefers-reduced-motion: no-preference){.landing-preview-mood-active .mood-icon svg{animation:mood-icon-glow 2.4s ease-in-out infinite}}.landing-preview-tracks{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(128px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.landing-preview-tracks::-webkit-scrollbar{display:none}.landing-preview-track{border:1px solid var(--border-subdued);border-radius:var(--radius-lg);background:var(--gradient-card);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}.landing-preview-track-active{border-color:rgba(var(--brand-accent-rgb),.35)}.landing-preview-track img{width:100%;aspect-ratio:1;border-radius:var(--radius-md);object-fit:cover;display:block}.landing-preview-track-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.landing-preview-track-meta strong,.landing-preview-player-meta strong{font-size:12px;line-height:1.3;color:var(--text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.landing-preview-track-meta span,.landing-preview-player-meta span{font-size:11px;color:var(--text-subdued);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.landing-preview-player{position:relative;z-index:1;margin-top:4px;border:1px solid var(--border-base);border-radius:var(--radius-xl);background:var(--panel-player);padding:10px 12px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;overflow:visible}.landing-preview-player-cover{width:44px;height:44px;border-radius:var(--radius-md);object-fit:cover}.landing-preview-player-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.landing-preview-player-controls{display:flex;align-items:center;gap:8px;padding:6px 4px;overflow:visible}.landing-preview-player-controls span{width:8px;height:8px;border-radius:var(--radius-full);background:var(--border-highlight)}.landing-preview-player-play{width:28px!important;height:28px!important;flex-shrink:0;background:var(--gradient-accent)!important}.vk-auth-block{display:flex;flex-direction:column;gap:12px;width:100%}.landing-error{margin:0;color:var(--error);font-size:14px;font-weight:500;padding:14px 18px;background:#ff5f6d1a;border:1px solid rgba(255,95,109,.22);border-radius:var(--radius-lg);text-align:left}.guard-state{min-height:100vh;display:grid;place-items:center;color:var(--text-subdued);font-size:15px;background:var(--bg-base)}.auth-loading{display:flex;flex-direction:column;align-items:center;gap:16px}.auth-loading-spinner{width:48px;height:48px;border:3px solid var(--border-subdued);border-top-color:var(--brand-green);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-loading-text{color:var(--text-subdued);font-size:14px;font-weight:500}@media (max-width: 960px){.landing-shell{grid-template-columns:1fr;grid-template-areas:"intro" "preview" "body";align-items:start}.landing-preview{align-self:stretch;padding:0}.landing-preview-shell{padding:0}.landing-preview-panel{padding:18px}.landing-actions,.landing-intro,.landing-auth-body{max-width:none}}@media (max-width: 900px){.landing-shell{display:flex;flex-direction:column;align-items:stretch;width:100%}.landing-intro,.landing-preview,.landing-auth-body,.landing-cta-slot{width:100%;max-width:none}.landing-intro{order:1}.landing-preview{order:2}.landing-auth-body{display:contents}.landing-features,.landing-auth-hint{order:3;width:100%;max-width:none}.landing-cta-slot{order:4}.landing-cta-dock--float{position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));width:auto;max-width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;padding:14px 0 6px;overflow:visible;pointer-events:none;box-sizing:border-box}.landing-cta-dock--float .landing-actions--dock{pointer-events:auto}.landing-cta-slot--settled .landing-cta-dock{position:static;padding:0;background:none}}@media (max-width: 600px){.landing-page{gap:18px;padding:16px 16px 24px}.landing-intro h1{font-size:32px}.landing-auth-lead{font-size:15px}.landing-footer{flex-direction:column;gap:4px}.landing-footer span:nth-child(2){display:none}}:root[data-theme=light] .landing-cta-dock--float{background:linear-gradient(180deg,rgba(245,245,247,0) 0%,var(--bg-base) 42%)}:root[data-theme=light] .landing-error{background:#d92d3f14;border-color:#d92d3f33}.app-shell-layout{display:grid;grid-template-columns:280px 1fr;grid-template-rows:1fr;column-gap:0;height:100dvh;max-height:100dvh;overflow:visible;background:transparent;transition:none;position:relative}.app-shell-layout-collapsed{grid-template-columns:88px 1fr}.app-main{grid-column:2;grid-row:1;display:flex;flex-direction:column;overflow-x:visible;overflow-y:hidden;min-height:0;min-width:0;position:relative;z-index:1}.app-content-area{flex:1;min-height:0;min-width:0;position:relative;z-index:1;overflow-x:visible;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:var(--app-content-top) var(--app-gutter-x) calc(var(--app-player-safe) + env(safe-area-inset-bottom));background:transparent}@media (max-width: 900px){.app-shell-layout{grid-template-columns:1fr;grid-template-rows:1fr;height:100dvh;max-height:100dvh}.app-shell-layout-collapsed{grid-template-columns:1fr}.app-main{grid-column:1}}.app-content-area::-webkit-scrollbar{width:12px}.app-content-area::-webkit-scrollbar-track{background:transparent}.app-content-area::-webkit-scrollbar-thumb{background:var(--border-base);border-radius:var(--radius-full);border:3px solid transparent;background-clip:content-box}.app-content-area::-webkit-scrollbar-thumb:hover{background-color:var(--border-highlight)}.page-enter{opacity:0;transform:translateY(16px)}.page-enter-active{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.page-exit{opacity:1}.page-exit-active{opacity:0;transition:opacity .2s ease}.app-main{--app-gutter-x: clamp(20px, 2.5vw, 32px);--app-aside-gap: 18px;--app-page-gap: 36px;--app-block-gap: 24px;--app-stack-gap: 16px;--app-tight-gap: 12px;--app-content-top: 28px;--app-player-safe: 120px}@media (min-width: 901px){.app-main{padding-inline-start:var(--app-aside-gap)}}@media (max-width: 900px){.app-main{--app-gutter-x: 20px;--app-page-gap: 28px;--app-block-gap: 20px;--app-stack-gap: 14px;--app-content-top: 16px;--app-player-safe: 196px}}.app-page{display:flex;flex-direction:column;min-width:0}.app-page>section{display:flex;flex-direction:column;gap:var(--app-block-gap);min-width:0}.app-page>section>p.section-subtitle:first-child{margin-bottom:0}.home-page{display:flex;flex-direction:column;gap:var(--app-page-gap, 36px);min-width:0;padding-top:4px}.mood-selector{margin:0;border:none;padding:10px 0 6px;min-width:0;display:flex;flex-direction:column;gap:20px}.mood-selector legend.section-subtitle{display:block;width:100%;padding:0;margin:0 0 2px}.mood-chips{display:flex;flex-wrap:wrap;gap:var(--app-tight-gap, 12px);margin:0;padding:4px 0 10px}@media (max-width: 900px){.mood-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--app-gutter-x, 16px));padding-inline:var(--app-gutter-x, 16px);padding-block:4px 8px;scrollbar-width:none}.mood-chips::-webkit-scrollbar{display:none}.mood-chip{flex-shrink:0}}.mood-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);padding:10px 20px;background:var(--bg-elevated);color:var(--text-base);font-size:14px;font-weight:500;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast)}.mood-chip:hover{border-color:var(--border-highlight);background:var(--bg-strong);box-shadow:0 4px 14px #00000029}.mood-chip:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}.mood-chip.active{border-color:var(--brand-green);background:var(--gradient-accent);color:var(--brand-on-accent);box-shadow:0 4px 16px var(--brand-accent-glow)}.mood-chip-emoji,.mood-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}.mood-icon svg{display:block;transition:filter var(--transition-fast)}.mood-chip.active .mood-icon,.mood-chip.active .mood-chip-emoji{animation:mood-icon-pop .45s var(--ease-out-expo)}.mood-chip.active .mood-icon svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.45))}@keyframes mood-icon-pop{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.35) rotate(-8deg)}65%{transform:scale(.95) rotate(4deg)}to{transform:scale(1) rotate(0)}}@media (prefers-reduced-motion: no-preference){.mood-chip.active .mood-icon svg{animation:mood-icon-glow 2.4s ease-in-out infinite}}@keyframes mood-icon-glow{0%,to{filter:drop-shadow(0 0 4px rgba(255,255,255,.25))}50%{filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}}@media (prefers-reduced-motion: reduce){.mood-chip.active .mood-icon,.mood-chip.active .mood-chip-emoji{animation:none}.mood-chip.active .mood-icon svg{animation:none}}.mood-description{color:var(--text-subdued);font-size:14px;margin:2px 0 0;line-height:1.55;padding-bottom:2px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--app-stack-gap, 16px);padding:56px var(--app-gutter-x, 20px);color:var(--text-subdued)}.loading-spinner{width:32px;height:32px;animation:spin 1s linear infinite;color:var(--brand-green)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-state{text-align:center;padding:40px var(--app-gutter-x, 20px);color:var(--text-subdued)}.error-state p{font-size:15px;margin:0 0 16px}.error-state-info{color:var(--text-base)}.error-retry-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);padding:10px 18px;background:var(--bg-elevated);color:var(--text-base);font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast)}.error-retry-btn svg{width:16px;height:16px}.error-retry-btn:hover{border-color:var(--brand-green);background:var(--bg-strong)}.now-playing-indicator{display:flex;align-items:flex-end;gap:2px;height:18px}.now-playing-indicator span{display:block;width:3px;background:var(--brand-on-accent);border-radius:1px;animation:bar-bounce .8s ease-in-out infinite alternate}.now-playing-indicator span:nth-child(1){height:8px;animation-delay:0s}.now-playing-indicator span:nth-child(2){height:14px;animation-delay:.2s}.now-playing-indicator span:nth-child(3){height:10px;animation-delay:.4s}@keyframes bar-bounce{0%{height:4px}to{height:18px}}.section-subtitle{margin:0;color:var(--text-subdued);font-size:15px;font-weight:400;line-height:1.5}p.section-subtitle{margin:0 0 var(--app-stack-gap, 16px)}.home-track-feed{display:flex;flex-direction:column;gap:var(--app-page-gap, 36px);min-width:0}.track-section{display:flex;flex-direction:column;gap:var(--app-stack-gap, 16px);min-width:0}.track-section-header{display:flex;flex-direction:column;gap:8px;padding-inline:0}.track-section-title{margin:0;font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--text-base);letter-spacing:-.02em;line-height:1.2}.track-section-subtitle{margin:0;font-size:14px;color:var(--text-subdued);line-height:1.45}.track-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(216px,13vw,248px);gap:var(--app-stack-gap, 16px);overflow-x:auto;overflow-y:visible;padding:8px 0 24px;scroll-snap-type:x proximity;scroll-padding-inline:var(--app-gutter-x, 28px);overscroll-behavior-x:contain;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-base) transparent}.track-row--bleed{margin-inline:calc(-1 * var(--app-gutter-x, 28px));padding-inline:var(--app-gutter-x, 28px)}.track-row::-webkit-scrollbar{height:10px}.track-row::-webkit-scrollbar-track{background:transparent}.track-row::-webkit-scrollbar-thumb{background:var(--border-base);border-radius:var(--radius-full);border:2px solid transparent;background-clip:content-box}.track-row::-webkit-scrollbar-thumb:hover{background-color:var(--border-highlight)}.track-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--app-stack-gap, 16px);padding:4px 0 8px}.track-card{background:var(--gradient-card);border:1px solid var(--border-subdued);border-radius:var(--radius-xl);padding:18px;display:flex;flex-direction:column;align-items:stretch;gap:14px;transition:border-color var(--transition-normal),background var(--transition-normal),box-shadow var(--transition-normal);position:relative;overflow:hidden;cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit;-moz-appearance:none;appearance:none;-webkit-appearance:none}.track-card--featured{min-height:0;scroll-snap-align:start}.track-card--compact{min-height:0;padding:10px;gap:10px}.track-card--featured:hover{border-color:var(--border-base);background:var(--panel-card-hover);box-shadow:var(--shadow-lg)}.track-card--compact:hover{border-color:var(--border-base);background:var(--panel-card-hover);box-shadow:var(--shadow-md)}.track-card:focus-visible{outline:2px solid var(--brand-green);outline-offset:3px}.track-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 100%);opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.track-card--featured:hover:before{opacity:1}.track-card-active,.track-card[aria-current=true]{border-color:rgba(var(--brand-accent-rgb),.35);background:rgba(var(--brand-accent-rgb),.08)}.track-card-cover{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden}.track-card img{width:100%;border-radius:var(--radius-lg);aspect-ratio:1;object-fit:cover;transition:transform var(--transition-slow);display:block}.track-card--compact .track-card-cover img{border-radius:0}.track-card--featured:hover img,.track-card--compact:hover .track-card-cover img{transform:scale(1.03)}.track-card strong{font-size:16px;font-weight:700;font-family:var(--font-heading);color:var(--text-base);margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}.track-card--compact strong{font-size:14px;-webkit-line-clamp:2}.track-card-artist{color:var(--text-subdued);font-size:14px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast);width:100%}.track-card--compact .track-card-artist{font-size:13px;-webkit-line-clamp:1}.track-card:hover .track-card-artist{color:var(--text-base)}.track-card .track-play-button{border:none;border-radius:var(--radius-full);background:var(--gradient-accent);color:var(--brand-on-accent);display:grid;place-items:center;padding:0;pointer-events:none;transition:opacity var(--transition-normal),transform var(--transition-normal);position:relative;z-index:2;overflow:visible;flex-shrink:0;box-shadow:0 8px 20px #00000059}.track-card--featured .track-play-button{margin-top:auto;margin-left:auto;width:56px;height:56px;min-width:56px;min-height:56px}.track-card--compact .track-play-button{position:absolute;right:10px;bottom:10px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0}.track-card .track-play-button svg{width:24px;height:24px;margin-left:2px}.track-card--compact .track-play-button svg{width:20px;height:20px}.track-card-active .track-play-button,.track-card[aria-current=true] .track-play-button{opacity:1;transform:scale(1)}.search-box{border:2px dashed var(--border-base);color:var(--text-subdued);border-radius:var(--radius-xl);padding:24px;text-align:center;font-size:14px;background:var(--bg-subdued);transition:all var(--transition-fast)}.search-box:hover{border-color:var(--border-highlight);background:var(--bg-elevated)}.search-page{gap:var(--app-block-gap, 24px)}.search-form{width:100%;max-width:520px}.search-input-wrapper{position:relative;margin:0}.search-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-subdued);pointer-events:none}.search-input{width:100%;max-width:520px;height:48px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);padding:0 48px;background:var(--bg-elevated);color:var(--text-base);font-size:15px;font-family:var(--font-body);outline:none;transition:all var(--transition-fast)}.search-input::placeholder{color:var(--text-placeholder)}.search-input:focus{border-color:var(--brand-green);box-shadow:0 0 0 2px var(--brand-accent-soft)}.search-clear-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);font-size:14px;display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast)}.search-clear-btn:hover{color:var(--text-base);background:#ffffff1a}.search-empty{margin:0;padding:48px var(--app-gutter-x, 20px);text-align:center;color:var(--text-subdued)}.search-empty p{font-size:15px}.genre-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);padding:8px 16px;color:var(--text-subdued);font-size:13px;font-weight:500;background:var(--bg-elevated);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.genre-tag:hover{border-color:var(--border-highlight);background:var(--bg-strong);color:var(--text-base);transform:translateY(-2px)}.genre-tag.active{border-color:var(--brand-green);background:var(--gradient-accent);color:var(--brand-on-accent);box-shadow:0 4px 14px var(--brand-accent-glow)}.genre-tag.active .mood-icon{animation:mood-icon-pop .45s var(--ease-out-expo)}.tag-row{margin:0;display:flex;flex-wrap:wrap;gap:var(--app-tight-gap, 12px)}.tag-row span{border:1px solid var(--border-subdued);border-radius:var(--radius-full);padding:8px 16px;color:var(--text-subdued);font-size:13px;font-weight:500;background:var(--bg-elevated);cursor:pointer;transition:all var(--transition-fast)}.tag-row span:hover{border-color:var(--border-highlight);background:var(--bg-strong);color:var(--text-base);transform:translateY(-2px)}.results-list{margin:0;display:flex;flex-direction:column;gap:var(--app-tight-gap, 12px)}.result-item{border:1px solid var(--border-subdued);background:var(--gradient-card);border-radius:var(--radius-lg);padding:14px 16px;display:grid;grid-template-columns:56px 1fr auto auto;gap:14px;align-items:center;transition:all var(--transition-fast);width:100%;text-align:left;cursor:pointer}.result-item-active,.result-item[aria-current=true]{border-color:rgba(var(--brand-accent-rgb),.35);background:rgba(var(--brand-accent-rgb),.08)}.result-item:hover{background:var(--panel-card-hover);border-color:var(--border-base);transform:translate(4px)}.result-item img{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;transition:transform var(--transition-fast)}.result-item:hover img{transform:scale(1.05)}.result-item-info{min-width:0}.result-item-info strong{font-size:15px;font-weight:600;color:var(--text-base);display:block;margin-bottom:4px}.result-item-info p{margin:0;color:var(--text-subdued);font-size:13px;transition:color var(--transition-fast)}.result-item:hover .result-item-info p{color:var(--text-base)}.result-play-btn{width:36px;height:36px;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;pointer-events:none}.result-play-btn svg{width:18px;height:18px}.result-item-active .result-play-btn,.result-item:hover .result-play-btn{color:var(--brand-green)}.result-duration{font-size:13px;color:var(--text-placeholder);font-weight:500;min-width:40px;text-align:right}.library-page{gap:var(--app-block-gap, 24px)}.library-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--app-stack-gap, 16px);flex-wrap:wrap}.library-header .section-subtitle{margin-bottom:0;flex:1;min-width:200px}.library-empty{margin:0;padding:48px var(--app-gutter-x, 20px);text-align:center;color:var(--text-subdued)}.library-empty p{font-size:15px;margin-bottom:16px}.library-create-btn{border:none;border-radius:var(--radius-full);padding:12px 24px;background:var(--gradient-accent);color:var(--brand-on-accent);font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast)}.library-create-btn:hover{background:var(--brand-green-hover);transform:scale(1.02)}.library-create-btn-inline{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.library-create-btn-inline svg{width:16px;height:16px}.wip-section{position:relative;min-height:320px}.wip-section-content{filter:blur(7px);opacity:.45;pointer-events:none;-webkit-user-select:none;user-select:none}.wip-section-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:#05070c59;border:1px dashed var(--border-highlight);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.wip-section-title{margin:0;font-family:var(--font-heading);font-size:clamp(1.25rem,2vw,1.75rem);color:var(--text-base)}.wip-section-description{margin:0;max-width:420px;color:var(--text-subdued);line-height:1.6}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--app-stack-gap, 16px);margin:0}.playlist-card{border:1px solid var(--border-subdued);background:var(--gradient-card);border-radius:var(--radius-xl);padding:20px;transition:all var(--transition-normal);position:relative;overflow:hidden}.playlist-card-toolbar{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:4px;z-index:1}.playlist-card-body{cursor:pointer;padding-right:72px}.playlist-card-body:focus-visible{outline:2px solid var(--brand-green);outline-offset:4px;border-radius:var(--radius-md)}.playlist-card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-green) 0%,transparent 100%);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-normal)}.playlist-card:hover{background:var(--panel-card-hover);border-color:var(--border-base);transform:translateY(-4px)}.playlist-card:hover:after{transform:scaleX(1)}.playlist-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.playlist-card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.playlist-play-btn{width:28px;height:28px;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;opacity:1;flex-shrink:0}.playlist-play-btn svg{width:16px;height:16px}.playlist-card:hover .playlist-play-btn{color:var(--bg-base);background:var(--brand-green)}.playlist-quick-play-btn{width:32px;height:32px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.playlist-quick-play-btn svg{width:16px;height:16px}.playlist-quick-play-btn:hover:not(:disabled){color:var(--bg-base);background:var(--brand-green)}.playlist-quick-play-btn:disabled{opacity:.35;cursor:not-allowed}.playlist-card:hover .playlist-quick-play-btn:not(:disabled){color:var(--bg-base);background:var(--brand-green)}.playlist-card-header h3{margin:0;font-size:18px;font-weight:700;color:var(--text-base);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}.playlist-delete-btn{position:static;top:auto;right:auto;width:28px;height:28px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast);opacity:1;z-index:1}.playlist-delete-btn svg{width:16px;height:16px}.playlist-delete-btn:hover{color:#ef4444;background:#ef44441a}@media (hover: hover){.playlist-delete-btn{opacity:0}.playlist-card:hover .playlist-delete-btn{opacity:1}.result-play-btn{opacity:0}.result-item:hover .result-play-btn{opacity:1}}.playlist-card p{margin:10px 0 0;color:var(--text-subdued);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast)}.playlist-card:hover p{color:var(--text-base)}.playlist-card span{display:block;margin-top:12px;font-size:12px;color:var(--text-placeholder);font-weight:500}.playlist-detail{display:flex;flex-direction:column;gap:24px}.playlist-back-link{display:inline-flex;align-items:center;gap:8px;width:fit-content;color:var(--text-subdued);text-decoration:none;font-size:14px;font-weight:600;transition:color var(--transition-fast)}.playlist-back-link svg{width:18px;height:18px}.playlist-back-link:hover{color:var(--text-base)}.playlist-detail-hero{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:end;padding:28px;border-radius:var(--radius-xl);border:1px solid var(--border-subdued);background:radial-gradient(ellipse 80% 100% at 0% 0%,var(--brand-accent-soft) 0%,transparent 60%),var(--gradient-card)}.playlist-detail-cover{width:220px;height:220px;border-radius:var(--radius-lg);overflow:hidden}.playlist-detail-cover-grid{display:grid;width:100%;height:100%}.playlist-detail-cover-grid-1{grid-template-columns:1fr}.playlist-detail-cover-grid-2{grid-template-columns:repeat(2,1fr)}.playlist-detail-cover-grid-3,.playlist-detail-cover-grid-4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.playlist-detail-cover-grid img{width:100%;height:100%;object-fit:cover}.playlist-detail-cover-empty{width:100%;height:100%;background:var(--gradient-card)}.playlist-detail-type{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-subdued)}.playlist-detail-title{margin:0;font-size:clamp(28px,4vw,48px);font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.04em}.playlist-detail-description{margin:12px 0 0;color:var(--text-subdued);font-size:15px;line-height:1.5}.playlist-detail-meta{margin:12px 0 0;color:var(--text-placeholder);font-size:14px}.playlist-detail-actions{display:flex;align-items:center;gap:12px;margin-top:20px}.playlist-detail-play-btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:var(--radius-full);padding:14px 28px;background:var(--gradient-accent);color:var(--brand-on-accent);font-size:15px;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast)}.playlist-detail-play-btn svg{width:20px;height:20px}.playlist-detail-play-btn:hover:not(:disabled){background:var(--brand-green-hover);transform:scale(1.02)}.playlist-detail-play-btn:disabled{opacity:.5;cursor:not-allowed}.playlist-detail-delete-btn{width:44px;height:44px;border:1px solid var(--border-subdued);border-radius:var(--radius-full);background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast)}.playlist-detail-delete-btn svg{width:18px;height:18px}.playlist-detail-delete-btn:hover{color:#ef4444;border-color:#ef444466;background:#ef44441a}.playlist-detail-empty{padding:40px 0;text-align:center;color:var(--text-subdued)}.playlist-track-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.playlist-track-item{width:100%;border:1px solid transparent;border-radius:var(--radius-lg);padding:10px 12px;background:transparent;color:inherit;display:grid;grid-template-columns:28px 48px 1fr auto 36px;gap:12px;align-items:center;cursor:pointer;text-align:left;font-family:var(--font-body);transition:all var(--transition-fast)}.playlist-track-item:hover{background:var(--panel-card-hover);border-color:var(--border-subdued)}.playlist-track-index{color:var(--text-placeholder);font-size:14px;font-weight:500;text-align:center}.playlist-track-item img{width:48px;height:48px;border-radius:var(--radius-md);object-fit:cover}.playlist-track-info{min-width:0;display:flex;flex-direction:column;gap:4px}.playlist-track-info strong{font-size:15px;color:var(--text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-track-info span{font-size:13px;color:var(--text-subdued);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-track-duration{font-size:13px;color:var(--text-placeholder)}.playlist-track-play{display:grid;place-items:center;color:var(--text-subdued)}.playlist-track-play svg{width:18px;height:18px}.playlist-track-item:hover .playlist-track-play{color:var(--brand-green)}@media (max-width: 900px){.playlist-detail-hero{grid-template-columns:1fr;padding:16px}.playlist-detail-cover{width:160px;height:160px}.playlist-track-item{grid-template-columns:24px 44px 1fr auto}.playlist-track-play{display:none}}@media (max-width: 900px){.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.playlist-card{padding:16px}.playlist-card h3{font-size:16px}}@media (min-width: 1920px){.track-row{grid-auto-columns:clamp(240px,14vw,272px);gap:24px}.track-catalog{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}.track-card--featured{min-height:0;padding:20px}.track-card--featured strong{font-size:18px}.track-card-artist{font-size:15px}.track-card--featured .track-play-button{width:64px;height:64px;min-width:64px;min-height:64px}.track-card--featured .track-play-button svg{width:28px;height:28px}.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.playlist-card{padding:24px}.playlist-card h3{font-size:20px}.playlist-card p{font-size:15px}}:root[data-theme=light] .track-card{background:var(--gradient-card)}:root[data-theme=light] .track-card:hover{background:var(--panel-card-hover)}:root[data-theme=light] .result-item{background:var(--gradient-card)}:root[data-theme=light] .playlist-card{background:var(--gradient-card)}:root[data-theme=light] .tag-row span{background:var(--bg-highlight)}:root[data-theme=light] .tag-row span:hover{background:var(--bg-strong)}.player-bar{position:fixed;left:16px;right:16px;bottom:16px;height:76px;border:1px solid var(--border-base);border-radius:20px;background:color-mix(in srgb,var(--panel-player) 68%,transparent);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:16px;padding:0 20px;z-index:100;box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--mood-a),.06);transition:box-shadow .4s ease}.player-left{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.player-cover:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.player-track-info{display:flex;flex-direction:column;min-width:0}.player-track-title{font-size:14px;font-weight:500;color:var(--text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.player-track-artist{font-size:12px;color:var(--text-subdued);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.player-icon-btn:disabled,.player-toggle:disabled{opacity:.4;cursor:not-allowed}.player-icon-btn:disabled:hover,.player-toggle:disabled:hover{transform:none;background:transparent}.player-no-track{color:var(--text-subdued);font-size:13px}.player-icon-btn{width:32px;height:32px;border-radius:var(--radius-full);border:none;background:transparent;color:var(--text-subdued);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast);padding:0}.player-icon-btn:hover{color:var(--text-base);background:#ffffff1a;transform:scale(1.05)}.player-icon-btn:active{transform:scale(.95)}.player-icon-btn.active{color:var(--brand-green)}.player-icon-btn-heart.active svg{animation:heart-pop .4s var(--ease-out-expo)}@keyframes heart-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.player-center{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:722px;width:100%;margin:0 auto}.player-controls{display:flex;align-items:center;gap:8px}.player-control-btn{width:32px;height:32px}.player-control-btn svg{width:18px;height:18px}.player-toggle{width:40px;height:40px;border-radius:var(--radius-full);border:none;background:var(--gradient-accent);color:var(--brand-on-accent);display:grid;place-items:center;cursor:pointer;transition:all var(--transition-fast);padding:0;box-shadow:0 4px 16px var(--brand-accent-glow)}.player-toggle:hover{transform:scale(1.08);box-shadow:0 8px 24px var(--brand-accent-glow)}.player-toggle:active{transform:scale(.95)}.player-toggle.is-playing{animation:player-toggle-pulse 2.4s ease-in-out infinite}@keyframes player-toggle-pulse{0%,to{box-shadow:0 4px 16px var(--brand-accent-glow)}50%{box-shadow:0 4px 16px var(--brand-accent-glow),0 0 0 8px var(--brand-accent-soft)}}@media (prefers-reduced-motion: reduce){.player-toggle.is-playing{animation:none}}.player-toggle svg{width:20px;height:20px}.player-progress{display:flex;align-items:center;gap:8px;width:100%;max-width:600px}.player-time{font-size:11px;font-weight:500;color:var(--text-subdued);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.player-error{margin:4px 0 0;font-size:11px;color:var(--error);text-align:center;width:100%}.player-progress-bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;width:100%;height:4px;margin:0;padding:0;border:none;border-radius:var(--radius-full);background:transparent;cursor:pointer;transition:height var(--transition-fast)}.player-progress-bar::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--brand-green) 0%,var(--brand-green) var(--progress, 0%),var(--bg-strong) var(--progress, 0%),var(--bg-strong) 100%)}.player-progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:var(--radius-full);background:var(--text-base);margin-top:-4px;opacity:0;transition:opacity var(--transition-fast)}.player-progress-bar:hover::-webkit-slider-thumb,.player-progress-bar:focus-visible::-webkit-slider-thumb{opacity:1;background:var(--brand-green)}.player-progress-bar::-moz-range-track{height:4px;border-radius:var(--radius-full);background:var(--bg-strong)}.player-progress-bar::-moz-range-progress{height:4px;border-radius:var(--radius-full);background:var(--brand-green)}.player-progress-bar::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:var(--radius-full);background:var(--brand-green)}.player-progress-bar:hover{height:6px}.player-progress-bar:disabled{opacity:.5;cursor:not-allowed}.player-progress-fill,.player-progress-handle,.player-progress-bar:hover .player-progress-handle{display:none}.player-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:140px;overflow:visible}.volume-control{display:flex;align-items:center;gap:8px;overflow:visible}.volume-slider-container{width:88px;min-width:88px;opacity:1;transition:none;overflow:visible}.volume-control:hover .volume-slider-container{width:88px;min-width:88px;opacity:1}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-full);border:none;outline:none;cursor:pointer;transition:height var(--transition-fast);background:transparent}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:var(--radius-full);background:var(--text-base);margin-top:-4px;cursor:pointer;box-shadow:none;opacity:0;transition:opacity var(--transition-fast)}.volume-control:hover .volume-slider::-webkit-slider-thumb,.volume-slider:focus-visible::-webkit-slider-thumb,.volume-slider:active::-webkit-slider-thumb{opacity:1;background:var(--brand-green)}.volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:var(--radius-full);background:var(--text-base);cursor:pointer;border:none;box-shadow:none;opacity:0;transition:opacity var(--transition-fast)}.volume-control:hover .volume-slider::-moz-range-thumb,.volume-slider:focus-visible::-moz-range-thumb,.volume-slider:active::-moz-range-thumb{opacity:1;background:var(--brand-green)}@media (hover: none){.volume-slider::-webkit-slider-thumb{opacity:1;background:var(--brand-green)}.volume-slider::-moz-range-thumb{opacity:1;background:var(--brand-green)}}.volume-slider::-webkit-slider-track{height:4px;border-radius:var(--radius-full);background:var(--bg-strong)}.volume-slider::-moz-range-track{height:4px;border-radius:var(--radius-full);background:var(--bg-strong)}@media (max-width: 600px){.player-left{gap:8px}.player-cover{width:48px;height:48px}.player-track-title{font-size:13px}.player-track-artist{font-size:11px}}:root[data-theme=light] .player-bar{box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--mood-a),.08)}:root[data-theme=light] .player-toggle{background:var(--gradient-accent);color:var(--brand-on-accent)}:root[data-theme=light] .player-toggle:hover{box-shadow:0 8px 24px var(--brand-accent-glow)}:root[data-theme=light] .player-icon-btn:hover{background:#0000000f}@media (max-width: 900px){.app-shell-layout{grid-template-columns:1fr}.player-bar{position:fixed;left:10px;right:10px;width:auto;bottom:calc(92px + env(safe-area-inset-bottom));height:82px;padding:0 12px;gap:8px;border:1px solid var(--border-base);border-radius:18px;background:color-mix(in srgb,var(--panel-player) 90%,transparent);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);z-index:100;box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--mood-a),.06);overflow:hidden;grid-template-columns:minmax(0,1fr)}.player-progress{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:0;height:3px;cursor:pointer}.player-progress-bar{flex:1;height:3px;border-radius:0}.player-progress-bar:hover{height:5px}.player-progress-fill,.player-time{display:none}.player-left{gap:8px;min-width:0;flex:1}.player-left .player-icon-btn{display:grid;width:28px;height:28px;z-index:3}.player-cover{width:54px;height:54px;border-radius:var(--radius-md);z-index:2}.player-track-info,.player-no-track{display:none}.player-center{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;flex-direction:column;gap:0;pointer-events:none;z-index:1}.player-controls{gap:8px;pointer-events:auto}.player-control-btn{width:36px;height:36px}.player-control-btn svg{width:20px;height:20px}.player-controls .player-control-btn:first-child,.player-controls .player-control-btn:last-child{display:none}.player-toggle{width:44px;height:44px;background:var(--gradient-accent);color:var(--brand-on-accent)}.player-toggle svg{width:24px;height:24px}.player-right{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:0;pointer-events:auto;z-index:3}.player-right .player-icon-btn:first-child{display:grid}.player-right .volume-control{display:flex;gap:6px}.player-right .volume-slider-container{width:56px;min-width:56px;opacity:1}.player-right .volume-control:hover .volume-slider-container{width:56px;min-width:56px}.player-icon-btn{width:32px;height:32px}.player-icon-btn svg{width:18px;height:18px}.track-row--bleed{margin-inline:calc(-1 * var(--app-gutter-x, 16px));padding-inline:var(--app-gutter-x, 16px)}.track-row{grid-auto-columns:clamp(200px,62vw,248px);gap:12px;padding-block:6px 16px}.track-catalog{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px}.track-section-title{font-size:20px}.track-card--featured{min-height:0;padding:12px;gap:10px}.track-card--featured strong,.track-card--featured .track-card-artist{-webkit-line-clamp:1}.track-card--compact{padding:8px}.track-card img{border-radius:var(--radius-md)}.track-card strong{font-size:14px}.track-card-artist{font-size:12px}.track-card .track-play-button{width:48px;height:48px;min-width:48px;min-height:48px}.track-card--featured .track-play-button{width:44px;height:44px;min-width:44px;min-height:44px}.track-card .track-play-button svg{width:20px;height:20px}.playlist-grid{grid-template-columns:1fr;gap:12px}.tag-row{flex-wrap:wrap}.tag-row span{font-size:12px;padding:6px 12px}}@media (max-width: 380px){.player-bar{height:78px;padding:0 10px;bottom:calc(82px + env(safe-area-inset-bottom))}.player-cover{width:50px;height:50px}.player-right .volume-slider-container,.player-right .volume-control:hover .volume-slider-container{width:48px;min-width:48px}.player-controls{gap:6px}.player-control-btn{width:32px;height:32px}.player-toggle{width:40px;height:40px}.track-row{grid-auto-columns:clamp(188px,58vw,220px)}.track-card--featured{min-height:0}.track-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-auth h1,.landing-intro h1{font-size:28px}.landing-auth-lead{font-size:13px}.btn{padding:14px 20px;font-size:14px}}@media (max-height: 500px) and (orientation: landscape){.player-bar{height:56px;bottom:calc(56px + env(safe-area-inset-bottom));padding:0 12px}.player-cover{width:40px;height:40px}.player-track-info,.player-left .player-icon-btn{display:none}.player-controls{gap:4px}.player-control-btn{width:28px;height:28px}.player-control-btn svg{width:16px;height:16px}.player-toggle{width:36px;height:36px}.player-toggle svg{width:18px;height:18px}.player-right .volume-slider-container{width:48px;min-width:48px}.mobile-bottom-nav{height:56px}.mobile-bottom-nav button{font-size:10px}.mobile-bottom-nav svg{width:20px;height:20px}.app-content-area{padding-bottom:calc(120px + env(safe-area-inset-bottom))}}@media (hover: hover){.track-card--featured .track-play-button{opacity:0;transform:scale(.92)}.track-card--featured:hover .track-play-button,.track-card--featured:focus-visible .track-play-button,.track-card--featured.track-card-active .track-play-button{opacity:1;transform:scale(1)}.track-card--compact .track-play-button{opacity:0;transform:scale(.92)}.track-card--compact:hover .track-play-button,.track-card--compact:focus-visible .track-play-button,.track-card--compact.track-card-active .track-play-button{opacity:1;transform:scale(1)}}@media (hover: none){.track-card .track-play-button{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){:root *,:root *:before,:root *:after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}@media print{.sidebar,.player-bar,.topbar{display:none}.app-content-area{padding:0}}