/* Additive paint layer. Existing layout, type sizes, spacing, visibility,
   table geometry, drawer/modal mechanics and business states stay authoritative.
   Loaded after all existing CSS, including lazy module links. */
html:root[data-theme] {
  --navy: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-strong);
  --bg: var(--bg-deep);
  --blue: var(--teal-dim);
  --surface: var(--bg-elevated);
  --premium-ink: var(--bg-base);
  --premium-ink-raised: var(--bg-surface);
  --premium-blue-soft: var(--teal-soft);
  --premium-shadow: var(--shadow-sm);
  --glass: rgba(23,28,38,.84);
  --glass-top: rgba(255,255,255,.12);
  --field: rgba(11,14,20,.62);
  --table-head: rgba(28,34,48,.96);
  --teal-ink: #062d25;
  --role: #f2c3ad;
  --role-bg: rgba(227,159,127,.12);
  --login-star: #b2cdeb;
  --login-line: rgba(170,210,255,.66);
  color-scheme: dark;
}
html:root[data-theme="light"] {
  --glass: rgba(255,255,255,.84);
  --glass-top: rgba(255,255,255,.95);
  --field: rgba(255,255,255,.92);
  --table-head: #eef1f5;
  --teal-ink: #064f42;
  --role: #945433;
  --role-bg: #fae8dd;
  --login-star: #1c3460;
  --login-line: rgba(36,64,112,.75);
  color-scheme: light;
}
html:root[data-theme][data-shx-theme] {
  /* Preserve the original 14px root and line-height: changing rem geometry
     to the demo's 15px would violate the existing-layout requirement. */
  --border: var(--border-strong);
  font-family: var(--font) !important;
}
html:root[data-theme] body {
  --px-text: var(--text-primary);
  --px-muted: var(--text-secondary);
  --px-head: var(--table-head);
  --px-border: var(--border-strong);
}
html:root[data-theme][data-shx-theme] body,
html:root[data-theme][data-shx-theme] body .app-main,
html:root[data-theme][data-shx-theme] body #page-content {
  background: var(--bg-deep) !important; color: var(--text-primary) !important;
}
html:root[data-theme][data-shx-theme] body :is(h1,h2,h3,h4,strong) { color: inherit !important; }
html:root[data-theme][data-shx-theme] body :is(.muted,.subtext,.eyebrow,.metric-label,.metric-detail,.terminal-footnote,.nav-label,.space-description,.space-number,.support-message-meta,.support-conversation-heading small,.material-sync-time) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body :is(.sidebar,.topbar,#terminal-shell-top,.choice-header) {
  background: var(--glass) !important; color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  box-shadow: inset 0 1px var(--glass-top),var(--shadow-sm) !important;
  
  
}
html:root[data-theme][data-shx-theme] body #app-view .sidebar :is(.brand,.nav-item,.nav-label,.sidebar-bottom,.brand small),
html:root[data-theme][data-shx-theme] body .terminal-shell-brand { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body #app-view .sidebar .brand { color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body #app-view .sidebar .nav-item:not(.active):hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body #app-view .sidebar .nav-item.active {
  background: var(--teal-soft) !important; color: var(--teal) !important;
  box-shadow: inset 3px 0 var(--teal) !important;
}
html:root[data-theme][data-shx-theme] body :is(.workspace-switch,#terminal-global-search) {
  background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body :is(.workspace-card,.metric,.data-panel,.dashboard-original-card,.dashboard-metric,.dashboard-health-card,.wb-cockpit-board,.wb-card,.wb-kpi,.support-layout,.support-admin,.support-settings,.support-account-card,.material-compact-metrics,[data-material-disclosure],.grid-record-field,.terminal-detail-field) {
  background: var(--glass) !important; color: var(--text-primary) !important;
  border-color: var(--border-strong) !important; border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px var(--glass-top),var(--shadow-sm) !important;
  
  
}
html:root[data-theme][data-shx-theme] body .choice-layout {
  background: linear-gradient(145deg,var(--bg-deep),var(--bg-base)) !important; color: var(--text-primary) !important;
}
html:root[data-theme][data-shx-theme] body .workspace-card:hover {
  background: var(--bg-hover) !important; border-color: var(--border-teal) !important; box-shadow: var(--shadow-md) !important;
}
html:root[data-theme][data-shx-theme] body :is(.button,.icon-button,.row-actions button,.terminal-page-toolbar button,.terminal-toolbar button) {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important;
  border-color: var(--border-strong) !important; border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
html:root[data-theme][data-shx-theme] body :is(.button,.icon-button,.row-actions button):hover {
  background: var(--bg-hover) !important; border-color: var(--border-teal) !important;
}
html:root[data-theme][data-shx-theme] body .button.primary,
html:root[data-theme][data-shx-theme] body .button.primary:hover {
  background: linear-gradient(135deg,var(--teal),var(--teal-dim)) !important;
  color: #052c24 !important; border-color: var(--teal-dim) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22),0 4px 12px var(--teal-soft) !important;
}
html:root[data-theme][data-shx-theme] body .button.subtle { background: transparent !important; }
html:root[data-theme][data-shx-theme] body .button.danger { color: var(--danger) !important; }
html:root[data-theme][data-shx-theme] body :is(input,select,textarea) {
  color: var(--text-primary) !important; background-color: var(--field) !important; border-color: var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
}
html:root[data-theme][data-shx-theme] body input::placeholder,
html:root[data-theme][data-shx-theme] body textarea::placeholder { color: var(--text-secondary) !important; opacity: .8 !important; }
html:root[data-theme][data-shx-theme] body :is(input,select,textarea):focus {
  border-color: var(--teal-dim) !important; box-shadow: 0 0 0 3px var(--teal-soft) !important;
}
html:root[data-theme][data-shx-theme] body :is(button,a,input,select,textarea,summary):focus-visible { outline-color: var(--teal-dim) !important; }
html:root[data-theme][data-shx-theme] body :is(.panel-toolbar,.panel-bottom,.filters,.terminal-page-toolbar,.terminal-tabs,.wb-view-bar,.support-compose,.support-conversation-heading,.support-account-list,.support-chat-list) {
  background-color: var(--glass) !important; color: var(--text-secondary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) { color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) :is(th,td) {
  border-color: var(--border-strong) !important; color: var(--text-primary) !important;
}
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) th {
  background: var(--table-head) !important; color: var(--text-secondary) !important;
}
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) tbody tr {
  background: transparent !important; box-shadow: none !important;
}
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) tbody tr:hover {
  background: var(--teal-soft) !important; box-shadow: none !important;
}
html:root[data-theme][data-shx-theme] body tr[aria-selected="true"] { background: var(--teal-soft) !important; }
html:root[data-theme][data-shx-theme] body :is(.badge,.b2-status,.shx-presence,.support-badge,.material-level) {
  border-radius: 999px !important; background-color: var(--bg-surface) !important; color: var(--text-secondary) !important;
}
html:root[data-theme][data-shx-theme] body :is(.badge.green,.b2-status.success,.shx-presence--recent,.support-badge.ready,.health-status.success) {
  background-color: var(--teal-soft) !important; color: var(--teal) !important;
}
html:root[data-theme][data-shx-theme] body :is(.badge.red,.b2-status.danger,.health-status.danger) { background: rgba(219,79,93,.12) !important; color: var(--danger) !important; }
html:root[data-theme][data-shx-theme] body :is(.b2-status.warning,.health-status.warning,.material-sync-warning) { color: var(--gold) !important; }
html:root[data-theme][data-shx-theme] body .shx-presence--idle { background: var(--bg-surface) !important; color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body :is([id^="people-search-"],.material-sync-progress) { background-color: var(--glass) !important; color: var(--text-secondary) !important; border-color: var(--border-strong) !important; }
html:root[data-theme][data-shx-theme] body :is(.material-level) { color: var(--role) !important; background-color: var(--role-bg) !important; }
html:root[data-theme][data-shx-theme] body .material-sync-running { color: var(--info) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-conversation,.support-feed) { background: var(--bg-deep) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-account-option,.support-chat-option) { color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-account-option,.support-chat-option):hover { background: var(--bg-hover) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-account-option,.support-chat-option).selected {
  background: var(--teal-soft) !important; color: var(--teal) !important; border-color: var(--border-teal) !important; box-shadow: inset 3px 0 var(--teal) !important;
}
html:root[data-theme][data-shx-theme] body .support-message {
  background: var(--bg-elevated) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important; border-radius: var(--radius-md) !important;
}
html:root[data-theme][data-shx-theme] body .support-message.outgoing {
  background: var(--teal-soft) !important; border-color: var(--border-teal) !important; color: var(--text-primary) !important;
}
html:root[data-theme][data-shx-theme] body :is(dialog,#form-dialog) {
  background: var(--glass) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
  border-radius: var(--radius-lg) !important; box-shadow: inset 0 1px var(--glass-top),var(--shadow-lg) !important;
   
}
html:root[data-theme][data-shx-theme] body dialog::backdrop {
  background: rgba(6,11,18,.52) !important;  
}
html:root[data-theme][data-shx-theme] body :is(.dialog-heading,.dialog-actions,.dialog-form,.dialog-card,.grid-record-card,#dialog-content) {
  background-color: transparent !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body :is(#toast,.toast,.notice) {
  background: var(--glass) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
  border-radius: var(--radius-md) !important; box-shadow: inset 0 1px var(--glass-top),var(--shadow-sm) !important;
   
}
html:root[data-theme][data-shx-theme] body .notice.error { color: var(--danger) !important; border-color: rgba(219,79,93,.4) !important; }
html:root[data-theme][data-shx-theme] body .dashboard-sparkline path { stroke: var(--teal) !important; }
html:root[data-theme][data-shx-theme] body .dashboard-sparkline polygon { fill: var(--teal-soft) !important; }
/* Existing login geometry and bounded SVG/CSS animation pools are reused. */
html:root[data-theme][data-shx-theme] body #login-view {
  background: linear-gradient(145deg,var(--bg-deep),var(--bg-base)) !important;
}
html:root[data-theme][data-shx-theme] body #login-view :is(.brand-stage,.login-side) { background: transparent !important; color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body #login-view .login-box {
  background: var(--glass) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important;
  border-radius: var(--radius-xl) !important; box-shadow: inset 0 1px var(--glass-top),var(--shadow-lg) !important;
   
}
html:root[data-theme][data-shx-theme] body #login-view :is(.brand-title,.login-card-heading h2) { color: var(--text-primary) !important; text-shadow: none !important; }
html:root[data-theme][data-shx-theme] body #login-view :is(.brand-top,.brand-message p,.brand-services,.brand-footer,.login-note,.login-side footer,.card-overline,.login-card-heading p) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body #login-view .login-meteor {
  background: linear-gradient(90deg,transparent,var(--login-line) 68%,var(--login-star)) !important;
}
html:root[data-theme][data-shx-theme] body #login-view .login-meteor::after { background: var(--login-star) !important; }
html:root[data-theme][data-shx-theme] body #login-view .login-constellation circle { fill: var(--login-star) !important; }
html:root[data-theme][data-shx-theme] body #login-view .login-constellation path { stroke: var(--login-line) !important; stroke-opacity: 1 !important; }
html:root[data-theme="light"][data-shx-theme] body #login-view {
  background: linear-gradient(145deg,#f8fafc,#eef1f5) !important;
}
/* The original light login has its own static stars, glass edge and focus halo.
   Keep those effects present in both themes; only the palette changes. */
