/* Shared by the Sober Group Auth SSO login and registration form. */
:root {
  --ink: #132e3d; --teal: #006d68; --deep: #004b49; --paper: #f7f8f4;
  --line: #d7e4e1; --muted: #425d66; --wash: #eaf3ef; --focus: #a46100;
  font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 24px 16px; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.logo-bar { display: flex; gap: 12px; align-items: center; margin: 0 0 18px; font-size: 20px; font-weight: 760; text-decoration: none; color: var(--ink); }
.logo-bar img { display: block; width: 64px; height: 64px; }
.card { width: 100%; max-width: 500px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.card-header, .card-body, .card-footer { padding: 22px clamp(18px, 5vw, 30px); }
.card-header { border-bottom: 1px solid var(--line); }
.card-tag { color: var(--teal); font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.card-title { margin: 4px 0 6px; font-size: clamp(26px, 5vw, 34px); line-height: 1.13; letter-spacing: -.03em; }
.card-sub { margin: 0; color: var(--muted); }
.card-footer { border-top: 1px solid var(--line); }
.field { min-width: 0; margin-bottom: 15px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 650; }
.field input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #829a99; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; }
.field input::placeholder { color: var(--muted); }
.field input:focus { border-color: var(--teal); }
.field input.has-error, .field input[aria-invalid="true"] { border-color: #a52e24; }
.field-error, .error-box { color: #802720; }
.error-box { background: #fff0ee; border: 1px solid #d7a19b; border-radius: 7px; padding: 10px 14px; margin-bottom: 16px; }
.field-hint, .field-error { font-size: 13px; margin-top: 4px; }
.field-hint, .remember-row, .privacy { color: var(--muted); }
.remember-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.remember-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.btn-primary, .btn-secondary {
  display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center;
  padding: 9px 15px; border: 2px solid var(--teal); border-radius: 7px; font: 700 16px/1.35 system-ui, sans-serif;
  text-align: center; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--deep); color: #fff; }
.btn-secondary { background: #fff; color: var(--deep); }
.btn-secondary:hover { background: var(--wash); }
.privacy { font-size: 13px; margin-top: 12px; }
.back-link { margin-top: 16px; text-align: center; font-size: 14px; }
.pwd-strength { display: flex; gap: 3px; margin-top: 5px; }
.pwd-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.success-box { text-align: center; }
.success-icon { color: var(--teal); }
.success-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; }
.success-title { margin: 8px 0; font-size: 22px; }
.success-text { color: var(--muted); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; gap: 0; } }