/* ==========================================================================
   Theme surfaces — black / white glass (load AFTER app.css)
   Ensures rails, topbar, widgets, and text invert with data-theme.
   ========================================================================== */

/* —— Shared tokens (both themes already set --glass-* on :root) —— */
:root,
html[data-theme="dark"] {
  --glass-panel: linear-gradient(
    180deg,
    var(--glass-bg-top) 0%,
    var(--glass-bg-bot) 100%
  );
  --glass-panel-cyan: linear-gradient(
    180deg,
    rgba(28, 28, 28, 0.98) 0%,
    rgba(8, 8, 8, 0.99) 100%
  );
  --glass-inset: inset 0 1px 0 var(--glass-highlight);
  --glass-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  --fill-deep: rgba(0, 0, 0, 0.35);
  --fill-soft: rgba(255, 255, 255, 0.04);
  --hover-fill: rgba(255, 255, 255, 0.06);
  --seg-tray: rgba(0, 0, 0, 0.42);
  --axis-tick: rgba(255, 255, 255, 0.22);
  --text-on-accent: #041018;
}

html[data-theme="light"] {
  --glass-panel: linear-gradient(
    180deg,
    #ffffff 0%,
    #f0f0f2 100%
  );
  --glass-panel-cyan: linear-gradient(
    180deg,
    #ffffff 0%,
    #eef0f3 100%
  );
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  --fill-deep: rgba(0, 0, 0, 0.04);
  --fill-soft: rgba(0, 0, 0, 0.03);
  --hover-fill: rgba(0, 0, 0, 0.05);
  --seg-tray: rgba(0, 0, 0, 0.05);
  --axis-tick: rgba(0, 0, 0, 0.18);
  --text-on-accent: #041018;
  /* Stronger text on white */
  --text: #0c0c0e;
  --muted: #3f3f46;
  --dim: #52525b;
}

/* —— Global text cascade —— */
html,
body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1000px 500px at 50% -8%, rgba(0, 255, 159, 0.035), transparent 52%),
    var(--bg);
}
html[data-theme="light"] body {
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(0, 168, 107, 0.07), transparent 50%),
    var(--bg) !important;
}

/* —— Top bar —— */
.portal-topbar {
  border-bottom-color: var(--glass-border) !important;
  background: var(--glass-panel) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
.portal-topbar::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--topbar-edge) 50%,
    transparent 100%
  ) !important;
}
.portal-link {
  color: var(--muted) !important;
}
.portal-link:hover {
  color: var(--text) !important;
  background: var(--fill-deep) !important;
  border-color: var(--glass-border) !important;
}
.portal-link.is-on {
  color: var(--text) !important;
  background: rgba(0, 255, 159, 0.1) !important;
  border-color: var(--glass-border) !important;
}
html[data-theme="light"] .portal-link.is-on {
  background: rgba(0, 168, 107, 0.12) !important;
  color: var(--text) !important;
}
.portal-brand,
.portal-name {
  color: var(--text);
}
.portal-mobile-nav {
  background: var(--glass-panel) !important;
  border-bottom-color: var(--glass-border) !important;
  color: var(--text);
}
.portal-mobile-nav a,
.portal-mobile-nav button {
  color: var(--text) !important;
}
.portal-actions .btn,
.portal-actions .btn.ghost {
  color: var(--text) !important;
  border-color: var(--glass-border-soft) !important;
  background: var(--fill-deep) !important;
}
.portal-actions .btn.ghost {
  color: var(--muted) !important;
}
html[data-theme="light"] .portal-actions .btn.ghost {
  color: var(--text) !important;
}
.portal-telemetry.seg-rail,
.portal-telemetry.telemetry-only {
  background: var(--seg-tray) !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: var(--glass-inset) !important;
}
.portal-telemetry .seg-k,
.seg-k {
  color: var(--dim) !important;
}
.portal-telemetry .seg-v,
.seg-v {
  color: var(--text) !important;
}
.seg.t-green .seg-v {
  color: var(--green) !important;
}

