.App{min-height:100vh;background:#000000;color:#fff;padding:2rem}.jukebox-container{max-width:800px;margin:0 auto}.jukebox-title{font-size:4rem;font-weight:900;text-align:center;margin-bottom:.5rem;text-transform:lowercase;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#9370db,#ff1493,#00ff00);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 4s ease infinite;text-shadow:0 0 30px rgba(255,0,128,.5),0 0 60px rgba(64,224,208,.3);letter-spacing:.1em;cursor:pointer}.subtitle{font-size:18px;color:#888;margin-top:10px;margin-bottom:2rem;text-align:center;text-transform:lowercase;letter-spacing:2px}.search-container{position:relative;margin-bottom:2rem}.search-bar{width:100%;padding:1.5rem 2rem;font-size:1.2rem;background:rgba(255,255,255,.05);border:2px solid rgba(255,0,128,.3);border-radius:50px;color:#fff;outline:none;position:relative;backdrop-filter:blur(10px);transition:all .3s ease;box-shadow:0 0 20px #ff00804d,0 0 40px #40e0d033,inset 0 0 20px #ffffff0d}.search-bar::placeholder{color:#ffffff80}.search-bar:focus{background:rgba(255,255,255,.08);border-radius:50px;border:2px solid #ff0080;animation:glow-border 2s ease infinite;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}.search-loading-spinner{position:absolute;right:2rem;top:50%;margin-top:-12px;width:24px;height:24px;border:3px solid rgba(255,255,255,.1);border-top:3px solid #ff0080;border-radius:50%;animation:spin 1s linear infinite,rainbow-spin 3s ease infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rainbow-spin{0%,to{border-top-color:#ff0080}33%{border-top-color:#40e0d0}66%{border-top-color:#ff8c00}}.selected-track{text-align:center;padding:1rem;margin-bottom:2rem;background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));border-radius:20px;border:1px solid rgba(255,255,255,.1);animation:pulse-glow 2s ease infinite}.request-sent{text-align:center;padding:3rem 2rem;margin:2rem 0;background:linear-gradient(135deg,rgba(255,0,128,.15),rgba(64,224,208,.15));border-radius:30px;border:2px solid rgba(255,0,128,.4);animation:success-appear .5s ease,pulse-glow 2s ease infinite;box-shadow:0 0 30px #ff00804d,0 0 60px #40e0d033}@keyframes success-appear{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.success-icon{font-size:4rem;background:linear-gradient(45deg,#ff0080,#40e0d0,#00ff00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;animation:bounce-in .6s ease}@keyframes bounce-in{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.request-sent h2{font-size:2rem;margin-bottom:1rem;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 3s ease infinite}.request-message{font-size:1.2rem;color:#ffffffe6;margin-bottom:2rem;line-height:1.6}.request-message strong{color:#ff0080;text-shadow:0 0 10px rgba(255,0,128,.5)}.new-request-btn{padding:1rem 2rem;font-size:1.1rem;font-weight:600;background:rgba(255,255,255,.05);border:2px solid #ff0080;border-radius:50px;color:#fff;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);box-shadow:0 0 20px #ff00804d}.new-request-btn:hover{background:rgba(255,0,128,.2);border-color:#40e0d0;transform:scale(1.05);box-shadow:0 0 30px #ff008080,0 0 60px #40e0d04d;animation:button-glow 1.5s ease infinite}@keyframes button-glow{0%,to{border-color:#ff0080}50%{border-color:#40e0d0}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #ff00804d}50%{box-shadow:0 0 40px #40e0d080}}.results-container{margin-top:2rem}.tracks-list{display:flex;flex-direction:column;gap:1rem}.track-item{display:flex;align-items:center;justify-content:center;gap:1.25rem;padding:1.25rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:20px;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);position:relative;overflow:hidden}.track-item:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,0,128,.1),rgba(64,224,208,.1),transparent);transform:rotate(45deg);transition:all .5s ease;opacity:0}.track-item:hover:before{opacity:1;animation:shimmer 1.5s ease infinite}@keyframes shimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.track-item:hover{background:rgba(255,255,255,.08);border:1px solid #ff0080;border-radius:20px;transform:translateY(-5px) scale(1.02);box-shadow:0 10px 30px #ff00804d,0 10px 60px #40e0d033;animation:track-glow 2s ease infinite}@keyframes track-glow{0%{border-color:#ff0080;box-shadow:0 10px 30px #ff008066,0 10px 60px #40e0d04d}33%{border-color:#40e0d0;box-shadow:0 10px 30px #40e0d066,0 10px 60px #ff8c004d}66%{border-color:#ff8c00;box-shadow:0 10px 30px #ff8c0066,0 10px 60px #9370db4d}to{border-color:#ff0080;box-shadow:0 10px 30px #ff008066,0 10px 60px #40e0d04d}}.album-art{width:60px;height:60px;border-radius:10px;object-fit:cover;box-shadow:0 4px 15px #ff00804d;transition:all .3s ease}.track-item:hover .album-art{box-shadow:0 4px 20px #ff008099,0 8px 40px #40e0d066;transform:scale(1.1) rotate(5deg)}.track-info{flex:1;z-index:1;text-align:center}.track-title{font-size:1.2rem;font-weight:600;margin-bottom:.3rem;color:#fff}.track-artist{font-size:1rem;color:#fff9}.play-icon{font-size:1.5rem;color:#ff0080;opacity:.6;transition:all .3s ease;z-index:1;text-shadow:0 0 10px rgba(255,0,128,.5)}.track-item:hover .play-icon{opacity:1;transform:scale(1.3);animation:color-shift 2s ease infinite}@keyframes color-shift{0%,to{color:#ff0080}33%{color:#40e0d0}66%{color:#ff8c00}}@media (max-width: 768px){.jukebox-title{font-size:2.5rem}.search-bar{font-size:1rem;padding:1rem 1.5rem}.track-item{padding:1rem;gap:1rem}.album-art{width:50px;height:50px}.track-title{font-size:1rem}.track-artist{font-size:.9rem}.auth-links{top:auto!important;bottom:0!important;right:auto!important;left:0!important;width:100%!important;transform:none!important;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 15%,rgba(0,0,0,.95) 100%)!important;padding:2rem 3rem!important;justify-content:center!important}}.manage-page{min-height:100vh;background:#000000;color:#fff;padding:2rem;position:relative}.logout-btn{position:fixed;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.05);border:2px solid rgba(255,0,128,.3);color:#888;font-size:32px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;backdrop-filter:blur(10px);z-index:1000;line-height:1;padding:0}.logout-btn:hover{background:rgba(255,0,128,.1);border-color:#ff0080;color:#ff0080;transform:rotate(90deg) scale(1.1);box-shadow:0 0 20px #ff008066}.logout-btn:active{transform:rotate(90deg) scale(.95)}.header{max-width:800px;margin:0 auto;text-align:center;margin-bottom:3rem}.title{font-size:4rem;font-weight:900;text-align:center;margin-bottom:.5rem;text-transform:lowercase;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#9370db,#ff1493,#00ff00);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 4s ease infinite;text-shadow:0 0 30px rgba(255,0,128,.5),0 0 60px rgba(64,224,208,.3);letter-spacing:.1em;cursor:pointer}.subtitle{font-size:18px;color:#888;margin-top:10px;text-transform:lowercase;letter-spacing:2px}.subscription-warning{margin-top:1.5rem;text-align:center}.warning-text{color:#ff8c00;font-weight:700;font-size:1.1rem;margin-bottom:.3rem;animation:pulse 2s ease infinite}.warning-count{color:#ffffffb3;font-size:.95rem;letter-spacing:.05em}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.loading,.no-requests{text-align:center;font-size:24px;color:#666;margin-top:100px}.requests-container{max-width:1200px;margin:0 auto}.stats{display:flex;justify-content:center;gap:60px;margin-bottom:40px;padding:30px;background:rgba(255,255,255,.03);border-radius:20px;border:2px solid transparent;background-clip:padding-box;position:relative}.stats:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;padding:2px;background:linear-gradient(90deg,#ff006e,#8338ec,#3a86ff,#06ffa5,#ffbe0b,#ff006e);background-size:200% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:holographic 3s linear infinite;pointer-events:none;z-index:-1}.stat{display:flex;flex-direction:column;align-items:center;gap:10px}.stat.active .stat-label{color:#fff;font-weight:700}.stat-number{font-size:48px;font-weight:900;background:linear-gradient(90deg,#ff006e,#8338ec,#3a86ff,#06ffa5,#ffbe0b,#ff006e);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 3s linear infinite}.stat-label{font-size:14px;color:#888;text-transform:lowercase;letter-spacing:1px}.requests-list{display:flex;flex-direction:column;gap:20px;padding-bottom:150px}.request-card{display:flex;align-items:center;gap:20px;padding:20px;background:rgba(255,255,255,.03);border-radius:20px;border:2px solid transparent;background-clip:padding-box;position:relative}.request-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;padding:2px;background:linear-gradient(90deg,#ff006e,#8338ec,#3a86ff,#06ffa5,#ffbe0b,#ff006e);background-size:200% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:holographic 3s linear infinite;pointer-events:none;z-index:-1}.request-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.05)}.album-art{width:80px;height:80px;border-radius:10px;object-fit:cover;box-shadow:0 4px 20px #00000080;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.album-art:hover{transform:scale(1.05);box-shadow:0 6px 30px #000000b3}.request-info{flex:1;min-width:0}.song-title{font-size:20px;font-weight:700;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist-name{font-size:16px;color:#888;margin-bottom:5px}.request-time{font-size:12px;color:#666}.status-badge{padding:8px 16px;border-radius:20px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:rgba(255,255,255,.1)}.actions{display:flex;gap:10px}.btn{padding:10px 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:lowercase;white-space:nowrap}.btn-approve{position:relative;overflow:hidden}.btn-approve span{opacity:0;transition:opacity .2s ease}.btn-approve:hover span{opacity:1}.btn-approve{background:rgba(0,255,0,.2);color:#0f0;border:2px solid #00ff00}.btn-approve:hover{background:rgba(0,255,0,.3);transform:translateY(-2px);box-shadow:0 4px 20px #00ff004d}.btn-reject{background:rgba(255,0,0,.2);color:red;border:2px solid #ff0000}.btn-reject:hover{background:rgba(255,0,0,.3);transform:translateY(-2px);box-shadow:0 4px 20px #ff00004d}.btn-delete{background:rgba(255,255,255,.1);color:#888;border:2px solid #444}.btn-delete:hover{background:rgba(255,255,255,.15);color:#fff;border-color:#666;transform:translateY(-2px)}@keyframes holographic{0%{background-position:0% 50%}to{background-position:200% 50%}}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:rgba(0,255,0,.2);border:2px solid #00ff00;color:#0f0;padding:1rem 2rem;border-radius:50px;font-size:1rem;font-weight:600;backdrop-filter:blur(10px);box-shadow:0 0 20px #0f06,0 0 40px #0f03;animation:slideUpToast .3s ease;z-index:1001;letter-spacing:.5px}.toast.fade-out{animation:fadeOut .3s ease forwards}@keyframes slideUpToast{0%{bottom:70px;opacity:0}to{bottom:100px;opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@media (max-width: 768px){.stats{gap:30px}.request-card{flex-wrap:wrap}.actions{width:100%;justify-content:flex-end}}.paywall-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .3s ease;overflow-y:auto;padding:2rem 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.paywall-modal{background:rgba(255,255,255,.03);border:2px solid #ff0080;border-radius:20px;padding:3rem 2rem;max-width:500px;width:90%;text-align:center;backdrop-filter:blur(10px);animation:slideUp .4s ease,glow-border 2s ease infinite;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a;margin:auto}@keyframes glow-border{0%{border-color:#ff0080;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}33%{border-color:#40e0d0;box-shadow:0 0 30px #40e0d099,0 0 60px #ff8c0066,inset 0 0 30px #ffffff1a}66%{border-color:#ff8c00;box-shadow:0 0 30px #ff8c0099,0 0 60px #ff008066,inset 0 0 30px #ffffff1a}to{border-color:#ff0080;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.paywall-icon{font-size:4rem;margin-bottom:1rem;animation:bounce 2s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.paywall-title{font-size:2rem;font-weight:900;margin-bottom:1rem;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 3s ease infinite}.paywall-message{font-size:1.2rem;color:#fff;margin-bottom:2rem;line-height:1.6}.paywall-cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,0,128,.2);border-radius:15px;padding:2rem;margin:2rem 0}.paywall-upgrade-text{font-size:1.1rem;color:#fff;margin-bottom:1.5rem}.upgrade-button{background:linear-gradient(45deg,#ff0080,#ff8c00);border:none;color:#fff;font-size:1.2rem;font-weight:900;padding:1rem 2rem;border-radius:50px;cursor:not-allowed;text-transform:uppercase;letter-spacing:.1em;box-shadow:0 0 30px #ff008066;opacity:.7;width:100%}.upgrade-button:not(:disabled){cursor:pointer;opacity:1;transition:all .3s ease}.upgrade-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 0 40px #ff008099}.paywall-footer{font-size:.85rem;color:#ffffff80;margin-top:1.5rem}@media (max-width: 768px){.paywall-modal{padding:2rem 1.5rem}.paywall-icon{font-size:3rem}.paywall-title{font-size:1.5rem}.paywall-message{font-size:1rem}.paywall-cta{padding:1.5rem}.upgrade-button{font-size:1rem;padding:.8rem 1.5rem}}.close-btn{position:absolute;top:1rem;right:1rem;background:transparent;border:2px solid rgba(255,0,128,.3);color:#888;font-size:2rem;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{border-color:#ff0080;color:#ff0080;transform:rotate(90deg)}.close-btn:disabled{opacity:.5;cursor:not-allowed}.payment-header{margin-bottom:2rem}.payment-header h2{font-size:2rem;margin-bottom:.5rem;background:linear-gradient(135deg,#ff0080,#40e0d0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.usage-info{color:#fff9;font-size:.9rem}.pricing-info{margin-bottom:2rem;padding:1.5rem;background:rgba(255,255,255,.05);border-radius:10px;border:1px solid rgba(255,0,128,.2)}.price{font-size:3rem;font-weight:700;background:linear-gradient(135deg,#ff0080,#40e0d0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.price-description{color:#ffffffb3;font-size:.9rem}.payment-form{width:100%}.form-section{margin-bottom:1.5rem;text-align:left}.form-section label{display:block;margin-bottom:.5rem;color:#fffc;font-size:.9rem;font-weight:500}.card-container{background:rgba(255,255,255,.05);border:2px solid rgba(255,0,128,.3);border-radius:10px;padding:1rem;min-height:60px;transition:all .3s ease}.card-container:focus-within{border-color:#ff0080;box-shadow:0 0 20px #ff00804d}.error-message{background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.3);color:#f44;padding:1rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem}.success-message{background:rgba(0,255,0,.1);border:1px solid rgba(0,255,0,.3);color:#4f4;padding:1rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem}.cancel-button{width:100%;padding:1rem 2rem;font-size:1.1rem;font-weight:600;background:transparent;border:2px solid rgba(255,255,255,.2);color:#fff9;border-radius:50px;cursor:pointer;transition:all .3s ease;margin-top:1rem}.cancel-button:hover:not(:disabled){border-color:#fff6;color:#fffc}.cancel-button:disabled{opacity:.5;cursor:not-allowed}.payment-iframe-container{margin:2rem 0;border-radius:10px;overflow:hidden;border:2px solid rgba(255,0,128,.3)}.payment-iframe-container iframe{display:block;border:none}.verification-container{margin:2rem 0;padding:3rem 2rem;text-align:center;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center}.verification-message{font-size:1.2rem;color:#fff;margin-top:1.5rem}.verification-loading-spinner{border:4px solid rgba(255,0,128,.2);border-top:4px solid #ff0080;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.RegisterPage{min-height:100vh;background:#000000;color:#fff;padding:2rem}.register-container{max-width:600px;margin:0 auto}.jukebox-title{font-size:4rem;font-weight:900;text-align:center;margin-bottom:3rem;text-transform:lowercase;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#9370db,#ff1493,#00ff00);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 4s ease infinite;text-shadow:0 0 30px rgba(255,0,128,.5),0 0 60px rgba(64,224,208,.3);letter-spacing:.1em;cursor:pointer}.register-box{background:rgba(255,255,255,.03);border:2px solid #ff0080;border-radius:20px;padding:3rem;backdrop-filter:blur(10px);animation:glow-border 2s ease infinite;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}.register-heading{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2rem;color:#ffffffe6}.register-form{display:flex;flex-direction:column;gap:1.5rem}.register-button{margin-top:1rem;padding:1.2rem 2rem;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,rgba(255,0,128,.3),rgba(64,224,208,.3));border:2px solid rgba(255,0,128,.5);border-radius:50px;color:#fff;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.1em;backdrop-filter:blur(10px);box-shadow:0 0 20px #ff00804d,0 0 40px #40e0d033}.register-button:hover:not(:disabled){background:linear-gradient(135deg,rgba(255,0,128,.5),rgba(64,224,208,.5));border-color:#ff0080;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066;transform:translateY(-2px)}.register-button:active:not(:disabled){transform:translateY(0)}.register-button:disabled{opacity:.5;cursor:not-allowed}.success-message{padding:1rem;background:rgba(0,255,0,.1);border:2px solid rgba(0,255,0,.5);border-radius:10px;color:#4f4;text-align:center;font-weight:600;margin-bottom:1rem;animation:fadeIn .5s}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.login-link{margin-top:2rem;text-align:center;color:#fff9;font-size:.9rem}.login-link a{color:#ff0080;text-decoration:none;font-weight:600;transition:all .3s ease}.login-link a:hover{color:#40e0d0;text-shadow:0 0 10px rgba(64,224,208,.5)}.LoginPage{min-height:100vh;background:#000000;color:#fff;padding:2rem}.login-container{max-width:600px;margin:0 auto}.jukebox-title{font-size:4rem;font-weight:900;text-align:center;margin-bottom:3rem;text-transform:lowercase;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#9370db,#ff1493,#00ff00);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 4s ease infinite;text-shadow:0 0 30px rgba(255,0,128,.5),0 0 60px rgba(64,224,208,.3);letter-spacing:.1em;cursor:pointer}.login-box{background:rgba(255,255,255,.03);border:2px solid #ff0080;border-radius:20px;padding:3rem;backdrop-filter:blur(10px);animation:glow-border 2s ease infinite;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}@keyframes glow-border-subtle{0%{border-color:#ff00804d;box-shadow:0 0 30px #ff008033,0 0 60px #40e0d01a,inset 0 0 20px #ffffff08}50%{border-color:#40e0d04d;box-shadow:0 0 30px #40e0d033,0 0 60px #ff8c001a,inset 0 0 20px #ffffff08}to{border-color:#ff00804d;box-shadow:0 0 30px #ff008033,0 0 60px #40e0d01a,inset 0 0 20px #ffffff08}}.login-heading{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2rem;color:#ffffffe6}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.9rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em}.form-input{width:100%;padding:1rem 1.5rem;font-size:1rem;background:rgba(255,255,255,.05);border:2px solid rgba(255,0,128,.2);border-radius:10px;color:#fff;outline:none;backdrop-filter:blur(10px);transition:all .3s ease;box-shadow:0 0 10px #ff00801a,inset 0 0 10px #ffffff08}.form-input::placeholder{color:#ffffff4d}.form-input:focus{background:rgba(255,255,255,.08);border:2px solid #ff0080;box-shadow:0 0 20px #ff008066,0 0 40px #40e0d033,inset 0 0 15px #ffffff0d}.form-input:disabled{opacity:.5;cursor:not-allowed}.login-button{margin-top:1rem;padding:1.2rem 2rem;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,rgba(255,0,128,.3),rgba(64,224,208,.3));border:2px solid rgba(255,0,128,.5);border-radius:50px;color:#fff;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.1em;backdrop-filter:blur(10px);box-shadow:0 0 20px #ff00804d,0 0 40px #40e0d033}.login-button:hover:not(:disabled){background:linear-gradient(135deg,rgba(255,0,128,.5),rgba(64,224,208,.5));border-color:#ff0080;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066;transform:translateY(-2px)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.5;cursor:not-allowed}.error-message{padding:1rem;background:rgba(255,0,0,.1);border:2px solid rgba(255,0,0,.5);border-radius:10px;color:#f44;text-align:center;font-weight:600;margin-bottom:1rem;animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.register-link{margin-top:2rem;text-align:center;color:#fff9;font-size:.9rem}.register-link a{color:#ff0080;text-decoration:none;font-weight:600;transition:all .3s ease}.register-link a:hover{color:#40e0d0;text-shadow:0 0 10px rgba(64,224,208,.5)}.qr-page{min-height:100vh;background:#000000;color:#fff;padding:2rem;font-family:Arial,sans-serif;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.header{text-align:center;margin-bottom:3rem}.title{font-size:4rem;font-weight:900;margin:0;text-transform:lowercase;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#9370db,#ff1493,#00ff00);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographic 4s ease infinite;text-shadow:0 0 30px rgba(255,0,128,.5),0 0 60px rgba(64,224,208,.3);letter-spacing:.1em;cursor:default}@keyframes holographic{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.qr-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;margin-top:2rem}.qr-code-wrapper{background:rgba(255,255,255,.03);border:2px solid #ff0080;border-radius:20px;padding:3rem;backdrop-filter:blur(10px);animation:glow-border 2s ease infinite;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}@keyframes glow-border{0%{border-color:#ff0080;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}33%{border-color:#40e0d0;box-shadow:0 0 30px #40e0d099,0 0 60px #ff8c0066,inset 0 0 30px #ffffff1a}66%{border-color:#ff8c00;box-shadow:0 0 30px #ff8c0099,0 0 60px #9370db66,inset 0 0 30px #ffffff1a}to{border-color:#ff0080;box-shadow:0 0 30px #ff008099,0 0 60px #40e0d066,inset 0 0 30px #ffffff1a}}.loading{text-align:center;font-size:1.5rem;color:#0f0;margin-top:3rem}@media (max-width: 768px){.title{font-size:2.5rem}.qr-code-wrapper{padding:2rem}.qr-code-wrapper svg{width:300px!important;height:300px!important}}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;background:#000000;color:#fff;min-height:100vh;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff0080,#40e0d0);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff1493,#00ffff)}