/*
 * HX//API Sub2API neutral theme overlay
 *
 * Activation: add `hx-neutral-theme` to the <html> element after this file
 * is loaded. Sub2API keeps ownership of layout and behavior; this file only
 * replaces palette and interaction feedback.
 */

html.hx-neutral-theme {
  --hx-page: #f4f5f6;
  --hx-surface: #ffffff;
  --hx-surface-soft: #f0f2f3;
  --hx-surface-hover: #e9ecee;
  --hx-surface-selected: #e4eaec;
  --hx-text: #202529;
  --hx-text-muted: #697178;
  --hx-border: #dfe3e5;
  --hx-border-strong: #cbd1d4;
  --hx-accent: #66747b;
  --hx-accent-hover: #58656b;
  --hx-accent-soft: #e5e8e9;
  --hx-accent-text: #4f5a60;
  --hx-focus: rgb(96 108 114 / 42%);
  --hx-selection: rgb(105 116 122 / 25%);
  --hx-shadow: rgb(29 37 41 / 7%);
  color-scheme: light;
}

html.hx-neutral-theme.dark {
  --hx-page: #101214;
  --hx-surface: #171a1d;
  --hx-surface-soft: #1c2024;
  --hx-surface-hover: #23282d;
  --hx-surface-selected: #282e33;
  --hx-text: #edf0f2;
  --hx-text-muted: #a7afb6;
  --hx-border: #292e33;
  --hx-border-strong: #373e44;
  --hx-accent: #69777e;
  --hx-accent-hover: #78868d;
  --hx-accent-soft: #252b2f;
  --hx-accent-text: #c2c9cd;
  --hx-focus: rgb(137 149 155 / 42%);
  --hx-selection: rgb(132 143 149 / 28%);
  --hx-shadow: rgb(0 0 0 / 22%);
  color-scheme: dark;
}

html.hx-neutral-theme body {
  background: var(--hx-page) !important;
  color: var(--hx-text) !important;
}

/*
 * Authentication pages only: replace the upstream cyan mesh, grid and glow
 * with a quiet warm-neutral field.  The consent id is shared by login and
 * registration, so this stays isolated from the authenticated application.
 */
html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent) {
  background: linear-gradient(145deg, #f5f3ef 0%, #eef0ed 48%, #e7ece9 100%) !important;
  background-color: #f2f2ef !important;
}

html.hx-neutral-theme.dark #app > .relative.flex.min-h-screen:has(#login-agreement-consent) {
  background: linear-gradient(145deg, #171816 0%, #1a1d1b 50%, #1d211f 100%) !important;
  background-color: #191b19 !important;
}

html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  > .absolute.inset-0.bg-gradient-to-br,
html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  > .pointer-events-none.absolute.inset-0 {
  display: none !important;
}

html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  :where(div, a):has(> img.h-full.w-full:is(.object-cover, .object-contain)) {
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

/* Legal consent must read as a warning without recolouring in-app links. */
html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  #login-agreement-consent {
  accent-color: #b42318 !important;
}

html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  #login-agreement-consent + div p {
  color: #4d4541 !important;
}

html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  a[href^="/legal/"] {
  color: #b42318 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: rgb(180 35 24 / 58%) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

html.hx-neutral-theme #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  a[href^="/legal/"]:where(:hover, :focus-visible) {
  color: #8f1b13 !important;
  text-decoration-color: currentColor !important;
}

html.hx-neutral-theme.dark #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  #login-agreement-consent {
  accent-color: #ff8a80 !important;
}

html.hx-neutral-theme.dark #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  #login-agreement-consent + div p {
  color: #d3cbc7 !important;
}

html.hx-neutral-theme.dark #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  a[href^="/legal/"] {
  color: #ff8a80 !important;
  text-decoration-color: rgb(255 138 128 / 66%) !important;
}

html.hx-neutral-theme.dark #app > .relative.flex.min-h-screen:has(#login-agreement-consent)
  a[href^="/legal/"]:where(:hover, :focus-visible) {
  color: #ffaaa2 !important;
  text-decoration-color: currentColor !important;
}

html.hx-neutral-theme ::selection {
  background: var(--hx-selection);
  color: var(--hx-text);
}

html.hx-neutral-theme :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--hx-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-shadow: none !important;
  --tw-ring-shadow: none !important;
}

