*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a1a;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100vh}button,input{font-family:inherit}:root{--primary:#6c5ce7;--primary-light:#a29bfe;--primary-dark:#5a4bd1;--secondary:#00cec9;--accent:#fd79a8;--bg-dark:#0a0a1a;--bg-card:#1a1a2e;--bg-card-hover:#222240;--bg-input:#16213e;--text-primary:#eee;--text-secondary:#a0a0b8;--text-muted:#6c6c80;--border-color:#2a2a4a;--border-light:#3a3a5a;--success:#00b894;--warning:#fdcb6e;--danger:#e17055;--shadow:0 4px 20px #0000004d;--shadow-lg:0 8px 30px #0006;--radius:12px;--radius-sm:8px;--radius-lg:16px;--transition:all .3s ease}.app{background:var(--bg-dark);min-height:100vh;color:var(--text-primary);flex-direction:column;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex}.app-header{background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);text-align:center;padding:30px 20px;position:relative;overflow:hidden}.app-header:before{content:"";background:radial-gradient(circle,#ffffff0d 0%,#0000 60%);width:200%;height:200%;animation:8s ease-in-out infinite pulse;position:absolute;top:-50%;left:-50%}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.header-content{z-index:1;position:relative}.app-title{color:#fff;text-shadow:0 2px 10px #0000004d;margin:0;font-size:2.2rem;font-weight:700}.title-icon{margin-right:8px}.app-subtitle{color:#fffc;margin-top:8px;font-size:1rem;font-weight:300}.tab-nav{background:var(--bg-card);border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:center;gap:4px;padding:12px 20px;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);background:0 0;border:none;padding:10px 20px;font-size:.9rem;font-weight:500}.tab-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.tab-btn.active{background:var(--primary);color:#fff}.app-main{box-sizing:border-box;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:24px}.generate-section{grid-template-columns:380px 1fr;align-items:start;gap:24px;display:grid}@media (width<=1024px){.generate-section{grid-template-columns:1fr}}.selector-panel{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:24px;position:sticky;top:20px}.selector-panel h3{color:var(--text-primary);border-bottom:1px solid var(--border-color);margin:0 0 12px;padding-bottom:8px;font-size:1rem}.mood-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;display:grid}.mood-card{border:2px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);color:var(--text-secondary);background:0 0;flex-direction:column;align-items:center;padding:12px 8px;display:flex}.mood-card:hover{border-color:var(--primary-light);background:#6c5ce71a}.mood-card.selected{border-color:var(--primary);color:#fff;background:#6c5ce733}.mood-emoji{margin-bottom:4px;font-size:1.6rem}.mood-label{font-size:.75rem;font-weight:500}.activity-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px;display:grid}.activity-card{border:2px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);text-align:left;color:var(--text-secondary);background:0 0;flex-direction:column;align-items:flex-start;padding:12px;display:flex}.activity-card:hover{border-color:var(--secondary);background:#00cec91a}.activity-card.selected{border-color:var(--secondary);color:#fff;background:#00cec933}.activity-emoji{margin-bottom:4px;font-size:1.4rem}.activity-label{font-size:.85rem;font-weight:600}.activity-desc{color:var(--text-muted);margin-top:2px;font-size:.7rem}.genre-grid{flex-wrap:wrap;gap:6px;margin-bottom:20px;display:flex}.genre-chip{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border-radius:20px;padding:6px 14px;font-size:.8rem}.genre-chip:hover{border-color:var(--genre-color,var(--primary-light));color:var(--genre-color,var(--primary-light))}.genre-chip.selected{background:var(--genre-color,var(--primary));color:#fff;border-color:var(--genre-color,var(--primary))}.tempo-energy-selector{margin-bottom:20px}.selector-section{margin-bottom:16px}.selector-section h3{color:var(--text-secondary);border-bottom:none;margin-bottom:8px;padding-bottom:0;font-size:.9rem}.tempo-options,.energy-options{gap:8px;display:flex}.tempo-btn,.energy-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px;font-size:.8rem;display:flex}.tempo-btn:hover,.energy-btn:hover{border-color:var(--primary-light);color:var(--text-primary)}.tempo-btn.selected,.energy-btn.selected{border-color:var(--primary);color:#fff;background:#6c5ce726}.tempo-label,.energy-label{font-weight:600}.tempo-range,.energy-desc{color:var(--text-muted);font-size:.7rem}.playlist-generator{margin-top:8px}.generate-btn{border-radius:var(--radius);background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color:#fff;cursor:pointer;width:100%;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:8px;padding:14px;font-size:1rem;font-weight:600;display:flex}.generate-btn:hover:not(:disabled){box-shadow:var(--shadow);transform:translateY(-2px)}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.generate-hint{color:var(--text-muted);text-align:center;margin-top:8px;font-size:.8rem}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.result-panel{flex-direction:column;gap:20px;display:flex}.playlist-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden}.playlist-header{border-bottom:1px solid var(--border-color);background:#6c5ce71a;align-items:center;gap:20px;padding:20px;display:flex}.playlist-covers{width:120px;height:120px;display:flex;position:relative}.playlist-cover-thumb{object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--bg-card);width:120px;height:120px;position:absolute;top:0;left:0}.playlist-info h3{border:none;margin:0 0 4px;padding:0;font-size:1.2rem}.playlist-count{color:var(--text-secondary);margin-bottom:8px;font-size:.85rem}.playlist-genres{flex-wrap:wrap;gap:6px;display:flex}.genre-tag{color:#fff;border-radius:12px;padding:3px 10px;font-size:.7rem}.playlist-songs{max-height:500px;overflow-y:auto}.song-item{border-bottom:1px solid var(--border-color);cursor:pointer;transition:var(--transition);align-items:center;gap:12px;padding:10px 20px;display:flex}.song-item:hover{background:var(--bg-card-hover)}.song-item:last-child{border-bottom:none}.song-number{color:var(--text-muted);text-align:center;width:24px;font-size:.8rem}.song-cover{object-fit:cover;border-radius:6px;width:40px;height:40px}.song-info{flex-direction:column;flex:1;display:flex}.song-title{color:var(--text-primary);font-size:.9rem;font-weight:500}.song-artist{color:var(--text-secondary);font-size:.8rem}.song-album{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-size:.75rem;overflow:hidden}.song-duration{color:var(--text-muted);font-size:.8rem}.playlist-actions{border-top:1px solid var(--border-color);gap:12px;padding:16px 20px;display:flex}.action-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;padding:10px 24px;font-size:.85rem}.action-btn:hover{border-color:var(--primary-light);color:var(--primary-light)}.save-btn{background:var(--primary);color:#fff;border-color:var(--primary)}.save-btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}.play-all-btn:hover{border-color:var(--secondary);color:var(--secondary);background:#00cec926}.player-bar{background:var(--bg-card);border-top:1px solid var(--border-color);z-index:100;padding:12px 24px;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 20px #0000004d}.music-player{align-items:center;gap:20px;max-width:1400px;margin:0 auto;display:flex}.player-info{align-items:center;gap:12px;min-width:250px;display:flex}.player-cover{object-fit:cover;border-radius:8px;width:50px;height:50px}.player-details{text-align:left}.player-title{color:var(--text-primary);margin:0;font-size:.9rem;font-weight:600}.player-artist{color:var(--text-secondary);margin:0;font-size:.8rem}.player-album{color:var(--text-muted);margin:0;font-size:.7rem}.player-controls{align-items:center;gap:12px;display:flex}.control-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;padding:8px;font-size:1.2rem}.control-btn:hover{color:var(--primary-light);background:#6c5ce71a}.play-btn{background:var(--primary);border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;display:flex;color:#fff!important}.play-btn:hover{background:var(--primary-dark);transform:scale(1.05)}.progress-bar{background:var(--border-color);cursor:pointer;border-radius:2px;flex:1;height:4px;margin:0 16px;position:relative}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--secondary));border-radius:2px;height:100%;transition:width .1s linear}.player-volume{align-items:center;gap:8px;display:flex}.volume-slider{appearance:none;background:var(--border-color);border-radius:2px;outline:none;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:12px;height:12px}.player-extra{color:var(--text-muted);gap:12px;font-size:.75rem;display:flex}.save-manager{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:24px}.save-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.save-header h3{border:none;margin:0;padding:0;font-size:1.1rem}.save-dialog{background:var(--bg-input);border-radius:var(--radius-sm);border:1px solid var(--border-color);margin-bottom:16px;padding:16px}.playlist-name-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);width:100%;color:var(--text-primary);box-sizing:border-box;margin-bottom:10px;padding:10px 14px;font-size:.9rem}.playlist-name-input:focus{border-color:var(--primary);outline:none}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.empty-state{text-align:center;color:var(--text-muted);padding:40px 20px}.empty-emoji{margin-bottom:12px;font-size:3rem;display:block}.empty-hint{margin-top:8px;font-size:.85rem}.saved-lists{flex-direction:column;gap:16px;display:flex}.playlist-group{margin-bottom:12px}.group-title{color:var(--text-secondary);border-bottom:1px solid var(--border-color);margin:0 0 8px;padding-bottom:4px;font-size:.95rem}.saved-item{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.saved-item:hover{background:var(--bg-card-hover)}.saved-info{flex-direction:column;display:flex}.saved-name{color:var(--text-primary);font-size:.9rem;font-weight:500}.saved-count{color:var(--text-muted);font-size:.75rem}.delete-btn{border:1px solid var(--danger);color:var(--danger);cursor:pointer;transition:var(--transition);background:0 0;border-radius:6px;padding:4px 12px;font-size:.75rem}.delete-btn:hover{background:var(--danger);color:#fff}.social-share{margin-top:12px}.share-trigger-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;padding:10px 20px;font-size:.85rem}.share-trigger-btn:hover{border-color:var(--accent);color:var(--accent)}.share-dialog{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);margin-top:12px;padding:20px}.share-dialog h4{margin:0 0 12px;font-size:1rem}.platform-grid{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.platform-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;flex-direction:column;align-items:center;min-width:80px;padding:12px 16px;display:flex}.platform-btn:hover{border-color:var(--primary-light);background:#6c5ce71a}.platform-icon{margin-bottom:4px;font-size:1.5rem}.platform-label{font-size:.75rem}.share-preview{margin-bottom:12px}.share-label{color:var(--text-secondary);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;max-height:150px;margin:0;padding:12px;font-family:inherit;font-size:.8rem;overflow-y:auto}.copy-btn{border:1px solid var(--primary);border-radius:var(--radius-sm);width:100%;color:var(--primary);cursor:pointer;transition:var(--transition);background:0 0;padding:10px;font-size:.85rem}.copy-btn:hover{background:var(--primary);color:#fff}.discovery-panel{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:24px}.discovery-panel h3{border:none;margin:0 0 16px;padding:0;font-size:1.1rem}.discovery-tabs{border-bottom:1px solid var(--border-color);gap:4px;margin-bottom:20px;padding-bottom:0;display:flex}.discovery-tabs .tab-btn{border-bottom:2px solid #0000;border-radius:0;margin-bottom:-1px;padding:10px 16px}.discovery-tabs .tab-btn.active{border-bottom-color:var(--primary);color:var(--primary);background:0 0}.similar-artists{flex-direction:column;gap:10px;display:flex}.artist-card{border-radius:var(--radius-sm);background:var(--bg-input);transition:var(--transition);align-items:center;gap:12px;padding:12px;display:flex}.artist-card:hover{background:var(--bg-card-hover)}.artist-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;font-weight:700;display:flex}.artist-info{flex-direction:column;display:flex}.artist-name{color:var(--text-primary);font-size:.9rem;font-weight:600}.artist-reason{color:var(--text-muted);font-size:.75rem}.trending-list{flex-direction:column;display:flex}.trending-item{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);align-items:center;gap:12px;padding:10px;display:flex}.trending-item:hover{background:var(--bg-card-hover)}.trending-rank{color:var(--primary);text-align:center;width:36px;font-size:1.2rem;font-weight:700}.trending-cover{object-fit:cover;border-radius:6px;width:44px;height:44px}.trending-info{flex-direction:column;flex:1;display:flex}.trending-title{color:var(--text-primary);font-size:.9rem;font-weight:500}.trending-artist{color:var(--text-secondary);font-size:.8rem}.trending-year{color:var(--text-muted);font-size:.75rem}.discover-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.discover-card{background:var(--bg-input);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);align-items:center;gap:10px;padding:12px;display:flex;position:relative}.discover-card:hover{background:var(--bg-card-hover);transform:translateY(-2px)}.discover-cover{object-fit:cover;border-radius:6px;width:48px;height:48px}.discover-info{flex-direction:column;flex:1;display:flex}.discover-title{color:var(--text-primary);font-size:.85rem;font-weight:500}.discover-artist{color:var(--text-secondary);font-size:.75rem}.add-btn{border:1px solid var(--primary);width:28px;height:28px;color:var(--primary);cursor:pointer;transition:var(--transition);background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;display:flex}.add-btn:hover{background:var(--primary);color:#fff}.theme-playlist{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:24px}.theme-playlist h3{border:none;margin:0 0 8px;padding:0;font-size:1.1rem}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:30px;display:grid}.theme-card{border:2px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);text-align:center;color:var(--text-secondary);background:0 0;flex-direction:column;align-items:center;padding:20px 16px;display:flex}.theme-card:hover{border-color:var(--primary-light);background:#6c5ce71a;transform:translateY(-2px)}.theme-card.selected{border-color:var(--primary);color:#fff;background:#6c5ce733}.theme-emoji{margin-bottom:8px;font-size:2.5rem}.theme-label{margin-bottom:4px;font-size:.95rem;font-weight:600}.theme-desc{color:var(--text-muted);margin-bottom:8px;font-size:.75rem}.theme-song-count{color:var(--primary-light);font-size:.7rem}.custom-theme{border-top:1px solid var(--border-color);padding-top:20px}.custom-theme h4{margin:0 0 4px;font-size:1rem}.custom-desc{color:var(--text-secondary);margin-bottom:12px;font-size:.8rem}.custom-genre-chips{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.custom-rules{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:24px}.custom-rules h3{border:none;margin:0 0 8px;padding:0;font-size:1.1rem}.rules-desc{color:var(--text-secondary);margin-bottom:20px;font-size:.85rem}.rules-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;display:grid}@media (width<=768px){.rules-grid{grid-template-columns:1fr}}.rule-section{background:var(--bg-input);border-radius:var(--radius-sm);padding:16px}.rule-section label{color:var(--text-secondary);margin-bottom:8px;font-size:.85rem;font-weight:600;display:block}.bpm-inputs{align-items:center;gap:8px;display:flex}.rule-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);flex:1;padding:8px 12px;font-size:.85rem}.rule-input:focus{border-color:var(--primary);outline:none}.bpm-separator{color:var(--text-muted);font-weight:600}.energy-radios,.popularity-radios,.vocal-radios{flex-direction:column;gap:6px;display:flex}.energy-radio,.pop-radio,.vocal-radio{color:var(--text-secondary);cursor:pointer;align-items:center;gap:8px;font-size:.8rem;display:flex}.energy-radio input,.pop-radio input,.vocal-radio input{accent-color:var(--primary)}.tempo-reference{gap:8px;display:flex}.tempo-ref-item{background:var(--bg-card);border-radius:var(--radius-sm);text-align:center;flex:1;padding:8px}.tempo-ref-label{color:var(--text-primary);font-size:.8rem;font-weight:600;display:block}.tempo-ref-range{color:var(--text-muted);font-size:.7rem;display:block}.rules-hint{color:var(--text-muted);text-align:center;font-size:.8rem}.playlist-library{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:24px}.library-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.library-header h3{border:none;margin:0;padding:0;font-size:1.1rem}.library-search{flex:1;max-width:300px}.search-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);width:100%;color:var(--text-primary);box-sizing:border-box;padding:8px 14px;font-size:.85rem}.search-input:focus{border-color:var(--primary);outline:none}.library-filters{flex-wrap:wrap;gap:6px;margin-bottom:20px;display:flex}.filter-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border-radius:20px;padding:8px 16px;font-size:.8rem}.filter-btn:hover{border-color:var(--primary-light);color:var(--primary-light)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.library-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.library-card{background:var(--bg-input);border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:1px solid #0000;padding:16px}.library-card:hover{border-color:var(--primary-light);transform:translateY(-2px)}.library-card-covers{border-radius:var(--radius-sm);width:100%;height:140px;margin-bottom:12px;display:flex;position:relative;overflow:hidden}.library-cover-thumb{object-fit:cover;border:2px solid var(--bg-input);width:100%;height:100%;position:absolute;top:0;left:0}.library-card-info h4{margin:0 0 4px;font-size:1rem}.library-card-info p{color:var(--text-secondary);margin-bottom:8px;font-size:.8rem}.library-genres{flex-wrap:wrap;gap:4px;display:flex}.library-card-actions{margin-top:8px}.grouped-list{flex-direction:column;gap:16px;display:flex}.mood-group,.activity-group,.genre-group{margin-bottom:8px}.group-item{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.group-item:hover{background:var(--bg-card-hover)}.item-name{color:var(--text-primary);font-size:.9rem;font-weight:500}.item-count{color:var(--text-muted);margin-right:12px;font-size:.75rem}.app-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border-color);margin-bottom:80px;padding:20px;font-size:.8rem}.themes-section,.custom-section,.library-section,.discover-section{max-width:900px;margin:0 auto}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.playlist-card,.discovery-panel,.theme-playlist,.custom-rules,.playlist-library{animation:.4s fadeIn}@media (width<=768px){.app-title{font-size:1.5rem}.mood-grid{grid-template-columns:repeat(2,1fr)}.activity-grid{grid-template-columns:1fr}.theme-grid{grid-template-columns:repeat(2,1fr)}.music-player{flex-wrap:wrap;gap:10px}.player-info{min-width:150px}.player-extra{display:none}.tab-nav{justify-content:flex-start;padding:8px 12px;overflow-x:auto}.tab-btn{white-space:nowrap;padding:8px 12px;font-size:.8rem}.library-grid,.discover-grid{grid-template-columns:1fr}}