:root{--bg-primary: #090A12;--bg-secondary: #101322;--card: #171A2B;--card-elevated: #20243A;--card-hover: #262B44;--text-primary: #F5F5FA;--text-secondary: #A7A9BC;--text-muted: #72758E;--accent-primary: #8B7CFF;--accent-secondary: #5CC8FF;--accent-emotional: #FF7EB6;--mood-glow: rgba(139, 124, 255, .15);--success: #72E6B2;--warning: #FFD166;--error: #FF4D5A;--danger: #FF4D5A;--danger-hover: #FF3342;--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .18);--glass: rgba(255, 255, 255, .04);--glass-elevated: rgba(255, 255, 255, .08);--radius-xs: 6px;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--radius-full: 9999px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-primary);background-image:radial-gradient(circle at 15% 10%,var(--mood-glow),transparent 40%),radial-gradient(circle at 85% 20%,rgba(92,200,255,.05),transparent 35%),radial-gradient(circle at 50% 80%,rgba(255,255,255,.02),transparent 50%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-slow)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:700;letter-spacing:-.02em}h1{font-size:clamp(2.5rem,5vw,3.5rem);line-height:1.15}h2{font-size:clamp(1.75rem,3.5vw,2.25rem);line-height:1.25}h3{font-size:1.25rem;line-height:1.4}p{color:var(--text-secondary);font-size:1rem}.app-wrapper{display:flex;flex-direction:column;min-height:100vh}.container{width:100%;max-width:1200px;margin:0 auto;padding:var(--spacing-xl) var(--spacing-lg)}.screen-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--spacing-xl) var(--spacing-md);animation:fadeInScreen var(--transition-base)}@keyframes fadeInScreen{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#navbar{position:sticky;top:0;z-index:100;background:#090a12d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:all var(--transition-base)}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.nav-brand{cursor:pointer;display:flex;align-items:center;gap:.5rem;text-decoration:none}.nav-logo-text{font-size:1.5rem;font-weight:800;letter-spacing:.15em;color:var(--text-primary)}.music-note{color:var(--accent-primary);display:inline-block;transition:transform var(--transition-base)}.nav-brand:hover .music-note{transform:scale(1.2) rotate(12deg)}.nav-links{display:flex;list-style:none;gap:1.5rem;align-items:center}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;padding:.5rem 1rem;border-radius:var(--radius-full);transition:all var(--transition-fast);cursor:pointer;background:transparent;border:none}.nav-link:hover{color:var(--text-primary);background:var(--glass)}.nav-link.active{color:var(--text-primary);background:var(--card-elevated);border:1px solid var(--border)}.home-hero{text-align:center;padding:3rem 1rem 4rem;max-width:760px;margin:0 auto}.hero-logo-text{font-size:clamp(3rem,7vw,4.5rem);font-weight:800;letter-spacing:.15em;margin-bottom:.5rem}.hero-tagline{font-size:clamp(1.25rem,2.5vw,1.6rem);font-weight:500;color:var(--text-primary);margin-bottom:.75rem}.hero-subtitle{font-size:1.05rem;color:var(--text-secondary);margin-bottom:2rem}.step-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.step-badge{font-size:.8rem;font-weight:700;padding:.35rem .85rem;border-radius:var(--radius-full);background:var(--card-elevated);color:var(--text-muted);border:1px solid var(--border)}.step-badge.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-primary);border-color:transparent}.grid{display:grid;gap:1.25rem;width:100%}.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--transition-base);cursor:pointer;position:relative;overflow:hidden}.card:hover{background:var(--card-elevated);border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 12px 30px #00000059}.card.selected{background:var(--card-elevated);border-color:var(--accent-primary);box-shadow:0 0 20px var(--mood-glow);transform:translateY(-3px)}.mood-card{display:flex;flex-direction:column;gap:.5rem;text-align:left}.mood-card-emoji{font-size:2.2rem;margin-bottom:.25rem}.mood-card-name{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.mood-card-desc{font-size:.9rem;color:var(--text-secondary)}.search-input{width:100%;padding:.9rem 1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;font-family:inherit;outline:none;transition:all var(--transition-fast);margin-bottom:1.5rem}.search-input:focus{border-color:var(--accent-primary);box-shadow:0 0 16px var(--mood-glow);background:var(--card-elevated)}.chips-container{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;min-height:38px}.chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--card-elevated);border:1px solid var(--accent-primary);color:var(--text-primary);padding:.4rem .9rem;border-radius:var(--radius-full);font-size:.875rem;font-weight:600;animation:fadeInScreen var(--transition-fast)}.chip-remove{background:transparent;border:none;color:var(--text-secondary);font-size:1.1rem;cursor:pointer;line-height:1;display:flex;align-items:center;padding:0}.chip-remove:hover{color:var(--danger)}button{cursor:pointer;font-family:inherit;border:none;outline:none;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.btn{padding:.85rem 1.75rem;border-radius:var(--radius-md);font-size:1rem;font-weight:600;white-space:nowrap}.btn-large{padding:1.1rem 2.5rem;font-size:1.1rem;border-radius:var(--radius-md)}.btn-primary{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:var(--bg-primary);box-shadow:0 4px 16px #0000004d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px var(--mood-glow)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-secondary{background:var(--card-elevated);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--card-hover);border-color:var(--border-hover);transform:translateY(-2px)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-hover);transform:translateY(-2px)}.btn-sm{padding:.45rem .9rem;font-size:.85rem;border-radius:var(--radius-sm)}.btn-icon{width:44px;height:44px;padding:0;border-radius:50%;background:var(--card-elevated);border:1px solid var(--border);color:var(--text-primary);display:flex;align-items:center;justify-content:center}.btn-icon:hover{background:var(--card-hover);border-color:var(--accent-primary);transform:scale(1.05)}.btn-icon-primary{width:54px;height:54px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-primary);border:none}.btn-icon-primary:hover{transform:scale(1.08);box-shadow:0 0 20px var(--mood-glow)}.back-button{align-self:flex-start;background:transparent;color:var(--text-secondary);font-size:.95rem;font-weight:500;padding:.5rem 0;margin-bottom:1.5rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.back-button:hover{color:var(--text-primary)}.cd-player{display:flex;flex-direction:column;align-items:center;margin:1.5rem 0 2.5rem}.cd-disc{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#1a1b26,#0d0e15 70%,#05060a);border:4px solid rgba(255,255,255,.12);box-shadow:0 16px 40px #0009,inset 0 0 20px #ffffff0d,0 0 30px var(--mood-glow);display:flex;align-items:center;justify-content:center;position:relative;animation:rotateCD 12s linear infinite;animation-play-state:paused}.cd-disc.playing{animation-play-state:running}.cd-disc.paused{animation-play-state:paused}@keyframes rotateCD{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cd-artwork{width:90px;height:90px;border-radius:50%;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:var(--card-elevated);border:2px solid rgba(255,255,255,.2)}.cd-artwork img{width:100%;height:100%;object-fit:cover}.cd-center{width:24px;height:24px;border-radius:50%;background:var(--bg-primary);border:3px solid rgba(255,255,255,.4);position:absolute;z-index:2}.cd-label{margin-top:1.25rem;text-align:center;max-width:400px}.cd-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cd-artist{font-size:1rem;color:var(--text-secondary)}.progress-section{width:100%;max-width:600px;margin:0 auto 1.5rem;display:flex;align-items:center;gap:1rem}.progress-time{font-size:.85rem;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:42px}.progress-time.elapsed{text-align:right}.progress-bar-container{flex:1;height:6px;background:var(--card-elevated);border-radius:var(--radius-full);cursor:pointer;position:relative;overflow:hidden;transition:height var(--transition-fast)}.progress-bar-container:hover{height:10px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-full);transition:width .15s linear}.player-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}.volume-control{display:flex;align-items:center;gap:.75rem;margin-left:1rem}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:6px;background:var(--card-elevated);border-radius:var(--radius-full);outline:none;cursor:pointer}.volume-slider::-webkit-slider-runnable-track{width:100%;height:6px;background:var(--card-elevated);border-radius:var(--radius-full);border:1px solid var(--border)}.volume-slider::-moz-range-track{width:100%;height:6px;background:var(--card-elevated);border-radius:var(--radius-full);border:1px solid var(--border)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text-primary);cursor:pointer;margin-top:-4px;box-shadow:0 2px 6px #0006;transition:transform var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--accent-primary)}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--text-primary);cursor:pointer;border:none;box-shadow:0 2px 6px #0006}.playlist-header{text-align:center;margin-bottom:2rem}.playlist-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}.meta-badge{font-size:.85rem;padding:.3rem .8rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary)}.songs-list{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:800px;margin:0 auto 2.5rem}.song-card{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer}.song-card:hover{background:var(--card-elevated);border-color:var(--border-hover);transform:translate(4px)}.song-card.playing{background:var(--card-elevated);border-color:var(--accent-primary);box-shadow:0 0 16px var(--mood-glow)}.song-left{display:flex;align-items:center;gap:1rem;min-width:0}.song-thumbnail{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--card-elevated);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}.song-thumbnail img{width:100%;height:100%;object-fit:cover}.song-details{min-width:0}.song-title-text{font-size:1rem;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-artist-text{font-size:.85rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.5rem;animation:fadeInScreen var(--transition-fast)}.modal-card{background:var(--card-elevated);border:1px solid var(--border-hover);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:440px;box-shadow:0 20px 50px #0009}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1.75rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin:1.5rem 0 3rem}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;text-align:center}.stat-value{font-size:2rem;font-weight:800;color:var(--accent-primary);margin-bottom:.25rem}.stat-label{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}@media(max-width:768px){.nav-container{padding:.75rem 1rem}.nav-logo-text{font-size:1.25rem}.nav-links{gap:.5rem}.nav-link{padding:.4rem .75rem;font-size:.85rem}.player-controls{gap:1rem}.volume-control{display:none}.cd-disc{width:180px;height:180px}.cd-artwork{width:74px;height:74px}}:root{--bg-primary: #f6f6f2;--bg-secondary: #ffffff;--card: rgba(255, 255, 255, .78);--card-elevated: #ffffff;--card-hover: #f0efff;--text-primary: #17151f;--text-secondary: #625e70;--text-muted: #8b8794;--accent-primary: #6851e8;--accent-secondary: #ff7565;--accent-emotional: #ffbd59;--mood-glow: rgba(104, 81, 232, .17);--border: rgba(31, 25, 49, .1);--border-hover: rgba(104, 81, 232, .38);--glass: rgba(104, 81, 232, .06)}body{background-color:var(--bg-primary);background-image:radial-gradient(circle at 12% 0%,rgba(255,189,89,.3),transparent 26rem),radial-gradient(circle at 92% 8%,rgba(140,115,255,.2),transparent 27rem),linear-gradient(120deg,#f7f6f0,#faf9ff 48%,#f5f5f0)}#navbar{background:#faf9f5c7;border-color:#1f193114}.nav-container{max-width:1280px}.nav-logo-text{color:#211b37;font-size:1.35rem;letter-spacing:.08em}.nav-logo-text .music-note{color:var(--accent-secondary)}.nav-link.active{color:#fff;background:#211b37;border-color:#211b37;box-shadow:0 6px 14px #1c143724}.nav-link:hover{color:#211b37;background:#6851e817}.screen-container{padding:1.25rem 1rem 3rem}.container{max-width:1280px}.home-page{padding-top:1.5rem}.home-hero{isolation:isolate;overflow:hidden;text-align:left;max-width:none;min-height:430px;padding:clamp(2.4rem,6vw,5.5rem);border-radius:32px;color:#fff;background:linear-gradient(122deg,#241c3e,#3f2e86 53%,#f0695b 132%);box-shadow:0 24px 60px #33246433}.home-hero>:not(.hero-orb){position:relative;z-index:1}.hero-kicker{width:fit-content;display:flex;align-items:center;gap:.45rem;color:#fff1ca;text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;font-weight:800;padding:.45rem .7rem;background:#ffffff1f;border:1px solid rgba(255,255,255,.17);border-radius:999px}.hero-logo-text{color:#fff;font-size:clamp(3.8rem,9vw,7.5rem);line-height:.9;letter-spacing:-.085em;margin:1.5rem 0 1rem}.hero-dot{color:#ffc95b}.hero-tagline{color:#fff;font-size:clamp(1.55rem,3vw,2.45rem);letter-spacing:-.05em;font-weight:600}.hero-tagline em{color:#ffc95b;font-family:Georgia,serif;font-weight:400}.hero-subtitle{color:#ffffffc2;max-width:33rem;margin:1rem 0 1.8rem;font-size:1.05rem}.hero-actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}.hero-actions .btn-primary{background:#fff;color:#271e46;box-shadow:none}.hero-actions .btn-primary:hover:not(:disabled){box-shadow:0 12px 24px #0003}.hero-note{display:flex;gap:.42rem;align-items:center;font-size:.83rem;color:#ffffffb3}.discovery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:1.2rem 1.5rem;margin:1.3rem 0 4.3rem;border:1px solid var(--border);border-radius:18px;background:#ffffff8f}.discovery-strip>div{padding:.25rem 1.4rem;border-right:1px solid var(--border)}.discovery-strip>div:last-child{border:0}.discovery-strip span{display:block;color:var(--accent-primary);font-size:.71rem;font-weight:800;letter-spacing:.1em;margin-bottom:.28rem}.discovery-strip strong{font-size:.9rem;color:#2b2638}.discovery-strip p{font-size:.8rem;margin:.1rem 0 0}.home-section{margin-bottom:3.5rem}.home-section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.25rem}.home-section-heading h2{font-size:clamp(1.7rem,3vw,2.4rem)}.eyebrow,.section-label{color:var(--accent-primary);text-transform:uppercase;letter-spacing:.11em;font-size:.7rem;font-weight:800}.section-label{display:flex;align-items:center;gap:.45rem;color:#625c74;margin-bottom:.85rem}.text-action{color:var(--accent-primary);background:transparent;font-weight:700;font-size:.88rem}.text-action:hover{color:#3e2bb2;transform:translate(2px)}.empty-library{min-height:150px;padding:1.4rem 1.75rem;border:1px solid var(--border);border-radius:18px;background:#fff9;display:flex;align-items:center;gap:1.15rem}.empty-library h3{font-size:1rem}.empty-library p{font-size:.88rem}.empty-library .btn{margin-left:auto}.empty-icon{color:var(--accent-primary);width:52px;height:52px;display:grid;place-items:center;background:#eeebff;border-radius:16px;flex:0 0 auto}.playlist-preview{width:100%;border:1px solid var(--border);text-align:left;padding:.75rem;display:flex;align-items:center;gap:1rem;color:inherit}.playlist-preview-art{height:75px;width:75px;border-radius:13px;display:grid;place-items:center;position:relative;overflow:hidden;flex:0 0 auto;font-size:2.1rem;background:linear-gradient(145deg,#d8d1ff,#ffcf8a)}.playlist-preview-art svg{position:absolute;bottom:.45rem;right:.45rem;padding:.3rem;box-sizing:content-box;color:#fff;border-radius:50%;background:#241c3e}.playlist-preview-copy{min-width:0}.playlist-preview-copy h3{font-size:1.05rem;margin:.1rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-preview-copy p{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-overline{color:var(--accent-primary);text-transform:uppercase;font-size:.65rem;font-weight:800;letter-spacing:.08em}.mood-library-card{color:inherit;display:flex;align-items:center;gap:.8rem;text-align:left;padding:1rem 1.25rem}.mood-library-card .mood-card-emoji{margin:0;font-size:1.7rem}.mood-library-card h3{font-size:1rem}.mood-library-card p{font-size:.8rem}.mood-library-card>svg{margin-left:auto;color:var(--accent-primary)}.mood-starter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.mood-starter{color:#292434;padding:1.2rem .8rem;flex-direction:column;border:1px solid var(--border);background:#ffffff80;border-radius:15px;font-weight:700}.mood-starter span{font-size:1.55rem}.mood-starter:hover{border-color:var(--accent-primary);transform:translateY(-3px);background:#fff}.card{box-shadow:0 8px 20px #251e3908}.card:hover{box-shadow:0 14px 26px #251e391a}.btn-primary{color:#fff;background:linear-gradient(135deg,#6a52e8,#8d66e9)}.btn-secondary{background:#ffffffb3}.search-input{background:#ffffffb8}.stat-card{background:#ffffffa8}.stat-value{color:var(--accent-primary)}.playlist-header h1{font-size:clamp(2.3rem,5vw,4rem)}.meta-badge{background:#fffc}.song-card{background:#ffffffa6}.song-card:hover{background:#fff}@media(max-width:700px){.home-hero{min-height:410px;padding:2.1rem 1.6rem;border-radius:24px}.hero-logo-text{font-size:4rem}.discovery-strip{margin-bottom:3rem;grid-template-columns:1fr;padding:.45rem 1rem}.discovery-strip>div{padding:.85rem .2rem;border-right:0;border-bottom:1px solid var(--border)}.discovery-strip>div:last-child{border-bottom:0}.home-section-heading{align-items:flex-start;gap:1rem}.text-action{margin-top:.55rem}.empty-library{align-items:flex-start;flex-wrap:wrap}.empty-library .btn{margin-left:0}.mood-starter-grid{grid-template-columns:repeat(2,1fr)}.playlist-preview-grid{grid-template-columns:1fr}}