/* TokenToolHub Dark Mode
 * CSS-first palette with one parser-time attribute and no continuous DOM processing.
 */

:root {
  --tthdm-page: #071427;
  --tthdm-page-alt: #0a1930;
  --tthdm-surface: #0d1b31;
  --tthdm-surface-alt: #13233d;
  --tthdm-text: #f4fbff;
  --tthdm-muted: #afc0d3;
  --tthdm-border: #1b4054;
  --tthdm-accent: #2fc9b2;
  --tthdm-accent-strong: #0a8f7e;
  --tthdm-shadow: 0 22px 65px rgba(0, 0, 0, 0.28);
  --tthdm-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.2);
}

html[data-tth-mode="dark"] {
  color-scheme: dark;
  --tth-bg: var(--tthdm-page);
  --tth-bg2: var(--tthdm-page-alt);
  --tth-card: var(--tthdm-surface);
  --tth-card2: var(--tthdm-surface-alt);
  --tth-border: color-mix(in srgb, var(--tthdm-border) 80%, transparent);
  --tth-text: var(--tthdm-text);
  --tth-muted: var(--tthdm-muted);
  --tth-faint: color-mix(in srgb, var(--tthdm-muted) 76%, transparent);
  --tth-teal: var(--tthdm-accent);
  --tth-shadow: var(--tthdm-shadow);
}

html[data-tth-mode="dark"],
html[data-tth-mode="dark"] body,
html[data-tth-mode="dark"] #page,
html[data-tth-mode="dark"] .site,
html[data-tth-mode="dark"] #content,
html[data-tth-mode="dark"] .site-content,
html[data-tth-mode="dark"] #primary,
html[data-tth-mode="dark"] #main,
html[data-tth-mode="dark"] .site-main {
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  color: var(--tthdm-text);
}

html[data-tth-mode="dark"] body {
  min-height: 100%;
  color: var(--tthdm-text);
}

html[data-tth-mode="dark"] :where(
  #content > .ast-container,
  .site-content > .ast-container,
  .content-area,
  .entry-content,
  [data-elementor-type="wp-page"],
  [data-elementor-type="single-post"],
  .elementor-location-single,
  .elementor-section-wrap
) {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-tth-mode="dark"] :where(
  .entry-content,
  .wp-block-post-content,
  .elementor-widget-text-editor,
  .elementor-widget-theme-post-content,
  .woocommerce,
  #peepso-wrap
) {
  color: var(--tthdm-text);
}

html[data-tth-mode="dark"] :where(
  .entry-content p,
  .entry-content li,
  .entry-content dd,
  .entry-content figcaption,
  .wp-block-post-content p,
  .wp-block-post-content li,
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li
) {
  color: var(--tthdm-muted);
}

html[data-tth-mode="dark"] :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .entry-title,
  .page-title,
  .widget-title
) {
  color: var(--tthdm-text);
}

html[data-tth-mode="dark"] :where(a:not(.button):not(.wp-element-button):not(.elementor-button)) {
  text-decoration-color: color-mix(in srgb, var(--tthdm-accent) 55%, transparent);
}

html[data-tth-mode="dark"] :where(
  .entry-content a,
  .wp-block-post-content a,
  .elementor-widget-text-editor a
) {
  color: var(--tthdm-accent);
}

