.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);position:relative;overflow:hidden;background:radial-gradient(ellipse at 20% 50%,rgba(30,144,255,.15) 0,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(42,82,152,.2) 0,transparent 60%),radial-gradient(ellipse at 60% 80%,rgba(13,148,136,.1) 0,transparent 60%),linear-gradient(135deg,#0a0f1e,#0d1b3e 50%,#0a1628);--module-accent:#1e3c72;--module-accent-rgb:30,60,114}.auth-page:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 0);background-size:60px 60px;pointer-events:none}.auth-brand{position:absolute;top:var(--space-8);left:50%;transform:translateX(-50%);font-family:var(--font-primary);font-size:var(--text-2xl);font-weight:var(--font-extrabold);color:white;text-decoration:none;letter-spacing:-.02em;z-index:2}.auth-card{background:var(--color-bg-card);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:0 24px 80px rgba(0,0,0,.4);max-width:440px;width:100%;position:relative;z-index:1}.auth-header{text-align:center;margin-bottom:var(--space-8)}.auth-logo{margin-bottom:var(--space-4);border-radius:var(--radius-md)}.auth-title{font-family:var(--font-primary);font-size:var(--text-3xl);font-weight:var(--font-extrabold);color:var(--color-text-primary);margin-bottom:var(--space-2);letter-spacing:-.02em;line-height:var(--leading-tight)}.auth-title .gradient-text{background:linear-gradient(135deg,#60a5fa,#0D9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.auth-error{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border);border-radius:var(--radius-md)}.auth-error,.auth-success{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);margin-bottom:var(--space-4)}.auth-success{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border);border-radius:var(--radius-md)}.auth-form{display:flex;flex-direction:column;gap:var(--space-4)}.auth-label{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-2);display:block}.auth-input,.auth-label{font-family:var(--font-primary);color:var(--color-text-primary)}.auth-input{width:100%;padding:var(--space-3) var(--space-4);min-height:44px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-base);background:var(--color-bg-card);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}.auth-input:focus{border-color:#1e3c72;box-shadow:0 0 0 3px rgba(30,60,114,.12)}.auth-input::placeholder{color:var(--color-text-muted)}.auth-password-wrapper{position:relative}.auth-password-wrapper .auth-input{padding-right:var(--space-10)}.auth-password-toggle{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--color-text-muted);padding:var(--space-1);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.auth-password-toggle:hover{color:var(--color-text-secondary)}.auth-form-options{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}.auth-form-options label{color:var(--color-text-secondary)}.auth-form-options input[type=checkbox]{accent-color:#1e3c72;width:20px;height:20px;min-width:20px;cursor:pointer}.auth-form-options label{display:flex;align-items:center;gap:var(--space-2);min-height:44px;cursor:pointer}.auth-form-options a{color:#1e3c72;font-weight:var(--font-semibold);text-decoration:none;transition:color var(--transition-fast)}.auth-form-options a:hover{color:#2a5298}.auth-submit{width:100%;padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-bold);background:linear-gradient(135deg,#1e3c72,#2a5298);color:white;border:none;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;min-height:48px;box-shadow:0 2px 8px rgba(30,60,114,.3)}.auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(30,60,114,.4)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:auth-spin .6s linear infinite}@keyframes auth-spin{to{transform:rotate(1turn)}}.auth-social{margin-bottom:var(--space-4)}.auth-social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);min-height:48px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-base)}.auth-social-btn:hover{background:var(--color-bg-subtle);border-color:var(--color-border-strong);transform:translateY(-1px)}.auth-separator{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0;color:var(--color-text-muted);font-size:var(--text-sm)}.auth-separator:after,.auth-separator:before{content:"";flex:1;height:1px;background:var(--color-border)}.auth-footer-link{text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-4)}.auth-footer-link a{color:#1e3c72;font-weight:var(--font-semibold);text-decoration:none;transition:color var(--transition-fast)}.auth-footer-link a:hover{color:#2a5298;text-decoration:underline}.auth-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);width:100%;max-width:720px;position:relative;z-index:1}.auth-role-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);text-align:center;cursor:pointer;text-decoration:none;transition:all var(--transition-base);box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.auth-role-card:hover{transform:translateY(-4px);box-shadow:0 28px 80px rgba(0,0,0,.4)}.auth-role-icon{width:64px;height:64px;border-radius:var(--radius-md);background:rgba(30,60,114,.1);color:#1e3c72;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:var(--space-2)}.auth-role-title{font-family:var(--font-primary);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text-primary)}.auth-role-desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.auth-role-card .auth-role-arrow{margin-top:var(--space-3);color:#1e3c72;font-weight:var(--font-bold)}.auth-otp-group{display:flex;gap:var(--space-2);justify-content:center}.auth-otp-input{width:48px;height:56px;text-align:center;font-family:var(--font-primary);font-size:var(--text-xl);font-weight:var(--font-bold);border:1.5px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);background:var(--color-bg-card);color:var(--color-text-primary)}.auth-otp-input:focus{border-color:#1e3c72;box-shadow:0 0 0 3px rgba(30,60,114,.12)}.auth-page-teacher{--module-accent:#7c3aed;--module-accent-rgb:124,58,237;background:radial-gradient(ellipse at 20% 50%,rgba(168,85,247,.18) 0,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.22) 0,transparent 60%),radial-gradient(ellipse at 60% 80%,rgba(67,56,202,.12) 0,transparent 60%),linear-gradient(135deg,#1a0b2e,#2d1b4e 50%,#0f0a1e)}.auth-portal-badge{display:inline-block;font-family:Courier New,monospace;font-size:11px;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.1em;color:#7c3aed;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);margin-bottom:var(--space-3)}.auth-page-teacher .auth-card{border-top:3px solid #7c3aed}.auth-page-teacher .auth-input:focus,.auth-page-teacher .auth-otp-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.15)}.auth-page-teacher .auth-form-options input[type=checkbox]{accent-color:#7c3aed}.auth-page-teacher .auth-footer-link a,.auth-page-teacher .auth-form-options a{color:#7c3aed}.auth-page-teacher .auth-footer-link a:hover,.auth-page-teacher .auth-form-options a:hover{color:#6d28d9}.auth-page-teacher .auth-submit{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 2px 8px rgba(124,58,237,.35)}.auth-page-teacher .auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.45)}.auth-footer-muted{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-3)}@media (max-width:768px){.auth-role-grid{grid-template-columns:1fr}}@media (max-width:480px){.auth-card{padding:var(--space-6);border-radius:var(--radius-lg)}.auth-title{font-size:var(--text-2xl)}.auth-brand{top:var(--space-4)}}