:root { color-scheme: light; --vx-background:#f6f8fb; --vx-surface:#fff; --vx-surface-secondary:#f8fafc; --vx-border:#e2e8f0; --vx-primary:#2563eb; --vx-primary-hover:#1d4ed8; --vx-primary-soft:#eff6ff; --vx-success:#15803d; --vx-warning:#b45309; --vx-danger:#dc2626; --vx-text-primary:#0f172a; --vx-text-secondary:#475569; --vx-text-muted:#64748b; --vx-radius-sm:8px; --vx-radius-md:12px; --vx-radius-lg:16px; --vx-shadow-sm:0 1px 2px rgb(15 23 42 / 5%); --vx-shadow-md:0 18px 45px rgb(15 23 42 / 10%); --vx-header-height:70px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { background:var(--vx-background); color:var(--vx-text-primary); margin:0; min-height:100vh; } button,input { font:inherit; } .vx-auth-header { align-items:center; background:var(--vx-surface); border-bottom:1px solid var(--vx-border); display:flex; height:var(--vx-header-height); justify-content:space-between; padding:0 clamp(20px,4vw,64px); } .vx-brand { align-items:center; color:var(--vx-text-primary); display:inline-flex; gap:10px; text-decoration:none; } .vx-brand-logo { height:38px; object-fit:contain; width:52px; } .vx-brand-copy { display:grid; line-height:1.1; } .vx-brand-copy strong { font-size:15px; letter-spacing:-.02em; } .vx-brand-copy small { color:var(--vx-text-muted); font-size:11px; margin-top:3px; } .vx-secure-label { color:var(--vx-text-muted); font-size:13px; font-weight:650; } .vx-auth-page { margin:0 auto; max-width:1440px; padding:clamp(24px,5vw,64px); } .auth-shell { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-radius-lg); box-shadow:var(--vx-shadow-md); display:grid; grid-template-columns:minmax(300px,45fr) minmax(400px,55fr); min-height:min(650px,calc(100vh - 200px)); overflow:hidden; } .auth-context-panel { background:#0f2d5c; color:white; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(32px,5vw,72px); } .auth-context-kicker,.eyebrow { color:#93c5fd; font-size:11px; font-weight:800; letter-spacing:.12em; margin:0 0 16px; text-transform:uppercase; } .auth-context-panel h1 { font-size:clamp(30px,3.2vw,44px); letter-spacing:-.045em; line-height:1.08; margin:0; max-width:500px; } .auth-context-panel p { color:#dbeafe; font-size:16px; line-height:1.7; max-width:450px; } .auth-context-footer { align-items:center; color:#dbeafe; display:flex; font-size:13px; font-weight:650; gap:9px; } .status-dot { background:#4ade80; border-radius:50%; height:8px; width:8px; } .auth-form-wrap { align-items:center; display:flex; justify-content:center; padding:40px 24px; } .auth-panel { display:grid; gap:20px; max-width:430px; width:100%; } .auth-panel-heading h2 { font-size:28px; letter-spacing:-.035em; margin:0; } .auth-panel-heading p:not(.eyebrow) { color:var(--vx-text-secondary); font-size:14px; line-height:1.55; margin:9px 0 0; } .auth-field { display:grid; gap:7px; font-size:14px; font-weight:650; } .auth-field input { background:#fff; border:1px solid var(--vx-border); border-radius:var(--vx-radius-sm); height:44px; outline:none; padding:0 12px; transition:border-color .15s,box-shadow .15s; } .auth-field input:focus { border-color:var(--vx-primary); box-shadow:0 0 0 3px rgb(37 99 235 / 15%); } .btn { align-items:center; border:1px solid transparent; border-radius:var(--vx-radius-sm); cursor:pointer; display:inline-flex; font-weight:700; justify-content:center; min-height:44px; padding:0 16px; text-decoration:none; } .btn-primary { background:var(--vx-primary); color:#fff; } .btn-primary:hover { background:var(--vx-primary-hover); } .w-100 { width:100%; } .validation-summary,.field-error { color:var(--vx-danger); font-size:13px; } .validation-summary ul { margin:0; padding-left:18px; } .auth-support-copy { color:var(--vx-text-muted); font-size:12px; line-height:1.5; margin:0; text-align:center; } .vx-alert { border:1px solid; border-radius:var(--vx-radius-sm); margin:0 auto 20px; max-width:760px; padding:12px 14px; } .vx-alert-success { background:#ecfdf3;color:var(--vx-success); } .vx-alert-warning { background:#fffbeb;color:var(--vx-warning); } .vx-alert-danger { background:#fef2f2;color:var(--vx-danger); } @media (max-width:760px) { .vx-auth-header { height:68px; padding:0 18px; } .vx-secure-label { font-size:12px; } .vx-auth-page { padding:0; } .auth-shell { border:0; border-radius:0; box-shadow:none; grid-template-columns:1fr; min-height:calc(100vh - 68px); } .auth-context-panel { min-height:240px; padding:30px 24px; } .auth-context-panel h1 { font-size:30px; } .auth-context-panel p { font-size:14px; } .auth-form-wrap { align-items:flex-start; padding:32px 24px; } }