/* Astra site header */
html[data-tth-mode="dark"] :where(
  #masthead,
  .site-header,
  #ast-desktop-header,
  #ast-mobile-header,
  .ast-main-header-wrap,
  .main-header-bar-wrap,
  .main-header-bar,
  .ast-primary-header-bar,
  .ast-above-header-bar,
  .ast-below-header-bar,
  .ast-mobile-header-wrap
) {
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  border-bottom-color: color-mix(in srgb, var(--tthdm-accent) 15%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

html[data-tth-mode="dark"] :where(
  #masthead .ast-builder-grid-row-container,
  #masthead .ast-builder-grid-row-container-inner,
  #masthead .ast-builder-grid-row,
  #masthead .ast-container,
  #masthead .site-primary-header-wrap,
  #masthead .site-header-section,
  #ast-desktop-header .ast-builder-grid-row-container,
  #ast-desktop-header .ast-builder-grid-row,
  #ast-desktop-header .ast-container,
  #ast-mobile-header .ast-builder-grid-row-container,
  #ast-mobile-header .ast-builder-grid-row,
  #ast-mobile-header .ast-container
) {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-tth-mode="dark"] :where(
  #masthead .menu-link,
  #masthead .main-header-menu a,
  #masthead .site-title,
  #masthead .site-title a,
  #masthead .ast-site-title-wrap a,
  #masthead .custom-logo-link,
  #masthead .tth-desktop-brand,
  #ast-desktop-header .menu-link,
  #ast-desktop-header .main-header-menu a
) {
  color: var(--tthdm-text) !important;
  -webkit-text-fill-color: var(--tthdm-text) !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-tth-mode="dark"] :where(
  #masthead .menu-item:hover > .menu-link,
  #masthead .current-menu-item > .menu-link,
  #masthead .current_page_item > .menu-link,
  #ast-desktop-header .menu-item:hover > .menu-link
) {
  color: var(--tthdm-accent) !important;
  -webkit-text-fill-color: var(--tthdm-accent) !important;
}

html[data-tth-mode="dark"] :where(
  .ast-mobile-menu-trigger,
  .ast-mobile-menu-trigger *,
  .menu-toggle,
  .menu-toggle *,
  .ast-mobile-svg,
  .ast-icon svg
) {
  color: var(--tthdm-accent) !important;
  fill: var(--tthdm-accent) !important;
  stroke: var(--tthdm-accent) !important;
}

/* Desktop dropdowns */
@media (min-width: 922px) {
  html[data-tth-mode="dark"] #ast-desktop-header .main-header-menu .sub-menu {
    min-width: 290px;
    padding: 10px !important;
    border: 1px solid color-mix(in srgb, var(--tthdm-accent) 22%, transparent) !important;
    border-radius: 18px !important;
    background-color: var(--tthdm-surface) !important;
    background-image: linear-gradient(155deg, var(--tthdm-surface), color-mix(in srgb, var(--tthdm-page) 92%, #000)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html[data-tth-mode="dark"] #ast-desktop-header .main-header-menu .sub-menu > .menu-item {
    border: 0 !important;
    background: transparent !important;
  }

  html[data-tth-mode="dark"] #ast-desktop-header .main-header-menu .sub-menu :where(.menu-link, a) {
    min-height: 46px;
    display: flex !important;
    align-items: center;
    padding: 11px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--tthdm-text) !important;
    -webkit-text-fill-color: var(--tthdm-text) !important;
    font-weight: 800;
    line-height: 1.35;
    white-space: normal !important;
  }

  html[data-tth-mode="dark"] #ast-desktop-header .main-header-menu .sub-menu :where(.menu-link, a):hover {
    border-color: color-mix(in srgb, var(--tthdm-accent) 22%, transparent) !important;
    background: color-mix(in srgb, var(--tthdm-accent) 10%, transparent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Mobile navigation drawer */
html[data-tth-mode="dark"] :where(
  .ast-mobile-popup-drawer,
  .ast-mobile-popup-drawer.active,
  .ast-mobile-popup-drawer .ast-mobile-popup-inner,
  .ast-mobile-popup-drawer .ast-mobile-popup-header,
  .ast-mobile-popup-drawer .ast-mobile-popup-content,
  .ast-mobile-popup-drawer .ast-builder-menu-mobile,
  .ast-mobile-popup-drawer .main-header-menu,
  .ast-mobile-popup-drawer .sub-menu
) {
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page), var(--tthdm-page-alt)) !important;
  color: var(--tthdm-text) !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-tth-mode="dark"] .ast-mobile-popup-drawer .main-header-menu > .menu-item {
  border-color: color-mix(in srgb, var(--tthdm-accent) 15%, transparent) !important;
  background: color-mix(in srgb, var(--tthdm-surface) 94%, transparent) !important;
}

html[data-tth-mode="dark"] .ast-mobile-popup-drawer :where(
  .menu-link,
  .main-header-menu a,
  .menu-item,
  .menu-item span,
  .site-title,
  .site-title a,
  .site-description
) {
  color: var(--tthdm-text) !important;
  -webkit-text-fill-color: var(--tthdm-text) !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-tth-mode="dark"] .ast-mobile-popup-drawer :where(
  .ast-menu-toggle,
  .ast-menu-toggle *,
  .menu-toggle-close,
  .menu-toggle-close *,
  .ast-mobile-popup-close,
  .ast-mobile-popup-close *
) {
  color: var(--tthdm-accent) !important;
  -webkit-text-fill-color: var(--tthdm-accent) !important;
  fill: var(--tthdm-accent) !important;
  stroke: var(--tthdm-accent) !important;
  border-color: color-mix(in srgb, var(--tthdm-accent) 28%, transparent) !important;
}

/* WordPress and Elementor surfaces */
html[data-tth-mode="dark"] :where(
  .ast-separate-container .ast-article-single,
  .ast-separate-container .ast-article-post,
  .wp-block-group.has-background,
  .wp-block-cover__inner-container,
  .wp-block-media-text,
  .wp-block-table,
  .wp-block-quote,
  .wp-block-pullquote,
  .wp-block-code,
  pre,
  code,
  kbd
) {
  border-color: color-mix(in srgb, var(--tthdm-border) 78%, transparent) !important;
  background-color: var(--tthdm-surface) !important;
  color: var(--tthdm-text) !important;
}

html[data-tth-mode="dark"] :where(hr, .wp-block-separator) {
  border-color: color-mix(in srgb, var(--tthdm-border) 75%, transparent) !important;
}

html[data-tth-mode="dark"] :where(table, th, td) {
  border-color: color-mix(in srgb, var(--tthdm-border) 75%, transparent) !important;
}

html[data-tth-mode="dark"] :where(th) {
  background-color: var(--tthdm-surface-alt) !important;
  color: var(--tthdm-text) !important;
}

html[data-tth-mode="dark"] :where(td) {
  background-color: color-mix(in srgb, var(--tthdm-surface) 94%, transparent) !important;
  color: var(--tthdm-muted) !important;
}

/* Forms and interactive controls */
html[data-tth-mode="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select
) {
  border-color: color-mix(in srgb, var(--tthdm-border) 82%, transparent) !important;
  background-color: var(--tthdm-surface) !important;
  color: var(--tthdm-text) !important;
  caret-color: var(--tthdm-accent);
  box-shadow: none;
}

html[data-tth-mode="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):focus,
  textarea:focus,
  select:focus
) {
  border-color: var(--tthdm-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tthdm-accent) 18%, transparent) !important;
  outline: none !important;
}

