:root{--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-heading: "Outfit", system-ui, -apple-system, sans-serif;--bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);--bg-card: #ffffff;--bg-card-border: #e2e8f0;--card-shadow: 0 20px 25px -5px rgba(15, 23, 42, .08), 0 8px 10px -6px rgba(15, 23, 42, .04);--text-main: #0f172a;--text-muted: #64748b;--text-light: #475569;--primary: #4f46e5;--primary-hover: #4338ca;--primary-light: #e0e7ff;--input-bg: #ffffff;--input-border: #cbd5e1;--input-text: #0f172a;--input-placeholder: #94a3b8;--sso-btn-bg: #ffffff;--sso-btn-border: #cbd5e1;--sso-btn-hover: #f8fafc;--sso-btn-text: #1e293b;--error: #ef4444;--error-bg: #fef2f2;--error-border: #fecaca;--success: #10b981;--success-bg: #ecfdf5;--success-border: #a7f3d0;--radius-lg: 16px;--radius-md: 10px;--transition: all .2s ease-in-out}[data-theme=dark]{--bg-gradient: radial-gradient(at 0% 0%, rgba(99, 102, 241, .15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(168, 85, 247, .15) 0px, transparent 50%), #0b0f19;--bg-card: rgba(18, 26, 43, .85);--bg-card-border: rgba(255, 255, 255, .1);--card-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);--text-main: #f8fafc;--text-muted: #94a3b8;--text-light: #cbd5e1;--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: rgba(99, 102, 241, .2);--input-bg: rgba(15, 23, 42, .6);--input-border: rgba(255, 255, 255, .15);--input-text: #ffffff;--input-placeholder: #64748b;--sso-btn-bg: rgba(255, 255, 255, .05);--sso-btn-border: rgba(255, 255, 255, .15);--sso-btn-hover: rgba(255, 255, 255, .1);--sso-btn-text: #ffffff;--error-bg: rgba(244, 63, 94, .15);--error-border: rgba(244, 63, 94, .3);--success-bg: rgba(16, 185, 129, .15);--success-border: rgba(16, 185, 129, .3)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100vh;min-height:100dvh;margin:0;padding:0;font-family:var(--font-body);background:var(--bg-gradient);color:var(--text-main);overflow-x:hidden;transition:background .3s ease}#root{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.login-container{width:100%;max-width:440px;padding:2.5rem;background:var(--bg-card);border:1px solid var(--bg-card-border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);position:relative;transition:var(--transition)}.theme-toggle-btn{position:absolute;top:1.25rem;right:1.25rem;background:#0000000a;border:1px solid var(--bg-card-border);color:var(--text-muted);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}.theme-toggle-btn:hover{color:var(--text-main);background:#00000014}.brand-header{text-align:center;margin-bottom:2rem}.brand-logo{width:52px;height:52px;background:linear-gradient(135deg,#4f46e5,#6366f1);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:1rem;box-shadow:0 10px 20px -5px #4f46e54d}.brand-title{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;color:var(--text-main);margin-bottom:.4rem}.brand-subtitle{font-size:.9rem;color:var(--text-muted)}.form-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.4rem}.form-label{font-size:.85rem;font-weight:600;color:var(--text-main)}.form-input-wrapper{position:relative;display:flex;align-items:center}.form-input-icon{position:absolute;left:1rem;color:var(--text-muted);pointer-events:none}.form-input{width:100%;padding:.85rem 1rem .85rem 2.8rem;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);color:var(--input-text);font-size:.95rem;font-family:var(--font-body);transition:var(--transition);outline:none}.form-input::placeholder{color:var(--input-placeholder)}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}.btn-primary{width:100%;padding:.85rem;background:var(--primary);border:none;border-radius:var(--radius-md);color:#fff;font-family:var(--font-heading);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.6rem;box-shadow:0 4px 12px #4f46e540}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px #4f46e559}.btn-primary:disabled{opacity:.65;cursor:not-allowed}.btn-secondary{width:auto;padding:.7rem 1.4rem;background:var(--sso-btn-bg);border:1px solid var(--sso-btn-border);border-radius:var(--radius-md);color:var(--text-main);font-family:var(--font-heading);font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-secondary:hover{background:var(--sso-btn-hover);border-color:var(--text-muted);transform:translateY(-1px)}.btn-red{background:#ef4444;color:#fff!important;border:none;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 12px #ef444440}.btn-red:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 6px 16px #ef444459}.sso-container{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}.btn-sso{width:100%;padding:.8rem 1rem;background:var(--sso-btn-bg);border:1px solid var(--sso-btn-border);border-radius:var(--radius-md);color:var(--sso-btn-text);font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.75rem}.btn-sso:hover{background:var(--sso-btn-hover);border-color:#94a3b8;transform:translateY(-1px)}.divider{display:flex;align-items:center;margin:1.5rem 0;color:var(--text-muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--bg-card-border)}.divider span{padding:0 .75rem}.alert{padding:.85rem 1rem;border-radius:var(--radius-md);font-size:.875rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem}.alert-error{background:var(--error-bg);color:var(--error);border:1px solid var(--error-border)}.alert-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}.back-link{background:none;border:none;color:var(--text-muted);font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;margin-bottom:1rem;transition:var(--transition)}.back-link:hover{color:var(--primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}