html:root[data-theme="light"][data-shx-theme] body #login-view :is(.login-galaxy,.login-meteor,.login-constellations,.login-constellation,.login-constellation path,.login-constellation circle),
html:root[data-theme="light"][data-shx-theme] body #login-view .login-meteor::after {
  filter: none !important; box-shadow: none !important; text-shadow: none !important; mix-blend-mode: normal !important;
}
html:root[data-theme="light"][data-shx-theme] body #login-view .login-galaxy { filter: brightness(.68) saturate(.8) !important; }
@supports not (backdrop-filter: blur(1px)) {
  html:root[data-theme][data-shx-theme] body :is(.sidebar,.topbar,.data-panel,.metric,.workspace-card,dialog,.login-box) { background-color: var(--bg-base) !important; }
}

/* Shared terminal paint has existing ID selectors and inline state colors.
   Important is limited to the allowed paint properties in this final layer. */
html:root[data-theme][data-shx-theme] body :is(.wb-cockpit-disclosure,[data-material-disclosure])>summary { background: transparent !important; color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body :is(.wb-cockpit-summary,.wb-cockpit-caption,.wb-cockpit-read-state,.wb-customer-summary-meta,.wb-customer-summary-basis,.dashboard-ranking-row small,.terminal-shell-brand small,label) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) td { background: transparent !important; }
html:root[data-theme][data-shx-theme] body :is(.terminal-grid,.terminal-grid-wrap,.table-scroll,.raw-table-wrap,.wb-disclosure-body) { background-color: transparent !important; border-color: var(--border-strong) !important; }
html:root[data-theme][data-shx-theme] body :is(.space-icon,.terminal-shell-brand small,.wb-view-bar select) { background: var(--bg-surface) !important; color: var(--teal) !important; }

