/*
 * Horizon V8 final parity layer
 * Visual source of truth: horizon-builderkit-full-clone.zip supplied by user.
 * Goals: exact light/dark tokens, balanced non-overlapping forms, reliable action
 * colors, normal-flow footer, compact scrollbars and compatibility with legacy pages.
 */

/* -------------------------------------------------------------------------- */
/* 1. Theme tokens — copied from the Horizon BuilderKit source                */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] body.horizon,
body.horizon[data-theme="light"] {
  --hz-bg: oklch(0.9824 0.003 277.7);
  --hz-surface: #fff;
  --hz-text: oklch(0.2413 0.0099 277.7);
  --hz-muted: oklch(0.09492 0.0438 257.5 / 0.616);
  --hz-faint: oklch(0.1149 0.0528 264.9 / 0.495);
  --hz-card: oklch(0.1555 0.1022 265.8 / 0.059);
  --hz-border: oklch(0.1877 0.0881 263 / 0.095);
  --hz-shadow: oklch(0.1744 0.0872 261.4 / 0.122);
  --hz-primary: #3e63dd; --hz-primary-rgb: 62,99,221;
  --hz-success: #29a383; --hz-danger: #e5484d; --hz-warning: #ffc53d; --hz-info: #0091ff;
  color-scheme: light;
}
html[data-theme="dark"] body.horizon,
body.horizon[data-theme="dark"] {
  --hz-bg: #18191b;
  --hz-surface: #202124;
  --hz-text: #eeeef0;
  --hz-muted: #aaaab4;
  --hz-faint: #85858f;
  --hz-card: #ffffff0e;
  --hz-border: #ffffff20;
  --hz-shadow: #0005;
  --hz-primary: #3e63dd; --hz-primary-rgb: 62,99,221;
  --hz-success: #29a383; --hz-danger: #e5484d; --hz-warning: #ffc53d; --hz-info: #0091ff;
  color-scheme: dark;
}

/* Map old UI/admin tokens back to the Horizon palette in both modes. */
body.horizon {
  --ui-bg: var(--hz-bg);
  --ui-surface: var(--hz-surface);
  --ui-surface-soft: var(--hz-card);
  --ui-card: var(--hz-surface);
  --ui-text: var(--hz-text);
  --ui-text-soft: var(--hz-muted);
  --ui-text-faint: var(--hz-faint);
  --ui-border: var(--hz-border);
  --admin-canvas: var(--hz-bg);
  --admin-paper: var(--hz-surface);
  --admin-paper-2: var(--hz-card);
  --admin-ink: var(--hz-text);
  --admin-ink-2: var(--hz-text);
  --admin-muted: var(--hz-muted);
  --admin-faint: var(--hz-faint);
  --admin-line: var(--hz-border);
  background: var(--hz-bg) !important;
  color: var(--hz-text) !important;
}

/* Prevent legacy light-only utility classes from breaking dark mode. */
body.horizon :is(.text-dark,.text-body,.text-body-emphasis,.card-title,.modal-title,.dropdown-header) { color: var(--hz-text) !important; }
body.horizon :is(.text-muted,.text-secondary,.small.text-muted,.form-text,.help-block,.helper-text) { color: var(--hz-muted) !important; }
body.horizon :is(.bg-white,.bg-body,.bg-light,.bg-body-tertiary) { background: var(--hz-surface) !important; color: var(--hz-text) !important; }
body.horizon :is(.border,.border-top,.border-bottom,.border-start,.border-end) { border-color: var(--hz-border) !important; }
body.horizon hr { border-color: var(--hz-border) !important; opacity: 1 !important; }
body.horizon :is(h1,h2,h3,h4,h5,h6,label,legend,strong,b,.fw-bold,.fw-semibold) { color: inherit; }

/* Legacy page surfaces with hard-coded pale backgrounds. */
html[data-theme="dark"] body.horizon :is(
  .glass-card,.stat-card,.bank-card,.info-card,.pricing-box,.product-card,.bank-plan,
  .summary-card,.account-card,.history-card,.api-card,.module-card,.content-card,
  .admin-card,.admin-panel,.settings-card,.data-card,.profile-card,.action-card,
  .table-card,.toolbar-card,.filter-card,.empty-state,.notice-box,.your-key-box
) {
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  border-color: var(--hz-border) !important;
}

