/* Step 569–571 — operator-selectable VisionX appearance.

   All real tab hosts consume one canonical surface contract. Renderer rules in
   earlier compatibility stylesheets may still own geometry (visible dropdown
   overflow and Safari-safe header radii), but they no longer own appearance. */

html[data-visionx-theme] body.visionx-shell {
  --visionx-card-surface-border: rgba(231, 216, 168, .13);
  --visionx-card-surface-background:
    linear-gradient(145deg, rgba(30, 29, 23, .72), rgba(9, 10, 8, .68));
  --visionx-card-surface-shadow:
    inset 0 1px rgba(255, 255, 255, .022),
    0 .45rem 1.3rem rgba(0, 0, 0, .12);
  /* Preserve the established base card paint contract. Theme-specific
     reactive-edge behavior is applied only by the scoped Glass/custom rules. */
  --visionx-card-surface-background-clip: border-box;
  --visionx-identity-menu-surface-background: var(--visionx-card-surface-background);
  --visionx-identity-menu-surface-background-clip: var(--visionx-card-surface-background-clip);
  --visionx-identity-menu-action-border: var(--visionx-card-surface-border);
  --visionx-identity-menu-action-hover-border: var(--visionx-tab-surface-hover-border);
  --visionx-peer-control-surface-background: var(--visionx-card-surface-background);
  /* Inputs, selects and file-picker shells are card-like controls. Keep their
     material in the active theme instead of falling back to the old near-black
     Classic field recipe. */
  --visionx-field-surface-background-clip: var(--visionx-card-surface-background-clip);
  --visionx-field-surface-background: var(--visionx-card-surface-background);
  --visionx-menu-surface-background:
    linear-gradient(180deg, rgba(25, 26, 21, .998), rgba(7, 8, 6, .998)),
    #080907;
  --visionx-menu-option-background:
    linear-gradient(145deg, rgba(24, 24, 19, .995), rgba(9, 10, 8, .995)),
    #080907;
  --visionx-menu-surface-border: rgba(239, 205, 102, .46);
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell {
  --visionx-tab-surface-border: var(--border);
  --visionx-tab-surface-background: var(--window);
  --visionx-tab-surface-background-clip: border-box;
  --visionx-tab-surface-shadow:
    0 1.6rem 4.5rem rgba(0, 0, 0, .38),
    0 .25rem 1rem rgba(0, 0, 0, .22),
    inset 0 1px rgba(255, 245, 214, .035);
  --visionx-tab-surface-backdrop: blur(22px) saturate(118%);
  --visionx-tab-surface-sheen:
    radial-gradient(circle at 0 0, rgba(244, 207, 100, .075), transparent 22rem),
    linear-gradient(120deg, rgba(255, 255, 255, .018), transparent 34%);
  --visionx-tab-surface-hover-border: rgba(238, 211, 132, .21);
  --visionx-tab-surface-hover-shadow: var(--visionx-tab-surface-shadow);
}

html[data-visionx-theme="glass"] body.visionx-shell {
  --window:
    linear-gradient(155deg, rgba(207, 173, 82, .064), transparent 38%),
    linear-gradient(145deg, rgba(18, 19, 15, .94), rgba(6, 7, 5, .91));
  --window-raised: rgba(25, 25, 20, .74);
  --window-subtle: rgba(8, 9, 7, .7);
  --surface-0: rgba(8, 9, 7, .66);
  --surface-1: rgba(18, 19, 15, .72);
  --surface-2: rgba(27, 27, 21, .76);
  --surface-3: rgba(35, 33, 26, .8);
  --visionx-tab-surface-border: rgba(224, 227, 222, .10);
  /* Immutable pre-Step-571 Standalone Renderer material. Runtime preferences
     may change only this value; the Classic contract above remains untouched. */
  --visionx-tab-surface-background: var(
    --visionx-runtime-glass-surface,
    linear-gradient(155deg, rgba(207, 173, 82, .064), transparent 38%),
    linear-gradient(145deg, rgba(18, 19, 15, .94), rgba(6, 7, 5, .91))
  );
  --visionx-tab-surface-background-clip: padding-box;
  --visionx-tab-surface-shadow:
    0 1.6rem 4.5rem rgba(0, 0, 0, .42),
    0 .25rem 1rem rgba(0, 0, 0, .24),
    inset 0 1px rgba(255, 245, 214, .032);
  --visionx-tab-surface-backdrop: none;
  --visionx-tab-surface-sheen:
    linear-gradient(132deg, rgba(244, 207, 100, .05), transparent 27rem),
    linear-gradient(120deg, rgba(255, 255, 255, .014), transparent 34%);
  --visionx-tab-surface-hover-border: rgba(224, 227, 222, .18);
  --visionx-tab-surface-hover-shadow:
    0 1.6rem 4.5rem rgba(0, 0, 0, .42),
    0 .25rem 1rem rgba(0, 0, 0, .24),
    inset 0 1px rgba(255, 245, 214, .052);
  --visionx-card-surface-border: rgba(224, 227, 222, .10);
  --visionx-card-surface-background: var(--visionx-runtime-glass-surface);
  --visionx-card-surface-background-clip: padding-box;
  --visionx-card-surface-shadow:
    inset 0 1px rgba(255, 255, 255, .02),
    0 .55rem 1.6rem rgba(0, 0, 0, .16);
  --visionx-menu-surface-background:
    linear-gradient(180deg, rgba(13, 14, 11, .48), rgba(5, 6, 4, .56)),
    var(--visionx-runtime-glass-surface),
    #080907;
  --visionx-menu-option-background:
    linear-gradient(145deg, rgba(16, 17, 13, .56), rgba(7, 8, 6, .64)),
    var(--visionx-runtime-glass-surface),
    #080907;
  --visionx-menu-surface-border: rgba(239, 205, 102, .48);
}

/* Every table column bar is one sticky painted layer. The top separator now
   belongs to that same sticky header layer instead of a separate scroll-port
   pseudo-element, so WebKit cannot composite scrolling row glyphs through it. */
html[data-visionx-theme] body.visionx-shell .table-wrap {
  position: relative;
  isolation: isolate;
  contain: paint;
  overflow: auto;
  border-top-width: 0 !important;
}

/* Earlier Safari passes left two independent compositor shims in older
   stylesheets: sticky ::before seals and translateZ(0) on selected table
   headers. Step 569 is the canonical final table layer, so explicitly retire
   those historical shims here rather than allowing them to survive the cascade. */
html[data-visionx-theme] body.visionx-shell :is(
  .registry-table-wrap,
  .server-route-table-wrap,
  .workspace-members .workspace-table-wrap,
  .thread-members .workspace-table-wrap
)::before {
  content: none !important;
  display: none !important;
}

html[data-visionx-theme] body.visionx-shell .table-wrap tbody {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

html[data-visionx-theme] body.visionx-shell .table-wrap thead {
  position: sticky !important;
  z-index: 50 !important;
  top: 0 !important;
  background:
    linear-gradient(
      to bottom,
      rgba(12, 13, 10, .92) 0,
      rgba(12, 13, 10, .92) calc(100% - 1px),
      rgba(241, 219, 151, .15) calc(100% - 1px),
      rgba(241, 219, 151, .15) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(241, 219, 151, .08),
    0 -3px 0 3px rgba(12, 13, 10, .94) !important;
  isolation: isolate !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  -webkit-backdrop-filter: blur(5px) saturate(104%) !important;
  backdrop-filter: blur(5px) saturate(104%) !important;
}

html[data-visionx-theme] body.visionx-shell .table-wrap th {
  position: relative !important;
  z-index: 1 !important;
  top: auto !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Glass mode keeps its own warm, layered column-bar material even when the
   operator has not enabled a custom tab gradient. The near-black veil keeps
   headings readable while the lower layers match the canonical Glass tab. */
html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"] body.visionx-shell {
  --visionx-table-header-surface:
    var(--visionx-runtime-table-header-sheen),
    var(--visionx-runtime-table-header-gold),
    var(--visionx-runtime-glass-surface);
  --visionx-peer-control-surface-background: var(--visionx-card-surface-background);
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"] body.visionx-shell .table-wrap thead {
  background:
    var(--visionx-table-header-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(241, 219, 151, .08),
    0 -3px 0 3px rgba(7, 8, 6, .96),
    inset 0 -1px rgba(238, 211, 132, .14) !important;
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"] body.visionx-shell .table-wrap th {
  background: transparent !important;
}


html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"] body.visionx-shell {
  /* Classic custom gradients own only the fill. The ordinary translucent
     VisionX border remains physically separate and sees the page/background
     underneath, matching the reactive edge already accepted in basic Glass. */
  --visionx-tab-surface-background: var(--visionx-runtime-tab-gradient);
  --visionx-tab-surface-background-clip: padding-box;
  --visionx-card-surface-background:
    linear-gradient(rgba(7, 8, 6, .22), rgba(7, 8, 6, .22)),
    var(--visionx-runtime-tab-gradient);
  --visionx-card-surface-background-clip: padding-box;
  --visionx-menu-surface-background:
    linear-gradient(rgba(5, 6, 4, .44), rgba(5, 6, 4, .52)),
    var(--visionx-runtime-tab-gradient),
    #080907;
  --visionx-menu-option-background:
    linear-gradient(rgba(7, 8, 6, .5), rgba(7, 8, 6, .58)),
    var(--visionx-runtime-tab-gradient),
    #080907;
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"] body.visionx-shell {
  /* Glass + custom gradient is one composite material. The Glass base and the
     selected gradient are both generated from the same opacity slider value,
     while the physical translucent border remains outside all fill layers. */
  --visionx-tab-surface-background:
    var(--visionx-runtime-tab-gradient),
    var(--visionx-runtime-glass-surface);
  --visionx-tab-surface-background-clip: padding-box;
  --visionx-card-surface-background:
    var(--visionx-runtime-glass-card-veil),
    var(--visionx-runtime-tab-gradient),
    var(--visionx-runtime-glass-surface);
  --visionx-card-surface-background-clip: padding-box;
  --visionx-menu-surface-background:
    linear-gradient(rgba(5, 6, 4, .44), rgba(5, 6, 4, .52)),
    var(--visionx-runtime-tab-gradient),
    #080907;
  --visionx-menu-option-background:
    linear-gradient(rgba(7, 8, 6, .5), rgba(7, 8, 6, .58)),
    var(--visionx-runtime-tab-gradient),
    #080907;
}

/* Custom-gradient rounded surfaces use neutral edge ink rather than the old
   Classic gold. Runtime first-colour edge values remain available to the square
   table-header accent only; they never own rounded tab or card borders. */
html[data-visionx-theme][data-visionx-custom-tabs="true"] body.visionx-shell {
  --visionx-tab-surface-border: rgba(224, 227, 222, .10);
  --visionx-tab-surface-hover-border: rgba(224, 227, 222, .18);
  --visionx-card-surface-border: rgba(224, 227, 222, .10);
  /* The Classic custom-gradient identity menu is the canonical gradient
     treatment in every mode. Its runtime gradient stays at Classic strength,
     so Glass cannot dilute it with either its opacity slider or base layer. */
  --visionx-identity-menu-surface-background:
    linear-gradient(rgba(7, 8, 6, .78), rgba(7, 8, 6, .78)),
    var(--visionx-runtime-identity-gradient);
  --visionx-identity-menu-surface-background-clip: padding-box;
  --visionx-table-header-surface:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(12, 13, 10, .24)),
    var(--visionx-runtime-table-header-gradient),
    #20221d;
  --visionx-peer-control-surface-background: var(--visionx-card-surface-background);
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"] body.visionx-shell {
  --visionx-table-header-surface:
    var(--visionx-runtime-table-header-sheen),
    var(--visionx-runtime-table-header-gradient);
}

/* In Classic + custom-tab-gradient mode the tab fill is intentionally opaque,
   so nested card borders cannot see the site canvas through that parent layer.
   When a custom site gradient is active, both tab and card edges therefore use
   one representative colour derived from that background gradient. Glass keeps
   its naturally background-reactive translucent material, but uses neutral
   edge ink so the old Classic gold never bleeds into either mode. */
html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"][data-visionx-background="gradient"] body.visionx-shell {
  --visionx-tab-surface-border: var(--visionx-runtime-background-border);
  --visionx-tab-surface-hover-border: var(--visionx-runtime-background-border-hover);
  --visionx-card-surface-border: var(--visionx-runtime-background-border);
}

/* The gradient dropdown is deliberately opaque in both modes. Give its nested
   action the same resolved canvas edge that Classic already receives, because
   a translucent Glass border cannot see the site gradient through that parent
   fill. The hover edge follows the identical Classic lift contract. */
html[data-visionx-theme][data-visionx-custom-tabs="true"][data-visionx-background="gradient"] body.visionx-shell {
  --visionx-identity-menu-action-border: var(--visionx-runtime-background-border);
  --visionx-identity-menu-action-hover-border: var(--visionx-runtime-background-border-hover);
}

html[data-visionx-theme] body.visionx-shell main#main-content .visionx-peer-control {
  background: var(--visionx-peer-control-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  border-color: var(--visionx-card-surface-border) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

/* Column bars borrow the selected gradient only while custom gradients are
   enabled. A near-black veil preserves the established table contrast and
   keeps every heading legible in both Classic and Glass. */
html[data-visionx-theme][data-visionx-custom-tabs="true"] body.visionx-shell .table-wrap thead {
  background:
    var(--visionx-table-header-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(241, 219, 151, .08),
    0 -3px 0 3px rgba(7, 8, 6, .96),
    inset 0 -1px var(--visionx-runtime-tab-border) !important;
}

html[data-visionx-theme][data-visionx-custom-tabs="true"] body.visionx-shell .table-wrap th {
  background: transparent !important;
}


html[data-visionx-theme] body.visionx-shell main#main-content .view > .window,
html[data-visionx-theme] body.visionx-shell main#main-content .view [role="tabpanel"],
html[data-visionx-theme] body.visionx-shell main#main-content .view .tab-panel {
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid var(--visionx-tab-surface-border) !important;
  background: var(--visionx-tab-surface-background) !important;
  background-clip: var(--visionx-tab-surface-background-clip) !important;
  box-shadow: var(--visionx-tab-surface-shadow) !important;
  -webkit-backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  transition:
    border-color .16s ease-out,
    box-shadow .16s ease-out !important;
}

html[data-visionx-theme] body.visionx-shell main#main-content .view > .window::before,
html[data-visionx-theme] body.visionx-shell main#main-content .view [role="tabpanel"]::before,
html[data-visionx-theme] body.visionx-shell main#main-content .view .tab-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: var(--visionx-tab-surface-sheen) !important;
  box-shadow: none !important;
  contain: paint !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-visionx-theme] body.visionx-shell main#main-content .view > .window:hover,
html[data-visionx-theme] body.visionx-shell main#main-content .view [role="tabpanel"]:hover,
html[data-visionx-theme] body.visionx-shell main#main-content .view .tab-panel:hover {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  box-shadow: var(--visionx-tab-surface-hover-shadow) !important;
}

