@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap";.app{font-family:Inter,sans-serif;padding:1rem}header{margin-bottom:1rem}main{display:grid;grid-template-columns:1fr;gap:20px;padding:10px}.search-bar{display:flex;gap:.5rem;margin-top:.5rem}.layout{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:flex-start}.songs{padding:1rem;border-radius:6px}.favorites{padding:1rem;border-radius:6px;border-left:2px solid #ddd;overflow-y:auto;max-height:90vh}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.songs .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.favorites .grid{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:900px){main{grid-template-columns:1fr 300px;gap:20px;align-items:start}.favorites .grid{grid-template-columns:repeat(2,1fr)}}:root{--brand-accent: #9D27FF;--brand-status: #A855F7;--success-play: #10B981;--gradient-calm: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);--gradient-energetic: linear-gradient(135deg, #FFF7ED 0%, #F97316 100%);--gradient-focus: linear-gradient(135deg, #F0FDFA 0%, #3B82F6 100%);--neon-glow: 0 0 10px rgba(157, 39, 255, .4)}:root{--bg-main: #F9F9F8;--bg-surface: #FFFFFF;--bg-header: rgba(255, 255, 255, .8);--bg-card: rgba(255, 255, 255, .7);--text-primary: #0D0D0D;--text-secondary: #525252;--border-color: rgba(0, 0, 0, .06);--shadow-sm: 0 4px 12px rgba(0,0,0,.05);--shadow-hover: 0 8px 24px rgba(0,0,0,.08);--navbar-bg: var(--bg-header);--navbar-text: var(--text-primary);--input-bg: rgba(0, 0, 0, .03)}@media(prefers-color-scheme:dark){:root{--bg-main: #0D0D0D;--bg-surface: #171717;--bg-header: rgba(40, 40, 40, .9);--bg-card: rgba(35, 35, 35, .7);--text-primary: #F5F5F5;--text-secondary: #A3A3A3;--border-color: rgba(255, 255, 255, .15);--shadow-sm: 0 4px 12px rgba(0,0,0,.4);--shadow-hover: 0 8px 24px rgba(0,0,0,.6);--navbar-bg: var(--bg-header);--navbar-text: var(--text-primary);--input-bg: rgba(255, 255, 255, .1)}}[data-theme=dark]{--bg-main: #0D0D0D;--bg-surface: #171717;--bg-header: rgba(40, 40, 40, .9);--bg-card: rgba(35, 35, 35, .7);--text-primary: #F5F5F5;--text-secondary: #A3A3A3;--border-color: rgba(255, 255, 255, .15);--shadow-sm: 0 4px 12px rgba(0,0,0,.4);--shadow-hover: 0 8px 24px rgba(0,0,0,.6);--navbar-bg: var(--bg-header);--navbar-text: var(--text-primary);--input-bg: rgba(255, 255, 255, .1)}.slider .icon-moon,.slider .icon-sun{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;font-weight:700;transition:opacity .3s,transform .4s;text-shadow:0 1px 2px rgba(0,0,0,.2)}.slider .icon-sun{left:8px;opacity:1;color:#fff7ed;filter:drop-shadow(0 0 2px rgba(255,200,0,.8))}.slider .icon-moon{right:8px;opacity:.5;color:#94a3b8}input:checked+.slider .icon-sun{opacity:.3;transform:translateY(-50%) rotate(90deg);color:#64748b;filter:none}input:checked+.slider .icon-moon{opacity:1;color:#fff;transform:translateY(-50%) rotate(0);filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}[data-theme=light]{--bg-main: #F9F9F8;--bg-surface: #FFFFFF;--bg-header: rgba(255, 255, 255, .8);--bg-card: rgba(255, 255, 255, .7);--text-primary: #0D0D0D;--text-secondary: #525252;--border-color: rgba(0, 0, 0, .06);--shadow-sm: 0 4px 12px rgba(0,0,0,.05);--shadow-hover: 0 8px 24px rgba(0,0,0,.08);--navbar-bg: var(--bg-header);--navbar-text: var(--text-primary);--input-bg: rgba(0, 0, 0, .03)}body{font-family:Poppins,sans-serif;background:var(--bg-main);color:var(--text-primary);transition:background .8s ease,color .3s ease;font-weight:400;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:Righteous,cursive;font-weight:400;letter-spacing:.02em}.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}:focus-visible{outline:3px solid var(--brand-accent);outline-offset:2px;border-radius:4px}.theme-switch{position:relative;display:inline-block;width:70px;height:36px;margin-left:10px;z-index:10}.theme-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:linear-gradient(135deg,#60a5fa,#3b82f6);transition:all .4s cubic-bezier(.23,1,.32,1);border-radius:34px;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 4px #0000001a}input:checked+.slider{background:linear-gradient(135deg,#1e1b4b,#000);border-color:#ffffff1a}.slider:before{position:absolute;content:"";height:28px;width:28px;left:4px;bottom:3px;background-color:#fff;transition:all .4s cubic-bezier(.23,1,.32,1);border-radius:50%;box-shadow:0 2px 8px #00000026,0 1px 2px #0000001a;z-index:20}input:checked+.slider:before{transform:translate(34px);background-color:#f8fafc;box-shadow:0 2px 8px #0006}.slider .icon-moon,.slider .icon-sun{position:absolute;top:50%;transform:translateY(-50%);font-size:14px;transition:opacity .3s,transform .4s}.slider .icon-sun{left:8px;opacity:1;color:#f59e0b}.slider .icon-moon{right:9px;opacity:.3;color:#94a3b8}input:checked+.slider .icon-sun{opacity:.3;transform:translateY(-50%) rotate(90deg);color:#64748b}input:checked+.slider .icon-moon{opacity:1;color:#a78bfa;transform:translateY(-50%) rotate(0)}header{position:sticky;top:16px;margin:0 16px;z-index:1000;background:var(--navbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:.75rem 2rem;border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-sm);transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}header:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/assets/header-bg-DS0pG6xB.png);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.15;z-index:-1;pointer-events:none;transition:filter .3s ease}[data-theme=dark] header:before{filter:invert(1);opacity:.1}header h1{margin:.5rem 0;text-align:center;width:100%;display:flex;align-items:center;justify-content:center;gap:12px}.app-logo{height:48px;width:auto;transition:filter .3s ease}header .theme-switch-container{position:absolute;top:1rem;right:2rem}main{display:grid;grid-template-columns:1fr;gap:24px;min-height:calc(100vh - 80px);padding:20px;max-width:1400px;margin:0 auto}.songs{width:100%;min-width:0;overflow:hidden}.favorites{width:100%;background:transparent;border-radius:12px;padding:16px;border:none;max-height:500px;overflow-y:auto}.favorites .grid{display:grid;grid-template-columns:1fr;gap:16px}.songs .grid{display:flex;overflow-x:auto;gap:24px;padding:10px 4px 20px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.songs .grid::-webkit-scrollbar{height:8px}.songs .grid::-webkit-scrollbar-track{background:transparent}.songs .grid::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}.songs .grid .card{min-width:200px;max-width:200px;flex-shrink:0}.favorites .grid{display:grid!important;grid-template-columns:1fr!important;gap:16px;width:100%}@media(min-width:900px){main{grid-template-columns:1fr 340px;align-items:start;gap:32px}.favorites{position:sticky;top:90px;height:calc(100vh - 110px);max-height:none;overflow-y:auto}}.card img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;border-radius:8px;margin-bottom:12px;box-shadow:0 4px 12px #0000001a;transition:transform .5s cubic-bezier(.175,.885,.32,1.275)}.card:hover img{transform:scale(1.05)}.card{cursor:pointer;background:var(--bg-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:16px;box-shadow:var(--shadow-sm);text-align:center;color:var(--text-primary);border:1px solid var(--border-color);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background-color .3s ease}[data-theme=dark] .card:hover{box-shadow:var(--neon-glow),var(--shadow-hover);border-color:var(--brand-accent)}.skeleton-card{background:var(--bg-card);border-radius:12px;padding:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border-color);min-width:200px;max-width:200px;height:320px;display:flex;flex-direction:column;gap:12px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.skeleton-img{width:100%;aspect-ratio:1/1;background:#0000001a;border-radius:8px}.skeleton-text{height:16px;background:#0000001a;border-radius:4px;width:80%;margin:0 auto}.skeleton-text.short{width:50%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.card audio{width:90%;margin-top:12px;height:32px}button:active{transform:scale(.96)}@keyframes heart-spring{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.btn-favorite.active{animation:heart-spring .4s cubic-bezier(.175,.885,.32,1.275);color:#ef4444}@keyframes rhythm-bounce{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.1)}}audio:active,audio:focus{animation:rhythm-bounce .8s ease-in-out infinite}.pagination button,.btn-remove{font-family:inherit;font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;border:2px solid var(--border-color)!important;padding:10px 18px!important;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-remove{background:transparent;color:#ef4444;border-color:#ef444433!important}.btn-remove:hover{background:#ef4444;color:#fff;border-color:#ef4444!important}.search-bar{display:flex;gap:10px;margin:1rem auto;max-width:600px;width:100%}.search-bar input{flex:1;padding:14px 24px;border-radius:12px;border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-primary);font-size:1rem;font-family:inherit;box-shadow:inset 0 2px 4px #00000005;transition:all .2s ease}.search-bar input:focus{outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 3px #9d27ff33;background:var(--bg-surface)}.search-bar button{padding:14px 28px;border-radius:12px;background:var(--brand-accent);color:#fff;border:none;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #9d27ff4d;transition:background .2s,transform .1s}.search-bar button:hover{background:var(--brand-status);transform:translateY(-1px)}.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:15px}.pagination button{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-color);padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .2s}.pagination button:hover:not(:disabled){background-color:var(--bg-surface);border-color:var(--brand-accent)}.pagination button:disabled{opacity:.5;cursor:not-allowed}.pagination span{font-size:.9rem;color:var(--text-secondary)}.mood-assistant{background:var(--bg-surface);padding:1rem;border-radius:12px;margin-bottom:1rem;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.chat{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:10px;height:200px;overflow-y:auto;gap:8px;display:flex;flex-direction:column}.msg{padding:8px 12px;border-radius:12px;max-width:80%;font-size:.95rem;line-height:1.4}.msg.agent{background:var(--bg-main);align-self:flex-start;border-bottom-left-radius:2px;color:var(--text-primary)}.msg.user{background:var(--brand-accent);color:#fff;align-self:flex-end;border-bottom-right-radius:2px}.search-input-wrapper{flex:1;position:relative}.search-input-wrapper input{width:100%;box-sizing:border-box;padding-right:40px}.btn-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;padding:4px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:background .2s,color .2s;z-index:10}.btn-clear:hover{background:#0000001a;color:var(--text-primary)}.suggestions-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-hover);margin-top:8px;list-style:none;padding:0;z-index:1001;overflow:hidden;max-height:300px;overflow-y:auto}.suggestions-dropdown li{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s;border-bottom:1px solid var(--border-color)}.suggestions-dropdown li:last-child{border-bottom:none}.suggestions-dropdown li:hover{background:var(--input-bg)}.suggestions-dropdown li div{display:flex;flex-direction:row;gap:8px;align-items:baseline}.suggestions-dropdown li strong{font-size:.95rem;color:var(--text-primary)}.suggestions-dropdown li span{font-size:.85rem;color:var(--text-secondary)}.suggestions-dropdown li span:before{content:"-";margin-right:8px}.toast-notification{position:fixed;bottom:24px;right:24px;background-color:var(--text-primary);color:var(--bg-surface);padding:12px 20px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;gap:16px;z-index:2000;animation:slideIn .3s cubic-bezier(.2,.8,.2,1);font-weight:500}.toast-notification button.btn-undo{background:transparent;border:1px solid currentColor;color:inherit;padding:4px 12px;border-radius:4px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s}.toast-notification button.btn-undo:hover{background:#ffffff1a}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}[data-theme=dark] .toast-notification{background-color:#f8fafc;color:#0f172a}.auth-trigger-btn{padding:12px 24px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:30px;color:var(--text-primary);font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm);font-family:inherit}.auth-trigger-btn:hover{border-color:var(--brand-accent);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn-close-overlay{position:absolute;top:20px;right:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 20px;border-radius:20px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;transition:all .2s ease}.btn-close-overlay:hover{background:#fff3;transform:scale(1.05)}.app-footer{text-align:center;padding:3rem 1rem;margin-top:4rem;border-top:1px solid var(--border-color);opacity:.7}.app-footer p{font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}.app{min-height:100vh;transition:background 1.2s ease-in-out;position:relative}.app:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,var(--brand-accent) 0%,transparent 60%);opacity:.03;pointer-events:none;z-index:-1;animation:bg-pulse 10s ease-in-out infinite alternate}@keyframes bg-pulse{0%{opacity:.02;transform:scale(1)}to{opacity:.05;transform:scale(1.2)}}.auth-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .3s ease-out}.auth-wrapper{width:100%;max-width:440px;animation:scaleIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}