/* -------------------------------------------------------------------------- */
/* 2. Buttons/action colors — same interaction model as Horizon               */
/* -------------------------------------------------------------------------- */
body.horizon :is(
  .btn,.hz-button,.hz-small-button,.profile-btn-v3,.tcb-btn,.captcha-btn,
  .btn-outline-glass,.action-btn,.admin-action-btn,.table-action-btn
) {
  min-height: 32px;
  border-radius: 8px !important;
  font-weight: 550 !important;
  line-height: 20px !important;
  text-decoration: none !important;
}
body.horizon :is(.btn-secondary,.btn-light,.btn-outline-secondary,.profile-btn-v3:not(.profile-btn-v3--primary),.hz-button,.hz-small-button,.btn-outline-glass) {
  background: var(--hz-surface) !important;
  border-color: var(--hz-border) !important;
  color: var(--hz-text) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(.btn-secondary,.btn-light,.btn-outline-secondary,.profile-btn-v3:not(.profile-btn-v3--primary),.hz-button,.hz-small-button,.btn-outline-glass):hover {
  background: var(--hz-card) !important;
  border-color: var(--hz-border) !important;
  color: var(--hz-text) !important;
}
body.horizon :is(.btn-primary,.btn-gradient,.btn-gradient-sm,.btn-save,.btn-login,.login-do-btn,.hz-primary-button,.profile-btn-v3--primary,.tcb-btn-primary,.captcha-btn--primary,.captcha-primary-action) {
  background: var(--hz-primary) !important;
  border-color: var(--hz-primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(.btn-primary,.btn-gradient,.btn-gradient-sm,.btn-save,.btn-login,.login-do-btn,.hz-primary-button,.profile-btn-v3--primary,.tcb-btn-primary,.captcha-btn--primary,.captcha-primary-action):hover {
  background: color-mix(in srgb,var(--hz-primary) 88%,#000) !important;
  border-color: color-mix(in srgb,var(--hz-primary) 82%,#000) !important;
  color: #fff !important;
}
body.horizon :is(.btn-danger,.bg-danger,.action-icon.bg-danger) { background: var(--hz-danger) !important; border-color: var(--hz-danger) !important; color: #fff !important; }
body.horizon :is(.btn-success,.bg-success,.action-icon.bg-success) { background: var(--hz-success) !important; border-color: var(--hz-success) !important; color: #fff !important; }
body.horizon :is(.btn-warning,.bg-warning,.action-icon.bg-warning) { background: var(--hz-warning) !important; border-color: var(--hz-warning) !important; color: #2b2400 !important; }
body.horizon :is(.btn-info,.bg-info,.action-icon.bg-info) { background: var(--hz-info) !important; border-color: var(--hz-info) !important; color: #fff !important; }
html[data-theme="dark"] body.horizon :is(.btn-dark,.bg-dark,.action-icon.bg-dark) {
  background: var(--hz-card) !important;
  border: 1px solid var(--hz-border) !important;
  color: var(--hz-text) !important;
}
body.horizon :is(button,.btn,.hz-button,.profile-btn-v3):disabled,
body.horizon :is(button,.btn,.hz-button,.profile-btn-v3).disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Keep icon and label visually separate. Icon-only actions remain square. */
body.horizon :is(.btn,.hz-button,.hz-small-button,.hz-primary-button,.profile-btn-v3,.tcb-btn,.captcha-btn,.btn-outline-glass):not(.btn-icon):not(.hz-icon-button):not(.action-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
body.horizon :is(.btn,.hz-button,.hz-small-button,.hz-primary-button,.profile-btn-v3,.tcb-btn,.captcha-btn,.btn-outline-glass):not(.btn-icon):not(.hz-icon-button):not(.action-icon) > :is(i,svg) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}
body.horizon :is(.action-icon,.hz-icon-button,.btn-icon) {
  display: inline-grid !important;
  place-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}
body.horizon :is(.action-icon,.hz-icon-button,.btn-icon) > :is(i,svg) { margin: 0 !important; position: static !important; transform: none !important; }

/* -------------------------------------------------------------------------- */
/* 3. Balanced forms — no nested visual boxes, no icon/input collision        */
/* -------------------------------------------------------------------------- */
body.horizon form { position: relative !important; width: 100%; min-width: 0 !important; max-width: 100% !important; margin: 0; }
body.horizon form :is(.row,.form-row,.form-grid,.admin-form-grid,.profile-form-grid-v3) { min-width: 0 !important; }
body.horizon form :is(.form-group,.form-field,.admin-form-group,.tcb-field,.hz-auth-field,.profile-form-field-v3) {
  position: relative !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
body.horizon form :is(label,.form-label,.control-label,.admin-form-group>label,.tcb-field>label,.profile-form-field-v3>label) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  color: var(--hz-text) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 550 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body.horizon form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,.form-control,.form-select,.custom-select,.dataTable-input,.dataTable-selector) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 8px !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  line-height: 20px !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon form textarea,
body.horizon textarea.form-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 84px !important;
  height: auto !important;
  padding: 8px 10px !important;
  border-color: var(--hz-border) !important;
  border-radius: 8px !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  line-height: 20px !important;
  resize: vertical !important;
}
body.horizon form :is(input,textarea)::placeholder { color: var(--hz-faint) !important; opacity: 1 !important; }
body.horizon form :is(input,select,textarea,.form-control,.form-select):focus {
  border-color: var(--hz-primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--hz-primary) 18%,transparent),0 1px 2px var(--hz-shadow) !important;
}
body.horizon form :is(input,select,textarea,.form-control,.form-select):disabled,
body.horizon form .form-control[readonly] {
  background: var(--hz-card) !important;
  color: var(--hz-muted) !important;
  opacity: 1 !important;
}

/* Input groups share one border box; children never sit on top of each other. */
body.horizon .input-group {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0 !important;
}
body.horizon .input-group > :is(.input-group-text,.btn) {
  position: static !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  border-color: var(--hz-border) !important;
  background: var(--hz-card) !important;
  color: var(--hz-muted) !important;
}
body.horizon .input-group > :is(input,.form-control,.form-select,select) { flex: 1 1 0% !important; min-width: 0 !important; }
body.horizon .input-group > :first-child { border-radius: 8px 0 0 8px !important; }
body.horizon .input-group > :last-child { border-radius: 0 8px 8px 0 !important; }
body.horizon .input-group > :not(:first-child) { margin-left: -1px !important; }


/* Profile input wrapper is structural only; never draw a second form-control box. */
body.client-app.horizon form .profile-form-field-v3 .profile-input-v3 {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Icon-inside-input pattern: reserve actual text space, do not overlay text. */
body.horizon :is(.profile-input-v3,.input-icon-wrap,.form-icon-wrap,.hz-input-icon) {
  position: relative !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body.horizon .profile-input-v3 > i:first-child {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  z-index: 2 !important;
  width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  color: var(--hz-muted) !important;
  pointer-events: none !important;
}
body.client-app.horizon .profile-page-v3 form.hz-form .profile-form-field-v3 .profile-input-v3 > input.profile-control-v3 {
  height: 40px !important;
  min-height: 40px !important;
  padding: 8px 42px 8px 38px !important;
  border-radius: 8px !important;
}
body.horizon .profile-password-toggle-v3 {
  right: 5px !important;
  top: 50% !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--hz-muted) !important;
  transform: translateY(-50%) !important;
}
body.horizon .profile-password-toggle-v3:hover { background: var(--hz-card) !important; color: var(--hz-text) !important; }

/* Select2 / Choices parity. */
body.horizon :is(.select2-container,.choices) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
body.horizon .select2-container .select2-selection--single,
body.horizon .choices__inner {
  min-height: 34px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 8px !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(.select2-dropdown,.choices__list--dropdown) { background: var(--hz-surface) !important; color: var(--hz-text) !important; border-color: var(--hz-border) !important; }


/* High-specificity dark controls: override legacy Bootstrap/AdminLTE white fields. */
html[data-theme="dark"] body.horizon form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea,.form-control,.form-select,.custom-select,.dataTable-input,.dataTable-selector),
html[data-theme="dark"] body.horizon :is(.select2-container .select2-selection--single,.choices__inner) {
  background-color: #202124 !important;
  background-image: none !important;
  color: #eeeef0 !important;
  border-color: #ffffff20 !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"] body.horizon form :is(input,select,textarea,.form-control,.form-select):disabled,
html[data-theme="dark"] body.horizon form .form-control[readonly],
html[data-theme="dark"] body.client-app.horizon .profile-page-v3 input.profile-control-v3[readonly] {
  background-color: #292a2d !important;
  color: #aaaab4 !important;
  -webkit-text-fill-color: #aaaab4 !important;
}
html[data-theme="light"] body.horizon form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea,.form-control,.form-select,.custom-select,.dataTable-input,.dataTable-selector) {
  background-color: #fff !important;
  color: oklch(0.2413 0.0099 277.7) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Profile page — balanced columns/actions and guaranteed normal flow       */
/* -------------------------------------------------------------------------- */
body.client-app.horizon .profile-page-v3 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}
body.client-app.horizon .profile-hero-v3,
body.client-app.horizon .profile-side-v3,
body.client-app.horizon .profile-panel-v3,
body.client-app.horizon .profile-metric-v3 {
  border: 1px solid var(--hz-border) !important;
  border-radius: 8px !important;
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.client-app.horizon .profile-layout-v3 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(220px,260px) minmax(0,1fr) !important;
  align-items: start !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
body.client-app.horizon .profile-panels-v3,
body.client-app.horizon .profile-panel-v3,
body.client-app.horizon .profile-panel-v3 > form {
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
}
body.client-app.horizon .profile-panel-v3 { overflow: clip !important; }
body.client-app.horizon .profile-panel-v3[hidden] { display: none !important; }
body.client-app.horizon .profile-panel-v3.is-active:not([hidden]) { display: block !important; }
body.client-app.horizon .profile-form-v3__body { padding: 20px !important; }
body.client-app.horizon .profile-form-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 18px 16px !important;
  align-items: start !important;
}
body.client-app.horizon .profile-form-field-v3 { display: block !important; min-width: 0 !important; }
body.client-app.horizon .profile-form-field-v3--full { grid-column: 1 / -1 !important; }
body.client-app.horizon .profile-form-v3__footer {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--hz-border) !important;
  background: var(--hz-surface) !important;
  z-index: auto !important;
}
body.client-app.horizon .profile-form-v3__footer p { flex: 1 1 340px !important; max-width: 580px !important; color: var(--hz-muted) !important; }
body.client-app.horizon .profile-form-actions-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 1 auto !important;
  gap: 8px !important;
  min-width: 0 !important;
}
body.client-app.horizon .profile-btn-v3 { min-height: 34px !important; height: 34px !important; padding: 6px 11px !important; white-space: nowrap !important; }
body.client-app.horizon .profile-tab-v3 { color: var(--hz-muted) !important; }
body.client-app.horizon .profile-tab-v3.is-active { background: var(--hz-card) !important; border-color: var(--hz-border) !important; color: var(--hz-text) !important; }
body.client-app.horizon .profile-tab-v3.is-active > i:first-child { background: var(--hz-primary) !important; color: #fff !important; }
body.client-app.horizon :is(.profile-page-v3__title,.profile-identity-v3__copy strong,.profile-metric-v3 strong,.profile-side-v3__head strong,.profile-panel-v3__title strong,.profile-inline-alert-v3 strong) { color: var(--hz-text) !important; }
body.client-app.horizon :is(.profile-page-v3__subtitle,.profile-identity-v3__copy span,.profile-security-note-v3 p,.profile-field-help-v3,.profile-panel-v3__title span,.profile-inline-alert-v3 span) { color: var(--hz-muted) !important; }
body.client-app.horizon .profile-metric-v3 span { color: var(--hz-faint) !important; }

/* -------------------------------------------------------------------------- */
/* 5. Footer — strict normal flow, never overlay application content           */
/* -------------------------------------------------------------------------- */
body.horizon .hz-app-content {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: calc(100vh - 16px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}
body.horizon .hz-app-content > :not(.hz-site-footer) { position: relative; z-index: auto; }
body.horizon .hz-site-footer {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 1280px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 32px auto 0 !important;
  padding: 16px 0 24px !important;
  background: transparent !important;
  color: var(--hz-muted) !important;
  z-index: auto !important;
}
body.horizon .hz-site-footer__row {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--hz-border) !important;
}
body.horizon .hz-site-footer__brand { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; margin: 0 auto 0 0 !important; }
body.horizon .hz-site-footer__brand span { min-width: 0 !important; overflow-wrap: anywhere !important; }
body.horizon .hz-site-footer__links { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 14px !important; min-width: 0 !important; }
body.horizon .hz-site-footer a { color: var(--hz-muted) !important; }
body.horizon .hz-site-footer a:hover { color: var(--hz-text) !important; }

/* -------------------------------------------------------------------------- */
/* 6. Tables/modals/menus dark-light parity                                   */
/* -------------------------------------------------------------------------- */
body.horizon :is(.card,.modal-content,.dropdown-menu,.list-group-item,.popover,.dataTables_wrapper,.note-editor.note-frame,.note-toolbar,.note-editable) {
  background: var(--hz-surface) !important;
  color: var(--hz-text) !important;
  border-color: var(--hz-border) !important;
}
body.horizon .table { background: transparent !important; color: var(--hz-text) !important; }
body.horizon .table :is(th,td) { background: transparent !important; color: inherit !important; border-color: var(--hz-border) !important; }
body.horizon .table tbody tr:hover { background: var(--hz-card) !important; }
body.horizon .dropdown-item { color: var(--hz-text) !important; }
body.horizon .dropdown-item:hover,body.horizon .dropdown-item:focus { background: var(--hz-card) !important; color: var(--hz-text) !important; }
body.horizon .modal-header,body.horizon .modal-body,body.horizon .modal-footer { background: var(--hz-surface) !important; color: var(--hz-text) !important; border-color: var(--hz-border) !important; }
html[data-theme="dark"] body.horizon .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* -------------------------------------------------------------------------- */
/* 7. Small, quiet scrollbars                                                  */
/* -------------------------------------------------------------------------- */
html,body.horizon,body.horizon * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--hz-muted) 28%,transparent) transparent; }
html::-webkit-scrollbar,body.horizon::-webkit-scrollbar,body.horizon *::-webkit-scrollbar { width: 6px; height: 6px; }
html::-webkit-scrollbar-track,body.horizon::-webkit-scrollbar-track,body.horizon *::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb,body.horizon::-webkit-scrollbar-thumb,body.horizon *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb,var(--hz-muted) 30%,transparent);
  border: 1px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,body.horizon::-webkit-scrollbar-thumb:hover,body.horizon *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb,var(--hz-muted) 46%,transparent); background-clip: padding-box; }

/* -------------------------------------------------------------------------- */
/* 8. Responsive                                                              */
/* -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body.client-app.horizon .profile-layout-v3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  body.client-app.horizon .profile-side-v3 { position: static !important; top: auto !important; }
}
@media (max-width: 680px) {
  body.client-app.horizon .profile-form-grid-v3 { grid-template-columns: 1fr !important; gap: 14px !important; }
  body.client-app.horizon .profile-form-field-v3--full { grid-column: auto !important; }
  body.client-app.horizon .profile-form-v3__body { padding: 16px !important; }
  body.client-app.horizon .profile-form-v3__footer { align-items: stretch !important; flex-direction: column !important; padding: 14px 16px !important; }
  body.client-app.horizon .profile-form-actions-v3 { width: 100% !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.client-app.horizon .profile-btn-v3 { width: 100% !important; min-width: 0 !important; white-space: normal !important; }
  body.horizon .hz-site-footer { margin-top: 24px !important; padding: 14px 0 20px !important; }
  body.horizon .hz-site-footer__row { align-items: flex-start !important; flex-direction: column !important; }
}
@media (max-width: 450px) {
  body.client-app.horizon .profile-form-actions-v3 { grid-template-columns: 1fr !important; }
  body.client-app.horizon .profile-tabs-v3 { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.horizon *,body.horizon *::before,body.horizon *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* -------------------------------------------------------------------------- */
/* 9. Final parity hardening                                                   */
/* -------------------------------------------------------------------------- */
/* Chrome/Safari autofill must follow the same Horizon tokens. */
html[data-theme="dark"] body.horizon input:-webkit-autofill,
html[data-theme="dark"] body.horizon input:-webkit-autofill:hover,
html[data-theme="dark"] body.horizon input:-webkit-autofill:focus,
html[data-theme="dark"] body.horizon textarea:-webkit-autofill,
html[data-theme="dark"] body.horizon select:-webkit-autofill {
  -webkit-text-fill-color: #eeeef0 !important;
  caret-color: #eeeef0 !important;
  -webkit-box-shadow: 0 0 0 1000px #202124 inset !important;
  box-shadow: 0 0 0 1000px #202124 inset !important;
  border-color: #ffffff20 !important;
  transition: background-color 99999s ease-out 0s !important;
}
html[data-theme="light"] body.horizon input:-webkit-autofill,
html[data-theme="light"] body.horizon input:-webkit-autofill:hover,
html[data-theme="light"] body.horizon input:-webkit-autofill:focus,
html[data-theme="light"] body.horizon textarea:-webkit-autofill,
html[data-theme="light"] body.horizon select:-webkit-autofill {
  -webkit-text-fill-color: oklch(0.2413 0.0099 277.7) !important;
  caret-color: oklch(0.2413 0.0099 277.7) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  border-color: var(--hz-border) !important;
}

/* Old pages used absolutely positioned action rows. Keep actions in document flow. */
body.horizon form :is(.form-actions,.admin-form-actions,.action-buttons,.flex-buttons,.actions,.bank-actions,.tcb-actions) {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin-top: 16px !important;
}
body.horizon form :is(.form-actions,.admin-form-actions,.action-buttons,.flex-buttons,.actions,.bank-actions,.tcb-actions) > * {
  position: static !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Complete the action palette for custom/legacy controls. */
body.horizon :is(.filter-btn,.btn-edit,.btn-edit-sm,.admin-overview__button--primary,.renew-pay-button) {
  background: var(--hz-primary) !important;
  border: 1px solid var(--hz-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(.btn-delete,.btn-delete-sm,.btn-danger-full) {
  background: var(--hz-danger) !important;
  border: 1px solid var(--hz-danger) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
body.horizon .btn-outline-danger {
  background: transparent !important;
  border-color: var(--hz-danger) !important;
  color: var(--hz-danger) !important;
}
body.horizon .btn-outline-danger:hover { background: var(--hz-danger) !important; color: #fff !important; }
body.horizon :is(.btn-cancel-edit,.btn-back,.captcha-btn--secondary,.tcb-btn-soft,.tcb-icon-btn,.btn-copy,.copy-btn,.captcha-copy-btn,.admin-overview__button:not(.admin-overview__button--primary)) {
  background: var(--hz-surface) !important;
  border: 1px solid var(--hz-border) !important;
  color: var(--hz-text) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px var(--hz-shadow) !important;
}
body.horizon :is(.btn-cancel-edit,.btn-back,.captcha-btn--secondary,.tcb-btn-soft,.tcb-icon-btn,.btn-copy,.copy-btn,.captcha-copy-btn,.admin-overview__button:not(.admin-overview__button--primary)):hover {
  background: var(--hz-card) !important;
  color: var(--hz-text) !important;
}
body.horizon :is(.btn-success-full) { background: var(--hz-success) !important; border-color: var(--hz-success) !important; color:#fff !important; }
body.horizon :is(.btn-warning-full) { background: var(--hz-warning) !important; border-color: var(--hz-warning) !important; color:#2b2400 !important; }
body.horizon :is(.btn-info-full) { background: var(--hz-info) !important; border-color: var(--hz-info) !important; color:#fff !important; }

/* Keep scrollable data regions usable on mobile instead of clipping wide tables. */
body.horizon :is(.table-responsive,.data-table-wrapper,.tcb-table-wrap,.table-wrapper,.history-table-wrap,.overflow-auto) {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Shell sizing: content and footer are always normal-flow children. */
body.horizon .hz-main,
body.horizon .hz-panel { height: auto !important; min-height: 100vh; }
@media (min-width:1024px) { body.horizon .hz-panel { min-height: calc(100vh - 16px); } }
body.horizon .hz-panel { overflow: visible !important; }

@media (max-width: 520px) {
  body.horizon form :is(.form-actions,.admin-form-actions,.action-buttons,.flex-buttons,.actions,.bank-actions,.tcb-actions) {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  body.horizon form :is(.form-actions,.admin-form-actions,.action-buttons,.flex-buttons,.actions,.bank-actions,.tcb-actions) > :is(button,.btn,a) {
    width: 100% !important;
  }
}

/* Mobile profile footer copy must not keep the desktop 340px flex-basis. */
@media (max-width: 680px) {
  body.client-app.horizon .profile-form-v3__footer p {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* The legacy <=450px rule hid the title wrapper itself. Keep the heading visible;
   only the secondary description is collapsed on very small screens. */
@media (max-width: 450px) {
  body.client-app.horizon .profile-panel-v3__title > span {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.client-app.horizon .profile-panel-v3__title > span > strong { display: block !important; }
  body.client-app.horizon .profile-panel-v3__title > span > span { display: none !important; }
}