/*
 * Horizon V17 — unified UI geometry + auth refresh.
 * Loaded last. This layer deliberately targets controls/components, never generic divs.
 */
body.horizon {
  --hz-ui-field-sm: 36px;
  --hz-ui-field-md: 44px;
  --hz-ui-field-lg: 52px;
  --hz-ui-radius-sm: 9px;
  --hz-ui-radius-md: 11px;
  --hz-ui-radius-lg: 14px;
  --hz-ui-card-radius: 14px;
  --hz-ui-gap: 16px;
  --hz-ui-control-font: 13.5px;
  --hz-ui-shadow: 0 1px 2px var(--hz-shadow), 0 8px 28px color-mix(in srgb, var(--hz-shadow) 58%, transparent);
}

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

/* ---------- Forms: stable vertical rhythm ---------- */
body.horizon :is(.form-group,.form-field,.admin-form-group,.profile-form-field-v3,.tcb-field,.captcha-field,.filter-item,.webhook-field) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
}
body.horizon :is(.form-group,.form-field,.admin-form-group,.profile-form-field-v3,.tcb-field,.captcha-field,.filter-item,.webhook-field):not(:last-child) {
  margin-bottom: 16px !important;
}
body.horizon form :is(.form-group,.form-field,.admin-form-group,.profile-form-field-v3,.tcb-field,.captcha-field,.webhook-field) > label,
body.horizon .filter-item > label,
body.horizon label.form-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 20px !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: var(--hz-text) !important;
  font-size: 12.5px !important;
  font-weight: 625 !important;
  line-height: 20px !important;
}
body.horizon :is(.form-text,.help-block,small.form-text,.form-group > small,.form-field > small,.admin-form-group > small) {
  display: block !important;
  margin: 6px 0 0 !important;
  color: var(--hz-muted) !important;
  font-size: 11.5px !important;
  line-height: 17px !important;
}

/* Text/select controls. Use exact border-box heights so text cannot drift. */
body.horizon :is(
  input.form-control:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select.form-control, select.form-select, .custom-select,
  .dataTable-input, .dataTable-selector, .date-input, .readonly-input, .profile-control-v3, .captcha-control
) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  outline: 0 !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  -webkit-text-fill-color: var(--hz-text) !important;
  font-family: inherit !important;
  font-size: var(--hz-ui-control-font) !important;
  font-weight: 450 !important;
  line-height: 42px !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon select:is(.form-control,.form-select,.custom-select,.dataTable-selector) {
  padding-right: 34px !important;
  line-height: normal !important;
}
body.horizon textarea.form-control,
body.horizon textarea.form-select,
body.horizon textarea.captcha-control {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 116px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  outline: 0 !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  -webkit-text-fill-color: var(--hz-text) !important;
  font-family: inherit !important;
  font-size: var(--hz-ui-control-font) !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  resize: vertical !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(input,textarea,.form-control,.form-select)::placeholder {
  color: var(--hz-muted) !important;
  -webkit-text-fill-color: var(--hz-muted) !important;
  opacity: .72 !important;
}
body.horizon :is(
  input.form-control:not([type=checkbox]):not([type=radio]):not([type=range]),
  select.form-control,select.form-select,.custom-select,textarea.form-control,
  .dataTable-input,.dataTable-selector,.date-input,.profile-control-v3,.captcha-control
):focus {
  border-color: var(--hz-ring,var(--hz-primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hz-primary) 16%,transparent) !important;
}

/* Explicit small/large controls. */
body.horizon :is(input.form-control-sm:not([type=checkbox]):not([type=radio]),select.form-control-sm,select.form-select-sm,.input-sm,.select-sm) {
  height: var(--hz-ui-field-sm) !important;
  min-height: var(--hz-ui-field-sm) !important;
  padding: 0 11px !important;
  border-radius: var(--hz-ui-radius-sm) !important;
  font-size: 12.5px !important;
  line-height: 34px !important;
}
body.horizon :is(input.form-control-lg:not([type=checkbox]):not([type=radio]),select.form-control-lg,select.form-select-lg,.input-lg,.select-lg) {
  height: var(--hz-ui-field-lg) !important;
  min-height: var(--hz-ui-field-lg) !important;
  padding: 0 15px !important;
  border-radius: var(--hz-ui-radius-lg) !important;
  font-size: 14.5px !important;
  line-height: 50px !important;
}
body.horizon textarea.form-control-sm { min-height: 92px !important; padding: 9px 11px !important; }
body.horizon textarea.form-control-lg { min-height: 140px !important; padding: 13px 15px !important; }
body.horizon input.form-control[type=file] { height: var(--hz-ui-field-md) !important; min-height: var(--hz-ui-field-md) !important; padding: 7px 10px !important; line-height: 28px !important; }
body.horizon input[type=color] { min-height: var(--hz-ui-field-md) !important; }

/* Checkbox / radio: stable box, no baseline jumps. */
body.horizon :is(.form-check,.hz-auth-check) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  width: auto !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.horizon :is(.form-check-input,input[type=checkbox],input[type=radio]) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  accent-color: var(--hz-primary) !important;
}
body.horizon :is(.form-check-label,.hz-auth-check label) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
}