/* Original dashboard/text/grid descendants have their own legacy paint. */
html:root[data-theme][data-shx-theme] body :is(table,tbody,.terminal-grid,.terminal-grid-scroll,.grid-scroll,.grid-viewport,.raw-table-scroll,.grid-record-empty) { background-color: var(--bg-elevated) !important; border-color: var(--border-strong) !important; }
html:root[data-theme][data-shx-theme] body .wb-cockpit-summary :is(span,b,strong),
html:root[data-theme][data-shx-theme] body :is(.wb-cockpit-read-state,.wb-cockpit-caption,.wb-customer-summary-meta,.wb-customer-summary-basis,.dashboard-ranking-empty,.grid-empty,.grid-empty strong,.grid-empty p) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body :is(.wb-health-item.success,.wb-health-item.success b) { color: var(--teal) !important; }
html:root[data-theme][data-shx-theme] body #app-view .sidebar { background-color: var(--glass) !important; border-color: var(--border-strong) !important; }
html:root[data-theme][data-shx-theme] body :is(.sidebar .brand small,.sidebar-bottom,.nav-label) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body .button:disabled { color: var(--text-secondary) !important; background: var(--bg-surface) !important; border-color: var(--border-strong) !important; }

html:root[data-theme][data-shx-theme] { --font: Inter, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif; }
html:root[data-theme][data-shx-theme] body [data-grid="users"] th,html:root[data-theme][data-shx-theme] body [data-grid="staff"] th { background: var(--gold-soft) !important; }
html:root[data-theme][data-shx-theme] body :is([data-grid="users"],[data-grid="staff"]) td[data-cell-key="role"] .row-cell-content { color: var(--role) !important; background: var(--role-bg) !important; border-radius: 999px !important; }

