:root{--primary-color:#ff6b6b;--primary-hover:#ff9a56;--accent-color:#64ffda;--accent-secondary:#bb86fc;--text-primary:#fff;--text-secondary:#fffc;--text-muted:#ffffffb3;--background:linear-gradient(135deg,#0f0f23,#1a1a2e 50%,#16213e);--surface-primary:#ffffff0d;--surface-secondary:#0f0f23e6;--border:#ffffff1a;--border-accent:#64ffda4d}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#0f0f23,#1a1a2e 50%,#16213e);background:var(--background);color:#fff;color:var(--text-primary);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;min-height:100vh;overflow-x:hidden}.container{margin:0 auto;max-width:1200px;padding:0 2rem}.bg-elements{height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:-1}.floating-math{animation:float 20s ease-in-out infinite;font-size:24px;font-weight:300;opacity:.03;position:absolute}@keyframes float{0%,to{opacity:.03;transform:translateY(0) rotate(0deg)}25%{opacity:.05;transform:translateY(-20px) rotate(5deg)}50%{opacity:.03;transform:translateY(-40px) rotate(-5deg)}75%{opacity:.05;transform:translateY(-20px) rotate(3deg)}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 #ff9a5666}50%{box-shadow:0 0 0 10px #ff9a5600}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes orbit{0%{transform:rotate(0deg) translateX(150px) rotate(0deg)}to{transform:rotate(1turn) translateX(150px) rotate(-1turn)}}.login-page{align-items:center;background:var(--background);display:flex;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;justify-content:center;min-height:100vh;padding:20px;position:relative}.login-page:before{background:var(--background);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.login-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:420px;padding:3rem;position:relative;width:100%}.login-header{margin-bottom:2.5rem;text-align:center}.logo{margin-bottom:1.5rem}.logo-icon{align-items:center;background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-hover) 100%);border-radius:16px;box-shadow:0 8px 32px #ff6b6b4d;display:inline-flex;height:64px;justify-content:center;margin:0 auto;width:64px}.login-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-hover) 100%);-webkit-background-clip:text;background-clip:text;color:var(--text-primary);font-size:2rem;font-weight:700;margin:0}.login-form{margin-bottom:2rem}.form-group{margin-bottom:1.5rem}.form-group label{color:var(--text-primary);display:block;font-size:.9rem;font-weight:600;letter-spacing:.05em;margin-bottom:.5rem;text-transform:uppercase}.form-group input{background:var(--surface-secondary);border:1px solid var(--border);border-radius:12px;box-sizing:border-box;color:var(--text-primary);font-size:1rem;padding:1rem;transition:all .3s ease;width:100%}.form-group input::placeholder{color:var(--text-secondary)}.form-group input:focus{background:var(--surface-elevated);border-color:var(--primary-color);box-shadow:0 0 0 3px #ff6b6b1a;outline:none}.form-group input:disabled{cursor:not-allowed;opacity:.6}.error-message{background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:12px;color:var(--primary-color);font-size:.9rem;font-weight:500;margin-bottom:1.5rem;padding:.75rem 1rem}.continue-btn{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-hover) 100%);border:none;border-radius:12px;box-shadow:0 8px 32px #ff6b6b4d;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:1rem 1.5rem;position:relative;transition:all .3s ease;width:100%}.continue-btn:hover:not(:disabled){box-shadow:0 12px 40px #ff6b6b66;transform:translateY(-2px)}.continue-btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.continue-btn:hover:not(:disabled):before{left:100%}.continue-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.divider{margin:2rem 0;position:relative;text-align:center}.divider:before{background:var(--border);content:"";height:1px;left:0;position:absolute;right:0;top:50%}.divider span{background:var(--surface-primary);color:var(--text-secondary);font-size:.9rem;font-weight:500;letter-spacing:.05em;padding:0 1rem;position:relative;text-transform:uppercase}.social-login{margin-bottom:2rem}.google-btn{align-items:center;background:var(--surface-secondary);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1rem;font-weight:500;gap:.75rem;justify-content:center;margin-bottom:1rem;padding:1rem 1.5rem;transition:all .3s ease;width:100%}.google-btn:hover:not(:disabled){background:var(--surface-elevated);border-color:var(--border-accent);transform:translateY(-1px)}.google-btn:disabled{cursor:not-allowed;opacity:.6}.github-btn{align-items:center;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:500;gap:12px;justify-content:center;padding:14px 24px;transition:all .2s ease;width:100%}.github-btn:hover:not(:disabled){background:#3a3a3a;border-color:#4a4a4a}.github-btn:disabled{cursor:not-allowed;opacity:.6}.signup-prompt{color:var(--text-secondary);font-size:.9rem;text-align:center}.signup-link{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:.9rem;font-weight:600;margin-left:.25rem;text-decoration:none;transition:all .2s ease}.signup-link:hover{color:var(--primary-hover);text-decoration:underline}@media (max-width:480px){.login-container{margin:1rem;padding:2rem 1.5rem}.login-header h1{font-size:1.75rem}.continue-btn,.form-group input,.google-btn{font-size:.95rem;padding:.875rem 1rem}}.register-page{align-items:center;background:var(--background);display:flex;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;justify-content:center;min-height:100vh;padding:20px;position:relative}.register-page:before{background:var(--background);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.register-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:420px;padding:3rem;position:relative;width:100%}.register-header{margin-bottom:2.5rem;text-align:center}.register-form{margin-bottom:2rem}.signin-prompt{color:var(--text-secondary);font-size:.9rem;text-align:center}.signin-link{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:.9rem;font-weight:600;margin-left:.25rem;text-decoration:none;transition:all .2s ease}.signin-link:hover{color:var(--primary-hover);text-decoration:underline}@media (max-width:480px){.register-container{margin:1rem;padding:2rem 1.5rem}}.header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f0f23f2;border-bottom:1px solid #ffffff1a;left:0;padding:.75rem 0;position:fixed;right:0;top:0;transition:all .3s ease;z-index:1000}.header .container{justify-content:space-between}.header .container,.logo{align-items:center;display:flex}.logo{color:var(--text-primary);font-size:1.25rem;font-weight:600;text-decoration:none}.logo:before{color:var(--primary-color);content:"∑";font-size:1.5rem;margin-right:.5rem}.logo-icon{height:32px;margin-right:.5rem;object-fit:contain;width:32px}.auth-buttons{align-items:center;display:flex;gap:.75rem}.btn{border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;padding:.5rem 1rem;text-decoration:none;transition:all .2s ease;white-space:nowrap}.btn-ghost{background:#0000;border:1px solid #fff3;color:var(--text-secondary)}.btn-ghost:hover{background:#ffffff0d;border-color:#ffffff4d;color:var(--text-primary)}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.login-link{color:var(--text-primary);font-weight:500;text-decoration:none;transition:color .2s}.login-link:hover{color:var(--text-secondary)}.signup-button{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-hover) 100%);border:none;border-radius:12px;box-shadow:0 8px 32px #ff6b6b4d;color:var(--text-primary);cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.signup-button:hover{box-shadow:0 12px 40px #ff6b6b66;transform:translateY(-3px)}@media (max-width:768px){.header .container{padding:0 1rem}.logo{font-size:1.1rem}.logo:before{font-size:1.3rem}.auth-buttons{gap:.5rem}.btn{font-size:.85rem;padding:.4rem .8rem}}@media (max-width:480px){.btn{font-size:.8rem;padding:.35rem .7rem}}.magnetLines-container{align-items:center;display:grid;grid-template-columns:repeat(var(--columns),1fr);grid-template-rows:repeat(var(--rows),1fr);height:80vmin;justify-items:center;width:80vmin}.magnetLines-container span{display:block;transform:rotate(var(--rotate));transform-origin:center;will-change:transform}.hero-section{align-items:center;display:flex;min-height:100vh;padding:6rem 0 4rem;position:relative}.hero-content{grid-gap:4rem;align-items:center;display:grid;gap:4rem;grid-template-columns:1fr 1fr}.hero-text{max-width:32rem;z-index:2}.badge{align-items:center;animation:pulse 2s infinite;background:#ff9a561a;border:1px solid #ff9a564d;border-radius:50px;color:var(--primary-hover);display:inline-flex;font-size:.9rem;gap:.5rem;margin-bottom:2rem;padding:.5rem 1rem}.hero-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-hover) 50%,var(--primary-color) 100%);-webkit-background-clip:text;background-clip:text;font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.1;margin-bottom:1.5rem}.highlight{color:var(--primary-color)}.hero-description{color:var(--text-secondary);font-size:1.25rem;margin-bottom:2.5rem;max-width:500px}.hero-cta{align-items:center;display:flex;gap:1rem}.cta-button{align-items:center;background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-hover) 100%);border:none;border-radius:16px;box-shadow:0 8px 32px #ff6b6b4d;cursor:pointer;display:inline-flex;font-size:1.1rem;font-weight:600;overflow:hidden;padding:1rem 2rem;position:relative;transition:all .3s ease}.cta-button,.cta-button:hover{color:var(--text-primary);text-decoration:none}.cta-button:hover{box-shadow:0 12px 40px #ff6b6b66;transform:translateY(-3px)}.cta-button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.cta-button:hover:before{left:100%}.button-icon{margin-left:.5rem}.hero-image-container{align-items:center;display:flex;height:500px;justify-content:center;position:relative}@media (max-width:768px){.hero-content{gap:2rem;grid-template-columns:1fr;text-align:center}.hero-text{margin:0 auto}.hero-cta{align-items:stretch;flex-direction:column}.hero-image-container{height:400px}}.feature-card{background-color:var(--background);border-radius:.5rem;box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;padding:2rem;text-align:center}.feature-icon-container{margin-bottom:1rem}.feature-icon{font-size:2.5rem}.feature-title{font-size:1.25rem;margin-bottom:.5rem}.feature-description{color:var(--text-secondary)}.features-section{background:linear-gradient(180deg,#0000,#64ffda0d);padding:6rem 0}.section-header{margin-bottom:4rem;text-align:center}.section-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--text-primary) 0,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem}.section-description{color:var(--text-muted);font-size:1.2rem;margin:0 auto;max-width:600px}.features-container{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.feature-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:20px;overflow:hidden;padding:2.5rem;position:relative;transition:all .3s ease}.feature-card:hover{border-color:var(--border-accent);box-shadow:0 20px 60px #64ffda1a;transform:translateY(-10px)}.feature-card:before{background:linear-gradient(90deg,var(--accent-color),var(--accent-secondary));content:"";height:2px;left:0;position:absolute;top:0;transform:scaleX(0);transition:transform .3s ease;width:100%}.feature-card:hover:before{transform:scaleX(1)}.feature-icon-container{margin-bottom:1.5rem}.feature-icon{align-items:center;background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary));border-radius:20px;display:flex;font-size:2rem;height:80px;justify-content:center;width:80px}.feature-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin-bottom:1rem}.feature-description{color:var(--text-muted);line-height:1.6}@media (max-width:768px){.features-container{grid-template-columns:1fr}}.home-page{background:var(--background);min-height:100vh}.trainer-link-section{background:linear-gradient(135deg,#64ffda1a,#bb86fc1a);padding:6rem 0;position:relative;text-align:center}.trainer-link-content{margin:0 auto;max-width:800px}.trainer-link-content h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--text-primary) 0,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,4vw,3rem);font-weight:700;margin-bottom:1rem}.trainer-link-content p{color:var(--text-secondary);font-size:1.2rem;margin-bottom:2.5rem}.trainer-link-button{align-items:center;background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-hover) 100%);border:none;border-radius:16px;box-shadow:0 8px 32px #ff6b6b4d;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:1.1rem;font-weight:600;overflow:hidden;padding:1rem 2rem;position:relative;text-decoration:none;transition:all .3s ease}.trainer-link-button:hover{box-shadow:0 12px 40px #ff6b6b66;color:var(--text-primary);text-decoration:none;transform:translateY(-3px)}.trainer-link-button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.trainer-link-button:hover:before{left:100%}.top-bar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-secondary);border-bottom:1px solid var(--border);left:0;padding:1rem 0;position:fixed;right:0;top:0;z-index:1000}.top-bar .container{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 2rem}.left-section{align-items:center;display:flex;min-width:200px}.menu-button,.menu-buttons{display:flex;gap:.5rem}.menu-button{align-items:center;background:#0000;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;font-size:.9rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.menu-button:hover{background:#ffffff1a;color:var(--text-primary);transform:translateY(-1px)}.menu-button.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;color:#fff}.menu-icon{font-size:1.2rem}.menu-text{font-size:.9rem;font-weight:600}.back-button{align-items:center;background:#0000;border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;gap:.5rem;padding:.5rem 1rem;text-decoration:none;transition:all .2s ease;white-space:nowrap}.back-button:hover{background:#ffffff1a;transform:translateY(-1px)}.back-button:active{transform:translateY(0)}.title{color:var(--text-primary);flex:1 1;font-size:1.25rem;font-weight:600;margin:0;text-align:center}.user-section{gap:1rem;justify-content:flex-end;min-width:200px}.user-info,.user-section{align-items:center;display:flex}.user-info{gap:.5rem}.user-name{color:var(--text-primary);font-size:.9rem;font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-button{background:#0000;border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-weight:500;padding:.4rem .8rem;transition:all .2s ease}.logout-button:hover{background:#ffffff1a;color:var(--text-primary);transform:translateY(-1px)}.logout-button:active{transform:translateY(0)}.top-bar-spacer{width:200px}@media (max-width:768px){.top-bar{left:0;padding:.5rem 0;position:fixed;right:0;top:0;z-index:1001}.top-bar .container{padding:0 1rem}.left-section{min-width:auto}.menu-buttons{gap:.5rem}.menu-button{font-size:.9rem;gap:.4rem;min-height:40px;padding:.4rem .8rem}.menu-icon{font-size:1.1rem}.menu-text{font-size:.85rem}.back-button{font-size:.9rem;gap:.4rem;min-height:40px;padding:.4rem .8rem}.title{font-size:1.1rem}.user-section{gap:.6rem;min-width:60px}.user-name{font-size:.8rem;max-width:100px}.logout-button{font-size:.8rem;min-height:36px;padding:.4rem .8rem}.top-bar-spacer{width:60px}}@media (max-width:480px){.top-bar{padding:.4rem 0}.top-bar .container{padding:0 .75rem}.menu-buttons{gap:.4rem}.menu-button{font-size:.85rem;min-height:38px;padding:.3rem .6rem}.menu-text{display:none}.menu-icon{font-size:1.3rem}.back-button{font-size:.85rem;min-height:38px;padding:.3rem .6rem}.title{font-size:1rem}.user-section{min-width:50px}.user-name{display:none}.logout-button{font-size:.75rem;min-height:34px;padding:.3rem .6rem}.top-bar-spacer{width:50px}}.keypad{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:20px;display:none;padding:2rem}.keypad-button{min-height:60px;outline:none}.keypad-button:focus{background:var(--surface-secondary);outline:none;transform:none}@media (max-width:768px){.keypad{background:#0000;border:none;border-radius:0;display:block;height:100%;padding:1rem}.keypad-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:100%}.keypad-button{align-items:center;background:var(--surface-secondary);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.8rem;font-weight:700;height:100%;justify-content:center;min-height:auto;outline:none;padding:0;transition:all .2s ease}.keypad-button:active,.keypad-button:hover{background:#ffffff1a;transform:scale(.95)}.keypad-button:focus{background:var(--surface-secondary);outline:none;transform:none}}@media (max-width:480px){.keypad{padding:.75rem}.keypad-grid{gap:.75rem;height:100%}.keypad-button{border-radius:10px;font-size:1.5rem}}.score-display-overlay{align-items:center;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.score-display-container{animation:slideUp .4s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:24px;max-width:500px;padding:3rem;text-align:center;width:90%}.score-display-content{display:flex;flex-direction:column;gap:2rem}.score-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--text-primary) 0,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700;margin:0}.score-stats{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr)}.score-stat{align-items:center;display:flex;flex-direction:column;gap:.5rem}.stat-value{font-size:2.5rem}.stat-label{color:var(--text-muted)}.levels-table{background:var(--surface-secondary);border:1px solid var(--border);border-radius:16px;padding:1rem}.levels-title{color:var(--text-primary);font-size:.9rem;font-weight:600;margin:0 0 .75rem;text-align:center}.levels-grid{display:flex;flex-direction:column;gap:.5rem}.level-row{align-items:center;background:var(--surface-primary);border:1px solid var(--border);border-radius:8px;display:flex;justify-content:space-between;padding:.5rem .75rem}.level-category{font-weight:600}.level-category,.level-value{color:var(--text-primary);font-size:.85rem}.level-value{font-weight:500}.excellent{color:#10b981}.good{color:#3b82f6}.decent{color:#f59e0b}.needs-improvement{color:#ef4444}.score-actions{display:flex;gap:1rem;justify-content:center}.play-again-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 8px 32px #667eea4d;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:1rem 2rem;transition:all .3s ease}.play-again-button:hover{box-shadow:0 12px 40px #667eea66;transform:translateY(-2px)}.profile-button{align-items:center;background:#0000;border:1px solid var(--border);border-radius:12px;display:flex;font-size:1.1rem;font-weight:600;gap:.5rem;justify-content:center;padding:1rem 2rem;transition:all .3s ease}.profile-button,.profile-button:hover{color:var(--text-primary);text-decoration:none}.profile-button:hover{background:#ffffff1a;transform:translateY(-2px)}.home-button{background:#0000;border:1px solid var(--border);border-radius:12px;font-size:1.1rem;font-weight:600;padding:1rem 2rem;transition:all .3s ease}.home-button,.home-button:hover{color:var(--text-primary);text-decoration:none}.home-button:hover{background:#ffffff1a;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.score-display-container{margin:.5rem;max-height:90vh;max-width:95%;overflow-y:auto;padding:1rem}.score-display-content{gap:1rem}.score-title{font-size:1.5rem}.score-stats{gap:.75rem;grid-template-columns:repeat(3,1fr)}.stat-value{font-size:1.8rem}.stat-label{font-size:.8rem}.levels-table{padding:.75rem}.levels-title{font-size:.85rem;margin-bottom:.5rem}.level-row{padding:.4rem .6rem}.level-category,.level-value{font-size:.8rem}.score-actions{flex-direction:column;gap:.75rem}.home-button,.play-again-button{font-size:1rem;padding:.75rem 1.5rem;width:100%}}@media (max-width:480px){.score-display-container{margin:.25rem;max-height:95vh;max-width:98%;padding:.75rem}.score-display-content{gap:.75rem}.score-title{font-size:1.2rem}.score-stats{gap:.5rem}.stat-value{font-size:1.5rem}.stat-label{font-size:.7rem}.levels-table{padding:.5rem}.levels-title{font-size:.8rem;margin-bottom:.4rem}.level-row{padding:.3rem .5rem}.level-category,.level-value{font-size:.75rem}.score-actions{gap:.5rem}.home-button,.play-again-button{font-size:.9rem;padding:.6rem 1.2rem}}.success-overlay{align-items:center;animation:successPulse 1s ease-out;background:#10b9811a;border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.success-checkmark{stroke-width:2;stroke:#10b981;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;box-shadow:inset 0 0 0 #10b981;display:block;margin:0 auto}.check-icon,.success-checkmark{border-radius:50%;height:80px;position:relative;width:80px}.check-icon{align-items:center;border:4px solid #10b981;box-sizing:initial;display:flex;justify-content:center}.check-icon:before{border-radius:120px 0 0 120px;left:-2px;top:3px;transform-origin:100% 50%;width:30px}.check-icon:after{animation:rotate-circle 4.25s ease-in;border-radius:0 120px 120px 0;left:30px;top:0;transform-origin:0 50%;width:60px}.check-icon:after,.check-icon:before{background:#0000;content:"";height:100px;position:absolute;transform:rotate(-45deg)}.icon-line{background-color:#10b981;border-radius:2px;display:block;height:5px;position:absolute;z-index:10}.icon-line.line-tip{animation:icon-line-tip .75s;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:25px}.icon-line.line-long{animation:icon-line-long .75s;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:47px}.icon-circle{border:4px solid #10b9814d;border-radius:50%;box-sizing:initial;height:80px;left:0;position:absolute;top:0;width:80px;z-index:10}.icon-fix{background-color:var(--surface-primary);height:85px;left:26px;position:absolute;top:8px;transform:rotate(-45deg);width:5px;z-index:1}.success-text{animation:textPop .6s ease-out .2s both;color:#10b981;font-size:2rem;font-weight:700;text-align:center;text-shadow:0 0 10px #10b98180}@keyframes successPulse{0%{background:#10b98100;opacity:0;transform:scale(1)}20%{background:#10b9814d;opacity:1;transform:scale(1.02)}40%{background:#10b98133;opacity:1;transform:scale(1.05)}60%{background:#10b98126;opacity:1;transform:scale(1.03)}80%{background:#10b9811a;opacity:1;transform:scale(1.01)}to{background:#10b9811a;opacity:1;transform:scale(1)}}@keyframes textPop{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #10b981}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes rotate-circle{to{transform:rotate(45deg)}}@keyframes icon-line-tip{0%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:0}54%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:0}70%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:50px}84%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:17px}to{left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:25px}}@keyframes icon-line-long{0%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:0}65%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:0}84%{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:55px}to{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:47px}}.trainer-page{background:var(--background);min-height:100vh;padding-top:80px}.trainer-container{margin:0 auto;max-width:800px;padding:0 2rem}.loading-text{margin-bottom:2rem}.logout-btn,.retry-btn{align-items:center;background:var(--surface-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:1rem;font-weight:500;justify-content:center;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s ease}.logout-btn:hover,.retry-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.logout-btn{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.error-banner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ef4444e6;border:1px solid #ef44444d;border-radius:8px;bottom:2rem;color:#fff;font-weight:500;left:50%;padding:1rem 2rem;position:fixed;transform:translateX(-50%);z-index:1000}.problem-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:20px;display:flex;flex-direction:column;justify-content:center;margin:0 -2rem 2rem;min-height:60vh;overflow:hidden;padding:3rem 2rem;position:relative;text-align:center}.problem-container:before{background:linear-gradient(90deg,var(--accent-color),var(--accent-secondary));content:"";height:2px;left:0;position:absolute;top:0;transform:scaleX(0);transition:transform .3s ease;width:100%}.problem-container:hover:before{transform:scaleX(1)}.problem-text{color:var(--text-primary);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:clamp(2rem,6vw,4rem);font-weight:700;margin-bottom:2rem}.answer-display{align-items:center;display:flex;justify-content:center;min-height:80px}.answer-display,.answer-text{background:#0000;border:none;padding:0}.answer-text{color:var(--text-primary);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:clamp(2.5rem,8vw,5rem);font-weight:700;min-width:120px;text-align:center;transition:all .3s ease}.keypad-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:1px solid var(--border);border-radius:20px;display:none;padding:2rem}.keypad-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:100%}.keypad-button{align-items:center;background:var(--surface-secondary);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.5rem;font-weight:600;justify-content:center;padding:1.5rem;transition:all .2s ease}.keypad-button:hover{background:#ffffff1a;transform:translateY(-2px)}.keypad-button:active{transform:translateY(0)}.trainer-container.success-pulse{animation:containerPulse 1s ease-out}@keyframes containerPulse{0%{transform:scale(1)}20%{transform:scale(1.02)}40%{transform:scale(1.05)}60%{transform:scale(1.03)}80%{transform:scale(1.01)}to{transform:scale(1)}}@media (max-width:768px){.trainer-page{bottom:0;left:0;max-height:100vh;min-height:100vh;overflow:hidden;padding-top:60px;position:fixed;right:0;top:0}.trainer-container{display:flex;flex-direction:column;height:calc(100vh - 60px);max-height:calc(100vh - 60px);overflow:hidden;padding:0}.problem-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:none;border-bottom:1px solid var(--border);border-radius:0;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;margin:0;max-height:40vh;min-height:40vh;padding:1.5rem 1rem;width:100%}.problem-text{font-size:clamp(3rem,10vw,5rem);font-weight:800;margin-bottom:1.5rem;text-align:center}.answer-display{margin-bottom:1rem;min-height:80px}.answer-text{font-size:clamp(3.5rem,12vw,6rem);font-weight:800;min-width:120px;padding:.5rem}.keypad-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-primary);border:none;border-radius:0;border-top:1px solid var(--border);display:block;flex:1 1;margin:0;max-height:calc(60vh - 60px);min-height:0;overflow:hidden;padding:1rem}.keypad-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:100%}.keypad-button{align-items:center;background:var(--surface-secondary);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;font-size:1.8rem;font-weight:700;height:100%;justify-content:center;min-height:auto;padding:0;transition:all .2s ease}.keypad-button:active,.keypad-button:hover{background:#ffffff1a;transform:scale(.95)}.error-banner{bottom:1rem;left:1rem;padding:.5rem 1rem;right:1rem;transform:none}.trainer-container.success-pulse{animation:none}}@media (max-width:480px){.trainer-page{padding-top:50px}.trainer-container{height:calc(100vh - 50px);max-height:calc(100vh - 50px)}.problem-container{max-height:35vh;min-height:35vh;padding:1rem .5rem}.problem-text{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:1rem}.answer-display{min-height:60px}.answer-text{font-size:clamp(3rem,10vw,5rem);min-width:100px}.keypad-container{max-height:calc(65vh - 50px);padding:.75rem}.keypad-button{border-radius:10px;font-size:1.5rem}.keypad-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:100%}}.profile-page{background:var(--surface-primary);min-height:100vh;padding-top:80px}.profile-container{margin:0 auto;max-width:1200px;padding:2rem}.loading-container{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:60vh;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border-top:4px solid var(--border);border:4px solid var(--border);border-radius:50%;border-top-color:var(--accent);height:50px;margin-bottom:2rem;width:50px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-text{color:var(--text-secondary);font-size:1.5rem}.error-container{align-items:center;display:flex;flex-direction:column;gap:2rem;justify-content:center;min-height:60vh;text-align:center}.error-text{color:#ef4444;font-size:1.25rem;margin-bottom:1rem}.retry-btn{background:var(--surface-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:500;padding:.75rem 1.5rem;transition:all .2s ease}.retry-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.profile-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-secondary);border:1px solid var(--border);border-radius:20px;justify-content:space-between;margin-bottom:2rem;padding:2rem}.profile-header,.profile-info{align-items:center;display:flex}.profile-info{gap:1.5rem}.profile-avatar{border:3px solid var(--border);border-radius:50%;height:80px;overflow:hidden;width:80px}.profile-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:2rem;font-weight:700;height:100%;justify-content:center;text-transform:uppercase;width:100%}.profile-details{flex:1 1}.profile-name{color:var(--text-primary);font-size:2rem;font-weight:700;margin:0 0 .5rem}.profile-email{color:var(--text-secondary);font-size:1.1rem;margin:0 0 .25rem}.profile-joined{color:var(--text-secondary);font-size:.9rem;margin:0}.train-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:16px;box-shadow:0 8px 32px #667eea4d;color:#fff;cursor:pointer;display:flex;font-size:1.2rem;font-weight:700;gap:.5rem;padding:1rem 2rem;transition:all .3s ease}.train-button:hover{box-shadow:0 12px 40px #667eea66;transform:translateY(-2px)}.train-icon{font-size:1.5rem}.stats-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:3rem}.stat-card{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-secondary);border:1px solid var(--border);border-radius:16px;display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.stat-card:hover{box-shadow:0 8px 32px #ffffff1a;transform:translateY(-2px)}.stat-card.highlight{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea4d}.stat-icon{font-size:2.5rem;opacity:.8}.stat-content{flex:1 1}.stat-value{color:var(--text-primary);font-size:2rem;font-weight:700;margin:0}.stat-label{color:var(--text-secondary);font-size:.9rem;letter-spacing:.05em;margin:0;text-transform:uppercase}.levels-section{margin-bottom:3rem}.section-title{color:var(--text-primary);font-size:1.8rem;font-weight:700;margin:0 0 1.5rem}.levels-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.level-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-secondary);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:all .3s ease}.level-card:hover{box-shadow:0 8px 32px #ffffff1a;transform:translateY(-2px)}.level-header{gap:1rem;margin-bottom:1.5rem}.level-header,.level-icon{align-items:center;display:flex}.level-icon{background:var(--surface-primary);border:1px solid var(--border);border-radius:12px;font-size:2rem;height:50px;justify-content:center;width:50px}.level-info{flex:1 1}.level-name{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin:0 0 .25rem}.level-value{font-size:1.5rem;font-weight:700;margin:0}.level-stats{background:var(--surface-primary);border:1px solid var(--border);border-radius:12px;display:flex;justify-content:space-around;margin-bottom:1.5rem;padding:1rem}.level-stat{align-items:center;display:flex;flex-direction:column;gap:.25rem}.stat-number{color:var(--text-primary);font-size:1.2rem;font-weight:700}.stat-text{color:var(--text-secondary);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}.level-progress{margin-top:1rem}.progress-bar{background:var(--surface-primary);border:1px solid var(--border);border-radius:4px;height:8px;margin-bottom:.5rem;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#667eea,#764ba2);height:100%;transition:width .3s ease}.progress-text{align-items:center;color:var(--text-secondary);display:flex;font-size:.8rem;justify-content:space-between}.streak-badge{background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:6px;color:#fff;font-size:.7rem;font-weight:600;padding:.25rem .5rem}.last-practiced{font-size:.8rem}.activity-section{margin-bottom:3rem}.activity-chart{align-items:flex-end;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--surface-secondary);border:1px solid var(--border);border-radius:16px;display:flex;gap:1rem;height:200px;justify-content:space-around;padding:2rem}.activity-day{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:.5rem}.activity-bar{background:var(--surface-primary);border:1px solid var(--border);border-radius:8px;height:120px;overflow:hidden;position:relative;width:100%}.activity-fill{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;bottom:0;left:0;position:absolute;transition:height .3s ease;width:100%}.activity-label{text-align:center}.activity-date{color:var(--text-secondary);font-size:.8rem;margin-bottom:.25rem}.activity-count{color:var(--text-primary);font-size:1rem;font-weight:600}@media (max-width:768px){.profile-page{padding-top:60px}.profile-container{padding:1rem}.profile-header{gap:1.5rem;padding:1.5rem}.profile-header,.profile-info{flex-direction:column;text-align:center}.profile-info{gap:1rem}.profile-avatar{height:60px;width:60px}.profile-name{font-size:1.5rem}.train-button{font-size:1rem;padding:.75rem 1.5rem}.stats-grid{gap:1rem;grid-template-columns:repeat(2,1fr)}.stat-card{flex-direction:column;padding:1rem;text-align:center}.stat-icon{font-size:2rem}.stat-value{font-size:1.5rem}.levels-grid{gap:1rem;grid-template-columns:1fr}.level-card{padding:1rem}.level-header{margin-bottom:1rem}.level-icon{font-size:1.5rem;height:40px;width:40px}.level-name{font-size:1rem}.level-value{font-size:1.2rem}.level-stats{padding:.75rem}.stat-number{font-size:1rem}.stat-text{font-size:.7rem}.activity-chart{height:150px;padding:1rem}.activity-bar{height:80px}.activity-count{font-size:.9rem}}@media (max-width:480px){.profile-page{padding-top:50px}.profile-container{padding:.5rem}.profile-header{border-radius:16px;padding:1rem}.profile-name{font-size:1.2rem}.train-button{font-size:.9rem;padding:.6rem 1.2rem}.stats-grid{gap:.75rem;grid-template-columns:1fr}.stat-card{padding:.75rem}.section-title{font-size:1.5rem}.level-card{padding:.75rem}.level-header{flex-direction:column;gap:.75rem;text-align:center}.level-stats{flex-direction:column;gap:.5rem}.level-stat{flex-direction:row;justify-content:space-between}.activity-chart{height:120px;padding:.75rem}.activity-bar{height:60px}}:root{--surface-primary:#080808;--surface-secondary:#111;--surface-elevated:#1a1a1a;--border:#4e4e4e;--text-primary:#cacaca;--text-secondary:#787878;--accent:#fff;--font-family:Inter,Roboto,"Helvetica Neue",Arial,sans-serif;--display-large-font-size:80px;--display-large-font-weight:600;--display-large-line-height:1.1;--display-large-letter-spacing:-0.02em;--display-large-text-transform:uppercase;--heading-font-size:24px;--heading-font-weight:600;--heading-letter-spacing:0.12em;--heading-text-transform:uppercase;--body-font-size:24px;--body-font-weight:400;--body-letter-spacing:0em;--spacing-4:4px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;--spacing-24:24px;--spacing-32:32px;--max-width:768px;--keypad-gap:1px;--top-bar-height:56px;--side-icon-padding:16px;--icon-button-size:24px;--icon-button-color:var(--text-primary);--icon-button-hover-color:var(--text-secondary);--problem-display-padding-vertical:48px;--key-button-size:96px;--key-button-background:var(--surface-secondary);--key-button-border-color:var(--border);--key-button-border-width:1px;--key-button-text-color:var(--text-primary);--key-button-text-size:24px;--key-button-text-weight:400;--key-button-pressed-background:#222;--button-press-scale:0.97;--animation-duration:120ms;--easing:ease-out;--focus-indicator-offset:2px;--focus-indicator-color:#fff}
/*# sourceMappingURL=main.596c4c35.css.map*/