body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{overflow-y:scroll}h1,h2{font-size:1.5em}.App{text-align:center;padding:2rem;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.intro-container{background-color:#f5f5f7;border-radius:10px;padding:20px;text-align:left;box-shadow:0 2px 10px #0000001a;margin-bottom:30px}.intro-container h1{margin-top:0;text-align:left}.intro-description{line-height:1.6;color:#555;font-size:1.1rem;text-align:left;margin:0}.intro-description+.intro-description{margin-top:10px}@media (max-width: 768px){.App{padding:1rem;max-width:95%}}button{background-color:#c81e2e;color:#fff;border:none;padding:10px 20px;border-radius:5px;font-size:16px;cursor:pointer;margin:10px 0;transition:background-color .2s}button:hover{background-color:#ff5f7a}.logout-btn{background-color:#8e8e93;margin-bottom:20px}.logout-btn:hover{background-color:#6d6d72}.song-list{list-style:none;padding:0;text-align:left}.song-item{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid #e6e6e6;transition:background-color .2s}.song-item:hover{background-color:#f5f5f7}.song-item.selected,.search-result-item.selected{background-color:#ff2d551a;border-left:3px solid #ff2d55;border-bottom:1px solid #e6e6e6;padding-left:12px;margin-bottom:0}.song-item,.recommendation-item,.picked-song-item{cursor:text}.song-item-button{display:flex;align-items:flex-start;width:100%;text-align:left;border:none;background:transparent;padding:0;cursor:pointer;font:inherit;color:inherit}.main-content{display:flex;flex-direction:column;gap:30px}.search-section,.picked-songs-section,.recent-section{background-color:#f5f5f7;border-radius:10px;padding:20px;text-align:left;box-shadow:0 2px 10px #0000001a}.search-box{display:flex;flex-direction:column;margin-bottom:20px}.search-box input{width:100%;padding:10px 15px;border:1px solid #d1d1d6;border-radius:5px;font-size:16px;box-sizing:border-box}@media (max-width: 768px){.search-box input{font-size:14px;padding:8px 12px}}.search-info{font-size:14px;color:#8e8e93;margin-top:8px;font-style:italic;text-align:left;width:100%}.search-results ul,.picked-songs-section ul,.genres-list,.recent-section ul{list-style:none;padding:0}.search-result-item{display:flex;padding:12px 0;border-bottom:1px solid #e6e6e6;cursor:pointer}.search-result-item label{display:flex;align-items:center;width:100%;cursor:pointer}.search-result-item input[type=checkbox]{margin-right:15px;width:18px;height:18px;accent-color:#ff2d55}.album-art{margin-right:15px;flex-shrink:0}.album-art img{border-radius:6px;object-fit:cover;box-shadow:0 2px 6px #0003;display:block}.song-info{flex:1}.picked-song-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #e6e6e6}.song-details{flex:1;display:flex;justify-content:space-between;align-items:center}.remove-btn{background-color:#ff3b30;padding:5px 10px;font-size:14px;margin:0}.remove-btn:hover{background-color:#d63530}.remove-icon{position:relative;width:22px;height:22px;min-width:22px;padding:0;box-sizing:border-box;border-radius:50%;background-color:#fa2d48;margin-left:10px;margin-top:0;margin-bottom:0;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0000001a;transition:background-color .2s}.remove-icon:before{content:"";width:10px;height:2px;background-color:#fff;position:absolute;transform:rotate(0)}.remove-icon:hover{background-color:#ff5f7a}.remove-icon:hover:before{background-color:#fff}.genres-section{margin-top:20px;padding-top:20px}.genres-list{padding-left:0;margin-left:0}.genre-item{display:inline-flex;align-items:center;justify-content:center;background-color:#831100;color:#fff;padding:5px 12px;border-radius:20px;font-size:14px;margin:5px 5px 5px 0;line-height:1}.main-genres-section,.sub-genres-section{margin-top:20px;border-top:1px solid #e6e6e6;padding-top:20px}.main-genres-list,.sub-genres-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.main-genre-item{display:inline-block;background-color:#0051a8;color:#fff;padding:5px 12px;border-radius:20px;margin:2px;font-size:14px;font-weight:700}.sub-genre-item{display:inline-block;background-color:#4a48b5;color:#fff;padding:5px 12px;border-radius:20px;margin:2px;font-size:14px}.recommendations-section{background-color:#f5f5f7;border-radius:10px;padding:20px;text-align:left;box-shadow:0 2px 10px #0000001a;animation:fadeIn .8s ease-in-out}.recommendations-list{list-style:none;padding:0}.recommendation-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #e6e6e6}.recommendation-details{width:100%}.recommendation-info{display:flex;flex-direction:column;width:100%}.song-title-artist{text-align:left;font-weight:500;margin-bottom:4px}.release-weight{text-align:left;color:#666;font-size:.9em}.search-results .release-date,.picked-songs-section .release-date,.recent-section .release-date{display:none}.error-message{color:#ff3b30;font-weight:700}.back-btn{margin-top:20px;font-size:14px;width:100%;text-align:center;position:relative;padding:10px 20px;height:37px;box-sizing:border-box}.back-btn:hover{background-color:#e0e0e5}.spinner{display:inline-block;position:relative;width:20px;height:20px;margin-right:8px;vertical-align:middle}@keyframes ios-line-spinner{0%{opacity:1}to{opacity:.15}}.spinner:before,.spinner:after,.spinner .line{content:"";position:absolute;width:2px;height:7px;background-color:#fff;border-radius:1px;left:9px;top:0;transform-origin:1px 10px}.spinner:before{animation:ios-line-spinner 1s infinite 0s}.spinner:after{transform:rotate(45deg);animation:ios-line-spinner 1s infinite .125s}.spinner .line:nth-child(1){transform:rotate(90deg);animation:ios-line-spinner 1s infinite .25s}.spinner .line:nth-child(2){transform:rotate(135deg);animation:ios-line-spinner 1s infinite .375s}.spinner .line:nth-child(3){transform:rotate(180deg);animation:ios-line-spinner 1s infinite .5s}.spinner .line:nth-child(4){transform:rotate(225deg);animation:ios-line-spinner 1s infinite .625s}.spinner .line:nth-child(5){transform:rotate(270deg);animation:ios-line-spinner 1s infinite .75s}.spinner .line:nth-child(6){transform:rotate(315deg);animation:ios-line-spinner 1s infinite .875s}button.loading{opacity:.9;cursor:not-allowed}button:disabled{background-color:#a5a5a7;cursor:not-allowed}.recommendations-btn{font-size:14px;width:100%;text-align:center;position:relative;padding:10px 45px;height:37px;box-sizing:border-box}.recommendations-btn.loading{text-align:center;padding-left:15px;padding-right:45px;height:37px}.recommendations-btn .spinner{position:absolute;right:15px;top:50%;transform:translateY(-50%);margin:0}.create-playlist-btn{font-size:14px;width:100%;text-align:center;position:relative;padding:10px 45px;height:37px;box-sizing:border-box}.create-playlist-btn.loading{text-align:center;padding-left:15px;padding-right:45px;height:37px}.create-playlist-btn .spinner{position:absolute;right:15px;top:50%;transform:translateY(-50%);margin:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.nav-header{width:100%;background-color:#f5f5f7;border-radius:10px;box-shadow:0 2px 10px #0000001a;position:relative;z-index:100;margin-bottom:30px}.nav-container{display:flex;justify-content:space-between;align-items:center;padding:0 20px;max-width:1200px;margin:0 auto}.logo-container{flex:1;display:flex;align-items:center}.logo-link{text-decoration:none;display:flex;align-items:center}.app-logo{height:25px;width:auto;margin-right:12px;vertical-align:middle}.app-name{font-size:1.2rem;font-weight:700;font-style:italic;color:#333;white-space:nowrap;line-height:55px;display:inline-block;vertical-align:middle}.desktop-nav{display:none;align-items:center}.nav-links{display:flex;list-style:none;margin:0;padding:0;height:100%;align-items:center}.nav-links li{margin-left:2rem;display:flex;align-items:center;height:100%}.nav-links a{text-decoration:none;color:#333;font-weight:500;transition:color .3s ease;display:flex;align-items:center;height:100%}.nav-links a:hover{color:#fa586a}.auth-button{color:#fff;border:none;border-radius:4px;padding:8px 16px;font-weight:500;cursor:pointer;transition:background-color .3s ease;display:flex;align-items:center}.auth-link{display:flex;align-items:center;height:100%}.mobile-auth-button{width:100%;margin-top:10px;padding:10px;font-size:1.1rem}.mobile-menu-button{display:block;cursor:pointer;z-index:101}.hamburger{width:30px;height:20px;position:relative}.hamburger span{display:block;position:absolute;height:3px;width:100%;background:#333;border-radius:3px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}.hamburger span:nth-child(1){top:0}.hamburger span:nth-child(2){top:9px}.hamburger span:nth-child(3){top:18px}.hamburger.open span:nth-child(1){top:9px;transform:rotate(135deg)}.hamburger.open span:nth-child(2){opacity:0;left:-60px}.hamburger.open span:nth-child(3){top:9px;transform:rotate(-135deg)}.mobile-nav{position:absolute;top:100%;left:0;right:0;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:0;overflow:hidden;transition:max-height .3s ease;margin-top:30px;border-radius:10px}.mobile-nav.open{max-height:300px}.mobile-nav-links{list-style:none;padding:1rem;margin:0}.mobile-nav-links li{margin:1rem 0}.mobile-nav-links a{text-decoration:none;color:#333;font-weight:500;font-size:1.1rem;display:block;padding:.5rem 0}@media (min-width: 811px){.mobile-menu-button{display:none}.desktop-nav{display:flex}.mobile-nav{display:none}.logo-container{flex:0 0 auto}}@media (max-width: 810px){.nav-container{justify-content:center;position:relative}.logo-container{display:flex;justify-content:center}.desktop-nav{display:none}.mobile-menu-button{position:absolute;left:1rem;right:auto;top:50%;transform:translateY(-50%)}}.footer{width:100%;background-color:#f5f5f7;border-radius:10px;box-shadow:0 2px 10px #0000001a;position:relative;z-index:100;margin-top:30px}.footer-container{display:flex;justify-content:center;align-items:center;padding:0 20px;max-width:1200px;margin:0 auto}.copyright{color:#333;font-size:.9rem}.how-it-works-page,.data-privacy-page{text-align:left}.content-container section{margin-bottom:20px}.content-container{line-height:1.6;color:#555;font-size:1.1rem;text-align:left;margin:0}