/* Keep fixed descendants anchored to the viewport. Blur only leaf surfaces;
   never establish a containing block on cards/tables/dialogs with raw menus. */
html:root[data-theme][data-shx-theme] body :is(.metric,.dashboard-metric,.dashboard-health-card,.workspace-card,#toast) { -webkit-backdrop-filter: blur(12px) saturate(140%) !important; backdrop-filter: blur(12px) saturate(140%) !important; }
html:root[data-theme][data-shx-theme] body dialog::backdrop { -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; }
html:root[data-theme][data-shx-theme] body :is(table,.raw-table,.grid-table,.terminal-grid-table) tbody tr[aria-selected="true"] { background: var(--teal-soft) !important; box-shadow: inset 3px 0 var(--teal) !important; }
html:root[data-theme][data-shx-theme] body .button[role="tab"][aria-selected="true"] { color: var(--teal) !important; background: var(--teal-soft) !important; border-color: var(--border-teal) !important; }
html:root[data-theme][data-shx-theme] body td.material-money.debt { color: var(--danger) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-message-text,.support-message-meta strong,.support-chat-title,.support-account-option strong,.support-chat-option strong) { color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-chat-toolbar,.support-chat-status,.support-chat-search,.support-page-header,.unified-focus-toolbar,.unified-focus-menu,.raw-row-menu) { background: var(--glass) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body :is(.support-chat-preview,.support-account-option small,.support-chat-option small,.support-message-meta,.material-disclosure-body) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body .material-compact-metric { background: var(--glass) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; border-radius: var(--radius-md) !important; box-shadow: inset 0 1px var(--glass-top) !important; }

html:root[data-theme][data-shx-theme] body .terminal-table-scroll { background: var(--bg-elevated) !important; border-color: var(--border-strong) !important; }
html:root[data-theme][data-shx-theme] body.terminal-mode #app-view .sidebar,
html:root[data-theme][data-shx-theme] body.terminal-mode #terminal-shell-top { background: var(--glass) !important; color: var(--text-primary) !important; }
html:root[data-theme][data-shx-theme] body :is(.b2-disclosure-action,.b2-expand-label,.b2-collapse-label,.wb-disclosure-arrow) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body.support-mode #page-content .support-chat-list input { background: var(--field) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
html:root[data-theme][data-shx-theme] body.support-mode #page-content .support-compose .support-compose-footer>.button[type="submit"] { background: linear-gradient(135deg,var(--teal),var(--teal-dim)) !important; color: #052c24 !important; border-color: var(--teal-dim) !important; }

html:root[data-theme][data-shx-theme] body.support-mode #page-content .support-chat-preview { color: var(--text-secondary) !important; }

/* Approved new control only: no geometry changes to existing elements. */
html:root[data-theme] body .shx-theme-toggle { flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-primary); font: 18px/1 system-ui,sans-serif; cursor: pointer; }
html:root[data-theme] body .shx-theme-toggle:hover { background: var(--teal-soft); border-color: var(--border-teal); color: var(--teal); }
html:root[data-theme] body .shx-theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* R2: glass depth from the approved demo, with existing geometry intact. */
html:root[data-theme] {
  --glass: rgba(24,30,42,.76);
  --glass-sheen: linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.012));
  --surface-edge: rgba(255,255,255,.12);
  --surface-depth: 0 5px 20px rgba(0,0,0,.16);
  --dialog-glass: rgba(23,28,38,.92);
}
html:root[data-theme="light"] {
  --glass: rgba(255,255,255,.78);
  --glass-sheen: linear-gradient(165deg,rgba(255,255,255,.72),rgba(255,255,255,.20));
  --surface-edge: rgba(124,143,166,.18);
  --surface-depth: 0 5px 20px rgba(28,48,74,.065);
  --dialog-glass: rgba(250,252,255,.96);
}
html:root[data-theme][data-shx-theme] body :is(.app-main,#page-content) {
  background: linear-gradient(145deg,var(--bg-deep),var(--bg-base)) !important;
}
html:root[data-theme][data-shx-theme] body :is(.workspace-card,.metric,.data-panel,.dashboard-original-card,.dashboard-metric,.dashboard-health-card,.wb-cockpit-board,.wb-card,.wb-kpi,.material-compact-metrics,[data-material-disclosure],.material-compact-metric) {
  background: var(--glass-sheen),var(--glass) !important;
  border-color: var(--surface-edge) !important;
  box-shadow: inset 0 1px var(--glass-top),inset 0 -1px rgba(0,0,0,.025),var(--surface-depth) !important;
}
html:root[data-theme][data-shx-theme] body :is(.sidebar,.topbar,#terminal-shell-top,.choice-header) {
  background: var(--glass-sheen),var(--glass) !important;
  box-shadow: inset 0 1px var(--glass-top),0 3px 16px rgba(0,0,0,.06) !important;
}
html:root[data-theme][data-shx-theme] body :is(dialog,#form-dialog) {
  background: var(--glass-sheen),var(--dialog-glass) !important;
  border-color: var(--surface-edge) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: inset 0 1px var(--glass-top),0 24px 64px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.12) !important;
}
html:root[data-theme="light"][data-shx-theme] body dialog::backdrop { background: rgba(22,35,56,.30) !important; }
html:root[data-theme][data-shx-theme] body #login-view .login-box {
  background: var(--glass-sheen),var(--glass) !important;
  box-shadow: inset 0 1px var(--glass-top),0 18px 48px rgba(8,20,35,.14) !important;
}
html:root[data-theme][data-shx-theme] body .support-message.outgoing {
  background: linear-gradient(145deg,var(--teal),var(--teal-dim)) !important;
  border-color: var(--border-teal) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2),0 3px 10px var(--teal-soft) !important;
}
html:root[data-theme][data-shx-theme] body .support-message.outgoing :is(.support-message-text,.support-message-meta,.support-message-meta strong) { color: #03241c !important; }
html:root[data-theme][data-shx-theme] body :is(input,select,textarea):focus-visible { outline-color: var(--teal) !important; border-color: var(--teal) !important; box-shadow: 0 0 0 3px var(--teal-soft) !important; }
html:root[data-theme] body .shx-theme-toggle { background: var(--glass-sheen),var(--glass); box-shadow: inset 0 1px var(--glass-top),0 2px 8px rgba(0,0,0,.06); }
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] body .shx-theme-toggle { transition: none; }
}