/* The Discord menu keeps the established identity tab unchanged. Without a
   custom gradient it uses the active theme's natural card material; with a
   custom gradient the shared variable above reproduces Classic exactly. */
html[data-visionx-theme] body.visionx-shell .header-identity-menu {
  top: calc(100% + .55rem) !important;
  min-width: max(100%, 12rem) !important;
  padding: .42rem !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid var(--visionx-card-surface-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--visionx-identity-menu-surface-background) !important;
  background-clip: var(--visionx-identity-menu-surface-background-clip) !important;
  box-shadow:
    0 1.1rem 3rem rgba(0, 0, 0, .48),
    inset 0 1px rgba(255, 255, 255, .028) !important;
  -webkit-backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
}

html[data-visionx-theme] body.visionx-shell .header-identity-menu button {
  min-height: 2.55rem !important;
  padding: .62rem .78rem !important;
  border: 1px solid var(--visionx-identity-menu-action-border) !important;
  border-radius: calc(var(--radius-lg) - .22rem) !important;
  color: var(--text-muted) !important;
  background: rgba(8, 9, 7, .34) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .018) !important;
  font-family: var(--font-condensed) !important;
  font-size: .7rem !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  text-align: left !important;
}

html[data-visionx-theme] body.visionx-shell .header-identity-menu button:hover,
html[data-visionx-theme] body.visionx-shell .header-identity-menu button:focus-visible {
  border-color: var(--visionx-identity-menu-action-hover-border) !important;
  outline: 0 !important;
  color: var(--text) !important;
  background: rgba(28, 30, 27, .48) !important;
  box-shadow:
    0 0 0 2px rgba(240, 207, 107, .06),
    inset 0 1px rgba(255, 255, 255, .03) !important;
}

/* Semantic controls must communicate their purpose before decoration. The
   global gold button hover remains appropriate for affirmative actions, while
   dismiss, destructive, and Pack-readiness controls use their own restrained
   state colour over the active theme's canonical card material. */
html[data-visionx-theme] body.visionx-shell .message-dismiss {
  border-color: currentColor !important;
  color: inherit !important;
  background: rgba(4, 5, 3, .22) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
  transform: none !important;
}

html[data-visionx-theme] body.visionx-shell .message.success .message-dismiss {
  border-color: rgba(154, 218, 170, .56) !important;
  color: #d9f1df !important;
  background: rgba(31, 92, 49, .18) !important;
}

html[data-visionx-theme] body.visionx-shell .message:not(.success) .message-dismiss {
  border-color: rgba(239, 154, 147, .58) !important;
  color: #f5c0bc !important;
  background: rgba(112, 35, 32, .18) !important;
}

html[data-visionx-theme] body.visionx-shell .message.success .message-dismiss:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .message.success .message-dismiss:focus-visible {
  border-color: rgba(174, 230, 187, .82) !important;
  outline-color: rgba(154, 218, 170, .52) !important;
  color: #effbf2 !important;
  background: rgba(51, 126, 72, .3) !important;
  box-shadow: inset 0 1px rgba(235, 255, 240, .08) !important;
}

html[data-visionx-theme] body.visionx-shell .message:not(.success) .message-dismiss:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .message:not(.success) .message-dismiss:focus-visible {
  border-color: rgba(250, 179, 173, .84) !important;
  outline-color: rgba(239, 154, 147, .54) !important;
  color: #ffe5e2 !important;
  background: rgba(139, 48, 43, .32) !important;
  box-shadow: inset 0 1px rgba(255, 235, 232, .075) !important;
}

