:root{--blue-50:#f0f9ff;--blue-100:#e0f2fe;--blue-200:#bae6fd;--blue-300:#7dd3fc;--blue-400:#0ea5e9;--blue-500:#0284c7;--blue-600:#0369a1;--blue-700:#075985;--blue-800:#0c4a6e;--blue-900:#083e5b;--color-primary:var(--blue-600);--color-accent:var(--blue-500);--color-badge:var(--blue-400);--color-link:var(--blue-600);--color-link-hover:var(--blue-700);--color-surface-accent:var(--blue-50);--color-focus-ring:#0369a147;--text-primary:#1f2937;--text-secondary:#4b5563;--bg-body:#f5f5f5;--bg-surface:#fff}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;background-color:var(--bg-body);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.toast{align-items:center;animation:slideIn .3s ease-out;background:#fff;border-left:4px solid #667eea;border-radius:8px;bottom:20px;box-shadow:0 4px 12px #00000026;display:flex;gap:15px;max-width:400px;min-width:250px;padding:12px 20px;position:fixed;right:20px;z-index:10000}@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.toast-success{border-left-color:#4caf50}.toast-error{border-left-color:#f44336}.toast-info{border-left-color:#2196f3}.toast-message{color:#333;flex:1 1;font-size:14px}.toast-close{align-items:center;background:none;border:none;color:#999;cursor:pointer;display:flex;font-size:20px;height:24px;justify-content:center;padding:0;transition:color .2s;width:24px}.toast-close:hover{color:#333}.auth-container{box-sizing:border-box;margin:0 auto;max-width:1200px;min-height:100vh;padding:20px;position:relative;width:100%}.auth-container,.auth-title{align-items:center;display:flex;justify-content:center}.auth-title{gap:12px}.title-logo{height:48px;object-fit:contain;width:auto}.auth-box{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;display:flex;max-width:1000px;overflow:hidden;width:100%}.auth-left{background:var(--color-accent);flex:1 1;min-height:500px;padding:40px}.auth-image-placeholder,.auth-left{align-items:center;display:flex;justify-content:center}.auth-image-placeholder{color:#fff;height:100%;text-align:center;width:100%}.music-art-image{filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));height:auto;max-width:350px;width:100%}.auth-right{display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:50px 40px}.auth-right .auth-title,.auth-right h2{color:#333;font-size:32px;margin-bottom:30px}.auth-form{width:100%}.form-group{margin-bottom:20px;position:relative}.input-icon{align-items:center;display:inline-flex;font-size:18px;left:15px;line-height:1;pointer-events:none;position:absolute;top:24px;transform:translateY(-50%);z-index:1}.form-group input{border:2px solid #e0e0e0;border-radius:8px;box-sizing:border-box;font-size:16px;height:48px;line-height:20px;padding:12px 15px 12px 45px;transition:border-color .3s;width:100%}.form-group input:focus{border-color:var(--color-accent);outline:none}.form-group input.input-error{border-color:#e74c3c}.form-group input.input-error:focus{border-color:#e74c3c;box-shadow:0 0 0 3px #e74c3c1a}.field-error{color:#e74c3c;font-size:12px;margin-left:45px;margin-top:5px}.field-error ul{margin:0;padding-left:20px}.field-error li{margin:2px 0}.auth-button{background:var(--color-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:10px;padding:14px;transition:transform .2s,box-shadow .2s;width:100%}.auth-button:hover:not(:disabled){background:var(--blue-700);box-shadow:0 4px 12px #0369a152;transform:translateY(-2px)}.auth-button:disabled{cursor:not-allowed;opacity:.6}.spotify-section{margin-bottom:25px}.spotify-signin{text-align:center}.spotify-button{align-items:center;background:#1db954;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;justify-content:center;margin:0 auto 12px;max-width:100%;padding:14px 20px;transition:all .3s;width:100%}.spotify-button:hover:not(:disabled){background:#1ed760;box-shadow:0 4px 12px #1db95466;transform:translateY(-2px)}.spotify-button:disabled{cursor:not-allowed;opacity:.6}.spotify-note{color:#666;font-size:14px;font-style:italic;line-height:1.5;margin:0}.auth-divider{align-items:center;color:#999;display:flex;font-size:14px;margin:25px 0;text-align:center}.auth-divider:after,.auth-divider:before{border-bottom:1px solid #e0e0e0;content:"";flex:1 1}.auth-divider span{padding:0 15px}.regular-login-section{margin-top:25px}.regular-login-note{color:#999;font-size:12px;font-style:italic;line-height:1.4;margin-top:12px;text-align:center}.auth-link{color:#666;font-size:14px;margin-top:25px;text-align:center}.auth-link a{color:var(--color-link);font-weight:600;text-decoration:none}.auth-link a:hover{text-decoration:underline}@media (max-width:768px){.auth-box{flex-direction:column}.auth-left{min-height:200px}.auth-right{padding:30px 20px}}.audio-player{background:#fff;bottom:0;box-shadow:0 -2px 10px #0000001a;left:0;padding:15px 30px;position:fixed;right:0;z-index:1000}.player-content{align-items:center;display:flex;gap:20px;margin:0 auto;max-width:1200px}.player-track-info{align-items:center;display:flex;flex:0 1 35%;gap:15px;max-width:35%;min-width:250px;overflow:hidden}.player-album-art{border-radius:8px;height:60px;object-fit:cover;width:60px}.player-details{min-width:0}.player-details h4{color:#333;font-size:14px;margin:0 0 5px}.player-details h4,.player-details p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-details p{color:#666;font-size:12px;margin:0}.player-controls{align-items:center;display:flex;flex:1 1;gap:15px}@media (max-width:768px){.player-track-info{flex-basis:55%;max-width:55%}}.control-button{align-items:center;background:#667eea;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:18px;height:50px;justify-content:center;transition:background .2s,transform .05s;width:50px}.control-button:hover{background:#5648d3}.control-button:active{transform:scale(.98)}.control-button.active{box-shadow:inset 0 0 0 3px #667eea40}.shuffle-btn{background:#e5e7eb;color:#111}.shuffle-btn:hover{background:#dcdfe3}.shuffle-btn.active{background:#1db954;box-shadow:0 8px 16px #1db95440;color:#fff}.shuffle-icon-img{height:20px;object-fit:contain;width:20px}.play-button{align-items:center;background:#667eea;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;height:50px;justify-content:center;transition:background .2s;width:50px}.play-button:hover{background:#5648d3}.progress-container{align-items:center;display:flex;flex:1 1;gap:10px}.time{color:#666;font-size:12px;min-width:40px}.progress-bar{-webkit-appearance:none;background:#e0e0e0;border-radius:3px;flex:1 1;height:6px;outline:none}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#667eea;border-radius:50%;cursor:pointer;height:16px;width:16px}.progress-bar::-moz-range-thumb{background:#667eea;border:none;border-radius:50%;cursor:pointer;height:16px;width:16px}.close-button{background:#0000;color:#666;font-size:24px;line-height:1;padding:5px}@media (max-width:768px){.audio-player{padding:10px 15px}.player-content{flex-wrap:wrap}.player-track-info{flex:1 1;min-width:auto}.player-controls{width:100%}}.playlist-selector-overlay{align-items:center;animation:fadeIn .2s ease-out;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10001}.playlist-selector-modal{animation:slideUp .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;max-height:80vh;max-width:500px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.playlist-selector-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:20px}.playlist-selector-header h3{color:#333;font-size:20px;margin:0}.close-button{align-items:center;background:none;border:none;border-radius:4px;color:#999;cursor:pointer;display:flex;font-size:28px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}.close-button:hover{background:#f0f0f0;color:#333}.playlist-selector-content{max-height:calc(80vh - 80px);overflow-y:auto;padding:20px}.create-new-playlist-btn{background:#374151;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;margin-bottom:20px;padding:12px;transition:transform .2s,box-shadow .2s;width:100%}.create-new-playlist-btn:hover{background:#1f2937;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.playlist-selector-list{display:flex;flex-direction:column;gap:8px}.playlist-selector-item{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px;transition:background .2s}.playlist-selector-item:hover{background:#f5f5f5}.playlist-selector-item .playlist-icon{align-items:center;background:#f0f0f3;border-radius:6px;box-shadow:inset 0 0 0 1px #0000000d;display:flex;flex-shrink:0;height:36px;justify-content:center;overflow:hidden;width:36px}.playlist-selector-item .playlist-icon img{height:100%;object-fit:cover;width:100%}.playlist-selector-item .playlist-icon-placeholder{color:#bbb;font-size:18px}.playlist-selector-item .playlist-name{color:#333;flex:1 1;font-weight:500}.playlist-selector-item .playlist-track-count{color:#999;font-size:12px}.loading-playlists,.no-playlists-message{color:#999;font-size:14px;padding:40px 20px;text-align:center}.create-playlist-in-modal{padding:10px 0}.playlist-name-input-modal{border:1px solid #ddd;border-radius:6px;box-sizing:border-box;font-size:14px;margin-bottom:15px;padding:10px;width:100%}.playlist-visibility-selector label{color:#333;font-size:14px}.playlist-visibility-select{padding:10px}.playlist-visibility-select:focus{border-color:var(--blue-500)}.create-playlist-buttons-modal{display:flex;gap:10px}.home-header{align-items:center;background:#fff;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;padding:15px 30px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.logo{color:var(--blue-800);font-size:24px;font-weight:700}.nav-icons{display:flex;gap:15px}.nav-icon{cursor:pointer;font-size:20px;padding:5px}.nav-icon.active{color:#addfff}.header-center{align-items:center;display:flex;margin:0 30px;max-width:500px}.search-toggle{display:flex;gap:5px;justify-content:center}.search-type-btn{background:#0000;border:1px solid #e0e0e0;border-radius:15px;color:#666;cursor:pointer;font-size:12px;padding:6px 12px;transition:all .2s}.search-type-btn:hover{background:#f0f0f0}.search-type-btn.active{background:#addfff;border-color:#addfff;color:#fff}.search-form{display:flex;width:100%}.search-input{border:2px solid #e0e0e0;border-radius:25px 0 0 25px;flex:1 1;font-size:14px;outline:none;padding:10px 15px}.search-input:focus{border-color:var(--color-accent)}.search-button{border:none;border-radius:0 25px 25px 0;cursor:pointer;font-size:16px;padding:10px 20px}.search-button,.search-button:hover{background:#addfff;color:#fdc1c5}.header-tab:hover{border-color:var(--color-accent)}.header-tab.active{background:#addfff;border-color:#addfff}.friends-button{position:relative}.notification-badge{align-items:center;background:#e74c3c;border:2px solid #fff;border-radius:50%;color:#fff;display:flex;font-size:11px;font-weight:700;height:20px;justify-content:center;position:absolute;right:-8px;top:-8px;width:20px}.profile-dropdown-container{position:relative}.profile-button{align-items:center;display:flex;gap:5px}.profile-dropdown{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:180px;overflow:hidden;position:absolute;right:0;top:calc(100% + 5px);z-index:1000}.dropdown-item{background:#fff;border:none;color:#333;cursor:pointer;font-size:14px;padding:12px 20px;text-align:left;transition:background .2s;width:100%}.dropdown-item:hover{background:#f5f5f5}.dropdown-item.logout-item{border-top:1px solid #e0e0e0;color:#e74c3c}.dropdown-item.logout-item:hover{background:#ffeaea}@media (max-width:768px){.home-header{flex-direction:column;gap:15px;padding:15px}.header-center{margin:0;width:100%}}.friend-status-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 1px 3px #00000014;padding:12px;transition:all .2s ease}.friend-status-card:hover{box-shadow:0 2px 6px #0000001f;transform:translateY(-1px)}.friend-status-card.offline{opacity:.6}.friend-status-card.offline:hover{opacity:.8}.friend-status-card-header{align-items:center;display:flex;gap:10px;margin-bottom:10px}.friend-avatar-small{align-items:center;background:var(--blue-500);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0000001a;display:flex;flex-shrink:0;height:36px;justify-content:center;overflow:hidden;width:36px}.friend-avatar-small img{height:100%;object-fit:cover;width:100%}.avatar-placeholder-small{align-items:center;color:#fff;display:flex;font-size:20px;height:100%;justify-content:center;width:100%}.friend-name-container{align-items:center;display:flex;flex:1 1;gap:6px;min-width:0}.friend-display-name{color:#333;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listening-indicator{animation:pulse 2s infinite;background-color:#1db954;border-radius:50%;box-shadow:0 0 4px #1db95480;display:inline-block;flex-shrink:0;height:8px;width:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.offline-indicator{background-color:#b3b3b3;border-radius:50%;display:inline-block;flex-shrink:0;height:8px;margin-left:6px;width:8px}.friend-music-info{align-items:center;background:#f8f9fa;border:1px solid #0000;border-radius:8px;box-sizing:border-box;display:flex;gap:10px;min-width:0;padding:8px;position:relative;transition:all .2s ease;width:100%}.friend-music-info:hover{background:#f0f0f0;border-color:var(--blue-500);transform:translateX(2px)}.friend-music-info:hover:after{color:var(--blue-600);content:"▶";font-size:14px;opacity:.7;position:absolute;right:12px}.music-image-container{align-items:center;background:#e0e0e0;border-radius:6px;box-shadow:0 2px 4px #0000001a;display:flex;flex-shrink:0;height:48px;justify-content:center;overflow:hidden;transition:transform .2s ease;width:48px}.friend-music-info:hover .music-image-container{transform:scale(1.05)}.music-thumbnail{height:100%;object-fit:cover;width:100%}.music-thumbnail-placeholder{align-items:center;background:var(--blue-500);color:#fff;display:flex;font-size:24px;height:100%;justify-content:center;width:100%}.music-details{display:flex;flex:1 1;flex-direction:column;gap:3px;min-width:0}.track-name{color:#333;font-size:13px;font-weight:600}.track-artist,.track-name{line-height:1.3;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{color:#666;font-size:11px}.friend-not-listening{padding:8px;text-align:center}.not-listening-text{color:#999;font-size:12px;font-style:italic}.friend-activity-info{align-items:center;background:#f8f9fa;border:1px solid #0000;border-radius:8px;display:flex;gap:10px;padding:8px;transition:all .2s ease}.friend-activity-info.clickable-playlist{cursor:pointer}.friend-activity-info.clickable-playlist:hover{background:#f0f0f0;border-color:var(--blue-500);transform:translateX(2px)}.activity-icon{flex-shrink:0;font-size:20px}.activity-details{display:flex;flex:1 1;flex-direction:column;gap:4px}.activity-text{color:#666;font-size:13px;font-weight:500}.playlist-name-link{color:var(--blue-600);cursor:pointer;font-size:12px;font-weight:600;max-width:100%;min-width:0;overflow:hidden;text-decoration:underline;text-overflow:ellipsis;white-space:nowrap}.playlist-name-link:hover{color:var(--blue-700)}.clickable-username{cursor:pointer;transition:color .2s ease}.clickable-username:hover,.playlist-context{color:var(--blue-600)}.playlist-context{align-items:center;background-color:#f0f0f0;border-radius:4px;display:flex;font-size:12px;gap:6px;margin-bottom:8px;padding:4px 8px;transition:all .2s ease}.playlist-context:hover{background-color:#e0e0e0;color:var(--blue-700)}.playlist-context.clickable-playlist{cursor:pointer}.music-content{align-items:center;display:flex;flex:1 1;gap:10px;min-width:0}.music-content .music-details{flex:1 1;min-width:0;overflow:hidden}.friend-playlist-music-hierarchy{display:flex;flex-direction:column;gap:6px;min-width:0;width:100%}.playlist-context-line{align-items:center;background-color:#e8eaf6;border-radius:4px;color:var(--blue-600);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:6px;max-width:100%;min-width:0;overflow:hidden;padding:6px 8px;text-overflow:ellipsis;transition:all .2s ease;white-space:nowrap}.playlist-context-line:hover{background-color:#d1d9ff;color:var(--blue-700)}.music-content-indented{align-items:center;cursor:pointer;display:flex;flex:1 1;gap:10px;min-width:0;padding-left:16px;transition:all .2s ease}.music-content-indented .music-details{flex:1 1;min-width:0;overflow:hidden}.music-content-indented:hover{transform:translateX(2px)}.friend-offline{padding:8px;text-align:center}.offline-text{color:#999;font-size:12px;font-style:italic}.sidebar-left,.sidebar-right{align-self:stretch;background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;flex-shrink:0;min-height:100vh;min-width:250px;padding:12px;position:-webkit-sticky;position:sticky;top:0;width:250px}.sidebar-left h3,.sidebar-right h3{align-items:center;color:#333;display:flex;flex-shrink:0;font-size:18px;font-weight:600;gap:8px;margin-bottom:12px}.sidebar-tabs{background:#f8f9fa;border:2px solid #e9ecef;border-radius:10px;box-shadow:inset 0 1px 2px #0000000d;display:flex;flex-shrink:0;gap:0;margin-bottom:20px;padding:4px}.sidebar-tab{background:#0000;border:none;border-radius:8px;color:#666;cursor:pointer;flex:1 1;font-size:14px;font-weight:600;padding:10px 16px;position:relative;text-align:center;transition:all .2s ease}.sidebar-tab:hover:not(.active){background:#00000008;color:#333}.sidebar-tab.active{background:#addfff;box-shadow:0 2px 6px #0369a142;color:#111;transform:translateY(-1px)}.sidebar-tab.active:hover{background:#addfff;box-shadow:0 3px 8px #0369a152}.tab-content{background:#fff;border-top:1px solid #f0f0f0;display:flex;flex:1 1;flex-direction:column;margin-top:4px;min-height:0;overflow-y:auto;padding-top:8px}.create-playlist-btn{background:#374151;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;margin-bottom:20px;padding:12px;width:100%}.create-playlist-btn:hover{background:#1f2937;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.playlist-list{display:flex;flex-direction:column;gap:10px}.playlist-item{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:10px;padding:10px;transition:background .2s}.playlist-item:hover{background:#f5f5f5}.playlist-item.active{background:#e8eaf6;border-left:3px solid var(--color-accent)}.playlist-icon{align-items:center;background:#f0f0f3;border-radius:6px;box-shadow:inset 0 0 0 1px #0000000d;display:flex;height:36px;justify-content:center;margin-right:10px;overflow:hidden;width:36px}.playlist-icon img{height:100%;object-fit:cover;width:100%}.playlist-icon-placeholder{color:#bbb;font-size:18px}.playlist-item-name{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-item-meta{align-items:center;display:flex;gap:6px}.playlist-track-count{color:#999;font-size:12px}.playlist-visibility-indicator{font-size:14px;opacity:.7}.playlist-owner-name{color:#666;font-size:11px;font-style:italic}.playlist-section{margin-bottom:20px}.playlist-section-title{align-items:center;color:#333;display:flex;font-size:18px;font-weight:600;gap:8px;margin-bottom:12px;margin-top:0;padding:0}.saved-playlist{opacity:.95}.saved-playlist:hover{background:#fff9e6}.empty-playlist-message{color:#999;font-size:14px;font-style:italic;padding:20px;text-align:center}.create-playlist-form{margin-bottom:20px}.create-playlist-form .playlist-name-input{border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:10px;padding:10px;width:100%}.create-playlist-buttons{display:flex;gap:10px}.save-btn{background:var(--color-primary);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:background .2s}.save-btn:hover{background:var(--blue-700)}.cancel-btn{background:#e0e0e0;border:none;border-radius:6px;cursor:pointer;font-size:14px;padding:8px 16px;transition:background .2s}.cancel-btn:hover{background:#d0d0d0}.playlist-visibility-selector{margin-bottom:15px}.playlist-visibility-selector label{color:#666;display:block;font-size:13px;font-weight:500;margin-bottom:5px}.playlist-visibility-select{background:#fff;border:1px solid #ddd;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:14px;padding:8px 12px;width:100%}.playlist-visibility-select:focus{border-color:var(--color-accent);outline:none}@media (max-width:1024px){.sidebar-left,.sidebar-right{border-radius:10px;box-shadow:none;max-height:70vh;min-height:auto;min-width:0;overflow-y:auto;position:static;width:100%}.tab-content{-webkit-overflow-scrolling:touch;overflow-y:auto}}.friend-status-list{display:flex;flex-direction:column;gap:12px;padding:4px 0}.friend-status-list .empty-state{background:#f8f9fa;border:1px dashed #e0e0e0;border-radius:8px;color:#999;font-size:14px;font-style:italic;padding:30px 20px;text-align:center}.friends-section-collapsible{margin-top:12px}.friends-section-collapsible:first-child{margin-top:0}.offline-friends-section{border-top:1px solid #e0e0e0;margin-top:12px;padding-top:12px}.friends-toggle{align-items:center;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 1px 2px #0000000d;color:#333;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:10px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.friends-toggle:hover{background:#f0f0f0;border-color:#d0d0d0;box-shadow:0 2px 4px #0000001a}.friends-toggle:active{transform:scale(.98)}.toggle-icon{color:#666;flex-shrink:0;font-size:12px;transition:transform .2s ease}.toggle-text{flex:1 1;font-weight:600}.friends-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-left:4px}.offline-friends-toggle{align-items:center;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 1px 2px #0000000d;color:#333;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:10px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.offline-friends-toggle:hover{background:#f0f0f0;border-color:#d0d0d0;box-shadow:0 2px 4px #0000001a}.offline-friends-list{margin-top:8px;padding-left:4px}.friends-section,.offline-friends-list{display:flex;flex-direction:column;gap:8px}@media (max-width:1024px){.sidebar-left,.sidebar-right{border-radius:10px;box-shadow:none;max-height:70vh;min-height:auto;min-width:0;overflow-y:auto;position:static;width:100%}.friend-status-list{-webkit-overflow-scrolling:touch;overflow-y:auto}}.playlist-details{background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000001a;padding:12px}.playlist-header{border-bottom:1px solid #e0e0e0;display:flex;gap:20px;margin-bottom:30px;padding-bottom:20px}.playlist-controls-row{align-items:center;display:flex;gap:16px;margin:14px 0 18px}.pd-play-btn{align-items:center;background:#1db954;border:none;border-radius:50%;box-shadow:0 8px 16px #1db95440;color:#fff;cursor:pointer;display:inline-flex;height:56px;justify-content:center;transition:transform .05s ease,filter .15s ease;width:56px}.pd-play-btn:hover{filter:brightness(1.05)}.pd-play-btn:active{transform:scale(.98)}.pd-icon-btn{align-items:center;background:#e5e7eb;border:none;border-radius:50%;color:#111;cursor:pointer;display:inline-flex;height:42px;justify-content:center;transition:background .15s ease,color .15s ease,transform .05s ease;width:42px}.pd-icon-btn:hover{background:#dcdfe3}.pd-icon-btn:active{transform:scale(.98)}.pd-icon-btn.active{background:#1db954;color:#fff}.pd-icon-img{display:block;height:22px;object-fit:contain;width:22px}.playlist-cover{align-items:center;background:#f0f0f0;border-radius:8px;display:flex;flex-shrink:0;height:200px;justify-content:center;overflow:hidden;position:relative;width:200px}.playlist-cover img{height:100%;object-fit:cover;width:100%}.playlist-cover-placeholder{color:#ccc;font-size:80px}.playlist-cover-actions{background:#ffffffe6;border-radius:8px;bottom:10px;box-shadow:0 2px 6px #00000026;display:flex;gap:8px;left:50%;padding:6px 12px;position:absolute;transform:translateX(-50%)}.playlist-cover-actions .cancel-btn,.playlist-cover-actions .edit-playlist-btn{font-size:12px;height:auto;padding:6px 10px}.playlist-info{display:flex;flex:1 1;flex-direction:column;gap:10px;min-height:200px}.playlist-name{color:#333;font-size:28px;font-weight:700;margin:0}.playlist-name-row{align-items:center;display:flex;gap:8px}.icon-btn{background:#0000;border:none;border-radius:6px;color:#4b5563;cursor:pointer;font-size:16px;line-height:1;padding:6px}.icon-btn:hover{background:#f3f4f6}.playlist-name-input{border:1px solid #ddd;border-radius:6px;font-size:28px;font-weight:700;max-width:400px;padding:8px 12px;width:100%}.playlist-name-edit{align-items:center;display:flex;gap:8px}.playlist-name-edit .cancel-btn-small{align-items:center;display:inline-flex;font-size:14px;height:46px;justify-content:center;padding:0 16px}.playlist-creator{color:#666;font-size:16px}.playlist-visibility-info{margin:10px 0;position:relative}.playlist-info-footer{align-self:flex-start;margin-top:auto}.visibility-edit.inline{animation:dropdownIn .16s ease-out;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px #0000001f;left:0;padding:6px;position:absolute;top:calc(100% + 6px);transform-origin:top left;z-index:20}.visibility-edit.inline .playlist-visibility-select{border:1px solid #93c5fd;border-radius:6px;outline:none;padding:8px 10px;width:220px}.visibility-edit.inline .playlist-visibility-select:focus{border-color:#addfff;box-shadow:0 0 0 3px #addfff80}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.visibility-badge{border-radius:12px;display:inline-block;font-size:13px;font-weight:500;margin-right:8px;padding:6px 12px}.visibility-badge.public{background:#c6f6d5;color:#22543d}.visibility-badge.friends{background:#bee3f8;color:#2c5282}.visibility-badge.private{background:#fed7d7;color:#742a2a}.playlist-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.playlist-actions.compact{gap:6px}.delete-playlist-btn,.edit-playlist-btn,.edit-visibility-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s}.edit-playlist-btn,.edit-visibility-btn{background:#addfff;color:#111}.edit-playlist-btn:hover,.edit-visibility-btn:hover{background:#addfff;filter:brightness(.98)}.delete-playlist-btn{background:#e74c3c;color:#fff}.delete-playlist-btn:hover{background:#c0392b}.visibility-edit{align-items:center;display:flex;gap:8px}.visibility-edit .playlist-visibility-select{background:#fff;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-size:14px;padding:6px 12px}.visibility-edit .playlist-visibility-select:focus{border-color:#667eea;outline:none}.cancel-btn-small{background:#f5f5f5;border:1px solid #ddd;border-radius:6px;color:#666;cursor:pointer;font-size:13px;padding:6px 12px;transition:all .2s}.cancel-btn-small:hover{background:#e0e0e0}.share-playlist{align-items:center;display:flex;gap:10px}.save-playlist-btn,.share-link-btn,.unsave-playlist-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s}.share-link-btn{background:#addfff;color:#111}.share-link-btn:hover{background:#addfff;filter:brightness(.98)}.save-playlist-btn{background:#addfff;color:#111}.save-playlist-btn:hover{background:#addfff;filter:brightness(.98)}.unsave-playlist-btn{background:#addfff;color:#111}.unsave-playlist-btn:hover{background:#addfff;filter:brightness(.98)}.save-cancel-buttons{display:flex;gap:10px}.playlist-tracks{margin-bottom:30px}.playlist-tracks h3{color:#333;font-size:20px;margin-bottom:15px}.track-list{display:flex;flex-direction:column;gap:8px}.playlist-track-item{align-items:center;background:#f9f9f9;border-radius:8px;cursor:pointer;display:flex;gap:15px;padding:12px;transition:all .2s}.playlist-track-item:hover{background:#f0f0f0;transform:translateX(4px)}.playlist-track-image{align-items:center;background:#e0e0e0;border-radius:6px;display:flex;flex-shrink:0;height:60px;justify-content:center;overflow:hidden;position:relative;width:60px}.playlist-track-image img{height:100%;object-fit:cover;width:100%}.placeholder-image-small{color:#999;font-size:30px}.play-overlay-small{align-items:center;background:#00000080;border-radius:6px;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s}.playlist-track-item:hover .play-overlay-small{opacity:1}.play-button-overlay-small{align-items:center;background:#ffffffe6;border:none;border-radius:50%;color:#333;cursor:pointer;display:flex;font-size:14px;height:40px;justify-content:center;transition:all .2s;width:40px}.play-button-overlay-small:hover{background:#fff;transform:scale(1.1)}.track-details{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.remove-track-btn{align-items:center;background:#e74c3c;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:18px;height:30px;justify-content:center;transition:background .2s;width:30px}.remove-track-btn:hover{background:#c0392b}.empty-playlist-tracks{color:#999;font-size:14px;font-style:italic;padding:30px;text-align:center}.playlist-comments{border-top:1px solid #e0e0e0;padding-top:20px}.playlist-comments h3{color:#333;font-size:18px;margin-bottom:15px}.comments-list{display:flex;flex-direction:column;gap:12px;margin-bottom:15px;max-height:400px;min-height:50px;overflow-y:auto}.comment-item{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;padding:12px;position:relative}.comment-header{align-items:center;display:flex;gap:10px;justify-content:space-between;margin-bottom:8px}.comment-header-right{align-items:center;display:flex;flex-shrink:0;gap:8px}.comment-author{color:#667eea;font-size:14px;font-weight:600}.comment-author.clickable{cursor:pointer;text-decoration:none;transition:color .2s,-webkit-text-decoration .2s;transition:color .2s,text-decoration .2s;transition:color .2s,text-decoration .2s,-webkit-text-decoration .2s}.comment-author.clickable:hover{color:#5568d3;text-decoration:underline}.comment-date{color:#999;cursor:help;font-size:12px}.comment-text{word-wrap:break-word;color:#333;font-size:14px;line-height:1.5;margin-bottom:8px}.delete-comment-btn{background:#f44;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;padding:4px 8px;transition:background .2s;white-space:nowrap}.delete-comment-btn:hover{background:#c00}.comment-placeholder{color:#999;font-size:14px;font-style:italic;padding:20px;text-align:center}.add-comment{align-items:center;display:flex;gap:10px}.comment-input{border:1px solid #ddd;border-radius:6px;flex:1 1;font-size:14px;outline:none;padding:10px;transition:border-color .2s}.comment-input:focus{border-color:#667eea}.comment-input:disabled{background:#f5f5f5;cursor:not-allowed}.submit-comment-btn{background:#addfff;border:none;border-radius:6px;color:#111;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:background .2s;white-space:nowrap}.submit-comment-btn:hover:not(:disabled){background:#addfff;filter:brightness(.98)}.submit-comment-btn:disabled{background:#ccc;cursor:not-allowed;opacity:.7}.danger-zone{border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;margin-top:24px;padding-top:16px}.delete-playlist-link{background:#0000;border:1px solid #ef4444;border-radius:8px;color:#b91c1c;cursor:pointer;padding:8px 12px}.delete-playlist-link:hover{background:#fee2e2}.pd-modal-overlay{align-items:center;background:#00000080;display:flex;inset:0;justify-content:center;position:fixed;z-index:1000}.pd-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-width:420px;padding:24px;width:90%}.pd-modal h3{margin:0 0 8px}.pd-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.pd-btn{border:none;border-radius:8px;cursor:pointer;padding:10px 16px}.pd-btn.cancel{background:#f3f4f6;color:#374151}.pd-btn.cancel:hover{background:#e5e7eb}.pd-btn.danger{background:#ef4444;color:#fff}.pd-btn.danger:hover{background:#dc2626}.track-card{background:#f9f9f9;border-radius:12px;cursor:pointer;overflow:hidden;position:relative;transition:transform .2s}.track-card:hover{transform:translateY(-5px)}.track-card:active{transform:translateY(-2px)}.track-image{background:var(--color-accent);overflow:hidden;padding-top:100%;position:relative;width:100%}.track-image img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.placeholder-image{font-size:48px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.play-overlay{background:#0009}.track-image:hover .play-overlay{opacity:1}.play-button-overlay{background:#000c;color:#fff;font-size:24px;height:60px;transition:transform .2s;width:60px}.spotify-link{background:#000c;border-radius:25px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px}.track-info{overflow:visible;padding:15px;position:relative}.track-info h4{color:#333;font-size:14px;margin:0 0 5px}.track-info h4,.track-info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-info p{color:#666;font-size:12px;margin:0}.tags-inline{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.tag-badge-inline{background:var(--color-badge);border-radius:6px;color:#fff;display:inline-block;font-size:10px;font-weight:500;padding:3px 8px;white-space:nowrap}.tags-dropdown-container{margin-top:5px;position:relative;z-index:10}.tags-trigger{align-items:center;background:var(--color-accent);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:10px;font-weight:500;gap:5px;justify-content:space-between;padding:4px 8px;transition:all .2s ease;width:100%}.tags-trigger:hover{box-shadow:0 2px 4px #0369a147;opacity:.9;transform:translateY(-1px)}.tags-arrow{font-size:8px;transition:transform .2s ease}.tags-dropdown{background:#fff;border:1px solid #e0e0e0;border-radius:8px;bottom:100%;box-shadow:0 -4px 12px #00000026;display:flex;flex-wrap:wrap;gap:4px;left:0;margin-bottom:4px;padding:6px;position:absolute;right:0;z-index:1000}.tag-badge-full{background:var(--color-badge);border-radius:5px;box-sizing:border-box;color:#fff;display:inline-block;flex-basis:calc(50% - 2px);flex-grow:0;flex-shrink:0;font-size:9px;font-weight:500;max-width:calc(50% - 2px);padding:2px 6px;white-space:nowrap}.add-to-playlist-btn{align-items:center;background:var(--color-primary);border:none;border-radius:50%;box-shadow:0 2px 6px #0003;color:#fff;cursor:pointer;display:flex;font-size:24px;font-weight:700;height:35px;justify-content:center;position:absolute;right:10px;top:10px;transition:all .2s;width:35px;z-index:10}.add-to-playlist-btn:hover{background:var(--blue-700);transform:scale(1.1)}.add-to-playlist-hint{background:#e8f5e9;border-radius:6px;color:#2e7d32;font-size:14px;margin-bottom:15px;padding:10px 15px}.search-results-section{background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000001a;padding:12px}.search-results-section h2{color:#333;margin-bottom:20px}.loading-state{color:#666;font-size:16px;padding:40px;text-align:center}.empty-state{color:#999;font-size:16px;padding:40px}.user-results-list{display:flex;flex-direction:column;gap:15px}.user-result-item{align-items:center;background:#f9f9f9;border-radius:8px;display:flex;gap:15px;padding:15px;transition:background .2s}.user-result-item:hover{background:#f0f0f0}.user-avatar{align-items:center;background:#e0e0e0;border-radius:50%;display:flex;flex-shrink:0;height:50px;justify-content:center;overflow:hidden;width:50px}.user-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder{font-size:24px}.user-info{display:flex;flex:1 1;flex-direction:column;gap:5px}.user-username{color:#333;font-size:16px;font-weight:600}.user-bio{color:#666;font-size:14px;margin:0}.request-friend-btn{background:#667eea;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s;white-space:nowrap}.request-friend-btn:hover:not(:disabled){background:#5568d3;transform:translateY(-1px)}.request-friend-btn:disabled{background:#ccc;cursor:not-allowed;opacity:.7}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.section-title{color:#222;font-size:1.4rem;font-weight:600;margin:0}.refresh-btn{align-items:center;background:#f5f5f5;border:none;border-radius:50%;color:#555;cursor:pointer;display:flex;height:34px;justify-content:center;transition:all .25s ease;width:34px}.refresh-btn:hover{background:#1db954;color:#fff;transform:rotate(15deg)}.refresh-btn.spinning i{animation:spin .8s linear infinite;color:#1db954}.results-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));width:100%}.results-grid .tag-badge-full,.results-grid .tag-badge-inline{background:#addfff;color:#0c4a6e}.home-container{background-color:#f5f5f5;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;width:100%}.home-content{align-items:stretch;box-sizing:border-box;padding:8px;width:100%}.home-content,.main-content{display:flex;flex:1 1;gap:12px}.main-content{flex-direction:column;min-width:0}.embedded-view{background:#0000;width:100%}.section{background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000001a;padding:12px}.section-title{background:#f0f0f0;border-radius:8px;color:#333;font-size:18px;margin-bottom:20px;padding:10px 15px}@media (max-width:768px){.home-content{padding:10px}}@media (max-width:1024px){.home-content{flex-direction:column}}.profile-container{background:var(--color-surface-accent);min-height:100vh;padding:20px;position:relative}.profile-embedded{background:#0000;height:100%;padding:0;width:100%}.profile-container:before{background:radial-gradient(circle at 20% 50%,#ffffff1a 0,#0000 50%),radial-gradient(circle at 80% 80%,#ffffff1a 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.profile-header{margin:0 auto 30px;max-width:1200px;position:relative;z-index:1}.back-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:none;border-radius:12px;box-shadow:0 2px 8px #0000001a;color:#667eea;cursor:pointer;font-size:14px;font-weight:600;padding:12px 24px;transition:all .3s ease}.back-button:hover{background:#fff;box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.profile-content{margin:0 auto;max-width:900px;position:relative;z-index:1}.profile-content-embedded{margin:0;position:relative;width:100%;z-index:1}.profile-card{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa;border:1px solid #fff3;border-radius:24px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;gap:40px;padding:50px}.profile-content-embedded .profile-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;border:none;border-radius:12px;box-shadow:0 2px 4px #0000001a;padding:30px}.avatar-section{align-items:center;display:flex;flex-direction:column;gap:20px}.avatar-display{position:relative}.avatar-image{border:6px solid #fff;border-radius:50%;box-shadow:0 8px 24px #6366f159;height:180px;object-fit:cover;transition:transform .3s ease;width:180px}.avatar-image:hover{transform:scale(1.05)}.avatar-edit{align-items:center;display:flex;flex-direction:column;gap:20px}.avatar-preview-container{border:6px solid #fff;border-radius:50%;box-shadow:0 8px 24px #6366f159;height:180px;overflow:hidden;width:180px}.avatar-preview{height:100%;object-fit:cover;width:100%}.avatar-upload-button{background:var(--color-primary);border:none;border-radius:12px;box-shadow:0 4px 12px #0369a147;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 28px;transition:all .3s ease}.avatar-upload-button:hover{background:var(--blue-700);box-shadow:0 6px 16px #0369a152;transform:translateY(-2px)}.profile-info{text-align:center;width:100%}.name-section{margin-bottom:24px}.display-name{color:var(--blue-800);font-size:36px;font-weight:700;margin:0 0 8px}.username-hint{color:#718096;font-size:16px;font-weight:500;margin:0}.stats{display:flex;gap:60px;justify-content:center;margin-bottom:40px}.stat{align-items:center;display:flex;flex-direction:column;gap:8px}.stat-number{color:var(--blue-800);font-size:32px;font-weight:700}.stat-label{color:#718096;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase}.profile-details{margin:0 auto;max-width:600px;text-align:left;width:100%}.detail-item{background:#f7fafc;border-left:4px solid var(--color-accent);border-radius:12px;margin-bottom:16px;padding:20px;transition:all .3s ease}.detail-item:hover{background:#edf2f7;transform:translateX(4px)}.detail-item-compact{align-items:center;background:#fff;border:1px solid #e2e8f0;border-left:4px solid var(--color-accent);border-radius:8px;box-shadow:0 1px 3px #0000000d;display:flex;justify-content:space-between;margin-bottom:10px;padding:14px 18px}.detail-item-compact:hover{background:#f7fafc;border-color:#cbd5e0;box-shadow:0 2px 6px #00000014;transform:translateX(2px)}.detail-item-compact .detail-label{color:#718096;flex-shrink:0;font-size:11px;font-weight:600;letter-spacing:.5px;margin-bottom:0;margin-right:20px}.detail-item-compact .detail-value{color:#2d3748;flex:1 1;font-size:15px;font-weight:500;text-align:right;word-break:break-word}.detail-item-bio{background:#f7fafc;border:2px solid #e2e8f0;border-left:4px solid var(--color-accent);border-radius:12px;margin-bottom:24px;margin-top:8px;min-height:140px;padding:24px}.detail-item-bio:hover{background:#edf2f7;border-color:#cbd5e0}.detail-item-bio .detail-label{color:#4a5568;font-size:13px;font-weight:700;margin-bottom:14px}.detail-item-bio .detail-value{word-wrap:break-word;color:#2d3748;font-size:15px;line-height:1.8;min-height:80px;padding:4px 0;white-space:pre-wrap}.detail-label{color:#4a5568;display:block;font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:8px;text-transform:uppercase}.detail-value{word-wrap:break-word;color:#2d3748;display:block;font-size:16px;line-height:1.6}.edit-button{background:var(--color-primary);border:none;border-radius:12px;box-shadow:0 4px 12px #0369a147;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:32px;padding:16px;transition:all .3s ease;width:100%}.edit-button:hover{background:var(--blue-700);box-shadow:0 6px 16px #0369a152;transform:translateY(-2px)}.edit-form{margin:0 auto;max-width:600px;text-align:left;width:100%}.form-group{margin-bottom:24px}.form-group label{color:#2d3748;display:block;font-size:14px;font-weight:600;margin-bottom:8px}.form-hint{color:#718096;display:block;font-size:12px;font-style:italic;margin-top:6px}.form-input,.form-textarea{background:#fff;border:2px solid #e2e8f0;border-radius:12px;font-family:inherit;font-size:15px;padding:14px;transition:all .3s ease;width:100%}.form-input:focus,.form-textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-focus-ring);outline:none}.form-textarea{line-height:1.6;min-height:120px;resize:vertical}.error-message{background:#fed7d7;border-left:4px solid #e53e3e;border-radius:12px;color:#e53e3e;margin-bottom:20px;padding:12px}.form-actions{display:flex;gap:16px;margin-top:32px}.cancel-button,.save-button{border:none;border-radius:12px;cursor:pointer;flex:1 1;font-size:16px;font-weight:600;padding:16px;transition:all .3s ease}.save-button{background:var(--color-primary);box-shadow:0 4px 12px #0369a147}.save-button:hover:not(:disabled){background:var(--blue-700);box-shadow:0 6px 16px #0369a152}.cancel-button{background:#e2e8f0;color:#4a5568}.cancel-button:hover{background:#cbd5e0}.profile-loading{align-items:center;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:60vh}.profile-embedded .profile-loading{color:#333;min-height:200px}.loading-spinner{border:4px solid #ffffff4d;border-top-color:#fff}.profile-embedded .loading-spinner{border:4px solid #667eea4d;border-top-color:#667eea}.profile-loading p{font-size:18px;font-weight:600;margin:0}.friend-action-section{display:flex;gap:12px;justify-content:center;margin-top:32px}.friend-button,.unfriend-button{border:none;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;max-width:300px;padding:16px;transition:all .3s ease;width:100%}.friend-button{background:var(--color-accent);box-shadow:0 4px 12px #0369a147;color:#fff}.friend-button:hover:not(:disabled){background:var(--blue-700);box-shadow:0 6px 16px #0369a152;transform:translateY(-2px)}.friend-button:disabled{background:#cbd5e0;box-shadow:none;color:#718096;cursor:not-allowed}.unfriend-button{background:#fed7d7;border:2px solid #fc8181;color:#c53030}.unfriend-button:hover{background:#feb2b2;box-shadow:0 4px 12px #c530304d;transform:translateY(-2px)}@media (max-width:768px){.profile-container{padding:12px}.profile-card{border-radius:20px;padding:30px 20px}.avatar-image,.avatar-preview-container{height:140px;width:140px}.display-name{font-size:28px}.stats{gap:40px}.stat-number{font-size:24px}.detail-item-compact,.form-actions{flex-direction:column}.detail-item-compact{align-items:flex-start;padding:10px 14px}.detail-item-compact .detail-label{margin-bottom:6px;margin-right:0}.detail-item-compact .detail-value{text-align:left;width:100%}.detail-item-bio{min-height:100px;padding:20px}}.profile-playlists-section-inline{border-top:1px solid #e2e8f0;margin-bottom:24px;margin-top:32px;padding-top:24px;width:100%}.profile-playlists-title-inline{color:#2d3748;font-size:20px;font-weight:700;margin-bottom:16px;text-align:left}.profile-playlists-grid-inline{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.profile-playlist-card-inline{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;overflow:hidden;transition:all .3s ease}.profile-playlist-card-inline:hover{border-color:#cbd5e0;box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.playlist-card-cover-inline{align-items:center;background:var(--color-accent);display:flex;height:120px;justify-content:center;overflow:hidden;width:100%}.playlist-card-cover-inline img{height:100%;object-fit:cover;width:100%}.playlist-card-placeholder-inline{color:#fffc;font-size:48px}.playlist-card-info-inline{padding:12px}.playlist-card-name-inline{color:#2d3748;font-size:14px;font-weight:600;margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-card-meta-inline{color:#718096;display:flex;flex-direction:column;font-size:11px;gap:3px}.playlist-card-visibility-inline{font-weight:500}.playlist-card-tracks-inline{color:#a0aec0}.profile-playlists-section{margin-top:40px;width:100%}.profile-section-title{color:#2d3748;font-size:28px;font-weight:700;margin-bottom:24px;text-align:center}.profile-playlists-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:20px}.profile-playlist-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 8px #0000001a;cursor:pointer;overflow:hidden;transition:all .3s ease}.profile-playlist-card:hover{box-shadow:0 8px 16px #00000026;transform:translateY(-4px)}.playlist-card-cover{align-items:center;background:var(--color-accent);display:flex;height:180px;justify-content:center;overflow:hidden;width:100%}.playlist-card-cover img{height:100%;object-fit:cover;width:100%}.playlist-card-placeholder{color:#fffc;font-size:64px}.playlist-card-info{padding:16px}.playlist-card-name{color:#2d3748;font-size:16px;font-weight:600;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-card-meta{color:#718096;display:flex;flex-direction:column;font-size:12px;gap:4px}.playlist-card-visibility{font-weight:500}.playlist-card-tracks{color:#a0aec0}.no-playlists-message,.playlists-loading{color:#718096;font-size:14px;padding:40px 20px;text-align:center}@media (max-width:768px){.profile-playlists-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.playlist-card-cover{height:150px}}@media (max-width:480px){.profile-card{padding:24px 16px}.display-name{font-size:24px}.stats{gap:30px}.profile-playlists-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.playlist-card-cover{height:120px}.playlist-card-info{padding:12px}.playlist-card-name{font-size:14px}}.friends-container{background:var(--color-surface-accent);min-height:100vh;padding:0}.friends-page-header{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:space-between;padding:16px 32px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.friends-page-header .header-left,.friends-page-header .header-right{align-items:center;display:flex;gap:16px}.friends-page-header .logo-image{cursor:pointer;height:40px;transition:transform .2s}.friends-page-header .logo-image:hover{transform:scale(1.05)}.friends-page-header .page-title{color:var(--blue-800);font-size:28px;font-weight:700;margin:0}.friends-page-header .header-tab{background:#0000;border:2px solid var(--color-accent);border-radius:20px;color:var(--color-accent);cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s ease}.friends-page-header .header-tab:hover{background:var(--color-accent);color:#fff;transform:translateY(-2px)}.friends-page-header .logout-button{border-color:#e74c3c;color:#e74c3c}.friends-page-header .logout-button:hover{background:#e74c3c;color:#fff}.friends-main-content{margin:0 auto;max-width:1200px;padding:40px 20px}.friends-search-section{margin-bottom:40px}.friends-search-form{background:#fff;border:2px solid #0000;border-radius:30px;box-shadow:0 8px 30px #0000001f;display:flex;gap:0;margin:0 auto 20px;max-width:700px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}.friends-search-form:focus-within{border-color:var(--color-focus-ring);box-shadow:0 12px 40px var(--color-focus-ring);transform:translateY(-2px)}.friends-search-input{background:#0000;border:none;color:#2d3748;flex:1 1;font-size:16px;outline:none;padding:18px 24px;transition:all .3s ease}.friends-search-input::placeholder{color:#a0aec0;font-weight:400}.friends-search-button{align-items:center;background:#addfff;border:none;color:#fdc1c5;cursor:pointer;display:flex;font-size:20px;justify-content:center;min-width:60px;padding:18px 28px;transition:all .3s cubic-bezier(.4,0,.2,1)}.friends-search-button:hover{background:#addfff;color:#fdc1c5;transform:scale(1.05)}.friends-search-button:active{transform:scale(.98)}.search-results-section{animation:fadeIn .4s ease;margin-top:40px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.search-results-title{color:#000;font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:24px;text-align:center;text-shadow:0 2px 10px #0003}.search-results-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0 auto;max-width:1000px}.user-search-card{align-items:center;background:#fff;border:2px solid #fffc;border-radius:20px;box-shadow:0 4px 20px #00000014;cursor:pointer;display:flex;gap:20px;overflow:hidden;padding:24px;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.user-search-card:before{background:var(--color-accent);content:"";height:4px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.user-search-card:hover{border-color:var(--color-focus-ring);box-shadow:0 12px 40px var(--color-focus-ring);transform:translateY(-6px) scale(1.02)}.user-search-card:hover:before{transform:scaleX(1)}.user-search-avatar{align-items:center;background:var(--color-accent);border-radius:50%;box-shadow:0 4px 16px #0369a147;display:flex;flex-shrink:0;height:72px;justify-content:center;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);width:72px}.user-search-card:hover .user-search-avatar{box-shadow:0 6px 24px #0369a152;transform:scale(1.1)}.user-search-avatar img{height:100%;object-fit:cover;width:100%}.user-search-avatar .avatar-placeholder{color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));font-size:36px}.user-search-info{flex:1 1;min-width:0}.user-search-username{color:#2d3748;font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px;transition:color .3s ease}.user-search-card:hover .user-search-username{color:var(--color-link)}.user-search-bio{color:#718096;font-size:14px;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease;white-space:nowrap}.user-search-card:hover .user-search-bio{color:#4a5568}.no-search-results{animation:fadeIn .4s ease;background:#ffffff26;border:1px solid #fff3;border-radius:16px;box-shadow:0 4px 20px #0000001a;color:#000;font-size:16px;margin:0 auto;max-width:500px;padding:32px 20px;text-align:center}.friends-content,.no-search-results{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.friends-content{background:#fffffff2;border-radius:24px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.friends-tabs-section{border-bottom:2px solid #e0e0e0}.friends-tabs{background:#f9f9f9;display:flex;overflow-x:auto;scrollbar-width:thin}.friends-tabs::-webkit-scrollbar{height:4px}.friends-tabs::-webkit-scrollbar-thumb{background:#667eea;border-radius:2px}.tab-btn{background:#0000;border:none;border-bottom:3px solid #0000;color:#666;cursor:pointer;flex:1 1;font-size:15px;font-weight:600;min-width:120px;padding:18px 24px;transition:all .3s ease;white-space:nowrap}.tab-btn:hover{background:#667eea1a;color:#667eea}.tab-btn.active{background:#fff;border-bottom-color:#667eea;color:#667eea}.friends-list-container{padding:30px}.empty-state{padding:60px 20px;text-align:center}.empty-icon{font-size:64px}.empty-state h3{color:#333;font-size:24px;font-weight:600;margin:0 0 12px}.empty-state p{color:#666;font-size:16px;margin:0}.friends-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.friend-card{background:#fff;border:2px solid #0000;border-radius:16px;box-shadow:0 2px 10px #00000014;display:flex;flex-direction:column;gap:16px;padding:20px;transition:all .3s ease}.friend-card:hover{border-color:var(--color-accent);box-shadow:0 8px 25px #0369a138;transform:translateY(-4px)}.friend-card-content{align-items:center;cursor:pointer;display:flex;flex:1 1;gap:16px}.friend-card-avatar{align-items:center;background:var(--color-accent);border-radius:50%;box-shadow:0 4px 12px #0369a138;display:flex;flex-shrink:0;height:70px;justify-content:center;overflow:hidden;width:70px}.friend-card-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder{color:#fff;font-size:32px}.friend-card-info{flex:1 1;min-width:0}.friend-card-username{color:#333;font-size:18px;font-weight:700;margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-card-bio{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#666;display:-webkit-box;font-size:14px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis}.friend-card-actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.friend-card-status{align-items:center;display:flex;justify-content:center}.action-btn{border:none;border-radius:20px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s ease;white-space:nowrap}.accept-btn{background:var(--color-primary);box-shadow:0 2px 8px #0369a138;color:#fff}.accept-btn:hover{background:var(--blue-700);box-shadow:0 4px 12px #0369a14d;transform:translateY(-2px)}.decline-btn{background:#f0f0f0;border:2px solid #e0e0e0;color:#666}.decline-btn:hover{background:#e0e0e0;transform:translateY(-2px)}.unfriend-btn{background:#fee;border:2px solid #fcc;color:#c53030}.unfriend-btn:hover{background:#fcc;transform:translateY(-2px)}.resend-btn{background:var(--color-accent);box-shadow:0 2px 8px #0369a138;color:#fff}.resend-btn:hover{background:var(--blue-700);box-shadow:0 4px 12px #0369a14d;transform:translateY(-2px)}.dismiss-btn{align-items:center;background:#f0f0f0;border:2px solid #e0e0e0;border-radius:50%;color:#666;display:flex;font-size:18px;height:36px;justify-content:center;padding:8px 12px;width:36px}.dismiss-btn:hover{background:#e0e0e0;transform:scale(1.1)}.status-badge{border-radius:20px;font-size:13px;font-weight:600;padding:8px 16px;white-space:nowrap}.status-badge.pending{background:#fff3cd;color:#856404}.status-badge.declined{background:#f8d7da;color:#721c24}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{animation:modalSlideIn .3s ease;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:450px;padding:40px;width:90%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-content h3{color:#333;font-size:24px;font-weight:700;margin:0 0 16px}.modal-content p{color:#666;font-size:15px;line-height:1.6;margin:0 0 30px}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.modal-btn{border:none;border-radius:12px;cursor:pointer;font-size:15px;font-weight:600;padding:12px 24px;transition:all .3s ease}.cancel-btn{background:#f0f0f0;color:#333}.cancel-btn:hover{background:#e0e0e0;transform:translateY(-2px)}.confirm-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 4px 12px #e74c3c4d;color:#fff}.confirm-btn:hover{box-shadow:0 6px 16px #e74c3c66;transform:translateY(-2px)}.loading{color:#fff;font-size:18px;padding:60px 20px;text-align:center}@media (max-width:768px){.friends-page-header{flex-wrap:wrap;padding:12px 16px}.friends-page-header .page-title{font-size:20px}.friends-page-header .header-tab{font-size:12px;padding:8px 16px}.friends-main-content{padding:20px 16px}.friends-search-form{flex-direction:column}.friends-search-button{width:100%}.friends-grid{gap:16px;grid-template-columns:1fr}.friends-tabs{overflow-x:auto}.tab-btn{font-size:13px;min-width:100px;padding:14px 16px}.friends-list-container{padding:20px}.friend-card{padding:16px}.friend-card-avatar{height:60px;width:60px}.friend-card-username{font-size:16px}.modal-content{padding:30px 20px}}.liked-songs-container{background-color:#f5f5f5;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;width:100%}.liked-songs-header{align-items:center;background:#fff;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;padding:15px 30px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-left{align-items:center;display:flex;gap:20px}.logo-image{height:60px;object-fit:contain;transition:transform .2s,opacity .2s;width:auto}.logo-image:hover{opacity:.9;transform:scale(1.05)}.header-center{flex:1 1;text-align:center}.page-title{color:#667eea;font-size:24px;font-weight:700;margin:0}.header-right{align-items:center;display:flex;gap:10px}.header-tab{background:#0000;border:2px solid #e0e0e0;border-radius:20px;color:#333;cursor:pointer;font-size:14px;padding:8px 20px;transition:all .3s}.header-tab:hover{background:#f0f0f0;border-color:#667eea}.header-tab.active{background:#667eea;border-color:#667eea;color:#fff}.logout-button{border-color:#e74c3c;color:#e74c3c}.logout-button:hover{background:#e74c3c;color:#fff}.liked-songs-content{flex:1 1;margin:0 auto;max-width:1400px;padding:30px;width:100%}.empty-state,.error-state,.loading-state{align-items:center;color:#666;display:flex;flex-direction:column;justify-content:center;min-height:400px;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #667eea4d;border-radius:50%;border-top-color:#667eea;height:50px;margin-bottom:20px;width:50px}@keyframes spin{to{transform:rotate(1turn)}}.error-state p{font-size:18px;margin-bottom:20px}.retry-button{background:#667eea;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;padding:10px 20px;transition:all .3s}.retry-button:hover{background:#5568d3}.empty-state{color:#666}.empty-icon{font-size:80px;margin-bottom:20px}.empty-state h2{font-size:32px;margin-bottom:10px}.empty-state p{font-size:18px;margin-bottom:30px;opacity:.9}.browse-button{background:#667eea;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;padding:10px 20px;transition:all .3s}.browse-button:hover{background:#5568d3}.liked-songs-header-info{color:#333;margin-bottom:20px;text-align:center}.liked-songs-header-info h2{color:#333;font-size:24px;font-weight:600;margin-bottom:8px}.subtitle{color:#666;font-size:14px}.liked-tracks-list{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;gap:8px;padding:20px}.liked-track-item{align-items:center;background:#f9f9f9;border-radius:8px;cursor:pointer;display:flex;gap:15px;padding:12px;transition:all .2s}.liked-track-item:hover{background:#f0f0f0;transform:translateX(4px)}.track-number{color:#666;flex-shrink:0;font-size:16px;font-weight:500;text-align:center;width:30px}.track-image-container{align-items:center;background:#e0e0e0;border-radius:6px;display:flex;flex-shrink:0;height:60px;justify-content:center;overflow:hidden;position:relative;width:60px}.track-image-container img{height:100%;object-fit:cover;width:100%}.placeholder-image{color:#999;font-size:30px}.play-overlay{align-items:center;background:#00000080;border-radius:6px;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s}.liked-track-item:hover .play-overlay{opacity:1}.play-button-overlay{align-items:center;background:#ffffffe6;border:none;border-radius:50%;color:#333;cursor:pointer;display:flex;font-size:14px;height:40px;justify-content:center;transition:all .2s;width:40px}.play-button-overlay:hover{background:#fff;transform:scale(1.1)}.track-info{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.track-info .track-name{color:#333;font-size:15px;font-weight:500}.track-info .track-artist,.track-info .track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-info .track-artist{color:#666;font-size:14px}.track-actions{align-items:center;display:flex;flex-shrink:0;gap:10px}.spotify-link-button,.unlike-button{align-items:center;background:#0000;border:2px solid #ddd;border-radius:50%;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;transition:all .2s;width:40px}.unlike-button{border-color:#e74c3c;color:#e74c3c}.unlike-button:hover{background:#e74c3c;color:#fff;transform:scale(1.1)}.spotify-link-button{border-color:#1db954;color:#1db954}.spotify-link-button:hover{background:#1db954;color:#fff;transform:scale(1.1)}@media (max-width:768px){.liked-songs-header{flex-wrap:wrap;padding:15px 20px}.page-title{font-size:20px}.header-right{gap:8px}.header-tab{font-size:12px;padding:8px 12px}.liked-songs-content{padding:20px}.liked-tracks-list{padding:15px}.liked-track-item{gap:12px;padding:12px}.track-image-container{height:60px;width:60px}.track-number{font-size:14px;width:25px}}.preference-container{align-items:center;display:flex;justify-content:center;margin:0 auto;max-width:1200px;min-height:100vh;padding:20px;width:100%}.preference-box{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;display:flex;max-width:1000px;overflow:hidden;width:100%}.preference-left{align-items:center;background:var(--blue-500);display:flex;flex:1 1;justify-content:center;min-height:500px;padding:40px}.preference-image-placeholder{color:#fff;text-align:center}.music-icon{font-size:80px;margin-bottom:20px}.preference-image-placeholder p{font-size:18px;margin-bottom:10px}.small-text{font-size:14px;opacity:.8}.preference-right{display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:50px 40px}.preference-right h2{color:#333;font-size:32px;margin-bottom:10px;text-align:center}.preference-subtitle{color:#666;font-size:14px;margin-bottom:30px;text-align:center}.preference-form{width:100%}.tags-container{gap:25px;margin-bottom:30px;max-height:500px;overflow-y:auto;padding:5px}.category-section,.tags-container{display:flex;flex-direction:column}.category-section{gap:12px}.category-title{color:#333;font-size:18px;font-weight:600;margin:0;text-transform:capitalize}.category-description{color:#666;font-size:13px;font-style:italic;margin:-8px 0 0}.category-tags{display:flex;flex-wrap:wrap;gap:12px}.tag-button{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:25px;color:#333;cursor:pointer;display:flex;font-size:16px;font-weight:500;gap:8px;padding:12px 24px;transition:all .3s}.tag-button:hover{background:#f8f9ff;border-color:var(--blue-500);transform:translateY(-2px)}.tag-button.selected{background:var(--blue-500);border-color:var(--blue-500);color:#fff}.checkmark{font-size:18px;font-weight:700}.error-message{background:#ffeaea;border-radius:8px;color:#e74c3c;font-size:14px;margin-bottom:15px;padding:10px;text-align:center}.preference-actions{display:flex;gap:15px;margin-bottom:15px}.save-button,.skip-button{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-size:16px;font-weight:600;padding:14px;transition:transform .2s,box-shadow .2s}.save-button{background:var(--blue-500);color:#fff}.save-button:hover:not(:disabled){background:var(--blue-600);box-shadow:0 4px 12px #6366f159;transform:translateY(-2px)}.save-button:disabled{cursor:not-allowed;opacity:.6}.skip-button{background:#f5f5f5;border:2px solid #e0e0e0;color:#666}.skip-button:hover:not(:disabled){background:#e8e8e8;border-color:#d0d0d0}.skip-button:disabled{cursor:not-allowed;opacity:.6}.preference-note{color:#999;font-size:12px;margin-top:10px;text-align:center}.loading-spinner{color:var(--blue-600);font-size:18px;padding:40px;text-align:center}@media (max-width:768px){.preference-box{flex-direction:column}.preference-left{min-height:200px}.preference-right{padding:30px 20px}.tags-container{max-height:300px}}.not-found-container{background-color:#f5f5f5;min-height:100vh;padding:20px}.not-found-container,.not-found-content{align-items:center;display:flex;justify-content:center}.not-found-content{flex-direction:column;max-width:600px;text-align:center}.not-found-status{color:#667eea;font-size:72px;font-weight:700;line-height:1;margin:20px 0}.not-found-image{height:auto;margin-bottom:20px;max-height:400px;max-width:100%;object-fit:contain}.not-found-message{color:#333;font-size:24px;font-weight:500;margin:20px 0}.not-found-button{background-color:#667eea;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:30px;padding:12px 24px;transition:background-color .2s,transform .2s}.not-found-button:hover{background-color:#5568d3;transform:translateY(-2px)}.not-found-button:active{transform:translateY(0)}.App{min-height:100vh;width:100%}
/*# sourceMappingURL=main.4bddfe6c.css.map*/