/* Night UI 212: the login palette is shared by every business component.
   Legacy semantic aliases are essential: modules still consume shx/wb/b2 tokens. */
html:root[data-theme][data-shx-theme] {
  --shx-color-brand: var(--teal-dim); --shx-color-brand-hover: var(--teal);
  --shx-color-text: var(--text-primary); --shx-color-heading: var(--text-primary);
  --shx-color-muted: var(--text-secondary); --shx-color-border: var(--border-strong);
  --shx-color-workspace: var(--bg-deep); --shx-color-surface: var(--bg-elevated);
  --shx-color-success: var(--success); --shx-color-warning: var(--warning);
  --shx-color-danger: var(--danger); --shx-color-focus: var(--info);
  --shx-color-selected: var(--teal-soft); --shx-shadow-dialog: var(--shadow-lg);
  --wb-ink: var(--text-primary); --wb-muted: var(--text-secondary);
  --wb-border: var(--border-strong); --wb-blue: var(--info);
  --wb-panel: var(--bg-elevated); --wb-page: var(--bg-deep);
  --b2-success: var(--success); --b2-success-bg: var(--teal-soft);
  --b2-warning: var(--warning); --b2-warning-bg: var(--gold-soft);
  --b2-danger: var(--danger); --b2-danger-bg: var(--danger-soft);
  --b2-info: var(--info); --b2-info-bg: var(--info-soft);
  --b2-unknown: var(--text-secondary); --b2-unknown-bg: var(--bg-surface);
  --panel: var(--bg-elevated);
}
html:root[data-theme="dark"][data-shx-theme] {
  --glass: rgba(23,30,41,.94); --glass-top: rgba(173,200,234,.08);
  --glass-sheen: linear-gradient(160deg,rgba(163,191,222,.025),transparent 65%);
  --surface-edge: rgba(151,176,210,.20); --dialog-glass: rgba(21,28,39,.98);
}
html:root[data-theme][data-shx-theme] body :is(.app-main,#page-content) {
  background: var(--bg-deep) !important;
}
/* Navigation needs a near-opaque base; translucent rails over old light surfaces
   were the source of the grey text / grey background in the reported screenshot. */
