@import url(https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}.app,body,html{max-width:100vw;overflow-x:hidden}.app{background:linear-gradient(135deg,#0a0015,#1a0030,#0d001a);color:#fff;font-family:Rajdhani,sans-serif;min-height:100vh}.app:before{background:radial-gradient(ellipse at 20% 80%,#ff008026,#0000 50%),radial-gradient(ellipse at 80% 20%,#00ffff26,#0000 50%);content:"";inset:0;pointer-events:none;position:fixed}.container{box-sizing:border-box;margin:0 auto;max-width:100%;overflow-x:hidden;padding:20px 40px;position:relative;width:100%;z-index:1}.header{align-items:center;display:flex;justify-content:space-between;padding:20px 0;position:relative}.header-left{cursor:pointer;text-align:left;transition:opacity .2s ease}.header-left:hover{opacity:.8}.header-right{gap:12px}.header-right,.user-profile{align-items:center;display:flex}.user-profile{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50px;cursor:pointer;gap:10px;padding:8px 12px;position:relative;transition:all .3s ease}.user-profile:hover{background:#ffffff1a;border-color:#00ffff4d}.user-avatar{border:2px solid #ff00ff80;border-radius:50%;height:40px;width:40px}.user-info{display:flex;flex-direction:column;text-align:left}.user-name{display:flex;font-size:.9rem;font-weight:600;gap:4px}.user-name,.verified-badge{align-items:center;color:#fff}.verified-badge{background:linear-gradient(135deg,#00d9ff,#00b4d8);border-radius:50%;box-shadow:0 0 6px #00d9ff80;display:inline-flex;font-size:10px;font-weight:700;height:16px;justify-content:center;width:16px}.user-stats{color:#888;font-size:.7rem}.user-menu{background:#140a1efa;border:1px solid #ff00ff4d;border-radius:15px;box-shadow:0 10px 40px #00000080,0 0 20px #f0f3;padding:15px;position:absolute;right:0;top:calc(100% + 10px);width:280px;z-index:1000}.user-menu-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;gap:12px;margin-bottom:12px;padding-bottom:12px}.user-menu-avatar{border:2px solid #00ffff80;border-radius:50%;height:50px;width:50px}.user-menu-stats{border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-around;margin-bottom:12px;padding:10px 0}.user-stat-item{align-items:center;display:flex;flex-direction:column}.user-stat-value{color:#0ff;font-size:1.2rem;font-weight:700}.user-stat-label{font-size:.7rem}.user-history h4,.user-stat-label{color:#888;text-transform:uppercase}.user-history h4{font-size:.8rem;margin-bottom:8px}.history-item{align-items:center;background:#ffffff08;border-radius:8px;display:flex;gap:10px;margin-bottom:6px;padding:8px}.history-item img{border-radius:4px;height:30px;object-fit:cover;width:40px}.history-info{display:flex;flex:1 1;flex-direction:column;min-width:0}.history-title{color:#fff;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-score{color:#0ff;font-size:.7rem}.btn-signup{background:linear-gradient(135deg,#f0f3,#0ff3);border:1px solid #ff00ff4d;border-radius:8px;color:#fff;cursor:pointer;font-family:inherit;margin-top:12px;padding:10px;transition:all .3s ease;width:100%}.btn-signup:hover:not(:disabled){background:linear-gradient(135deg,#ff00ff4d,#00ffff4d)}.btn-signup:disabled{cursor:not-allowed;opacity:.5}.user-menu-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}.user-menu-actions .btn-login,.user-menu-actions .btn-signup{margin-top:0}.btn-login{background:#0000;border:1px solid #fff3;border-radius:8px;color:#aaa;cursor:pointer;font-family:inherit;padding:10px;transition:all .3s ease;width:100%}.btn-login:hover{background:#ffffff0d;border-color:#ffffff4d;color:#fff}.signup-link{border-top:1px solid #ffffff1a;color:#888;font-size:.9rem;margin-top:15px;padding-top:15px;text-align:center}.signup-link button{background:none;border:none;color:#9f7aea;cursor:pointer;font-family:inherit;font-size:inherit;text-decoration:underline}.signup-link button:hover{color:#b794f4}.login-icon{font-size:3rem;margin-bottom:10px}.btn-logout{background:#0000;border:1px solid #ff64644d;border-radius:8px;color:#ff6b6b;cursor:pointer;font-family:inherit;margin-top:8px;padding:10px;transition:all .3s ease;width:100%}.btn-logout:hover{background:#ff64641a;border-color:#ff646480}@media (max-width:600px){.header{flex-direction:column;gap:15px}.header-left{text-align:center}.logo{font-size:1.6rem}.subtitle{font-size:.7rem}.user-profile{justify-content:center;padding:6px 10px;width:100%}.user-avatar{height:32px;width:32px}.user-name{font-size:.8rem}.user-stats{font-size:.65rem}.user-menu{left:50%;right:auto;transform:translateX(-50%)}.container{padding:10px 8px}}@media (max-width:400px){.logo{font-size:1.4rem}.subtitle{font-size:.65rem;letter-spacing:.5px}.user-profile{gap:6px;padding:5px 8px}.user-avatar{height:28px;width:28px}.user-name{font-size:.75rem}.user-stats{font-size:.6rem}.verified-badge{font-size:8px;height:14px;width:14px}.container{padding:8px 6px}.search-input{font-size:.9rem;padding:10px 14px}.search-btn{font-size:.85rem;padding:10px 16px}}.modal-overlay{align-items:center;background:#000c;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:2000}.signup-modal{background:linear-gradient(135deg,#1a0030,#0d001a);border:1px solid #ff00ff4d;border-radius:20px;box-shadow:0 20px 60px #00000080,0 0 40px #f0f3;max-width:400px;padding:30px;position:relative;width:100%}.modal-close{background:none;border:none;color:#888;cursor:pointer;font-size:1.5rem;position:absolute;right:15px;top:15px;transition:color .3s}.modal-close:hover{color:#fff}.signup-header{margin-bottom:25px;text-align:center}.signup-avatar{border:3px solid #00ffff80;border-radius:50%;height:80px;margin-bottom:15px;width:80px}.signup-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:1.5rem;margin-bottom:5px}.signup-header p{color:#888;font-size:.9rem}.signup-form{gap:18px}.form-group,.signup-form{display:flex;flex-direction:column}.form-group{gap:6px}.form-group label{color:#aaa;font-size:.85rem;font-weight:600}.form-group input{background:#ffffff0d;border:2px solid #ffffff1a;border-radius:10px;color:#fff;font-family:inherit;font-size:1rem;padding:12px 15px;transition:all .3s ease}.form-group input:focus{border-color:#00ffff80;box-shadow:0 0 15px #0ff3;outline:none}.form-group input.error{border-color:#f55;box-shadow:0 0 10px #f553}.form-group input::placeholder{color:#555}.input-with-status{position:relative}.input-with-status input{padding-right:40px;width:100%}.input-with-status .available,.input-with-status .checking{font-size:.9rem;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.input-with-status .checking{color:#888}.input-with-status .available{color:#0f8}.field-error{color:#f55;font-size:.75rem}.btn-submit-signup{background:linear-gradient(135deg,#f0f,#0ff);border:none;border-radius:10px;color:#fff;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:700;margin-top:10px;padding:14px;transition:all .3s ease}.btn-submit-signup:hover:not(:disabled){box-shadow:0 5px 20px #f0f6;transform:translateY(-2px)}.btn-submit-signup:disabled{cursor:not-allowed;opacity:.5}.auth-divider{align-items:center;display:flex;gap:15px;margin:20px 0}.auth-divider:after,.auth-divider:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";flex:1 1;height:1px}.auth-divider span{color:#666;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}.google-signin-container{display:flex;justify-content:center;margin-bottom:10px}.google-button-wrapper{display:flex;justify-content:center;width:100%}.google-button-wrapper iframe,.google-button-wrapper>div{width:100%!important}.google-loading{color:#888;font-size:.9rem;padding:12px;text-align:center}.btn-google-fallback{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;color:#666;cursor:not-allowed;font-family:inherit;font-size:.9rem;padding:12px;width:100%}.signup-footer{color:#666;font-size:.8rem;margin-top:20px;text-align:center}.btn-edit-profile{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;color:#aaa;cursor:pointer;font-family:inherit;font-size:.85rem;margin-top:8px;padding:10px;transition:all .3s ease;width:100%}.btn-edit-profile:hover{background:#ffffff1a;border-color:#00ffff4d;color:#fff}.field-hint{color:#666;font-size:.7rem;margin-top:4px}.form-group input.disabled{background:#ffffff05;color:#666;cursor:not-allowed}@media (max-width:500px){.signup-modal{padding:20px}.signup-avatar{height:60px;width:60px}.signup-header h2{font-size:1.2rem}}.mic-test-modal{background:linear-gradient(145deg,#1a0a2e,#0d0015);border:1px solid #ff00ff4d;border-radius:20px;box-shadow:0 0 60px #f0f3,inset 0 0 60px #0000004d;max-height:90vh;max-width:450px;overflow-y:auto;padding:30px;position:relative;width:90%}.mic-test-header{margin-bottom:25px;text-align:center}.mic-test-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:1.5rem;margin-bottom:8px}.mic-test-header p{color:#888;font-size:.9rem}.mic-test-content{display:flex;flex-direction:column;gap:25px}.mic-test-volume{display:flex;flex-direction:column;gap:10px}.mic-test-volume label{color:#aaa;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}.volume-bar-container{background:#ffffff1a;border-radius:15px;height:30px;overflow:hidden;position:relative}.volume-bar{background:linear-gradient(90deg,#444,#888);border-radius:15px;height:100%;transition:width .1s ease,background .3s ease}.volume-bar.good{background:linear-gradient(90deg,#0f8,#0fc);box-shadow:0 0 20px #0f86}.volume-bar.weak{background:linear-gradient(90deg,#fa0,#f60);box-shadow:0 0 20px #fa06}.volume-markers{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.volume-markers span{color:#fff6;font-size:.65rem;position:absolute;text-transform:uppercase;top:50%;transform:translate(-50%,-50%)}.volume-percent{color:#fff;font-size:.9rem;font-weight:700}.mic-test-pitch,.volume-percent{text-align:center}.pitch-display{align-items:center;background:#00ffff1a;border:1px solid #0ff3;border-radius:15px;display:flex;flex-direction:column;gap:5px;padding:20px}.pitch-note{color:#0fc;font-family:Orbitron,monospace;font-size:2.5rem;font-weight:700;text-shadow:0 0 20px #00ffcc80}.pitch-freq{color:#888;font-size:.9rem}.mic-test-status{border-radius:10px;font-weight:700;padding:15px;text-align:center;transition:all .3s ease}.mic-test-status.status-idle{background:#ffffff1a;color:#888}.mic-test-status.status-listening{animation:pulse-listening 1.5s ease-in-out infinite;background:#0096ff33;color:#4da6ff}.mic-test-status.status-good{background:#0f83;box-shadow:0 0 20px #0f83;color:#0f8}.mic-test-status.status-weak{background:#fa03;color:#fa0}.mic-test-status.status-none{background:#ff323233;color:#f55}@keyframes pulse-listening{0%,to{opacity:1}50%{opacity:.6}}.mic-test-boost{display:flex;flex-direction:column;gap:12px}.mic-test-boost label{color:#aaa;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}.boost-options{display:flex;gap:10px;justify-content:center}.boost-btn{background:#ffffff0d;border:2px solid #ff00ff4d;border-radius:10px;color:#fff;cursor:pointer;font-weight:700;padding:12px 20px;transition:all .2s ease}.boost-btn:hover{background:#ff00ff1a;border-color:#f0f9}.boost-btn.active{background:#ff00ff4d;border-color:#f0f;box-shadow:0 0 20px #ff00ff4d}.boost-hint{color:#888;font-size:.8rem;margin:0;text-align:center}.mic-test-actions{display:flex;gap:15px;margin-top:20px}.btn-restart-test,.btn-save-test{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-weight:700;padding:15px;transition:all .2s ease}.btn-restart-test{background:#ffffff1a;border:1px solid #fff3;color:#fff}.btn-restart-test:hover{background:#ffffff26}.btn-save-test{background:linear-gradient(135deg,#f0f,#0ff);color:#000}.btn-save-test:hover{box-shadow:0 5px 20px #f0f6;transform:translateY(-2px)}.user-menu-mic-test{border-top:1px solid #ffffff1a;padding:10px 15px}.btn-mic-test{align-items:center;background:#00ffff1a;border:1px solid #00ffff4d;border-radius:8px;color:#0fc;cursor:pointer;display:flex;font-weight:700;gap:8px;justify-content:center;padding:12px;transition:all .2s ease;width:100%}.btn-mic-test:hover{background:#0ff3;border-color:#00ffff80}.btn-mic-test .boost-badge{background:#ff00ff4d;border-radius:10px;color:#f8f;font-size:.75rem;padding:2px 8px}@media (max-width:500px){.mic-test-modal{padding:20px}.boost-btn{font-size:.9rem;padding:10px 15px}.pitch-note{font-size:2rem}}.suggestion-modal{background:linear-gradient(145deg,#1a0a2e,#0d0015);border:1px solid #ffc8004d;border-radius:20px;box-shadow:0 0 60px #ffc80026,inset 0 0 60px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;padding:30px;position:relative;width:90%}.suggestion-header{margin-bottom:25px;text-align:center}.suggestion-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,gold,#fa0);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:1.4rem;margin-bottom:8px}.suggestion-header p{color:#888;font-size:.9rem}.suggestion-content{display:flex;flex-direction:column;gap:20px}.suggestion-success{padding:40px 20px;text-align:center}.suggestion-success .success-icon{display:block;font-size:3rem;margin-bottom:15px}.suggestion-success h3{color:#0f8;font-size:1.5rem;margin-bottom:10px}.suggestion-success p{color:#888}.suggestion-topics label{color:#aaa;display:block;font-size:.85rem;letter-spacing:1px;margin-bottom:12px;text-transform:uppercase}.topic-options{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}.topic-btn{align-items:center;background:#ffffff08;border:1px solid #ffffff1a;border-radius:10px;color:#ccc;cursor:pointer;display:flex;gap:8px;padding:12px 15px;text-align:left;transition:all .2s ease}.topic-btn:hover{background:#ffffff14;border-color:#ffc8004d}.topic-btn.active{background:#ffc80026;border-color:#ffc80080;color:gold}.topic-emoji{font-size:1.2rem}.topic-label{font-size:.85rem}.suggestion-message label{color:#aaa;display:block;font-size:.85rem;letter-spacing:1px;margin-bottom:10px;text-transform:uppercase}.suggestion-message textarea{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;color:#fff;font-size:.95rem;padding:15px;resize:none;transition:border-color .2s ease;width:100%}.suggestion-message textarea:focus{border-color:#ffc80080;outline:none}.suggestion-message textarea::placeholder{color:#555}.char-counter{color:#666;font-size:.8rem;margin-top:8px;text-align:right}.char-counter .warning{color:#f80}.suggestion-error{background:#ff323226;border:1px solid #ff32324d;border-radius:10px;color:#f66;font-size:.9rem;padding:12px 15px}.suggestion-actions{display:flex;gap:15px;margin-top:10px}.btn-cancel-suggestion,.btn-send-suggestion{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-weight:700;padding:15px;transition:all .2s ease}.btn-cancel-suggestion{background:#ffffff1a;border:1px solid #ffffff1a;color:#888}.btn-cancel-suggestion:hover{background:#ffffff26;color:#fff}.btn-send-suggestion{background:linear-gradient(135deg,gold,#f80);color:#000}.btn-send-suggestion:hover:not(:disabled){box-shadow:0 5px 20px #ffc80066;transform:translateY(-2px)}.btn-send-suggestion:disabled{cursor:not-allowed;opacity:.5}.user-menu-suggestion{padding:5px 15px 10px}.btn-suggestion{background:#ffc8001a;border:1px solid #ffc8004d;border-radius:8px;color:gold;cursor:pointer;font-weight:700;padding:12px;transition:all .2s ease;width:100%}.btn-suggestion:hover{background:#ffc80033;border-color:#ffc80080}@media (max-width:500px){.suggestion-modal{padding:20px}.topic-options{grid-template-columns:1fr}.topic-btn{padding:10px 12px}}.logo{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:2.5rem;font-weight:900}.subtitle{color:#888;font-size:.9rem;letter-spacing:2px;margin-top:5px;text-transform:uppercase}.api-key-section{padding:20px;text-align:center}.api-key-box{background:#ffffff0d;border:2px solid #00ffff4d;border-radius:15px;margin:0 auto;max-width:500px;padding:25px}.search-box{display:flex;gap:10px;margin:20px auto;max-width:500px}.search-input{background:#ffffff0d;border:2px solid #ff00ff4d;border-radius:50px;color:#fff;flex:1 1;font-family:Rajdhani,sans-serif;font-size:1rem;outline:none;padding:12px 18px}.search-input:focus{border-color:#f0f;box-shadow:0 0 20px #ff00ff4d}.search-input::placeholder{color:#666}.search-input-wrapper{flex:1 1;position:relative}.search-input-wrapper .search-input{width:100%}.search-suggestions{background:#140a1efa;border:1px solid #f0f6;border-radius:12px;box-shadow:0 10px 40px #00000080,0 0 20px #f0f3;left:0;max-height:350px;overflow:hidden;overflow-y:auto;position:absolute;right:0;top:calc(100% + 5px);z-index:1000}.suggestion-item{align-items:center;border-bottom:1px solid #ffffff0d;cursor:pointer;display:flex;gap:12px;padding:12px 16px;transition:background .2s}.suggestion-item:last-child{border-bottom:none}.suggestion-item.selected,.suggestion-item:hover{background:#ff00ff26}.suggestion-icon{font-size:1.2rem;text-align:center;width:30px}.suggestion-text{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.suggestion-main{color:#fff;font-size:.95rem}.suggestion-main,.suggestion-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.suggestion-sub{color:#888;font-size:.8rem}.btn{border:none;border-radius:50px;cursor:pointer;font-family:Orbitron,monospace;font-size:.95rem;font-weight:700;padding:12px 25px;text-transform:uppercase;transition:all .3s}.btn-primary{background:linear-gradient(135deg,#f0f,#8000ff);color:#fff}.btn-primary:hover{box-shadow:0 8px 25px #ff00ff80;transform:translateY(-2px)}.btn-secondary{background:linear-gradient(135deg,#0ff,#0080ff);color:#000}.btn-danger{background:linear-gradient(135deg,#ff0040,#ff0080);color:#fff}.btn-discard{background:linear-gradient(135deg,#666,#444);border:1px solid #888;color:#fff}.btn-discard:hover{background:linear-gradient(135deg,#777,#555);border-color:#aaa}.completion-warning{align-items:center;background:#ff960026;border:1px solid #ff960066;border-radius:8px;color:#ff9600;display:flex;font-size:.9rem;gap:8px;justify-content:center;margin:15px 0;padding:10px 16px}.completion-icon{font-size:1.1rem}.discarded-badge{align-items:center;background:#64646433;border:1px solid #96969666;border-radius:8px;color:#999;display:flex;font-size:.9rem;justify-content:center;margin:15px 0;padding:10px 16px}.results{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:20px}@media (max-width:500px){.results{gap:10px;grid-template-columns:1fr}}.card{background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;cursor:pointer;overflow:hidden;transition:all .3s}.card:hover{border-color:#f0f;box-shadow:0 10px 35px #ff00ff40;transform:translateY(-5px)}.thumb{background:#1a0030;height:130px;object-fit:cover;width:100%}.info{padding:12px}.title{color:#fff;font-size:.9rem;font-weight:600;line-height:1.3;margin-bottom:4px}.artist{color:#0ff;font-size:.75rem}.dur{color:#888;font-size:.7rem;margin-top:2px}.yt-badge{background:red;border-radius:2px;color:#fff;font-size:.55rem;margin-left:4px;padding:1px 4px}.preview{margin:0 auto;max-width:750px;position:relative;text-align:center;z-index:10}.analysis{-webkit-overflow-scrolling:touch;align-items:flex-start;display:flex;inset:0;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:40px 20px 20px;position:fixed;text-align:center;z-index:100}.preview-header{margin-bottom:20px}.preview-title{color:#fff;font-size:1.3rem;line-height:1.3;margin:0 0 8px}.preview-artist{color:#0ff;font-size:.95rem;margin:0 0 5px}.preview-duration{color:#f0f;font-family:Orbitron,monospace;font-size:1.1rem;margin:0}.local-player-notice{background:#ffa50026;border-radius:20px;color:orange;display:inline-block;font-size:.9rem;margin:8px 0 0;padding:6px 12px}.difficulty-selector{align-items:center;display:flex;flex-direction:column;gap:12px;margin:20px auto}.difficulty-label{color:#ffffffb3;font-family:Orbitron,monospace;font-size:.9rem;letter-spacing:2px;text-transform:uppercase}.difficulty-options{display:flex;gap:10px}.difficulty-btn{align-items:center;background:#ffffff0d;border:2px solid #fff3;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:90px;padding:12px 20px;transition:all .3s ease}.difficulty-btn:hover{background:#ffffff1a;border-color:#fff6;transform:translateY(-2px)}.difficulty-btn.active{background:linear-gradient(135deg,#ff00ff4d,#00ffff4d);border-color:#f0f;box-shadow:0 0 20px #ff00ff4d}.difficulty-emoji{font-size:1.5rem}.difficulty-name{color:#fff;font-family:Orbitron,monospace;font-size:.8rem;font-weight:700;letter-spacing:1px}.difficulty-multiplier{color:#ffffff80;font-family:Orbitron,monospace;font-size:.7rem}.difficulty-btn.active .difficulty-multiplier{color:#0ff}.btn-start{align-items:center;animation:pulse-btn 2s ease-in-out infinite;background:linear-gradient(135deg,#ff00ff4d,#00ffff4d);border:3px solid #ffffff4d;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;gap:15px;height:200px;justify-content:center;margin:25px auto;transition:all .3s ease;width:200px}.btn-start:hover{background:linear-gradient(135deg,#ff00ff80,#00ffff80);border-color:#fff;box-shadow:0 0 40px #ff00ff80,0 0 80px #00ffff4d;transform:scale(1.1)}@keyframes pulse-btn{0%,to{box-shadow:0 0 20px #ff00ff4d,0 0 40px #0ff3}50%{box-shadow:0 0 40px #ff00ff80,0 0 60px #00ffff4d}}.btn-start-icon{color:#fff;font-size:3rem;text-shadow:0 0 20px #fffc}.btn-start-text{color:#fff;font-family:Orbitron,monospace;font-size:1.2rem;font-weight:700;letter-spacing:3px}.preview-player{margin:0 auto;max-width:600px;opacity:.7;transition:opacity .3s}.preview-player:hover{opacity:1}.preview-hint{color:#888;font-size:.85rem;margin-top:15px}.singing{margin:0 auto;max-width:100%;padding:0;text-align:center}.karaoke-stage{align-items:center;background:linear-gradient(180deg,#0a0015,#1a0030 50%,#0a0015);display:flex;flex-direction:column;justify-content:flex-start;min-height:100vh;overflow:hidden;padding:15px;position:relative}.particles{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:0}.particle{animation:float-up 6s ease-in-out infinite;background:#ff00ff80;border-radius:50%;bottom:-10px;box-shadow:0 0 6px #f0f9;height:3px;position:absolute;width:3px}.particle:nth-child(2n){background:#00ffff80;box-shadow:0 0 6px #0ff9}@keyframes float-up{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:.8}90%{opacity:.8}to{opacity:0;transform:translateY(-100vh) scale(.3)}}.stage-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0009;border:1px solid #ffffff1a;border-radius:50px;gap:20px;justify-content:center;margin-bottom:15px;padding:12px 25px;z-index:10}.rec-minimal,.stage-header{align-items:center;display:flex}.rec-minimal{color:#ff0040;font-family:Orbitron,monospace;font-size:.75rem;font-weight:700;gap:8px;letter-spacing:1px;transition:color .3s ease}.rec-minimal.paused{color:#ff9600}.rec-minimal.paused .dot{animation:none;background:#ff9600;box-shadow:0 0 8px #ff960099}.pitch-minimal{color:#0ff;font-family:Orbitron,monospace;font-size:.9rem;transition:all .1s ease}.difficulty-indicator{align-items:center;border-radius:20px;display:flex;font-family:Orbitron,monospace;font-size:.7rem;font-weight:700;gap:6px;letter-spacing:1px;padding:5px 12px}.difficulty-indicator.difficulty-easy{background:#00ff8026;border:1px solid #00ff804d;color:#00ff80}.difficulty-indicator.difficulty-normal{background:#ff00ff26;border:1px solid #ff00ff4d;color:#f0f}.difficulty-indicator.difficulty-hard{background:#ff660026;border:1px solid #ff66004d;color:#f60}.difficulty-indicator .multiplier{font-size:.6rem;opacity:.7}.mic-badge{border-radius:20px;font-size:.65rem;font-weight:700;letter-spacing:1px;padding:4px 10px}.mic-badge.mic-on{background:#00ff0026;border:1px solid #00ff004d;color:#0f0}.mic-badge.mic-off{background:#ff000026;border:1px solid #ff00004d;color:red}.video-stage{margin:10px 0;max-width:900px;position:relative;width:100%;z-index:5}.video-glow-outer{background:#0000;border-radius:20px;inset:-8px;z-index:1}.video-glow-inner,.video-glow-outer{pointer-events:none;position:absolute;transition:all .1s ease-out}.video-glow-inner{border-radius:40px;filter:blur(40px);inset:-60px;z-index:0}.video-container{background:#000;border-radius:12px;box-shadow:0 10px 50px #000c;overflow:hidden;position:relative;width:100%;z-index:2}.video-player{aspect-ratio:16/9;display:block;width:100%}.video-player.local-video{background:#000;border-radius:8px;height:100%;object-fit:contain;width:100%}.video-container iframe{border:none;display:block;height:100%;width:100%}.wave-minimal{align-items:flex-end;display:flex;gap:4px;height:40px;justify-content:center;margin:15px 0;padding:8px 20px;z-index:10}.wave-bar-mini{background:linear-gradient(0deg,#ff00ff80,#00ffff80);border-radius:2px;min-height:4px;transition:height .05s ease-out,opacity .1s ease,background .2s ease;width:4px}.wave-bar-mini.active{background:linear-gradient(0deg,#f0f,#0ff);box-shadow:0 0 8px #00ffff80}.progress-minimal{align-items:center;display:flex;gap:12px;max-width:500px;width:100%;z-index:10}.time-mini{color:#fff9;font-family:Orbitron,monospace;font-size:.8rem;min-width:45px}.time-mini:first-child{text-align:right}.progress-track{background:#ffffff26;border-radius:2px;flex:1 1;height:4px;overflow:hidden}.progress-thumb{background:linear-gradient(90deg,#f0f,#0ff);border-radius:2px;height:100%;position:relative;transition:width .25s linear}.progress-thumb:after{background:#fff;border-radius:50%;box-shadow:0 0 10px #0ff;content:"";height:8px;position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:8px}.btn-stop-minimal{background:linear-gradient(135deg,#ff0040cc,#ff0080cc);border:none;border-radius:30px;color:#fff;cursor:pointer;font-family:Orbitron,monospace;font-size:.85rem;font-weight:700;letter-spacing:2px;margin-top:20px;padding:12px 35px;transition:all .3s ease;z-index:10}.btn-stop-minimal:hover{box-shadow:0 5px 25px #ff004080;transform:scale(1.05)}.debug-mini{background:#0009;border-radius:15px;bottom:15px;color:#fff6;display:flex;font-size:.7rem;gap:15px;left:50%;padding:6px 15px;transform:translateX(-50%)}.debug-mini,.singer-panel{position:fixed;z-index:100}.singer-panel{background:#140a1ef2;border:1px solid #6b46c180;border-radius:15px;box-shadow:0 5px 30px #00000080,0 0 20px #6b46c133;max-width:220px;min-width:180px;padding:12px;right:15px;top:50%;transform:translateY(-50%)}.singer-panel-header{border-bottom:1px solid #6b46c14d;color:#9f7aea;font-family:Orbitron,monospace;font-size:.75rem;font-weight:600;letter-spacing:1px;margin-bottom:10px;padding-bottom:10px;text-align:center}.singer-panel-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.singer-panel-item{align-items:center;background:#ffffff08;border:1px solid #0000;border-radius:10px;cursor:pointer;display:flex;gap:10px;padding:8px 10px;transition:all .2s ease}.singer-panel-item:hover{background:#6b46c133;border-color:#6b46c14d}.singer-panel-item.active{background:#6b46c14d;border-color:#9f7aea99;box-shadow:0 0 15px #6b46c14d}.singer-panel-avatar{border:2px solid #fff3;border-radius:50%;height:36px;width:36px}.singer-panel-item.active .singer-panel-avatar{border-color:#9f7aea;box-shadow:0 0 10px #9f7aea80}.singer-panel-info{display:flex;flex:1 1;flex-direction:column;min-width:0}.singer-panel-name{color:#fff;font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.singer-panel-stats{color:#888;font-size:.7rem}.singer-panel-badge{animation:pulse-mic 1s ease-in-out infinite;font-size:1rem}@keyframes pulse-mic{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}}@media (max-width:900px){.singer-panel{max-width:180px;min-width:150px;padding:10px;right:10px}.singer-panel-avatar{height:30px;width:30px}.singer-panel-name{font-size:.8rem}}@media (max-width:600px){.singer-panel{bottom:80px;flex-direction:row;left:50%;max-width:95%;min-width:auto;position:fixed;right:auto;top:auto;transform:translateX(-50%);width:auto}.singer-panel-header{display:none}.singer-panel-list{flex-direction:row;gap:5px;max-height:none;overflow-x:auto}.singer-panel-item{flex-direction:column;min-width:60px;padding:6px 8px}.singer-panel-info{align-items:center}.singer-panel-stats{display:none}.singer-panel-badge{font-size:.8rem;position:absolute;right:-5px;top:-5px}}.player{background:#000;border-radius:16px;box-shadow:0 0 60px #ff00ff4d,0 0 100px #000c;overflow:hidden;position:relative}.player:before{background:linear-gradient(180deg,#0a00154d 0,#0000 15%,#0000 85%,#0a00154d);border-radius:16px;content:"";inset:0;pointer-events:none;position:absolute;z-index:1}.preview .player{margin:0 auto;max-width:700px}.singing .player{margin:0 auto;max-width:900px}.embed{aspect-ratio:16/9;border:none;display:block;width:100%}.controls{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:30px;position:relative;z-index:20}.controls .btn{border-radius:15px;font-size:1.2rem;min-width:200px;padding:18px 40px}.lyrics{align-items:center;background:#00000080;border:2px solid #f0f3;border-radius:12px;display:flex;flex-direction:column;justify-content:center;margin:18px 0;min-height:120px;padding:25px}.lyric{color:#fff;font-size:1.8rem;font-weight:700;text-align:center;text-shadow:0 0 20px #ff00ffb3}.next{color:#fff6;font-size:.9rem;margin-top:10px}.viz{align-items:flex-end;background:#0000004d;border-radius:8px;display:flex;gap:3px;height:70px;justify-content:center;margin:18px 0;padding:10px}.bar{background:linear-gradient(0deg,#f0f,#0ff);border-radius:4px;transition:height .05s;width:8px}.progress{background:#ffffff1a;height:5px;margin:10px 0;overflow:hidden;width:100%}.fill,.progress{border-radius:3px}.fill{background:linear-gradient(90deg,#f0f,#0ff);height:100%}.times{color:#888;display:flex;font-size:.8rem;justify-content:space-between}.acard{background:#0a0014f2;border:2px solid #ff00ff4d;border-radius:30px;box-shadow:0 0 60px #f0f3,0 0 100px #00ffff1a;margin-bottom:40px;max-width:900px;padding:50px 60px;position:relative;width:100%;z-index:10}.grade{-webkit-text-fill-color:#0000;animation:grade-pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:8rem;font-weight:900;line-height:1;text-shadow:0 0 60px #ff00ff80}@keyframes grade-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.score{color:#0ff;font-family:Orbitron,monospace;font-size:2rem;font-weight:600;margin-top:10px}.scores{grid-gap:40px;display:grid;gap:40px;grid-template-columns:repeat(3,1fr);margin:40px 0;padding:30px 0}.circle-wrap{align-items:center;display:flex;flex-direction:column;opacity:0;transform:translateY(30px) scale(.5);transition:all .6s cubic-bezier(.34,1.56,.64,1)}.circle-wrap.visible{opacity:1;transform:translateY(0) scale(1)}.overall-score-container{margin-top:30px;opacity:0;transform:translateY(40px) scale(.9);transition:all .8s cubic-bezier(.34,1.56,.64,1)}.overall-score-container.visible{opacity:1;transform:translateY(0) scale(1)}.circle{filter:drop-shadow(0 0 10px rgba(255,0,255,.4));height:150px;transform:rotate(-90deg);width:150px}.cbg{fill:none;stroke:#ffffff1a;stroke-width:10}.cfill{fill:none;stroke:url(#grad);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,0,255,.6));transition:stroke-dasharray .1s ease-out}.cval{color:#fff;font-family:Orbitron,monospace;font-size:2.2rem;font-weight:700;margin-top:-95px;text-shadow:0 0 20px #ffffff80}.clbl{color:#aaa;font-size:1rem;font-weight:600;letter-spacing:2px;margin-top:15px;text-transform:uppercase}.feedback{background:#ff00ff1a;border-left:4px solid #f0f;border-radius:15px;color:#fff;font-size:1.3rem;margin:25px 0;padding:20px 30px;text-align:left}.difficulty-badge{align-items:center;background:#ffffff1a;border:2px solid #fff3;border-radius:25px;display:inline-flex;font-family:Orbitron,monospace;font-size:.9rem;gap:8px;margin-top:15px;padding:10px 20px}.difficulty-badge.difficulty-easy{background:#00c86426;border-color:#00c86466}.difficulty-badge.difficulty-normal{background:#ff00ff26;border-color:#f0f6}.difficulty-badge.difficulty-hard{background:#ff640026;border-color:#ff640066}.difficulty-badge-emoji{font-size:1.2rem}.difficulty-badge-name{color:#fff;font-weight:700}.difficulty-badge-impact{color:#ffffffb3;font-size:.8rem;margin-left:5px}.difficulty-badge.difficulty-easy .difficulty-badge-impact{color:#ff9696e6}.difficulty-badge.difficulty-hard .difficulty-badge-impact{color:#96ff96e6}.loading{align-items:center;background:#000000e6;display:flex;flex-direction:column;inset:0;justify-content:center;position:fixed;z-index:100}.loader{animation:spin 1s linear infinite;border:3px solid #f0f3;border-radius:50%;border-top-color:#f0f;height:50px;width:50px}.ltxt{color:#fff;font-size:1rem;margin-top:15px}.lsub{color:#888;font-size:.85rem;margin-top:5px}.dprog{margin-top:12px;width:200px}.dbar{background:#ffffff1a;border-radius:2px;height:4px;overflow:hidden}.dfill{background:linear-gradient(90deg,#f0f,#0ff);height:100%;transition:width .3s ease}.analysis-bar{background:#6b46c14d}.analysis-fill{background:linear-gradient(90deg,#6b46c1,#9f7aea,#00d9ff);box-shadow:0 0 10px #9f7aea80}.video-download-bar{background:#ffa50033}.video-download-fill{background:linear-gradient(90deg,#ff8c00,orange,#fc0);box-shadow:0 0 10px #ffa50080}.dpct{color:#0ff;font-family:Orbitron,monospace;font-size:.8rem;margin-top:5px;text-align:center}.rec{align-items:center;display:flex;gap:6px;justify-content:center;margin-bottom:12px}.dot{animation:pulse 1s ease-in-out infinite;background:#ff0040;border-radius:50%;height:10px;width:10px}.rectxt{color:#ff0040;font-family:Orbitron,monospace;letter-spacing:2px;text-transform:uppercase}.back,.rectxt{font-size:.8rem}.back{background:#ffffff1a;border:1px solid #fff3;border-radius:18px;color:#fff;cursor:pointer;font-family:Rajdhani,sans-serif;left:10px;padding:8px 15px;position:absolute;top:10px;z-index:10}.back:hover{background:#fff3;border-color:#f0f}.err{background:#00ffff1a;border-radius:6px;color:#0ff;margin-top:12px;padding:8px;text-align:center}.ibox{background:#ff00ff1a;border:1px solid #ff00ff4d;border-radius:10px;margin-top:15px;padding:15px}.dbox{background:#00ffff1a;border-radius:6px;margin:10px 0;padding:10px}@media (max-width:768px){.logo{font-size:1.8rem}.subtitle{font-size:.75rem;letter-spacing:1px}.search-box{flex-direction:column}.analysis{-webkit-overflow-scrolling:touch;align-items:flex-start;overflow-y:auto;padding:20px 10px 10px}.acard{border-radius:20px;max-height:none;overflow:visible;padding:20px 15px}.singer-result-message{gap:10px;margin-bottom:15px;padding:12px 16px}.singer-result-avatar{height:45px;width:45px}.singer-result-greeting,.singer-result-name{font-size:1.1rem}.scores{gap:10px;grid-template-columns:repeat(3,1fr);margin:15px 0;padding:10px 0}.circle{height:80px;width:80px}.cval{font-size:1.2rem;margin-top:-52px}.clbl{font-size:.65rem;letter-spacing:1px;margin-top:8px}.grade{font-size:4rem;margin-bottom:5px}.score{font-size:1.2rem}.feedback{font-size:.95rem;padding:12px}.overall-score{margin-top:15px;padding:15px}.overall-label{font-size:.7rem}.overall-value{font-size:2.5rem}.lyric{font-size:1.4rem}.singing{padding:0}.singing .player{max-width:100%}.player:before,.singing .player{border-radius:12px}.container{padding:10px}.karaoke-stage{min-height:100vh;padding:10px}.stage-header{flex-wrap:wrap;gap:10px;padding:10px 15px}.rec-minimal{font-size:.65rem}.pitch-minimal{font-size:.75rem}.mic-badge{font-size:.6rem;padding:3px 8px}.video-stage{margin:5px 0;max-width:100%}.video-container{border-radius:8px}.wave-minimal{height:30px;margin:10px 0}.wave-bar-mini{width:3px}.progress-minimal{gap:8px;max-width:100%;padding:0 5px}.time-mini{font-size:.7rem;min-width:38px}.btn-stop-minimal{font-size:.75rem;margin-top:15px;padding:10px 25px}.debug-mini{font-size:.6rem;gap:10px;padding:5px 12px}}.music-notes{inset:0;overflow:hidden;pointer-events:none;position:fixed;z-index:1}.floating-note{animation:note-float 8s ease-in-out infinite;bottom:-50px;filter:drop-shadow(0 0 10px currentColor);font-size:2rem;position:absolute}@keyframes note-float{0%{opacity:0;transform:translateY(0) rotate(0deg) scale(.5)}10%{opacity:1}50%{transform:translateY(-50vh) rotate(180deg) scale(1.2)}90%{opacity:.8}to{opacity:0;transform:translateY(-110vh) rotate(1turn) scale(.3)}}.energy-pulse{background:linear-gradient(180deg,#0000,#f0fc 20%,#0ffc 50%,#f0fc 80%,#0000);bottom:0;box-shadow:0 0 20px currentColor;filter:blur(3px);position:fixed;top:0;transition:all .1s ease-out;width:8px;z-index:2}.energy-pulse.left{box-shadow:0 0 30px #ff00ff80,10px 0 40px #00ffff4d;left:0;transform-origin:center left}.energy-pulse.right{box-shadow:0 0 30px #00ffff80,-10px 0 40px #ff00ff4d;right:0;transform-origin:center right}.ripple-container{align-items:center;display:flex;height:100%;justify-content:center;left:50%;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%;z-index:0}.ripple{animation:ripple-expand 2s ease-out infinite;border:2px solid #ff00ff80;border-radius:50%;height:200px;position:absolute;width:200px}@keyframes ripple-expand{0%{border-color:#f0f9;opacity:.8;transform:scale(1)}50%{border-color:#0ff6}to{border-color:#ff00ff1a;opacity:0;transform:scale(6)}}.singing-glow{background:radial-gradient(circle at center,#ff00ff1a 0,#0000 70%);transition:opacity .2s ease-out}.reactive-background,.singing-glow{inset:0;pointer-events:none;position:fixed;z-index:0}.reactive-background{transition:all .15s ease-out}.reactive-bg-gradient{background:radial-gradient(ellipse at 50% 50%,#ff00ff26 0,#00ffff1a 30%,#0000 60%)}.reactive-bg-gradient,.reactive-bg-waves{inset:0;position:absolute;transition:all .1s ease-out}.reactive-bg-waves{background:radial-gradient(ellipse at 0 50%,#f0f3,#0000 40%),radial-gradient(ellipse at 100% 50%,#0ff3,#0000 40%),radial-gradient(ellipse at 50% 0,#8000ff26,#0000 40%),radial-gradient(ellipse at 50% 100%,#0080ff26,#0000 40%)}.reactive-bg-center{background:radial-gradient(circle at center,#ff00ff4d 0,#0ff3 25%,#0000 50%);filter:blur(60px);height:150%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .1s ease-out;width:150%}.result-background{inset:0;pointer-events:none;position:fixed;transition:all .8s ease-out;z-index:0}.result-background.grade-s{background:radial-gradient(ellipse at 50% 30%,#ffd7004d 0,#0000 50%),radial-gradient(ellipse at 20% 80%,#ffb40033 0,#0000 40%),radial-gradient(ellipse at 80% 70%,#ffc83233 0,#0000 40%),linear-gradient(180deg,#1a1000,#0a0015 50%,#1a0a00)}.result-background.grade-s:after{animation:golden-pulse 2s ease-in-out infinite;background:radial-gradient(circle at 50% 40%,#ffd70026 0,#0000 60%);content:"";inset:0;position:absolute}@keyframes golden-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.result-background.grade-a{background:radial-gradient(ellipse at 50% 30%,#00ff8040 0,#0000 50%),radial-gradient(ellipse at 20% 80%,#00c86426 0,#0000 40%),radial-gradient(ellipse at 80% 70%,#32ff9626 0,#0000 40%),linear-gradient(180deg,#001a0a,#0a0015 50%,#0a1a0a)}.result-background.grade-b{background:radial-gradient(ellipse at 50% 30%,#0096ff40 0,#0000 50%),radial-gradient(ellipse at 20% 80%,#0064c826 0,#0000 40%),radial-gradient(ellipse at 80% 70%,#3296ff26 0,#0000 40%),linear-gradient(180deg,#000a1a,#0a0015 50%,#0a0a1a)}.result-background.grade-c{background:radial-gradient(ellipse at 50% 30%,#ff960040 0,#0000 50%),radial-gradient(ellipse at 20% 80%,#ff640026 0,#0000 40%),radial-gradient(ellipse at 80% 70%,#ffb43226 0,#0000 40%),linear-gradient(180deg,#1a0a00,#0a0015 50%,#1a0500)}.result-background.grade-d{background:radial-gradient(ellipse at 50% 30%,#ff323233 0,#0000 50%),radial-gradient(ellipse at 20% 80%,#c8003226 0,#0000 40%),radial-gradient(ellipse at 80% 70%,#ff505026 0,#0000 40%),linear-gradient(180deg,#1a0005,#0a0015 50%,#1a0000)}.result-particles{inset:0;overflow:hidden;pointer-events:none;position:fixed;z-index:1}.result-particle{animation:result-float 4s ease-in-out infinite;border-radius:50%;height:6px;position:absolute;width:6px}.grade-s .result-particle{background:#ffd700cc;box-shadow:0 0 10px #ffd70099}.grade-a .result-particle{background:#00ff80cc;box-shadow:0 0 10px #00ff8099}.grade-b .result-particle{background:#0096ffcc;box-shadow:0 0 10px #0096ff99}@keyframes result-float{0%,to{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:1;transform:translateY(90vh) scale(1)}90%{opacity:.8}to{opacity:0;transform:translateY(-10vh) scale(.5)}}.home-panels{grid-gap:25px;box-sizing:border-box;display:grid;gap:25px;grid-template-columns:1fr minmax(200px,280px) minmax(200px,280px) minmax(200px,280px);margin-top:30px;width:100%}@media (max-width:1400px){.home-panels{gap:20px;grid-template-columns:1fr 1fr 1fr}.top-section{grid-column:span 3}}@media (max-width:1200px){.home-panels{gap:20px;grid-template-columns:1fr 1fr}.top-section{grid-column:span 2}}@media (max-width:900px){.home-panels{gap:20px;grid-template-columns:1fr}.top-section{grid-column:span 1}}@media (max-width:600px){.home-panels{gap:15px;margin-top:20px}.artists-section,.genres-section,.top-section,.users-ranking-section{border-radius:15px;padding:15px}.top-title{font-size:1.1rem;margin-bottom:15px}.artists-grid,.genres-grid,.users-ranking-grid{gap:6px}.artist-chip,.genre-chip,.user-ranking-chip{font-size:.8rem;padding:8px 12px}}@media (max-width:400px){.home-panels{gap:12px;margin-top:15px}.artists-section,.genres-section,.top-section,.users-ranking-section{border-radius:12px;padding:12px}.top-title{font-size:1rem}}.top-section{min-width:0;overflow:hidden}.artists-section,.top-section{background:#ffffff05;border:1px solid #ffffff14;border-radius:20px;box-sizing:border-box;padding:20px}.artists-section{min-width:200px}.artists-grid{display:flex;flex-direction:column;gap:8px}.artist-chip{align-items:center;background:#6b46c126;border:1px solid #6b46c14d;border-radius:12px;color:#d6bcfa;cursor:pointer;display:flex;font-family:Rajdhani,sans-serif;font-size:.9rem;justify-content:space-between;padding:10px 16px;transition:all .2s ease}.artist-chip:hover{background:#6b46c14d;border-color:#9f7aea80;color:#fff;transform:translateX(5px)}.artist-name{font-weight:600}.artist-plays{align-items:center;background:linear-gradient(135deg,#6b46c1,#9f7aea);border-radius:10px;color:#fff;display:inline-flex;font-size:.75rem;font-weight:700;height:20px;justify-content:center;min-width:24px;padding:0 8px}.genres-section{background:#ffffff05;border:1px solid #ffffff14;border-radius:20px;box-sizing:border-box;min-width:200px;padding:20px}.genres-grid{display:flex;flex-direction:column;gap:8px}.genre-chip{align-items:center;background:#ec489926;border:1px solid #ec48994d;border-radius:12px;color:#f9a8d4;cursor:pointer;display:flex;font-family:Rajdhani,sans-serif;font-size:.9rem;justify-content:space-between;padding:10px 16px;transition:all .2s ease}.genre-chip:hover{background:#ec48994d;border-color:#ec489980;color:#fff;transform:translateX(5px)}.genre-icon{font-size:1.1rem;margin-right:4px}.genre-name{font-weight:600}.genre-plays{align-items:center;background:linear-gradient(135deg,#ec4899,#f472b6);border-radius:10px;color:#fff;display:inline-flex;font-size:.75rem;font-weight:700;height:20px;justify-content:center;min-width:24px;padding:0 8px}.users-ranking-section{background:#ffffff05;border:1px solid #ffffff14;border-radius:20px;box-sizing:border-box;min-width:200px;padding:20px}.users-ranking-grid{display:flex;flex-direction:column;gap:8px}.user-ranking-chip{align-items:center;background:#22c55e26;border:1px solid #22c55e4d;border-radius:12px;color:#86efac;display:flex;font-family:Rajdhani,sans-serif;font-size:.9rem;gap:10px;padding:10px 16px;transition:all .2s ease}.user-ranking-chip:hover{background:#22c55e40;border-color:#22c55e80;color:#fff}.user-ranking-chip.first{background:#facc1533;border-color:#facc1566;color:#fde047}.user-ranking-chip.second{background:#c0c0c033;border-color:#c0c0c066;color:#e5e5e5}.user-ranking-chip.third{background:#cd7f3233;border-color:#cd7f3266;color:#f4a460}.user-ranking-position{font-weight:700;min-width:24px;text-align:center}.user-ranking-avatar{border:2px solid #fff3;border-radius:50%;height:28px;object-fit:cover;width:28px}.user-ranking-info{display:flex;flex:1 1;flex-direction:column;min-width:0}.user-ranking-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-ranking-plays{font-size:.7rem;opacity:.7}.user-ranking-score{align-items:center;background:linear-gradient(135deg,#22c55e,#4ade80);border-radius:12px;color:#fff;display:inline-flex;font-size:.8rem;font-weight:700;height:24px;justify-content:center;min-width:40px;padding:0 10px}.user-ranking-chip.first .user-ranking-score{background:linear-gradient(135deg,#facc15,#fde047);color:#000}.user-ranking-chip.second .user-ranking-score{background:linear-gradient(135deg,#a8a8a8,#d4d4d4);color:#000}.user-ranking-chip.third .user-ranking-score{background:linear-gradient(135deg,#cd7f32,#daa06d);color:#fff}.top-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:1.3rem;margin-bottom:20px;text-align:center}.top-list{flex-direction:column;gap:8px}.top-item,.top-list{display:flex;overflow:hidden;width:100%}.top-item{align-items:center;background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;box-sizing:border-box;cursor:pointer;gap:12px;min-width:0;padding:10px 15px;transition:all .2s ease}.top-item:hover{background:#ff00ff1a;border-color:#ff00ff4d;transform:translateX(5px)}.top-rank{color:#888;font-family:Orbitron,monospace;font-size:1rem;font-weight:700;min-width:30px;text-align:center}.top-rank.top-3{color:gold;text-shadow:0 0 10px #ffd70080}.top-thumb{background:#1a0030;border-radius:8px;height:50px;object-fit:cover;width:50px}.top-info{flex:1 1;min-width:0;overflow:hidden}.top-song-title{color:#fff;font-size:.9rem;font-weight:600;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-artist{color:#0ff;font-size:.75rem;margin:0}.top-stats{align-items:center;display:flex;flex-shrink:0;gap:8px}.top-plays{background:#ff00ff26;border-radius:10px;color:#f0f;font-family:Orbitron,monospace;font-size:.75rem;padding:3px 8px}.top-score{color:#0ff}.top-grade,.top-score{font-family:Orbitron,monospace;font-size:.7rem}.top-grade{border-radius:4px;font-weight:700;padding:2px 6px}.top-grade.grade-s,.top-grade.grade-s-plus{background:#ffd70033;color:gold}.top-grade.grade-a,.top-grade.grade-a-plus{background:#00ff8033;color:#00ff80}.top-grade.grade-b,.top-grade.grade-b-plus{background:#0096ff33;color:#0096ff}.top-grade.grade-c,.top-grade.grade-c-plus{background:#ff960033;color:#ff9600}.top-grade.grade-d{background:#ff505033;color:#ff5050}.empty-state{color:#666;padding:40px 20px;text-align:center}.song-stats{background:#ffffff08;border:1px solid #ffffff14;border-radius:15px;display:flex;gap:20px;justify-content:center;margin:15px 0;padding:15px}.stat-item{align-items:center;display:flex;flex-direction:column;gap:4px}.stat-value{color:#fff;font-family:Orbitron,monospace;font-size:1.4rem;font-weight:700}.stat-label{color:#888;font-size:.7rem;letter-spacing:1px;text-transform:uppercase}.stat-grade.grade-s,.stat-grade.grade-s-plus{color:gold!important}.stat-grade.grade-a,.stat-grade.grade-a-plus{color:#00ff80!important}.stat-grade.grade-b,.stat-grade.grade-b-plus{color:#0096ff!important}.stat-grade.grade-c,.stat-grade.grade-c-plus{color:#ff9600!important}.stat-grade.grade-d{color:#ff5050!important}.recent-scores{margin:10px 0 20px;text-align:center}.recent-title{color:#888;font-size:.8rem;margin-bottom:8px}.recent-list{display:flex;gap:8px;justify-content:center}.recent-score{border-radius:8px;color:#fff;font-family:Orbitron,monospace;font-size:.8rem;font-weight:700;padding:5px 10px}.recent-score.grade-bg-s,.recent-score.grade-bg-s-plus{background:linear-gradient(135deg,#ffd7004d,#ffb40033);border:1px solid #ffd70066}.recent-score.grade-bg-a,.recent-score.grade-bg-a-plus{background:linear-gradient(135deg,#00ff804d,#00c86433);border:1px solid #00ff8066}.recent-score.grade-bg-b,.recent-score.grade-bg-b-plus{background:linear-gradient(135deg,#0096ff4d,#0064c833);border:1px solid #0096ff66}.recent-score.grade-bg-c,.recent-score.grade-bg-c-plus{background:linear-gradient(135deg,#ff96004d,#ff640033);border:1px solid #ff960066}.recent-score.grade-bg-d{background:linear-gradient(135deg,#ff32324d,#c8003233);border:1px solid #ff323266}.language-selector{position:relative}.language-btn{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;cursor:pointer;display:flex;font-size:1.3rem;height:40px;justify-content:center;transition:all .3s ease;width:40px}.language-btn:hover{background:#fff3;border-color:#fff6;transform:scale(1.05)}.language-menu{animation:fadeIn .2s ease;background:#140a1efa;border:1px solid #ffffff26;border-radius:12px;box-shadow:0 10px 40px #00000080;margin-top:8px;min-width:180px;padding:8px;position:absolute;right:0;top:100%;z-index:1000}.language-option{align-items:center;background:#0000;border:none;border-radius:8px;color:#fffc;cursor:pointer;display:flex;font-size:.9rem;gap:10px;padding:10px 12px;text-align:left;transition:all .2s ease;width:100%}.language-option:hover{background:#ffffff1a;color:#fff}.language-option.active{background:#6b46c14d;color:#fff}.lang-flag{font-size:1.2rem}.lang-name{flex:1 1}.lang-check{color:#9f7aea;font-weight:700}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.session-controls{align-items:center;display:flex;gap:10px}.btn-session-start{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:25px;box-shadow:0 4px 15px #6b46c166;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px 20px;transition:all .3s ease}.btn-session-start:hover:not(:disabled){box-shadow:0 6px 20px #6b46c199;transform:translateY(-2px)}.btn-session-start:disabled{cursor:not-allowed;opacity:.6}.session-active{align-items:center;display:flex;gap:10px}.session-badge{background:linear-gradient(135deg,#6b46c14d,#9f7aea33);border:1px solid #9f7aea80;border-radius:20px;cursor:pointer;font-size:.85rem;padding:8px 15px;transition:all .3s ease}.session-badge:hover{background:linear-gradient(135deg,#6b46c180,#9f7aea4d)}.session-badge.with-share{align-items:center;display:flex;gap:0;overflow:hidden;padding:0}.session-badge .badge-participants{padding:8px 12px}.session-badge .badge-divider{background:#9f7aea80;height:20px;width:1px}.session-badge .badge-share{padding:8px 10px;transition:background .2s ease}.session-badge .badge-share:hover{background:#48bb784d}.btn-ranking{background:linear-gradient(135deg,#f6ad55,#ed8936);border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:.85rem;font-weight:600;padding:8px 15px;transition:all .3s ease}.btn-ranking:hover{box-shadow:0 4px 15px #f6ad5580;transform:translateY(-2px)}.session-modal{background:#140a1efa;border:1px solid #6b46c180;border-radius:20px;box-shadow:0 10px 50px #00000080,0 0 30px #6b46c14d;max-height:80vh;max-width:500px;overflow-y:auto;padding:25px;position:relative;width:90%}.session-modal.with-chat{max-width:900px;overflow:hidden;padding:0}.session-content-wrapper{display:flex;height:100%;max-height:80vh}.session-main-panel{flex:1 1;min-width:0;overflow-y:auto;padding:25px}.session-modal.with-chat .modal-close{right:15px;top:15px;z-index:10}.session-chat-panel{background:#0f0819f2;border-left:1px solid #6b46c14d;display:flex;flex-direction:column;width:320px}.session-chat-header{align-items:center;background:#6b46c126;border-bottom:1px solid #6b46c133;color:#9f7aea;display:flex;font-weight:600;gap:8px;padding:12px 45px 12px 16px}.session-chat-header span{flex-shrink:0;white-space:nowrap}.session-chat-header .chat-filters{margin-left:auto}.session-chat-messages{display:flex;flex:1 1;flex-direction:column;gap:12px;overflow-y:auto;padding:15px}.session-chat-input{background:#140a1ecc;border-top:1px solid #6b46c133;display:flex;gap:10px;padding:15px}.session-chat-input input{background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;color:#fff;flex:1 1;font-size:.9rem;padding:10px 14px}.session-chat-input input:focus{border-color:#6b46c180;outline:none}.session-chat-input button{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;padding:10px 16px;transition:all .2s ease}.session-chat-input button:hover:not(:disabled){box-shadow:0 4px 12px #6b46c166;transform:translateY(-1px)}.session-chat-input button:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.session-modal.with-chat{max-width:95%}.session-content-wrapper{flex-direction:column;max-height:90vh}.session-main-panel{max-height:50vh}.session-chat-panel{border-left:none;border-top:1px solid #6b46c14d;height:40vh;width:100%}}.session-header{margin-bottom:20px;text-align:center}.session-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#9f7aea,#6b46c1);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;margin-bottom:5px}.session-header p{color:#888;font-size:.9rem}.invite-link-section{background:linear-gradient(135deg,#48bb7826,#38b2ac26);border:1px solid #48bb784d;border-radius:12px;margin-bottom:20px;padding:15px}.invite-label{color:#48bb78;display:block;font-size:.85rem;font-weight:500;margin-bottom:10px}.invite-link-box{align-items:center;display:flex;gap:10px}.invite-code{background:#0000004d;border-radius:8px;color:#fff;flex:1 1;font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px;padding:12px 15px;text-align:center}.btn-copy-link{background:linear-gradient(135deg,#48bb78,#38b2ac);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 18px;transition:all .3s ease;white-space:nowrap}.btn-copy-link:hover{box-shadow:0 4px 15px #48bb784d;transform:scale(1.05)}.btn-copy-link.copied{animation:pulse-success .3s ease;background:linear-gradient(135deg,#68d391,#4fd1c5)}@keyframes pulse-success{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.join-modal{animation:modalSlideIn .3s ease;background:linear-gradient(145deg,#1a1a2e,#16213e);border:1px solid #ffffff1a;border-radius:20px;max-width:420px;padding:30px;position:relative;width:90%}.join-header{margin-bottom:25px;text-align:center}.join-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#e9d5ff,#c4b5fd);-webkit-background-clip:text;background-clip:text;font-size:1.8rem;margin-bottom:10px}.join-session-name{color:#9ca3af;font-size:1.1rem;font-weight:500}.join-participants{background:#ffffff0d;border-radius:12px;margin-bottom:25px;padding:15px;text-align:center}.join-label{color:#9ca3af;display:block;font-size:.85rem;margin-bottom:12px}.join-avatars{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.join-avatar{border:2px solid #6b46c180;border-radius:50%;height:40px;transition:transform .2s ease;width:40px}.join-avatar:hover{transform:scale(1.1)}.join-input-section{margin-bottom:25px}.join-input-section label{color:#9ca3af;display:block;font-size:.9rem;margin-bottom:8px}.join-input-section input{background:#ffffff0d;border:1px solid #fff3;border-radius:10px;color:#fff;font-size:1.1rem;padding:14px 16px;transition:border-color .3s ease;width:100%}.join-input-section input:focus{border-color:#6b46c180;outline:none}.btn-join-session{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:16px;transition:all .3s ease;width:100%}.btn-join-session:hover:not(:disabled){box-shadow:0 8px 25px #6b46c166;transform:translateY(-2px)}.btn-join-session:disabled{cursor:not-allowed;opacity:.5}.join-username-hint{color:#6b7280;display:block;font-size:.75rem;margin-top:6px}.join-logged-user{margin-bottom:20px}.join-user-info{align-items:center;background:#6b46c126;border:1px solid #6b46c14d;border-radius:12px;display:flex;gap:14px;margin-top:10px;padding:14px 18px}.join-user-avatar{border:2px solid #6b46c180;border-radius:50%;height:50px;object-fit:cover;width:50px}.join-user-details{display:flex;flex-direction:column;gap:2px}.join-user-name{color:#fff;font-size:1.1rem;font-weight:600}.join-user-username{color:#fff9;font-size:.85rem}.join-buttons{display:flex;gap:12px;margin-top:10px}.btn-decline-session{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;color:#fffc;cursor:pointer;flex:1 1;font-size:1rem;font-weight:500;padding:14px;transition:all .3s ease}.btn-decline-session:hover{background:#ef444433;border-color:#ef444466;color:#ef4444}.join-buttons .btn-join-session{flex:1.5 1;width:auto}.session-toast{animation:toastSlideIn .3s ease,toastSlideOut .3s ease 2.7s forwards;background:linear-gradient(135deg,#6b46c1f2,#9f7aeaf2);border-radius:25px;box-shadow:0 4px 20px #6b46c166;color:#fff;font-size:.95rem;font-weight:600;left:50%;padding:12px 24px;position:fixed;top:20px;transform:translateX(-50%);z-index:10000}@keyframes toastSlideIn{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes toastSlideOut{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-20px)}}.singing-indicator{align-items:center;animation:pulseGlow 2s ease-in-out infinite;background:linear-gradient(135deg,#ec4899f2,#a855f7f2);border-radius:12px;box-shadow:0 4px 20px #ec489966;display:flex;gap:12px;padding:12px 16px;position:fixed;right:20px;top:80px;z-index:9000}@keyframes pulseGlow{0%,to{box-shadow:0 4px 20px #ec489966}50%{box-shadow:0 4px 30px #ec4899b3}}.singing-avatar{border:2px solid #ffffff80;border-radius:50%;height:40px;width:40px}.singing-info{display:flex;flex-direction:column;gap:2px}.singing-name{color:#fff;font-size:.9rem;font-weight:600}.singing-song{color:#fffc;font-size:.8rem}.chat-toggle-btn{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:50%;bottom:20px;box-shadow:0 4px 15px #6b46c166;cursor:pointer;font-size:1.5rem;height:56px;position:fixed;right:20px;transition:all .3s ease;width:56px;z-index:9000}.chat-toggle-btn:hover{box-shadow:0 6px 20px #6b46c180;transform:scale(1.1)}.chat-toggle-btn.active{background:linear-gradient(135deg,#9f7aea,#6b46c1)}.chat-toggle-btn.has-messages:after{animation:pulse 1.5s infinite;background:#ef4444;border:2px solid #1a1a2e;border-radius:50%;content:"";height:12px;position:absolute;right:8px;top:8px;width:12px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.chat-panel{animation:chatSlideIn .3s ease;background:linear-gradient(145deg,#1a1a2e,#16213e);border:1px solid #ffffff1a;border-radius:16px;bottom:90px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;max-height:450px;position:fixed;right:20px;width:320px;z-index:9001}@keyframes chatSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-header{align-items:center;background:#6b46c133;border-bottom:1px solid #ffffff1a;border-radius:16px 16px 0 0;display:flex;gap:10px;padding:12px 16px}.chat-header>span:first-child{color:#e9d5ff;font-weight:600;white-space:nowrap}.chat-header .chat-filters{margin-left:auto}.chat-close{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:1.3rem;padding:0 4px}.chat-close:hover{color:#fff}.chat-filters{display:flex;flex-shrink:0;gap:4px}.chat-filter-btn{background:#ffffff1a;border:1px solid #ffffff26;border-radius:6px;cursor:pointer;font-size:.75rem;opacity:.5;padding:4px 8px;transition:all .2s ease}.chat-filter-btn:hover{background:#ffffff26;opacity:.8}.chat-filter-btn.active{background:#6b46c166;border-color:#8b5cf680;opacity:1}.chat-messages{flex:1 1;max-height:300px;min-height:200px;overflow-y:auto;padding:12px}.chat-empty{color:#6b7280;font-size:.9rem;padding:40px 20px;text-align:center}.chat-message{background:#ffffff08;border-radius:10px;display:flex;gap:10px;margin-bottom:12px;padding:8px}.chat-message.own{background:#6b46c126;flex-direction:row-reverse}.chat-msg-avatar{border-radius:50%;flex-shrink:0;height:32px;width:32px}.chat-msg-content{display:flex;flex:1 1;flex-direction:column;gap:3px;min-width:0}.chat-message.own .chat-msg-content{align-items:flex-end}.chat-msg-name{align-items:center;color:#9ca3af;display:flex;font-size:.8rem;font-weight:600;gap:6px}.chat-msg-username{color:#6b7280;font-size:.7rem;font-weight:400}.chat-msg-time{color:#ffffff59;font-size:.65rem;font-weight:400;margin-left:auto}.chat-msg-text{word-wrap:break-word;color:#e5e7eb;font-size:.9rem;line-height:1.4}.chat-message.system{align-items:flex-start;background:#ffffff08;border-left:2px solid #ffffff26;border-radius:8px;flex-direction:column;gap:2px;justify-content:center;margin:8px 0;padding:8px 12px}.chat-system-text{word-wrap:break-word;color:#fff9;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.75rem!important;font-weight:400;line-height:1.4;overflow-wrap:break-word;text-align:left}.chat-system-text *{font-family:inherit;font-size:inherit}.chat-system-time{color:#ffffff4d;font-size:.6rem}.chat-message.system.join{border-left-color:#4ade80}.chat-message.system.join .chat-system-text{color:#4ade80}.chat-message.system.leave{border-left-color:#f87171}.chat-message.system.leave .chat-system-text{color:#f87171}.chat-message.system.singing{border-left-color:#a78bfa}.chat-message.system.singing .chat-system-text{color:#a78bfa}.chat-message.system.score{border-left-color:#fbbf24}.chat-message.system.score .chat-system-text{color:#a78bfa}.chat-message.system.score .score-highlight{color:#fbbf24;font-weight:600}.chat-input-area{border-top:1px solid #ffffff1a;display:flex;gap:8px;padding:12px}.chat-input-area input{background:#ffffff0d;border:1px solid #ffffff26;border-radius:20px;color:#fff;flex:1 1;font-size:.9rem;padding:10px 14px}.chat-input-area input:focus{border-color:#6b46c180;outline:none}.chat-input-area button{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:20px;color:#fff;cursor:pointer;font-weight:600;padding:10px 16px;transition:all .2s ease}.chat-input-area button:hover:not(:disabled){transform:scale(1.05)}.chat-input-area button:disabled{cursor:not-allowed;opacity:.5}.chat-cooldown{animation:cooldownPulse 1s ease-in-out infinite;background:#ff6b6b26;border-radius:10px;color:#ff6b6b;font-size:.75rem;left:12px;padding:2px 8px;position:absolute;top:-24px}@keyframes cooldownPulse{0%,to{opacity:1}50%{opacity:.6}}.chat-input-area,.session-chat-input{position:relative}.chat-input-area input:disabled,.session-chat-input input:disabled{background:#ff6b6b1a;border-color:#ff6b6b4d;opacity:.6}.add-participant{display:flex;gap:10px;margin-bottom:20px}.add-participant input{background:#ffffff0d;border:1px solid #fff3;border-radius:10px;color:#fff;flex:1 1;font-size:1rem;padding:12px 15px}.add-participant input:focus{border-color:#6b46c180;outline:none}.add-participant button{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:10px;color:#fff;cursor:pointer;font-weight:600;padding:12px 20px;transition:all .3s ease}.add-participant button:hover:not(:disabled){transform:scale(1.05)}.add-participant button:disabled{cursor:not-allowed;opacity:.5}.participants-list{margin-bottom:20px;max-height:300px;overflow-y:auto}.no-participants{color:#666;font-style:italic;padding:30px;text-align:center}.participant-item{align-items:center;background:#ffffff08;border-radius:12px;display:flex;gap:12px;margin-bottom:8px;padding:12px;transition:all .3s ease}.participant-item:hover{background:#ffffff0f}.participant-number{align-items:center;background:linear-gradient(135deg,#6b46c1,#9f7aea);border-radius:50%;display:flex;font-size:.75rem;font-weight:700;height:25px;justify-content:center;width:25px}.participant-avatar{border:2px solid #9f7aea80;border-radius:50%;height:45px;width:45px}.participant-info{display:flex;flex:1 1;flex-direction:column}.participant-name{font-size:1rem;font-weight:600}.participant-stats{color:#888;font-size:.75rem}.btn-remove-participant{background:#ff646433;border:1px solid #ff646466;border-radius:50%;color:#ff6b6b;cursor:pointer;font-size:1.2rem;height:30px;transition:all .3s ease;width:30px}.btn-remove-participant:hover{background:#ff646466}.session-actions{display:flex;flex-direction:column;gap:10px}.btn-session-start-game{background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:12px;box-shadow:0 4px 15px #48bb7866;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:700;padding:15px 25px;transition:all .3s ease}.btn-session-start-game:hover{box-shadow:0 6px 20px #48bb7899;transform:translateY(-2px)}.btn-session-end{background:#ff960033;border:1px solid #ff960066;border-radius:10px;color:#fa0;cursor:pointer;font-weight:600;padding:12px 20px;transition:all .3s ease}.btn-session-end:hover{background:#ff96004d}.btn-session-exit{background:#0000;border:1px solid #fff3;border-radius:10px;color:#888;cursor:pointer;padding:10px 20px;transition:all .3s ease}.btn-session-exit:hover{border-color:#fff6;color:#fff}.btn-session-leave{background:#ef444433;border:1px solid #ef444466;border-radius:10px;color:#f87171;cursor:pointer;font-weight:600;padding:12px 20px;transition:all .3s ease}.btn-session-leave:hover{background:#ef44444d;transform:translateY(-2px)}.participant-name-row{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.creator-badge{filter:drop-shadow(0 0 4px rgba(255,215,0,.6));font-size:.85rem}.username-badge{background:linear-gradient(135deg,#6366f14d,#8b5cf64d);border:1px solid #8b5cf666;border-radius:12px;color:#a5b4fc;font-size:.7rem;font-weight:500}.participant-item.has-username{background:linear-gradient(135deg,#8b5cf61f,#6b46c114);border:1px solid #8b5cf659;border-left:3px solid #8b5cf6cc}.participant-item.has-username .participant-avatar{border:2px solid #8b5cf699}.participant-item:not(.has-username){border-left:3px solid #ffffff26;opacity:.75}.participant-item:not(.has-username):hover{opacity:.9}.guest-badge{background:#ffffff14;color:#ffffff73;font-size:.65rem;padding:2px 6px}.guest-badge,.username-badge{border-radius:4px;margin-left:6px}.username-badge{background:#8b5cf626;color:#a78bfa;font-size:.75rem;padding:2px 8px}.singer-selection{background:linear-gradient(135deg,#6b46c126,#9f7aea1a);border:1px solid #6b46c14d;border-radius:15px;margin-bottom:20px;padding:20px}.singer-label{color:#9f7aea;font-size:1.1rem;font-weight:600;margin-bottom:15px;text-align:center}.singer-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.singer-option{align-items:center;background:#ffffff0d;border:2px solid #0000;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:5px;min-width:80px;padding:12px 15px;transition:all .3s ease}.singer-option:hover{background:#ffffff1a;border-color:#9f7aea4d}.singer-option.selected{background:linear-gradient(135deg,#6b46c14d,#9f7aea33);border-color:#9f7aea;box-shadow:0 0 20px #9f7aea66}.singer-avatar{border:2px solid #fff3;border-radius:50%;height:50px;width:50px}.singer-option.selected .singer-avatar{border-color:#9f7aea}.singer-name{color:#fff;font-size:.85rem;font-weight:600}.singer-stats{color:#9f7aea;font-size:.7rem}.singer-warning{color:#f90;font-size:.85rem;margin-top:10px;text-align:center}.ranking-modal{background:#140a1efa;border:1px solid #f6ad5580;border-radius:20px;box-shadow:0 10px 50px #00000080,0 0 30px #f6ad554d;box-sizing:border-box;max-height:85vh;max-width:550px;overflow-y:auto;padding:25px;width:95%}.ranking-header{margin-bottom:20px;text-align:center}.ranking-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f6ad55,#ed8936);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;margin-bottom:5px}.session-ended{color:#888;font-size:.85rem;font-style:italic}.ranking-list{margin-bottom:20px}.ranking-item{align-items:center;background:#ffffff08;border-radius:12px;box-sizing:border-box;display:flex;gap:12px;margin-bottom:10px;min-width:0;padding:15px;transition:all .3s ease;width:100%}.ranking-item.first{background:linear-gradient(135deg,#ffd70026,#ffb4001a);border:1px solid #ffd70066}.ranking-item.second{background:linear-gradient(135deg,#c0c0c026,#9696961a);border:1px solid #c0c0c066}.ranking-item.third{background:linear-gradient(135deg,#cd7f3226,#b4641e1a);border:1px solid #cd7f3266}.ranking-position{font-size:1.5rem;min-width:40px;text-align:center}.ranking-avatar{border:2px solid #fff3;border-radius:50%;flex-shrink:0;height:50px;width:50px}@media (max-width:600px){.ranking-avatar{height:36px;width:36px}}.ranking-item.first .ranking-avatar{border-color:gold}.ranking-item.second .ranking-avatar{border-color:silver}.ranking-item.third .ranking-avatar{border-color:#cd7f32}.ranking-info{display:flex;flex:1 1;flex-direction:column;min-width:0;overflow:hidden}.ranking-name{font-size:1.1rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-details{color:#888;font-size:.75rem}.ranking-scores{align-items:center;display:flex;flex-direction:column;min-width:60px}.ranking-avg{color:#f6ad55;font-size:1.3rem;font-weight:700}.ranking-best{color:#48bb78;font-size:1.1rem;font-weight:600}.ranking-label{color:#666;font-size:.65rem;text-transform:uppercase}.ranking-actions{display:flex;gap:15px;justify-content:center}.btn-continue{background:linear-gradient(135deg,#6b46c1,#9f7aea);border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 30px;transition:all .3s ease}.btn-continue:hover{box-shadow:0 6px 20px #6b46c180;transform:translateY(-2px)}.btn-new-session{background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 30px;transition:all .3s ease}.btn-new-session:hover{box-shadow:0 6px 20px #48bb7880;transform:translateY(-2px)}.btn-start:disabled{cursor:not-allowed;opacity:.5;transform:none!important}@media (max-width:768px){.top-item{padding:8px 10px}.top-thumb{height:40px;width:40px}.top-song-title{font-size:.8rem}.top-stats{flex-direction:column;gap:4px}.song-stats{flex-wrap:wrap;gap:15px}.stat-value{font-size:1.2rem}.recent-list{flex-wrap:wrap}.session-controls{flex-direction:column;gap:5px}}@media (max-width:600px){.top-item{gap:8px;padding:6px 8px}.top-rank{font-size:.8rem;min-width:24px}.top-thumb{border-radius:6px;height:36px;width:36px}.top-song-title{font-size:.75rem}.top-artist{font-size:.65rem}.top-avg,.top-plays{font-size:.65rem;padding:2px 6px}.top-list{gap:6px}}@media (max-width:400px){.top-item{border-radius:8px;gap:6px;padding:5px 6px}.top-rank{font-size:.7rem;min-width:18px}.top-thumb{height:30px;width:30px}.top-song-title{font-size:.7rem}.top-artist{font-size:.6rem}.top-stats{display:none}.btn-session-start{font-size:.8rem;padding:8px 15px}.session-active{flex-direction:column;gap:5px}.singer-options{gap:6px}.singer-option{min-width:60px;padding:6px 8px}.singer-avatar{height:35px;width:35px}.singer-name{font-size:.75rem}.singer-stats{font-size:.6rem}.ranking-modal{border-radius:12px;padding:12px;width:98%}.ranking-header h2{font-size:1.1rem}.ranking-item{gap:5px;padding:6px}.ranking-position{font-size:.85rem;min-width:18px}.ranking-avatar{height:28px;width:28px}.ranking-name{font-size:.75rem}.ranking-details{display:none}.ranking-scores{min-width:35px}.ranking-avg{font-size:.9rem}.ranking-best{font-size:.75rem}.ranking-label{font-size:.45rem}.ranking-actions{flex-direction:column;gap:8px}.btn-continue,.btn-end-session{font-size:.85rem;padding:10px 16px;width:100%}}.public-profile-modal{animation:modalSlideIn .3s ease;background:#140a1efa;border:1px solid #ffffff26;border-radius:20px;box-shadow:0 20px 60px #0009,0 0 40px #6b46c14d;max-height:85vh;max-width:600px;overflow-y:auto;padding:30px;width:90%}.public-profile-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;gap:20px;margin-bottom:25px;padding-bottom:20px}.public-profile-avatar{border:3px solid #6b46c180;border-radius:50%;box-shadow:0 0 20px #6b46c14d;height:80px;object-fit:cover;width:80px}.public-profile-info{flex:1 1}.public-profile-name{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:1.5rem;margin:0 0 5px}.public-profile-username{color:#9f7aea;font-size:1rem;margin:0 0 5px}.public-profile-since{color:#ffffff80;font-size:.85rem;margin:0}.public-profile-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(4,1fr);margin-bottom:25px}.profile-stat{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:15px 10px;text-align:center}.profile-stat.highlight{background:#6b46c133;border-color:#6b46c166}.profile-stat .stat-value{color:#fff;display:block;font-family:Orbitron,monospace;font-size:1.5rem;font-weight:700;margin-bottom:5px}.profile-stat.highlight .stat-value{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text}.profile-stat .stat-label{color:#fff9;display:block;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase}.public-profile-section{margin-bottom:25px}.public-profile-section .section-title{border-bottom:1px solid #9f7aea4d;color:#9f7aea;font-family:Orbitron,monospace;font-size:1rem;margin:0 0 15px;padding-bottom:8px}.grade-distribution{display:flex;flex-direction:column;gap:8px}.grade-bar{align-items:center;display:flex;gap:10px;height:28px}.grade-bar .grade-label{font-size:.85rem;font-weight:700;min-width:30px}.grade-bar .grade-bar-fill{background:#fff3;border-radius:4px;flex:1 1;height:100%;min-width:10px;position:relative}.grade-bar.grade-s-plus .grade-bar-fill{background:linear-gradient(90deg,gold,#ffec80)}.grade-bar.grade-s .grade-bar-fill{background:linear-gradient(90deg,orange,#fc6)}.grade-bar.grade-a-plus .grade-bar-fill{background:linear-gradient(90deg,#22c55e,#4ade80)}.grade-bar.grade-a .grade-bar-fill{background:linear-gradient(90deg,#10b981,#34d399)}.grade-bar.grade-b-plus .grade-bar-fill{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.grade-bar.grade-b .grade-bar-fill{background:linear-gradient(90deg,#6366f1,#818cf8)}.grade-bar.grade-c-plus .grade-bar-fill{background:linear-gradient(90deg,#f97316,#fb923c)}.grade-bar.grade-c .grade-bar-fill{background:linear-gradient(90deg,#ef4444,#f87171)}.grade-bar.grade-d .grade-bar-fill{background:linear-gradient(90deg,#dc2626,#ef4444)}.grade-bar .grade-count{color:#ffffffb3;font-size:.85rem;min-width:30px;text-align:right}.favorite-artists{display:flex;flex-direction:column;gap:8px}.favorite-artist{align-items:center;background:#ffffff08;border-radius:10px;display:flex;gap:12px;padding:10px 15px}.favorite-artist .artist-rank{color:#9f7aea;font-weight:700;min-width:30px}.favorite-artist .artist-name{color:#fff;flex:1 1;font-weight:600}.favorite-artist .artist-info{color:#ffffff80;font-size:.8rem}.best-scores-list{display:flex;flex-direction:column;gap:10px}.score-item{align-items:center;background:#ffffff08;border-radius:10px;display:flex;gap:12px;padding:10px}.score-item .score-thumb{border-radius:6px;height:38px;object-fit:cover;width:50px}.score-item .score-info{flex:1 1;min-width:0}.score-item .score-title{color:#fff;display:block;font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-item .score-artist{color:#ffffff80;display:block;font-size:.75rem}.score-item .score-result{align-items:flex-end;display:flex;flex-direction:column;gap:2px}.score-item .score-grade{font-size:1.1rem;font-weight:700}.score-item .score-points{color:#fff9;font-size:.75rem}.recent-scores-list{display:flex;flex-direction:column;gap:8px}.recent-item{align-items:center;background:#ffffff05;border-radius:8px;display:flex;gap:12px;padding:8px 12px}.recent-item .recent-title{color:#fffc;flex:1 1;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-item .recent-grade{font-size:.9rem;font-weight:700}.recent-item .recent-date{color:#fff6;font-size:.75rem}@media (max-width:600px){.public-profile-modal{max-height:90vh;padding:20px}.public-profile-header{flex-direction:column;text-align:center}.public-profile-stats{grid-template-columns:repeat(2,1fr)}.profile-stat .stat-value{font-size:1.2rem}.score-item .score-thumb{height:30px;width:40px}}.dialog-overlay{z-index:10000}.dialog-modal{animation:dialogAppear .3s ease;background:#140a1efa;border:1px solid #fff3;border-radius:20px;box-shadow:0 20px 60px #0009,0 0 40px #f0f3;max-width:380px;padding:30px;text-align:center;width:90%}@keyframes dialogAppear{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.dialog-icon{font-size:3rem;margin-bottom:15px}.dialog-title{color:#fff;font-size:1.4rem;font-weight:700;margin-bottom:10px}.dialog-message{color:#aaa;font-size:1rem;line-height:1.5;margin-bottom:25px}.dialog-buttons{display:flex;gap:12px;justify-content:center}.dialog-btn{border:none;border-radius:25px;cursor:pointer;font-size:.95rem;font-weight:600;padding:12px 28px;transition:all .3s ease}.dialog-btn-ok{background:linear-gradient(135deg,#6b46c1,#9f7aea);color:#fff;min-width:120px}.dialog-btn-ok:hover{box-shadow:0 6px 20px #6b46c180;transform:translateY(-2px)}.dialog-btn-confirm{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff}.dialog-btn-confirm:hover{box-shadow:0 6px 20px #48bb7880;transform:translateY(-2px)}.dialog-btn-cancel{background:#ffffff1a;border:1px solid #fff3;color:#aaa}.dialog-btn-cancel:hover{background:#ffffff26;border-color:#ffffff4d;color:#fff}.singer-result-message{align-items:center;animation:singerMessagePop .5s ease-out;border-radius:20px;display:flex;gap:16px;margin-bottom:24px;padding:20px 28px}@keyframes singerMessagePop{0%{opacity:0;transform:scale(.8) translateY(-20px)}50%{transform:scale(1.05) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}.singer-result-message.excellent{background:linear-gradient(135deg,#ffd70033,#ffa50026);border:2px solid #ffd70080;box-shadow:0 0 30px #ffd7004d}.singer-result-message.good{background:linear-gradient(135deg,#48bb7833,#38a16926);border:2px solid #48bb7880;box-shadow:0 0 30px #48bb784d}.singer-result-message.okay{background:linear-gradient(135deg,#4299e133,#3182ce26);border:2px solid #4299e180;box-shadow:0 0 30px #4299e14d}.singer-result-message.improve{background:linear-gradient(135deg,#ed893633,#dd6b2026);border:2px solid #ed893680;box-shadow:0 0 30px #ed89364d}.singer-result-avatar{border:3px solid #ffffff4d;border-radius:50%;box-shadow:0 4px 15px #0000004d;height:64px;object-fit:cover;width:64px}.singer-result-message.excellent .singer-result-avatar{border-color:#ffd700cc}.singer-result-message.good .singer-result-avatar{border-color:#48bb78cc}.singer-result-message.okay .singer-result-avatar{border-color:#4299e1cc}.singer-result-message.improve .singer-result-avatar{border-color:#ed8936cc}.singer-result-text{align-items:baseline;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}.singer-result-greeting{color:#ffffffe6;font-size:1.5rem;font-weight:600}.singer-result-name{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#ddd);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.singer-result-message.excellent .singer-result-name{background:linear-gradient(135deg,gold,orange);-webkit-background-clip:text;background-clip:text}.singer-result-message.good .singer-result-name{background:linear-gradient(135deg,#48bb78,#68d391);-webkit-background-clip:text;background-clip:text}.singer-result-message.okay .singer-result-name{background:linear-gradient(135deg,#4299e1,#63b3ed);-webkit-background-clip:text;background-clip:text}.singer-result-message.improve .singer-result-name{background:linear-gradient(135deg,#ed8936,#f6ad55);-webkit-background-clip:text;background-clip:text}@media (max-width:600px){.singer-result-message{gap:10px;padding:12px 14px}.singer-result-avatar{height:40px;width:40px}.singer-result-greeting,.singer-result-name{font-size:1rem}}@media (max-width:480px){.analysis{padding:10px 8px 8px}.acard{border-radius:15px;padding:15px 12px}.singer-result-message{border-radius:15px;gap:8px;margin-bottom:12px;padding:10px 12px}.singer-result-avatar{height:36px;width:36px}.singer-result-text{gap:4px}.singer-result-greeting,.singer-result-name{font-size:.9rem}.scores{gap:8px;margin:10px 0;padding:8px 0}.circle{height:70px;width:70px}.cval{font-size:1rem;margin-top:-46px}.clbl{font-size:.55rem;margin-top:6px}.grade{font-size:3rem;margin-bottom:0}.score{font-size:1rem}.feedback,.score{margin-bottom:10px}.feedback{font-size:.85rem;padding:10px}.overall-score{margin-top:10px;padding:12px}.overall-label{font-size:.6rem}.overall-value{font-size:2rem}.btn{font-size:.85rem;padding:10px 20px}.btn-discard{font-size:.8rem;padding:8px 16px}.acard>div:last-child{flex-wrap:wrap;gap:8px}}@media (max-width:600px){.session-modal{border-radius:15px;padding:18px;width:95%}.session-header{margin-bottom:15px}.session-header h2{font-size:1.2rem}.session-header p{font-size:.8rem}.add-participant{gap:8px;margin-bottom:15px}.add-participant input{border-radius:8px;font-size:.9rem;padding:10px 12px}.add-participant button{border-radius:8px;font-size:.85rem;padding:10px 14px}.participants-list{margin-bottom:15px;max-height:250px}.no-participants{font-size:.9rem;padding:20px}.participant-item{border-radius:10px;gap:10px;margin-bottom:6px;padding:10px}.participant-number{font-size:.65rem;height:22px;width:22px}.participant-avatar{height:36px;width:36px}.participant-name{font-size:.9rem}.participant-stats{font-size:.7rem}.btn-remove-participant{font-size:1rem;height:26px;width:26px}.session-actions{gap:8px}.btn-session-start-game{border-radius:10px;font-size:.95rem;padding:12px 18px}.btn-session-end{border-radius:8px;font-size:.85rem;padding:10px 16px}.invite-link-section{margin-bottom:15px;padding:12px}.invite-label{font-size:.8rem;margin-bottom:8px}.invite-link-box{flex-direction:column;gap:8px}.invite-code{font-size:1.1rem;letter-spacing:2px;padding:10px 12px}.btn-copy-link{font-size:.9rem;padding:10px 14px;width:100%}.join-modal{padding:20px;width:95%}.join-header h2{font-size:1.4rem}.join-session-name{font-size:.95rem}.join-participants{margin-bottom:20px;padding:12px}.join-avatar{height:35px;width:35px}.join-input-section input{font-size:1rem;padding:12px 14px}.btn-join-session{font-size:1rem;padding:14px}.session-toast{font-size:.85rem;max-width:90%;padding:10px 18px}.singing-indicator{gap:10px;padding:10px 12px;right:10px;top:70px}.singing-avatar{height:35px;width:35px}.singing-name{font-size:.85rem}.singing-song{font-size:.75rem}.chat-toggle-btn{bottom:15px;font-size:1.3rem;height:50px;right:15px;width:50px}.chat-panel{bottom:80px;max-height:400px;right:15px;width:calc(100% - 30px)}.chat-messages{max-height:250px;min-height:150px}.chat-msg-avatar{height:28px;width:28px}.chat-msg-name{font-size:.75rem}.chat-msg-text{font-size:.85rem}.chat-input-area button,.chat-input-area input{font-size:.85rem;padding:8px 12px}}@media (max-width:400px){.session-modal{border-radius:12px;padding:14px;width:98%}.session-header{margin-bottom:12px}.session-header h2{font-size:1.05rem}.session-header p{font-size:.75rem}.add-participant{gap:6px;margin-bottom:12px}.add-participant input{font-size:.85rem;padding:8px 10px}.add-participant button{font-size:.8rem;padding:8px 12px}.participants-list{max-height:200px}.no-participants{font-size:.85rem;padding:15px}.participant-item{border-radius:8px;gap:8px;margin-bottom:5px;padding:8px}.participant-number{font-size:.6rem;height:20px;width:20px}.participant-avatar{height:30px;width:30px}.participant-name{font-size:.85rem}.participant-stats{font-size:.65rem}.btn-remove-participant{font-size:.9rem;height:24px;width:24px}.btn-session-start-game{font-size:.9rem;padding:10px 14px}.btn-session-end{font-size:.8rem;padding:8px 12px}}.btn-session-history{background:#8b5cf626;border:1px solid #8b5cf666;border-radius:25px;color:#a78bfa;cursor:pointer;font-size:.9rem;font-weight:600;margin-left:10px;padding:10px 20px;transition:all .3s ease}.btn-session-history:hover{background:#8b5cf640;border-color:#8b5cf699;transform:translateY(-2px)}.history-modal{background:#140a1efa;border:1px solid #8b5cf680;border-radius:20px;box-shadow:0 10px 50px #00000080,0 0 30px #8b5cf64d;max-height:85vh;max-width:600px;overflow-y:auto;padding:25px;position:relative;width:95%}.history-header{margin-bottom:20px;text-align:center}.history-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#a78bfa,#8b5cf6);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;margin-bottom:5px}.history-header p{color:#888;font-size:.9rem}.history-list{display:flex;flex-direction:column;gap:12px}.no-history{color:#666;font-style:italic;padding:40px 20px;text-align:center}.history-item-card{align-items:center;background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;cursor:pointer;display:flex;gap:15px;padding:15px;transition:all .3s ease}.history-item-card:hover{background:#8b5cf61a;border-color:#8b5cf64d;transform:translateX(5px)}.history-item-winner{position:relative}.history-item-avatar{border:2px solid #ffd70080;border-radius:50%;height:50px;width:50px}.history-item-crown{font-size:1rem;position:absolute;right:-5px;top:-8px}.history-item-info{display:flex;flex:1 1;flex-direction:column;gap:2px;min-width:0}.history-item-name{color:#fff;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item-date{color:#888;font-size:.75rem}.history-item-stats{color:#a78bfa;font-size:.8rem}.history-item-result{display:flex;flex-direction:column;text-align:right}.history-item-winner-name{color:gold;font-size:.85rem;font-weight:600}.history-item-winner-score{color:#48bb78;font-size:.9rem;font-weight:700}.history-detail{animation:fadeIn .3s ease}.btn-back-history{background:#0000;border:1px solid #fff3;border-radius:8px;color:#a78bfa;cursor:pointer;font-size:.9rem;margin-bottom:15px;padding:8px 16px;transition:all .3s ease}.btn-back-history:hover{background:#8b5cf61a;border-color:#8b5cf666}.history-detail-header{margin-bottom:20px;text-align:center}.history-detail-header h3{color:#fff;font-size:1.3rem;margin-bottom:5px}.history-date{color:#888;font-size:.85rem;margin-bottom:5px}.history-stats-summary{color:#a78bfa;font-size:.9rem}.history-winner{align-items:center;background:linear-gradient(135deg,#ffd7001a,#ffa5000d);border:2px solid #ffd7004d;border-radius:15px;display:flex;gap:15px;margin-bottom:20px;padding:20px}.winner-trophy{font-size:2rem}.winner-avatar{border:3px solid #ffd70099;border-radius:50%;height:60px;width:60px}.winner-info{display:flex;flex-direction:column}.winner-name{color:gold;font-size:1.2rem;font-weight:700}.winner-score{color:#48bb78;font-size:.9rem}.history-ranking-list{margin-bottom:20px}.history-ranking-list h4{color:#a78bfa;font-size:1rem;margin-bottom:12px}.history-ranking-item{align-items:center;background:#ffffff05;border-radius:10px;display:flex;gap:12px;margin-bottom:6px;padding:10px}.history-ranking-item.first{background:#ffd7001a;border:1px solid #ffd7004d}.history-ranking-item.second{background:#c0c0c01a;border:1px solid #c0c0c04d}.history-ranking-item.third{background:#cd7f321a;border:1px solid #cd7f324d}.history-position{font-weight:700;text-align:center;width:30px}.history-player-avatar{border:2px solid #8b5cf666;border-radius:50%;height:35px;width:35px}.history-player-info{display:flex;flex:1 1;flex-direction:column}.history-player-name{font-size:.95rem;font-weight:600}.history-player-stats{color:#888;font-size:.75rem}.history-player-scores{text-align:right}.history-avg{color:#48bb78;font-size:1rem;font-weight:700}.history-songs{border-top:1px solid #ffffff1a;padding-top:15px}.history-songs h4{color:#a78bfa;font-size:1rem;margin-bottom:12px}.history-song-item{align-items:center;background:#ffffff05;border-radius:8px;display:flex;font-size:.85rem;gap:10px;margin-bottom:5px;padding:8px 10px}.history-song-title{color:#fff;flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-song-singer{color:#a78bfa;font-size:.8rem}.history-song-score{color:#48bb78;font-weight:600}@media (max-width:600px){.btn-session-history{font-size:.8rem;margin-left:8px;padding:8px 14px}.history-modal{border-radius:15px;padding:18px;width:95%}.history-header h2{font-size:1.2rem}.history-item-card{gap:10px;padding:12px}.history-item-avatar{height:40px;width:40px}.history-item-name{font-size:.9rem}.winner-avatar{height:50px;width:50px}.winner-trophy{font-size:1.5rem}.winner-name{font-size:1rem}.history-player-avatar{height:30px;width:30px}}@media (max-width:400px){.btn-session-history{font-size:.75rem;margin-left:6px;padding:6px 10px}.history-modal{padding:14px;width:98%}.history-header h2{font-size:1.05rem}.history-item-card{gap:8px;padding:10px}.history-item-avatar{height:35px;width:35px}.history-item-name{font-size:.85rem}.history-item-result{display:none}.winner-avatar{height:45px;width:45px}.history-winner{gap:10px;padding:15px}.history-player-avatar{height:28px;width:28px}.history-ranking-item{gap:8px;padding:8px}}.btn-analyze-performance{background:linear-gradient(135deg,#8b5cf633,#6366f133);border:1px solid #8b5cf680;border-radius:12px;color:#a78bfa;cursor:pointer;font-size:1rem;font-weight:600;margin-top:15px;padding:12px 24px;transition:all .3s ease}.btn-analyze-performance:hover{background:linear-gradient(135deg,#8b5cf64d,#6366f14d);border-color:#8b5cf6cc;box-shadow:0 4px 15px #8b5cf64d;transform:translateY(-2px)}.heatmap-modal{background:#140a1efa;border:1px solid #8b5cf680;border-radius:20px;box-shadow:0 10px 50px #00000080,0 0 30px #8b5cf64d;max-height:90vh;max-width:700px;overflow-y:auto;padding:25px;position:relative;width:95%}.heatmap-header{margin-bottom:20px;text-align:center}.heatmap-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#a78bfa,#8b5cf6);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;margin-bottom:5px}.heatmap-header p{color:#888;font-size:.9rem}.heatmap-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.heatmap-tab{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;color:#888;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px 20px;transition:all .3s ease}.heatmap-tab:hover{background:#8b5cf61a;border-color:#8b5cf64d;color:#a78bfa}.heatmap-tab.active{background:linear-gradient(135deg,#8b5cf64d,#6366f14d);border-color:#8b5cf699;color:#fff}.heatmap-content{background:#0000004d;border-radius:15px;min-height:300px;padding:20px}.heatmap-temporal{text-align:center}.heatmap-chart{background:#0006;border-radius:10px;margin-bottom:15px;padding:15px}.heatmap-chart svg{height:150px;width:100%}.heatmap-legend{color:#888;display:flex;font-size:.85rem;gap:20px;justify-content:center;margin-bottom:10px}.legend-dot{border-radius:50%;display:inline-block;height:10px;margin-right:5px;width:10px}.legend-dot.good{background:#48bb78}.legend-dot.bad{background:#fc8181}.legend-area{background:#48bb7880;border-radius:2px;display:inline-block;height:10px;margin-right:5px;width:20px}.heatmap-description{color:#666;font-size:.8rem;font-style:italic}.heatmap-pitch{text-align:center}.pitch-comparison{display:flex;gap:40px;justify-content:center;margin-bottom:30px}.pitch-bar-container{align-items:center;display:flex;flex-direction:column;gap:10px}.pitch-label{color:#888;font-size:.85rem}.pitch-bar{align-items:center;border-radius:10px;display:flex;font-weight:700;height:80px;justify-content:center;width:100px}.pitch-bar.reference{background:linear-gradient(135deg,#6366f180,#6366f14d);border:2px solid #6366f199}.pitch-bar.user{background:#ffffff1a;border:2px solid #fff3}.pitch-bar.user.good{background:linear-gradient(135deg,#48bb7880,#48bb784d);border-color:#48bb7899}.pitch-bar.user.bad{background:linear-gradient(135deg,#fc818180,#fc81814d);border-color:#fc818199}.pitch-value{color:#fff;font-size:1.1rem}.pitch-histogram{margin-top:20px}.pitch-histogram h4{color:#a78bfa;font-size:1rem;margin-bottom:15px}.histogram-bars{align-items:flex-end;background:#0000004d;border-radius:10px;display:flex;gap:15px;height:120px;justify-content:center;padding:10px}.histogram-bar-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;min-width:50px}.histogram-bar{align-items:flex-start;background:linear-gradient(0deg,#8b5cf6cc,#8b5cf666);border-radius:5px 5px 0 0;display:flex;justify-content:center;min-height:5px;padding-top:5px;transition:height .3s ease;width:40px}.histogram-bar.correct{background:linear-gradient(0deg,#48bb78cc,#48bb7866)}.histogram-count{color:#fff;font-size:.75rem;font-weight:700}.histogram-label{color:#888;font-size:.65rem;margin-top:5px;text-align:center;white-space:nowrap}.heatmap-segments h4{color:#a78bfa;margin-bottom:15px;text-align:center}.segments-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:15px}.segment-card{align-items:center;background:#0000004d;border-radius:8px;display:flex;flex-direction:column;height:120px;padding:8px 5px;width:50px}.segment-number{color:#888;font-size:.7rem;margin-bottom:5px}.segment-bar{border-radius:4px;flex:1 1;transition:all .3s ease;width:30px}.segment-info{align-items:center;display:flex;flex-direction:column;margin-top:5px}.segment-percent{color:#fff;font-size:.7rem;font-weight:700}.segment-time{color:#666;font-size:.6rem}.segments-legend{color:#888;display:flex;font-size:.8rem;gap:15px;justify-content:center}.legend-block{border-radius:3px;display:inline-block;height:15px;margin-right:5px;width:15px}.legend-block.good{background:#48bb78cc}.legend-block.medium{background:#f6ad55cc}.legend-block.bad{background:#fc8181cc}.btn-close-heatmap{background:#ffffff1a;border:1px solid #fff3;border-radius:10px;color:#fff;cursor:pointer;display:block;font-size:1rem;margin:20px auto 0;padding:12px 40px;transition:all .3s ease}.btn-close-heatmap:hover{background:#ffffff26;border-color:#ffffff4d}@media (max-width:600px){.heatmap-modal{padding:18px;width:95%}.heatmap-header h2{font-size:1.2rem}.heatmap-tabs{flex-wrap:wrap;gap:8px}.heatmap-tab{font-size:.8rem;padding:8px 12px}.heatmap-content{padding:15px}.pitch-comparison{flex-direction:column;gap:20px}.pitch-bar{width:120px}.histogram-bars{gap:8px}.histogram-bar-wrapper{min-width:40px}.histogram-bar{width:30px}.histogram-label{font-size:.55rem}.segment-card{height:100px;width:40px}.segment-bar{width:25px}.segments-legend{flex-wrap:wrap;gap:10px}}@media (max-width:400px){.heatmap-modal{padding:14px}.heatmap-tabs{gap:5px}.heatmap-tab{font-size:.75rem;padding:6px 10px}.segment-card{height:90px;width:32px}.segment-bar{width:20px}.segment-percent{font-size:.6rem}.btn-analyze-performance{font-size:.9rem;padding:10px 18px}}.load-more-sentinel{align-items:center;display:flex;grid-column:1/-1;justify-content:center;min-height:60px;padding:20px 0;width:100%}.loading-more{align-items:center;color:#ffffffb3;display:flex;flex-direction:column;font-size:.9rem;gap:12px}.loading-more .spinner{animation:spin .8s linear infinite;border:3px solid #f0f3;border-radius:50%;border-top-color:#f0f;height:32px;width:32px}@keyframes spin{to{transform:rotate(1turn)}}.pitch-graph-container{border:1px solid #6496ff4d;border-radius:12px;box-shadow:0 0 20px #6496ff26,inset 0 0 30px #0000004d;height:120px;margin:15px auto;max-width:800px;overflow:hidden;position:relative;width:100%;z-index:5}.pitch-graph-canvas{display:block;height:100%;width:100%}@media (max-width:768px){.pitch-graph-container{height:100px;margin:10px auto;max-width:95%}}@media (max-width:480px){.pitch-graph-container{height:80px}}.pitch-visualizer{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#0009,#14002899);border:1px solid #f0f3;border-radius:20px;display:flex;gap:30px;justify-content:center;margin:15px auto;max-width:600px;opacity:.7;padding:15px 25px;transition:all .3s ease}.pitch-visualizer.active{border-color:#0ff6;box-shadow:0 0 30px #0ff3;opacity:1}.pitch-note-display{align-items:center;display:flex;flex-direction:column;min-width:80px}.pitch-note-name{color:#0ff;font-family:Orbitron,monospace;font-size:2.5rem;font-weight:900;line-height:1;text-shadow:0 0 20px #0ffc;transition:all .1s ease}.pitch-visualizer.active .pitch-note-name{animation:notePulse .5s ease infinite}@keyframes notePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pitch-frequency{color:#ffffff80;font-size:.75rem;margin-top:4px}.pitch-meter{display:flex;flex:1 1;flex-direction:column;gap:8px;max-width:300px}.pitch-meter-labels{color:#fff9;display:flex;font-size:1.2rem;justify-content:space-between;padding:0 10px}.pitch-meter-labels span:first-child{color:#ff6b6b}.pitch-meter-labels span:nth-child(2){color:#0f8;font-weight:700}.pitch-meter-labels span:last-child{color:#ffd93d}.pitch-meter-bar{background:linear-gradient(90deg,#ff6b6b,#ff6b6b 30%,#0f8 45%,#0f8 55%,#ffd93d 70%,#ffd93d);border-radius:6px;height:12px;overflow:visible;position:relative}.pitch-meter-center{background:#fff;border-radius:2px;bottom:-4px;box-shadow:0 0 10px #fffc;left:50%;position:absolute;top:-4px;transform:translateX(-50%);width:3px}.pitch-meter-indicator{background:#fff;border-radius:50%;box-shadow:0 0 15px #fffc;height:20px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .1s ease,background .2s ease,box-shadow .2s ease;width:20px;z-index:2}.pitch-meter-indicator.in-tune{animation:inTunePulse .3s ease infinite;background:#0f8;box-shadow:0 0 25px #0f8,0 0 50px #00ff8880}.pitch-meter-indicator.close{background:#ffd93d;box-shadow:0 0 20px #ffd93dcc}.pitch-meter-indicator.off{background:#ff6b6b;box-shadow:0 0 15px #ff6b6b99}.pitch-accuracy-text{font-size:.85rem;height:20px;text-align:center}.pitch-accuracy-text .sharp{color:#ffd93d}.pitch-accuracy-text .flat{color:#ff6b6b}.pitch-accuracy-text .perfect{animation:perfectGlow .5s ease infinite;color:#0f8;font-weight:700;text-shadow:0 0 10px #0f8c}@keyframes perfectGlow{0%,to{opacity:1}50%{opacity:.7}}.pitch-history-visual{align-items:center;display:flex;gap:3px;height:50px;padding:0 10px}.pitch-history-dot{border-radius:50%;height:6px;transition:all .2s ease;width:6px}.pitch-history-dot.in-tune{background:#0f8;box-shadow:0 0 8px #0f8c}.pitch-history-dot.off-tune{background:#ff6b6b;box-shadow:0 0 5px #ff6b6b80}@media (max-width:768px){.pitch-visualizer{flex-direction:column;gap:15px;padding:12px 15px}.pitch-note-name{font-size:2rem}.pitch-meter{max-width:100%;width:100%}.pitch-history-visual{display:none}}@media (max-width:480px){.pitch-visualizer{margin:10px;padding:10px}.pitch-note-name{font-size:1.8rem}.pitch-meter-bar{height:10px}.pitch-meter-indicator{height:16px;width:16px}}.pitch-meter-bar{overflow:visible!important;z-index:1}.pitch-meter-indicator{z-index:10}.pitch-visualizer{border:2px solid #00ffff4d!important}.pitch-meter-indicator{transition:left .3s cubic-bezier(.4,0,.2,1),background .3s ease,box-shadow .3s ease,transform .2s ease!important}.pitch-meter-indicator.in-tune{animation:inTunePulse .8s ease infinite!important}@keyframes inTunePulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}.pitch-note-name{transition:all .2s ease}.pitch-history-dot{transition:all .3s ease}
/*# sourceMappingURL=main.b91650c1.css.map*/