html[data-tth-mode="dark"] :where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--tthdm-muted) 78%, transparent) !important;
  opacity: 1;
}

html[data-tth-mode="dark"] :where(
  button,
  .button,
  .wp-element-button,
  .elementor-button,
  input[type="submit"],
  input[type="button"]
):not(.tthdm-toggle) {
  border-color: color-mix(in srgb, var(--tthdm-accent-strong) 85%, #000) !important;
}

/* Single-post TokenToolHub article palette */
html[data-tth-mode="dark"] body.single-post,
html[data-tth-mode="dark"] body.single-post #page,
html[data-tth-mode="dark"] body.single-post .site,
html[data-tth-mode="dark"] body.single-post #content,
html[data-tth-mode="dark"] body.single-post .site-content,
html[data-tth-mode="dark"] body.single-post #primary,
html[data-tth-mode="dark"] body.single-post #main,
html[data-tth-mode="dark"] body.single-post .site-main {
  background-color: #07112d !important;
  background-image: none !important;
}

html[data-tth-mode="dark"] body.single-post .tth-scheme {
  --tth-bg: #07112d !important;
  --tth-bg2: var(--tthdm-page-alt) !important;
  --tth-card: var(--tthdm-surface) !important;
  --tth-card2: var(--tthdm-surface-alt) !important;
  --tth-border: color-mix(in srgb, var(--tthdm-border) 82%, transparent) !important;
  --tth-text: var(--tthdm-text) !important;
  --tth-muted: var(--tthdm-muted) !important;
  --tth-faint: color-mix(in srgb, var(--tthdm-muted) 76%, transparent) !important;
  --tth-teal: var(--tthdm-accent) !important;
  --tth-shadow: var(--tthdm-shadow) !important;
  color-scheme: dark !important;
}

/* WooCommerce and checkout */
html[data-tth-mode="dark"] :where(
  .woocommerce form.checkout,
  .woocommerce-checkout-review-order,
  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-cart-form,
  .cart_totals,
  .woocommerce-info,
  .woocommerce-message,
  .woocommerce-error
) {
  border-color: color-mix(in srgb, var(--tthdm-border) 82%, transparent) !important;
  background-color: var(--tthdm-surface) !important;
  color: var(--tthdm-text) !important;
}

html[data-tth-mode="dark"] :where(
  .woocommerce label,
  .woocommerce table,
  .woocommerce table td,
  .woocommerce table th,
  .woocommerce .shop_table,
  .woocommerce .order-total,
  .woocommerce .woocommerce-privacy-policy-text
) {
  color: var(--tthdm-muted) !important;
}

/* PeepSo base compatibility. Existing TokenToolHub community CSS can remain more specific. */
html[data-tth-mode="dark"] #peepso-wrap {
  --ps-color-text: var(--tthdm-text);
  --ps-color-text-light: var(--tthdm-muted);
  --ps-color-primary: var(--tthdm-accent);
  color: var(--tthdm-text);
}

