:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{margin:0;padding:0;width:100%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.auth-container{min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:#2a2a2a;padding:2rem}.auth-card{padding:0;width:100%;max-width:450px}.auth-logo{display:flex;justify-content:center;margin-bottom:2rem}.auth-logo img{max-width:350px;height:auto}.auth-title{text-align:center;color:#fff;font-size:2rem;margin-bottom:2rem;font-weight:600}.auth-form{display:flex;flex-direction:column;gap:1.5rem}.form-group input{padding:.875rem 1rem;border-radius:8px;border:1px solid #555;background-color:#2a2a2a;color:#fff;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus{outline:none;border-color:#a855f7;box-shadow:0 0 0 3px #a855f71a}.form-group input::placeholder{color:#888}.error-message{background-color:#ef44441a;border:1px solid #ef4444;color:#fca5a5;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;text-align:center}.auth-button{padding:1rem;border-radius:8px;border:none;background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:.5rem}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #a855f766}.auth-button:active:not(:disabled){transform:translateY(0)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-toggle{margin-top:1.5rem;text-align:center}.auth-toggle p{color:#b0b0b0;font-size:.95rem;margin:0}.toggle-button{background:none;border:none;color:#a855f7;font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:underline;padding:0;transition:opacity .2s}.toggle-button:hover{opacity:.8}@media(max-width:768px){.auth-card{padding:2rem 1.5rem}.auth-title{font-size:1.75rem}.auth-logo img{max-width:250px}}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid #555}.header-left{display:flex;align-items:center}.header-logo{height:80px;cursor:pointer;transition:transform .2s}.header-logo:hover{transform:scale(1.05)}.header-center{flex:1;display:flex;justify-content:center;padding:0 2rem}.header-right{display:flex;align-items:center}.search-bar{position:relative;width:100%;max-width:350px}.search-input{width:100%;padding:.75rem 3rem .75rem 1rem;border-radius:8px;border:1px solid #555;background-color:#3a3a3a;color:#fff;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.search-input:focus{outline:none;border-color:#a855f7;box-shadow:0 0 0 3px #a855f71a}.search-input::placeholder{color:#888}.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#888;pointer-events:none}.search-suggestions{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:#3a3a3a;border:1px solid #555;border-radius:8px;box-shadow:0 8px 24px #00000080;z-index:100;overflow:hidden}.suggestion-item{display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;cursor:pointer;transition:background-color .2s}.suggestion-item:hover{background-color:#444}.suggestion-item:not(:last-child){border-bottom:1px solid #555}.suggestion-image{width:50px;height:50px;border-radius:4px;background-color:#2a2a2a;background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#666}.suggestion-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.suggestion-name{font-size:.95rem;font-weight:600;color:#fff;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.suggestion-owner{font-size:.85rem;color:#aaa;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-bar{display:flex;align-items:center;gap:.75rem}.nav-link{color:#fff;text-decoration:none;font-size:.95rem;font-weight:400;transition:opacity .2s;padding:.5rem .75rem;border-radius:4px;display:inline-block;min-height:44px;display:flex;align-items:center;-webkit-tap-highlight-color:transparent}.nav-link:hover{opacity:.7}.nav-link.active{color:#a855f7;font-weight:600}.nav-divider{color:#888;font-weight:300;-webkit-user-select:none;user-select:none}.nav-username{color:#fff;font-size:.95rem;font-weight:500}.avatar-dropdown-container{position:relative}.header-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#3b82f6);cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;border:2px solid transparent;-webkit-tap-highlight-color:transparent;min-height:44px;min-width:44px}.header-avatar:hover{transform:scale(1.05);border-color:#a855f7;box-shadow:0 0 0 3px #a855f733}.avatar-placeholder{color:#fff;font-weight:700;font-size:1.1rem}.avatar-dropdown{position:absolute;top:calc(100% + .75rem);right:0;background-color:#2a2a2a;border:1px solid #4a4a4a;border-radius:8px;box-shadow:0 8px 24px #00000080;z-index:100;min-width:180px;overflow:hidden}.dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1rem;background:transparent;border:none;color:#ccc;font-size:.95rem;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s;text-align:left;font-family:inherit}.dropdown-item:hover{background-color:#3a3a3a;color:#fff}.dropdown-item.logout:hover{background-color:#dc2626;color:#fff}.dropdown-item:not(:last-child){border-bottom:1px solid #4a4a4a}.dropdown-item svg{flex-shrink:0}@media(max-width:1024px){.header-logo{height:60px}.nav-bar{gap:.5rem}.nav-link{font-size:.85rem}}@media(max-width:768px){.header{flex-direction:column;gap:1.5rem}.header-logo{height:50px}.header-center{width:100%;padding:0}.search-bar{max-width:100%}.header-right{width:100%;justify-content:center}.nav-bar{flex-wrap:wrap;justify-content:center}.header-avatar{width:35px;height:35px}.avatar-placeholder{font-size:1rem}}.layout-container{min-height:100vh;background-color:#2a2a2a;padding:2rem;color:#fff}.home-section{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem}.playlists-container{display:flex;gap:2rem;flex-wrap:wrap}.loading-text{color:#888;font-size:1.1rem;margin:2rem 0}.playlist-image-container{position:relative;width:200px;height:200px}.like-btn{position:absolute;bottom:10px;right:10px;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:#000000b3;border:none;border-radius:20px;color:#fff;cursor:pointer;opacity:0;transition:opacity .2s,background-color .2s,transform .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.playlist-card:hover .like-btn{opacity:1}.like-btn:hover{background-color:#000000e6;transform:scale(1.05)}.like-btn.liked{opacity:1;color:#ef4444}.like-btn svg{flex-shrink:0}.likes-count{font-size:.875rem;font-weight:600}.empty-message{color:#888;font-size:1rem;margin:1rem 0}.users-container{display:flex;gap:1.5rem;flex-wrap:wrap}.user-card{display:flex;flex-direction:column;gap:.75rem;cursor:pointer;align-items:center;text-align:center;padding:1rem;border-radius:12px;background-color:#2a2a2a;border:1px solid #3a3a3a;transition:all .2s;min-width:150px}.user-card:hover{background-color:#3a3a3a;transform:translateY(-2px)}.user-avatar{width:80px;height:80px;border-radius:50%;background-size:cover;background-position:center;background-color:#3a3a3a;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-card:hover .user-avatar{transform:scale(1.05)}.default-avatar{background:linear-gradient(135deg,#a855f7,#3b82f6)}.avatar-initial{font-size:2rem;color:#fff;font-weight:700}.user-name{font-size:1rem;margin:0;color:#fff;font-weight:600}.user-playlist-count{font-size:.85rem;margin:0;color:#aaa}@media(max-width:768px){.header{flex-direction:column;gap:1.5rem}.header-center{width:100%;padding:0}.search-bar{max-width:100%}.header-right{width:100%;justify-content:center}.playlists-container{justify-content:center}.playlist-image{width:150px;height:150px}.users-container{justify-content:center}.user-card{min-width:120px}.user-avatar{width:60px;height:60px}.avatar-initial{font-size:1.5rem}}.modal-overlay{position:fixed;inset:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000;padding:2rem}.modal-content{background-color:#3a3a3a;border-radius:12px;padding:2rem;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h2{color:#fff;font-size:1.75rem;margin:0;font-weight:600}.close-btn{background:none;border:none;color:#aaa;cursor:pointer;padding:.25rem;display:flex;align-items:center;transition:color .2s}.close-btn:hover{color:#fff}.song-form{display:flex;flex-direction:column;gap:1.5rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-group label{color:#e0e0e0;font-size:.95rem;font-weight:500}.form-input{padding:.875rem 1rem;border-radius:8px;border:1px solid #555;background-color:#2a2a2a;color:#fff;font-size:1rem;transition:border-color .2s,box-shadow .2s}.modal-actions{display:flex;gap:1rem;margin-top:.5rem}.cancel-btn,.add-btn{flex:1;padding:1rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;border:none}.add-btn{background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff}.add-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #a855f766}.cancel-btn:disabled,.add-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.modal-overlay{padding:1rem}.modal-content{padding:1.5rem}.modal-header h2{font-size:1.5rem}.form-row{grid-template-columns:1fr}}.playlist-content{display:flex;flex-direction:column;gap:2rem}.playlist-header{display:flex;gap:2rem;align-items:flex-end;margin-bottom:1rem}.playlist-cover-large{flex-shrink:0}.cover-image{width:250px;height:250px;border-radius:8px;background-size:cover;background-position:center;background-color:#3a3a3a;box-shadow:0 8px 24px #00000080}.playlist-info{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.playlist-label{font-size:.85rem;color:#aaa;margin:0;text-transform:uppercase;letter-spacing:1px}.playlist-title{font-size:3rem;margin:0;font-weight:700;color:#fff;line-height:1.1}.playlist-description{font-size:1rem;color:#ccc;margin:.5rem 0}.playlist-meta{font-size:.95rem;color:#aaa;margin:.5rem 0 0;display:flex;align-items:center;gap:.5rem}.playlist-owner-link{color:#fff;font-weight:600;transition:color .2s}.playlist-owner-link:hover{color:#a855f7;text-decoration:underline}.like-heart-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;margin-left:.5rem;border-radius:12px;border:none;background-color:transparent;color:#aaa;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;vertical-align:middle}.like-heart-btn:hover{background-color:#a855f726;color:#fff;transform:scale(1.05)}.like-heart-btn.liked{color:#ef4444}.like-heart-btn.liked:hover{background-color:#ef444426;color:#f55}.like-heart-btn svg{flex-shrink:0;transition:transform .2s}.like-heart-btn:hover svg{transform:scale(1.1)}.songs-section{margin-top:2rem}.songs-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.songs-title{font-size:1.5rem;margin:0;color:#fff;font-weight:600}.add-song-header-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;border:1px solid #555;background-color:transparent;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s}.add-song-header-btn:hover{background-color:#3a3a3a;border-color:#a855f7}.add-song-header-btn svg{width:18px;height:18px}.songs-header{display:grid;grid-template-columns:50px 2fr 1.5fr 1.5fr 100px 120px;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid #555;color:#aaa;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.songs-list{display:flex;flex-direction:column}.song-row{display:grid;grid-template-columns:50px 2fr 1.5fr 1.5fr 100px 120px 50px;gap:1rem;padding:1rem;border-radius:4px;transition:background-color .2s,opacity .2s;align-items:center;position:relative}.song-row[draggable=true]{cursor:grab}.song-row[draggable=true]:active{cursor:grabbing}.song-row:hover{background-color:#3a3a3a}.song-row.dragging{opacity:.5}.drop-indicator{position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#a855f7,#3b82f6);z-index:10;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.6}to{opacity:1}}.song-number{color:#aaa;text-align:center;position:relative}.drag-handle{display:flex;align-items:center;justify-content:center;gap:.25rem;position:relative}.drag-handle svg{opacity:0;transition:opacity .2s;color:#888;position:absolute;left:50%;transform:translate(-50%)}.song-row[draggable=true]:hover .drag-handle svg{opacity:1}.song-row[draggable=true]:hover .drag-handle .song-number-text{opacity:0}.song-number-text{transition:opacity .2s}.song-title{color:#fff;font-weight:500}.song-artist{color:#ccc}.song-album{color:#aaa}.song-duration{color:#aaa;text-align:right}.song-link{display:flex;justify-content:center}.song-url-link{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:6px;background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;transition:transform .2s,box-shadow .2s}.song-url-link:hover{transform:translateY(-1px);box-shadow:0 2px 8px #a855f766}.song-url-link svg{width:16px;height:16px}.no-link{color:#666;text-align:center}.song-actions{display:flex;justify-content:center;align-items:center}.song-actions-header{width:50px}.song-menu-container{position:relative}.song-menu-btn{background:transparent;border:none;color:#aaa;cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s}.song-menu-btn:hover{background-color:#4a4a4a;color:#fff}.song-menu-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:#2a2a2a;border:1px solid #4a4a4a;border-radius:8px;box-shadow:0 4px 12px #00000080;z-index:100;min-width:150px;overflow:hidden}.song-menu-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:transparent;border:none;color:#ccc;font-size:.9rem;cursor:pointer;transition:background-color .2s,color .2s;text-align:left}.song-menu-item:hover{background-color:#3a3a3a;color:#fff}.song-menu-item.delete:hover{background-color:#dc2626;color:#fff}.song-menu-item svg{flex-shrink:0}.no-songs{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:1.5rem}.no-songs p{color:#888;font-size:1.1rem;margin:0}.add-song-btn{padding:.875rem 2rem;border-radius:8px;border:none;background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.add-song-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #a855f766}.loading-text,.error-text{color:#888;font-size:1.1rem;margin:2rem 0;text-align:center}.error-text{color:#ef4444}@media(max-width:1024px){.song-row{grid-template-columns:40px 2fr 1.5fr 80px 100px 50px}.song-album-header,.song-album{display:none}}@media(max-width:768px){.playlist-header{flex-direction:column;align-items:center;text-align:center}.cover-image{width:200px;height:200px}.playlist-title{font-size:2rem}.song-row{grid-template-columns:30px 1fr 70px 80px 40px;gap:.5rem}.song-artist-header,.song-artist,.song-album-header,.song-album{display:none}.song-menu-btn{padding:.3rem}.song-menu-dropdown{right:-10px}.song-url-link{padding:.4rem .6rem;font-size:.75rem}.song-url-link svg{width:14px;height:14px}}.create-playlist-content{max-width:1200px;margin:0 auto}.playlist-form{width:100%}.cover-section{display:flex;flex-direction:column;gap:1.5rem}.cover-preview{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background-color:#2a2a2a;display:flex;align-items:center;justify-content:center}.cover-image-preview{width:100%;height:100%;background-size:cover;background-position:center}.cover-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#666}.cover-placeholder svg{opacity:.5}.cover-placeholder p{margin:0;font-size:.9rem}.cover-buttons{display:flex;gap:1rem}.form-fields{display:flex;flex-direction:column;gap:1.5rem}.form-input,.form-textarea{padding:.875rem 1rem;border-radius:8px;border:1px solid #555;background-color:#2a2a2a;color:#fff;font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}.form-input:focus,.form-textarea:focus{outline:none;border-color:#a855f7;box-shadow:0 0 0 3px #a855f71a}.form-input::placeholder,.form-textarea::placeholder{color:#666}.form-textarea{resize:vertical;min-height:120px}.cancel-btn,.create-btn{flex:1;padding:1rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;border:none}.create-btn{background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff}.create-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #a855f766}.cancel-btn:disabled,.create-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.form-layout{grid-template-columns:1fr;padding:2rem 1.5rem}.cover-section{max-width:300px;margin:0 auto}.page-title{font-size:2rem}}.settings-content{max-width:1200px;margin:0 auto}.page-title{font-size:2.5rem;margin:0 0 2rem;font-weight:700;color:#fff}.settings-form{width:100%}.form-layout{display:grid;grid-template-columns:350px 1fr;gap:3rem;background-color:#3a3a3a;padding:3rem;border-radius:12px}.avatar-section{display:flex;flex-direction:column;gap:1.5rem}.avatar-preview{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background-color:#2a2a2a;display:flex;align-items:center;justify-content:center}.avatar-image-preview{width:100%;height:100%;background-size:cover;background-position:center}.avatar-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#666}.avatar-placeholder svg{opacity:.5}.avatar-placeholder p{margin:0;font-size:.9rem}.avatar-buttons{display:flex;gap:1rem}.upload-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;border-radius:8px;background-color:#2a2a2a;color:#fff;font-size:.95rem;font-weight:500;cursor:pointer;transition:background-color .2s;border:1px solid #555}.upload-btn:hover{background-color:#444}.remove-btn{padding:.875rem 1.5rem;border-radius:8px;background-color:#ef4444;color:#fff;font-size:.95rem;font-weight:500;border:none;cursor:pointer;transition:background-color .2s}.remove-btn:hover{background-color:#dc2626}.url-option{display:flex;flex-direction:column;gap:.5rem}.url-option label{font-size:.9rem;color:#ccc}.url-input{padding:.75rem;border-radius:8px;border:1px solid #555;background-color:#2a2a2a;color:#fff;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.url-input:focus{outline:none;border-color:#a855f7;box-shadow:0 0 0 3px #a855f71a}.url-input::placeholder{color:#666}.form-fields{display:flex;flex-direction:column;gap:2rem}.settings-section{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:2rem;border-bottom:1px solid #555}.settings-section:last-of-type{border-bottom:none}.section-title{font-size:1.5rem;margin:0;color:#fff;font-weight:600}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.95rem;font-weight:500;color:#e0e0e0}.form-input{padding:.875rem 1rem;border-radius:8px;border:1px solid #555;background-color:#2a2a2a;color:#fff;font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}.form-input:focus{outline:none;border-color:#a855f7;box-shadow:0 0 0 3px #a855f71a}.form-input::placeholder{color:#666}.form-input.disabled{background-color:#1a1a1a;color:#666;cursor:not-allowed}.field-hint{font-size:.85rem;color:#888;margin:0;margin-top:-.25rem}.error-message{background-color:#ef44441a;border:1px solid #ef4444;color:#fca5a5;padding:.75rem 1rem;border-radius:8px;font-size:.9rem}.success-message{background-color:#22c55e1a;border:1px solid #22c55e;color:#86efac;padding:.75rem 1rem;border-radius:8px;font-size:.9rem}.form-actions{display:flex;gap:1rem;margin-top:1rem}.cancel-btn,.save-btn{flex:1;padding:1rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;border:none}.cancel-btn{background-color:#555;color:#fff}.cancel-btn:hover:not(:disabled){background-color:#666}.save-btn{background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff}.save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #a855f766}.cancel-btn:disabled,.save-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.form-layout{grid-template-columns:1fr;padding:2rem 1.5rem}.avatar-section{max-width:300px;margin:0 auto}.page-title{font-size:2rem}}.profile-content{display:flex;flex-direction:column;gap:3rem}.profile-header{display:flex;gap:2rem;align-items:flex-end;padding-bottom:2rem}.profile-avatar-large{width:250px;height:250px;border-radius:50%;background-color:#3a3a3a;overflow:hidden;flex-shrink:0;box-shadow:0 8px 24px #00000080}.avatar-image{width:100%;height:100%;background-size:cover;background-position:center}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666}.profile-info{display:flex;flex-direction:column;gap:.75rem;padding-bottom:1rem}.profile-label{font-size:.85rem;color:#aaa;margin:0;text-transform:uppercase;letter-spacing:1px;font-weight:600}.profile-username{font-size:4rem;margin:0;font-weight:700;color:#fff;line-height:1}.profile-email{font-size:1rem;color:#ccc;margin:0}.profile-stats{display:flex;gap:2rem;margin-top:.5rem}.stat-item{font-size:.95rem;color:#fff;font-weight:500}.user-playlists-section{display:flex;flex-direction:column;gap:1.5rem}.section-title{font-size:1.75rem;margin:0;font-weight:700;color:#fff}.playlists-grid{display:flex;gap:2rem;flex-wrap:wrap}.new-playlist-icon{background-color:#3a3a3a}.plus-icon{font-size:4rem;color:#fff;font-weight:300}.playlist-name{font-size:1rem;margin:0;color:#fff;text-align:center}.playlist-owner-text{font-size:.85rem;margin:0;color:#aaa;text-align:center}.no-playlists{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:1.5rem;background-color:#3a3a3a;border-radius:12px}.no-playlists p{color:#888;font-size:1.1rem;margin:0}.create-first-btn{padding:.875rem 2rem;border-radius:8px;border:none;background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.create-first-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #a855f766}@media(max-width:768px){.profile-header{flex-direction:column;align-items:center;text-align:center}.profile-avatar-large{width:200px;height:200px}.profile-username{font-size:2.5rem}.profile-stats,.playlists-grid{justify-content:center}.playlist-image{width:150px;height:150px}}.users-content{display:flex;flex-direction:column;gap:2rem}.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.user-card{background-color:#3a3a3a;padding:1.5rem;border-radius:12px;cursor:pointer;transition:background-color .2s,transform .2s;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.user-card:hover{background-color:#444;transform:translateY(-4px)}.user-avatar{width:120px;height:120px;border-radius:50%;background-color:#2a2a2a;display:flex;align-items:center;justify-content:center;color:#666;overflow:hidden}.user-info{display:flex;flex-direction:column;gap:.25rem;width:100%}.user-name{font-size:1.25rem;font-weight:600;color:#fff;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-stats{font-size:.9rem;color:#aaa;margin:0}.no-users{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:1.5rem;background-color:#3a3a3a;border-radius:12px}.no-users p{color:#888;font-size:1.1rem;margin:0}@media(max-width:768px){.users-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.user-avatar{width:100px;height:100px}.page-title{font-size:2rem}}.search-results-content{display:flex;flex-direction:column;gap:2rem}.page-title{font-size:2.5rem;margin:0;font-weight:700;color:#fff}.loading-text{color:#888;font-size:1.1rem;margin:2rem 0;text-align:center}.results-grid{display:flex;gap:2rem;flex-wrap:wrap}.playlist-card{display:flex;flex-direction:column;gap:.75rem;cursor:pointer}.playlist-card:hover .playlist-image{transform:scale(1.02)}.playlist-image{width:200px;height:200px;border-radius:8px;background-size:cover;background-position:center;background-color:#3a3a3a;display:flex;align-items:center;justify-content:center;transition:transform .2s}.gradient-bg{background:linear-gradient(135deg,#a855f7,#3b82f6)}.playlist-info{display:flex;flex-direction:column;gap:.25rem}.playlist-name{font-size:1rem;margin:0;color:#fff;text-align:center;font-weight:600}.playlist-owner{font-size:.85rem;margin:0;color:#aaa;text-align:center}.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:1rem;background-color:#3a3a3a;border-radius:12px;margin-top:2rem}.no-results svg{color:#666;margin-bottom:1rem}.no-results h3{font-size:1.5rem;margin:0;color:#fff;font-weight:600}.no-results p{font-size:1rem;color:#888;margin:0}@media(max-width:768px){.page-title{font-size:2rem}.results-grid{justify-content:center}.playlist-image{width:150px;height:150px}}