/* ---------- Buttons: one geometry system ---------- */
body.horizon :is(
  .btn,.btn-save,.save-btn,.submit-btn,.add-btn,.btn-gradient,.btn-login,.btn-reset,.login-do-btn,
  .hz-button,.hz-primary-button,.hz-auth-submit,.hz-auth-social,.profile-btn-v3,.tcb-btn,.captcha-btn,
  .filter-btn,.admin-overview__button,.renew-pay-button,.captcha-primary-action,.btn-outline-glass,.btn-back,.btn-cancel-edit,.btn-renew,.copy-btn,.btn-copy,
  .btn-success-full,.btn-danger-full,.btn-info-full,.btn-warning-full,.btn-secondary-full,.btn-edit-sm,.btn-delete-sm
):not(.btn-link):not(.btn-icon):not(.hz-icon-button):not(.action-icon):not(.captcha-copy-action):not(.captcha-icon-btn):not(.tcb-icon-btn):not(.btn-tool):not(.btn-close) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  min-width: 0 !important;
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 15px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--hz-ui-radius-md) !important;
  gap: 7px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(.btn-sm,.btn-gradient-sm,.hz-small-button,.btn-edit-sm,.btn-delete-sm,.admin-action-btn,.table-action-btn):not(.btn-icon):not(.hz-icon-button):not(.action-icon) {
  height: var(--hz-ui-field-sm) !important;
  min-height: var(--hz-ui-field-sm) !important;
  padding: 0 11px !important;
  border-radius: var(--hz-ui-radius-sm) !important;
  gap: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
body.horizon :is(.btn-lg,.btn-large,.hz-button-lg) {
  height: var(--hz-ui-field-lg) !important;
  min-height: var(--hz-ui-field-lg) !important;
  padding: 0 20px !important;
  border-radius: var(--hz-ui-radius-lg) !important;
  gap: 9px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
body.horizon .btn-block { width: 100% !important; }

/* Keep button glyph and text optically centred. */
body.horizon :is(
  .btn,.btn-save,.save-btn,.submit-btn,.add-btn,.btn-gradient,.btn-gradient-sm,.btn-login,.btn-reset,.login-do-btn,
  .hz-button,.hz-small-button,.hz-primary-button,.hz-auth-submit,.hz-auth-social,.profile-btn-v3,.tcb-btn,.captcha-btn,
  .filter-btn,.admin-overview__button,.renew-pay-button,.captcha-primary-action,.btn-outline-glass,.btn-back,.btn-cancel-edit,.btn-renew,.copy-btn,.btn-copy,.btn-edit-sm,.btn-delete-sm
) > :is(i,svg) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 16px !important;
  vertical-align: middle !important;
  color: currentColor !important;
}
body.horizon :is(.btn-sm,.btn-gradient-sm,.hz-small-button,.btn-edit-sm,.btn-delete-sm,.admin-action-btn,.table-action-btn) > :is(i,svg) {
  flex-basis: 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  font-size: 13px !important;
  line-height: 14px !important;
}

/* Icon-only controls stay square. */
body.horizon :is(.btn-icon,.hz-icon-button,.action-icon,.captcha-copy-btn.captcha-copy-action,.tcb-icon-btn,.captcha-icon-btn) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 var(--hz-ui-field-sm) !important;
  width: var(--hz-ui-field-sm) !important;
  min-width: var(--hz-ui-field-sm) !important;
  height: var(--hz-ui-field-sm) !important;
  min-height: var(--hz-ui-field-sm) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--hz-ui-radius-sm) !important;
  line-height: 1 !important;
}
body.horizon .captcha-icon-btn {
  flex-basis: var(--hz-ui-field-md) !important;
  width: var(--hz-ui-field-md) !important;
  min-width: var(--hz-ui-field-md) !important;
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  border-radius: var(--hz-ui-radius-md) !important;
}
body.horizon :is(.btn-icon,.hz-icon-button,.action-icon,.captcha-copy-action,.tcb-icon-btn,.captcha-icon-btn) > :is(i,svg) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 16px !important;
  color: currentColor !important;
}