html[data-tth-mode="dark"] #peepso-wrap :where(
  .ps-post,
  .ps-postbox,
  .ps-stream,
  .ps-comment,
  .ps-dialog,
  .ps-modal,
  .ps-dropdown,
  .ps-popover,
  .ps-tabs,
  .ps-widget--profile
) {
  border-color: color-mix(in srgb, var(--tthdm-border) 78%, transparent) !important;
  background-color: var(--tthdm-surface) !important;
  color: var(--tthdm-text) !important;
}

html[data-tth-mode="dark"] #peepso-wrap :where(
  .ps-post__title,
  .ps-post__author,
  .ps-comment__author,
  .ps-text--title,
  .ps-tabs__item
) {
  color: var(--tthdm-text) !important;
}

html[data-tth-mode="dark"] #peepso-wrap :where(
  .ps-post__info,
  .ps-post__meta,
  .ps-comment__meta,
  .ps-text--muted,
  .ps-post__content
) {
  color: var(--tthdm-muted) !important;
}

/* Existing TokenToolHub app surfaces receive compatible variables without forced layout changes. */
html[data-tth-mode="dark"] :where(
  .tthmh,
  #tth-home-v8,
  .tth-app,
  .tth-tool-shell,
  .tth-dashboard,
  .tth-workspace
) {
  color-scheme: dark;
}

/* Floating premium toggle */
.tthdm-toggle {
  position: fixed;
  z-index: 2147482000;
  bottom: max(22px, calc(14px + env(safe-area-inset-bottom)));
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(7, 20, 45, 0.14);
  border-radius: 17px;
  color: #07142d;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 45px rgba(7, 20, 45, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font: 800 12px/1.1 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tthdm-toggle-bottom-right {
  right: max(22px, calc(14px + env(safe-area-inset-right)));
}

.tthdm-toggle-bottom-left {
  left: max(22px, calc(14px + env(safe-area-inset-left)));
}

html[data-tth-mode="dark"] .tthdm-toggle {
  border-color: color-mix(in srgb, var(--tthdm-accent) 24%, transparent);
  color: var(--tthdm-text);
  background: color-mix(in srgb, var(--tthdm-surface-alt) 92%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.tthdm-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tthdm-accent) 45%, transparent);
}

.tthdm-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tthdm-accent) 34%, transparent);
  outline-offset: 3px;
}

.tthdm-toggle-track {
  position: relative;
  width: 58px;
  height: 34px;
  flex: 0 0 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 7px;
  border: 1px solid rgba(7, 20, 45, 0.11);
  border-radius: 999px;
  background: #e9f0f6;
  overflow: hidden;
}