html[data-visionx-theme] body.visionx-shell .danger-action {
  border-color: rgba(233, 141, 134, .46) !important;
  color: #efa09a !important;
  background:
    linear-gradient(180deg, rgba(112, 35, 32, .22), rgba(58, 20, 18, .16)),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px rgba(255, 218, 214, .035),
    0 .35rem 1rem rgba(0, 0, 0, .14) !important;
}

html[data-visionx-theme] body.visionx-shell .danger-action:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .danger-action:focus-visible {
  border-color: rgba(245, 160, 153, .76) !important;
  outline-color: rgba(239, 146, 139, .5) !important;
  color: #ffc0bb !important;
  background:
    linear-gradient(180deg, rgba(133, 43, 39, .36), rgba(73, 24, 22, .26)),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    inset 0 1px rgba(255, 224, 220, .07),
    0 .5rem 1.15rem rgba(0, 0, 0, .2) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .publication-pack-pill:focus-visible,
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  outline-color: rgba(204, 208, 202, .42) !important;
  color: var(--text) !important;
  background:
    linear-gradient(rgba(226, 230, 224, .055), rgba(226, 230, 224, .055)),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    inset 0 1px rgba(255, 255, 255, .045) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.blocked {
  border-color: rgba(233, 141, 134, .34) !important;
  background:
    linear-gradient(rgba(95, 29, 27, .14), rgba(62, 21, 19, .12)),
    var(--visionx-card-surface-background) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.blocked:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.blocked:focus-visible,
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.blocked.selected {
  border-color: rgba(245, 160, 153, .68) !important;
  outline-color: rgba(239, 146, 139, .46) !important;
  color: #f3aaa4 !important;
  background:
    linear-gradient(rgba(122, 38, 35, .28), rgba(75, 24, 22, .22)),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    inset 0 1px rgba(255, 218, 214, .055) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.ready {
  border-color: rgba(134, 201, 151, .38) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.ready:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.ready:focus-visible,
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.ready.selected {
  border-color: rgba(154, 218, 170, .68) !important;
  outline-color: rgba(143, 207, 159, .44) !important;
  color: #b7dfc1 !important;
  background:
    linear-gradient(rgba(31, 92, 49, .22), rgba(20, 62, 33, .17)),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    inset 0 1px rgba(225, 255, 233, .05) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.interrupted {
  border-color: rgba(214, 183, 108, .42) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.interrupted:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.interrupted:focus-visible,
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.interrupted.selected {
  border-color: rgba(224, 198, 134, .68) !important;
  outline-color: rgba(214, 183, 108, .44) !important;
  color: #dfc98f !important;
  background:
    linear-gradient(rgba(105, 79, 24, .22), rgba(67, 49, 16, .17)),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    inset 0 1px rgba(255, 242, 205, .05) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill span {
  color: inherit !important;
  opacity: .68;
}

/* One nested-surface contract carries the selected appearance through every
   workspace without recolouring action buttons or semantic status surfaces. */
html[data-visionx-theme] body.visionx-shell main#main-content .view :where(
  .archive-analysis-grid article,
  .archive-detail-facts > div,
  .derived-channel,
  .folder-selection-summary,
  .manual-fallback-control,
  .member-summary,
  .operator-audit-section,
  .pack-maintenance-order-actions .context-fact,
  .publication-gate-card,
  .registry-asset-facts,
  .registry-logo-card,
  .server-credential-editor,
  .server-credential-summary,
  .server-migration-facts > div,
  .server-preview-route,
  .server-preview-summary > p,
  .theme-gradient-colour,
  .theme-gradient-controls,
  .theme-mode-control,
  .theme-setting-card,
  .thread-tags,
  .workspace-import,
  .workspace-revision-card,
  .workspace-scan-results
) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

/* Header context is status copy, not a nested card. Keeping it transparent
   removes the accidental colour block behind counts such as “0 RELEASES” on
   every workspace while preserving the established typography. */
html[data-visionx-theme] body.visionx-shell .window-header > .context-fact,
html[data-visionx-theme] body.visionx-shell .window-header > :where(div, section) > .context-fact {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-visionx-theme] body.visionx-shell main#main-content .view :where(
  input:not([type="file"]):not([type="checkbox"]):not([type="range"]):not([type="color"]),
  select,
  .file-picker-shell,
  .visionx-select-button
) {
  background: var(--visionx-field-surface-background) !important;
  background-clip: var(--visionx-field-surface-background-clip) !important;
}

/* Filter Pack is a label wrapper, not an additional card. Its generated
   dropdown button still consumes the shared field theme above. */
html[data-visionx-theme] body.visionx-shell main#main-content .archive-filter-control {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-visionx-theme] body.visionx-shell :where(
  .renderer-dropdown-menu,
  .visionx-floating-combobox,
  .visionx-select-menu,
  #pack-asset-results
) {
  border-color: var(--visionx-menu-surface-border) !important;
  background: var(--visionx-menu-surface-background) !important;
  box-shadow:
    0 1.35rem 3.8rem rgba(0, 0, 0, .72),
    inset 0 1px rgba(255, 255, 255, .035) !important;
}

html[data-visionx-theme] body.visionx-shell :where(
  .renderer-dropdown-menu,
  .visionx-floating-combobox,
  .visionx-select-menu,
  #pack-asset-results
)::before {
  content: none !important;
  display: none !important;
}

html[data-visionx-theme] body.visionx-shell :where(
  .renderer-dropdown-menu button[role="option"],
  .visionx-floating-combobox button[role="option"],
  .visionx-select-option,
  #pack-asset-results button[role="option"]
):not(:hover):not(:focus-visible):not([aria-selected="true"]):not([data-active="true"]) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-menu-option-background) !important;
}

/* Registry change and CSV import panels are rendered next to <main>, so they
   need explicit custody rather than inheriting the page-only surface rules. */
html[data-visionx-theme] body.visionx-shell .registry-editor {
  border-color: var(--visionx-tab-surface-border) !important;
  background: var(--visionx-tab-surface-background) !important;
  background-clip: var(--visionx-tab-surface-background-clip) !important;
  box-shadow:
    -1.5rem 0 4.5rem rgba(0, 0, 0, .5),
    var(--visionx-tab-surface-shadow) !important;
  -webkit-backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
}

html[data-visionx-theme] body.visionx-shell .registry-editor :where(
  .registry-change-preview,
  .technical-details
) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme] body.visionx-shell .registry-editor :where(
  input:not([type="file"]),
  select,
  .file-picker-shell
) {
  background: var(--visionx-field-surface-background) !important;
  background-clip: var(--visionx-field-surface-background-clip) !important;
}

html[data-visionx-theme] body.visionx-shell .registry-editor .registry-editor-actions {
  border-color: var(--visionx-card-surface-border) !important;
  background:
    linear-gradient(rgba(7, 8, 6, .72), rgba(7, 8, 6, .82)),
    var(--visionx-tab-surface-background) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-visionx-theme="glass"] body.visionx-shell .registry-editor .registry-editor-actions {
  background: var(--visionx-runtime-glass-surface) !important;
}

html[data-visionx-theme] body.visionx-shell .registry-editor .visionx-select[data-select-id="registry-field-channel"] .visionx-select-button {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-field-surface-background) !important;
  background-clip: var(--visionx-field-surface-background-clip) !important;
  box-shadow: inset 0 1px .22rem rgba(0, 0, 0, .18) !important;
}

html[data-visionx-theme] body.visionx-shell main#main-content #pack-channel-destination {
  background: var(--visionx-field-surface-background) !important;
  background-clip: var(--visionx-field-surface-background-clip) !important;
  box-shadow: inset 0 1px .22rem rgba(0, 0, 0, .18) !important;
}

/* Import file selection keeps a neutral field boundary even while its native
   file input owns keyboard focus. The action inside retains its normal hover. */
html[data-visionx-theme] body.visionx-shell #registry-import-dialog .file-picker-shell,
html[data-visionx-theme] body.visionx-shell #registry-import-dialog .file-picker-shell:focus-within {
  border-color: var(--visionx-card-surface-border) !important;
  outline: 0 !important;
  box-shadow: inset 0 1px .25rem rgba(0, 0, 0, .34) !important;
}

/* These are structural/text wrappers rather than painted cards. The actual
   input and select surfaces continue to consume the field theme. */
html[data-visionx-theme] body.visionx-shell main#main-content .pack-maintenance-field-box,
html[data-visionx-theme] body.visionx-shell main#main-content .selected-asset-summary {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Registry cross-workspace disclosure participates in the selected theme in
   both collapsed and expanded states without changing its pill geometry. */
html[data-visionx-theme] body.visionx-shell .registry-workflow-actions.secondary > summary,
html[data-visionx-theme] body.visionx-shell .registry-workflow-actions.secondary > .registry-management-controls {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

/* Timeframe management is part of the open menu, so every one of its surfaces
   uses the same opaque, gradient-aware menu contract. */
html[data-visionx-theme] body.visionx-shell .renderer-timeframe-manage,
html[data-visionx-theme] body.visionx-shell .renderer-timeframe-manager-panel,
html[data-visionx-theme] body.visionx-shell .renderer-timeframe-management-row {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-menu-option-background) !important;
}

html[data-visionx-theme] body.visionx-shell .renderer-timeframe-manager-panel {
  background: var(--visionx-menu-surface-background) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .025),
    0 .8rem 2rem rgba(0, 0, 0, .28) !important;
}

