.search-bar{margin-bottom:24px}.search-form{display:flex;gap:10px;align-items:center}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;background:#fff;border-radius:24px;box-shadow:0 4px 16px #00000014;transition:all .25s ease}.search-input-wrapper:focus-within{box-shadow:0 6px 24px #667eea40;transform:translateY(-1px)}.search-icon{position:absolute;left:18px;font-size:16px;pointer-events:none;color:#999}.search-input{width:100%;padding:12px 50px 12px 46px;border:none;border-radius:24px;font-size:14px;outline:none;background:transparent}.clear-btn{position:absolute;right:14px;background:#f5f5f5;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:#999;transition:all .2s ease}.clear-btn:hover{background:#e0e0e0;transform:scale(1.1)}.search-btn{padding:12px 28px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 12px #667eea4d;white-space:nowrap}.search-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #667eea66}.search-btn:active{transform:translateY(0)}.song-list{animation:fadeIn .5s ease}.section-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:16px;text-shadow:0 2px 8px rgba(0,0,0,.2)}.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.song-card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 4px 16px #00000014;transition:all .25s ease;cursor:pointer}.song-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.song-card.playing{background:linear-gradient(135deg,#667eea10,#764ba210);border:1.5px solid #667eea}.song-cover-wrapper{position:relative;width:100%;padding-bottom:100%;border-radius:10px;overflow:hidden;margin-bottom:10px}.song-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.song-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}.song-card:hover .song-overlay{opacity:1}.play-btn-large{width:48px;height:48px;border-radius:50%;background:#fff;border:none;font-size:18px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #00000040}.play-btn-large:hover{transform:scale(1.1)}.song-info{display:flex;flex-direction:column;gap:3px}.song-title{font-size:14px;font-weight:600;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-artist{font-size:12px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-album{font-size:11px;color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.song-duration{font-size:11px;color:#888;font-weight:500}.favorite-btn{background:none;border:none;font-size:18px;cursor:pointer;transition:all .25s ease}.favorite-btn:not(:disabled):hover{transform:scale(1.2)}.favorite-btn:disabled{cursor:not-allowed}.favorite-btn.favorited{animation:heartBeat .5s ease}@keyframes heartBeat{0%,to{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(1.1)}75%{transform:scale(1.2)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:#fff}.empty-icon{font-size:80px;margin-bottom:20px;opacity:.6}.empty-text{font-size:20px;opacity:.8}.favorites{animation:fadeIn .5s ease}.favorites-header{margin-bottom:20px}.favorites-stats{display:flex;gap:12px;margin-top:12px}.stat-item{display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:500;background:#ffffff26;padding:6px 14px;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-icon{font-size:14px}.favorites-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.favorite-item{display:flex;align-items:center;gap:12px;background:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 2px 8px #00000014;transition:all .25s ease;cursor:pointer}.favorite-item:hover{transform:translate(6px);box-shadow:0 4px 16px #0000001f}.favorite-item.playing{background:linear-gradient(135deg,#667eea10,#764ba210);border:1.5px solid #667eea}.favorite-index{font-size:14px;font-weight:600;color:#aaa;min-width:24px;text-align:center}.favorite-item.playing .favorite-index{color:#667eea}.favorite-cover-wrapper{position:relative;width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0}.favorite-cover{width:100%;height:100%;object-fit:cover}.favorite-play-btn{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000a6;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:0;transition:opacity .25s ease;display:flex;align-items:center;justify-content:center}.favorite-item:hover .favorite-play-btn{opacity:1}.favorite-details{flex:1;display:flex;align-items:center;gap:20px;min-width:0}.favorite-main-info{min-width:0;flex:1}.favorite-title{font-size:14px;font-weight:600;color:#333;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-artist{font-size:12px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-album{font-size:12px;color:#aaa;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-duration{font-size:12px;color:#888;font-weight:500;min-width:40px;text-align:right}.remove-btn{width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;color:#bbb;font-size:14px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.remove-btn:hover{background:#f44;color:#fff;transform:scale(1.1)}.play-all-section{display:flex;justify-content:center;margin-top:24px}.play-all-btn{display:flex;align-items:center;gap:8px;padding:12px 32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 16px #667eea4d}.play-all-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.play-all-icon{font-size:14px}.empty-hint{font-size:16px;color:#ffffffb3;margin-top:10px}@media(max-width:768px){.favorites-stats{flex-direction:column;gap:10px}.favorite-item{gap:10px;padding:12px 15px}.favorite-album{display:none}.favorite-details{gap:10px}}.player{position:fixed;bottom:0;left:0;right:0;background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -2px 16px #0000001a;z-index:1000;border-radius:20px 20px 0 0}.player-empty{padding:20px;min-height:90px;display:flex;align-items:center;justify-content:center}.player-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:#aaa;font-size:13px}.hint-icon{font-size:18px}.player-container{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:20px;padding:14px 28px;max-width:1600px;margin:0 auto}.player-song-info{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:48px;height:48px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px #00000026;animation:rotate 20s linear infinite;animation-play-state:running}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-text-info{min-width:0;flex:1}.player-song-title{font-size:14px;font-weight:600;color:#333;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-song-artist{font-size:12px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-controls-section{display:flex;flex-direction:column;gap:10px;align-items:center}.player-controls{display:flex;align-items:center;gap:12px}.control-btn{background:none;border:none;font-size:18px;cursor:pointer;color:#888;transition:all .25s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.control-btn:hover{color:#667eea;background:#f5f5f5;transform:scale(1.1)}.control-btn-play{width:40px;height:40px;font-size:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 10px #667eea4d}.control-btn-play:hover{background:linear-gradient(135deg,#7690ff,#8b5bb8);transform:scale(1.1)}.player-progress-section{display:flex;align-items:center;gap:12px;width:100%}.player-time{font-size:11px;color:#888;font-weight:500;min-width:36px;text-align:center}.player-progress{flex:1;height:5px;background:#e5e5e5;border-radius:3px;cursor:pointer;position:relative;overflow:hidden}.player-progress:hover{height:6px}.player-progress-bar{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;position:relative;transition:width .1s linear}.player-progress-handle{position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 2px 6px #00000040;opacity:0;transition:opacity .25s ease}.player-progress:hover .player-progress-handle{opacity:1}.player-volume-section{display:flex;align-items:center;justify-content:flex-end;gap:15px;position:relative}.volume-btn{background:none;border:none;font-size:24px;cursor:pointer;transition:all .3s ease}.volume-btn:hover{transform:scale(1.1)}.volume-slider{position:absolute;right:50px;width:120px;opacity:0;pointer-events:none;transition:opacity .3s ease}.volume-slider.visible{opacity:1;pointer-events:all}.volume-track{height:6px;background:#e0e0e0;border-radius:3px;cursor:pointer;position:relative}.volume-bar{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;position:relative;transition:width .1s ease}.volume-handle{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d}@media(max-width:1024px){.player-container{grid-template-columns:1fr 2fr;gap:20px}.player-volume-section{display:none}}@media(max-width:768px){.player-container{grid-template-columns:1fr;gap:15px;padding:15px 20px}.player-song-info{justify-content:center}.player-controls-section,.player-progress-section{width:100%}}.loading-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .12s ease-out}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-spinner{position:relative;width:120px;height:120px;display:flex;justify-content:center;align-items:center}.spinner-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent;border-top-color:#667eea;animation:spin 1.5s cubic-bezier(.68,-.55,.265,1.55) infinite}.spinner-ring:nth-child(2){width:80%;height:80%;border-top-color:#764ba2;animation-duration:1.2s;animation-direction:reverse}.spinner-ring:nth-child(3){width:60%;height:60%;border-top-color:#f093fb;animation-duration:.9s}.music-icon{font-size:32px;animation:bounce .8s ease-in-out infinite}.loading-text{color:#fff;font-size:18px;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.3);animation:pulse 1.5s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.loading-overlay~*{pointer-events:none}.toast-container{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{display:flex;align-items:center;gap:12px;min-width:300px;max-width:450px;padding:16px 20px;background:#fffffffa;border-radius:12px;box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;animation:slideIn .3s cubic-bezier(.34,1.56,.64,1),fadeOut .3s ease-in 2.7s forwards;border-left:4px solid;transform-origin:right center}@keyframes slideIn{0%{transform:translate(120%) scale(.8);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes fadeOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(120%) scale(.8)}}.toast-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.toast-icon svg{width:100%;height:100%;stroke-width:2.5}.toast-message{flex:1;font-size:14px;font-weight:500;line-height:1.5;color:#333;word-break:break-word}.toast-success{border-left-color:#10b981;background:linear-gradient(135deg,#10b98114,#fffffffa)}.toast-success .toast-icon{color:#10b981;background:#10b9811a;border-radius:50%;padding:4px}.toast-error{border-left-color:#ef4444;background:linear-gradient(135deg,#ef444414,#fffffffa)}.toast-error .toast-icon{color:#ef4444;background:#ef44441a;border-radius:50%;padding:4px}.toast-info{border-left-color:#3b82f6;background:linear-gradient(135deg,#3b82f614,#fffffffa)}.toast-info .toast-icon{color:#3b82f6;background:#3b82f61a;border-radius:50%;padding:4px}.toast-warning{border-left-color:#f59e0b;background:linear-gradient(135deg,#f59e0b14,#fffffffa)}.toast-warning .toast-icon{color:#f59e0b;background:#f59e0b1a;border-radius:50%;padding:4px}@media(max-width:768px){.toast-container{top:60px;right:10px;left:10px;align-items:stretch}.toast{min-width:auto;max-width:none;width:100%;padding:14px 16px}.toast-message{font-size:13px}}@media(prefers-color-scheme:dark){.toast{background:#1e1e1efa;box-shadow:0 8px 32px #0000004d,0 2px 8px #0003}.toast-message{color:#e5e5e5}.toast-success{background:linear-gradient(135deg,#10b9811f,#1e1e1efa)}.toast-error{background:linear-gradient(135deg,#ef44441f,#1e1e1efa)}.toast-info{background:linear-gradient(135deg,#3b82f61f,#1e1e1efa)}.toast-warning{background:linear-gradient(135deg,#f59e0b1f,#1e1e1efa)}}.login-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998;animation:fadeIn .3s ease}.login-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:20px;padding:40px;width:90%;max-width:420px;z-index:9999;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.login-close{position:absolute;top:16px;right:16px;background:#f5f5f5;border:none;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:#666}.login-close:hover{background:#e0e0e0;transform:rotate(90deg)}.login-close:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.login-close:disabled:hover{background:#f5f5f5;transform:none}.login-content{display:flex;flex-direction:column;gap:20px}.login-title{font-size:28px;font-weight:700;color:#333;text-align:center;margin:0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-desc{font-size:14px;color:#666;text-align:center;margin:0}.login-form{display:flex;flex-direction:column;gap:20px;margin-top:10px}.login-input-group{position:relative}.login-input{width:100%;padding:14px 16px;border:2px solid #e0e0e0;border-radius:12px;font-size:14px;outline:none;transition:all .3s ease;background:#fff}.login-input:focus{border-color:#667eea}.login-input:focus+.login-label,.login-input:not(:placeholder-shown)+.login-label{top:-10px;left:12px;font-size:12px;color:#667eea;background:#fff;padding:0 6px}.login-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#999;font-size:14px;pointer-events:none;transition:all .3s ease}.login-error{padding:10px 14px;background:#ffe6e6;border:1px solid #ffcccc;border-radius:8px;color:#c00;font-size:13px;text-align:center}.login-submit{width:100%;padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #667eea4d;margin-top:10px}.login-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.login-submit:active{transform:translateY(0)}.login-divider{display:flex;align-items:center;text-align:center;margin:10px 0}.login-divider:before,.login-divider:after{content:"";flex:1;border-bottom:1px solid #e0e0e0}.login-divider span{padding:0 16px;color:#999;font-size:13px}.login-third-party{display:flex;gap:12px;justify-content:center}.third-party-btn{flex:1;padding:12px 20px;border:2px solid #e0e0e0;border-radius:12px;background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.third-party-btn:hover{border-color:#667eea;background:#f8f9ff;transform:translateY(-2px)}.codeforces-btn{color:#1f8dd6}.codeforces-btn:hover{border-color:#1f8dd6;background:#e6f4ff}.codeforces-logo{height:24px;object-fit:contain}.login-footer{text-align:center;font-size:14px;color:#666;margin-top:10px}.login-switch{background:none;border:none;color:#667eea;font-weight:600;cursor:pointer;margin-left:4px;font-size:14px;transition:color .2s ease}.login-switch:hover{color:#764ba2;text-decoration:underline}.login-hint{text-align:center;font-size:13px;color:#667eea;margin-top:16px;padding:12px;background:#f0f4ff;border-radius:8px;border:1px solid #d0dcff}.register-notice{text-align:center;font-size:14px;color:#10b981;margin-top:16px;padding:12px;background:#ecfdf5;border-radius:8px;border:1px solid #a7f3d0;font-weight:500}@media(max-width:480px){.login-popup{padding:30px 24px;width:95%}.login-title{font-size:24px}}.app{min-height:100vh;display:flex;flex-direction:column;padding-bottom:90px}.app-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:16px 28px;box-shadow:0 2px 12px #00000014;position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.header-left{display:flex;align-items:center}.header-center{display:flex;justify-content:center}.header-right{display:flex;justify-content:flex-end;align-items:center}.app-title{font-size:24px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.user-info{display:flex;align-items:center;gap:12px}.username{font-size:14px;font-weight:500;color:#333}.login-btn,.logout-btn{padding:8px 20px;border:none;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s ease}.login-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 10px #667eea4d}.login-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #667eea66}.logout-btn{background:#f5f5f5;color:#666}.logout-btn:hover{background:#e8e8e8;color:#333}.tab-navigation{display:flex;gap:10px}.tab-btn{padding:8px 20px;border:none;border-radius:20px;background:#f5f5f5;color:#888;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s ease}.tab-btn:hover{background:#e8e8e8;transform:translateY(-1px)}.tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 10px #667eea4d}.app-content{flex:1;padding:24px 28px;max-width:1400px;width:100%;margin:0 auto}.search-section{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.app-header{grid-template-columns:1fr;gap:12px}.header-left,.header-center,.header-right{justify-content:center}.app-title{font-size:20px}.username{font-size:13px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}