:root { color-scheme: dark; --bg:#09090b; --panel:#18181b; --border:#27272a; --text:#fafafa; --muted:#a1a1aa; --success:#22c55e; }
* { box-sizing: border-box; } body { margin: 0; font: 14px Inter, ui-sans-serif, system-ui, sans-serif; color: var(--text); background: radial-gradient(circle at 70% 10%, #17211d, var(--bg) 45%); min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(920px, 100%); min-height: 540px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: rgba(24,24,27,.94); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.auth-card--single { width: min(460px, 100%); min-height: auto; } .auth-form-panel, .auth-pitch { padding: 56px; } .auth-form-panel { display: flex; flex-direction: column; justify-content: center; } .auth-pitch { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, #151a18, #101012); border-left: 1px solid var(--border); }
.auth-logo { width: 128px; height: auto; margin-bottom: 38px; } h1,h2 { margin: 0 0 12px; letter-spacing: -.04em; } h1 { font-size: 30px; } h2 { font-size: 38px; max-width: 300px; } .auth-eyebrow { color: var(--success); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .auth-muted,.auth-pitch span,.auth-pitch>p:not(.auth-eyebrow) { color: var(--muted); line-height: 1.7; }
form { display: grid; gap: 14px; margin-top: 28px; } label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; } input { width: 100%; padding: 13px 14px; color: var(--text); background: #111113; border: 1px solid var(--border); border-radius: 8px; outline: none; } input:focus { border-color: var(--success); } button { padding: 13px; border: 0; border-radius: 8px; color: #061208; background: var(--success); font-weight: 700; cursor: pointer; } button:disabled { opacity: .6; cursor: wait; } a { color: var(--muted); text-align: center; text-decoration: none; font-size: 12px; } a:hover { color: var(--text); } .auth-error { min-height: 18px; margin: 0; color: #f87171; font-size: 12px; }
@media (max-width: 700px) { .auth-card { grid-template-columns: 1fr; } .auth-pitch { display: none; } .auth-form-panel { padding: 36px 26px; } }