html[data-visionx-theme] body.visionx-shell .renderer-timeframe-manage:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .renderer-timeframe-manage:focus-visible,
html[data-visionx-theme] body.visionx-shell .renderer-timeframe-manage[aria-expanded="true"] {
  border-color: var(--visionx-menu-surface-border) !important;
  background:
    linear-gradient(rgba(207, 173, 82, .08), rgba(207, 173, 82, .08)),
    var(--visionx-menu-option-background) !important;
}

/* The four Standalone Renderer inputs and Render action use one explicit
   title/control grid. This aligns the painted controls themselves instead of
   stretching their differently structured outer wrappers. */
html[data-visionx-theme] body.visionx-shell #view-renderer .renderer-fields {
  align-items: start !important;
}

html[data-visionx-theme] body.visionx-shell #view-renderer .renderer-fields > .renderer-control {
  box-sizing: border-box !important;
  min-height: 0 !important;
  align-self: start !important;
}

html[data-visionx-theme] body.visionx-shell #view-renderer :where(
  .renderer-dropdown-anchor > label,
  .renderer-timeframe-anchor > label,
  .renderer-fields > label.renderer-control
) {
  display: grid !important;
  grid-template-rows: 1rem var(--visionx-inline-control-height) !important;
  align-content: start !important;
  gap: .2rem !important;
  margin: 0 !important;
}

html[data-visionx-theme] body.visionx-shell #view-renderer :where(
  .renderer-dropdown-anchor > label,
  .renderer-timeframe-anchor > label,
  .renderer-fields > label.renderer-control
) > span:first-child {
  display: flex !important;
  min-height: 1rem !important;
  align-items: flex-start !important;
}

html[data-visionx-theme] body.visionx-shell #view-renderer :where(
  #renderer-asset-search,
  #renderer-timeframe-search,
  .renderer-file .file-picker-shell,
  .renderer-watermark-control .visionx-switch-row
) {
  box-sizing: border-box !important;
  height: var(--visionx-inline-control-height) !important;
  min-height: var(--visionx-inline-control-height) !important;
}

html[data-visionx-theme] body.visionx-shell #view-renderer .renderer-fields > .primary-action {
  height: var(--visionx-inline-control-height) !important;
  min-height: var(--visionx-inline-control-height) !important;
  align-self: start !important;
  margin-top: 1.2rem !important;
}

