.class-login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-color);background:var(--bg-gradient);display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--space-md)}.class-login-card{background:var(--container-bg);border:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;padding:var(--space-2xl) var(--space-2xl);max-width:90vw;width:700px;height:80vh;max-height:750px;text-align:center;display:flex;flex-direction:column;justify-content:center}.class-login-card h1{color:var(--text-color-primary);font-size:3rem;margin-bottom:var(--space-md);font-weight:800}.class-login-card p{color:var(--text-color-secondary);font-size:var(--font-size-lg);margin-bottom:var(--space-xl)}.class-login-card form{width:100%;max-width:450px;margin:0 auto}.class-login-card input{width:100%;padding:var(--space-xl) var(--space-xl);font-size:1.75rem;text-align:center;border:2px solid var(--border-color);background-color:var(--seat-bg);color:var(--text-color-primary);border-radius:14px;margin-bottom:var(--space-md);transition:border-color var(--transition-base);box-sizing:border-box}.class-login-card input:focus{outline:none;border-color:var(--btn-primary-bg)}.class-login-card input::placeholder{color:var(--text-color-secondary);opacity:.7}.class-login-card .btn{width:100%;padding:var(--space-lg);font-size:var(--font-size-lg);border-radius:14px;margin-bottom:var(--space-md);margin-top:var(--space-md)}.login-error{color:var(--color-accent-error);font-size:var(--font-size-sm);margin-top:var(--space-sm);display:none}.login-footer{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border-color)}.login-footer a{color:var(--text-color-secondary);text-decoration:none;font-size:var(--font-size-xs);transition:color var(--transition-base)}.login-footer a:hover{color:var(--btn-primary-bg)}.login-footer .separator{color:var(--border-color);margin:0 var(--space-sm)}@media(max-width:600px){.class-login-card{height:85vh;max-height:none;width:95vw;padding:var(--space-xl) var(--space-lg)}.class-login-card h1{font-size:var(--font-size-xl)}.class-login-card input,.class-login-card .btn{font-size:var(--font-size-base)}}.landing-card h1{font-size:4rem;margin-bottom:var(--space-sm)}.landing-card>p{margin-bottom:var(--space-2xl);font-size:var(--font-size-lg)}.login-choice-buttons{display:flex;gap:var(--space-xl);margin-bottom:var(--space-2xl)}.login-choice-btn{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--space-2xl) var(--space-xl);border-radius:20px;transition:transform var(--transition-base),box-shadow var(--transition-base);min-height:180px;justify-content:center}.login-choice-btn:hover{transform:translateY(-6px);box-shadow:0 12px 32px #00000059}.login-choice-btn .choice-icon{font-size:4rem;margin-bottom:var(--space-md)}.login-choice-btn .choice-text{font-size:var(--font-size-lg);font-weight:700}.teacher-btn{background:linear-gradient(135deg,#667eea,#764ba2)}.teacher-btn:hover{background:linear-gradient(135deg,#5a6fd6,#6a4190)}.pupil-btn{background:linear-gradient(135deg,#f093fb,#f5576c)}.pupil-btn:hover{background:linear-gradient(135deg,#e080e8,#e04555)}@media(max-width:600px){.landing-card h1{font-size:var(--font-size-2xl)}.landing-card>p{font-size:var(--font-size-base);margin-bottom:var(--space-xl)}.login-choice-buttons{flex-direction:column;gap:var(--space-md)}.login-choice-btn{padding:var(--space-lg) var(--space-md);min-height:120px}.login-choice-btn .choice-icon{font-size:3rem}.login-choice-btn .choice-text{font-size:var(--font-size-base)}}.class-login-overlay{overflow:hidden}.class-login-overlay:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 80%,rgba(120,80,200,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,100,150,.12) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(0,180,255,.08) 0%,transparent 60%);animation:cosmicPulse 8s ease-in-out infinite;pointer-events:none}@keyframes cosmicPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.login-particles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:1}.login-particle{position:absolute;width:4px;height:4px;background:radial-gradient(circle,#ffffffe6,#fff0 70%);border-radius:50%;animation:floatParticle 15s linear infinite;opacity:0}.login-particle:after{content:"";position:absolute;width:100%;height:100%;background:inherit;border-radius:50%;animation:twinkle 2s ease-in-out infinite}@keyframes floatParticle{0%{transform:translateY(100vh) translate(0) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100px) translate(var(--drift, 50px)) scale(1);opacity:0}}@keyframes twinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.login-math-symbols{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0}.math-symbol{position:absolute;font-size:2rem;opacity:.08;color:var(--text-color-primary);animation:floatMath 20s linear infinite;font-weight:800}@keyframes floatMath{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.08}90%{opacity:.08}to{transform:translateY(-100px) rotate(360deg);opacity:0}}.class-login-card{position:relative;z-index:10;animation:cardEntrance .6s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center center}@keyframes cardEntrance{0%{opacity:0;transform:scale(.9) translateY(30px);filter:blur(10px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}.class-login-card:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,#667eea66,#f008424d,#764ba266,#f5576c4d,#667eea66);background-size:300% 300%;border-radius:22px;z-index:-1;animation:borderGlow 6s ease-in-out infinite;opacity:.7;filter:blur(8px)}@keyframes borderGlow{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.class-login-card h1{animation:slideInDown .5s ease-out .1s backwards}.class-login-card>p{animation:slideInDown .5s ease-out .2s backwards}.class-login-card input:nth-of-type(1){animation:slideInUp .5s ease-out .3s backwards}.class-login-card input:nth-of-type(2){animation:slideInUp .5s ease-out .4s backwards}.class-login-card .btn:not(.login-choice-btn){animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1) .5s backwards}.login-choice-buttons{animation:slideInUp .5s ease-out .3s backwards}.login-footer{animation:fadeIn .5s ease-out .6s backwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.class-login-card input{position:relative;transition:border-color .3s ease,box-shadow .3s ease,transform .2s ease,background-color .3s ease}.class-login-card input:hover:not(:focus):not(:disabled){border-color:#667eea80;transform:translateY(-1px)}.class-login-card input:focus{border-color:var(--color-accent-info);box-shadow:0 0 0 4px #00d9ff26,0 4px 12px #00d9ff33;transform:translateY(-2px);outline:none}.form-field{position:relative;width:100%;margin-bottom:var(--space-md)}.form-field input{padding-right:48px;margin-bottom:0}.form-field-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.25rem;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}.form-field.valid .form-field-icon.valid-icon{opacity:1;animation:checkBounce .4s cubic-bezier(.34,1.56,.64,1)}.form-field.invalid .form-field-icon.invalid-icon{opacity:1;animation:shake .4s ease}.form-field.valid input{border-color:var(--color-accent-success);background-color:#28a7450d}.form-field.invalid input{border-color:var(--color-accent-error);background-color:#ff6b6b0d}@keyframes checkBounce{0%{transform:translateY(-50%) scale(0)}50%{transform:translateY(-50%) scale(1.3)}to{transform:translateY(-50%) scale(1)}}@keyframes shake{0%,to{transform:translateY(-50%) translate(0)}20%,60%{transform:translateY(-50%) translate(-4px)}40%,80%{transform:translateY(-50%) translate(4px)}}.login-error{background:linear-gradient(135deg,#ff6b6b26,#ff6b6b14);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);animation:slideInError .4s cubic-bezier(.34,1.56,.64,1)}.login-error:before{content:"!";display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-accent-error);color:#fff;border-radius:50%;font-weight:800;font-size:.875rem;flex-shrink:0}.login-error:empty{display:none}@keyframes slideInError{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.field-hint{font-size:var(--font-size-xs);color:var(--text-color-secondary);margin-top:var(--space-xs);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;text-align:left;padding-left:var(--space-sm)}.form-field.focused .field-hint,.form-field.invalid .field-hint{opacity:1;max-height:40px}.form-field.invalid .field-hint{color:var(--color-accent-error)}.form-field.valid .field-hint{color:var(--color-accent-success)}.class-login-card .btn{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,filter .2s ease}.class-login-card .btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 70%);transform:translate(-50%,-50%);transition:width .5s ease,height .5s ease;pointer-events:none}.class-login-card .btn:hover:before{width:300px;height:300px}.class-login-card .btn:active{transform:translateY(4px) scale(.98)}.class-login-card .btn.loading{pointer-events:none;position:relative;color:transparent}.class-login-card .btn.loading:after{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:buttonSpinner .8s linear infinite}@keyframes buttonSpinner{to{transform:rotate(360deg)}}.login-choice-btn{position:relative;overflow:hidden;border:2px solid transparent;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease}.login-choice-btn:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:rotate(45deg) translate(-100%);transition:transform .6s ease}.login-choice-btn:hover:before{transform:rotate(45deg) translate(100%)}.login-choice-btn:focus-visible{outline:none;border-color:#fff;box-shadow:0 0 0 4px #ffffff4d,0 8px 24px #0000004d}.login-choice-btn .choice-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.login-choice-btn:hover .choice-icon{transform:scale(1.15) rotate(-5deg)}.login-choice-btn:active .choice-icon{transform:scale(.95)}.login-success-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10001;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.login-success-overlay.active{opacity:1;visibility:visible}.login-success-content{text-align:center;animation:successPop .35s cubic-bezier(.34,1.56,.64,1)}.login-success-icon{font-size:5rem;margin-bottom:var(--space-md);animation:successBounce .3s ease .15s}.login-success-text{font-size:var(--font-size-xl);font-weight:800;color:#fff}@keyframes successPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes successBounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.pin-entry-card{text-align:center}.pin-entry-card h1{margin-bottom:var(--space-sm)}.pin-entry-card p{margin-bottom:var(--space-lg);color:var(--text-color-secondary)}.pin-class-info{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xl);padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,#4f46e533,#9333ea33);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1)}.pin-class-name{font-size:var(--font-size-lg);font-weight:700;color:var(--text-color-primary)}.pin-change-class{font-size:var(--font-size-sm);color:var(--btn-primary-bg);text-decoration:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background-color .2s ease,color .2s ease}.pin-change-class:hover{background-color:#4f46e54d;color:#fff}.pin-input-container{position:relative;width:100%;max-width:280px;margin:0 auto var(--space-sm)}.pin-input{width:100%;padding:var(--space-lg) var(--space-md);font-size:2.5rem;font-weight:800;letter-spacing:1.2rem;text-align:center;background:var(--seat-bg);border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-color-primary);caret-color:var(--btn-primary-bg);transition:border-color .2s ease,box-shadow .2s ease}.pin-input:focus{outline:none;border-color:var(--btn-primary-bg);box-shadow:0 0 0 4px #4f46e533}.pin-input::placeholder{letter-spacing:.8rem;color:var(--text-color-secondary);opacity:.5}.pin-dots{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-md);pointer-events:none}.pin-dot{width:16px;height:16px;border-radius:50%;background-color:var(--border-color);transition:background-color .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.pin-dot.filled{background-color:var(--btn-primary-bg);transform:scale(1.2)}.pin-submit-btn{margin-top:var(--space-lg);min-width:120px;font-size:var(--font-size-xl);padding:var(--space-md) var(--space-xl)}.pin-submit-btn .btn-text{display:inline}.pin-submit-btn .btn-loading{display:none;align-items:center;justify-content:center}.pin-submit-btn.loading .btn-text{display:none}.pin-submit-btn.loading .btn-loading{display:inline-flex}.loading-spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:buttonSpinner .8s linear infinite}#pupilPinError{margin-top:var(--space-md)}@media(max-width:480px){.pin-input-container{max-width:240px}.pin-input{font-size:2rem;letter-spacing:1rem;padding:var(--space-md)}.pin-dots{gap:var(--space-sm)}.pin-dot{width:14px;height:14px}.pin-class-info{flex-direction:column;gap:var(--space-sm)}.pin-submit-btn{font-size:var(--font-size-lg)}}.pin-entry-card{animation:slideInUp .4s ease-out}@keyframes pinShake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}.pin-input.error{animation:pinShake .4s ease;border-color:var(--color-accent-error)}.class-login-card input:focus-visible{outline:3px solid var(--color-accent-info);outline-offset:2px}.class-login-card .btn:focus-visible{outline:3px solid white;outline-offset:3px;transform:translateY(-2px)}.login-footer a:focus-visible{outline:2px solid var(--btn-primary-bg);outline-offset:4px;border-radius:4px}@media(prefers-contrast:high){.class-login-card{border:3px solid white;background:var(--bg-color)}.class-login-card input{border-width:3px}.login-choice-btn{border:3px solid white}.login-error{border-width:2px;background:#f003}}@media(prefers-reduced-motion:reduce){.class-login-overlay:before,.login-particle,.math-symbol,.class-login-card,.class-login-card:before,.class-login-card h1,.class-login-card>p,.class-login-card input,.class-login-card .btn,.login-choice-buttons,.login-footer,.form-field-icon,.login-error,.login-success-content,.login-success-icon{animation:none!important;transition:opacity .2s ease,background-color .2s ease,border-color .2s ease!important}.login-choice-btn:hover,.class-login-card .btn:hover{transform:none}.class-login-card{opacity:1;transform:none;filter:none}}.password-toggle{position:absolute;right:16px;top:0;bottom:0;background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);font-size:1.4rem;opacity:.7;transition:opacity .2s ease,color .2s ease;z-index:1;display:flex;align-items:center;justify-content:center;width:44px}.password-toggle span{display:flex;align-items:center;justify-content:center;line-height:1}.password-toggle:hover{opacity:1;color:var(--text-color-primary)}.password-toggle:focus-visible{outline:2px solid var(--color-accent-info);outline-offset:2px;border-radius:4px}.form-field.has-toggle input{padding-right:70px;padding-left:70px}.form-field.has-toggle .form-field-icon{right:60px}.form-field label{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:var(--font-size-lg);pointer-events:none;transition:top .2s ease,font-size .2s ease,color .2s ease,transform .2s ease;background:transparent;padding:0 var(--space-xs)}.form-field input:focus~label,.form-field input:not(:placeholder-shown)~label{top:0;font-size:var(--font-size-xs);color:var(--color-accent-info);transform:translateY(-50%);background:var(--container-bg)}.landing-card h1{font-style:italic;background:linear-gradient(135deg,var(--color-accent-primary) 0%,var(--color-accent-info) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@keyframes titleShimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.landing-card>p{letter-spacing:.05em;text-transform:uppercase;font-size:var(--font-size-sm);font-weight:600}.landing-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}.landing-footer a{display:inline-flex;align-items:center;gap:var(--space-xs)}.landing-footer a[href="about.html"]:before{content:"\2139\fe0f";font-size:.9em}.landing-footer a[href="privacy.html"]:before{content:"\1f512";font-size:.9em}.landing-footer a[href="terms.html"]:before{content:"\1f4dc";font-size:.9em}