button{background:rgba(6,109,226,.158);border:1px solid #066de266;border-radius:14px;box-shadow:0 4px 12px #066de24d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:.9rem 1.5rem;position:relative;transition:all .3s ease}button:hover{background:#066de240;box-shadow:0 8px 24px #066de299;transform:translateY(-2px)}button:before{background:#ffffff26;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .5s ease,height .5s ease;width:0}button:hover:before{height:300px;width:300px}:root{--color-bg-dark:#0b021c;--color-bg-gradient:linear-gradient(135deg,#3b82f6,#60a5fa);--color-primary:#55c9f7;--color-secondary:#33a1ea;--color-accent:#84eafc;--color-text-light:#fff;--shadow-glow:0 0 15px #3b82f680;--radius:14px;--transition:all 0.3s ease-in-out}body{background:#00264b;color:#fff;color:var(--color-text-light);font-family:Poppins,sans-serif;margin:0;min-height:100vh;padding:0}.App{flex-direction:column;justify-content:flex-start;padding:0;text-align:center}.App,.app-header{align-items:center;display:flex}.app-header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0b021c99;box-shadow:0 4px 20px #0000004d;padding:25px 0;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:50}.app-header,.jam-circle-title{color:#fff;justify-content:center}.jam-circle-title{align-items:center;display:flex;font-size:3rem;font-weight:700;gap:12px;margin:0 20px 0 0;text-align:center;text-shadow:2px 2px 0 #1e3a8a,4px 4px 10px #0000004d}.jam-circle-title svg{fill:#06adf2;filter:drop-shadow(0 0 8px rgba(6,173,242,.8));height:50px;width:50px}.nav-buttons{display:flex;gap:1rem}.nav-buttons button{background:linear-gradient(90deg,#6096fab9,#3b82f6);border:none;border-radius:14px;border-radius:var(--radius);box-shadow:0 0 15px #3b82f680;box-shadow:var(--shadow-glow);color:#fff;cursor:pointer;font-weight:600;padding:10px 20px;transition:all .3s ease-in-out;transition:var(--transition)}.nav-buttons .active,.nav-buttons button:hover{box-shadow:0 0 25px #60a5facc;transform:scale(1.05)}.content{animation:fadeIn .8s ease-in-out;background:#ffffff0d;border-radius:14px;border-radius:var(--radius);box-shadow:0 4px 25px #0003;margin-top:50px;max-width:1100px;padding:20px;text-align:center;width:100%}.feed-outer{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(180deg,#00264b 0,#004080);box-shadow:0 0 40px #00000080;color:var(--color-text-light);margin:0;min-height:100vh;padding:0 0 100px}.feed-loading{align-items:center;color:#fff;font-size:24px;min-height:60vh}.feed-header,.feed-loading{display:flex;justify-content:center}.feed-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00264b4d;box-shadow:0 2px 8px #0000004d;gap:20px;margin-bottom:0;padding:16px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.tab{background:#ffffff26;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;padding:8px 16px;transition:all .3s ease}.tab:hover{background:#ffffff40;transform:translateY(-2px)}.active-tab{background:#ffffff59;color:#fff;font-weight:700}.feed-categories{display:flex;flex-direction:column;gap:30px;padding:20px}.category-section{margin-bottom:20px}.category-title{color:#fff;font-size:24px;font-weight:700;margin-bottom:15px;padding-left:5px}.albums-row{display:flex;gap:12px;overflow-x:auto;padding:8px 0;scrollbar-color:#ffffff4d #0000001a;scrollbar-width:thin}.albums-row::-webkit-scrollbar{height:8px}.albums-row::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}.albums-row::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:10px}.albums-row::-webkit-scrollbar-thumb:hover{background:#ffffff80}.album-card-wrapper{display:flex;flex:0 0 180px;flex-direction:column;position:relative;transition:transform .3s ease;width:180px}.album-card-wrapper:hover{transform:translateY(-8px)}.album-card{background:rgba(0,0,0,.733);border-radius:8px;display:flex;flex-direction:column;font-size:.75rem;height:100%;overflow:hidden;padding:6px;transition:box-shadow .3s ease}.album-card-wrapper:hover .album-card{box-shadow:0 8px 20px #00000080}.listen-full-button{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff14;border:1px solid #ffffff26;border-radius:3px;color:#ffffffe6;cursor:pointer;display:block;font-size:9px;font-weight:500;margin-top:6px;opacity:0;padding:4px 0;text-align:center;text-decoration:none;transition:all .3s ease;visibility:hidden;white-space:nowrap;width:100%}.album-card-wrapper:hover .listen-full-button{opacity:1;visibility:visible}.listen-full-button:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px)}.album-image-container{border-radius:6px;cursor:pointer;flex-shrink:0;height:168px;overflow:hidden;position:relative;width:100%}.album-image{border-radius:6px;display:block;height:100%;object-fit:cover;transition:filter .3s ease;width:100%}.play-overlay{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);height:100%;width:100%}.album-image-container:hover .album-image{filter:blur(4px)}.album-image-container:hover .play-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1}.play-button{font-size:24px}.album-meta{padding:3px 2px}.album-title{align-items:center;color:#fff;display:flex;font-size:10px;font-weight:600;gap:4px;justify-content:center;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.album-title:has(.song-rating){justify-content:flex-start}.song-rating{color:#ffc107;flex-shrink:0;font-size:9px;font-weight:600;margin-left:auto;white-space:nowrap}.album-artist{color:#e2e8f0;font-size:8px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:space-around;margin-top:6px;opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}.album-card-wrapper:hover .track-actions{opacity:1;visibility:visible}.action-button{align-items:center;background:#00264bcc;border:2px solid #00408099;border-radius:10px;color:#fff;cursor:pointer;display:flex;flex:1 1;flex-direction:column;font-size:.75rem;font-weight:600;justify-content:center;padding:6px;text-align:center;text-decoration:none;transition:transform .2s ease,background .3s ease,border .3s ease}.action-button:hover{background:#004080e6;border-color:#004080;transform:translateY(-2px)}.action-button:disabled{cursor:not-allowed;opacity:.5}.btn-playlist,.btn-preview,.btn-rate,.btn-spotify{background:linear-gradient(90deg,#00264b,#004080);border:1px solid #004080;border-radius:6px;color:#fff;cursor:pointer;font-size:.65rem;font-weight:600;padding:3px 5px;transition:all .3s ease}.btn-playlist:hover,.btn-preview:hover,.btn-rate:hover,.btn-spotify:hover{background:linear-gradient(90deg,#004080,#0059b3);border-color:#0059b3}audio{height:30px;margin-top:8px;width:100%}.playlist-modal-overlay{align-items:center;animation:fadeIn .2s ease;background:#000000d9;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:99999}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.playlist-modal-content{animation:slideUp .3s ease;background:linear-gradient(135deg,#00264b,#004080);border:2px solid #004080b3;border-radius:16px;box-shadow:0 20px 60px #00000080;color:#fff;max-height:90vh;max-width:500px;overflow-y:auto;padding:30px;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.playlist-modal-content h3{color:#fff;font-size:22px;font-weight:700;margin:0 0 20px}.playlist-modal-content h4{color:#fff;font-size:16px;font-weight:600;margin:20px 0 12px}.selected-song-info{align-items:center;background:#0000004d;border-radius:10px;display:flex;gap:15px;margin-bottom:20px;padding:15px}.playlist-song-image{border-radius:8px;height:80px;object-fit:cover;width:80px}.selected-song-info strong{display:block;font-size:16px;margin-bottom:5px}.selected-song-info p{color:#cbd5e1;font-size:14px;margin:0}.existing-playlist-section,.new-playlist-section{margin-bottom:20px}.playlist-modal-content input[type=text],.playlist-modal-content textarea{background:#ffffff1a;border:2px solid #00408080;border-radius:8px;box-sizing:border-box;color:#fff;font-family:inherit;font-size:14px;margin:8px 0;padding:12px;transition:border-color .3s ease;width:100%}.playlist-modal-content input[type=text]:focus,.playlist-modal-content textarea:focus{background:#ffffff26;border-color:#004080;outline:none}.playlist-modal-content input[type=text]::placeholder,.playlist-modal-content textarea::placeholder{color:#ffffff80}.playlist-modal-content textarea{min-height:60px;resize:vertical}.checkbox-label{color:#fff;cursor:pointer;display:flex;font-size:14px;gap:10px;margin:12px 0}.playlist-modal-content input[type=checkbox]{accent-color:#004080;cursor:pointer;height:20px;width:20px}.playlist-modal-content select{background:#ffffff1a;border:2px solid #00408080;border-radius:8px;color:#fff;cursor:pointer;font-family:inherit;font-size:14px;margin:8px 0;padding:12px;transition:border-color .3s ease;width:100%}.playlist-modal-content select:focus{border-color:#004080;outline:none}.playlist-modal-content select option{background:#00264b;color:#fff;padding:10px}.btn-add-to-playlist,.btn-close-modal,.btn-create-playlist{border:2px solid #0000;border-radius:10px;cursor:pointer;font-size:16px;font-weight:600;margin-top:12px;padding:12px 20px;transition:all .3s ease;width:100%}.btn-add-to-playlist{background:linear-gradient(90deg,#059669,#10b981);border-color:#10b981;color:#fff}.btn-add-to-playlist:hover:not(:disabled){background:linear-gradient(90deg,#10b981,#059669);box-shadow:0 4px 12px #10b98166;transform:translateY(-2px)}.btn-create-playlist{background:linear-gradient(90deg,#00264b,#004080);border-color:#00408099;color:#fff}.btn-create-playlist:hover{background:linear-gradient(90deg,#004080,#0059b3);box-shadow:0 4px 12px #004080cc;transform:translateY(-2px)}.btn-close-modal{background:#00264b80;border-color:#00408099;color:#fff}.btn-close-modal:hover{background:#ef4444;box-shadow:0 4px 12px #ef444466;transform:translateY(-2px)}.playlist-section{border-top:2px solid #fff3;margin-top:40px;padding:20px}.playlist-section h2{margin-bottom:20px}.floating-nav{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00264b4d;border:2px solid #00408066;border-radius:30px;bottom:20px;box-shadow:0 8px 32px #0000004d;display:flex;gap:30px;justify-content:center;left:50%;padding:12px 20px;position:fixed;transform:translateX(-50%) translateY(0);transition:transform .3s ease-in-out;z-index:9999}.floating-nav.hidden{transform:translateX(-50%) translateY(120px)}.nav-icon{align-items:center;background:none;border:none;border-radius:15px;cursor:pointer;display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:60px;padding:8px 12px;transition:transform .2s ease}.nav-icon:hover{background:#ffffff26;transform:scale(1.1)}.nav-icon:hover .icon{opacity:1}.nav-icon:hover .icon-label{color:#fff}.nav-icon .icon{filter:brightness(0) saturate(100%) invert(100%);font-size:24px;opacity:.7;transition:all .2s ease}.nav-icon .icon-label{color:#ffffffb3;font-size:10px;font-weight:600}.nav-icon-add{align-items:center;background:#00264b;border:3px solid #004080cc;border-radius:50%;box-shadow:0 4px 15px #00264b99;display:flex;height:56px;justify-content:center;margin:0 10px;padding:0;width:56px}.nav-icon-add:hover{background:#004080;box-shadow:0 6px 20px #00264bcc;transform:scale(1.15)}.nav-icon-add:hover .icon{opacity:1}.nav-icon-add .icon{filter:brightness(0) saturate(100%) invert(100%);font-size:28px;opacity:.7}.tab-content{color:#fff;padding:60px 20px 40px;text-align:center}.tab-content h2{font-size:28px;margin-bottom:15px}.tab-content p{color:#fffc;font-size:16px}.nav-center-container{align-items:center;display:flex;justify-content:center;margin-top:-100px;padding-top:100px;position:relative}.floating-actions{animation:floatUp .3s ease-out;bottom:70px;display:flex;flex-direction:row;gap:12px;left:50%;position:absolute;transform:translateX(-50%)}@keyframes floatUp{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.floating-action-btn{align-items:center;background:linear-gradient(135deg,#00264b,#004080);border:2px solid #004080cc;border-radius:20px;box-shadow:0 4px 15px #00264b99;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:80px;padding:10px 16px;transition:all .3s ease;white-space:nowrap}.floating-action-btn:hover{background:linear-gradient(135deg,#004080,#0059b3);box-shadow:0 6px 20px #00264bcc;transform:translateY(-4px) scale(1.05)}.floating-action-btn:hover .floating-action-icon{opacity:1}.floating-action-btn:hover .floating-action-label{color:#fff}.floating-action-icon{filter:brightness(0) saturate(100%) invert(100%);font-size:20px;opacity:.7}.floating-action-label{color:#ffffffb3;font-size:14px;font-weight:600;text-shadow:0 2px 4px #0000004d}.nav-icon-add.rotated .icon{transform:rotate(45deg)}.nav-icon-add .icon,.nav-icon-add.rotated .icon{transition:transform .3s ease}@media (max-width:1024px){.albums-row{flex-wrap:nowrap;justify-content:flex-start}.album-card-wrapper{flex:0 0 160px;width:160px}.album-image-container{height:148px}}@media (max-width:768px){.floating-nav{bottom:10px;gap:20px;padding:10px 15px}.nav-icon-add{height:50px;margin:0 5px;width:50px}.nav-icon .icon{font-size:20px}.nav-icon-add .icon{font-size:24px}.feed-outer{padding:0 0 90px}.feed-categories{padding:15px}.category-title{font-size:20px}.playlist-modal-content{padding:20px}}@media (max-width:600px){.floating-actions{bottom:60px;gap:8px}.floating-action-btn{min-width:70px;padding:8px 12px}.floating-action-icon{font-size:18px}.floating-action-label{font-size:11px}.tab-content{padding:60px 15px 40px}.play-button{font-size:20px;height:40px;width:40px}.albums-row{flex-direction:row;overflow-x:auto}.album-card-wrapper{flex:0 0 150px;width:150px}.album-image-container{height:138px}.feed-header{gap:10px}.tab{font-size:14px;padding:6px 12px}}.ratings-section{margin:0 auto;max-width:1400px;padding:20px}.ratings-category{margin-bottom:40px}.ratings-title{border-left:4px solid #1db954;color:#fff;font-size:24px;font-weight:700;margin-bottom:20px;padding-left:10px}.ratings-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.rating-card{background:rgba(0,0,0,.733);border-radius:8px;cursor:pointer;overflow:hidden;padding:4px;transition:transform .2s,box-shadow .2s}.rating-card:hover{box-shadow:0 8px 16px #0006;transform:translateY(-5px)}.rating-card-image{border-radius:6px;overflow:hidden;position:relative;width:100%}.rating-card-image img{border-radius:6px;display:block;height:auto;object-fit:cover;width:100%}.rating-overlay{align-items:center;background:linear-gradient(0deg,#000000e6,#0000);bottom:0;display:flex;justify-content:center;left:0;padding:10px;position:absolute;right:0}.rating-score{color:#fbbf24;font-size:18px;font-weight:700;text-shadow:0 2px 4px #000c}.rating-card-info{padding:12px}.rating-card-title{color:#fff;font-size:14px;font-weight:600;margin-bottom:4px}.rating-card-artist,.rating-card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rating-card-artist{color:#b3b3b3;font-size:12px;margin-bottom:8px}.rating-card-stars{font-size:14px}.empty-ratings{color:#b3b3b3;padding:60px 20px;text-align:center}.empty-ratings h3{color:#fff;font-size:24px;margin-bottom:10px}.empty-ratings p{font-size:16px;margin-bottom:20px}@media (max-width:768px){.ratings-grid{gap:15px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.ratings-title{font-size:20px}}.auth-container{min-height:100vh;width:100%}.auth-container,.auth-demo-section{background:linear-gradient(135deg,#667eea,#764ba2);display:flex}.auth-demo-section{align-items:center;color:#fff;flex:1 1;justify-content:center;overflow:hidden;padding:60px 40px;position:relative}.auth-demo-section:before{animation:moveBackground 20s linear infinite;background:radial-gradient(circle,#ffffff1a 1px,#0000 0);background-size:50px 50px;content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}@keyframes moveBackground{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.demo-content{max-width:600px;position:relative;width:100%;z-index:1}.demo-title{animation:fadeInDown .8s ease-out;font-size:48px;font-weight:800;line-height:1.2;margin:0 0 20px;text-shadow:2px 2px 4px #0003}.demo-subtitle{animation:fadeInDown .8s ease-out .2s both;font-size:20px;line-height:1.6;margin:0 0 40px;opacity:.95}.video-container{animation:fadeInUp .8s ease-out .4s both;background:#000;border-radius:16px;box-shadow:0 20px 60px #0006;margin:40px 0;overflow:hidden}.demo-video{display:block;height:auto;max-height:400px;object-fit:cover;width:100%}.features-list{grid-gap:20px;animation:fadeInUp .8s ease-out .6s both;display:grid;gap:20px;grid-template-columns:repeat(2,1fr);margin-top:40px}.feature-item{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:12px;display:flex;gap:12px;padding:16px 20px;transition:all .3s ease}.feature-item:hover{background:#ffffff40;box-shadow:0 8px 20px #0003;transform:translateY(-4px)}.feature-icon{flex-shrink:0;font-size:28px}.feature-text{font-size:16px;font-weight:600;line-height:1.4}.auth-form-section{align-items:center;background:#fff;box-shadow:-10px 0 40px #0000001a;display:flex;flex:0 0 500px;justify-content:center;padding:40px}.auth-form{animation:fadeInRight .8s ease-out;max-width:420px;width:100%}.auth-form-title{color:#1a1a1a;font-size:32px;font-weight:700;margin:0 0 10px}.auth-form-description{color:#666;font-size:16px;margin:0 0 30px}.auth-form form{gap:20px}.auth-form form,.form-group{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{color:#333;font-size:14px;font-weight:600;margin-bottom:4px}.form-group input{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:10px;font-family:inherit;font-size:16px;padding:14px 16px;transition:all .3s ease}.form-group input:focus{background:#fff;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;outline:none}.form-group input:disabled{background:#f0f0f0;cursor:not-allowed;opacity:.6}.form-group input::placeholder{color:#999}.error-message{animation:shake .4s ease-in-out;background:#fee;border:1px solid #fcc;border-radius:8px;color:#c33;font-size:14px;font-weight:500;padding:12px 16px}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.auth-submit-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;box-shadow:0 4px 15px #667eea66;color:#fff;cursor:pointer;font-size:16px;font-weight:700;margin-top:10px;padding:16px 32px;transition:all .3s ease}.auth-submit-button:hover:not(:disabled){box-shadow:0 6px 20px #667eea99;transform:translateY(-2px)}.auth-submit-button:active:not(:disabled){transform:translateY(0)}.auth-submit-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.auth-toggle{border-top:1px solid #e0e0e0;margin-top:30px;padding-top:20px;text-align:center}.auth-toggle p{color:#666;font-size:15px;margin:0}.link-button{background:none;border:none;color:#667eea;cursor:pointer;font-size:inherit;font-weight:600;padding:0;text-decoration:underline;transition:color .2s ease}.link-button:hover{color:#764ba2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@media (max-width:1024px){.auth-demo-section{padding:40px 30px}.demo-title{font-size:40px}.demo-subtitle{font-size:18px}.auth-form-section{flex:0 0 450px;padding:30px}.features-list{gap:15px}.feature-item{padding:14px 16px}}@media (max-width:768px){.auth-container{flex-direction:column}.auth-demo-section{min-height:auto;padding:40px 20px}.demo-title{font-size:32px}.demo-subtitle{font-size:16px;margin-bottom:30px}.video-container{margin:30px 0}.features-list{gap:12px;grid-template-columns:1fr;margin-top:30px}.feature-item{padding:12px 16px}.feature-icon{font-size:24px}.feature-text{font-size:14px}.auth-form-section{box-shadow:none;flex:none;padding:30px 20px;width:100%}.auth-form{max-width:100%}.auth-form-title{font-size:28px}.auth-form-description{font-size:15px}}@media (max-width:480px){.auth-demo-section{padding:30px 15px}.demo-title{font-size:28px}.demo-subtitle{font-size:15px}.auth-form-section{padding:20px 15px}.form-group input{font-size:15px;padding:12px 14px}.auth-submit-button{font-size:15px;padding:14px 28px}}.spotify-search-container{background:#0000;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;width:100%}.search-box-wrapper{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#00000040;border-radius:12px;box-sizing:border-box;margin:0;padding:20px;width:100%}.search-bar-container{display:flex;gap:15px;justify-content:center;margin:0}.search-input{background:#fff3;border:none;border-radius:8px;padding:12px}.search-input::placeholder{color:#fffc}.search-button{background:linear-gradient(90deg,#1e3a8a,#60a5fa);border:none;border-radius:8px;box-shadow:0 0 10px #3b82f680;color:#fff;cursor:pointer;font-size:16px;padding:12px 16px;transition:all .3s ease}.search-button:hover{background:linear-gradient(90deg,#60a5fa,#1e3a8a);transform:scale(1.05)}.search-results-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));justify-items:center;margin-top:30px;padding:10px}.search-card-wrapper{display:flex;flex-direction:column;margin:0 auto;max-width:180px;position:relative;transition:transform .3s ease;width:100%}.search-card-wrapper:hover{transform:translateY(-8px)}.search-card{background:#0009;border-radius:12px;display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;transition:box-shadow .3s ease}.search-card-wrapper:hover .search-card{box-shadow:0 8px 20px #00000080}.search-card-image-container{border-radius:8px;cursor:pointer;flex-shrink:0;height:156px;overflow:hidden;position:relative;width:100%}.search-card-image{display:block;height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.search-card-wrapper:hover .search-card-image{transform:scale(1.05)}.play-overlay{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000026;bottom:0;cursor:pointer;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.search-card-wrapper:hover .play-overlay{opacity:1}.play-button{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff26;border:2px solid #ffffff40;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:20px;height:50px;justify-content:center;transition:all .3s ease;width:50px}.play-button:hover{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.1)}.search-card-meta{margin-top:12px}.search-card-title{align-items:center;color:#fff;display:flex;font-size:14px;font-weight:600;gap:6px;justify-content:center;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-card-title:has(.song-rating){justify-content:flex-start}.search-card-title .song-rating{color:#ffc107;flex-shrink:0;font-size:11px;font-weight:600;margin-left:auto;white-space:nowrap}.search-card-artist{color:#ffffffb3;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-card-actions{display:flex;gap:8px;margin-top:12px}.search-card-actions .action-button{border:none;border-radius:6px;cursor:pointer;flex:1 1;font-size:11px;font-weight:600;padding:8px 12px;transition:all .2s ease}.search-card-actions .btn-rate{background:#ffc10733;border:1px solid #ffc10766;color:#ffc107}.search-card-actions .btn-rate:hover{background:#ffc1074d;transform:translateY(-2px)}.search-card-actions .btn-playlist{background:#2196f333;border:1px solid #2196f366;color:#2196f3}.search-card-actions .btn-playlist:hover{background:#2196f34d;transform:translateY(-2px)}.search-listen-button{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff14;border:1px solid #ffffff26;border-radius:4px;color:#ffffffe6;cursor:pointer;display:block;font-size:10px;font-weight:500;margin-top:8px;opacity:0;padding:6px 0;text-align:center;text-decoration:none;transition:all .3s ease;visibility:hidden;width:100%}.search-card-wrapper:hover .search-listen-button{opacity:1;visibility:visible}.search-listen-button:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px)}@media (max-width:900px){.search-results-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.search-card-wrapper{max-width:150px}.search-card-image-container{height:126px}}@media (max-width:600px){.search-results-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.search-card-wrapper{max-width:140px}.search-card-image-container{height:116px}}.playlist-card{background:rgba(0,0,0,.733);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:10px;max-width:250px;min-width:200px;overflow:visible;padding:12px;position:relative;transition:transform .3s ease,box-shadow .3s ease}.playlist-card:hover{box-shadow:0 8px 24px #60a5fa4d;transform:translateY(-5px)}.playlist-image-container{border-radius:8px;height:200px;overflow:hidden;width:100%}.playlist-image{height:100%;object-fit:cover;width:100%}.playlist-image-placeholder{align-items:center;background:linear-gradient(135deg,#1e3a8a,#60a5fa);display:flex;height:100%;justify-content:center;width:100%}.playlist-icon-text{color:#ffffffe6;font-size:72px;font-weight:800;text-shadow:2px 2px 4px #0000004d}.playlist-info{display:flex;flex-direction:column;gap:6px}.playlist-name{color:#fff;font-size:16px;font-weight:700;white-space:nowrap}.playlist-description,.playlist-name{margin:0;overflow:hidden;text-overflow:ellipsis}.playlist-description{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#e2e8f0;display:-webkit-box;font-size:12px;line-height:1.4;max-height:3.6em}.playlist-meta{align-items:center;display:flex;gap:10px;margin-top:4px}.playlist-song-count{color:#94a3b8;font-size:11px;font-weight:600}.playlist-visibility{border-radius:12px;font-size:10px;font-weight:600;padding:3px 8px}.playlist-visibility.public{background:#22c55e33;color:#86efac}.playlist-visibility.private{background:#ef444433;color:#fca5a5}.playlist-shared-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff;font-size:11px;font-weight:600;max-width:150px;overflow:hidden;padding:4px 12px;text-overflow:ellipsis;white-space:nowrap}.playlist-permission-badge{background-color:#60a5fa26;border:1px solid #60a5fa4d;border-radius:6px;color:#60a5fa;display:inline-block;font-size:11px;font-weight:600;margin-top:8px;padding:4px 10px}.playlist-menu-container{position:absolute;right:16px;top:16px;z-index:10}.playlist-menu-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000b3;border:none;border-radius:50%;color:#ffffffe6;cursor:pointer;display:flex;font-size:20px;font-weight:700;height:32px;justify-content:center;letter-spacing:1px;transition:all .2s ease;width:32px}.playlist-menu-button:hover{background:#000000e6;transform:scale(1.1)}.playlist-dropdown-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e1e1efa;border:1px solid #ffffff1a;border-radius:8px;box-shadow:0 8px 24px #00000080;min-width:150px;overflow:hidden;position:absolute;right:0;top:40px;z-index:100}.menu-item{background:#0000;border:none;color:#fff;cursor:pointer;display:block;font-size:14px;font-weight:500;padding:12px 16px;text-align:left;transition:background-color .2s ease;width:100%}.menu-item:hover{background:#ffffff1a}.menu-item-danger{color:#ff4646}.menu-item-danger:hover{background:#ff464633}.menu-item-warning{color:#f59e0b}.menu-item-warning:hover{background:#f59e0b33}.playlist-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:16px}.playlist-section{border-top:2px solid #60a5fa4d;margin-top:30px;padding-top:20px}.playlist-section h2{color:#fff;font-size:24px;margin-bottom:16px}@media (max-width:768px){.playlist-grid{gap:15px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.playlist-card{max-width:100%;min-width:150px}.playlist-image-container{height:150px}}.playlist-view-container{background:linear-gradient(135deg,#0f172a,#1e293b 50%,#0f172a);color:#fff;min-height:100vh;padding:20px;width:100%}.playlist-view-header{align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;box-shadow:0 4px 12px #0000004d;display:flex;justify-content:center;margin-bottom:30px;padding:20px;position:relative}.playlist-view-header h1{font-size:32px;font-weight:700;margin:0}.btn-create-new-playlist{background:linear-gradient(90deg,#1db954,#1ed760);border:none;border-radius:8px;box-shadow:0 2px 8px #1db9544d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;position:absolute;right:20px;transition:all .3s ease}.btn-create-new-playlist:hover{box-shadow:0 4px 12px #1db95480;transform:translateY(-2px)}.empty-playlists{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:80px 20px;text-align:center}.empty-icon-text{color:#fff9;font-size:120px;margin-bottom:20px;opacity:.5}.empty-playlists h2{color:#ffffffe6;font-size:28px;margin-bottom:10px}.empty-playlists p{color:#fff9;font-size:16px;margin-bottom:30px}.btn-create-first-playlist{background:linear-gradient(90deg,#1db954,#1ed760);border:none;border-radius:8px;box-shadow:0 4px 12px #1db9544d;color:#fff;cursor:pointer;font-size:18px;font-weight:600;padding:14px 32px;transition:all .3s ease}.btn-create-first-playlist:hover{box-shadow:0 6px 16px #1db95480;transform:translateY(-2px)}.playlists-section-title{border-left:4px solid #60a5fa;color:#fff;font-size:22px;font-weight:700;margin:30px 20px 15px;padding-left:15px}.playlist-section-title{margin-top:20px;padding:15px 20px}.playlist-section-title h2{border-left:4px solid #60a5fa;color:#fff;font-size:24px;font-weight:700;margin:0;padding-left:15px}.playlists-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding:20px}.playlist-songs-view{width:100%}.playlist-detail-header{margin-bottom:30px}.btn-back{background-color:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;margin-bottom:20px;padding:10px 20px;transition:all .3s ease}.btn-back:hover{background-color:#fff3}.playlist-detail-info{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;box-shadow:0 4px 12px #0000004d;display:flex;gap:30px;padding:30px}.playlist-detail-image{object-fit:cover}.playlist-detail-image,.playlist-detail-image-placeholder{border-radius:12px;box-shadow:0 8px 24px #0006;height:200px;width:200px}.playlist-detail-image-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center}.playlist-icon-large{font-size:80px}.playlist-detail-meta{display:flex;flex:1 1;flex-direction:column;justify-content:center}.playlist-title-container{align-items:center;display:flex;gap:15px}.playlist-detail-meta h1{font-size:48px;font-weight:700;margin:0;text-align:left}.playlist-menu-container-detail{position:relative}.playlist-menu-button-detail{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:#ffffffe6;cursor:pointer;display:flex;font-size:20px;font-weight:700;height:40px;justify-content:center;letter-spacing:1px;transition:all .2s ease;width:40px}.playlist-menu-button-detail:hover{background:#fff3;transform:scale(1.05)}.playlist-dropdown-menu-detail{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e1e1efa;border:1px solid #ffffff1a;border-radius:8px;box-shadow:0 8px 24px #00000080;display:none;left:0;min-width:150px;overflow:hidden;position:absolute;top:45px;z-index:100}.playlist-dropdown-menu-detail.show{display:block}.playlist-detail-description{color:#ffffffb3;font-size:16px;margin-bottom:20px}.playlist-detail-stats{color:#fffc;display:flex;font-size:14px;gap:15px}.visibility-badge{border-radius:6px;font-weight:600;padding:6px 12px}.visibility-badge.public{background-color:#1db95433;color:#1db954}.visibility-badge.private{background-color:#ffffff1a;color:#fffc}.playlist-songs-list{background-color:#0f172a80;border-radius:12px;padding:20px}.empty-songs{color:#fff9;padding:60px 20px;text-align:center}.empty-songs p{font-size:16px;margin-bottom:10px}.empty-hint{color:#fff6;font-size:14px}.playlist-song-item{align-items:center;background-color:initial;border:2px solid #0000;border-radius:8px;display:flex;gap:15px;margin-right:0;min-height:84px;min-width:600px;overflow:visible;padding:12px 100px 12px 12px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.playlist-song-item:hover{background:linear-gradient(135deg,#1e293b66,#3341554d);border:2px solid #60a5fa;box-shadow:0 0 20px #60a5fa66,0 0 40px #60a5fa33;margin-right:90px;min-height:80px;padding:10px 100px 10px 12px;transform:scale(1.02)}.playlist-song-item:hover .song-image-container{transform:scale(1.1)}.song-image-container{flex-shrink:0;height:60px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1);width:60px}.song-image{border-radius:6px;height:100%;object-fit:cover;width:100%}.song-image-placeholder{background:linear-gradient(135deg,#667eea,#764ba2);font-size:24px}.song-image-placeholder,.song-play-overlay{align-items:center;border-radius:6px;display:flex;height:100%;justify-content:center;width:100%}.song-play-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#000000b3;cursor:pointer;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease}.song-image-container:hover .song-play-overlay{opacity:1}.song-play-button{align-items:center;background:#ffffff1a;border-radius:50%;color:#fff;display:flex;font-size:32px;height:50px;justify-content:center;transition:all .3s ease;width:50px}.song-play-button:hover{background:#fff3;transform:scale(1.1)}.song-info{flex:1 1;min-width:0}.song-title{color:#fff;font-size:16px;font-weight:600;margin-bottom:4px}.song-artist,.song-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-artist{color:#fff9;font-size:14px}.song-actions{align-items:center;display:flex;gap:10px;margin-left:auto;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.playlist-song-item:hover .song-actions{opacity:1;pointer-events:all}.heart-badge-corner{animation:heartbeat-subtle 2s ease-in-out infinite;filter:drop-shadow(0 1px 3px rgba(255,0,0,.3));font-size:16px;opacity:.85;position:absolute;right:10px;top:10px;transition:all .3s ease;z-index:5}@keyframes heartbeat-subtle{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.playlist-song-item:hover .heart-badge-corner{opacity:0;pointer-events:none}.btn-song-action{border:none;border-radius:6px;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;padding:8px 16px;text-decoration:none;transition:all .3s ease}.btn-listen{background-color:#1db95433;border:1px solid #1db954;color:#1db954}.btn-listen:hover{background-color:#1db954;color:#fff}.btn-play-icon{align-items:center;background-color:#60a5fa33;border:1px solid #60a5fa;color:#60a5fa;display:flex;font-size:18px;height:40px;justify-content:center;padding:0;width:40px}.btn-play-icon:hover:not(:disabled){background-color:#60a5fa;color:#fff}.btn-play-icon:disabled{background-color:#60a5fa1a;border:1px solid #60a5fa4d;color:#60a5fa66;cursor:not-allowed;opacity:.5}.btn-remove{background-color:#ff464633;border:1px solid #ff4646;color:#ff4646;font-size:20px;font-weight:700;padding:6px 14px}.btn-remove:hover{background-color:#ff4646;color:#fff}.btn-rate-song{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffd7001a;border:1px solid #ffd7004d;border-radius:8px;bottom:0;box-shadow:0 4px 12px #0003;color:gold;cursor:pointer;display:flex;font-size:24px;height:100%;justify-content:center;margin-left:10px;opacity:0;padding:0 20px;pointer-events:none;position:absolute;right:0;top:0;transform:translateX(100%);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:10}.playlist-song-item:hover .btn-rate-song{opacity:1;pointer-events:all;transform:translateX(110%)}.btn-rate-song:hover{background:#ffd70033;border-color:#ffd70080;box-shadow:0 6px 16px #ffd7004d;transform:translateX(110%) scale(1.05)}.song-rating-badge{color:gold;font-size:14px;margin-left:10px}.multiple-ratings-container{align-items:center;display:flex;gap:10px;margin-right:15px}.song-reviews-avatars{display:flex;gap:8px;margin-right:12px;opacity:1;pointer-events:auto;transform:translateX(0);transition:all .3s ease}.playlist-song-item:hover .song-reviews-avatars{transform:scale(1.05)}.review-avatar-wrapper{align-items:center;display:flex;flex-direction:column;position:relative;transition:transform .2s ease}.review-avatar-wrapper:hover{transform:scale(1.1);z-index:10}.review-rating-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #ffffff4d;border-radius:8px;box-shadow:0 2px 8px #0000004d;color:#fffffff2;font-size:10px;font-weight:700;left:50%;padding:2px 6px;position:absolute;top:-10px;transform:translateX(-50%);white-space:nowrap;z-index:1}.review-user-avatar{background:#1a1a2e;border:2px solid #fff6;border-radius:50%;box-shadow:0 4px 12px #00000080;cursor:pointer;height:36px;object-fit:cover;transition:all .2s ease;width:36px}.review-user-avatar:hover{border-color:#ffffffb3;box-shadow:0 6px 16px #0009}.review-user-avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea99,#764ba299);border:2px solid #fff6;border-radius:50%;box-shadow:0 4px 12px #00000080;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:36px;justify-content:center;transition:all .2s ease;width:36px}.review-user-avatar-placeholder:hover{border-color:#ffffffb3;box-shadow:0 6px 16px #0009}.review-comment-tooltip{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a2efa;border:1px solid #fff3;border-radius:12px;bottom:120%;box-shadow:0 8px 24px #0009;left:50%;max-width:300px;min-width:200px;opacity:0;padding:12px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:all .3s ease;visibility:hidden;z-index:100}.review-avatar-wrapper:hover .review-comment-tooltip{bottom:115%;opacity:1;visibility:visible}.review-tooltip-header{align-items:center;border-bottom:1px solid #fff3;display:flex;justify-content:space-between;margin-bottom:8px;padding-bottom:8px}.review-tooltip-header strong{color:#fffffff2;font-size:13px}.review-tooltip-header span{color:#fffc;font-size:12px}.review-tooltip-comment{word-wrap:break-word;color:#ffffffe6;font-size:12px;line-height:1.5}.review-comment-tooltip:after{border:8px solid #0000;border-top-color:#1a1a2efa;content:"";top:100%}.rating-tooltip,.review-comment-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.rating-tooltip{word-wrap:break-word;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#14141efa;border:1px solid #ffd7004d;border-radius:8px;bottom:110%;box-shadow:0 4px 16px #00000080;color:#fff;font-size:13px;line-height:1.4;max-width:300px;min-width:200px;opacity:0;padding:12px 16px;pointer-events:none;transition:all .3s ease;visibility:hidden;white-space:normal;z-index:100}.tooltip-user-name{border-bottom:1px solid #ffd7004d;color:gold;font-size:12px;font-weight:700;margin-bottom:6px;padding-bottom:4px}.rating-tooltip:after{border:6px solid #0000;border-top-color:#14141efa;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.user-rating-circle:hover .rating-tooltip{bottom:115%;opacity:1;visibility:visible}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-content{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 8px 32px #00000080;max-width:500px;padding:30px;width:90%}.modal-content h2{color:#fff;font-size:24px;margin:0 0 20px}.modal-form{gap:20px}.modal-form,.modal-form label{display:flex;flex-direction:column}.modal-form label{color:#ffffffe6;font-size:14px;font-weight:600;gap:8px}.modal-form input[type=text],.modal-form textarea{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;color:#fff;font-size:14px;padding:12px;transition:all .3s ease}.modal-form input[type=text]:focus,.modal-form textarea:focus{background:#ffffff14;border-color:#1db954;outline:none}.checkbox-label{align-items:center;flex-direction:row!important;gap:10px!important}.checkbox-label input[type=checkbox]{cursor:pointer;height:18px;width:18px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.btn-modal{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s ease}.btn-cancel{background:#ffffff1a;color:#fff}.btn-cancel:hover{background:#ffffff26}.btn-save{background:linear-gradient(90deg,#1db954,#1ed760);color:#fff}.btn-save:hover{box-shadow:0 4px 12px #1db95480;transform:translateY(-2px)}.modal-review{max-width:550px}.review-track-info{align-items:center;background:#ffffff0d;border-radius:8px;display:flex;gap:15px;margin-bottom:20px;padding:20px}.review-track-image{border-radius:8px;height:80px;object-fit:cover;width:80px}.review-track-title{color:#fff;font-size:18px;font-weight:600;margin-bottom:5px}.review-track-artist{color:#ffffffb3;font-size:14px}.star-rating{display:flex;gap:10px;margin-top:10px}.star-button{background:#0000;border:none;cursor:pointer;font-size:32px;opacity:.3;padding:5px;transition:all .2s ease}.star-button.active{opacity:1;transform:scale(1.1)}.star-button:hover{opacity:1;transform:scale(1.2)}.modal-share{max-height:85vh;max-width:700px;overflow-y:auto}.share-description{color:#ffffffe6;font-size:16px;font-weight:600;margin-bottom:25px;text-align:center}.share-add-user-section{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:20px;padding:20px}.share-add-user-section h3{color:#1db954;font-size:18px;font-weight:600;margin:0 0 15px}.share-section{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:20px;padding:20px}.share-section h3{color:#1db954;font-size:18px;margin:0 0 10px}.share-option-description{color:#ffffffb3;font-size:13px;line-height:1.4;margin-bottom:15px}.checkbox-label-share{align-items:center;color:#fff;cursor:pointer;display:flex;font-size:15px;gap:10px;margin-bottom:15px}.checkbox-label-share input[type=checkbox]{cursor:pointer;height:20px;width:20px}.share-link-container{display:flex;gap:10px;margin-top:15px}.share-link-input{background:#ffffff14;border:1px solid #ffffff26;border-radius:6px;color:#fff;flex:1 1;font-size:13px;padding:10px}.btn-copy-small{background:linear-gradient(90deg,#1db954,#1ed760);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:10px 16px;transition:all .3s ease;white-space:nowrap}.btn-copy-small:hover{box-shadow:0 4px 12px #1db95480;transform:translateY(-2px)}.share-user-form{display:flex;flex-direction:column;gap:12px}.share-email-input{background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;color:#fff;font-size:14px;padding:12px;transition:border-color .3s ease}.share-email-input:focus{border-color:#1db954;outline:none}.share-email-input::placeholder{color:#ffffff80}.share-permission-select{background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;padding:12px;transition:border-color .3s ease}.share-permission-select:focus{border-color:#1db954;outline:none}.share-permission-select option{background:#1a1a2e;color:#fff}.btn-share-add{background:linear-gradient(90deg,#1db954,#1ed760);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 20px;transition:all .3s ease}.btn-share-add:hover{box-shadow:0 4px 12px #1db95480;transform:translateY(-2px)}.btn-copy{background:linear-gradient(90deg,#60a5fa,#3b82f6);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:10px 16px;transition:all .3s ease;white-space:nowrap}.btn-copy:hover{box-shadow:0 4px 12px #60a5fa80;transform:translateY(-2px)}.shared-users-list{background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;margin-top:20px;padding:20px}.shared-users-list h3{color:#ffffffe6;font-size:16px;font-weight:600;margin:0 0 15px}.shared-user-item{align-items:center;background:#ffffff0d;border-radius:8px;display:flex;justify-content:space-between;margin-bottom:10px;padding:12px;transition:background .3s ease}.shared-user-item:hover{background:#ffffff14}.shared-user-info{align-items:center;display:flex;flex:1 1;gap:12px}.shared-user-details{flex:1 1}.shared-user-name{color:#fff;font-size:14px;font-weight:600;margin-bottom:2px}.shared-user-avatar{border-radius:50%;height:40px;object-fit:cover;width:40px}.shared-user-avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;font-size:16px;font-weight:700;height:40px;justify-content:center;width:40px}.shared-user-email{color:#fff9;font-size:12px;margin-bottom:4px}.shared-user-permission{color:#1db954cc;font-size:12px;font-weight:600}.btn-remove-user{align-items:center;background:#ff464633;border:1px solid #ff4646;border-radius:6px;color:#ff4646;cursor:pointer;display:flex;font-size:24px;font-weight:700;height:32px;justify-content:center;transition:all .3s ease;width:32px}.btn-remove-user:hover{background:#ff4646;color:#fff;transform:scale(1.1)}.share-link-section{background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;margin-top:20px;padding:20px}.share-link-section h3{color:#60a5fa;font-size:16px;font-weight:600;margin:0 0 10px}.share-link-description{color:#fff9;font-size:13px;line-height:1.4;margin-bottom:15px}@media (max-width:768px){.playlist-view-header{flex-direction:column;gap:15px;text-align:center}.btn-create-new-playlist{margin-top:10px;position:static}.playlist-detail-info{align-items:center;flex-direction:column;text-align:center}.playlist-title-container{flex-direction:column;gap:10px}.playlist-detail-meta h1{font-size:32px;text-align:center}.playlists-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:10px}.song-actions{flex-direction:row;flex-wrap:wrap}.playlist-song-item:hover{margin-right:0}.btn-rate-song{height:50px;margin-top:10px;opacity:1;position:static;transform:none;width:100%}.playlist-song-item:hover .btn-rate-song{transform:none}.modal-content{padding:20px;width:95%}.share-link-container{flex-direction:column}}.friends-container{background-color:#000;color:#fff;display:flex;min-height:100vh}.friends-main{flex:1 1;margin:0 auto;max-width:100%;padding:20px;width:100%}.search-section{background:#111;border-radius:12px;margin-bottom:32px;padding:24px}.search-section h2{align-items:center;display:flex;font-size:24px;font-weight:700;gap:12px;margin-bottom:20px}.search-input-wrapper{margin-bottom:20px;position:relative}.search-icon{color:#666;left:16px;position:absolute;top:50%;transform:translateY(-50%)}.search-input{background:#1a1a1a;border:2px solid #222;border-radius:10px;color:#fff;font-size:16px;outline:none;padding:14px 14px 14px 48px;transition:border-color .2s;width:100%}.search-input:focus{border-color:#0064c8}.no-results,.search-loading{color:#666;padding:20px;text-align:center}.search-results{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.search-track-card{background:#1a1a1a;border:2px solid #0000;border-radius:12px;cursor:pointer;padding:12px;transition:all .3s}.search-track-card:hover{border-color:#0064c8;box-shadow:0 8px 24px #0064c84d;transform:translateY(-4px)}.track-cover{aspect-ratio:1;border-radius:8px;margin-bottom:12px;object-fit:cover;width:100%}.track-info{text-align:center}.track-title{font-size:14px;font-weight:600;margin-bottom:4px}.track-artist,.track-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{color:#888;font-size:12px}.feed-section h2{font-size:28px;font-weight:700;margin-bottom:24px}.feed-empty,.feed-loading{color:#666;padding:60px 20px;text-align:center}.feed-empty svg{margin:0 auto 16px;opacity:.3}.empty-subtitle{font-size:14px;margin-top:8px}.feed-posts{column-count:6;column-gap:32px}.feed-post{-webkit-column-break-inside:avoid;background:#111;border:1px solid #222;border-radius:12px;break-inside:avoid;display:inline-block;margin-bottom:32px;overflow:hidden;padding:10px;page-break-inside:avoid;transition:transform .2s,box-shadow .2s;vertical-align:top;width:100%}.feed-post:hover{box-shadow:0 4px 12px #0064c833;transform:translateY(-2px)}.feed-post:nth-child(2n) .post-comment-section{padding-bottom:20px}.post-header{align-items:center;display:flex;gap:8px;margin-bottom:10px}.post-user-avatar,.post-user-avatar-placeholder{border-radius:50%;flex-shrink:0;height:32px;width:32px}.post-user-avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;font-size:14px;font-weight:600;justify-content:center}.post-username{font-size:13px;font-weight:600}.post-date{color:#666;font-size:10px;margin-top:2px}.post-content{display:flex;flex-direction:column;gap:8px}.post-track{cursor:pointer;position:relative;width:100%}.post-track-cover{aspect-ratio:1/1;border-radius:8px;display:block;object-fit:cover;width:100%}.post-track-play{align-items:center;background:#00000080;border-radius:12px;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity .3s}.post-track:hover .post-track-play{opacity:1}.post-track-play svg{color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}.post-comment-section{display:flex;flex-direction:column;justify-content:center}.post-track-header{align-items:flex-start;display:flex;gap:8px;margin-bottom:4px}.post-track-title{flex:1 1;font-size:13px;font-weight:600;line-height:1.3}.post-like-btn{align-items:center;background:#0000;border:none;border-radius:16px;color:#666;cursor:pointer;display:flex;flex-shrink:0;font-size:11px;font-weight:600;gap:4px;padding:4px 8px;transition:all .2s}.post-like-btn:hover{background:#0064c81a;color:#0064c8}.post-like-btn.liked{color:#0064c8}.post-like-btn:disabled{cursor:not-allowed;opacity:.5}.post-track-artist{color:#888;font-size:11px;margin-bottom:8px;padding-bottom:0}.post-comment{word-wrap:break-word;border-left:2px solid #0064c8;color:#ccc;font-size:12px;font-style:italic;line-height:1.5;margin-top:8px;overflow-wrap:break-word;padding:8px 0 8px 10px}.preview-modal{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.preview-backdrop{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#00000080;inset:0;position:absolute}.preview-content{background:#1a1a1a;border-radius:24px;box-shadow:0 24px 48px #000c;max-width:500px;padding:48px;position:relative;text-align:center;z-index:101}.preview-close{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:16px;top:16px;transition:background .2s;width:40px}.preview-close:hover{background:#fff3}.preview-cover{border-radius:16px;box-shadow:0 12px 32px #0009;height:280px;margin-bottom:24px;object-fit:cover;width:280px}.preview-title{font-size:24px;font-weight:700;margin-bottom:8px}.preview-artist{color:#888;font-size:16px;margin-bottom:32px}.preview-play-btn{align-items:center;background:linear-gradient(135deg,#0064c8,#0052a3);border:none;border-radius:50%;box-shadow:0 8px 24px #0064c866;color:#fff;cursor:pointer;display:flex;height:80px;justify-content:center;margin:0 auto 24px;transition:transform .2s;width:80px}.preview-play-btn:hover{transform:scale(1.1)}.preview-share-btn{background:#222;border:2px solid #444;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px;transition:all .2s;width:100%}.preview-share-btn:hover{background:#2a2a2a;border-color:#0064c8}.share-modal{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.share-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;inset:0;position:absolute}.share-content{background:#1a1a1a;border-radius:20px;max-height:90vh;max-width:800px;overflow-y:auto;padding:32px;position:relative;width:90%;z-index:101}.share-close{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:16px;top:16px;transition:background .2s;width:36px}.share-close:hover{background:#fff3}.share-content h2{font-size:24px;font-weight:700;margin-bottom:24px}.share-layout{grid-gap:32px;display:grid;gap:32px;grid-template-columns:1fr 1.5fr}.share-left{align-items:center;display:flex;flex-direction:column}.share-cover{aspect-ratio:1;border-radius:12px;margin-bottom:16px;object-fit:cover;width:100%}.share-track-info{margin-bottom:16px;text-align:center}.share-track-title{font-size:18px;font-weight:600;margin-bottom:4px}.share-track-artist{color:#888;font-size:14px}.share-preview-btn{align-items:center;background:#0064c833;border:2px solid #0064c8;border-radius:24px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:10px 20px;transition:all .2s}.share-preview-btn:hover{background:#0064c84d}.share-right{display:flex;flex-direction:column}.share-right label{color:#ccc;font-size:14px;font-weight:600;margin-bottom:8px}.share-right textarea{background:#111;border:2px solid #222;border-radius:12px;color:#fff;font-family:inherit;font-size:15px;margin-bottom:8px;outline:none;padding:14px;resize:vertical;transition:border-color .2s;width:100%}.share-right textarea:focus{border-color:#0064c8}.char-count{color:#666;font-size:12px;margin-bottom:16px;text-align:right}.share-submit-btn{background:linear-gradient(135deg,#0064c8,#0052a3);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px;transition:transform .2s}.share-submit-btn:hover:not(:disabled){box-shadow:0 8px 24px #0064c866;transform:translateY(-2px)}.share-submit-btn:disabled{cursor:not-allowed;opacity:.6}@media (max-width:1600px){.feed-posts{column-count:5}}@media (max-width:1400px){.feed-posts{column-count:4}}@media (max-width:1200px){.feed-posts{column-count:4}}@media (max-width:1024px){.feed-posts{column-count:3}}@media (max-width:768px){.feed-posts{column-count:2}.share-layout{grid-template-columns:1fr}.search-results{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}@media (max-width:480px){.feed-posts{column-count:1}.friends-main{padding:12px}}
/*# sourceMappingURL=main.7653bd3c.css.map*/