.site-background-image {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.site-background-image[hidden] { display: none !important; }

.site-background-gradient {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  background: var(--visionx-runtime-background-gradient);
}

.site-background-gradient[hidden] { display: none !important; }

body.theme-custom-background .ambient-layer {
  opacity: 1 !important;
  background: linear-gradient(rgba(4, 5, 3, .08), rgba(4, 5, 3, .16)) !important;
}

body.theme-custom-background-gradient .ambient-layer {
  opacity: 1 !important;
  background: linear-gradient(rgba(4, 5, 3, .04), rgba(4, 5, 3, .1)) !important;
}

body.theme-custom-background .ambient-layer::before,
body.theme-custom-background .ambient-layer::after,
body.theme-custom-background-gradient .ambient-layer::before,
body.theme-custom-background-gradient .ambient-layer::after {
  content: none !important;
  display: none !important;
}

.theme-window { overflow: hidden; }
.theme-settings-grid {
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(25rem, 1.2fr);
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.theme-setting-card {
  display: grid;
  align-content: start;
  gap: .8rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(207, 173, 82, .17);
  border-radius: var(--radius-lg);
  background: var(--visionx-warm-inset);
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.theme-setting-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.theme-setting-card h2 { margin: .12rem 0 0; }
.theme-setting-card p { margin: 0; color: var(--text-muted); font-size: .76rem; }
.theme-mode-control {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(7, 8, 6, .56);
  cursor: pointer;
}

.theme-mode-copy { display: grid; gap: .16rem; }
.theme-mode-copy strong { font-size: .78rem; letter-spacing: .12em; }
.theme-mode-copy span { color: var(--text-faint); font-size: .62rem; letter-spacing: .08em; }
.theme-mode-control .visionx-switch-row { flex: 0 0 auto; }

.theme-background-preview {
  position: relative;
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid var(--visionx-card-surface-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 12%, rgba(210, 159, 44, .24), transparent 58%),
    linear-gradient(155deg, #080907, #050604 52%, #0a0905);
  background-clip: padding-box;
}

.theme-background-preview img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  max-height: 18rem;
  object-fit: cover;
}

.theme-background-preview img[hidden] { display: none !important; }

.theme-background-preview-default {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: .64rem;
  letter-spacing: .16em;
}

.theme-background-preview.has-custom-gradient {
  background: var(--visionx-runtime-background-gradient);
  background-clip: padding-box;
}

.theme-background-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: end;
}

.theme-background-actions .file-picker,
.theme-background-actions .file-picker-shell { width: 100%; }
#theme-background-reset { height: var(--visionx-inline-control-height); min-height: var(--visionx-inline-control-height); align-self: end; }
.theme-background-state { color: var(--text-faint); font-size: .62rem; letter-spacing: .09em; }

.theme-gradient-controls {
  display: grid;
  gap: .7rem;
  padding: .75rem;
  border: 1px solid rgba(207, 173, 82, .14);
  border-radius: var(--radius-lg);
  background: rgba(5, 6, 4, .34);
}

.theme-gradient-controls[hidden] { display: none !important; }
.theme-gradient-toolbar,
.theme-gradient-colour,
.theme-range-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.theme-gradient-toolbar > span,
.theme-range-control > span,
.theme-gradient-colour > span {
  color: var(--text-faint);
  font-family: var(--font-condensed);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.theme-gradient-colors { display: grid; gap: .5rem; }
.theme-gradient-colour {
  min-height: 3rem;
  padding: .45rem .55rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: rgba(10, 11, 8, .62);
}

.theme-gradient-colour input[type="color"] {
  width: 3.3rem;
  height: 2rem;
  min-height: 2rem;
  padding: .14rem;
  border-radius: .48rem;
  cursor: pointer;
}

.theme-gradient-colour-actions { display: flex; gap: .35rem; margin-left: auto; }
.theme-gradient-colour-actions button { width: auto; min-width: 0; }
.theme-range-control { display: grid; gap: .55rem; }
.theme-range-control[hidden] { display: none !important; }
.theme-range-control input[type="range"] {
  width: 100%;
  padding: 0;
  accent-color: var(--gold-strong);
}
.theme-range-control input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }

/* Quick Look deliberately consumes the same accepted Registry editor veil.
   This final loaded rule prevents page-specific tint or Safari compositing
   differences from replacing the shared blur contract. */
.registry-editor-backdrop,
.registry-editor-backdrop:hover:not(:disabled),
.registry-editor-backdrop:focus,
.registry-editor-backdrop:focus-visible,
.registry-editor-backdrop:active {
  background: rgba(24, 25, 21, .16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(102%) !important;
  backdrop-filter: blur(12px) saturate(102%) !important;
}

/* Step 573 — Quick Look is a modal form of the canonical VisionX window.
   Its geometry is stable across image dimensions, while its material follows
   Classic, Glass and custom tab gradients through the shared surface contract. */
.visionx-quick-look[hidden] {
  display: none !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look {
  position: fixed !important;
  z-index: 190 !important;
  inset: 0 !important;
  isolation: isolate !important;
  display: grid !important;
  width: min(92vw, 88rem) !important;
  height: min(90dvh, 58rem) !important;
  max-width: calc(100vw - 3rem) !important;
  max-height: calc(100dvh - 3rem) !important;
  margin: auto !important;
  overflow: clip !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  transform: none !important;
  border: 1px solid var(--visionx-tab-surface-border) !important;
  border-radius: var(--radius-xl, 1.4rem) !important;
  background: var(--visionx-tab-surface-background) !important;
  background-clip: var(--visionx-tab-surface-background-clip) !important;
  box-shadow: var(--visionx-tab-surface-shadow) !important;
  -webkit-backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  transition:
    border-color .16s ease-out,
    box-shadow .16s ease-out !important;
  --visionx-quick-look-rule: rgba(231, 216, 168, .13);
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look[hidden] {
  display: none !important;
}

html[data-visionx-theme] body.visionx-shell .workspace-quick-look {
  grid-template-rows: auto minmax(18rem, 1fr) auto auto !important;
}

html[data-visionx-theme] body.visionx-shell .archive-quick-look {
  width: min(90vw, 76rem) !important;
  grid-template-rows: auto minmax(18rem, 1fr) auto !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: var(--visionx-tab-surface-sheen) !important;
  box-shadow: none !important;
  contain: paint !important;
  pointer-events: none !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look:hover {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  box-shadow: var(--visionx-tab-surface-hover-shadow) !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look > .window-header {
  min-height: 4.75rem;
  padding: 1rem clamp(1rem, 2.2vw, 1.6rem);
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--visionx-quick-look-rule) !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look .renderer-preview {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(1rem, 2.2vw, 1.65rem) !important;
  overflow: hidden !important;
  background: transparent !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look .renderer-preview img {
  display: block !important;
  justify-self: center !important;
  width: auto;
  max-width: 100% !important;
  height: auto;
  max-height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  border: 1px solid rgba(238, 214, 143, .14) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(4, 5, 3, .22) !important;
  box-shadow: 0 .9rem 2.8rem rgba(0, 0, 0, .28) !important;
  image-rendering: auto !important;
  transform: none !important;
  filter: none !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look .renderer-preview figcaption {
  justify-self: center;
  max-width: min(100%, 72rem);
  margin: 0 !important;
  padding: .8rem 1rem 0 !important;
  color: var(--text-muted) !important;
  text-align: center;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

html[data-visionx-theme] body.visionx-shell .workspace-quick-look-navigation {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 1px 0 var(--visionx-quick-look-rule) !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look .workspace-quick-look-actions {
  display: grid !important;
  grid-template-columns: minmax(8.5rem, 1fr) auto minmax(8.5rem, 1fr);
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.55rem, 1.2vw, .9rem) !important;
  min-width: 0;
  padding: .8rem clamp(.8rem, 1.6vw, 1.25rem) !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: rgba(5, 6, 4, .12) !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look .workspace-quick-look-actions > :is(button, a) {
  width: 100%;
  min-width: 0 !important;
  justify-content: center;
}

html[data-visionx-theme] body.visionx-shell .visionx-quick-look .workspace-quick-look-actions .context-fact {
  min-width: 7.5rem;
  text-align: center;
  white-space: nowrap;
}

html[data-visionx-theme] body.visionx-shell .workspace-quick-look-footer-actions {
  grid-template-columns: repeat(2, minmax(10rem, 14rem)) !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: .85rem clamp(1rem, 3vw, 2rem) 1rem !important;
  border-top: 0 !important;
  box-shadow: inset 0 1px 0 var(--visionx-quick-look-rule) !important;
}

html[data-visionx-theme] body.visionx-shell .archive-quick-look > .workspace-quick-look-actions {
  grid-template-columns: minmax(11rem, 15rem) !important;
  justify-content: center !important;
  padding: .85rem 1rem 1rem !important;
  border-top: 0 !important;
  box-shadow: inset 0 1px 0 var(--visionx-quick-look-rule) !important;
}

/* Desktop Quick Look navigation uses one six-column measurement. The footer
   deliberately remains its own two-column row so View Receipt and Delete
   Revision stay equal-sized and adjacent without inheriting navigation
   alignment. */
@media (min-width: 941px) {
  html[data-visionx-theme] body.visionx-shell .workspace-quick-look {
    --visionx-quick-look-action-columns:
      minmax(8.5rem, 1fr) 7.5rem minmax(8.5rem, 1fr)
      minmax(8.5rem, 1fr) 7.5rem minmax(8.5rem, 1fr);
    --visionx-quick-look-action-gap: clamp(.55rem, 1.2vw, .9rem);
    --visionx-quick-look-action-padding: clamp(.8rem, 1.6vw, 1.25rem);
  }

  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-navigation {
    grid-template-columns: var(--visionx-quick-look-action-columns) !important;
    align-items: center !important;
    column-gap: var(--visionx-quick-look-action-gap) !important;
    padding: .8rem var(--visionx-quick-look-action-padding) !important;
    background: rgba(5, 6, 4, .12) !important;
  }

  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-navigation > .workspace-quick-look-actions {
    display: contents !important;
  }

  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-footer-actions > :is(button, a),
  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-navigation button {
    height: var(--visionx-inline-control-height) !important;
    min-height: var(--visionx-inline-control-height) !important;
  }
}

/* Main tab eyebrow labels use the same original solid VisionX gold as
   modal headers such as Import CSV. No gradient text mask or glow is applied. */
html[data-visionx-theme] body.visionx-shell main#main-content header .micro-label {
  color: var(--gold-soft) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

/* Headers are interface chrome rather than document content. Prevent text or
   artwork selection without changing button, link, or keyboard interaction. */
body.visionx-shell header,
body.visionx-shell header * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Membership Status is the Search Assets field's companion control. Its
   trigger therefore uses the same quiet surface, border and corner geometry
   instead of the older raised gold card treatment. */
html[data-visionx-theme] body.visionx-shell .registry-query-controls .registry-membership-filter .visionx-select-button {
  border: 1px solid var(--visionx-card-surface-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--visionx-field-surface-background) !important;
  box-shadow: inset 0 1px .25rem rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .018) !important;
}


/* Registry filtering is one baseline-aligned control row. Search,
   Membership Status, and the three-state logo filter share exact geometry. */
html[data-visionx-theme] body.visionx-shell .registry-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: .75rem !important;
}

html[data-visionx-theme] body.visionx-shell .registry-query-controls {
  display: grid !important;
  grid-template-columns: minmax(18rem, 1fr) minmax(13rem, .48fr) !important;
  align-items: end !important;
  gap: .75rem !important;
}

html[data-visionx-theme] body.visionx-shell .registry-query-controls :is(.registry-search, .registry-membership-filter) {
  grid-template-rows: auto var(--visionx-inline-control-height) !important;
  align-content: end !important;
  min-height: calc(var(--visionx-inline-control-height) + .96rem) !important;
  margin: 0 !important;
}

html[data-visionx-theme] body.visionx-shell .registry-query-controls .registry-search input,
html[data-visionx-theme] body.visionx-shell .registry-query-controls .registry-membership-filter .visionx-select-button,
html[data-visionx-theme] body.visionx-shell .registry-toolbar .segmented-filter {
  box-sizing: border-box !important;
  height: var(--visionx-inline-control-height) !important;
  min-height: var(--visionx-inline-control-height) !important;
  border: 1px solid var(--visionx-card-surface-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--visionx-field-surface-background) !important;
  box-shadow: inset 0 1px .25rem rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .018) !important;
}

html[data-visionx-theme] body.visionx-shell .registry-toolbar .segmented-filter {
  align-self: end !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html[data-visionx-theme] body.visionx-shell .registry-toolbar .segmented-filter > button {
  height: 100% !important;
  min-height: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 940px) {
  .theme-settings-grid { grid-template-columns: 1fr; }
  .theme-background-actions { grid-template-columns: 1fr; }

  html[data-visionx-theme] body.visionx-shell .visionx-quick-look {
    width: calc(100vw - 1.25rem) !important;
    height: calc(100dvh - 1.25rem) !important;
    max-width: none !important;
    max-height: none !important;
  }

  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-navigation {
    grid-template-columns: 1fr !important;
  }

  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-navigation .workspace-quick-look-actions + .workspace-quick-look-actions {
    border-top: 0 !important;
    border-left: 0 !important;
  }

  html[data-visionx-theme] body.visionx-shell .registry-toolbar,
  html[data-visionx-theme] body.visionx-shell .registry-query-controls {
    grid-template-columns: 1fr !important;
  }

  html[data-visionx-theme] body.visionx-shell .registry-toolbar .segmented-filter {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  html[data-visionx-theme] body.visionx-shell .visionx-quick-look .workspace-quick-look-actions {
    grid-template-columns: 1fr !important;
  }

  html[data-visionx-theme] body.visionx-shell .visionx-quick-look .workspace-quick-look-actions .context-fact {
    grid-row: 1;
  }

  html[data-visionx-theme] body.visionx-shell .workspace-quick-look-footer-actions {
    grid-template-columns: 1fr !important;
  }
}


/* Step 586 — structural table header separation for WebKit.
   The visible column bar is a detached overlay. A spacer keeps the first row
   below it at rest, while scrolled rows pass behind the real backdrop filter.
   A dedicated native scrollbar begins below the bar on every engine, while the
   filtered viewport stays paint-clipped so Safari cannot composite row glyphs
   across its top edge. */
html[data-visionx-theme] body.visionx-shell .visionx-table-shell {
  --visionx-separated-header-height: 0px;
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-shell > .table-wrap {
  position: relative;
  min-height: 0;
  isolation: isolate;
  contain: paint;
  overflow-y: auto;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  border-top-width: 0 !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-shell > .table-wrap::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-scroll-spacer {
  display: block;
  width: 100%;
  height: var(--visionx-separated-header-height);
  min-height: var(--visionx-separated-header-height);
  pointer-events: none;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-scrollbar {
  position: absolute;
  z-index: 75;
  top: var(--visionx-separated-header-height);
  right: 0;
  bottom: 0;
  width: .68rem;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 181, 71, .7) transparent;
  background: transparent;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-scrollbar[hidden] {
  display: none !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-scrollbar::-webkit-scrollbar-track {
  margin-block: .72rem;
  background: transparent;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-scrollbar-content {
  width: 1px;
  min-height: 100%;
  pointer-events: none;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-header-viewport {
  position: absolute;
  z-index: 70;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden !important;
  contain: paint;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  border: 0 !important;
  background: transparent !important;
  isolation: isolate;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px) saturate(104%) !important;
  backdrop-filter: blur(5px) saturate(104%) !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-header-viewport > table {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  table-layout: fixed;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-measurement {
  position: absolute !important;
  z-index: -1 !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-shell > .table-wrap > table > thead.visionx-table-semantic-head {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The detached header deliberately reuses the pre-structural column-bar paint
   contract. Because its table is fitted to the viewport instead of an expanded
   horizontal scroll width, gradient stops are distributed exactly across the
   visible bar as they were before Step 586. */
html[data-visionx-theme] body.visionx-shell .visionx-table-header-viewport thead {
  position: relative !important;
  z-index: auto !important;
  top: auto !important;
  background:
    linear-gradient(
      to bottom,
      rgba(12, 13, 10, .92) 0,
      rgba(12, 13, 10, .92) calc(100% - 1px),
      rgba(241, 219, 151, .15) calc(100% - 1px),
      rgba(241, 219, 151, .15) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(241, 219, 151, .08),
    0 -3px 0 3px rgba(12, 13, 10, .94) !important;
  isolation: isolate !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  -webkit-backdrop-filter: blur(5px) saturate(104%) !important;
  backdrop-filter: blur(5px) saturate(104%) !important;
}

html[data-visionx-theme] body.visionx-shell .visionx-table-header-viewport th {
  position: relative !important;
  z-index: 1 !important;
  top: auto !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"] body.visionx-shell .visionx-table-header-viewport thead {
  background: var(--visionx-table-header-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(241, 219, 151, .08),
    0 -3px 0 3px rgba(7, 8, 6, .96),
    inset 0 -1px rgba(238, 211, 132, .14) !important;
}

html[data-visionx-theme][data-visionx-custom-tabs="true"] body.visionx-shell .visionx-table-header-viewport thead {
  background:
    var(--visionx-runtime-table-header-sheen),
    var(--visionx-runtime-table-header-gradient) !important;
  box-shadow:
    inset 0 1px 0 rgba(241, 219, 151, .08),
    0 -3px 0 3px rgba(7, 8, 6, .96),
    inset 0 -1px var(--visionx-runtime-tab-border) !important;
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"] body.visionx-shell .visionx-table-header-viewport th,
html[data-visionx-theme][data-visionx-custom-tabs="true"] body.visionx-shell .visionx-table-header-viewport th {
  background: transparent !important;
}

/* Step 578 — aligned peer actions and theme-owned dropdown materials. */

/* Only the shorter peer controls grow. Existing widths, gaps, colours and
   interaction treatments remain owned by their original component rules. */
html[data-visionx-theme] body.visionx-shell #pack-maintenance-add-asset {
  height: var(--visionx-inline-control-height) !important;
  min-height: var(--visionx-inline-control-height) !important;
}

html[data-visionx-theme] body.visionx-shell :is(#pack-maintenance-review, #pack-maintenance-delete),
html[data-visionx-theme] body.visionx-shell #registry-add-asset {
  height: 2.8rem !important;
  min-height: 2.8rem !important;
}

/* A menu exposes a protected scrollbar lane only while its content overflows.
   Runtime measurement supplies just the portion not already occupied by a
   platform scrollbar, preventing overlay bars from crossing option cards. */
html[data-visionx-theme] body.visionx-shell :where(
  .renderer-dropdown-menu,
  .visionx-floating-combobox,
  .visionx-select-menu,
  #pack-asset-results
) {
  --visionx-dropdown-menu-padding: .42rem;
  --visionx-dropdown-scrollbar-width: .68rem;
  --visionx-dropdown-scroll-lane: 0px;
  box-sizing: border-box !important;
  padding: var(--visionx-dropdown-menu-padding) !important;
  padding-inline-end: calc(var(--visionx-dropdown-menu-padding) + var(--visionx-dropdown-scroll-lane)) !important;
  scrollbar-gutter: auto !important;
}

html[data-visionx-theme] body.visionx-shell :where(
  .renderer-dropdown-menu,
  .visionx-floating-combobox,
  .visionx-select-menu,
  #pack-asset-results
)[data-scrollable="true"] {
  padding-inline-end: calc(.08rem + var(--visionx-dropdown-scroll-lane)) !important;
}

/* Classic without a custom gradient intentionally receives none of the
   appearance rules below. The other three modes derive their menu, row and
   hover surfaces from the same canonical card material as their page theme. */
html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"] body.visionx-shell {
  --visionx-themed-dropdown-surface: var(--visionx-card-surface-background);
  --visionx-themed-dropdown-row:
    linear-gradient(rgba(7, 8, 6, .34), rgba(7, 8, 6, .4)),
    var(--visionx-runtime-tab-gradient);
  --visionx-themed-dropdown-row-hover:
    linear-gradient(rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    var(--visionx-themed-dropdown-row);
  --visionx-themed-dropdown-backdrop: none;
  --visionx-themed-dropdown-thumb: rgba(224, 227, 222, .44);
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"] body.visionx-shell {
  --visionx-themed-dropdown-surface: var(--visionx-card-surface-background);
  --visionx-themed-dropdown-row:
    linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .022)),
    linear-gradient(rgba(7, 8, 6, .18), rgba(7, 8, 6, .24)),
    var(--visionx-card-surface-background);
  --visionx-themed-dropdown-row-hover:
    linear-gradient(120deg, rgba(255, 255, 255, .145), rgba(255, 255, 255, .035) 58%, transparent),
    var(--visionx-themed-dropdown-row);
  --visionx-themed-dropdown-backdrop: blur(18px) saturate(118%);
  --visionx-themed-dropdown-thumb: rgba(224, 227, 222, .4);
}

html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"] body.visionx-shell {
  --visionx-themed-dropdown-surface: var(--visionx-card-surface-background);
  --visionx-themed-dropdown-row:
    linear-gradient(rgba(255, 255, 255, .075), rgba(255, 255, 255, .024)),
    linear-gradient(rgba(7, 8, 6, .2), rgba(7, 8, 6, .27)),
    var(--visionx-card-surface-background);
  --visionx-themed-dropdown-row-hover:
    linear-gradient(120deg, rgba(255, 255, 255, .155), rgba(255, 255, 255, .04) 58%, transparent),
    var(--visionx-themed-dropdown-row);
  --visionx-themed-dropdown-backdrop: blur(18px) saturate(118%);
  --visionx-themed-dropdown-thumb: rgba(224, 227, 222, .42);
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .renderer-dropdown-menu,
  .visionx-floating-combobox,
  .visionx-select-menu,
  #pack-asset-results
) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-themed-dropdown-surface) !important;
  background-clip: padding-box !important;
  box-shadow:
    0 1.35rem 3.8rem rgba(0, 0, 0, .58),
    var(--visionx-card-surface-shadow) !important;
  -webkit-backdrop-filter: var(--visionx-themed-dropdown-backdrop) !important;
  backdrop-filter: var(--visionx-themed-dropdown-backdrop) !important;
  scrollbar-color: var(--visionx-themed-dropdown-thumb) transparent !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .renderer-dropdown-menu button[role="option"],
  .visionx-floating-combobox button[role="option"],
  .visionx-select-option,
  #pack-asset-results button[role="option"]
) {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background: var(--visionx-themed-dropdown-row) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .renderer-dropdown-menu button[role="option"],
  .visionx-floating-combobox button[role="option"],
  .visionx-select-option,
  #pack-asset-results button[role="option"]
):not(:hover):not(:focus-visible):not([aria-selected="true"]):not([data-active="true"]):not(.selected) {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background: var(--visionx-themed-dropdown-row) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .renderer-dropdown-menu button[role="option"],
  .visionx-floating-combobox button[role="option"],
  .visionx-select-option,
  #pack-asset-results button[role="option"]
):is(:hover, :focus-visible, [aria-selected="true"], [data-active="true"], .selected) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  outline: 0 !important;
  color: var(--text) !important;
  background: var(--visionx-themed-dropdown-row-hover) !important;
  box-shadow:
    0 0 0 1px rgba(224, 227, 222, .035),
    var(--visionx-card-surface-shadow) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .visionx-select.open .visionx-select-button,
  .visionx-select-button[aria-expanded="true"],
  input[role="combobox"][aria-expanded="true"],
  input[role="combobox"]:focus-visible
) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  outline: 0 !important;
  background: var(--visionx-field-surface-background) !important;
  background-clip: var(--visionx-field-surface-background-clip) !important;
  box-shadow:
    inset 0 1px .25rem rgba(0, 0, 0, .28) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell .header-identity-menu {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-themed-dropdown-surface) !important;
  background-clip: padding-box !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell .header-identity-menu button {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-themed-dropdown-row) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell .header-identity-menu button:is(:hover, :focus-visible) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  color: var(--text) !important;
  background: var(--visionx-themed-dropdown-row-hover) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="glass"] body.visionx-shell .header-identity-menu {
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .visionx-select-menu,
  .visionx-floating-combobox,
  #pack-asset-results,
  .renderer-dropdown-menu
)::-webkit-scrollbar-thumb {
  border-width: .19rem !important;
  background: var(--visionx-themed-dropdown-thumb) !important;
  background-clip: padding-box !important;
}

html[data-visionx-theme] body.visionx-shell :where(
  .visionx-select-menu,
  .visionx-floating-combobox,
  #pack-asset-results,
  .renderer-dropdown-menu
)::-webkit-scrollbar {
  width: .68rem !important;
}

html[data-visionx-theme] body.visionx-shell :where(
  .visionx-select-menu,
  .visionx-floating-combobox,
  #pack-asset-results,
  .renderer-dropdown-menu
)::-webkit-scrollbar-thumb {
  border-width: .19rem !important;
}

/* The Timeframe Library is a nested part of its dropdown, not a separate
   black panel. Every nested card consumes the same row and hover material as
   the options above it, including the opacity-aware Glass blur beneath it. */
:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell :where(
  .renderer-timeframe-manage,
  .renderer-timeframe-management-row
) {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background: var(--visionx-themed-dropdown-row) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell .renderer-timeframe-manager-panel {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-themed-dropdown-surface) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell .renderer-timeframe-manager-controls input {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-field-surface-background) !important;
  background-clip: var(--visionx-field-surface-background-clip) !important;
}

:is(
  html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="false"],
  html[data-visionx-theme="glass"][data-visionx-custom-tabs="true"]
) body.visionx-shell .renderer-timeframe-manage:is(:hover, :focus-visible, [aria-expanded="true"]) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  color: var(--text) !important;
  background: var(--visionx-themed-dropdown-row-hover) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

/* Render-specific legacy selectors may still own geometry, but in unmodified
   Classic their paint is explicitly identical to the Workspace menus. */
html[data-visionx-theme="classic"][data-visionx-custom-tabs="false"] body.visionx-shell :is(
  #renderer-asset-results,
  #renderer-timeframe-results
) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    0 1.35rem 3.8rem rgba(0, 0, 0, .58),
    var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs="false"] body.visionx-shell :is(
  #renderer-asset-results,
  #renderer-timeframe-results
) button[role="option"] {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background:
    linear-gradient(rgba(255, 255, 255, .026), rgba(255, 255, 255, .008)),
    var(--visionx-card-surface-background) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs="false"] body.visionx-shell :is(
  #renderer-asset-results,
  #renderer-timeframe-results
) button[role="option"]:is(
  :hover,
  :focus-visible,
  [aria-selected="true"],
  [data-active="true"]
) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  color: var(--text) !important;
  background:
    linear-gradient(125deg, rgba(207, 173, 82, .15), rgba(255, 255, 255, .028) 58%, transparent),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    0 0 0 1px rgba(238, 211, 132, .035),
    var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs="false"] body.visionx-shell :where(
  .renderer-timeframe-manage,
  .renderer-timeframe-management-row
) {
  border-color: var(--visionx-card-surface-border) !important;
  background:
    linear-gradient(rgba(255, 255, 255, .026), rgba(255, 255, 255, .008)),
    var(--visionx-card-surface-background) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs="false"] body.visionx-shell .renderer-timeframe-manager-panel {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

/* Step 581 — Classic menu parity and review-surface alignment. */

/* Every Classic dropdown now consumes the same translucent card material as
   the Render menus. This is deliberately scoped away from Glass, and the
   blur is retained in both plain and custom-gradient Classic modes so page
   copy cannot compete with menu labels through the surface. */
html[data-visionx-theme="classic"] body.visionx-shell {
  --visionx-classic-dropdown-surface: var(--visionx-card-surface-background);
  --visionx-classic-dropdown-row:
    linear-gradient(rgba(255, 255, 255, .026), rgba(255, 255, 255, .008)),
    var(--visionx-card-surface-background);
  --visionx-classic-dropdown-row-hover:
    linear-gradient(125deg, rgba(207, 173, 82, .15), rgba(255, 255, 255, .028) 58%, transparent),
    var(--visionx-card-surface-background);
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell :where(
  .renderer-dropdown-menu,
  .visionx-floating-combobox,
  .visionx-select-menu,
  #pack-asset-results,
  .header-identity-menu
) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-classic-dropdown-surface) !important;
  background-clip: padding-box !important;
  box-shadow:
    0 1.35rem 3.8rem rgba(0, 0, 0, .58),
    var(--visionx-card-surface-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
  backdrop-filter: blur(18px) saturate(110%) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell :where(
  .renderer-dropdown-menu button[role="option"],
  .visionx-floating-combobox button[role="option"],
  .visionx-select-option,
  #pack-asset-results button[role="option"],
  .header-identity-menu button
) {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background: var(--visionx-classic-dropdown-row) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell :where(
  .renderer-dropdown-menu button[role="option"],
  .visionx-floating-combobox button[role="option"],
  .visionx-select-option,
  #pack-asset-results button[role="option"],
  .header-identity-menu button
):is(:hover, :focus-visible, [aria-selected="true"], [data-active="true"], .selected) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  outline: 0 !important;
  color: var(--text) !important;
  background: var(--visionx-classic-dropdown-row-hover) !important;
  box-shadow:
    0 0 0 1px rgba(238, 211, 132, .035),
    var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell :where(
  .renderer-timeframe-manage,
  .renderer-timeframe-management-row
) {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text-muted) !important;
  background: var(--visionx-classic-dropdown-row) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell .renderer-timeframe-manage:is(:hover, :focus-visible, [aria-expanded="true"]) {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  color: var(--text) !important;
  background: var(--visionx-classic-dropdown-row-hover) !important;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs] body.visionx-shell .renderer-timeframe-manager-panel {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-classic-dropdown-surface) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
  backdrop-filter: blur(18px) saturate(110%) !important;
}

/* Keep the two Pack review actions together at the right edge. Their existing
   DOM order places deletion immediately to the left of change review. */
html[data-visionx-theme] body.visionx-shell .pack-maintenance-actions .primary-action {
  margin-left: 0 !important;
}

/* Review warnings align with the inner edges of the summary and route cards,
   whose parent sections each contribute a second 1.1rem inset. */
html[data-visionx-theme] body.visionx-shell #server-preview-issues.server-preview-issues {
  margin-inline: 2.2rem !important;
}

/* Pack preflight facts and change rows are genuine nested cards, so they must
   respond to the selected card material in every active theme. */
html[data-visionx-theme] body.visionx-shell :where(
  .pack-preflight-overview > span,
  .pack-preflight-changes li
) {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

/* Canonical PNGs retain their own transparency without an added image tile or
   outline. The surrounding Registry card supplies the necessary structure. */
html[data-visionx-theme] body.visionx-shell .registry-logo-card img {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Step 586–587 — the Publish action retains its established treatment. Selected
   Pack controls adopt that same raised construction and shimmer while using
   an unambiguous state colour. */
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected {
  position: relative !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .06),
    0 .55rem 1.35rem rgba(0, 0, 0, .26) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .42) !important;
}

html[data-visionx-theme="glass"] body.visionx-shell .publication-pack-pill.selected {
  -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
  backdrop-filter: blur(12px) saturate(108%) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected::after {
  content: "" !important;
  position: absolute !important;
  inset: -30% auto -30% -50% !important;
  width: 34% !important;
  transform: skewX(-18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(230, 236, 232, .2), transparent) !important;
  pointer-events: none !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected span {
  color: inherit !important;
  opacity: .72 !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected.publication-ready {
  border-color: rgba(100, 198, 126, .76) !important;
  color: #d8f1df !important;
  background:
    linear-gradient(135deg, rgba(50, 142, 77, .34) 0%, rgba(17, 63, 33, .5) 54%, rgba(5, 22, 13, .42) 100%),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px rgba(220, 255, 229, .1),
    0 .55rem 1.35rem rgba(0, 0, 0, .28),
    0 0 1rem rgba(61, 167, 91, .11) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected.publication-ready:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected.publication-ready:focus-visible {
  border-color: rgba(127, 218, 151, .9) !important;
  color: #edfaf1 !important;
  background:
    linear-gradient(135deg, rgba(63, 165, 92, .44) 0%, rgba(21, 79, 41, .6) 54%, rgba(7, 30, 17, .5) 100%),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    inset 0 1px rgba(226, 255, 234, .14),
    0 .65rem 1.5rem rgba(0, 0, 0, .31),
    0 0 1.2rem rgba(73, 187, 104, .16) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected.publication-blocked {
  border-color: rgba(213, 101, 94, .76) !important;
  color: #f1d7d4 !important;
  background:
    linear-gradient(135deg, rgba(153, 51, 46, .34) 0%, rgba(72, 23, 21, .5) 54%, rgba(26, 7, 7, .42) 100%),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px rgba(255, 222, 218, .09),
    0 .55rem 1.35rem rgba(0, 0, 0, .28),
    0 0 1rem rgba(194, 68, 61, .1) !important;
}

html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected.publication-blocked:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected.publication-blocked:focus-visible {
  border-color: rgba(231, 126, 118, .9) !important;
  color: #fbecea !important;
  background:
    linear-gradient(135deg, rgba(177, 63, 57, .43) 0%, rgba(89, 29, 26, .6) 54%, rgba(34, 10, 9, .5) 100%),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    inset 0 1px rgba(255, 228, 224, .13),
    0 .65rem 1.5rem rgba(0, 0, 0, .31),
    0 0 1.2rem rgba(212, 79, 71, .15) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-visionx-theme] body.visionx-shell .publication-pack-pill.selected:hover:not(:disabled)::after {
    animation: visionx-shimmer .75s ease-out !important;
  }
}

@media (max-width: 44rem) {
  html[data-visionx-theme] body.visionx-shell #server-preview-issues.server-preview-issues {
    margin-inline: 1.1rem !important;
  }
}

/* Step 582–583 — restore the Pack-change contrast edge as an independent,
   consistently gold accent. The card's full border continues to follow its
   theme; only the leading edge keeps this fixed VisionX highlight. */
html[data-visionx-theme] body.visionx-shell {
  --visionx-pack-change-accent: rgba(239, 205, 102, .68);
}

html[data-visionx-theme] body.visionx-shell .pack-preflight-changes li {
  border-left-width: 2px !important;
  border-left-color: var(--visionx-pack-change-accent) !important;
}

/* Step 589 — publication readiness cards retain the active card material while
   their border, tint, and restrained glow communicate the current state. */
html[data-visionx-theme] body.visionx-shell main#main-content .view .publication-gate-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transition: border-color .18s ease-out, box-shadow .18s ease-out !important;
}

html[data-visionx-theme] body.visionx-shell main#main-content .view .publication-gate-card.blocked {
  border-color: rgba(218, 103, 96, .42) !important;
  background:
    linear-gradient(108deg, rgba(138, 42, 38, .105), rgba(74, 23, 21, .045) 36%, transparent 68%),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    0 0 1.25rem rgba(198, 71, 64, .065) !important;
}

html[data-visionx-theme] body.visionx-shell main#main-content .view .publication-gate-card.ready {
  border-color: rgba(105, 193, 129, .4) !important;
  background:
    linear-gradient(108deg, rgba(48, 133, 72, .095), rgba(22, 72, 38, .04) 36%, transparent 68%),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    0 0 1.25rem rgba(67, 166, 94, .06) !important;
}

html[data-visionx-theme="glass"] body.visionx-shell main#main-content .view .publication-gate-card {
  -webkit-backdrop-filter: blur(10px) saturate(106%) !important;
  backdrop-filter: blur(10px) saturate(106%) !important;
}

/* Step 591 — adaptive contrast protection for operator-created themes.
   Runtime luminance sampling supplies only the minimum dark veil needed by a
   bright gradient or background. Dark custom themes therefore retain their
   accepted material, while light combinations keep the same colour direction
   beneath a legible surface rather than replacing the operator's palette. */
html[data-visionx-contrast-guard="true"] body.visionx-shell {
  --text: #f8f6f0;
  --text-muted: #dfdcd3;
  --text-faint: #c9c6bc;
}

html[data-visionx-theme="classic"][data-visionx-custom-tabs="true"] body.visionx-shell {
  --visionx-tab-surface-background:
    var(--visionx-runtime-contrast-veil),
    var(--visionx-runtime-tab-gradient);
  --visionx-card-surface-background:
    var(--visionx-runtime-card-contrast-veil),
    var(--visionx-runtime-tab-gradient);
  --visionx-menu-surface-background:
    var(--visionx-runtime-menu-contrast-veil),
    var(--visionx-runtime-tab-gradient),
    #080907;
  --visionx-menu-option-background:
    var(--visionx-runtime-menu-option-contrast-veil),
    var(--visionx-runtime-tab-gradient),
    #080907;
  --visionx-table-header-surface:
    var(--visionx-runtime-contrast-veil),
    var(--visionx-runtime-table-header-sheen),
    var(--visionx-runtime-table-header-gradient),
    #20221d;
}

/* Step 592 — Glass deliberately keeps its original translucent material. The
   adaptive luminance veil remains a Classic custom-gradient safeguard only;
   neither the Glass opacity nor the visible site background strengthens it. */

/* Step 595 — Glass once again samples its selected gradient and visible canvas
   for text-token adaptation, but that measurement never enters a Glass fill.
   Opacity alone therefore owns the material: 0% remains undarkened while the
   foreground can still move to the protected text palette when needed. */

/* Help-card dismissal uses the selected Publication Pack construction without
   changing its compact geometry. Success messages inherit the ready state;
   warnings and errors inherit the blocked state. */
html[data-visionx-theme] body.visionx-shell .message-dismiss {
  position: relative !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  backdrop-filter: var(--visionx-tab-surface-backdrop) !important;
  transform: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .42) !important;
}

html[data-visionx-theme="glass"] body.visionx-shell .message-dismiss {
  -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
  backdrop-filter: blur(12px) saturate(108%) !important;
}

html[data-visionx-theme] body.visionx-shell .message-dismiss::after {
  content: "" !important;
  position: absolute !important;
  inset: -30% auto -30% -50% !important;
  width: 34% !important;
  transform: skewX(-18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(230, 236, 232, .2), transparent) !important;
  pointer-events: none !important;
}

html[data-visionx-theme] body.visionx-shell .message.success .message-dismiss {
  border-color: rgba(100, 198, 126, .76) !important;
  color: #d8f1df !important;
  background:
    linear-gradient(135deg, rgba(50, 142, 77, .34) 0%, rgba(17, 63, 33, .5) 54%, rgba(5, 22, 13, .42) 100%),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px rgba(220, 255, 229, .1),
    0 .55rem 1.35rem rgba(0, 0, 0, .28),
    0 0 1rem rgba(61, 167, 91, .11) !important;
}

html[data-visionx-theme] body.visionx-shell .message.success .message-dismiss:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .message.success .message-dismiss:focus-visible {
  border-color: rgba(127, 218, 151, .9) !important;
  color: #edfaf1 !important;
  background:
    linear-gradient(135deg, rgba(63, 165, 92, .44) 0%, rgba(21, 79, 41, .6) 54%, rgba(7, 30, 17, .5) 100%),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    inset 0 1px rgba(226, 255, 234, .14),
    0 .65rem 1.5rem rgba(0, 0, 0, .31),
    0 0 1.2rem rgba(73, 187, 104, .16) !important;
}

html[data-visionx-theme] body.visionx-shell .message:not(.success) .message-dismiss {
  border-color: rgba(213, 101, 94, .76) !important;
  color: #f1d7d4 !important;
  background:
    linear-gradient(135deg, rgba(153, 51, 46, .34) 0%, rgba(72, 23, 21, .5) 54%, rgba(26, 7, 7, .42) 100%),
    var(--visionx-card-surface-background) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px rgba(255, 222, 218, .09),
    0 .55rem 1.35rem rgba(0, 0, 0, .28),
    0 0 1rem rgba(194, 68, 61, .1) !important;
}

html[data-visionx-theme] body.visionx-shell .message:not(.success) .message-dismiss:hover:not(:disabled),
html[data-visionx-theme] body.visionx-shell .message:not(.success) .message-dismiss:focus-visible {
  border-color: rgba(231, 126, 118, .9) !important;
  color: #fbecea !important;
  background:
    linear-gradient(135deg, rgba(177, 63, 57, .43) 0%, rgba(89, 29, 26, .6) 54%, rgba(34, 10, 9, .5) 100%),
    var(--visionx-card-surface-background) !important;
  box-shadow:
    inset 0 1px rgba(255, 228, 224, .13),
    0 .65rem 1.5rem rgba(0, 0, 0, .31),
    0 0 1.2rem rgba(212, 79, 71, .15) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-visionx-theme] body.visionx-shell .message-dismiss:hover:not(:disabled)::after {
    animation: visionx-shimmer .75s ease-out !important;
  }
}

/* Step 601 — Step 597 baseline with selected dropdown corrections retained. */

/* A practically invisible neutral primer keeps Glass dropdown compositing
   active at 0% material opacity without darkening the selected background. */
html[data-visionx-theme="glass"][data-visionx-custom-tabs] body.visionx-shell {
  --visionx-glass-compositor-primer:
    linear-gradient(rgba(255, 255, 255, .006), rgba(255, 255, 255, .006));
  --visionx-themed-dropdown-surface:
    var(--visionx-glass-compositor-primer),
    var(--visionx-card-surface-background);
  --visionx-themed-dropdown-backdrop: blur(22px) saturate(122%);
}

/* Render carried an older ID-specific opaque-menu rule. Keep both Render
   comboboxes on the same shared Glass dropdown material as every other menu. */
html[data-visionx-theme="glass"] body.visionx-shell #view-renderer :is(
  #renderer-asset-results,
  #renderer-timeframe-results
) {
  background: var(--visionx-themed-dropdown-surface) !important;
  background-clip: padding-box !important;
  -webkit-backdrop-filter: var(--visionx-themed-dropdown-backdrop) !important;
  backdrop-filter: var(--visionx-themed-dropdown-backdrop) !important;
}

/* Step 616 — forum tags consume the canonical active Theme surface.
   Tag cards retain their selected/focus semantics while inheriting the exact
   Classic, Glass, and custom-gradient material selected by the operator. */
html[data-visionx-theme] body.visionx-shell .thread-tags {
  border-color: var(--visionx-card-surface-border) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme] body.visionx-shell .thread-tag-option {
  border-color: var(--visionx-card-surface-border) !important;
  color: var(--text) !important;
  background: var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow: var(--visionx-card-surface-shadow) !important;
}

html[data-visionx-theme] body.visionx-shell .thread-tag-option:hover,
html[data-visionx-theme] body.visionx-shell .thread-tag-option:focus-within {
  border-color: var(--visionx-tab-surface-hover-border) !important;
  background:
    linear-gradient(
      rgba(255, 255, 255, .055),
      rgba(255, 255, 255, .018)
    ),
    var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    inset 0 1px rgba(255, 255, 255, .04) !important;
}

html[data-visionx-theme] body.visionx-shell
.thread-tag-option:has(input:checked) {
  border-color: rgba(239, 205, 102, .62) !important;
  background:
    linear-gradient(
      135deg,
      rgba(207, 173, 82, .18),
      rgba(207, 173, 82, .045)
    ),
    var(--visionx-card-surface-background) !important;
  background-clip: var(--visionx-card-surface-background-clip) !important;
  box-shadow:
    var(--visionx-card-surface-shadow),
    inset 0 0 0 1px rgba(239, 205, 102, .08) !important;
}