html[data-tth-mode="dark"] .tthdm-toggle-track {
  border-color: color-mix(in srgb, var(--tthdm-accent) 18%, transparent);
  background: color-mix(in srgb, var(--tthdm-page) 80%, #000);
}

.tthdm-toggle-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.tthdm-toggle-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tthdm-toggle-icon-sun {
  color: #9b6a04;
}

.tthdm-toggle-icon-moon {
  color: #8da1b9;
}

html[data-tth-mode="dark"] .tthdm-toggle-icon-sun {
  color: #71849a;
}

html[data-tth-mode="dark"] .tthdm-toggle-icon-moon {
  color: #b9fff5;
}

.tthdm-toggle-thumb {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(7, 20, 45, 0.18);
  transform: translateX(0);
}

html[data-tth-mode="dark"] .tthdm-toggle-thumb {
  background: linear-gradient(135deg, var(--tthdm-accent-strong), var(--tthdm-accent));
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  transform: translateX(24px);
}

.tthdm-toggle-label {
  white-space: nowrap;
}

.tthdm-toggle-style-icon {
  width: 48px;
  height: 48px;
  justify-content: center;
  padding: 6px;
  border-radius: 16px;
}

.tthdm-toggle-style-icon .tthdm-toggle-track {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.tthdm-toggle-style-icon .tthdm-toggle-icon-sun,
.tthdm-toggle-style-icon .tthdm-toggle-icon-moon {
  position: absolute;
}

.tthdm-toggle-style-icon .tthdm-toggle-icon-moon,
html[data-tth-mode="dark"] .tthdm-toggle-style-icon .tthdm-toggle-icon-sun {
  opacity: 0;
  transform: scale(0.65) rotate(-20deg);
}

html[data-tth-mode="dark"] .tthdm-toggle-style-icon .tthdm-toggle-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.tthdm-toggle-style-icon .tthdm-toggle-thumb,
.tthdm-toggle-style-icon .tthdm-toggle-label {
  display: none;
}

html.tthdm-transitions :where(
  body,
  #page,
  #content,
  .site-content,
  #masthead,
  .site-header,
  .ast-mobile-popup-drawer,
  .tthdm-toggle,
  .tthdm-toggle-track,
  .tthdm-toggle-thumb,
  .tthdm-toggle-icon
) {
  transition:
    background-color 0.2s ease,
    background-image 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease !important;
}

@media (max-width: 921px) {
  .tthdm-toggle {
    bottom: max(104px, calc(88px + env(safe-area-inset-bottom)));
  }

  .tthdm-toggle-bottom-right {
    right: max(12px, calc(8px + env(safe-area-inset-right)));
  }

  .tthdm-toggle-bottom-left {
    left: max(12px, calc(8px + env(safe-area-inset-left)));
  }

  .tthdm-toggle-style-icon-label {
    min-height: 44px;
    padding: 5px 8px 5px 6px;
    font-size: 11px;
  }

  .tthdm-toggle-style-icon-label .tthdm-toggle-track {
    width: 52px;
    height: 30px;
    flex-basis: 52px;
  }

  .tthdm-toggle-style-icon-label .tthdm-toggle-thumb {
    width: 22px;
    height: 22px;
  }

  html[data-tth-mode="dark"] .tthdm-toggle-style-icon-label .tthdm-toggle-thumb {
    transform: translateX(22px);
  }
}

@media (max-width: 480px) {
  .tthdm-toggle-style-icon-label .tthdm-toggle-label {
    display: none;
  }

  .tthdm-toggle-style-icon-label {
    width: 48px;
    height: 48px;
    padding: 6px;
  }

  .tthdm-toggle-style-icon-label .tthdm-toggle-track {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tthdm-toggle-style-icon-label .tthdm-toggle-icon-sun,
  .tthdm-toggle-style-icon-label .tthdm-toggle-icon-moon {
    position: absolute;
  }

  .tthdm-toggle-style-icon-label .tthdm-toggle-icon-moon,
  html[data-tth-mode="dark"] .tthdm-toggle-style-icon-label .tthdm-toggle-icon-sun {
    opacity: 0;
  }

  html[data-tth-mode="dark"] .tthdm-toggle-style-icon-label .tthdm-toggle-icon-moon {
    opacity: 1;
  }

  .tthdm-toggle-style-icon-label .tthdm-toggle-thumb {
    display: none;
  }
}

@media (max-width: 767px) {
  .tthdm-toggle-hide-mobile {
    display: none !important;
  }
}

@media (hover: none) {
  .tthdm-toggle:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.tthdm-transitions *,
  html.tthdm-transitions *::before,
  html.tthdm-transitions *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
 * TokenToolHub Dark Mode v1.1.0 precision layer
 * Strong Astra header ownership, Elementor HTML-widget canvas
 * alignment, and component theme-state compatibility.
 * ======================================================= */

/* The previous :where() header rules intentionally had very low specificity.
 * These selectors are explicit so Astra and Elementor inline rules cannot keep
 * the header white while the rest of the page is dark.
 */
html[data-tth-mode="dark"] body #masthead,
html[data-tth-mode="dark"] body header.site-header,
html[data-tth-mode="dark"] body .site-header,
html[data-tth-mode="dark"] body #ast-desktop-header,
html[data-tth-mode="dark"] body #ast-mobile-header,
html[data-tth-mode="dark"] body .ast-main-header-wrap,
html[data-tth-mode="dark"] body .main-header-bar-wrap,
html[data-tth-mode="dark"] body .main-header-bar,
html[data-tth-mode="dark"] body .ast-primary-header-bar,
html[data-tth-mode="dark"] body .ast-primary-header.main-header-bar,
html[data-tth-mode="dark"] body .ast-above-header-bar,
html[data-tth-mode="dark"] body .ast-below-header-bar,
html[data-tth-mode="dark"] body .ast-mobile-header-wrap,
html[data-tth-mode="dark"] body.ast-header-break-point .main-header-bar {
  background: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  border-bottom: 1px solid rgba(47, 201, 178, 0.14) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  color-scheme: dark !important;
}

html[data-tth-mode="dark"] body #masthead .ast-builder-grid-row-container,
html[data-tth-mode="dark"] body #masthead .ast-builder-grid-row-container-inner,
html[data-tth-mode="dark"] body #masthead .ast-builder-grid-row,
html[data-tth-mode="dark"] body #masthead .ast-container,
html[data-tth-mode="dark"] body #masthead .site-primary-header-wrap,
html[data-tth-mode="dark"] body #masthead .site-header-section,
html[data-tth-mode="dark"] body #ast-desktop-header .ast-builder-grid-row-container,
html[data-tth-mode="dark"] body #ast-desktop-header .ast-builder-grid-row-container-inner,
html[data-tth-mode="dark"] body #ast-desktop-header .ast-builder-grid-row,
html[data-tth-mode="dark"] body #ast-desktop-header .ast-container,
html[data-tth-mode="dark"] body #ast-desktop-header .site-primary-header-wrap,
html[data-tth-mode="dark"] body #ast-desktop-header .site-header-section,
html[data-tth-mode="dark"] body #ast-mobile-header .ast-builder-grid-row-container,
html[data-tth-mode="dark"] body #ast-mobile-header .ast-builder-grid-row-container-inner,
html[data-tth-mode="dark"] body #ast-mobile-header .ast-builder-grid-row,
html[data-tth-mode="dark"] body #ast-mobile-header .ast-container,
html[data-tth-mode="dark"] body #ast-mobile-header .site-primary-header-wrap,
html[data-tth-mode="dark"] body #ast-mobile-header .site-header-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-tth-mode="dark"] body #masthead .main-header-menu > .menu-item > .menu-link,
html[data-tth-mode="dark"] body #masthead .main-header-menu > .menu-item > a,
html[data-tth-mode="dark"] body #ast-desktop-header .main-header-menu > .menu-item > .menu-link,
html[data-tth-mode="dark"] body #ast-desktop-header .main-header-menu > .menu-item > a,
html[data-tth-mode="dark"] body #masthead .site-title,
html[data-tth-mode="dark"] body #masthead .site-title a,
html[data-tth-mode="dark"] body #masthead .ast-site-title-wrap a,
html[data-tth-mode="dark"] body #masthead .tth-desktop-brand {
  color: var(--tthdm-text) !important;
  -webkit-text-fill-color: var(--tthdm-text) !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-tth-mode="dark"] body #masthead .main-header-menu > .menu-item:hover > .menu-link,
html[data-tth-mode="dark"] body #masthead .main-header-menu > .current-menu-item > .menu-link,
html[data-tth-mode="dark"] body #masthead .main-header-menu > .current_page_item > .menu-link,
html[data-tth-mode="dark"] body #ast-desktop-header .main-header-menu > .menu-item:hover > .menu-link {
  color: var(--tthdm-accent) !important;
  -webkit-text-fill-color: var(--tthdm-accent) !important;
}

@media (min-width: 922px) {
  html[data-tth-mode="dark"] body #ast-desktop-header .main-header-menu .sub-menu,
  html[data-tth-mode="dark"] body #masthead #ast-desktop-header .main-header-menu .sub-menu {
    background: linear-gradient(155deg, var(--tthdm-surface) 0%, var(--tthdm-page) 100%) !important;
    background-color: var(--tthdm-surface) !important;
    background-image: linear-gradient(155deg, var(--tthdm-surface) 0%, var(--tthdm-page) 100%) !important;
    border: 1px solid rgba(47, 201, 178, 0.23) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44) !important;
  }
}