/* —— Side rails: no chrome — widgets float on page bg —— */
.rail,
.rail-left,
.rail-right {
  color: var(--text);
  border: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.rail-left {
  border-right: none !important;
}
.rail-right {
  border-left: none !important;
}
.rail-title,
.rail-meta,
.board-tab-hint,
.section-label,
.si-kicker,
.cp-kicker,
.auto-kicker,
.auto-field-lab,
.field-label,
.asset-k,
.m-cell .t,
.oc-label,
.intel-card .t {
  color: var(--dim) !important;
}
.rail-meta,
.control-meta,
.open-orders-hint,
.auto-decision,
.si-muted,
.eq-leg,
.assets-range-stats {
  color: var(--muted) !important;
}

/* —— Glass widgets (both themes; gradient flips via tokens) —— */
.glass-panel,
.panel,
.auto-banner,
.table-wrap,
.intel-card,
.cp-card,
.focus-card,
.social-panel,
.rail-panel,
.lab-card,
.assets-widget,
.coin-profile,
.board-wrap,
.board-wrap-tall,
.order-card,
.si-card,
.si-channels,
.m-cell,
.metrics-grid--12 .m-cell,
.asset-cell,
.range-seg,
.range-seg--compact {
  border-color: var(--glass-border) !important;
  background: var(--glass-panel) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  color: var(--text);
}
.auto-banner {
  background: var(--glass-panel-cyan) !important;
}
.auto-banner.on {
  border-color: rgba(0, 255, 159, 0.35) !important;
}
.auto-title,
.auto-status,
.si-name,
.cp-name,
.oc-val,
.oc-pair-val .name,
.pair-name,
.m-cell .v,
.asset-v,
.intel-card .big,
table.board td,
table.data td {
  color: var(--text) !important;
}
.m-cell .v.up,
.asset-v.up,
.oc-val.up,
.pnl-up,
.side-long,
.v.up {
  color: var(--green) !important;
}
.m-cell .v.down,
.asset-v.down,
.oc-val.down,
.pnl-down,
.side-short,
.v.down {
  color: var(--red) !important;
}
.asset-sub {
  color: var(--muted) !important;
}
.asset-sub.up {
  color: var(--green) !important;
}
.asset-sub.down {
  color: var(--red) !important;
}

/* Board tabs */
.board-tabs {
  background: var(--fill-deep) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-bottom: none !important;
}
.board-tab {
  color: var(--dim) !important;
  background: var(--fill-soft) !important;
  border-color: var(--glass-border-soft) !important;
}
.board-tab:hover {
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
}
.board-tab.is-on {
  color: var(--text-on-accent) !important;
  background: linear-gradient(180deg, var(--green), var(--green-dim)) !important;
  border-color: transparent !important;
  font-weight: 850;
}
table.board th {
  background: var(--fill-deep) !important;
  color: var(--dim) !important;
  border-bottom-color: var(--line) !important;
}
table.board tbody tr:hover {
  background: rgba(0, 255, 159, 0.06);
}
html[data-theme="light"] table.board tbody tr:hover {
  background: rgba(0, 168, 107, 0.08);
}
table.board tbody tr.focus {
  background: rgba(0, 255, 159, 0.08);
  box-shadow: inset 2px 0 0 var(--green);
}

/* Buttons */
.btn {
  color: var(--text) !important;
  border-color: var(--glass-border-soft) !important;
  background: var(--fill-deep) !important;
  box-shadow: var(--glass-inset) !important;
}
.btn:hover {
  background: var(--hover-fill) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}
.btn.primary {
  color: var(--text-on-accent) !important;
  background: linear-gradient(180deg, var(--green), var(--green-dim)) !important;
  border-color: rgba(0, 255, 159, 0.45) !important;
  box-shadow: 0 0 14px var(--green-glow), var(--glass-inset) !important;
}
.btn.ghost {
  color: var(--muted) !important;
  background: var(--fill-soft) !important;
}
html[data-theme="light"] .btn.ghost {
  color: var(--text) !important;
}
.btn.warn {
  color: var(--orange-soft) !important;
  border-color: rgba(255, 77, 0, 0.4) !important;
  background: rgba(255, 77, 0, 0.08) !important;
}
.icon-btn,
.theme-toggle,
.portal-icon-btn,
.portal-burger {
  color: var(--muted) !important;
  border-color: var(--glass-border-soft) !important;
  background: var(--fill-deep) !important;
}
.icon-btn:hover,
.theme-toggle:hover,
.portal-burger:hover {
  color: var(--green) !important;
  border-color: var(--glass-border) !important;
}

/* Range pills */
.range-btn {
  color: var(--muted) !important;
}
.range-btn:hover {
  color: var(--text) !important;
}
.range-btn.is-on {
  color: var(--green) !important;
  background: rgba(0, 255, 159, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(0, 255, 159, 0.35) !important;
}
html[data-theme="light"] .range-btn.is-on {
  background: rgba(0, 168, 107, 0.12) !important;
}

/* Form fields */
.field-select,
.auto-select,
select.field-select,
.field-input,
input.field-input,
textarea.field-input {
  color: var(--text) !important;
  background: var(--bg-elev) !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] .field-select,
html[data-theme="light"] select.field-select,
html[data-theme="light"] .field-input {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* Chart shell */
.chart-wrap,
.chart-wrap--modern,
.assets-widget .chart-wrap {
  background: var(--chart-bg) !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .chart-wrap,
html[data-theme="light"] .assets-widget .chart-wrap {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.04) !important;
}
.chart-empty {
  color: var(--dim) !important;
  background: var(--chart-bg) !important; opacity: 0.92;
}
.chart-hover {
  background: var(--glass-panel) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}
/* replaced by chart-hover-theme-v2 */
.chart-hover #equity-hover-time,
.chart-hover #equity-hover-time-modal {
  color: var(--muted) !important;
}

/* Social chips */
.si-chip,
.edge-chip,
.ava-chip {
  color: var(--text) !important;
  border-color: var(--glass-border-soft) !important;
  background: var(--fill-deep) !important;
}
.si-chip:hover,
.edge-chip:hover,
.ava-chip:hover {
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}
.si-ticker {
  color: var(--muted) !important;
}

/* Order cards: keep glass gradient, force readable type */
.order-card .oc-label {
  color: var(--dim) !important;
}
.order-card .oc-val {
  color: var(--text) !important;
}
.order-card.row-win {
  border-color: rgba(0, 255, 159, 0.28) !important;
}
.order-card.row-loss {
  border-color: rgba(255, 77, 77, 0.28) !important;
}

/* Autopilot text */
.auto-status {
  color: var(--dim) !important;
}
.auto-banner.on .auto-status {
  color: var(--green) !important;
}
.auto-title {
  color: var(--text) !important;
}
.auto-telemetry .k {
  color: var(--dim) !important;
}
.auto-telemetry .v {
  color: var(--text) !important;
}
.auto-telemetry .v.ok,
.auto-telemetry .v.live {
  color: var(--green) !important;
}
.auto-telemetry .v.warn {
  color: var(--amber) !important;
}

/* Tooltips */
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  color: var(--text) !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
}

/* Admin shell — black/white glass (detail polish lives in admin.css) */
.admin-page,
.admin-shell,
.admin-nav,
.admin-main,
.sim-window,
.admin-card {
  color: var(--text);
}
html[data-theme="dark"] body.admin-page,
html[data-theme="light"] body.admin-page {
  color: var(--text) !important;
}
html[data-theme="light"] body.admin-page,
html[data-theme="light"] body.admin-page .admin-shell {
  background: var(--bg) !important;
  color: var(--text) !important;
}
html[data-theme="light"] body.admin-page .sim-window,
html[data-theme="light"] body.admin-page .admin-card,
html[data-theme="light"] body.admin-page .cockpit-toolbar {
  background: var(--glass-panel) !important;
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
}
/* Top pill active state lives in admin.css (Lab-style green fill) */
html[data-theme="light"] body.admin-page .portal-topbar {
  background: var(--glass-panel) !important;
  border-bottom-color: var(--glass-border) !important;
}
html[data-theme="light"] body.admin-page .portal-link,
html[data-theme="light"] body.admin-page .admin-hint,
html[data-theme="light"] body.admin-page .cockpit-sub {
  color: var(--muted) !important;
}
html[data-theme="light"] body.admin-page .portal-link.is-on {
  color: var(--text) !important;
}

/* Metrics / boarding pages */
html[data-theme="light"] .mx-main,
html[data-theme="light"] .metrics-page,
html[data-theme="light"] .boarding,
html[data-theme="light"] body.boarding {
  color: var(--text) !important;
  background: var(--bg) !important;
}
html[data-theme="light"] .mx-pane,
html[data-theme="light"] .mx-kpi > * {
  background: var(--glass-panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* —— Boarding homepage full theme —— */
body.boarding,
body.boarding .hero,
body.boarding .section-inner,
body.boarding main {
  color: var(--text);
}
body.boarding .portal-topbar {
  border-bottom-color: var(--glass-border) !important;
  background: var(--glass-panel) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
body.boarding .portal-name,
body.boarding .portal-brand,
body.boarding .hero h1,
body.boarding .center-title,
body.boarding .section-head h2,
body.boarding .cta-inner h2,
body.boarding .how h2,
body.boarding .hot-sym,
body.boarding .faq-list summary {
  color: var(--text) !important;
}
body.boarding .hero-lead,
body.boarding .hero-pitch,
body.boarding .center-lead,
body.boarding .section-sub,
body.boarding .auth-hint,
body.boarding .muted,
body.boarding .pillar p,
body.boarding .faq-list p,
body.boarding .cta-inner p,
body.boarding .footer-tag {
  color: var(--muted) !important;
}
body.boarding .board-widget,
body.boarding .hero-card,
body.boarding .trust-pill,
body.boarding .hot-card,
body.boarding .market-table-wrap,
body.boarding .pillar,
body.boarding .how-panel,
body.boarding .how-steps li,
body.boarding .how-line,
body.boarding .faq-list details,
body.boarding .cta-inner,
body.boarding .mission-shot,
body.boarding .ms-auto,
body.boarding .ms-seat {
  border-color: var(--glass-border, var(--line)) !important;
  color: var(--text) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
body.boarding .board-widget {
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--green) 9%, transparent), transparent 48%),
    var(--glass-panel) !important;
}
body.boarding .board-widget--live {
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--blue-soft) 10%, transparent), transparent 50%),
    var(--glass-panel) !important;
}
body.boarding .board-widget--cta {
  background:
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--green) 14%, transparent), transparent 55%),
    radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 45%),
    var(--glass-panel) !important;
}
body.boarding .hero-card,
body.boarding .trust-pill,
body.boarding .cta-inner,
body.boarding .mission-shot {
  background: var(--glass-panel) !important;
}
body.boarding .hot-card,
body.boarding .pillar,
body.boarding .how-steps li,
body.boarding .how-line,
body.boarding .faq-list details {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fill-soft) 100%, transparent), transparent 70%),
    var(--fill-deep) !important;
}
body.boarding .board-widget-head {
  border-bottom-color: var(--line) !important;
}
body.boarding .board-widget-title h2,
body.boarding .board-widget-kicker {
  color: var(--text);
}
body.boarding .board-widget-kicker {
  color: color-mix(in srgb, var(--green) 75%, var(--dim)) !important;
}
body.boarding .board-widget--live .board-widget-kicker {
  color: var(--blue-soft) !important;
}
body.boarding .board-widget-badge {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 10%, var(--fill-deep)) !important;
  color: var(--green) !important;
}
body.boarding .field-input,
body.boarding .field-select,
body.boarding .auth-tabs,
body.boarding .ms-select,
body.boarding .market-table th,
body.boarding .mission-shot-url,
body.boarding .mission-shot-chrome {
  background: var(--fill-deep) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body.boarding .auth-tab {
  color: var(--muted) !important;
}
body.boarding .auth-tab.is-on {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--green) 12%, transparent) !important;
}
body.boarding .portal-footer,
body.boarding .footer-base {
  background: var(--bg-elev) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
body.boarding .portal-footer a,
body.boarding .footer-cols a {
  color: var(--muted) !important;
}
body.boarding .portal-footer a:hover,
body.boarding .footer-cols a:hover {
  color: var(--text) !important;
}
body.boarding .ms-rail,
body.boarding .ms-center {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Mission market board search */
.board-search {
  border-color: var(--line) !important;
  background: var(--fill-deep) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .board-tabs,
html[data-theme="light"] .board-search-row,
html[data-theme="light"] .board-wrap,
html[data-theme="light"] body.boarding .board-wrap--boarding,
html[data-theme="light"] body.boarding .board-wrap--boarding .board-tabs,
html[data-theme="light"] body.boarding .board-wrap--boarding .board-search-row {
  background: var(--bg-elev) !important;
}
html[data-theme="light"] table.board th,
html[data-theme="light"] body.boarding .board-wrap--boarding table.board th {
  background: var(--fill-deep) !important;
  color: var(--dim) !important;
}
body.boarding .board-wrap--boarding {
  background: var(--bg-elev) !important;
  border-color: var(--line) !important;
}
body.boarding .board-wrap--boarding .board-tab {
  border-color: var(--line) !important;
  background: var(--fill-deep) !important;
  color: var(--dim) !important;
}
body.boarding .board-wrap--boarding .board-tab.is-on {
  color: var(--text-on-accent, #0a0a0c) !important;
  background: var(--green) !important;
  border-color: transparent !important;
}
body.boarding .board-wrap--boarding .board-tab-hint {
  color: var(--dim) !important;
}
body.boarding .ms-focus,
body.boarding .ms-intel div,
body.boarding .ms-assets > *,
body.boarding .ms-metrics > *,
body.boarding .ms-si-list li,
body.boarding .ms-si-posts article,
body.boarding .mission-shot-telem span {
  background: var(--fill-deep) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body.boarding .ms-title,
body.boarding .ms-si-name,
body.boarding .ms-focus-name,
body.boarding .ms-eq-val,
body.boarding .ms-si-list b {
  color: var(--text) !important;
}
body.boarding .btn.ghost,
body.boarding .portal-actions .btn.ghost {
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.boarding .btn.primary,
body.boarding .portal-actions .btn.primary {
  background: linear-gradient(180deg, var(--green-dim), color-mix(in srgb, var(--green) 55%, #000)) !important;
  border-color: color-mix(in srgb, var(--green) 45%, var(--line)) !important;
  color: var(--text-on-accent, #041018) !important;
}
html[data-theme="light"] body.boarding {
  background:
    radial-gradient(900px 420px at 18% -6%, rgba(0, 168, 107, 0.08), transparent 52%),
    radial-gradient(700px 360px at 90% 0%, rgba(0, 0, 0, 0.03), transparent 48%),
    var(--bg) !important;
}
html[data-theme="light"] body.boarding .board-widget,
html[data-theme="light"] body.boarding .hero-card,
html[data-theme="light"] body.boarding .mission-shot,
html[data-theme="light"] body.boarding .hot-card,
html[data-theme="light"] body.boarding .pillar,
html[data-theme="light"] body.boarding .how-steps li,
html[data-theme="light"] body.boarding .how-line,
html[data-theme="light"] body.boarding .faq-list details,
html[data-theme="light"] body.boarding .cta-inner {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
html[data-theme="light"] body.boarding .board-widget--live {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(14, 116, 180, 0.08), transparent 50%),
    var(--glass-panel) !important;
}
html[data-theme="light"] body.boarding .board-widget--live .board-widget-kicker {
  color: #0b6ea8 !important;
}
html[data-theme="light"] body.boarding .board-widget-badge--live {
  color: #0b6ea8 !important;
  border-color: rgba(14, 116, 180, 0.28) !important;
  background: rgba(14, 116, 180, 0.08) !important;
}
html[data-theme="light"] body.boarding .market-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
html[data-theme="light"] body.boarding .social-btn {
  background: #ffffff !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* Scrollbars (both) */
* {
  scrollbar-color: var(--line) transparent;
}

/* Fix remaining pure-white labels on light (high-specificity catch-all) */
html[data-theme="light"] .stage,
html[data-theme="light"] .shell,
html[data-theme="light"] .page,
html[data-theme="light"] .rail,
html[data-theme="light"] .assets-widget {
  color: var(--text);
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .si-name,
html[data-theme="light"] .auto-title,
html[data-theme="light"] .brand,
html[data-theme="light"] .oc-val,
html[data-theme="light"] .pair-name,
html[data-theme="light"] .m-cell .v,
html[data-theme="light"] .asset-v,
html[data-theme="light"] .intel-card .big,
html[data-theme="light"] .cp-name,
html[data-theme="light"] table.board td,
html[data-theme="light"] table.data td {
  color: var(--text) !important;
}
html[data-theme="light"] .muted,
html[data-theme="light"] .control-meta,
html[data-theme="light"] .open-orders-hint,
html[data-theme="light"] .si-muted,
html[data-theme="light"] .rail-meta,
html[data-theme="light"] .auto-decision {
  color: var(--muted) !important;
}
html[data-theme="light"] .dim,
html[data-theme="light"] .section-label,
html[data-theme="light"] .rail-title,
html[data-theme="light"] .oc-label,
html[data-theme="light"] .m-cell .t,
html[data-theme="light"] .asset-k,
html[data-theme="light"] .seg-k,
html[data-theme="light"] .field-label,
html[data-theme="light"] .auto-field-lab {
  color: var(--dim) !important;
}

/* Modal / sheet panels */
.sheet-panel,
.modal-backdrop .chart-modal,
.hub-pop .sim-window {
  background: var(--glass-panel) !important;
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
}
html[data-theme="light"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.35) !important;
}

/* —— Social rail: force readable theme on all SI parts —— */
.social-panel,
.social-panel * {
  /* inherit base; specific classes set semantic colors */
}
.social-panel {
  color: var(--text) !important;
  padding: 0.7rem 0.75rem 0.8rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-panel) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  box-sizing: border-box !important;
}
html[data-theme="light"] .social-panel {
  border-color: var(--line) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f3 100%) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.social-panel .si-name,
.social-panel .si-big,
.social-panel .si-inf-handle,
.social-panel .si-inf-ms,
.social-panel .si-post-author,
.social-panel .si-post-text,
.social-panel .si-ctx-val,
.social-panel .si-chip {
  color: var(--text) !important;
}
.social-panel .si-kicker,
.social-panel .si-channels-lab,
.social-panel .si-lab,
.social-panel .si-section-h,
.social-panel .si-inf-rank,
.social-panel .si-inf-meta,
.social-panel .si-post-eng,
.social-panel .si-empty,
.social-panel .si-disclaimer,
.social-panel .si-muted {
  color: var(--dim) !important;
}
.social-panel .si-ticker,
.social-panel .si-sub,
.social-panel .si-source,
.social-panel .si-feed-tab {
  color: var(--muted) !important;
}
.social-panel .si-big.bull { color: var(--green) !important; }
.social-panel .si-big.bear { color: var(--red) !important; }
.social-panel .si-big.neutral { color: var(--amber) !important; }
.social-panel .si-feed-tab.is-on {
  color: var(--green) !important;
  background: rgba(0, 255, 159, 0.14) !important;
}
html[data-theme="light"] .social-panel .si-feed-tab.is-on {
  background: rgba(0, 168, 107, 0.14) !important;
  color: var(--green) !important;
}
.social-panel .si-chip {
  background: var(--fill-deep) !important;
  border-color: var(--glass-border-soft) !important;
}
.social-panel .si-chip:hover {
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
  background: rgba(0, 255, 159, 0.1) !important;
}
.social-panel .si-card,
.social-panel .si-channels,
.social-panel .si-post,
.social-panel .si-influencers li,
.social-panel .si-market-ctx,
.social-panel .si-feed-tabs {
  background: var(--glass-panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.social-panel .si-bar {
  background: var(--line-soft) !important;
}
.social-panel .si-bar i {
  background: linear-gradient(90deg, var(--green-dim), var(--green)) !important;
}
.social-panel .si-logo {
  background: var(--bg-elev) !important;
  border-color: var(--glass-border) !important;
}
html[data-theme="light"] .social-panel .si-chip {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .social-panel .si-influencers li,
html[data-theme="light"] .social-panel .si-channels,
html[data-theme="light"] .social-panel .si-market-ctx {
  background: linear-gradient(180deg, #ffffff, #f2f2f4) !important;
  border-color: var(--line) !important;
}

/* —— Open / closed seats: profit green · loss red (both themes) —— */
.order-card.row-win {
  background: linear-gradient(
    180deg,
    rgba(0, 255, 159, 0.18) 0%,
    rgba(0, 60, 40, 0.35) 55%,
    rgba(8, 8, 8, 0.92) 100%
  ) !important;
  border-color: rgba(0, 255, 159, 0.5) !important;
  box-shadow:
    inset 3px 0 0 var(--green),
    inset 0 1px 0 rgba(0, 255, 159, 0.15),
    0 6px 16px rgba(0, 0, 0, 0.25) !important;
}
.order-card.row-loss {
  background: linear-gradient(
    180deg,
    rgba(255, 77, 77, 0.18) 0%,
    rgba(70, 18, 18, 0.4) 55%,
    rgba(8, 8, 8, 0.92) 100%
  ) !important;
  border-color: rgba(255, 90, 90, 0.5) !important;
  box-shadow:
    inset 3px 0 0 var(--red),
    inset 0 1px 0 rgba(255, 100, 100, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="light"] .order-card.row-win {
  background: linear-gradient(
    180deg,
    rgba(0, 200, 120, 0.28) 0%,
    rgba(210, 255, 230, 0.98) 45%,
    #ffffff 100%
  ) !important;
  border-color: rgba(0, 140, 90, 0.5) !important;
  box-shadow:
    inset 3px 0 0 var(--green),
    0 4px 14px rgba(0, 120, 80, 0.12) !important;
}
html[data-theme="light"] .order-card.row-loss {
  background: linear-gradient(
    180deg,
    rgba(230, 60, 60, 0.22) 0%,
    rgba(255, 228, 228, 0.98) 45%,
    #ffffff 100%
  ) !important;
  border-color: rgba(190, 45, 45, 0.45) !important;
  box-shadow:
    inset 3px 0 0 var(--red),
    0 4px 14px rgba(180, 40, 40, 0.1) !important;
}
.order-card.row-win .oc-val.pnl-up,
.order-card.row-loss .oc-val.pnl-down {
  font-weight: 850 !important;
}
.order-card.row-win .oc-val.pnl-up { color: var(--green) !important; }
.order-card.row-loss .oc-val.pnl-down { color: var(--red) !important; }
/* Closed card net column also uses pnl-up / pnl-down */
.order-card.closed-card.row-win .oc-val.pnl-up,
.order-card.closed-card.row-loss .oc-val.pnl-down {
  font-weight: 850 !important;
}

/* Open / closed seats widgets — full border shell (match Focus social) */
.ledger-block {
  padding: 0.7rem 0.75rem 0.8rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-panel) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  box-sizing: border-box !important;
  color: var(--text) !important;
}
html[data-theme="light"] .ledger-block {
  border-color: var(--line) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f3 100%) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
/* Inner order cards keep win/loss tints; sit cleanly inside shell */
.ledger-block .order-bars {
  margin-top: 0.15rem;
}

/* Mission widget minimize buttons */
.widget-min-btn {
  border-color: var(--line) !important;
  background: var(--fill-deep) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .widget-min-btn {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .rail .mission-widget.is-minimized {
  background: #f4f4f6 !important;
  border-color: var(--line) !important;
}
.mission-widget.is-minimized.auto-banner,
.mission-widget.is-minimized.assets-widget,
.mission-widget.is-minimized.ledger-block,
.rail .mission-widget.is-minimized {
  border-color: var(--line);
  background: var(--glass-panel);
}

/* ==========================================================================
   What's New + Metrics pages / embeds (popup iframes)
   ========================================================================== */
.whats-new-page,
.metrics-page,
.legal-page.whats-new-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.wn-embed body,
.mx-embed body,
html.wn-embed,
html.mx-embed,
body.wn-embed,
body.mx-embed {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Ambient: tone down blue, theme-aware */
html[data-theme="light"] .wn-bg-grid,
html[data-theme="light"] .mx-fx-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important;
  opacity: 0.5;
}
html[data-theme="dark"] .wn-bg-grid,
html[data-theme="dark"] .mx-fx-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
}
.wn-bg-orb--b,
.mx-fx-glow--b {
  background: radial-gradient(circle, rgba(0, 255, 159, 0.12), transparent 70%) !important;
}
html[data-theme="light"] .wn-bg-orb--b,
html[data-theme="light"] .mx-fx-glow--b {
  background: radial-gradient(circle, rgba(0, 168, 107, 0.12), transparent 70%) !important;
}

/* What's New cards / type */
.whats-new-page h1,
.whats-new-page h2,
.whats-new-page h3,
.wn-hero h1,
.mx-top h1 {
  color: var(--text) !important;
}
.wn-lead,
.wn-meta,
.mx-stamp,
.mx-kicker {
  color: var(--muted) !important;
}
.wn-grad {
  background: linear-gradient(100deg, var(--muted) 0%, var(--green) 55%, var(--green-dim) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Generic card shells used by WN / MX */
.whats-new-page [class*="wn-card"],
.whats-new-page [class*="wn-panel"],
.whats-new-page [class*="wn-item"],
.whats-new-page [class*="wn-row"],
.whats-new-page article,
.metrics-page [class*="mx-pane"],
.metrics-page [class*="mx-card"],
.metrics-page [class*="mx-kpi"],
.mx-kpi-card,
.mx-pane {
  border-color: var(--line) !important;
  background: var(--glass-panel) !important;
  color: var(--text) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}

/* Force readable text inside popup pages */
.whats-new-page,
.metrics-page {
  color: var(--text);
}
.whats-new-page p,
.whats-new-page li,
.whats-new-page span,
.whats-new-page td,
.metrics-page p,
.metrics-page li,
.metrics-page span,
.metrics-page td,
.metrics-page .v,
.metrics-page .k {
  color: inherit;
}
.whats-new-page .muted,
.metrics-page .muted,
.mx-kpi-card .k,
.mx-pane-h {
  color: var(--dim) !important;
}
.mx-kpi-card .v,
.mx-pane strong,
.whats-new-page strong {
  color: var(--text) !important;
}
.mx-kpi-card .v.pos { color: var(--green) !important; }
.mx-kpi-card .v.neg { color: var(--red) !important; }

/* Hardcoded navy panels in metrics/whats-new */
.mx-kpi-card,
.mx-pane,
.mx-refresh,
.mx-status {
  border-color: var(--line) !important;
  background: var(--glass-panel) !important;
  color: var(--text) !important;
}
.mx-refresh {
  color: var(--text) !important;
}
.mx-main {
  color: var(--text) !important;
}

/* Progress bars — green instead of blue */
.whats-new-page [class*="bar"] > i,
.whats-new-page [class*="fill"],
.metrics-page [class*="bar"] > i {
  background: linear-gradient(90deg, var(--green-dim), var(--green)) !important;
}

/* Sheet chrome (parent popup) */
.sheet-backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] .sheet-backdrop {
  background: rgba(0, 0, 0, 0.28) !important;
}
.sheet-panel,
.sheet-panel--whats-new,
.sheet-panel--metrics {
  background: var(--glass-panel) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
.sheet-panel-head {
  background: var(--fill-deep) !important;
  border-bottom-color: var(--line) !important;
  color: var(--text) !important;
}
.sheet-panel-head h2,
.sheet-kicker {
  color: var(--text) !important;
}
.sheet-kicker {
  color: var(--dim) !important;
}
.sheet-frame {
  background: var(--bg) !important;
  border: none;
  color: var(--text);
}

/* Light: force dark type on WN/MX */
html[data-theme="light"] .whats-new-page,
html[data-theme="light"] .metrics-page,
html[data-theme="light"] body.wn-embed,
html[data-theme="light"] body.mx-embed {
  background: var(--bg) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .whats-new-page h1,
html[data-theme="light"] .whats-new-page h2,
html[data-theme="light"] .whats-new-page h3,
html[data-theme="light"] .metrics-page h1,
html[data-theme="light"] .metrics-page h2,
html[data-theme="light"] .mx-kpi-card .v,
html[data-theme="light"] .si-name {
  color: var(--text) !important;
}

/* —— What's New hard-coded navy/blue → theme tokens —— */
html.wn-embed,
html.wn-embed body,
body.wn-embed,
html.mx-embed,
html.mx-embed body,
body.mx-embed {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.wn-section--spotlight {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line)) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--green) 10%, transparent) 0%,
      color-mix(in srgb, var(--bg) 70%, transparent) 45%,
      color-mix(in srgb, var(--green) 6%, transparent) 100%
    ),
    var(--fill-deep) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
.wn-section--spotlight h2,
.wn-road-card h3,
.wn-card h3,
.wn-overall-title {
  color: var(--text) !important;
}
.wn-section-kicker {
  color: var(--green) !important;
  text-shadow: none !important;
}
.wn-section--spotlight .wn-section-lead,
.wn-road-sum,
.wn-overall-note,
.wn-check-list li,
.wn-card p,
.wn-card li,
.wn-agent-line,
.wn-load-status,
.legal-meta,
.legal-kicker {
  color: var(--muted) !important;
}
.wn-overall {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--bg) 55%, transparent) !important;
}
.wn-overall-kicker {
  color: var(--dim) !important;
}
.wn-overall-pct {
  background: linear-gradient(120deg, var(--muted), var(--green)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.wn-bar {
  background: color-mix(in srgb, var(--text) 8%, transparent) !important;
  border-color: var(--line) !important;
}
.wn-bar-fill {
  background: linear-gradient(90deg, var(--green-dim), var(--green)) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--green) 35%, transparent) !important;
}
.wn-road-card,
.wn-card {
  border-color: var(--line) !important;
  background: var(--glass-panel) !important;
  color: var(--text) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
.wn-road-card--active {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line)) !important;
  box-shadow: var(--glass-shadow) !important;
}
.wn-road-pct {
  color: var(--green) !important;
}
.wn-check-list li.is-done {
  color: var(--text) !important;
}
.wn-check-list li.is-done .wn-check {
  color: var(--green) !important;
}
.wn-jump a {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  background: var(--fill-deep) !important;
}
.wn-jump a:hover {
  color: var(--green) !important;
  border-color: color-mix(in srgb, var(--green) 40%, var(--line)) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--green) 12%, transparent) !important;
}
.wn-badge--active {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
}
html[data-theme="light"] .wn-section--spotlight {
  background:
    linear-gradient(
      165deg,
      rgba(0, 168, 107, 0.08) 0%,
      #ffffff 42%,
      rgba(0, 168, 107, 0.05) 100%
    ),
    #f7f7f9 !important;
}
html[data-theme="light"] .wn-road-card:hover {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

/* Metrics hard-coded surfaces — monochrome black + green (no blue chrome) */
.mx-seg-btn {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  background: var(--fill-deep) !important;
}
.mx-seg-btn.is-on {
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--green) 40%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 12%, var(--fill-deep)) !important;
}
.mx-table,
.mx-table th,
.mx-table td {
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.mx-table thead,
.mx-table th {
  background: var(--fill-deep, var(--bg-elev)) !important;
}
.mx-table tbody tr:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent) !important;
}
.mx-board-note,
.mx-hint,
.mx-foot,
.mx-kicker {
  color: var(--muted) !important;
}
.mx-bar,
.mx-bar--live {
  background: color-mix(in srgb, var(--text) 8%, transparent) !important;
  border-color: var(--line) !important;
}
.mx-bar > i,
.mx-bar--live > i,
.mx-bar .fill,
.mx-bar-fill {
  background: linear-gradient(90deg, var(--green-dim), var(--green)) !important;
}
.mx-pane--live {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent) !important;
}
.mx-dot--live {
  background: var(--green-dim) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 45%, transparent) !important;
}
.mx-stat {
  background: color-mix(in srgb, var(--bg) 70%, transparent) !important;
  border-color: var(--line) !important;
}
.mx-boards,
.mx-table-wrap {
  border-color: var(--line) !important;
  background: var(--glass-panel, var(--bg-panel)) !important;
}
.mx-fx-glow--b {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%) !important;
}
html[data-theme="light"] .mx-fx-glow--a,
html[data-theme="light"] .wn-bg-orb--a {
  opacity: 0.35 !important;
  background: radial-gradient(circle, rgba(0, 168, 107, 0.16), transparent 70%) !important;
}
html[data-theme="light"] .mx-fx-glow--b {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06), transparent 70%) !important;
}

/* chart-hover-theme-v2 */
.chart-hover {
  background: var(--glass-panel) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}
.chart-hover #equity-hover-val,
.chart-hover #equity-hover-val-modal,
.chart-hover .chart-hover-close {
  color: var(--text) !important;
}
.chart-hover.chart-hover--up .chart-hover-dir { color: var(--green) !important; }
.chart-hover.chart-hover--down .chart-hover-dir { color: var(--red, #ef4444) !important; }
.chart-hover .chart-hover-ohlc span.v { color: var(--text) !important; }
.chart-hover .chart-hover-ohlc span.k,
.chart-hover #equity-hover-time,
.chart-hover #equity-hover-time-modal {
  color: var(--muted) !important;
}