html:root[data-theme][data-shx-theme] body #app-view .sidebar,
html:root[data-theme][data-shx-theme] body :is(#terminal-shell-top,.topbar,.choice-header) {
  background: var(--bg-base) !important; border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
html:root[data-theme][data-shx-theme] body #app-view .sidebar :is(.brand,.brand span),
html:root[data-theme][data-shx-theme] body #app-view .sidebar #navigation .nav-item {
  color: var(--text-primary) !important;
}
html:root[data-theme][data-shx-theme] body #app-view .sidebar #navigation .nav-item:not(.active) {
  background: transparent !important; box-shadow: none !important;
}
html:root[data-theme][data-shx-theme] body #app-view .sidebar #navigation .nav-item.active {
  color: var(--teal) !important; background: var(--teal-soft) !important;
  box-shadow: inset 3px 0 var(--teal) !important;
}
html:root[data-theme][data-shx-theme] body #app-view .sidebar #navigation .nav-item:hover:not(.active) {
  color: var(--text-primary) !important; background: var(--bg-hover) !important;
}
html:root[data-theme][data-shx-theme] body :is(#terminal-shell-top,.sidebar) :is(small,.terminal-shell-read-state,.sidebar-bottom,.nav-label),
html:root[data-theme][data-shx-theme] body #app-view .sidebar .brand small {
  color: var(--text-secondary) !important;
}
/* Specific business scopes beat older premium rules with two ID selectors.
   These are surface owners, never a wildcard text recolor. */
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#record-drawer) :is(
  .terminal-record-controls,.record-controls-first,.record-controls-second,.record-controls-footer,
  .terminal-page-toolbar,.terminal-filters,.terminal-toolbar,.terminal-orders-filters,
  .panel-toolbar,.panel-bottom,.terminal-grid-footer,.terminal-summary-line,.terminal-orders-table,
  .inventory-summary-strip,.inventory-selection-toolbar,.inventory-removal-list,
  .wb-cockpit-read-state,.wb-loading,.wb-record-error,.wb-work-reminders,
  .wb-view-bar,.wb-drawer-controls,.wb-stages article,.wb-task-card,.wb-role-metrics>div,
  .wb-customer-summary,.wb-customer-summary-empty,.dashboard-action-grid,.module-note,
  .terminal-health>div,.runtime-health>div,.terminal-risk,.terminal-diagnostics,
  .account-balance-card,.account-detail-loading,.announcement-caption,.announcement-compose,
  .terminal-toolbar-more,.terminal-focus-filters,.unified-focus-menu,.unified-focus-filter-body,
  .raw-row-menu,.up-menu,.up-mode-card,.up-binding-step,.up-channel-map185,.up-batch-toolbar,
  .up-intervention,.up-pool-status185,.up-row-state,.automation-workflow,.automation-service-status,
  .px-task-welcome,.px-task-link,.px-task-risks,.orders-money-trace,.terminal-copy-manual,
  .operation-principle,.operation-categories>section,.tt-finance-preview,.tt-sync-stages-h564 li,
  .support-confirm-text,.support-api-guide,.support-form blockquote,.support-owner-row,
  .support-action-menu,.support-conversation-menu-items,.support-new-chat,.support-search-hit
) {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .terminal-record-controls,.terminal-orders-table,.inventory-summary-strip,.wb-work-reminders,
  .account-balance-card,.module-note,.px-task-welcome,.operation-categories>section
) { border-radius: var(--radius-md) !important; }
html:root[data-theme][data-shx-theme] body :is(#wb-record-drawer,#record-drawer,#wb-record-drawer.wb-record-modal) {
  background: var(--bg-base) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body :is(#terminal-shell-more,.support-discover-menu)[open]>div {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) :is(
  .button,.icon-button,.row-actions button,.wb-row-detail,.up-filter span,
  .unified-focus-secondary>summary,.unified-focus-filter>summary,.raw-row-more>summary,
  .support-earlier,.support-latest,.wb-view-chip,[role="tab"]
) {
  background: var(--bg-surface) !important; color: var(--text-primary) !important;
  border-color: var(--border-strong) !important; box-shadow: none !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) :is(
  .button,.icon-button,.row-actions button,.wb-row-detail,.unified-focus-secondary>summary,.unified-focus-filter>summary
):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-teal) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) .button.primary:not(:disabled) {
  background: linear-gradient(135deg,var(--teal),var(--teal-dim)) !important;
  color: #052c24 !important; border-color: var(--teal-dim) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) .button.danger:not(:disabled) {
  background: var(--danger-soft) !important; color: var(--danger) !important; border-color: var(--danger-border) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) :is(button,input,select,textarea):disabled,
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) [aria-disabled="true"] {
  background: var(--bg-surface) !important; color: var(--text-secondary) !important;
  border-color: var(--border-strong) !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#terminal-shell-top) :is(input,select,textarea) {
  background-color: var(--field) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
  accent-color: var(--teal-dim);
}
html:root[data-theme][data-shx-theme] body option {
  background: var(--bg-elevated); color: var(--text-primary);
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .page-heading p,.terminal-summary-line,.terminal-footnote,.wb-record-basis,.wb-read-at,
  .wb-record-pagination,.wb-view-label,.wb-stages small,.px-task-link span,
  .wb-customer-summary-meta,.wb-customer-summary-basis,.wb-cockpit-caption,
  .wb-cockpit-summary>span,.wb-cockpit-summary .unknown,.dashboard-ranking-row small
) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .page-heading h1,.wb-cockpit-disclosure>summary h3,.wb-cockpit-summary>span>b,
  .metric strong,.dashboard-metric>strong,.material-customer-name,.account-balance-card>strong
) { color: var(--text-primary) !important; }
/* Opaque sticky cells and table headings are essential when scrolling;
   table/cards never gain transform/filter/backdrop-filter containing blocks. */
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .table-scroll,.terminal-table-scroll,.terminal-grid,.raw-table,.grid-table,.terminal-grid-table,.wb-related-table
) { background-color: var(--bg-base) !important; border-color: var(--border-strong) !important; scrollbar-color: var(--text-muted) var(--bg-base); }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(table,.terminal-grid-table) th {
  background: var(--table-head) !important; color: var(--text-secondary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) tbody tr:nth-child(n) {
  background: var(--bg-base) !important;
}
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) tbody tr:hover,
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) tbody tr[aria-selected="true"] {
  background: var(--bg-hover) !important;
}
html:root[data-theme][data-shx-theme][data-shx-pin="true"] body #page-content .terminal-table-scroll tbody tr>td:first-child {
  background: var(--bg-base) !important;
}
html:root[data-theme][data-shx-theme][data-shx-pin="true"] body #page-content .terminal-table-scroll tbody tr:hover>td:first-child {
  background: var(--bg-hover) !important;
}
html:root[data-theme][data-shx-theme] body :is(.table-scroll,.terminal-table-scroll)::-webkit-scrollbar-track { background: var(--bg-base) !important; }
html:root[data-theme][data-shx-theme] body :is(.table-scroll,.terminal-table-scroll)::-webkit-scrollbar-thumb { background: var(--text-muted) !important; }
/* State comes last, with explicit selectors. No value is parsed or rewritten. */
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#record-drawer) :is(
  .badge.green,.up-state-ready,.up-tag.good,.b2-status.success,.health-status.success,
  .wb-health-item.success,.wb-health-item.success b,.shx-presence--recent
) { color: var(--success) !important; background-color: var(--teal-soft) !important; border-color: var(--border-teal) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#record-drawer) :is(
  .badge.red,.b2-status.danger,.health-status.danger,.up-tag.bad,.up-state-review,
  .notice.error,.wb-cockpit-read-state.error,.up-inline-error185,.up-field-error,.up-row-error185 td,
  .up-order-tag-dispatch_failed,.up-order-tag-delivery_failed,.up-order-tag-robot_exception,
  .material-money.debt,.order-detail121-status.danger,.support-login-status.error,
  .px-danger,.negative,.amount-negative,[data-state="error"],[aria-invalid="true"]
) { color: var(--danger) !important; border-color: var(--danger-border) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer,#record-drawer) :is(
  .notice.error,.up-inline-error185,.up-field-error,.health-status.danger,.badge.red,.order-detail121-status.danger
) { background: var(--danger-soft) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .notice.warning,.up-warning,.b2-status.warning,.health-status.warning,.material-sync-warning,
  .up-order-tag-partial,.up-order-tag-review,.wb-record-error,.tt-sync-warning,.order-detail121-status.warning
) { background: var(--gold-soft) !important; color: var(--warning) !important; border-color: var(--warning-border) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .material-sync-running,.tt-sync-pending,.tt-sync-badge-h564,.support-login-status.connecting
) { background: var(--info-soft) !important; color: var(--info) !important; border-color: var(--info-border) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .button[role="tab"][aria-selected="true"],.wb-record-tabs [aria-current="page"]
) { background: var(--teal-soft) !important; color: var(--teal) !important; border-color: var(--border-teal) !important; }
html:root[data-theme][data-shx-theme] body :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--info) !important; outline-offset: 3px;
}
html:root[data-theme][data-shx-theme] body :is(#form-dialog .dialog-actions,.wb-detail-fields dt) {
  background: var(--bg-base) !important; color: var(--text-secondary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body .shx-theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
html:root[data-theme][data-shx-theme] body .shx-theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }
html:root[data-theme][data-shx-theme] body #login-view .login-side > .shx-theme-toggle {
  position: absolute; top: 28px; right: 32px; z-index: 6;
  width: 44px; height: 44px; border-radius: 12px;
}
@media (max-width: 700px) {
  html:root[data-theme][data-shx-theme] body #login-view .login-side > .shx-theme-toggle { top: 24px; right: 16px; }
}
/* Preserve the published entry material and its existing meteor/star pools. */
html:root[data-theme="dark"][data-shx-theme] body #login-view .login-box {
  --glass: rgba(24,30,42,.76);
  --glass-sheen: linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.012));
  --glass-top: rgba(255,255,255,.12);
}
html:root[data-theme="dark"][data-shx-theme] body #login-view .login-box { color-scheme: dark; }
html:root[data-theme][data-shx-theme] body :is(#login-adaptive173-dialog,#login-security-modal) {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important;
}
@media (max-width: 700px) {
  html:root[data-theme][data-shx-theme] body .shx-theme-toggle { min-width: 44px; min-height: 44px; }
  html:root[data-theme][data-shx-theme] body :is(#form-dialog,#wb-record-drawer) input,
  html:root[data-theme][data-shx-theme] body #page-content :is(.terminal-filters,.terminal-record-controls) :is(input,select) { font-size: 16px !important; }
  html:root[data-theme][data-shx-theme] body :is(#form-dialog,#wb-record-drawer) .dialog-actions { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme][data-shx-theme] body :is(.button,.icon-button,.nav-item,.shx-theme-toggle,.workspace-card) { transition: none !important; animation: none !important; }
}
/* Descendant captions retain their own legacy colors, so paint each actual
   caption component after the surface mapping. */
html:root[data-theme][data-shx-theme] body #app-view .sidebar .nav-section-label,
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(
  .unified-focus-purpose,.dashboard-health-card small,.dashboard-metric small,.dashboard-metric>div>span,
  .dashboard-ranking-row>b,.terminal-grid-scrollbar>span,.grid-scroll-footer>span,
  .support-chat-count,.support-compose-footer small,.support-message-meta time,
  .support-message-meta time span,.support-media,.support-reply,.support-empty,.support-empty p
) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is([data-grid-scroll-label],[data-grid-scroll-status]) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body #app-view #page-content :is(.support-chat-search,.support-date-divider) {
  background: var(--bg-surface) !important; color: var(--text-secondary) !important; border-color: var(--border-strong) !important;
}
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-folder-tab,
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-discover-menu>summary { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-folder-tab[aria-pressed="true"] {
  color: var(--info) !important; box-shadow: inset 0 -2px var(--info) !important;
}
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-login-status.online {
  background: var(--teal-soft) !important; color: var(--success) !important;
}
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-message.outgoing .support-message-meta :is(time,time span) {
  color: #03241c !important;
}
html:root[data-theme][data-shx-theme] body #app-view #page-content .grid-horizontal-footer>span { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-message-footer :is(time,time span) { color: var(--text-secondary) !important; }
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-message.outgoing .support-message-footer :is(time,time span) { color: #03241c !important; }
html:root[data-theme][data-shx-theme] body #login-view #login-status173 { color: var(--text-secondary) !important; }
/* The older upstream module ships white filter chips and dark-on-dark notes.
   Keep this scoped to its own UI rather than recoloring order/finance amounts. */
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #upstream-root .up-filter,
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #upstream-root .up-filter span {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #upstream-root .up-filter[aria-pressed="true"] {
  background: var(--teal-soft) !important;
  color: var(--teal) !important;
  border-color: var(--border-teal) !important;
}
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #upstream-root :is(
  .up-monitor-note,.up-monitor-help,.up-monitor-dates legend,.up-candidates185 h3 span,
  .up-menu small,[data-draft] small,.up-empty185,.up-monitor-meta,.up-monitor-secondary,
  .up-monitor-cell .up-order-reason
) { color: var(--text-secondary) !important; }
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #upstream-root .up-monitor-help summary {
  color: var(--text-secondary) !important;
}
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #upstream-root .up-date-shortcuts [aria-pressed="true"] {
  background: var(--teal-soft) !important; color: var(--teal) !important; border-color: var(--border-teal) !important;
}
/* Original finance and catalog summaries still assign pale-page blue ink. */
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #finance-summary :is(
  .finance-summary-values>span,.finance-summary-value-label,.finance-disclosure-arrow
),
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content :is(
  .finance-basis-disclosure,.finance-basis-disclosure>summary,.finance-basis-disclosure>summary>span,
  .finance-sales-note,.finance-sales-note>summary,.catalog-batch-toolbar [data-catalog-selection]
) { color: var(--text-secondary) !important; }
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content #finance-summary .finance-summary-values strong {
  color: var(--text-primary) !important;
}
/* Readability fixes measured across the local demo routes. Keep the contrast
   overrides inside the relevant theme so the opposite theme is unchanged. */
