:root {
  --brand: #365fc0;
  --brand-dark: #294b9a;
  --text: #20252c;
  --muted: #646d78;
  --border: #d9dee5;
  --success: #157347;
  --danger: #b42318;
  --font: 'Plus Jakarta Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body.auth-page { margin: 0; background: #f5f6f8; color: var(--text); font: 14px/1.6 var(--font); }
.auth-page * { letter-spacing: 0; }
.panel-form { min-height: 100vh; min-height: 100dvh; padding: 48px 20px; display: flex; align-items: center; justify-content: center; }
.f-box { width: 100%; max-width: 440px; padding: 32px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.auth-register .f-box { max-width: 520px; }
.m-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--text); font-weight: 700; font-size: 16px; }
.m-logo img { width: 32px; height: 32px; object-fit: contain; }
.f-title { margin: 0 0 8px; font-size: 22px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.f-sub { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.field-hd { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.field-label { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; font-weight: 600; }
.field-hd .field-label { margin-bottom: 0; }
.field-wrap { position: relative; }
.field-input, #phone { display: block; width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid #bcc5d0; border-radius: 4px; background: #fff; color: var(--text); font: inherit; }
.field-wrap .field-input { padding-left: 36px; }
.field-input.has-toggle, .field-wrap:has(.f-toggle) .field-input { padding-right: 42px; }
.field-input::placeholder, #phone::placeholder { color: #7a8390; }
.field-input:focus, #phone:focus { outline: 2px solid #b9caf2; outline-offset: 1px; border-color: var(--brand); }
.field-input.invalid { border-color: var(--danger); }
.iti { display: block; width: 100%; }
.f-ico { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #7a8390; font-size: 12px; pointer-events: none; }
.f-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.f-toggle:hover { color: var(--brand); }
.auth-page a { color: var(--brand); text-decoration: none; }
.auth-page a:hover { text-decoration: underline; }
.auth-page a:focus-visible, .auth-page button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.field-link { font-size: 12px; }
.alert { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; padding: 12px; border: 1px solid; border-radius: 4px; font-size: 13px; overflow-wrap: anywhere; }
.alert i { margin-top: 4px; flex-shrink: 0; }
.alert-ok { background: #edf7f0; color: var(--success); border-color: #bddbc8; }
.alert-err { background: #fff1ef; color: var(--danger); border-color: #f1c1bb; }
.alert a { color: inherit; text-decoration: underline; }
.btn-submit, .auth-page .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--brand); border-radius: 4px; background: var(--brand); color: #fff; font: 600 14px/1.5 var(--font); cursor: pointer; }
.btn-submit:hover:not(:disabled), .auth-page .btn:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-submit:disabled, .auth-page .btn:disabled { opacity: .65; cursor: wait; }
.spin { display: none; width: 14px; height: 14px; border: 2px solid #ffffff70; border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.recaptcha-note { margin: 16px 0; color: var(--muted); font-size: 11px; }
.recaptcha-note a { color: inherit; text-decoration: underline; }
.grecaptcha-badge { visibility: hidden !important; }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.divider { margin: 24px 0 8px; text-align: center; color: var(--muted); font-size: 12px; }
.f-foot { text-align: center; color: var(--muted); font-size: 13px; }
.f-back { display: block; margin-top: 24px; text-align: center; font-size: 13px; }
.lang-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid #e9edf1; font-size: 12px; }
.lang-row .sep { color: #a2aab5; }
.strength-track { height: 3px; margin-top: 8px; background: #e8ecf0; border-radius: 2px; overflow: hidden; }
.strength-fill { height: 100%; width: 0; }
.strength-hint, .match-hint { margin-top: 6px; font-size: 12px; overflow-wrap: anywhere; }
.strength-hint { color: var(--muted); }
.match-hint { display: none; }
.match-hint.show { display: block; }
.match-hint.ok { color: var(--success); }
.match-hint.fail { color: var(--danger); }
.links { display: grid; gap: 10px; margin-top: 24px; text-align: center; font-size: 13px; }
@media (max-width: 540px) {
  .panel-form { padding: 24px 16px; }
  .f-box { padding: 24px 20px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
}