*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{width:100%;min-height:100vh}button{font-family:inherit}img{max-width:100%;display:block}:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#1a1a2e;--bg-card-hover:#1f1f35;--bg-input:#16162a;--border-color:#2a2a40;--border-light:#3a3a55;--text-primary:#fff;--text-secondary:#a0a0b8;--text-muted:#6a6a80;--accent:#6c5ce7;--accent-light:#a29bfe;--accent-glow:#6c5ce74d;--success:#00b894;--warning:#fdcb6e;--danger:#e17055;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--player-height:72px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{background:linear-gradient(135deg,#0a0a0f 0%,#12121a 50%,#1a1a2e 100%);flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);background:#0a0a0fd9;position:sticky;top:0}.header-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:12px 24px;display:flex}.header-logo{color:var(--accent);align-items:center;gap:10px;display:flex}.header-logo h1{background:linear-gradient(135deg, var(--accent), var(--accent-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.3rem;font-weight:700}.header-tabs{background:var(--bg-card);border-radius:var(--radius-md);gap:4px;padding:4px;display:flex}.header-tab{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:8px 16px;font-size:.9rem;transition:all .2s;display:flex}.header-tab:hover{color:var(--text-primary);background:var(--bg-card-hover)}.header-tab.active{color:var(--text-primary);background:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}.app-main{width:100%;max-width:1200px;padding:24px;padding-bottom:calc(var(--player-height) + 24px);flex:1;margin:0 auto}.section{margin-bottom:32px}.section-title{color:var(--text-primary);margin-bottom:16px;font-size:1.2rem;font-weight:700}.section-desc{color:var(--text-secondary);margin-bottom:16px;font-size:.9rem}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent), #845ef7);color:#fff;box-shadow:0 4px 12px var(--accent-glow)}.btn-primary:hover{box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-1px)}.btn-outline{color:var(--accent-light);border:1px solid var(--accent);background:0 0}.btn-outline:hover{background:#6c5ce71a}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-color);background:0 0}.btn-ghost:hover{background:var(--bg-card);color:var(--text-primary)}.btn-lg{border-radius:var(--radius-md);padding:14px 28px;font-size:1rem}.btn-sm{padding:6px 12px;font-size:.8rem}.mood-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.mood-card{background:var(--bg-card);border-radius:var(--radius-md);cursor:pointer;color:var(--text-primary);border:2px solid #0000;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;transition:all .3s;display:flex}.mood-card:hover{background:var(--bg-card-hover);border-color:var(--mood-color,var(--border-color));transform:translateY(-2px)}.mood-card.selected{background:color-mix(in srgb, var(--mood-color) 15%, var(--bg-card));border-color:var(--mood-color);box-shadow:0 4px 16px color-mix(in srgb, var(--mood-color) 20%, transparent)}.mood-emoji{font-size:2rem;line-height:1}.mood-label{font-size:.95rem;font-weight:600}.mood-count{color:var(--text-muted);font-size:.75rem}.activity-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;display:grid}.activity-card{background:var(--bg-card);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-primary);border:2px solid #0000;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;transition:all .3s;display:flex}.activity-card:hover{background:var(--bg-card-hover);transform:translateY(-2px)}.activity-card.selected{background:color-mix(in srgb, var(--act-color) 15%, var(--bg-card));border-color:var(--act-color);box-shadow:0 2px 12px color-mix(in srgb, var(--act-color) 20%, transparent)}.act-emoji{font-size:1.6rem}.act-label{font-size:.85rem;font-weight:600}.genre-grid{flex-wrap:wrap;gap:8px;display:flex}.genre-chip{background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;color:var(--text-secondary);border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:.9rem;transition:all .2s;display:flex}.genre-chip:hover{background:var(--bg-card-hover);border-color:var(--border-light)}.genre-chip.selected{background:var(--accent);color:#fff;border-color:var(--accent)}.advanced-toggle{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px 16px;font-size:.9rem;transition:all .2s;display:flex}.advanced-toggle:hover{background:var(--bg-card-hover);color:var(--text-primary)}.advanced-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:16px;padding:20px}.tempo-energy-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.filter-group label{color:var(--text-secondary);margin-bottom:12px;font-size:.9rem;font-weight:600;display:block}.filter-chips{flex-wrap:wrap;gap:8px;display:flex}.filter-chip{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;padding:8px 14px;font-size:.85rem;transition:all .2s}.filter-chip:hover{background:var(--bg-card-hover)}.filter-chip.selected{background:var(--accent);color:#fff;border-color:var(--accent)}.generate-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.playlist-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.playlist-actions{align-items:center;gap:8px;display:flex}.saved-badge{background:var(--success);color:#fff;border-radius:12px;padding:4px 12px;font-size:.8rem;font-weight:600}.song-list{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden}.song-item{border-bottom:1px solid var(--border-color);cursor:pointer;grid-template-columns:40px 48px 1fr 180px 60px 80px 140px 40px 40px;align-items:center;gap:12px;padding:10px 16px;transition:background .2s;display:grid}.song-item:last-child{border-bottom:none}.song-item:hover{background:var(--bg-card-hover)}.song-item.active{background:color-mix(in srgb, var(--accent) 8%, var(--bg-card))}.song-number{color:var(--text-muted);text-align:center;font-size:.85rem;font-weight:600}.song-cover{border-radius:var(--radius-sm);object-fit:cover;width:48px;height:48px}.song-info{flex-direction:column;gap:2px;min-width:0;display:flex}.song-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.song-artist{color:var(--text-secondary);font-size:.8rem}.song-album{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.song-duration{color:var(--text-muted);text-align:center;font-size:.85rem}.song-genre{color:var(--text-secondary);background:var(--bg-input);text-align:center;white-space:nowrap;border-radius:10px;padding:2px 8px;font-size:.75rem}.song-meta{color:var(--text-muted);align-items:center;gap:12px;font-size:.75rem;display:flex}.song-bpm{white-space:nowrap}.energy-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.song-action{width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.song-action:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, transparent)}.playing-icon{align-items:flex-end;gap:2px;height:16px;display:flex}.playing-icon .bar{background:var(--accent);border-radius:2px;width:3px;animation:.6s ease-in-out infinite bounce}.playing-icon .bar:nth-child(2){animation-delay:.1s}.playing-icon .bar:nth-child(3){animation-delay:.2s}@keyframes bounce{0%,to{height:4px}50%{height:16px}}.player-bar{height:var(--player-height);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-color);z-index:200;background:#12121af2;align-items:center;gap:24px;padding:0 24px;display:flex;position:fixed;bottom:0;left:0;right:0}.player-info{flex:none;align-items:center;gap:12px;min-width:200px;display:flex}.player-cover{border-radius:var(--radius-sm);object-fit:cover;width:48px;height:48px}.player-details{flex-direction:column;display:flex}.player-title{color:var(--text-primary);font-size:.9rem;font-weight:600}.player-artist{color:var(--text-secondary);font-size:.8rem}.player-controls{flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.control-btn{width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.control-btn:hover{color:var(--text-primary);background:var(--bg-card)}.play-btn{background:var(--accent);color:#fff;width:44px;height:44px}.play-btn:hover{background:var(--accent-light);transform:scale(1.05)}.progress-bar{background:var(--border-color);cursor:pointer;border-radius:2px;width:200px;height:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-light));border-radius:2px;height:100%;transition:width .3s}.player-volume{color:var(--text-secondary);flex:none;align-items:center;gap:8px;display:flex}.volume-slider{appearance:none;background:var(--border-color);cursor:pointer;border-radius:2px;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:12px;height:12px}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;display:flex}.empty-state .sub{font-size:.85rem}.library-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.library-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s;overflow:hidden}.library-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.library-card-header{align-items:center;gap:12px;padding:16px;display:flex}.library-card-covers{grid-template-columns:1fr 1fr;gap:2px;width:64px;height:64px;display:grid}.mini-cover{object-fit:cover;width:100%;height:100%}.library-card-info{flex:1;min-width:0}.library-card-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.95rem;font-weight:600;overflow:hidden}.library-card-count{color:var(--text-muted);align-items:center;gap:4px;font-size:.8rem;display:flex}.library-card-footer{border-top:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.theme-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;text-align:center;color:var(--text-primary);flex-direction:column;align-items:center;gap:12px;padding:24px 20px;transition:all .3s;display:flex}.theme-card:hover{border-color:var(--accent);box-shadow:0 8px 24px var(--accent-glow);transform:translateY(-4px)}.theme-emoji{font-size:2.5rem}.theme-title{font-size:1.1rem;font-weight:700}.theme-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.theme-tags{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.theme-tag{background:var(--bg-input);color:var(--text-secondary);border-radius:10px;padding:2px 10px;font-size:.75rem}.social-share{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:16px;padding:20px}.social-share h3{margin-bottom:12px;font-size:1rem}.share-buttons{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.share-btn{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;transition:all .2s;display:flex}.share-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.share-btn.twitter:hover{color:#fff;background:#1da1f2;border-color:#1da1f2}.share-btn.facebook:hover{color:#fff;background:#4267b2;border-color:#4267b2}.share-btn.instagram:hover{color:#fff;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:#0000}.share-preview p{color:var(--text-muted);margin-bottom:8px;font-size:.85rem}.share-text{background:var(--bg-input);border-radius:var(--radius-sm);color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:200px;padding:12px;font-family:inherit;font-size:.8rem;overflow-y:auto}.share-section{flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px;display:flex}@media (width<=768px){.header-content{flex-direction:column;align-items:flex-start;gap:12px}.header-tabs{width:100%;overflow-x:auto}.song-item{grid-template-columns:32px 40px 1fr;gap:8px;padding:8px 12px}.song-album,.song-duration,.song-genre,.song-meta,.song-action{display:none}.tempo-energy-grid{grid-template-columns:1fr}.player-bar{flex-wrap:wrap;gap:12px;height:auto;padding:8px 12px}.player-controls{order:-1;justify-content:center;width:100%}.progress-bar,.player-info{width:100%}.player-volume{justify-content:flex-end;width:100%}.theme-grid,.library-grid{grid-template-columns:1fr}.mood-grid,.activity-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=480px){.mood-grid,.activity-grid{grid-template-columns:repeat(2,1fr)}.genre-grid{gap:6px}.genre-chip{padding:6px 12px;font-size:.8rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.song-item{animation:.3s ease-out forwards fadeIn}.song-item:first-child{animation-delay:0s}.song-item:nth-child(2){animation-delay:20ms}.song-item:nth-child(3){animation-delay:40ms}.song-item:nth-child(4){animation-delay:60ms}.song-item:nth-child(5){animation-delay:80ms}