.auth-body { background: var(--surface); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-wrap { width: 100%; max-width: 420px; }
.auth-logo { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 32px; font-size: 22px; font-family: 'Space Grotesk'; font-weight: 700; color: var(--ink); text-decoration: none; }
.auth-card { background: var(--paper); border-radius: 20px; padding: 40px 36px; border: 1px solid var(--hairline); box-shadow: var(--shadow-md); }
.auth-title { font-family: 'Space Grotesk'; font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.auth-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 28px; }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 13.5px; font-weight: 500; color: var(--text); margin-top: 12px; margin-bottom: 5px; }
.field-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: 10px; font-family: 'IBM Plex Sans'; font-size: 15px; outline: none; transition: border-color .15s; }
.field-input:focus { border-color: var(--signal); }
.field-input[disabled] { background: var(--surface); }
.field-select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--hairline); border-radius: 10px; font-family: 'IBM Plex Sans'; font-size: 14.5px; outline: none; background: var(--paper); }
.field-input--sm { width: 80px !important; }
.field-hint { font-size: 12.5px; color: var(--muted-soft); margin-top: 4px; }
.auth-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.btn-auth { width: 100%; background: var(--signal); color: #fff; border: none; border-radius: 10px; padding: 14px; font-family: 'IBM Plex Sans'; font-weight: 600; font-size: 15.5px; cursor: pointer; margin-top: 20px; transition: background .15s; }
.btn-auth:hover { background: var(--signal-dark); }
.auth-link { color: var(--signal); text-decoration: none; font-size: 13.5px; }
.auth-link:hover { text-decoration: underline; }
.auth-fine { font-size: 12.5px; color: var(--muted-soft); margin-top: 12px; }
.auth-switch { text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px; }
.auth-error { background: var(--bad-soft); color: var(--bad); border: 1px solid #f5c4c2; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-top: 12px; }
.auth-success { background: var(--ok-soft); color: var(--ok); border: 1px solid #b2e8d4; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
@media(max-width:480px){ .auth-card{padding:28px 20px} }