.page-container{min-height:100vh;background-color:var(--background)}.container{max-width:1400px;margin:0 auto;padding:0 24px}@media (max-width:640px){.container{padding:0 16px}}.loading-container{min-height:100vh;background-color:var(--background);display:flex;align-items:center;justify-content:center}.loading-content{text-align:center}.loading-spinner{width:48px;height:48px;border:2px solid transparent;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}.loading-text{margin-top:16px;color:var(--foreground)}.error-container{min-height:100vh;background-color:var(--background);display:flex;align-items:center;justify-content:center}.error-content{text-align:center}.error-message{color:#dc2626;margin-bottom:16px}.error-description{color:var(--foreground)}.welcome-section{text-align:center;margin-bottom:48px;padding:32px 0}.welcome-section h1{font-size:3rem;font-weight:700;color:var(--foreground);margin-bottom:16px;line-height:1.1}.welcome-section p{font-size:1.25rem;color:var(--foreground);opacity:.7;max-width:600px;margin:0 auto}.search-section{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:48px}@media (max-width:640px){.header{flex-direction:column;gap:16px}}.auth-controls{display:flex;align-items:center;gap:16px}.auth-buttons button,.user-menu button{padding:8px 16px;background:#007bff;color:white;border:none;border-radius:4px;cursor:pointer;font-size:14px}.auth-buttons button:hover,.user-menu button:hover{background:#0056b3}.user-menu{gap:12px}.user-menu span{font-size:14px;color:var(--foreground)}.details-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;animation:fadeIn .2s ease-out}.album-details-flyout{position:fixed;top:0;right:0;height:100vh;width:400px;background:var(--background);border-left:1px solid #e5e7eb;box-shadow:-4px 0 25px rgba(0,0,0,.15);z-index:1001;animation:slideInRight .3s ease-out;display:flex;flex-direction:column}.details-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb}.details-header h3{font-size:1.25rem;font-weight:600;color:var(--foreground);margin:0}.details-close-btn{background:none;border:none;padding:8px;cursor:pointer;border-radius:4px;color:var(--foreground);opacity:.7;transition:opacity .2s}.details-close-btn:hover{opacity:1;background:#f3f4f6}.details-content{padding:20px;flex:1 1;display:flex;flex-direction:column;gap:24px}.details-album-info{display:flex;gap:16px;align-items:flex-start}.details-album-cover{width:120px;height:120px;border-radius:8px;overflow:hidden;flex-shrink:0}.details-album-cover img{width:100%;height:100%;object-fit:cover}.details-cover-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:2rem}.details-album-text{flex:1 1;min-width:0}.details-album-text h4{font-size:1.125rem;font-weight:600;color:var(--foreground);margin:0 0 4px;line-height:1.3}.details-album-text p{font-size:1rem;color:var(--foreground);opacity:.8;margin:0 0 8px}.details-year{display:inline-block;background:#f3f4f6;color:var(--foreground);opacity:.7;padding:2px 6px;border-radius:4px;font-size:.75rem;font-weight:500}.recommendation-section{background:#f8fafc;border-radius:12px;padding:20px;border:1px solid #e5e7eb}.recommendation-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.recommendation-icon{width:18px;height:18px;color:#3b82f6}.recommendation-header h5{font-size:1rem;font-weight:600;color:var(--foreground);margin:0}.reasoning-content p{font-size:.875rem;line-height:1.6;color:var(--foreground);opacity:.8;margin:0;font-style:italic}.details-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.spotify-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.875rem;transition:all .2s;background:#1db954;color:white}.spotify-action-btn:hover{background:#1ed760;transform:translateY(-1px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@media (max-width:640px){.album-details-flyout{width:100vw;left:0;right:0;border-left:none;border-top:1px solid #e5e7eb}}.empty-state{text-align:center;padding:80px 20px;color:#6b7280}.empty-state h2{font-size:24px;margin-bottom:12px;color:#374151}.empty-state p{font-size:16px;margin-bottom:32px;line-height:1.6}.empty-state button{background:#3b82f6;color:white;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s}.empty-state button:hover{background:#2563eb}.user-menu{display:flex;align-items:center;gap:16px}.user-menu button{padding:8px 16px;border-radius:6px;border:1px solid #d1d5db;background:white;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.user-menu button:hover{background:#f9fafb;border-color:#9ca3af}