html.hx-neutral-theme :where(button, a, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

html.hx-neutral-theme :where(input, select, textarea, [type="checkbox"], [type="radio"]) {
  accent-color: var(--hx-accent);
}

/* Page and fixed navigation surfaces */
html.hx-neutral-theme :where(.app-sidebar, .sidebar, .topbar, .page-header) {
  background-color: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

/* Upstream shell remnants: remove mesh, glass and decorative glow. */
html.hx-neutral-theme .bg-mesh-gradient {
  background: transparent !important;
  background-image: none !important;
}

html.hx-neutral-theme header.glass {
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.hx-neutral-theme .sidebar-logo {
  background: var(--hx-surface-soft) !important;
  border: 1px solid var(--hx-border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html.hx-neutral-theme .sidebar-logo:hover {
  background: var(--hx-surface-hover) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html.hx-neutral-theme .navigation-progress-bar {
  background: var(--hx-accent) !important;
  box-shadow: none !important;
}

/* Date range and select controls use the same neutral interaction language. */
html.hx-neutral-theme :where(.date-picker-trigger, .select-trigger) {
  color: var(--hx-text) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme :where(.date-picker-trigger, .select-trigger):hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme :where(
    .date-picker-trigger-open,
    .select-trigger[aria-expanded="true"]
  ) {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
  outline: none !important;
}

html.hx-neutral-theme :where(.date-picker-dropdown, .select-dropdown-portal) {
  color: var(--hx-text) !important;
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: 0 8px 22px var(--hx-shadow) !important;
  backdrop-filter: none !important;
}

html.hx-neutral-theme .date-picker-preset,
html.hx-neutral-theme .select-option {
  color: var(--hx-text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .date-picker-preset:hover,
html.hx-neutral-theme .select-option:hover,
html.hx-neutral-theme .select-option-focused {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .date-picker-preset-active,
html.hx-neutral-theme .select-option-selected,
html.hx-neutral-theme .select-option-selected:hover {
  color: var(--hx-accent-text) !important;
  background: var(--hx-surface-selected) !important;
}

html.hx-neutral-theme .date-picker-apply {
  color: #ffffff !important;
  background: var(--hx-accent) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .date-picker-apply:hover {
  background: var(--hx-accent-hover) !important;
  box-shadow: none !important;
}

/* Local comparison toolbar; mirrors the same interaction rules as the app. */
html.hx-neutral-theme .preview-toolbar {
  background: color-mix(in srgb, var(--hx-surface) 94%, transparent) !important;
  border-color: var(--hx-border) !important;
  box-shadow: 0 6px 20px var(--hx-shadow) !important;
}

html.hx-neutral-theme .preview-toolbar button {
  color: var(--hx-text-muted) !important;
}

html.hx-neutral-theme .preview-toolbar button:hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .preview-toolbar button[aria-pressed="true"] {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  border-color: var(--hx-border-strong) !important;
}

html.hx-neutral-theme [class~="bg-gray-50"],
html.hx-neutral-theme [class~="bg-gray-50/50"] {
  background-color: var(--hx-page) !important;
}

html.hx-neutral-theme :where([class~="bg-white"], [class~="bg-white/70"], [class~="bg-white/80"]) {
  background-color: var(--hx-surface) !important;
}

html.hx-neutral-theme.dark :where(
    [class~="dark:bg-dark-950"],
    [class~="dark:bg-dark-950/50"]
  ) {
  background-color: var(--hx-page) !important;
}

html.hx-neutral-theme.dark :where(
    [class~="dark:bg-dark-900"],
    [class~="dark:bg-dark-900/50"],
    [class~="dark:bg-dark-800"],
    [class~="dark:bg-dark-800/50"],
    [class~="dark:bg-dark-800/70"],
    [class~="dark:bg-dark-800/80"]
  ) {
  background-color: var(--hx-surface) !important;
}

/* Common cards, menus and dialogs */
html.hx-neutral-theme :where(
    .card,
    .glass-card,
    .card-glass,
    .dropdown,
    .modal-content,
    .table-container
  ) {
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: 0 5px 18px var(--hx-shadow) !important;
  backdrop-filter: none !important;
}

html.hx-neutral-theme :where(.card-header, .card-footer, .modal-header, .modal-footer) {
  border-color: var(--hx-border) !important;
}

html.hx-neutral-theme .card-hover:hover {
  border-color: var(--hx-border-strong) !important;
  box-shadow: 0 7px 20px var(--hx-shadow) !important;
  transform: translateY(-1px) !important;
}

html.hx-neutral-theme .modal-overlay {
  background: rgb(12 14 16 / 54%) !important;
  backdrop-filter: blur(3px) !important;
}

/* Sidebar: neutral response, quiet accent for the current location */
html.hx-neutral-theme .sidebar-link {
  color: var(--hx-text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .sidebar-link:hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .sidebar-link:active {
  background: var(--hx-surface-selected) !important;
  transform: scale(0.995);
}

html.hx-neutral-theme .sidebar-link-active,
html.hx-neutral-theme .sidebar-link-active:hover,
html.hx-neutral-theme .sidebar-link[aria-current="page"] {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .sidebar-section-title {
  color: var(--hx-text-muted) !important;
}

/* Buttons: remove gradient/glow; state changes come from luminance. */
html.hx-neutral-theme .btn {
  box-shadow: none !important;
}

html.hx-neutral-theme .btn-primary,
html.hx-neutral-theme :where(button, a, [role="button"]):where(
    [class~="bg-primary-500"],
    [class~="bg-primary-600"],
    [class~="bg-primary-700"],
    [class~="from-primary-500"],
    [class~="from-primary-600"]
  ) {
  color: #ffffff !important;
  background: var(--hx-accent) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .btn-primary:hover,
html.hx-neutral-theme :where(button, a, [role="button"]):where(
    [class~="bg-primary-500"],
    [class~="bg-primary-600"],
    [class~="bg-primary-700"],
    [class~="from-primary-500"],
    [class~="from-primary-600"]
  ):hover {
  background: var(--hx-accent-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .btn-primary:active,
html.hx-neutral-theme :where(button, a, [role="button"]):where(
    [class~="bg-primary-500"],
    [class~="bg-primary-600"],
    [class~="bg-primary-700"],
    [class~="from-primary-500"],
    [class~="from-primary-600"]
  ):active {
  filter: brightness(0.94);
  transform: scale(0.985) !important;
}

html.hx-neutral-theme :where(.btn-secondary, .btn-ghost) {
  color: var(--hx-text) !important;
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme :where(.btn-secondary, .btn-ghost):hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
  border-color: var(--hx-border-strong) !important;
}

html.hx-neutral-theme :where(.btn-secondary, .btn-ghost):active {
  background: var(--hx-surface-selected) !important;
  transform: scale(0.985) !important;
}

/* Forms: a restrained border change replaces the luminous blue ring. */
html.hx-neutral-theme :where(.input, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--hx-text) !important;
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme :where(.input, input, select, textarea):hover:not(:disabled) {
  border-color: var(--hx-border-strong) !important;
}

html.hx-neutral-theme :where(.input, input, select, textarea):focus:not(:disabled) {
  border-color: var(--hx-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-accent) 18%, transparent) !important;
}

html.hx-neutral-theme :where(.input, input, select, textarea):focus-visible {
  outline: none !important;
}

html.hx-neutral-theme :where(.input, input, select, textarea)::placeholder {
  color: var(--hx-text-muted) !important;
}

/* Tables and list rows */
html.hx-neutral-theme .table th {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
}

html.hx-neutral-theme .table td {
  color: var(--hx-text) !important;
  border-color: var(--hx-border) !important;
}

html.hx-neutral-theme .table tbody tr:hover,
html.hx-neutral-theme [class~="hover:bg-gray-50"]:hover,
html.hx-neutral-theme [class~="hover:bg-gray-100"]:hover,
html.hx-neutral-theme .dropdown-item:hover {
  background-color: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .plaza-pricing-table tbody tr {
  border-color: var(--hx-border) !important;
}

/* DataTable uses independent sticky surfaces that otherwise remain navy. */
html.hx-neutral-theme :where(.table-header, .sticky-header-cell) {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .table-header .sticky-header-cell:hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .table-body {
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
}

html.hx-neutral-theme .table-body .sticky-col {
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .table-body tr:hover .sticky-col {
  background: var(--hx-surface-hover) !important;
}

/* Header balance indicator is informational, not a primary action. */
html.hx-neutral-theme header [class~="bg-primary-50"][class~="group"] {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme header [class~="bg-primary-50"][class~="group"] :where(svg, span) {
  color: var(--hx-text-muted) !important;
}

/* Shared switches: muted theme tint instead of saturated green. */
html.hx-neutral-theme [role="switch"] {
  background: var(--hx-surface-selected) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.hx-neutral-theme [role="switch"][aria-checked="true"] {
  background: color-mix(in srgb, var(--hx-accent) 72%, var(--hx-surface-selected)) !important;
}

html.hx-neutral-theme [role="switch"] > span {
  background: #f7f9fa !important;
  box-shadow: 0 1px 3px var(--hx-shadow) !important;
}

/* Tabs and pagination share the same quiet selected state. */
html.hx-neutral-theme .tabs {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .tab {
  color: var(--hx-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .tab:hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .tab-active,
html.hx-neutral-theme .tab-active:hover,
html.hx-neutral-theme nav button[aria-current="page"] {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

/* Some monitor cards carry an upstream !important dark background. */
html.hx-neutral-theme.dark :where(.card, .glass-card, .card-glass) {
  background: var(--hx-surface) !important;
  border-color: var(--hx-border) !important;
  box-shadow: 0 5px 18px var(--hx-shadow) !important;
}

/* Informational notices use hierarchy rather than a teal field. */
html.hx-neutral-theme :where([class~="bg-primary-50/80"], [class~="dark:bg-primary-900/20"][class~="dark:text-primary-100"]) {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme.dark [class~="dark:hover:bg-dark-800"]:hover,
html.hx-neutral-theme.dark [class~="dark:hover:bg-dark-800/30"]:hover,
html.hx-neutral-theme.dark [class~="dark:hover:bg-dark-800/50"]:hover,
html.hx-neutral-theme.dark [class~="dark:hover:bg-dark-700"]:hover,
html.hx-neutral-theme.dark .dropdown-item:hover {
  background-color: var(--hx-surface-hover) !important;
}

/* Tabs, segmented controls and selected rows */
html.hx-neutral-theme :where(
    [role="tab"][aria-selected="true"],
    [data-state="active"],
    .tab-active,
    .selected-row,
    .pagination-button[aria-current="page"]
  ) {
  color: var(--hx-accent-text) !important;
  background: var(--hx-surface-selected) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme :where(
    [role="tab"],
    [data-state="inactive"],
    .pagination-button
  ):hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

/* Common Tailwind primary interaction tokens used outside shared components. */
html.hx-neutral-theme :where(
    [class~="bg-primary-50"],
    [class~="bg-primary-100"],
    [class~="hover:bg-primary-50"]:hover,
    [class~="hover:bg-primary-100"]:hover
  ) {
  background-color: var(--hx-accent-soft) !important;
}

html.hx-neutral-theme.dark :where(
    [class~="dark:bg-primary-900/20"],
    [class~="dark:bg-primary-900/30"],
    [class~="dark:hover:bg-primary-900/20"]:hover,
    [class~="dark:hover:bg-primary-900/30"]:hover
  ) {
  background-color: var(--hx-accent-soft) !important;
}

html.hx-neutral-theme :where(
    [class~="text-primary-600"],
    [class~="text-primary-700"],
    [class~="hover:text-primary-600"]:hover
  ),
html.hx-neutral-theme.dark :where(
    [class~="dark:text-primary-300"],
    [class~="dark:text-primary-400"],
    [class~="dark:hover:text-primary-400"]:hover
  ) {
  color: var(--hx-accent-text) !important;
}

html.hx-neutral-theme :where(
    [class~="border-primary-500"],
    [class~="focus:border-primary-500"]:focus,
    [class~="focus-visible:border-primary-500"]:focus-visible
  ) {
  border-color: var(--hx-accent) !important;
}

/* Quiet generic hover tokens used by icon buttons and compact controls. */
html.hx-neutral-theme [class~="hover:bg-white"]:hover,
html.hx-neutral-theme [class~="hover:bg-white/10"]:hover {
  background-color: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme :where(.pagination-button, .dropdown-item) {
  color: var(--hx-text-muted) !important;
  border-color: var(--hx-border) !important;
}

/* Keep low-priority help notices neutral after the generic primary-token map. */
html.hx-neutral-theme [class~="bg-primary-50/80"] {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme.dark [class~="dark:bg-primary-900/20"][class~="dark:text-primary-100"] {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

/* Channel status cards: hover is a quiet elevation, never a green outline. */
html.hx-neutral-theme main .grid.gap-5 > button.group.text-left {
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme main .grid.gap-5 > button.group.text-left:hover {
  background: var(--hx-surface-hover) !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: 0 6px 18px var(--hx-shadow) !important;
}

/* Monitor metric pairs should not retain the upstream blue-black inset panels. */
html.hx-neutral-theme.dark main .grid.gap-5 > button.group.text-left .mt-5.grid > [class~="bg-gray-50/80"][class~="dark:bg-dark-900/40"] {
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

/* Transparent profile artwork should not expose the upstream green avatar fill. */
html.hx-neutral-theme :where(header, main, aside) [class~="bg-gradient-to-br"]:has(> img.h-full.w-full.object-cover) {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

/* Account table bulk editor is a table affordance, not a teal banner. */
html.hx-neutral-theme .table-page-layout .table-scroll-container > .mb-4.flex {
  color: var(--hx-text) !important;
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .table-page-layout .table-scroll-container > .mb-4.flex > .flex.flex-wrap:first-child :where(span, label) {
  color: var(--hx-text-muted) !important;
}

/* Announcement modal: remove the orange gradient while keeping unread legible. */
html.hx-neutral-theme body > .fixed.inset-0 > .w-full.overflow-hidden > .relative.overflow-hidden:first-child {
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
}

html.hx-neutral-theme body > .fixed.inset-0 > .w-full.overflow-hidden > .relative.overflow-hidden:first-child .mb-3.flex:first-child :where(span, div) {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-selected) !important;
  background-image: none !important;
  border-color: var(--hx-border-strong) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme body > .fixed.inset-0 > .w-full.overflow-hidden > .border-t.border-gray-100 button[class~="bg-gradient-to-r"] {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  background-image: none !important;
  border: 1px solid var(--hx-border-strong) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme body > .fixed.inset-0 > .w-full.overflow-hidden > .border-t.border-gray-100 button[class~="bg-gradient-to-r"]:hover {
  background: var(--hx-surface-hover) !important;
}

/* Settings navigation shares the same segmented-control treatment as tabs. */
html.hx-neutral-theme .settings-tabs-shell {
  background: var(--hx-surface) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .settings-tabs-shell :where(button, a) {
  color: var(--hx-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .settings-tabs-shell :where(button, a):hover {
  color: var(--hx-text) !important;
  background: var(--hx-surface-hover) !important;
}

html.hx-neutral-theme .settings-tabs-shell :where(button, a)[aria-selected="true"],
html.hx-neutral-theme .settings-tabs-shell :where(button, a).active {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  border-color: var(--hx-border-strong) !important;
}

/* Redeem page hero and help panel use hierarchy instead of teal fields. */
html.hx-neutral-theme main > .max-w-2xl > .card.overflow-hidden > .bg-gradient-to-br.from-primary-500 {
  color: var(--hx-text) !important;
  background: var(--hx-surface-selected) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme main > .max-w-2xl > .card.overflow-hidden > .bg-gradient-to-br.from-primary-500 :where(div, span, p) {
  color: var(--hx-text) !important;
}

html.hx-neutral-theme main > .max-w-2xl > .card.border-primary-200 {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

/* Profile stat, avatar editor and contact notice are supporting surfaces. */
html.hx-neutral-theme main > .mx-auto.space-y-6 .grid.gap-3 > .rounded-2xl.px-4,
html.hx-neutral-theme main > .mx-auto.space-y-6 section.card.border .grid.gap-6 > .rounded-3xl.border {
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme main > .mx-auto.space-y-6 > .card.border-primary-200 {
  color: var(--hx-text-muted) !important;
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

/* Sub2API 0.1.184: keep new public-group controls and compaction metadata neutral. */
html.hx-neutral-theme [class~="bg-gradient-to-r"][class~="from-primary-50"][class~="to-primary-100"] {
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme .compatibility-setting {
  color: var(--hx-text) !important;
  background: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
  box-shadow: none !important;
}

html.hx-neutral-theme [data-testid="native-compaction-badge"] {
  color: var(--hx-accent-text) !important;
  background-color: var(--hx-accent-soft) !important;
}

html.hx-neutral-theme [class~="border-green-200"][class~="bg-green-50/50"],
html.hx-neutral-theme.dark [class~="dark:border-green-800/50"][class~="dark:bg-green-900/10"] {
  background-color: var(--hx-surface-soft) !important;
  border-color: var(--hx-border) !important;
}

html.hx-neutral-theme [type="checkbox"][class~="text-green-600"] {
  color: var(--hx-accent) !important;
  border-color: var(--hx-border-strong) !important;
}

html.hx-neutral-theme [class~="border-green-400"][class~="bg-green-500"] {
  background-color: var(--hx-accent) !important;
  border-color: var(--hx-accent) !important;
}

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