/* Primary actions always use the Admin-selected system colour. */
body.horizon :is(.btn-primary,.btn-save,.save-btn,.submit-btn,.add-btn,.btn-gradient,.btn-login,.login-do-btn,.hz-primary-button,.hz-auth-submit,.profile-btn-v3--primary,.tcb-btn-primary,.captcha-btn--primary,.captcha-primary-action,.renew-pay-button) {
  background: var(--hz-primary) !important;
  background-image: none !important;
  border-color: color-mix(in srgb,var(--hz-primary) 84%,#000) !important;
  color: var(--hz-primary-foreground,#fff) !important;
  -webkit-text-fill-color: var(--hz-primary-foreground,#fff) !important;
}
body.horizon :is(.btn-primary,.btn-save,.save-btn,.submit-btn,.add-btn,.btn-gradient,.btn-login,.login-do-btn,.hz-primary-button,.hz-auth-submit,.profile-btn-v3--primary,.tcb-btn-primary,.captcha-btn--primary,.captcha-primary-action,.renew-pay-button):is(:hover,:focus-visible) {
  filter: brightness(.96) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hz-primary) 16%,transparent), 0 2px 5px var(--hz-shadow) !important;
}
body.horizon :is(.btn-secondary,.btn-light,.btn-default,.btn-outline-secondary,.btn-outline-dark,.hz-button,.hz-small-button,.hz-auth-social,.btn-outline-glass,.btn-back,.btn-cancel-edit) {
  background: var(--hz-surface) !important;
  border-color: var(--hz-border) !important;
  color: var(--hz-text) !important;
  -webkit-text-fill-color: var(--hz-text) !important;
}
body.horizon :is(.btn-secondary,.btn-light,.btn-default,.btn-outline-secondary,.btn-outline-dark,.hz-button,.hz-small-button,.hz-auth-social,.btn-outline-glass,.btn-back,.btn-cancel-edit):is(:hover,:focus-visible) {
  background: var(--hz-card) !important;
}

/* ---------- Composite fields ---------- */
body.horizon .input-group {
  position: static !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon .input-group:focus-within {
  border-color: var(--hz-ring,var(--hz-primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hz-primary) 16%,transparent) !important;
}
body.horizon .input-group > :is(input,.form-control,.form-select,select,.custom-file) {
  position: static !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 42px !important;
}
body.horizon .input-group > :is(.input-group-prepend,.input-group-append) {
  display: flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
body.horizon .input-group :is(button,.btn,.input-group-text) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 0 !important;
  background: var(--hz-card) !important;
  color: var(--hz-text) !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

/* Select2 / Choices / DataTables. */
body.horizon .select2-container { max-width: 100% !important; }
body.horizon .select2-container--default .select2-selection--single {
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  background: var(--hz-surface) !important;
}
body.horizon .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 42px !important;
  padding: 0 38px 0 13px !important;
  color: var(--hz-text) !important;
  line-height: 42px !important;
}
body.horizon .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px !important;
  right: 7px !important;
  width: 28px !important;
  height: 42px !important;
}
body.horizon .dataTables_wrapper :is(input[type=search],select) {
  height: var(--hz-ui-field-sm) !important;
  min-height: var(--hz-ui-field-sm) !important;
  border-radius: var(--hz-ui-radius-sm) !important;
  vertical-align: middle !important;
}

/* ---------- Layout of form grids/action rows ---------- */
body.horizon :is(.form-grid,.admin-form-grid,.filter-row,.tcb-form-grid,.captcha-form-grid,.admin-bank-row,.webhook-grid) {
  align-items: end !important;
  gap: var(--hz-ui-gap) !important;
}
body.horizon :is(.form-actions,.webhook-actions,.webhook-row-actions,.bank-actions) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  min-height: 0 !important;
}
body.horizon .form-actions {
  justify-content: flex-end !important;
  height: auto !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hz-border) !important;
}

