/**
 * FT Design System — Responsive + Accessibility Global v1
 * Representation only. No business state or data behavior.
 */

:where(.ft-button,.ft-tab,.ft-filter,.ft-action,[role="button"],button,input,select,textarea,a):focus-visible {
	outline: 2px solid var(--ft-color-focus, #ffa300);
	outline-offset: 2px;
}

:where(.ft-button,.ft-tab,.ft-filter,.ft-action,button,select,input[type="button"],input[type="submit"],input[type="reset"]) {
	min-height: 40px;
}

.ft-button[disabled],
.ft-button[aria-disabled="true"],
:where(button,input,select,textarea):disabled {
	cursor: not-allowed;
	opacity: .56;
}

.ft-card,
.ft-theme-preview-viewport,
.ft-table-wrap,
.ft-admin-table-wrap {
	max-width: 100%;
	min-width: 0;
}

.ft-table-wrap,
.ft-admin-table-wrap,
.ft-responsive-table {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
}

.ft-table-wrap table,
.ft-admin-table-wrap table,
.ft-responsive-table table {
	min-width: 680px;
}

:where(.ft-tabs,.ft-filters,.ft-actions,.ft-pagination,.ft-theme-actions) {
	max-width: 100%;
}

:where(.ft-tabs,.ft-filters,.ft-actions) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ft-space-2, 8px);
}

:where(.ft-pagination) a,
:where(.ft-pagination) button {
	min-width: 40px;
	min-height: 40px;
}

@media (max-width: 782px) {
	:where(.ft-button,.ft-tab,.ft-filter,.ft-action,button,select,input[type="button"],input[type="submit"],input[type="reset"]) {
		min-height: 44px;
	}

	.ft-card {
		max-width: 100%;
	}

	:where(.ft-actions,.ft-theme-actions) {
		align-items: stretch;
	}

	:where(.ft-actions,.ft-theme-actions) > :where(.ft-button,button,a) {
		flex: 1 1 auto;
	}

	.ft-table-wrap,
	.ft-admin-table-wrap,
	.ft-responsive-table {
		margin-inline: 0;
	}
}