html:root[data-theme="light"][data-shx-theme] body :is(input,textarea)::placeholder {
  color: var(--text-secondary) !important; opacity: 1 !important;
}
html:root[data-theme="light"][data-shx-theme] body .empty,
html:root[data-theme="light"][data-shx-theme] body .empty :is(h3,p,strong) {
  color: var(--text-secondary) !important;
}
html:root[data-theme="light"][data-shx-theme] body #app-view .sidebar #navigation .nav-item.active,
html:root[data-theme="light"][data-shx-theme] body #app-view #page-content .button[role="tab"][aria-selected="true"],
html:root[data-theme="light"][data-shx-theme] body #app-view #page-content .wb-record-tabs [aria-current="page"] {
  color: var(--success) !important;
}
html:root[data-theme="light"][data-shx-theme] body #app-view #page-content :is(
  #table-count,.column-filter-button,.finance-basis-disclosure>summary>span,.finance-disclosure-arrow,
  .tt-funding-toolbar>small
) { color: var(--text-secondary) !important; }
html:root[data-theme="dark"][data-shx-theme] body #app-view #page-content :is(
  .tt-funding-toolbar>small,.tt-sync-note-h564
) { color: var(--text-secondary) !important; }
/* Avatar colors come from account data, so darken the swatch beneath initials. */
html:root[data-theme][data-shx-theme] body #app-view #page-content .support-avatar {
  color: #fff !important;
  background-image: linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)) !important;
}
html:root[data-theme="light"][data-shx-theme] body #app-view #page-content .support-login-status.online {
  color: #076b56 !important;
}
html:root[data-theme][data-shx-theme] body #choice-view .user-actions,
html:root[data-theme][data-shx-theme] body #choice-view .workspace-card>p {
  color: var(--text-secondary) !important;
}
html:root[data-theme="light"][data-shx-theme] body #choice-view .space-enter {
  color: var(--success) !important;
}
html:root[data-theme="dark"][data-shx-theme] body #choice-view .space-enter {
  color: #5debc9 !important;
}