/* Modern form/card surfaces without changing their internal document flow. */
body.client-app.horizon :is(.glass-card,.data-card,.modern-card,.custom-card,.hz-connect-form),
body.admin-basic.horizon :is(.admin-basic-card,.admin-card,.admin-panel,.data-card,.modern-card) {
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-ui-card-radius) !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  box-shadow: 0 1px 2px var(--hz-shadow), 0 10px 30px color-mix(in srgb,var(--hz-shadow) 36%,transparent) !important;
}
body.client-app.horizon .hz-connect-form { padding: clamp(18px,2.4vw,28px) !important; }
body.horizon :is(.bank-login-brand,.card-header-custom,.admin-basic-card__header,.admin-page-heading) :is(i,svg) {
  vertical-align: middle !important;
}
body.horizon .bank-login-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
body.horizon .bank-login-brand-logo {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 11px !important;
}

/* ---------- Landing: fix the inherited direct-child card rule and rebalance grid ---------- */
.horizon-landing .hz-feature-grid {
  align-items: stretch !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}
.horizon-landing .hz-feature-card {
  height: 100% !important;
  min-height: 210px !important;
  padding: 22px !important;
  border-radius: var(--hz-ui-card-radius) !important;
  box-shadow: 0 1px 2px var(--hz-shadow), 0 10px 30px color-mix(in srgb,var(--hz-shadow) 28%,transparent) !important;
}
/* horizon-adapter.css had `.hz-feature-card>div` as an inner card. Neutralize it. */
.horizon-landing .hz-feature-card > div:not(.hz-feature-icon):not(.hz-feature-visual) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.horizon-landing .hz-feature-icon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb,var(--hz-primary) 7%,var(--hz-card)) !important;
  color: var(--hz-primary) !important;
  box-shadow: none !important;
}
.horizon-landing .hz-feature-icon > i {
  position: static !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 17px !important;
}
.horizon-landing .hz-feature-card h3 {
  margin: 17px 0 7px !important;
  font-size: 14.5px !important;
  line-height: 21px !important;
}
.horizon-landing .hz-feature-card p {
  max-width: 58ch !important;
  font-size: 12.5px !important;
  line-height: 20px !important;
}
.horizon-landing .hz-feature-card--wide {
  grid-column: span 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(230px,.82fr) !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  align-items: start !important;
  column-gap: 28px !important;
  row-gap: 0 !important;
}
.horizon-landing .hz-feature-card--wide > .hz-feature-icon { grid-column: 1 !important; grid-row: 1 !important; }
.horizon-landing .hz-feature-card--wide > .hz-feature-copy,
.horizon-landing .hz-feature-card--wide > div:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; }
.horizon-landing .hz-feature-card--wide > .hz-feature-visual {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 150px !important;
  margin: 0 !important;
}
.horizon-landing .hz-feature-card--accent {
  grid-column: 1 / -1 !important;
  min-height: 160px !important;
  padding-right: min(10vw,120px) !important;
}
.horizon-landing .hz-feature-card--accent p { max-width: 72ch !important; }
.horizon-landing :is(.hz-tool-card,.hz-final-cta,.hz-api-preview,.hz-bank-item) {
  border-radius: var(--hz-ui-card-radius) !important;
}
.horizon-landing :is(.hz-tool-icon,.hz-workflow-steps li > span) {
  display: grid !important;
  place-items: center !important;
}

