:root{--statwell-teal: #40BFAA;--statwell-blue: #5D78FF;--statwell-hero-blue: #007BFF;--statwell-gray: #94A49A;--statwell-teal-light: #65D5B8;--statwell-navy: #2A3B54;--statwell-coral: #FF6B6B;--statwell-white: #F5F7FA;--white: #FFFFFF;--black: #000000;--light-gray: #f1f3f6;--bg-primary: var(--white);--bg-secondary: var(--statwell-white);--text-primary: var(--statwell-navy);--text-secondary: var(--statwell-gray);--border-primary: var(--statwell-gray);--border-secondary: #e0e0e0;--primary: var(--statwell-blue);--secondary: var(--statwell-teal);--success: #10B981;--warning: #F59E0B;--error: var(--statwell-coral);--info: var(--statwell-blue);--font-primary: "Avenir Next", sans-serif;--font-secondary: "Inter", sans-serif;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--anim-normal: .2s;--smooth: cubic-bezier(.25, 1, .5, 1)}.login-page-container{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-secondary);font-family:var(--font-secondary);line-height:1.6;color:var(--text-primary)}.background-blur{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--statwell-navy) 0%,var(--statwell-blue) 100%),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');filter:blur(8px);z-index:-1}.background-content{position:fixed;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:1fr 2fr;z-index:-1}.background-left{background:var(--statwell-navy);opacity:.8}.background-right{background:var(--white);display:flex;flex-direction:column;padding:var(--space-xl);opacity:.9}.background-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.background-avatar{width:40px;height:40px;border-radius:50%;background:var(--statwell-blue);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:600}.background-content-blocks{display:flex;flex-direction:column;gap:var(--space-md)}.content-block{height:60px;background:var(--light-gray);border-radius:8px;opacity:.6}.content-block.small{height:40px;width:60%}.login-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1;visibility:visible;transition:all .3s var(--smooth)}.modal-content{background:var(--white);border-radius:20px;box-shadow:0 8px 24px #0000001a;border:1px solid var(--border-secondary);transform:translateY(0);transition:transform .3s var(--smooth);position:relative}.text-display{font-size:32px;font-weight:800;font-family:var(--font-primary)}.login-text-heading{font-size:24px;font-weight:700;font-family:var(--font-primary)}.text-title{font-size:18px;font-weight:600;font-family:var(--font-primary)}.text-body{font-size:16px;font-weight:400}.text-caption{font-size:14px;font-weight:500}.text-muted{color:var(--text-secondary)}.form-label{display:block;font-weight:600;margin-bottom:var(--space-sm);color:var(--text-primary)}.form-input{width:100%;padding:12px 16px;border:1px solid var(--border-secondary);border-radius:12px;font-size:16px;font-family:var(--font-secondary);background:var(--white);transition:all var(--anim-normal);outline:none}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #5d78ff1a}.form-input.error{border-color:var(--error);box-shadow:0 0 0 3px #ff6b6b1a}.otp-container{display:flex;gap:var(--space-sm);justify-content:center;margin:var(--space-lg) 0}.otp-input{width:48px;height:48px;border:1px solid var(--border-secondary);border-radius:12px;text-align:center;font-size:18px;font-weight:600;font-family:var(--font-secondary);background:var(--white);transition:all var(--anim-normal);outline:none}.otp-input::-webkit-outer-spin-button,.otp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.otp-input{-moz-appearance:textfield}.otp-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #5d78ff1a}.otp-input.error{border-color:var(--error);box-shadow:0 0 0 3px #ff6b6b1a}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 24px;border-radius:12px;font-weight:600;font-family:var(--font-secondary);border:1px solid transparent;cursor:pointer;transition:all var(--anim-normal) var(--smooth);text-decoration:none;font-size:16px;width:100%}.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 2px 4px #5d78ff33}.btn-primary:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 4px 8px #5d78ff4d}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 2px 4px #5d78ff33}.error-message{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#ff6b6b1a;border:1px solid rgba(255,107,107,.2);border-radius:12px;margin-bottom:var(--space-lg);color:var(--error);font-size:14px}.error-message.hidden{display:none}.error-icon{width:20px;height:20px;border-radius:50%;background:var(--error);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}.error-close{margin-left:auto;background:none;border:none;color:var(--error);cursor:pointer;padding:4px;border-radius:4px;transition:background-color var(--anim-normal)}.error-close:hover{background:#ff6b6b1a}.timer-container{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-top:var(--space-md);font-size:14px;color:var(--text-secondary)}.timer{font-weight:600;color:var(--text-primary)}.resend-link{color:var(--primary);text-decoration:none;font-weight:500;cursor:pointer;transition:color var(--anim-normal)}.resend-link:hover{color:var(--statwell-navy)}.resend-link.disabled{color:var(--text-secondary);cursor:not-allowed}.modal-footer{text-align:center;margin-top:var(--space-lg);font-size:14px;color:var(--text-secondary)}.footer-link{color:var(--primary);text-decoration:none;font-weight:500;transition:color var(--anim-normal)}.footer-link:hover{color:var(--statwell-navy)}.success-container{text-align:center;padding:var(--space-xl) 0}.success-icon{width:80px;height:80px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-lg)}.fade-in{animation:fadeIn .3s var(--smooth) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.shake{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.demo-controls{position:fixed;top:var(--space-lg);right:var(--space-lg);background:var(--white);padding:var(--space-md);border-radius:12px;box-shadow:0 4px 12px #0000001a;border:1px solid var(--border-secondary);z-index:1001}.demo-controls h3{font-size:14px;font-weight:600;margin-bottom:var(--space-sm);color:var(--text-primary)}.demo-buttons{display:flex;flex-direction:column;gap:var(--space-sm)}.demo-btn{padding:8px 12px;background:var(--light-gray);border:1px solid var(--border-secondary);border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;transition:all var(--anim-normal)}.demo-btn:hover{background:var(--statwell-teal-light);border-color:var(--statwell-teal-light)}.demo-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary)}