.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}.loading-spinner{position:absolute;right:2rem;top:50%;transform:translateY(-50%);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:translateY(-50%) rotate(0)}to{transform:translateY(-50%) 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;gap:1.5rem;padding:1.5rem;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}.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}}.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}.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}.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;transition:all .3s ease}.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{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:30px;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:slideUp .3s ease;z-index:1000;letter-spacing:.5px}.toast.fade-out{animation:fadeOut .3s ease forwards}@keyframes slideUp{0%{bottom:-50px;opacity:0}to{bottom:30px;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}}.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}.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)}