/* ---------- Auth: modern card, larger fields, balanced icon cells ---------- */
body.auth-page.horizon {
  display: grid !important;
  place-items: center !important;
  min-height: 100dvh !important;
  padding: clamp(14px,2vw,28px) !important;
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb,var(--hz-primary) 10%,transparent), transparent 32rem),
    radial-gradient(circle at 88% 86%, color-mix(in srgb,var(--hz-primary) 7%,transparent), transparent 28rem),
    var(--hz-bg) !important;
}
body.auth-page.horizon .hz-auth-shell {
  width: min(100%,1080px) !important;
  min-height: 650px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(400px,440px) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 22px !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 22px 70px color-mix(in srgb,#000 13%,transparent), 0 2px 8px var(--hz-shadow) !important;
}
body.auth-page.horizon .hz-auth-aside {
  position: relative !important;
  min-width: 0 !important;
  padding: clamp(32px,4vw,52px) !important;
  border: 0 !important;
  border-right: 1px solid var(--hz-border) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--hz-primary) 11%,var(--hz-surface)),var(--hz-card)) !important;
}
body.auth-page.horizon .hz-auth-aside::before {
  content: "" !important;
  position: absolute !important;
  right: -90px !important;
  bottom: -110px !important;
  width: 330px !important;
  height: 330px !important;
  border: 1px solid color-mix(in srgb,var(--hz-primary) 22%,var(--hz-border)) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb,var(--hz-primary) 4%,transparent) !important;
  pointer-events: none !important;
}
body.auth-page.horizon .hz-auth-aside::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  right: 30px !important;
  bottom: 38px !important;
  width: 140px !important;
  height: 140px !important;
  border: 1px solid color-mix(in srgb,var(--hz-primary) 17%,var(--hz-border)) !important;
  border-radius: 32px !important;
  transform: rotate(14deg) !important;
  opacity: .7 !important;
  pointer-events: none !important;
}
body.auth-page.horizon .hz-auth-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: fit-content !important;
}
body.auth-page.horizon .hz-auth-brand img {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 4px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 11px !important;
  background: var(--hz-surface) !important;
  object-fit: contain !important;
}
body.auth-page.horizon .hz-auth-brand strong {
  max-width: 250px !important;
  overflow: hidden !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.auth-page.horizon .hz-auth-copy { max-width: 500px !important; }
body.auth-page.horizon .hz-auth-copy .hz-auth-eyebrow {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: var(--hz-surface) !important;
  color: var(--hz-primary) !important;
}
body.auth-page.horizon .hz-auth-copy h1 {
  margin: 18px 0 10px !important;
  max-width: 520px !important;
  font-size: clamp(30px,3.2vw,42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
}
body.auth-page.horizon .hz-auth-copy p {
  max-width: 470px !important;
  font-size: 13.5px !important;
  line-height: 22px !important;
}
body.auth-page.horizon .hz-auth-points {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body.auth-page.horizon .hz-auth-points span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb,var(--hz-surface) 86%,transparent) !important;
  font-size: 11.5px !important;
}
body.auth-page.horizon .hz-auth-main {
  min-width: 0 !important;
  padding: 0 !important;
  background: var(--hz-surface) !important;
}
body.auth-page.horizon .hz-auth-main-inner {
  width: 100% !important;
  max-width: 440px !important;
  min-height: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: clamp(38px,5vw,58px) clamp(30px,4vw,48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.auth-page.horizon .hz-auth-heading {
  display: grid !important;
  grid-template-columns: 44px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  margin-bottom: 24px !important;
}
body.auth-page.horizon .hz-auth-heading-icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid color-mix(in srgb,var(--hz-primary) 26%,var(--hz-border)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb,var(--hz-primary) 9%,var(--hz-card)) !important;
  color: var(--hz-primary) !important;
}
body.auth-page.horizon .hz-auth-heading-icon i {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 18px !important;
}
body.auth-page.horizon .hz-auth-title {
  margin: 0 !important;
  font-size: 23px !important;
  line-height: 29px !important;
  letter-spacing: -.025em !important;
  font-weight: 700 !important;
}
body.auth-page.horizon .hz-auth-subtitle {
  margin: 2px 0 0 !important;
  color: var(--hz-muted) !important;
  font-size: 12.5px !important;
  line-height: 19px !important;
}
body.auth-page.horizon .hz-auth-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
body.auth-page.horizon .hz-auth-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
}
body.auth-page.horizon .hz-auth-field > label {
  min-height: 20px !important;
  margin: 0 !important;
  color: var(--hz-text) !important;
  font-size: 12.5px !important;
  font-weight: 625 !important;
  line-height: 20px !important;
}
body.auth-page.horizon .hz-auth-control,
body.auth-page.horizon .hz-auth-control.has-action,
body.auth-page.horizon .hz-auth-control:not(.has-action) {
  position: static !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0,1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  overflow: hidden !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 12px !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.auth-page.horizon .hz-auth-control.has-action { grid-template-columns: 46px minmax(0,1fr) 46px !important; }
body.auth-page.horizon .hz-auth-control:focus-within {
  border-color: var(--hz-ring,var(--hz-primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hz-primary) 16%,transparent), 0 1px 2px var(--hz-shadow) !important;
}
body.auth-page.horizon .hz-auth-control > i:first-child {
  position: static !important;
  grid-column: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 0 !important;
  background: var(--hz-card) !important;
  color: var(--hz-muted) !important;
  font-size: 16px !important;
  line-height: 16px !important;
  transform: none !important;
}
body.auth-page.horizon form .hz-auth-control > input,
body.auth-page.horizon .hz-auth-control > input {
  position: static !important;
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--hz-text) !important;
  -webkit-text-fill-color: var(--hz-text) !important;
  font-size: 13.5px !important;
  line-height: 46px !important;
  box-shadow: none !important;
}
body.auth-page.horizon .hz-auth-control > button.hz-auth-control-action {
  position: static !important;
  grid-column: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hz-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.auth-page.horizon .hz-auth-control > button.hz-auth-control-action:hover {
  background: var(--hz-card) !important;
  color: var(--hz-text) !important;
}
body.auth-page.horizon .hz-auth-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 24px !important;
}
body.auth-page.horizon .hz-auth-link {
  color: var(--hz-primary) !important;
  font-size: 12px !important;
  font-weight: 625 !important;
  line-height: 20px !important;
  text-decoration: none !important;
}
body.auth-page.horizon .hz-auth-submit,
body.auth-page.horizon .hz-auth-social {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}
body.auth-page.horizon .hz-auth-divider {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 18px !important;
}
body.auth-page.horizon .hz-auth-footer {
  margin: 2px 0 0 !important;
  color: var(--hz-muted) !important;
  font-size: 12.5px !important;
  line-height: 20px !important;
  text-align: center !important;
}
body.auth-page.horizon .hz-auth-message {
  margin: 0 0 16px !important;
  padding: 10px 12px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  line-height: 19px !important;
}
body.auth-page.horizon .hz-auth-dialog {
  border-radius: 16px !important;
  overflow: hidden !important;
}
body.auth-page.horizon .hz-auth-dialog-head { height: 56px !important; }
body.auth-page.horizon .hz-auth-dialog-body { padding: 20px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
  .horizon-landing .hz-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .horizon-landing .hz-feature-card--wide { grid-column: 1 / -1 !important; }
  .horizon-landing .hz-feature-card--accent { grid-column: 1 / -1 !important; }

  body.auth-page.horizon .hz-auth-shell {
    width: min(100%,520px) !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  body.auth-page.horizon .hz-auth-aside { display: none !important; }
  body.auth-page.horizon .hz-auth-main-inner {
    max-width: none !important;
    min-height: 590px !important;
    padding: 46px 42px !important;
  }
}

@media (max-width: 767.98px) {
  .horizon-landing .hz-feature-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .horizon-landing .hz-feature-card,
  .horizon-landing .hz-feature-card--wide,
  .horizon-landing .hz-feature-card--accent {
    grid-column: 1 !important;
    display: block !important;
    min-height: 0 !important;
    padding: 18px !important;
  }
  .horizon-landing .hz-feature-card--wide > .hz-feature-visual {
    position: relative !important;
    width: 100% !important;
    height: 138px !important;
    margin-top: 18px !important;
  }
  .horizon-landing .hz-feature-card--accent { padding-right: 18px !important; }

  body.horizon .form-actions {
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  body.horizon .form-actions > :is(button,.btn,a.btn,.btn-save) {
    flex: 1 1 180px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  body.horizon { --hz-ui-field-md: 44px; }
  body.auth-page.horizon { padding: 8px !important; }
  body.auth-page.horizon .hz-auth-shell { border-radius: 16px !important; }
  body.auth-page.horizon .hz-auth-main-inner {
    min-height: calc(100dvh - 18px) !important;
    padding: 34px 22px !important;
  }
  body.auth-page.horizon .hz-auth-heading {
    grid-template-columns: 40px minmax(0,1fr) !important;
    gap: 11px !important;
    margin-bottom: 22px !important;
  }
  body.auth-page.horizon .hz-auth-heading-icon { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
  body.auth-page.horizon .hz-auth-title { font-size: 21px !important; line-height: 27px !important; }
  body.auth-page.horizon .hz-auth-row { align-items: flex-start !important; }
  body.horizon .input-group { overflow: hidden !important; }
  body.horizon .input-group > :is(input,.form-control,.form-select,select) { min-width: 0 !important; }
}

/* ---------- V17.1 composite/control coverage ---------- */
/* Legacy forms sometimes omit Bootstrap classes. Scope fallback styling to actual forms. */
body.horizon form > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
body.horizon form :is(.form-group,.form-field,.admin-form-group,.filter-item,.webhook-field) > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
body.horizon form :is(.form-group,.form-field,.admin-form-group,.filter-item,.webhook-field) > select,
body.horizon form :is(.form-group,.form-field,.admin-form-group,.filter-item,.webhook-field) > textarea:not(.summernote) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--hz-ui-field-md) !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  -webkit-text-fill-color: var(--hz-text) !important;
  font-family: inherit !important;
  font-size: var(--hz-ui-control-font) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon form :is(.form-group,.form-field,.admin-form-group,.filter-item,.webhook-field) > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
body.horizon form :is(.form-group,.form-field,.admin-form-group,.filter-item,.webhook-field) > select {
  height: var(--hz-ui-field-md) !important;
  padding: 0 13px !important;
}

/* Profile/Admin prefix-suffix fields match the same 44px outer box. */
body.horizon :is(.profile-input-v3,.admin-input-suffix) {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon .profile-input-v3 {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) auto !important;
}
body.horizon .profile-input-v3 > i:first-child {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--hz-input,var(--hz-border)) !important;
  background: var(--hz-card) !important;
  color: var(--hz-muted) !important;
}
body.horizon .profile-input-v3 > input.profile-control-v3,
body.horizon .admin-input-suffix > :is(input,.form-control) {
  position: static !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 42px !important;
}
body.horizon :is(.profile-password-toggle-v3,.admin-input-suffix > span) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-left: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 0 !important;
  background: var(--hz-card) !important;
  color: var(--hz-muted) !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
body.horizon :is(.profile-input-v3,.admin-input-suffix):focus-within {
  border-color: var(--hz-ring,var(--hz-primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hz-primary) 16%,transparent) !important;
}

/* Captcha access-token row must use the same width/height as its input. */
body.client-app.horizon .captcha-api-page .captcha-token-row {
  grid-template-columns: minmax(0,1fr) var(--hz-ui-field-md) var(--hz-ui-field-md) !important;
  align-items: stretch !important;
  gap: 9px !important;
}
body.client-app.horizon .captcha-api-page .captcha-token-row > :is(.captcha-control,.captcha-icon-btn) {
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
}

/* Techcombank history page has one legacy unclassed page-size select. */
body.client-app.horizon #tcbPageSize {
  height: var(--hz-ui-field-sm) !important;
  min-height: var(--hz-ui-field-sm) !important;
  padding: 0 30px 0 10px !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-sm) !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  font-size: 12.5px !important;
}

/* Make disabled states intentional rather than visually broken. */
body.horizon :is(button,.btn,input,select,textarea):disabled,
body.horizon :is(button,.btn,input,select,textarea)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
}

