.toast{position:fixed;top:20px;right:20px;min-width:300px;max-width:500px;padding:16px 20px;border-radius:12px;box-shadow:0 8px 24px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}.toast-exit{animation:slideOut .3s ease-in forwards}.toast-success{background:#51cf66f2;border:1px solid rgba(64,192,87,.5)}.toast-error{background:#ef4444f2;border:1px solid rgba(220,38,38,.5)}.toast-info{background:#0396fff2;border:1px solid rgba(2,119,212,.5)}.toast-content{display:flex;align-items:center;gap:12px;color:#fff}.toast-icon{font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#fff3;border-radius:50%}.toast-message{font-size:15px;font-weight:500;flex:1}@media (max-width: 768px){.toast{top:10px;right:10px;left:10px;min-width:auto}}html{background:linear-gradient(to right,#6a11cb,#2575fc);font-family:Poppins,sans-serif;height:100%}body{height:100%;justify-content:center}div#root{width:90%;max-width:1200px;min-height:100vh;margin:0 auto;padding:5.5% 20px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;box-sizing:border-box}.app-header{position:fixed;top:0%;left:0;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:20px;justify-content:space-between;z-index:20}.app-logo{width:clamp(100px,20vw,300px);max-width:250px;min-width:100px;height:auto;cursor:pointer;padding:20px}.setup-container,.game-container,.score-submit-container{background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:20px;display:flex;width:70%;height:auto;flex-direction:column;justify-content:space-evenly;align-items:center;box-shadow:0 10px 30px #0006;padding:20px;gap:30px;min-height:500px}.game-container{gap:0px}.menu-container{display:flex;flex-direction:column;gap:10px;align-items:center}label{font-weight:700;display:flex;color:#c1b5b5;align-self:flex-start}h1{color:#fff;text-align:center;font-size:3em;text-shadow:2px 2px 5px rgba(0,0,0,.3);margin-bottom:2%}h2{color:#fff;text-align:center;font-size:3.5em;text-shadow:2px 2px 5px rgba(0,0,0,.3);margin:10px}h3{color:#878383;text-shadow:1px 1px 3px rgba(0,0,0,.1)}.note{display:flex;justify-content:center;color:#fff;font-size:8.5rem}.note-animate{background:linear-gradient(to bottom,#fff,#fff,#fff,#ff4545,#0f9,#006aff,#ff0095,#fff,#fff,#fff);background-size:100% 400%;background-clip:text;font-size:8.5rem;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:animate-gradient .3s linear both}@keyframes animate-gradient{0%{background-position:100% 0%}to{background-position:100% 100%}}.dropdown{padding:10px;font-size:16px;border-radius:15px;border:1px solid #ddd;margin-bottom:20px;margin-top:1px;width:100%}.dropdown:hover{cursor:pointer;background-color:#f5f5f5}.checkbox{border-radius:20px;transform:scale(2.5)}.checkbox:hover{cursor:pointer}.back-button,.start-button,.tuner-button{background:#000;color:#fff;padding:12px 25px;cursor:pointer;border-radius:15px;font-size:18px;position:relative;transition:.5s ease-in-out}@supports (background: conic-gradient(red,blue)) and (not (-webkit-touch-callout: none)){.start-button:after,.start-button:before{content:"";position:absolute;height:100%;width:100%;background-image:conic-gradient(from var(--angle),#ff4545,#00ff99,#006aff,#ff0095,#ff4545);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;border-radius:inherit;padding:3px;animation:3s spin infinite linear}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}.start-button:before{filter:blur(1.5rem);opacity:.8;z-index:-2}}@supports (-webkit-touch-callout: none){.start-button:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,#ff4545,#0f9,#006aff,#ff0095);border-radius:22px;z-index:-1;animation:animateGlow 3s linear infinite}@keyframes animateGlow{0%{filter:blur(10px) hue-rotate(0deg)}to{filter:blur(10px) hue-rotate(360deg)}}}.back-button:hover,.start-button:hover{background-color:#181818;transform:all scale(1.1)}@supports (-webkit-touch-callout: none){.start-button:hover:before{filter:blur(15px) hue-rotate(0deg)}}.loading{font-size:16px;color:#666}.score,.time{font-size:22px;font-weight:700;margin-top:20px;color:#222;text-shadow:1px 1px 3px rgba(0,0,0,.2)}.score-form{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:0 auto}.name-input{padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:16px;background-color:#ffffffe6}.submit-button{background:linear-gradient(to right,#ff416c,#ff4b2b);color:#fff;border:none;padding:12px 25px;margin:15px 0;cursor:pointer;border-radius:50px;font-size:18px;transition:transform .3s ease-in-out}.submit-button:disabled{background-color:#888;cursor:not-allowed}.submit-button:hover:not(:disabled){background:#d40b3a;transform:scale(1.025)}.error-message{color:#ff6b6b;margin-top:10px;font-size:14px}@media (max-width: 768px){div#root{width:100%;padding:7.5% 20px 20px;min-height:100vh;gap:25px}.app-header{position:fixed;flex-direction:column;align-items:flex-start;gap:12px}.app-logo{width:180px;padding:10px}.setup-container,.game-container,.score-submit-container{width:100%;padding:20px 15px;gap:25px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}h1{font-size:2.5em;margin-bottom:30px;text-align:left;width:100%}.menu-container{width:100%;gap:25px}.menu-container>div{width:100%}label{color:#fff;font-size:1.2em;margin-bottom:8px}.dropdown{width:100%;padding:15px;font-size:1.1em;border-radius:12px;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2);margin-bottom:0}.optionals-container{width:100%;padding:0;gap:25px!important;margin-top:10px}.optionals-container label{font-size:1.2em;margin-bottom:8px}.back-button,.start-button{width:100%;padding:15px;font-size:1.2em;margin-top:15px;border-radius:12px;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1)}.back-button:hover,.start-button:hover{background:#000c}}.guitar-tab-staff{display:flex;flex-direction:column;gap:3px;align-items:center}.string-row{display:flex;flex-direction:row;align-items:center;justify-content:center;width:60%}.string-label{width:30px;text-align:center;font-size:1.5rem}.tab-line{flex:1;height:2px;background-color:#000;position:relative}.tab-note{position:absolute;left:50%;top:-15px;font-size:1.7rem;color:#fff}.game-container{width:100%;max-width:1200px;margin:0 auto;padding:20px}.game-content{width:100%;text-align:center}.fretboard-wrapper{width:100%;display:flex;justify-content:center;padding:0 20px}.fretboard-container{position:relative;border:solid 2px #2a2a2a;border-radius:10px;width:100%;height:fit-content;margin:20px auto;background:linear-gradient(145deg,#1a1a1a,#2d2d2d);box-shadow:0 4px 15px #0000004d}.strings-container{display:flex;flex-direction:column;width:100%;gap:2px}.fret-box{display:grid;grid-template-columns:40px 8px repeat(12,1fr);align-items:center;height:40px;position:relative}.fret-box-on-each-string{position:relative;border-right:2px solid #c0c0c0;height:110%;display:flex;align-items:center;justify-content:center;background:transparent}.string{position:absolute;width:110%;height:5px;background:linear-gradient(to bottom,#fff,silver 30%,gray);top:50%;transform:translateY(-50%);z-index:2}.fret-marker{position:absolute;width:20px;height:20px;background:linear-gradient(145deg,#e0e0e0,silver);border-radius:50%;left:50%;transform:translate(-50%);z-index:1;box-shadow:0 0 10px #fff3,inset 2px 2px 4px #ffffff80,inset -2px -2px 4px #0000004d}.fret-marker-bottom{bottom:-9px}.fret-marker-top{top:-9px}.fret-marker-12-bottom{bottom:-51px}.fret-marker-12-top{top:-51px}.string-name{position:relative;color:#e0e0e0;font-weight:700;font-size:18px;text-align:center;padding:0 7px 0 8px;text-shadow:0 0 10px rgba(255,255,255,.3);letter-spacing:1px}.open-note{position:absolute!important;right:-25px;top:50%;transform:translateY(-50%);font-size:12px;width:20px;height:20px;line-height:20px}.nut{background:#f5f5f5;height:110%;width:100%}.note-circle{position:absolute;width:40px;height:40px;background:linear-gradient(145deg,#6caffc,#315e8b);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:21px;text-shadow:0 0 10px rgba(112,179,255,.3);z-index:3;box-shadow:0 2px 4px #0003;top:50%;left:50%;transform:translate(-50%,-50%)}.note-circle.faded:not(.detected-note):not(.target-note){animation:fadeNote 1.5s ease-in-out forwards}@keyframes fadeNote{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%{opacity:.8;transform:translate(-50%,-50%) scale(.95)}70%{opacity:.6;transform:translate(-50%,-50%) scale(.92)}to{opacity:.5;transform:translate(-50%,-50%) scale(.9)}}.note-circle.detected-note,.note-circle.target-note{opacity:1;transform:translate(-50%,-50%) scale(1)}.detected-note{background:linear-gradient(145deg,#ff5050,#cc4040);color:#fff;animation:redGlow 1.5s ease-in-out infinite;box-shadow:0 0 15px #ff5050b3}@keyframes detectGlow{0%{box-shadow:0 2px 4px #0003}to{box-shadow:0 0 15px #4caf50b3}}.detected-note.target-note{background:linear-gradient(145deg,#4caf50,#2e7d32);animation:blueGlow 1.5s ease-in-out infinite;box-shadow:0 0 15px #4a9effb3}@keyframes redGlow{0%{box-shadow:0 0 15px #ff5050b3}50%{box-shadow:0 0 25px #ff5050e6}to{box-shadow:0 0 15px #ff5050b3}}@keyframes blueGlow{0%{box-shadow:0 0 15px #4a9effb3}50%{box-shadow:0 0 25px #4a9effe6}to{box-shadow:0 0 15px #4a9effb3}}.target-note{animation:hintGlow 1.5s ease-in-out infinite alternate;animation-delay:3s}@keyframes hintGlow{0%{box-shadow:0 2px 4px #0003}to{box-shadow:0 2px 4px #0003,0 0 40px #6caffc99,0 0 60px #6caffc66}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.chromatic-target-fade-in{opacity:0;animation:fadeIn 1s ease-in forwards,hintGlow 1.5s ease-in-out infinite alternate}@media (max-width: 768px){.fretboard-container{width:100%;margin:10px auto}.fret-box{height:35px;grid-template-columns:30px 6px repeat(12,1fr)}.note-circle{width:35px;height:35px;font-size:18px}.string{height:3px}}.music-staff-container{width:100%;height:350px;display:flex;justify-content:center;align-items:center;position:relative}.music-staff{width:80%;height:350px;position:relative;display:flex;justify-content:center;align-items:center}.staff-lines{width:100%;height:350px;position:relative;top:0}.staff-line{width:100%;height:2px;background-color:#fff;position:absolute;left:0}.staff-line:nth-child(1){top:28%}.staff-line:nth-child(2){top:36%}.staff-line:nth-child(3){top:44%}.staff-line:nth-child(4){top:52%}.staff-line:nth-child(5){top:60%}.note-head{width:31px;height:20.5px;background-color:#fff;border-radius:50%;position:absolute;left:100%;top:100%;transform:translate(-40%,-49%)}.note-stem-up{width:3px;height:80px;background-color:#fff;position:absolute;transform:translateY(-105%) translate(525%)}.note-stem-down{width:3px;height:80px;background-color:#fff;position:absolute;transform:translateY(0) translate(-335%)}.ledger-line{width:43px;height:3.5px;background-color:#fff;position:absolute;left:50%;transform:translate(-50%,-50%)}.start-screen{width:100%;max-width:1200px;padding:20px;position:relative}.start-screen__auth-buttons{position:absolute;top:20px;right:20px;display:flex;gap:12px;z-index:10}.auth-nav-button{padding:10px 20px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none}.auth-nav-button--login{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.auth-nav-button--login:hover{background:#ffffff1a;border-color:#fff9;transform:translateY(-2px)}.auth-nav-button--register{background:#0396ff;color:#fff}.auth-nav-button--register:hover{background:#0277d4;transform:translateY(-2px);box-shadow:0 4px 12px #0396ff66}.auth-nav-button--logout{background:transparent;border:2px solid rgba(255,100,100,.5);color:#ff6464}.auth-nav-button--logout:hover{background:#ff64641a;border-color:#ff6464;transform:translateY(-2px)}.auth-nav-user-info{color:#fff;font-size:14px;font-weight:600;padding:10px 16px;background:#ffffff1a;border-radius:12px;display:flex;align-items:center}.start-screen__title{color:#fff;text-align:center;font-size:3em;text-shadow:2px 2px 5px rgba(0,0,0,.3);margin-bottom:50px}.game-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;padding:20px;max-width:1000px;margin:0 auto}.game-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px 30px;cursor:pointer;transition:all .3s ease;border:2px solid rgba(255,255,255,.2);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:280px}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--card-color) 0%,transparent 100%);opacity:0;transition:opacity .3s ease;z-index:0}.game-card:hover:before{opacity:.2}.game-card:hover{transform:translateY(-10px);border-color:var(--card-color);box-shadow:0 20px 40px #0000004d,0 0 30px var(--card-color)}.game-card__icon{font-size:4em;margin-bottom:20px;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.game-card__title{color:#fff;font-size:1.5em;margin-bottom:15px;z-index:1;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.game-card__description{color:#fffc;font-size:1em;line-height:1.5;margin-bottom:20px;z-index:1;flex-grow:1}.game-card__arrow{color:var(--card-color);font-size:2em;font-weight:700;opacity:0;transform:translate(-20px);transition:all .3s ease;z-index:1}.game-card:hover .game-card__arrow{opacity:1;transform:translate(0)}@media (max-width: 768px){.start-screen__auth-buttons{position:static;justify-content:center;margin-bottom:20px}.auth-nav-button{flex:1;max-width:150px}.start-screen__title{font-size:2em;margin-bottom:30px;margin-top:0}.game-cards{grid-template-columns:repeat(1,1fr);gap:20px;padding:10px}.game-card{min-height:220px;padding:30px 20px}.game-card__icon{font-size:3em}.game-card__title{font-size:1.3em}}.auth-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.auth-card{background:#111827d9;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:40px;max-width:500px;width:100%;box-shadow:0 12px 32px #00000073;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-title{font-size:32px;font-weight:700;color:#fff;margin:0 0 8px;text-align:center}.auth-subtitle{font-size:16px;color:#ffffffb3;margin:0 0 32px;text-align:center}.auth-form{display:flex;flex-direction:column;gap:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:600;color:#ffffffe6}.form-group input,.form-group select{padding:12px 16px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#ffffff0d;color:#fff;font-size:16px;transition:all .3s ease;box-sizing:border-box;width:100%}.form-group input:focus,.form-group select:focus{outline:none;border-color:#0396ff;background:#ffffff14;box-shadow:0 0 0 3px #0396ff1a}.form-group input:disabled,.form-group select:disabled{opacity:.5;cursor:not-allowed}.form-hint{font-size:12px;color:#fff9;margin-top:-4px}.auth-error{padding:12px 16px;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;font-size:14px;text-align:center}.auth-button{padding:14px 24px;background:#0396ff;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:8px}.auth-button:hover:not(:disabled){background:#0277d4;transform:translateY(-2px);box-shadow:0 8px 16px #0396ff4d}.auth-button:active:not(:disabled){transform:translateY(0)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-footer{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);text-align:center}.auth-footer p{color:#ffffffb3;font-size:14px;margin:0 0 12px}.auth-link-button{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff;padding:10px 20px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.auth-link-button:hover:not(:disabled){background:#ffffff1a;border-color:#fff9}.auth-link-button:disabled{opacity:.5;cursor:not-allowed}.auth-back-button{margin-top:20px;background:transparent;border:none;color:#fff9;font-size:14px;cursor:pointer;transition:color .3s ease;width:100%;text-align:center;padding:8px}.auth-back-button:hover:not(:disabled){color:#ffffffe6}.auth-back-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.auth-card{padding:30px 20px}.auth-title{font-size:28px}.form-row{grid-template-columns:1fr;gap:20px}.form-group input{font-size:16px}}.game-setup{width:100%;max-width:800px;margin:0 auto}.game-setup__container{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 10px 30px #0006;display:flex;flex-direction:column;gap:30px}.game-setup__title{color:#fff;text-align:center;font-size:2.5em;text-shadow:2px 2px 5px rgba(0,0,0,.3);margin:0}.game-setup__instructions{background:#0003;border-radius:15px;padding:25px;border-left:4px solid #00ff99}.game-setup__instructions h3{color:#0f9;margin-top:0;margin-bottom:15px;font-size:1.3em}.game-setup__instructions p{color:#ffffffe6;margin:10px 0;line-height:1.6;font-size:1.05em}.game-setup__settings{background:#0003;border-radius:15px;padding:25px;display:flex;flex-direction:column;gap:20px}.game-setup__settings h3{color:#fff;margin-top:0;margin-bottom:10px;font-size:1.3em}.setting-group{display:flex;flex-direction:column;gap:8px}.setting-group label{color:#ffffffe6;font-weight:600;font-size:1.1em}.setting-group .dropdown{background:#ffffffe6;border:2px solid rgba(255,255,255,.3);padding:12px;font-size:1em;border-radius:10px;transition:all .3s ease;margin:0}.setting-group .dropdown:hover{background:#fff;border-color:#0f9}.setting-group .dropdown:focus{outline:none;border-color:#0f9;box-shadow:0 0 0 3px #0f93}.scale-settings{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:10px}@media (max-width: 768px){.game-setup__container{padding:25px 20px;gap:25px}.game-setup__title{font-size:2em}.game-setup__instructions,.game-setup__settings{padding:20px}.game-setup__instructions h3,.game-setup__settings h3{font-size:1.2em}.scale-settings{grid-template-columns:1fr}}.tuner-root{max-width:1000px;margin:0 auto;padding:20px}.tuner-card{border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#11182799;color:#e5e7eb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 12px 32px #00000073;display:flex;width:auto;height:auto;flex-direction:column;justify-content:space-evenly;align-items:center;padding:40px;gap:40px;min-height:600px}.btn{border:0;border-radius:12px;padding:8px 12px;font-size:14px;cursor:pointer}.btn-primary{background:#16a34a;color:#fff}.btn-primary:hover{background:#15803d}.btn-danger{background:#e11d48;color:#fff}.btn-danger:hover{background:#be123c}.tuner-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 16px}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:12px;color:#e5e7ebd9}.select,.input{border:1px solid #d1d5db;border-radius:12px;padding:8px 10px;font-size:14px;background:#fff}.string-bar{display:flex;gap:8px;justify-content:center;padding:6px 16px 0;flex-wrap:wrap}.string-badge{border:1px solid rgba(255,255,255,.28);background:transparent;padding:6px 10px;border-radius:999px;font-size:13px;cursor:pointer;color:#e5e7eb}.string-badge:hover{background:#ffffff1a}.string-badge.is-active{background:#fff;color:#111827;border-color:#fff}.tuner-readout{text-align:center;padding:12px 20px}.readout-caption{font-size:16px;color:#e5e7ebd9;margin-bottom:8px}.readout-value{font-size:48px;font-weight:700;letter-spacing:-.02em;color:#fff;display:inline-flex;align-items:baseline;gap:12px}.readout-note{font-weight:800}.readout-sep{opacity:.6}.readout-freq{opacity:.95}.tuner-gauge{padding:20px 32px}.gauge-root{width:100%;max-width:600px;margin:0 auto}.gauge-scale{display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#e5e7ebd9;margin-bottom:12px}.gauge-label{font-weight:700;color:#fff;font-size:20px}.gauge-edge{opacity:.95}.gauge-arc-wrap{position:relative;height:180px;overflow:visible}.gauge-arc{width:100%;height:100%;color:#ffffff8c}.arc-bg{stroke-width:12;stroke-linecap:round}.tick-center{stroke-width:4;color:#ffffffd9}.tick{stroke-width:3;color:#fff9}.needle{position:absolute;left:50%;bottom:12px;transform-origin:bottom center;transition:transform 60ms ease-out;will-change:transform}.needle-body{width:3px;height:130px;background:#fff;border-radius:999px;margin:0 auto}.needle-cap{width:12px;height:12px;background:#fff;border-radius:999px;margin:6px auto 0}.needle-ok .needle-body,.needle-ok .needle-cap{background:#22c55e}.gauge-readout{text-align:center;margin-top:12px}.cents{font-size:24px;font-weight:700;color:#fff}.hint{font-size:16px;color:#e5e7ebd9;margin-left:8px}.tuner-footer{display:flex;align-items:center;justify-content:center;padding:16px 20px;border-top:1px solid rgba(255,255,255,.14)}.note-box{display:flex;flex-direction:column;gap:2px}.note-caption{font-size:14px;color:#e5e7ebd9}.note-value{font-size:24px;font-weight:800;color:#fff}.note-ref{font-size:14px;color:#e5e7ebbf}.status{font-size:20px;padding:12px 24px;border-radius:12px;font-weight:700}.status-ok{background:#22c55e;color:#0f172a}.status-warn{background:#f59e0b38;color:#fbbf24}.tuner-error{padding:12px 16px;font-size:14px;color:#fecaca;background:#b91c1c26;border-bottom-left-radius:16px;border-bottom-right-radius:16px}.lb-card{--radius: 16px;--shadow: 0 10px 30px rgba(0,0,0,.08);--border: 1px solid rgba(0,0,0,.08);--text: #1b1f23;--muted: #6b7280;--bg: #ffffff;--bg-soft: #f8fafc;--highlight: #51cf66;--highlight-bg: rgba(81, 207, 102, .15);background:var(--bg);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;width:33%;max-width:760px;margin:24px auto;color:var(--text)}.lb-header{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-bottom:8px}.lb-title{margin:0;font-size:20px;font-weight:800;letter-spacing:.2px;color:#000}.lb-subtitle{margin:4px 0 0;color:var(--muted);font-size:13px}.lb-controls{display:flex;gap:8px}.lb-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(0,0,0,.1);background:linear-gradient(#fff,#f5f7fb);border-radius:10px;padding:8px 12px;font-size:14px;cursor:pointer;transition:transform .04s ease,box-shadow .2s ease,border-color .2s ease}.lb-btn:disabled{opacity:.6;cursor:default}.lb-btn:not(:disabled):hover{box-shadow:0 4px 16px #00000014;border-color:#0000002e}.lb-btn:not(:disabled):active{transform:translateY(1px)}.lb-alert{margin:10px 0 6px;padding:10px 12px;border-radius:10px;font-size:14px}.lb-alert-info{background:#eef6ff;color:#0b69a3;border:1px solid #cfe9ff}.lb-alert-error{background:#fff2f2;color:#a30b0b;border:1px solid #ffd6d6}.lb-table-wrap{border:1px solid rgba(0,0,0,.06);border-radius:12px;overflow:hidden;background:var(--bg-soft)}.lb-table{width:100%;border-collapse:collapse;background:#fff}.lb-table thead th{text-align:left;padding:12px 14px;background:#f3f5f9;font-weight:700;font-size:13px;border-bottom:1px solid rgba(0,0,0,.06)}.lb-table tbody td{padding:12px 14px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.055);background:#fff}.lb-table tbody tr:hover td{background:#fafcff}.lb-right{text-align:right}.lb-name{display:flex;align-items:center;gap:10px}.lb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#fce7f3);border:1px solid rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#1f2937}.lb-name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}.lb-empty{text-align:center;color:#6b7280;padding:28px 12px;font-style:italic}.lb-skeleton-row .lb-skel-block{height:14px;width:100%;background:linear-gradient(90deg,#f2f4f7,#eef1f6,#f2f4f7);border-radius:8px;animation:lb-shimmer 1.2s infinite linear}.lb-skeleton-row td:nth-child(1) .lb-skel-block{width:60%}.lb-skeleton-row td:nth-child(2) .lb-skel-block{width:80%}.lb-skeleton-row td:nth-child(3) .lb-skel-block{width:50%}@keyframes lb-shimmer{0%{background-position:0% 0}to{background-position:100% 0}}.lb-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.lb-page{color:var(--muted);font-size:13px}.lb-pagination{display:flex;gap:8px}.lb-row-highlighted{background:var(--highlight-bg)!important;animation:highlightPulse 2s ease-in-out infinite;position:relative;border-left:4px solid var(--highlight)}.lb-row-highlighted td{font-weight:600;color:var(--text)}@keyframes highlightPulse{0%,to{background:var(--highlight-bg);box-shadow:0 0 #51cf6666}50%{background:#51cf6640;box-shadow:0 0 0 4px #51cf6633}}@media (max-width: 768px){.lb-card{width:100%;max-width:100%;margin:0}}.leaderboard-screen{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:20px;width:100%}.leaderboard-screen__container{display:flex;flex-direction:row;gap:20px;width:90vw;justify-content:center}@media (max-width: 768px){.leaderboard-screen__container{flex-direction:column;width:100%;align-items:center}}.admin-dashboard{max-width:1200px;margin:0 auto;padding:40px 20px;color:#fff}.admin-header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.admin-header h1{font-size:2.5rem;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{background:#0396ff;color:#fff}.btn-primary:hover{background:#0277d4;transform:translateY(-2px);box-shadow:0 4px 12px #0396ff66}.btn-success{background:#51cf66;color:#fff;width:100%}.btn-success:hover{background:#40c057}.btn-success:disabled{background:#94d3a2;cursor:not-allowed}.create-student-form{background:#111827d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:30px;margin-bottom:40px}.create-student-form h2{margin-top:0;margin-bottom:10px;font-size:1.8rem}.form-description{color:#b0b0b0;margin-bottom:25px;font-size:14px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#e0e0e0}.form-group input,.form-group select{width:100%;padding:12px 16px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff1a;color:#fff;font-size:16px;transition:border-color .3s ease;box-sizing:border-box}.form-group select{cursor:pointer}.form-group select option{background:#1a1a2e;color:#fff}.form-group input:focus,.form-group select:focus{outline:none;border-color:#0396ff}.form-group input:disabled,.form-group select:disabled{opacity:.6;cursor:not-allowed}.error-message{color:#ff6b6b;background:#ff6b6b1a;padding:12px;border-radius:8px;margin-bottom:15px;border:1px solid rgba(255,107,107,.3)}.success-message{color:#51cf66;background:#51cf661a;padding:12px;border-radius:8px;margin-bottom:15px;border:1px solid rgba(81,207,102,.3)}.students-section h2{font-size:1.8rem;margin-bottom:20px}.no-students{text-align:center;color:#b0b0b0;padding:40px;font-size:18px}.students-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.student-card{background:#111827d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:20px;display:flex;align-items:center;gap:15px;transition:all .3s ease;position:relative}.student-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000004d;border-color:#ffffff4d}.edit-button{position:absolute;top:8px;right:8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:6px 10px;font-size:16px;cursor:pointer;transition:all .3s ease}.edit-button:hover{background:#0396ff33;border-color:#0396ff;transform:scale(1.1)}.student-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#0396ff,#00d4ff);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex-shrink:0}.student-info{flex:1}.student-info h3{margin:0 0 8px;font-size:1.2rem}.student-info p{margin:4px 0;color:#b0b0b0;font-size:14px}.student-date{font-size:12px!important;color:gray!important}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#111827f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:30px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:1.8rem;color:#fff}.modal-buttons{display:flex;gap:12px;margin-top:20px}.btn-cancel{background:#ffffff1a;color:#fff;flex:1}.btn-cancel:hover{background:#fff3}@media (max-width: 768px){.admin-header{flex-direction:column;gap:15px;align-items:stretch}.admin-header h1{font-size:2rem}.students-grid{grid-template-columns:1fr}.modal-content{padding:20px}.modal-buttons{flex-direction:column}}.control-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;justify-items:end;width:100%;padding:1.5%;box-sizing:border-box;background:#00000059;border-bottom-right-radius:16px;border-bottom-left-radius:16px;box-shadow:0 8px 24px #00000040;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;gap:24px}.control-panel__cluster{display:inline-flex;align-items:center;gap:16px;min-width:0}.control-panel__cluster--left{justify-self:start}.control-panel__logo{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;border-radius:12px;cursor:default;justify-self:end}.control-panel__logo-image{display:block;height:48px;width:auto}.control-panel__logo--compact .control-panel__logo-image{height:34px}.control-panel__logo--default .control-panel__logo-image{height:52px}.control-panel__back,.control-panel__pause{background:#000;color:#fff;padding:12px 25px;cursor:pointer;border-radius:15px;font-size:18px;position:relative;transition:.5s ease-in-out}.control-panel__icon-button{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;border-radius:20%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:20px;transition:all .3s ease;padding:0}.control-panel__icon-button:hover{background:#ffffff1a;border-color:#fff9;transform:scale(1.05)}.control-panel__icon-button:active{transform:scale(.95)}.control-panel__action-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;padding:10px 20px;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 12px #667eea66}.control-panel__action-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea99}.control-panel__action-button:active{transform:translateY(0);box-shadow:0 2px 8px #667eea66}.control-panel__titles{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.control-panel__title{font-size:40px;font-weight:700;margin:0;color:#fff}@media (max-width: 768px){.control-panel{gap:16px;padding:16px}.control-panel__cluster,.control-panel__actions{justify-self:stretch;width:100%}.control-panel__logo{display:none}.control-panel__back{background:transparent;border:2px solid rgba(255,255,255,.3);font-size:24px;padding:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;transition:all .3s ease}.control-panel__back:hover{background:#ffffff1a;border-color:#fff9;transform:scale(1.05)}.control-panel__back:active{transform:scale(.95)}.control-panel__back-text{display:none}.control-panel__title{font-size:24px;max-width:90vw;word-wrap:break-word;overflow-wrap:break-word}.control-panel__actions{width:100%;justify-content:flex-start;flex-wrap:wrap;justify-self:flex-start}}