:root {
  --vetka-auth-flow-width: 672px;
  --vetka-auth-flow-control-height: 58px;
  --vetka-auth-flow-control-radius: 8px;
  --vetka-auth-flow-button-height: 40px;
  --vetka-auth-flow-gap: 24px;
  --vetka-auth-flow-page-padding-y: 56px;
  --vetka-auth-flow-page-padding-x: 20px;
  --vetka-auth-flow-control-padding-x: 20px;
  --vetka-auth-flow-error: #de4949;
  --vetka-auth-flow-control-bg: var(--vetka-page-control-bg, #2c2c2c);
  --vetka-auth-flow-control-bg-hover: var(--vetka-page-control-bg-hover, #343434);
  --vetka-auth-flow-control-border: var(--vetka-page-border-control, #3a3a3a);
  --vetka-auth-flow-control-border-hover: var(--vetka-page-border-control-hover, #525252);
  --vetka-auth-flow-control-border-focus: var(--vetka-page-border-control-focus, #7a7a7a);
  --vetka-auth-flow-button-border: var(--vetka-page-border-strong, #696969);
  --vetka-auth-flow-muted: var(--vetka-text-muted, #b7b7b7);
  --vetka-auth-flow-subtle: #606061;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--vetka-page-bg);
}

body {
  min-height: 100vh;
  font-family: Inter, Mulish, sans-serif;
}

.auth-flow-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--vetka-auth-flow-page-padding-y) var(--vetka-auth-flow-page-padding-x);
  overflow: hidden;
  background: var(--vetka-page-bg);
}

.auth-flow-card {
  width: min(100%, var(--vetka-auth-flow-width));
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-flow-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.auth-flow-title :is(h1, p),
.integration-state-title,
.integration-state-body,
.reg-access-title,
.reg-access-body,
.global-error-text,
.field-error-text,
.auth-agreement-text,
.auth-agreement-error-text,
.signup-prefix,
.signup-link-text,
.error-help-text,
.reg-top-error-text,
.reg-inline-error-text,
.reg-agreement-error-text,
.reg-already-text,
.reg-login-link-text,
.reg-error-text,
.confirm-integration-title,
.confirm-integration-body,
.confirm-error-text,
.confirm-resend-text,
.confirm-btn-label,
.confirm-help-text,
.confirm-resend-reason {
  margin: 0;
  letter-spacing: 0;
}

.auth-flow-title h1 {
  color: var(--vetka-text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.auth-flow-title p {
  color: var(--vetka-text-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.confirm-title {
  font-size: 28px;
  line-height: 34px;
}

.integration-state-panel,
.reg-access-state,
.confirm-integration-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(222, 73, 73, 0.6);
  border-radius: var(--vetka-auth-flow-control-radius);
  background: rgba(40, 40, 40, 0.94);
}

.integration-state-panel[hidden],
.reg-access-state[hidden],
.confirm-integration-state[hidden] {
  display: none;
}

.integration-state-panel[data-state=ready],
.reg-access-state[data-registration-state='ready'],
.confirm-integration-state[data-state=ready] {
  border-color: rgba(110, 190, 135, 0.7);
}

.integration-state-panel[data-state=pending],
.reg-access-state[data-registration-state='pending'],
.confirm-integration-state[data-state=pending] {
  border-color: rgba(216, 182, 88, 0.75);
}

.integration-state-title,
.reg-access-title,
.confirm-integration-title {
  color: var(--vetka-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.integration-state-body,
.reg-access-body,
.confirm-integration-body {
  color: #c8c8c8;
  font-size: 13px;
  line-height: 18px;
}

.form-block,
.reg-form {
  display: flex;
  flex-direction: column;
  gap: var(--vetka-auth-flow-gap);
}

.auth-flow-field,
.input-group,
.reg-input-group,
.confirm-verify-block,
.confirm-code-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confirm-code-block {
  gap: 16px;
}

.input-label-row,
.reg-input-label-row {
  display: flex;
  align-items: center;
  min-height: 20px;
}

.auth-flow-label,
.input-label-text,
.reg-label {
  color: var(--vetka-text-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.auth-flow-input,
.input-shell,
.reg-input-shell {
  min-height: var(--vetka-auth-flow-control-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--vetka-auth-flow-control-padding-x);
  border: 1px solid transparent;
  border-radius: var(--vetka-auth-flow-control-radius);
  background: var(--vetka-auth-flow-control-bg);
  transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.auth-flow-input:hover,
.input-shell:hover,
.reg-input-shell:hover {
  border-color: var(--vetka-auth-flow-control-border-hover);
}

.auth-flow-input:focus-within,
.input-shell:focus-within,
.reg-input-shell:focus-within {
  border-color: var(--vetka-auth-flow-control-border-focus);
}

.input-group.has-empty-error .input-shell,
.input-group.has-field-error .input-shell,
.auth-flow-field.has-field-error .auth-flow-input,
.reg-input-group.has-empty-error .reg-input-shell,
.reg-input-group.has-field-error .reg-input-shell,
.reg-input-group[data-field-state="error"] .reg-input-shell {
  border-color: var(--vetka-auth-flow-error);
}

.auth-flow-input input,
.input-shell input,
.reg-input-shell input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  background: transparent;
  color: var(--vetka-text-primary);
  font-family: Mulish, Inter, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

.auth-flow-input input:focus,
.auth-flow-input input:focus-visible,
.input-shell input:focus,
.input-shell input:focus-visible,
.reg-input-shell input:focus,
.reg-input-shell input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.auth-flow-input input::placeholder,
.input-shell input::placeholder,
.reg-input-shell input::placeholder {
  color: rgba(255, 255, 255, 0.24);
  opacity: 1;
}

.auth-flow-input input:disabled,
.input-shell input:disabled,
.reg-input-shell input:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.input-password,
.reg-input-password {
  justify-content: space-between;
}

.eye-toggle,
.reg-eye-toggle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vetka-text-primary);
}

.eye-toggle:disabled,
.reg-eye-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.eye-icon,
.reg-eye-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.reg-eye-icon-open {
  display: none;
}

.reg-eye-toggle.is-open .reg-eye-icon-open {
  display: block;
}

.reg-eye-toggle.is-open .reg-eye-icon-closed {
  display: none;
}

.auth-password-toggle-icon-open {
  display: none;
}

.auth-password-toggle.is-open .auth-password-toggle-icon-open {
  display: block;
}

.auth-password-toggle.is-open .auth-password-toggle-icon-closed {
  display: none;
}

.global-error-row,
.field-error-row,
.auth-agreement-error-row,
.reg-top-error-row,
.reg-inline-error-row,
.reg-field-error-row,
.reg-agreement-error-row,
.confirm-error-row,
.auth-flow-field-error-row {
  display: none;
}

.content-card.auth-error-incomplete .global-error-row,
.input-group.has-field-error .field-error-row,
.content-card.auth-error-consent .auth-agreement-error-row,
.reg-input-group.has-field-error .reg-field-error-row,
.reg-state-incomplete .reg-top-error-row,
.reg-state-email-error .reg-top-error-row,
.reg-state-mismatch .reg-top-error-row,
.reg-state-password-hint .reg-inline-error-row,
.reg-state-password-rules .reg-inline-error-row,
.reg-state-consent .reg-agreement-error-row,
.confirm-content.confirm-state-error-wrong .confirm-error-row,
.confirm-content.confirm-state-error-expired .confirm-error-row,
.auth-flow-field.has-field-error .auth-flow-field-error-row {
  display: block;
}

.global-error-text,
.field-error-text,
.auth-agreement-error-text,
.reg-top-error-text,
.reg-inline-error-text,
.reg-field-error-text,
.reg-agreement-error-text,
.confirm-error-text,
.auth-flow-field-error-text {
  color: var(--vetka-auth-flow-error);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.confirm-error-row {
  text-align: center;
}

.reg-state-password-hint .reg-inline-error-text {
  color: var(--vetka-auth-flow-subtle);
  font-weight: 500;
}

.reg-field-error-text:empty,
.reg-inline-error-text:empty,
.field-error-text:empty,
.confirm-error-text:empty,
.auth-flow-field-error-text:empty {
  display: none;
}

.auth-agreement-block,
.reg-agreement-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-agreement-row,
.reg-agreement-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.auth-checkbox-wrap,
.reg-checkbox-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 3px;
}

.auth-checkbox-wrap input,
.reg-checkbox-wrap input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.auth-checkbox-box,
.reg-checkbox-box {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vetka-text-primary);
  border-radius: 4px;
  background: transparent;
}

.auth-checkbox-mark,
.reg-checkbox-mark {
  opacity: 0;
  transition: opacity 140ms ease;
}

.auth-checkbox-wrap input:checked + .auth-checkbox-box,
.reg-checkbox-wrap input:checked + .reg-checkbox-box {
  border-color: #d7d7d7;
  background: #595959;
}

.auth-checkbox-wrap input:checked + .auth-checkbox-box .auth-checkbox-mark,
.reg-checkbox-wrap input:checked + .reg-checkbox-box .reg-checkbox-mark {
  opacity: 1;
}

.content-card.auth-error-consent .auth-checkbox-box,
.reg-state-consent .reg-checkbox-box {
  border-color: var(--vetka-auth-flow-error);
}

.auth-agreement-text,
.reg-agreement-text,
.signup-prefix,
.signup-link-text,
.error-help-text,
.reg-already-text,
.reg-login-link-text,
.reg-error-text {
  color: var(--vetka-text-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.auth-flow-primary,
.submit-btn,
.reg-submit-btn,
.confirm-btn {
  width: 100%;
  min-height: var(--vetka-auth-flow-button-height);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid var(--vetka-auth-flow-button-border);
  border-radius: var(--vetka-auth-flow-control-radius);
  background: var(--vetka-auth-flow-control-bg);
  color: var(--vetka-text-primary);
  transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.auth-flow-primary:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.reg-submit-btn:hover:not(:disabled),
.confirm-btn:hover:not(:disabled) {
  border-color: var(--vetka-auth-flow-control-border-focus);
  background: var(--vetka-auth-flow-control-bg-hover);
}

.auth-flow-primary:disabled,
.submit-btn:disabled,
.reg-submit-btn:disabled,
.confirm-btn:disabled,
.confirm-resend-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.submit-btn-label,
.reg-submit-text,
.confirm-btn-label {
  color: var(--vetka-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.auth-flow-primary[data-auth-pending="true"] {
  cursor: progress;
}

.auth-flow-primary[data-auth-pending="true"] > span {
  opacity: 0;
}

.auth-flow-primary[data-auth-pending="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  inset: 50% auto auto 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--vetka-text-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: auth-flow-spin 700ms linear infinite;
}

@keyframes auth-flow-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-flow-primary[data-auth-pending="true"]::after {
    animation: none;
  }
}

.auth-flow-nav-row,
.auth-flow-help-row,
.signup-row,
.error-help-row,
.reg-login-row,
.reg-error-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: var(--vetka-text-primary);
}

.auth-flow-nav-row,
.signup-row,
.reg-login-row {
  margin-top: 8px;
}

.auth-flow-help-row,
.error-help-row,
.reg-error-row {
  margin-top: -8px;
  flex-direction: column;
  gap: 6px;
}

.auth-flow-inline-link,
.signup-link,
.reg-login-link,
.reg-inline-link,
.auth-inline-link,
.confirm-help-link {
  color: var(--vetka-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-inline-button,
.reg-inline-button,
.confirm-help-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.auth-inline-link:disabled,
.reg-inline-link:disabled,
.confirm-help-link:disabled {
  opacity: 0.82;
}

.auth-flow-disabled-reason {
  margin: 6px 0 0;
  color: var(--vetka-auth-flow-subtle);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

.auth-flow-help-row .auth-flow-disabled-reason,
.error-help-row .auth-flow-disabled-reason,
.reg-error-row .auth-flow-disabled-reason {
  flex-basis: 100%;
  text-align: center;
}

.confirm-code-row {
  display: grid;
  grid-template-columns: repeat(6, 52px);
  justify-content: center;
  gap: 10px;
}

.confirm-code-cell {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--vetka-auth-flow-control-border);
  border-radius: var(--vetka-auth-flow-control-radius);
  background: var(--vetka-auth-flow-control-bg);
  transition: border-color 140ms ease;
}

.confirm-code-cell:focus-within {
  border-color: var(--vetka-auth-flow-control-border-focus);
}

.confirm-content.confirm-state-error-wrong .confirm-code-cell,
.confirm-content.confirm-state-error-expired .confirm-code-cell,
.confirm-code-cell.has-error {
  border-color: var(--vetka-auth-flow-error);
}

.confirm-code-input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--vetka-text-primary);
  caret-color: var(--vetka-text-primary);
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1;
}

.confirm-code-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.confirm-resend-text {
  color: var(--vetka-auth-flow-subtle);
  font-size: 15px;
  line-height: 20px;
}

.confirm-resend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.confirm-resend-btn {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--vetka-text-primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.confirm-resend-btn:hover:not(:disabled) {
  border-color: #5d5d5d;
}

.confirm-resend-reason {
  display: block;
  margin: -8px 0 0;
  color: var(--vetka-auth-flow-subtle);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.confirm-actions {
  display: flex;
  justify-content: center;
}

.confirm-help-text {
  color: var(--vetka-auth-flow-muted);
  font-size: 14px;
  line-height: 20px;
}

.confirm-ellipse {
  display: none;
}

button:not(:disabled),
a[href],
.auth-checkbox-wrap input:not(:disabled),
.reg-checkbox-wrap input:not(:disabled),
.auth-checkbox-wrap input:not(:disabled) + .auth-checkbox-box,
.reg-checkbox-wrap input:not(:disabled) + .reg-checkbox-box,
.confirm-code-cell,
.eye-toggle:not(:disabled),
.reg-eye-toggle:not(:disabled) {
  cursor: pointer;
}

.auth-flow-input input:not(:disabled),
.input-shell input:not(:disabled),
.reg-input-shell input:not(:disabled),
.confirm-code-input:not(:disabled) {
  cursor: text;
}

@media (max-width: 720px) {
  .auth-flow-page {
    align-items: start;
    padding: 40px 16px 32px;
  }

  .auth-flow-card {
    gap: 22px;
  }

  .auth-flow-title p {
    font-size: 16px;
    line-height: 23px;
  }

  .confirm-title {
    font-size: 24px;
    line-height: 30px;
  }

  .confirm-subtitle {
    font-size: 15px;
    line-height: 22px;
  }

  .auth-flow-input,
  .input-shell,
  .reg-input-shell {
    min-height: 54px;
    padding-inline: 18px;
  }

  .auth-agreement-row,
  .reg-agreement-row {
    gap: 12px;
  }

  .auth-agreement-text,
  .reg-agreement-text,
  .signup-prefix,
  .signup-link-text,
  .error-help-text,
  .reg-already-text,
  .reg-login-link-text,
  .reg-error-text {
    font-size: 15px;
    line-height: 21px;
  }

  .auth-flow-nav-row,
  .auth-flow-help-row,
  .signup-row,
  .error-help-row,
  .reg-login-row,
  .reg-error-row {
    gap: 8px;
  }

  .confirm-code-row {
    grid-template-columns: repeat(6, 48px);
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .confirm-code-row {
    grid-template-columns: repeat(3, 48px);
  }

  .confirm-actions {
    grid-template-columns: 1fr;
  }
}