/* Dashboard feature mockup cells were inheriting a legacy fixed 30px icon width. */
.horizon-landing .hz-feature-visual--dashboard i {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- V17.2 consent rows + card finish ---------- */
body.client-app.horizon .hz-connect-form .form-check:not(.form-switch) {
  display: grid !important;
  grid-template-columns: 18px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 4px 0 18px !important;
  padding: 12px 13px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  background: var(--hz-card) !important;
}
body.client-app.horizon .hz-connect-form .form-check:not(.form-switch) > .form-check-input {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 1px 0 0 !important;
}
body.auth-page.horizon .hz-auth-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.auth-page.horizon .hz-auth-check > input[type="checkbox"] {
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 1px 0 0 !important;
}
body.auth-page.horizon .hz-auth-check > label {
  color: var(--hz-muted) !important;
  font-size: 12px !important;
  line-height: 19px !important;
}

body.client-app.horizon :is(.card,.glass-card,.data-card,.modern-card,.custom-card,.bank-card-glass,.tcb-card,.captcha-card),
body.admin-basic.horizon :is(.card,.admin-card,.admin-panel,.admin-basic-card,.data-card,.modern-card,.custom-card) {
  border-radius: var(--hz-ui-card-radius) !important;
}

/* Keep modal close controls compact instead of inheriting generic form sizing. */
body.horizon :is(.modal .close,.hz-auth-dialog-head button,.btn-close) {
  flex: 0 0 auto !important;
}

/* ---------- V17.3 high-specificity profile reset ---------- */
body.client-app.horizon .profile-page-v3 form.hz-form .profile-form-field-v3 .profile-input-v3 {
  position: static !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) auto !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--hz-ui-field-md) !important;
  min-height: var(--hz-ui-field-md) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: var(--hz-ui-radius-md) !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.client-app.horizon .profile-page-v3 form.hz-form .profile-form-field-v3 .profile-input-v3:focus-within {
  border-color: var(--hz-ring,var(--hz-primary)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hz-primary) 16%,transparent) !important;
}
body.client-app.horizon .profile-page-v3 form.hz-form .profile-form-field-v3 .profile-input-v3 > i:first-child {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-right: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 0 !important;
  background: var(--hz-card) !important;
  color: var(--hz-muted) !important;
}
body.client-app.horizon .profile-page-v3 form.hz-form .profile-form-field-v3 .profile-input-v3 > input.profile-control-v3 {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 42px !important;
}
body.client-app.horizon .profile-page-v3 form.hz-form .profile-form-field-v3 .profile-password-toggle-v3 {
  position: static !important;
  inset: auto !important;
  grid-column: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-left: 1px solid var(--hz-input,var(--hz-border)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hz-muted) !important;
  box-shadow: none !important;
}