/* Full-page Elementor HTML interfaces often live inside light Elementor
 * containers. The controller marks only the structural ancestor chain of a
 * TokenToolHub HTML root, leaving cards and controls inside the widget alone.
 */
html[data-tth-mode="dark"] body .tthdm-canvas-chain {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}

html[data-tth-mode="dark"] body .tthdm-canvas-chain.elementor-element::before,
html[data-tth-mode="dark"] body .tthdm-canvas-chain.e-con::before,
html[data-tth-mode="dark"] body .tthdm-canvas-chain > .elementor-background-overlay {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* CSS-native first-paint fallback before the one-time structural marking runs. */
@supports selector(body:has(.elementor-widget-html)) {
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) #content,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .site-content,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .content-area,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) #primary,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) #main,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .site-main,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) article,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .entry-content,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor-section,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor-container,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor-column,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor-widget-wrap,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor-widget-html,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .elementor-widget-html > .elementor-widget-container,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .e-con,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="tth-"]) .e-con-inner,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) #content,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .site-content,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .content-area,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) #primary,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) #main,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .site-main,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) article,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .entry-content,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor-section,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor-container,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor-column,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor-widget-wrap,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor-widget-html,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .elementor-widget-html > .elementor-widget-container,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .e-con,
  html[data-tth-mode="dark"] body:has(.elementor-widget-html [id^="ttha-"]) .e-con-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

/* Reusable palette bridge for TokenToolHub HTML-widget roots. */
html[data-tth-mode="dark"] .elementor-widget-html > .elementor-widget-container > [id^="tth-"],
html[data-tth-mode="dark"] .elementor-widget-html > .elementor-widget-container > [id^="ttha-"],
html[data-tth-mode="dark"] .tth-scheme,
html[data-tth-mode="dark"] .tthmh,
html[data-tth-mode="dark"] .tth-app,
html[data-tth-mode="dark"] .tth-tool-shell,
html[data-tth-mode="dark"] .tth-dashboard,
html[data-tth-mode="dark"] .tth-workspace {
  --tth-bg: var(--tthdm-page);
  --tth-bg2: var(--tthdm-page-alt);
  --tth-card: var(--tthdm-surface);
  --tth-card2: var(--tthdm-surface-alt);
  --tth-text: var(--tthdm-text);
  --tth-muted: var(--tthdm-muted);
  --tth-teal: var(--tthdm-accent);
  color-scheme: dark !important;
}

/* Keep the fixed control interactive above TokenToolHub bottom navigation and
 * utility buttons without allowing other overlays to cover it.
 */
.tthdm-toggle {
  pointer-events: auto !important;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Device-mode no-JavaScript fallback. The parser-time controller normally
 * resolves system to light or dark before body markup is parsed.
 */
html[data-tth-mode="system"],
html[data-tth-mode="system"] body {
  background-color: #ffffff !important;
  color-scheme: light !important;
}

@media (prefers-color-scheme: dark) {
  html[data-tth-mode="system"],
  html[data-tth-mode="system"] body {
    background-color: var(--tthdm-page) !important;
    color-scheme: dark !important;
  }
}

/* Elementor Theme Builder header compatibility when a future header template
 * replaces Astra's native masthead.
 */
html[data-tth-mode="dark"] body .elementor-location-header,
html[data-tth-mode="dark"] body header[role="banner"].elementor-location-header,
html[data-tth-mode="dark"] body .elementor-location-header > .elementor {
  background: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  color: var(--tthdm-text) !important;
}

html[data-tth-mode="dark"] body .elementor-location-header :is(a, .elementor-item, .elementor-heading-title) {
  color: var(--tthdm-text) !important;
  -webkit-text-fill-color: var(--tthdm-text) !important;
}


/* =========================================================
 * TokenToolHub Dark Mode v1.2.0 synchronization layer
 * One mode state controls the shell, Astra header and all
 * TokenToolHub HTML-widget roots. Class names deliberately
 * avoid the generic "dark-mode" phrase used by older pages.
 * ======================================================= */

html[data-tth-mode="light"],
html[data-tth-mode="light"] body,
html[data-tth-mode="light"] #page,
html[data-tth-mode="light"] .site,
html[data-tth-mode="light"] #content,
html[data-tth-mode="light"] .site-content,
html[data-tth-mode="light"] #primary,
html[data-tth-mode="light"] #main,
html[data-tth-mode="light"] .site-main {
  background-color: #ffffff !important;
  background-image: none !important;
  color-scheme: light !important;
}

html[data-tth-mode="light"] .tthdm-canvas-chain {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color-scheme: light !important;
}

html[data-tth-mode="light"] :is(
  #tth-home-v8,
  #ttha-advanced-v9,
  #tth-member-hub,
  #tth-member-community-feed,
  .tth-scheme,
  .tthmh,
  .tth-app,
  .tth-tool-shell,
  .tth-dashboard,
  .tth-workspace
) {
  --tth-bg: #f5f8fc;
  --tth-bg2: #edf3f8;
  --tth-card: #ffffff;
  --tth-card2: #f3f7fb;
  --tth-text: #142033;
  --tth-muted: #44546a;
  --tth-teal: #138f83;
  color-scheme: light !important;
}

/* Header ownership in both modes. These rules are intentionally
 * explicit because Astra, Additional CSS and builder rules often
 * declare header backgrounds with !important.
 */
html[data-tth-mode="light"] body :is(
  #masthead,
  header.site-header,
  .site-header,
  #ast-desktop-header,
  #ast-mobile-header,
  .ast-main-header-wrap,
  .main-header-bar-wrap,
  .main-header-bar,
  .ast-primary-header-bar,
  .ast-primary-header.main-header-bar,
  .ast-above-header-bar,
  .ast-below-header-bar,
  .ast-mobile-header-wrap,
  .ast-builder-grid-row-container,
  .ast-builder-grid-row-container-inner,
  .ast-builder-grid-row,
  .site-primary-header-wrap,
  .site-header-section
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color-scheme: light !important;
}

html[data-tth-mode="dark"] body :is(
  #masthead,
  header.site-header,
  .site-header,
  #ast-desktop-header,
  #ast-mobile-header,
  .ast-main-header-wrap,
  .main-header-bar-wrap,
  .main-header-bar,
  .ast-primary-header-bar,
  .ast-primary-header.main-header-bar,
  .ast-above-header-bar,
  .ast-below-header-bar,
  .ast-mobile-header-wrap,
  .ast-builder-grid-row-container,
  .ast-builder-grid-row-container-inner,
  .ast-builder-grid-row,
  .site-primary-header-wrap,
  .site-header-section
) {
  background: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  color-scheme: dark !important;
}

html[data-tth-mode="light"] body :is(#masthead,#ast-desktop-header,#ast-mobile-header,.site-header)
:is(.menu-link,a,.site-title,.site-title a,.ast-site-title-wrap a,.tth-desktop-brand,.menu-item span) {
  color: #07142d !important;
  -webkit-text-fill-color: #07142d !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-tth-mode="dark"] body :is(#masthead,#ast-desktop-header,#ast-mobile-header,.site-header)
:is(.menu-link,a,.site-title,.site-title a,.ast-site-title-wrap a,.tth-desktop-brand,.menu-item span) {
  color: var(--tthdm-text) !important;
  -webkit-text-fill-color: var(--tthdm-text) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-tth-mode] body :is(#masthead,#ast-desktop-header,#ast-mobile-header,.site-header)
:is(.menu-item:hover > .menu-link,.current-menu-item > .menu-link,.current_page_item > .menu-link) {
  color: var(--tthdm-accent) !important;
  -webkit-text-fill-color: var(--tthdm-accent) !important;
}

html[data-tth-mode="light"] body :is(#masthead,#ast-desktop-header,#ast-mobile-header,.site-header) {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html[data-tth-mode="dark"] body :is(#masthead,#ast-desktop-header,#ast-mobile-header,.site-header) {
  border-bottom: 1px solid rgba(47, 201, 178, 0.14) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
}


/* v1.2.1: parser-consistent header ownership and mobile brand visibility. */
html[data-tth-mode="dark"] body :is(
  #masthead, header.site-header, .site-header, #ast-desktop-header, #ast-mobile-header,
  .elementor-location-header, [data-elementor-type="header"], .tth-site-header,
  .tth-global-header, .tth-header-shell
) {
  background: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
  background-color: var(--tthdm-page) !important;
  background-image: linear-gradient(180deg, var(--tthdm-page) 0%, var(--tthdm-page-alt) 100%) !important;
}

html[data-tth-mode="light"] body :is(
  #masthead, header.site-header, .site-header, #ast-desktop-header, #ast-mobile-header,
  .elementor-location-header, [data-elementor-type="header"], .tth-site-header,
  .tth-global-header, .tth-header-shell
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

html[data-tth-mode="dark"] body :is(#ast-mobile-header, #masthead, .site-header, .elementor-location-header, [data-elementor-type="header"])
:is(.site-title, .site-title a, .ast-site-title-wrap, .ast-site-title-wrap a, .site-branding, .site-branding a, .ast-site-identity, .ast-site-identity a, .custom-logo-link, .tth-desktop-brand, .tth-mobile-brand) {
  color: var(--tthdm-text) !important;
  -webkit-text-fill-color: var(--tthdm-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-tth-mode="light"] body :is(#ast-mobile-header, #masthead, .site-header, .elementor-location-header, [data-elementor-type="header"])
:is(.site-title, .site-title a, .ast-site-title-wrap, .ast-site-title-wrap a, .site-branding, .site-branding a, .ast-site-identity, .ast-site-identity a, .custom-logo-link, .tth-desktop-brand, .tth-mobile-brand) {
  color: #07142d !important;
  -webkit-text-fill-color: #07142d !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
}