@media (max-width: 480px) {
	:where(.ft-tabs,.ft-filters) {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scrollbar-gutter: stable;
	}

	:where(.ft-tabs,.ft-filters) > * {
		flex: 0 0 auto;
	}

	:where(.ft-actions,.ft-theme-actions) {
		flex-direction: column;
	}

	:where(.ft-actions,.ft-theme-actions) > :where(.ft-button,button,a) {
		width: 100%;
		justify-content: center;
	}

	.ft-pagination {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

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

@media (forced-colors: active) {
	:where(.ft-button,.ft-tab,.ft-filter,.ft-action,.ft-card,.ft-status) {
		forced-color-adjust: auto;
		border: 1px solid CanvasText;
	}

	:where(.ft-button,.ft-tab,.ft-filter,.ft-action,[role="button"],button,input,select,textarea,a):focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}

	.ft-status::before {
		content: "•";
		margin-right: 4px;
	}
}


/* ==========================================================================
   FT UI Controls — Global State Normalization v1 (.414)
   Normal = neutral; Hover/Active = strong Cor 1 + Cor 2; Focus = FT accent.
   This layer intentionally excludes destructive and semantic status controls.
   ========================================================================== */

:where(
  .ft-button:not(.ft-button--danger):not(.ft-button--accent),
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action:not(.ft-action--danger),
  .ft-actions a:not(.ft-action--danger),
  .ft-actions button:not(.ft-action--danger)
) {
  background: var(--ft-color-surface, #FFFFFF);
  border-color: var(--ft-color-primary, #000000);
  color: var(--ft-color-primary, #000000);
}

:where(
  .ft-button:not(.ft-button--danger):not(.ft-button--accent),
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action:not(.ft-action--danger),
  .ft-actions a:not(.ft-action--danger),
  .ft-actions button:not(.ft-action--danger)
):is(:hover, :active),
:where(
  .ft-filter.is-active,
  .ft-filter[aria-selected="true"],
  .ft-filter-button.is-active,
  .ft-filter-button[aria-pressed="true"],
  .ft-tab.is-active,
  .ft-tab[aria-selected="true"],
  .ft-tabs .is-active > a,
  .ft-pagination .current,
  .ft-pagination [aria-current="page"],
  .ft-action.is-active,
  .ft-action[aria-pressed="true"]
) {
  background: var(--ft-color-primary, #000000);
  border-color: var(--ft-color-primary, #000000);
  color: var(--ft-color-on-primary, #FFFFFF);
}

:where(
  .ft-filter.is-active,
  .ft-filter[aria-selected="true"],
  .ft-filter-button.is-active,
  .ft-filter-button[aria-pressed="true"],
  .ft-tab.is-active,
  .ft-tab[aria-selected="true"],
  .ft-tabs .is-active > a,
  .ft-pagination .current,
  .ft-pagination [aria-current="page"],
  .ft-action.is-active,
  .ft-action[aria-pressed="true"]
) {
  font-weight: 600;
}

:where(
  .ft-button,
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action,
  .ft-actions a,
  .ft-actions button
):focus-visible {
  outline: 2px solid var(--ft-color-accent, #FFA300);
  outline-offset: 2px;
}

:where(
  .ft-button,
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action,
  .ft-actions a,
  .ft-actions button
):is(:disabled, [disabled], [aria-disabled="true"]) {
  background: var(--ft-color-neutral-surface, #EFF1F5);
  border-color: var(--ft-color-muted, #808080);
  color: var(--ft-color-muted, #808080);
  cursor: not-allowed;
  opacity: .72;
}

/* WordPress-style FT list filters/actions already migrated into FT admin surfaces. */
.ft-admin-wrap :where(
  .button:not(.button-primary):not(.button-link-delete),
  button.button:not(.button-primary):not(.button-link-delete),
  input.button:not(.button-primary)
) {
  background: var(--ft-color-surface, #FFFFFF);
  border-color: var(--ft-color-primary, #000000);
  color: var(--ft-color-primary, #000000);
}

.ft-admin-wrap :where(
  .button:not(.button-primary):not(.button-link-delete),
  button.button:not(.button-primary):not(.button-link-delete),
  input.button:not(.button-primary)
):hover {
  background: var(--ft-color-primary, #000000);
  border-color: var(--ft-color-primary, #000000);
  color: var(--ft-color-on-primary, #FFFFFF);
}

.ft-admin-wrap :where(.button-primary, button.button-primary, input.button-primary) {
  background: var(--ft-color-primary, #000000);
  border-color: var(--ft-color-primary, #000000);
  color: var(--ft-color-on-primary, #FFFFFF);
  font-weight: 600;
}

.ft-admin-wrap :where(.button-primary, button.button-primary, input.button-primary):hover {
  background: var(--ft-color-primary, #000000);
  border-color: var(--ft-color-primary, #000000);
  color: var(--ft-color-on-primary, #FFFFFF);
  filter: brightness(.90);
}


/* ==========================================================================
   FT Controls Contrast Guard v1 (.415)
   Enforces legible neutral/strong states across remaining legacy FT controls.
   ========================================================================== */
:where(
 .ft-button-secondary,
 .ft-save-neutral-button,
 .ft-wallet-summary-card__button,
 .ft-professional-summary-card__button,
 .ft-client-primary-action,
 .ft-pagination__link,
 .ft-cb-head-action,
 .ft-cb-bulk-action,
 .ft-public-order__button
):not(.button-link-delete):not([data-variant="danger"]) {
  background-color: var(--ft-color-surface, #FFFFFF) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-primary, #000000) !important;
  text-decoration-color: currentColor;
}

:where(
 .ft-button-secondary,
 .ft-save-neutral-button,
 .ft-wallet-summary-card__button,
 .ft-professional-summary-card__button,
 .ft-client-primary-action,
 .ft-pagination__link,
 .ft-cb-head-action,
 .ft-cb-bulk-action,
 .ft-public-order__button
):not(.button-link-delete):not([data-variant="danger"]):is(:hover,:active),
:where(
 .ft-pagination__link.is-active,
 .ft-pagination__link[aria-current="page"],
 .ft-cb-head-action.is-active,
 .ft-cb-bulk-action.is-active
) {
  background-color: var(--ft-color-primary, #000000) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-on-primary, #FFFFFF) !important;
}

:where(
 .ft-button--primary,
 .ft-button-primary,
 .ft-button.is-active,
 .ft-button[aria-pressed="true"],
 .ft-button[aria-current="page"]
):not(.ft-button--danger):not(.ft-button--accent) {
  background-color: var(--ft-color-primary, #000000) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-on-primary, #FFFFFF) !important;
  font-weight: 600;
}

/* WordPress nav-tabs inside FT screens follow the same contrast contract. */
.ft-admin-wrap .nav-tab {
  background: var(--ft-color-surface, #FFFFFF) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-primary, #000000) !important;
}
.ft-admin-wrap .nav-tab:is(:hover,:focus),
.ft-admin-wrap .nav-tab.nav-tab-active {
  background: var(--ft-color-primary, #000000) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-on-primary, #FFFFFF) !important;
}
.ft-admin-wrap .nav-tab.nav-tab-active { font-weight: 600; }

/* Disabled is always neutral and legible. */
:where(
 .ft-button-secondary,.ft-save-neutral-button,.ft-wallet-summary-card__button,
 .ft-professional-summary-card__button,.ft-client-primary-action,.ft-pagination__link,
 .ft-cb-head-action,.ft-cb-bulk-action,.ft-public-order__button
):is(:disabled,[disabled],[aria-disabled="true"]) {
  background-color: var(--ft-color-neutral-surface, #EFF1F5) !important;
  border-color: var(--ft-color-muted, #808080) !important;
  color: var(--ft-color-muted, #808080) !important;
}

/* Contrast guard: every normalized control keeps FT focus visibility. */
:where(
 .ft-button-secondary,.ft-save-neutral-button,.ft-wallet-summary-card__button,
 .ft-professional-summary-card__button,.ft-client-primary-action,.ft-pagination__link,
 .ft-cb-head-action,.ft-cb-bulk-action,.ft-public-order__button,.ft-admin-wrap .nav-tab
):focus-visible {
  outline: 2px solid var(--ft-color-accent, #FFA300) !important;
  outline-offset: 2px;
}

/* FT Settings Tabs — exact component normalization v1 (.416) */
.ft-admin-wrap .ft-settings-tabs.nav-tab-wrapper{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:8px 8px!important;border-bottom:0!important;margin:0 0 20px!important;padding:0!important}
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab{box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;margin:0!important;padding:8px 14px!important;background:var(--ft-color-surface,#FFFFFF)!important;border:1px solid var(--ft-color-primary,#000000)!important;border-radius:var(--ft-radius-control,8px)!important;color:var(--ft-color-primary,#000000)!important;font-size:14px;font-weight:600;line-height:1.25;text-decoration:none!important;box-shadow:none!important}
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab:hover,.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab:active,.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab.nav-tab-active,.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab.is-active,.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab[aria-current="page"]{background:var(--ft-color-primary,#000000)!important;border-color:var(--ft-color-primary,#000000)!important;color:var(--ft-color-on-primary,#FFFFFF)!important}
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab:focus-visible{outline:2px solid var(--ft-color-accent,#FFA300)!important;outline-offset:2px}
@media(max-width:782px){.ft-admin-wrap .ft-settings-tabs.nav-tab-wrapper{gap:8px!important}.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.nav-tab{min-height:44px}}


/* ==========================================================================
   FT Theme Preview + Actions canonical controls v2 (.447)
   ========================================================================== */
.ft-theme-preview-toolbar .ft-theme-preview-device-label,
.ft-theme-preview-toolbar .ft-theme-preview-area-label,
.ft-theme-actions .ft-button {
  background: #FFFFFF !important;
  border: 1px solid var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action, #331C74) !important;
  min-height: 40px;
  border-radius: var(--ft-radius-control, 8px);
  font-weight: 600;
  text-decoration: none !important;
}

/* Action buttons are actions, not persistent selections. */
.ft-theme-actions .ft-button:not(:disabled):not([disabled]):not([aria-disabled="true"]):is(:hover,:active) {
  background: var(--ft-control-action, #331C74) !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action-on, #FFFFFF) !important;
}

/* Preview radio controls remain selected while their radio is checked. */
#ft-theme-preview-device-desktop:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-device-desktop"],
#ft-theme-preview-device-tablet:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-device-tablet"],
#ft-theme-preview-device-mobile:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-device-mobile"],
#ft-theme-preview-area-admin:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-area-admin"],
#ft-theme-preview-area-professional:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-area-professional"],
#ft-theme-preview-area-client:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-area-client"] {
  background: var(--ft-control-action, #331C74) !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action-on, #FFFFFF) !important;
}

.ft-theme-preview-toolbar .ft-theme-preview-group,
.ft-theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ft-theme-preview-toolbar .ft-theme-preview-device-label:focus-visible,
.ft-theme-preview-toolbar .ft-theme-preview-area-label:focus-visible,
.ft-theme-actions .ft-button:focus-visible {
  outline: 2px solid var(--ft-color-accent, #FFA300) !important;
  outline-offset: 2px;
}
.ft-theme-actions .ft-button:is(:disabled,[disabled],[aria-disabled="true"]) {
  background: var(--ft-control-disabled-bg, #EFF1F5) !important;
  border-color: var(--ft-control-disabled-border, #808080) !important;
  color: var(--ft-control-disabled-text, #808080) !important;
  opacity: .72;
}


/* ==========================================================================
   FT Settings Menu — shared FT UI Controls contract v2 (.418)
   Same visual language as Theme Preview/Actions controls.
   ========================================================================== */
.ft-admin-wrap .ft-settings-tabs.nav-tab-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 5px !important;
  row-gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  background: var(--ft-color-surface, #FFFFFF) !important;
  border: 1px solid var(--ft-color-primary, #000000) !important;
  border-radius: var(--ft-radius-control, 8px) !important;
  color: var(--ft-color-primary, #000000) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button:hover,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button:focus-visible {
  background: var(--ft-color-intelligence-soft, #F1EFFF) !important;
  border-color: var(--ft-color-intelligence, #331C74) !important;
  color: var(--ft-color-intelligence, #331C74) !important;
}
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button:active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.nav-tab-active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.is-active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button[aria-current="page"] {
  background: var(--ft-color-intelligence, #331C74) !important;
  border-color: var(--ft-color-intelligence, #331C74) !important;
  color: #FFFFFF !important;
}

.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.nav-tab-active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.is-active {
  font-weight: 600 !important;
}

.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button:focus-visible {
  outline: 2px solid var(--ft-color-accent, #FFA300) !important;
  outline-offset: 2px !important;
}

@media (max-width: 782px) {
  .ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button {
    min-height: 44px !important;
  }
}


/* FT Settings Menu — canonical spacing/state contract v3 (.419) */
.ft-admin-wrap .ft-settings-tabs.nav-tab-wrapper {
  gap: 5px !important;
}
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button {
  background: var(--ft-color-surface, #FFFFFF) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-primary, #000000) !important;
}
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button:hover,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button:active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.nav-tab-active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.is-active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button[aria-current="page"] {
  background: var(--ft-color-primary, #000000) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-on-primary, #FFFFFF) !important;
}


/* FT Settings Menu — persistent selected state v1 (.420) */
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button[aria-current="page"],
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.nav-tab-active,
.ft-admin-wrap .ft-settings-tabs .ft-settings-tab.ft-button.is-active {
  background: var(--ft-color-primary, #000000) !important;
  border-color: var(--ft-color-primary, #000000) !important;
  color: var(--ft-color-on-primary, #FFFFFF) !important;
  font-weight: 600 !important;
}


/* ==========================================================================
   FT UI Controls — Buttons Global v2 (.445)
   Canonical interaction contract:
   Normal  = white / purple border / purple text
   Hover   = purple / purple / white
   Active  = purple / purple / white
   Focus   = FT yellow outline
   Disabled= neutral
   Semantic danger/success/warning/status components remain domain-owned.
   ========================================================================== */
:where(
  .ft-button:not(.ft-button--danger),
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action:not(.ft-action--danger),
  .ft-actions a:not(.ft-action--danger),
  .ft-actions button:not(.ft-action--danger),
  .ft-settings-tab.ft-button,
  .ft-theme-preview-device-label,
  .ft-theme-preview-area-label
):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: var(--ft-color-surface, #FFFFFF) !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action, #331C74) !important;
}

:where(
  .ft-button:not(.ft-button--danger),
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action:not(.ft-action--danger),
  .ft-actions a:not(.ft-action--danger),
  .ft-actions button:not(.ft-action--danger),
  .ft-settings-tab.ft-button,
  .ft-theme-preview-device-label,
  .ft-theme-preview-area-label
):not(:disabled):not([disabled]):not([aria-disabled="true"]):is(:hover,:active),
:where(
  .ft-button.is-active,
  .ft-button[aria-pressed="true"],
  .ft-button[aria-current="page"],
  .ft-button--primary:not(.ft-button--danger),
  .ft-button--accent:not(.ft-button--danger),
  .ft-filter.is-active,
  .ft-filter[aria-selected="true"],
  .ft-filter-button.is-active,
  .ft-filter-button[aria-pressed="true"],
  .ft-tab.is-active,
  .ft-tab[aria-selected="true"],
  .ft-tabs .is-active > a,
  .ft-pagination .current,
  .ft-pagination [aria-current="page"],
  .ft-action.is-active,
  .ft-action[aria-pressed="true"],
  .ft-settings-tab.nav-tab-active,
  .ft-settings-tab.is-active,
  .ft-settings-tab[aria-current="page"]
):not(.ft-button--danger):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: var(--ft-control-action, #331C74) !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action-on, #FFFFFF) !important;
  font-weight: 600;
}

/* Native Theme Preview selected radios keep the same global button language. */
#ft-theme-preview-device-desktop:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-device-desktop"],
#ft-theme-preview-device-tablet:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-device-tablet"],
#ft-theme-preview-device-mobile:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-device-mobile"],
#ft-theme-preview-area-admin:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-area-admin"],
#ft-theme-preview-area-professional:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-area-professional"],
#ft-theme-preview-area-client:checked ~ .ft-card__header + .ft-theme-preview-toolbar label[for="ft-theme-preview-area-client"] {
  background: var(--ft-control-action, #331C74) !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action-on, #FFFFFF) !important;
}

:where(
  .ft-button,
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-tabs a,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action,
  .ft-actions a,
  .ft-actions button,
  .ft-settings-tab,
  .ft-theme-preview-device-label,
  .ft-theme-preview-area-label
):focus-visible {
  outline: 2px solid var(--ft-color-accent, #FFA300) !important;
  outline-offset: 2px !important;
}

:where(
  .ft-button,
  .ft-filter,
  .ft-filter-button,
  .ft-tab,
  .ft-pagination a,
  .ft-pagination button,
  .ft-action,
  .ft-settings-tab
):is(:disabled,[disabled],[aria-disabled="true"]) {
  background: var(--ft-control-disabled-bg, #EFF1F5) !important;
  border-color: var(--ft-control-disabled-border, #808080) !important;
  color: var(--ft-control-disabled-text, #808080) !important;
}

/* Settings wrapping: horizontal 5px, vertical 8px. */
.ft-admin-wrap .ft-settings-tabs.nav-tab-wrapper {
  column-gap: 5px !important;
  row-gap: 8px !important;
}


/* .446 — Settings persistent navigation state.
 * State comes from PHP ($tab), exposed by is-active + aria-current + data-ft-state.
 */
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button {
  background: #FFFFFF !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action, #331C74) !important;
}
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button:hover,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button:focus-visible,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button:active,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button.nav-tab-active,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button.is-active,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button[aria-current="page"],
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button[data-ft-state="active"] {
  background: var(--ft-control-action, #331C74) !important;
  border-color: var(--ft-control-action, #331C74) !important;
  color: var(--ft-control-action-on, #FFFFFF) !important;
}
.ft-settings-page .ft-settings-tabs {
  column-gap: 5px !important;
  row-gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* .447 — Final authority for Configurações + Theme Engine action buttons. */
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button:not([data-ft-state="active"]) {
  background: #FFFFFF !important;
  border-color: #331C74 !important;
  color: #331C74 !important;
}
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button:not([data-ft-state="active"]):hover,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button[data-ft-state="active"],
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button.nav-tab-active,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-button[aria-current="page"] {
  background: #331C74 !important;
  border-color: #331C74 !important;
  color: #FFFFFF !important;
}
.ft-theme-personalization .ft-theme-actions .ft-button:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: #FFFFFF !important;
  border-color: #331C74 !important;
  color: #331C74 !important;
}
.ft-theme-personalization .ft-theme-actions .ft-button:not(:disabled):not([disabled]):not([aria-disabled="true"]):is(:hover,:active) {
  background: #331C74 !important;
  border-color: #331C74 !important;
  color: #FFFFFF !important;
}

/* .448 — Settings selected-state hard contract.
 * The server owns persistence through ft-settings-tab--current.
 */
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-settings-tab--current,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-settings-tab--current:hover,
.ft-settings-page .ft-settings-tabs .ft-settings-tab.ft-settings-tab--current:focus {
  background: #331C74 !important;
  border-color: #331C74 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* .449 — Theme Engine action/demo exclusive selected states.
 * Does not alter the homologated Configurações navigation menu.
 */
.ft-theme-personalization .ft-theme-actions .ft-theme-action-choice.is-active,
.ft-theme-personalization .ft-theme-actions .ft-theme-action-choice[aria-pressed="true"],
.ft-theme-preview-actions .ft-preview-choice.is-active,
.ft-theme-preview-actions .ft-preview-choice[aria-pressed="true"] {
  background: #331C74 !important;
  border-color: #331C74 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.ft-theme-preview-actions .ft-preview-choice:not(.is-active):not([aria-pressed="true"]) {
  background: #FFFFFF !important;
  border-color: #331C74 !important;
  color: #331C74 !important;
}
.ft-theme-preview-actions .ft-preview-choice:not(.is-active):not([aria-pressed="true"]):hover {
  background: #331C74 !important;
  border-color: #331C74 !important;
  color: #FFFFFF !important;
}