/* ---------- V17.4 client connect-form polish ---------- */
body.client-app.horizon .hz-connect-page .hz-connect-form {
  width: 100% !important;
  max-width: 640px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(20px,2.5vw,28px) !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-ui-card-radius) !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 1px 2px var(--hz-shadow), 0 12px 34px color-mix(in srgb,var(--hz-shadow) 34%,transparent) !important;
  overflow: visible !important;
}
body.client-app.horizon .hz-connect-page .glass-card:not(.hz-connect-form) {
  width: 100% !important;
  max-width: 640px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(18px,2vw,24px) !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-ui-card-radius) !important;
  background: var(--hz-surface) !important;
  box-shadow: 0 1px 2px var(--hz-shadow), 0 10px 28px color-mix(in srgb,var(--hz-shadow) 26%,transparent) !important;
  transform: none !important;
}
body.client-app.horizon .hz-connect-page .form-group {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
}
body.client-app.horizon .hz-connect-page .form-group:last-child { margin-bottom: 0 !important; }
body.client-app.horizon .hz-connect-page .btn-gradient { width: 100% !important; }

/* Common heading icons sit on the same optical baseline as their text. */
body.horizon :is(.page-title,.card-header-custom h3,.admin-basic-card__header h2,.modal-title) {
  align-items: center !important;
}
body.horizon :is(.page-title,.card-header-custom h3,.admin-basic-card__header h2,.modal-title) > :is(i,svg) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 17px !important;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 17px !important;
  vertical-align: middle !important;
}