/* SpyQiNex "Light Glass" skin + fluid layout. Presentation only: no ids, handlers or data touched.
   Part 1 is Light/Mist only. Part 2 (fluid layout, tables, mobile) applies to every theme. */

/* =================== PART 1: LIGHT GLASS =================== */
html:is([data-skin="white"],[data-skin="mist"]) {
  --gl-card: rgba(255,255,255,.66);
  --gl-card-strong: rgba(255,255,255,.86);
  --gl-line: rgba(30,41,59,.14);
  --gl-line-soft: rgba(30,41,59,.08);
  --gl-ink: #0f172a;
  --gl-ink2: #334155;
  --gl-ink3: #52606f;
  --gl-accent: #067a47;
  --gl-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px -12px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.05);
}
html:is([data-skin="white"],[data-skin="mist"]) body {
  background:
    radial-gradient(900px 480px at 8% -6%, rgba(6,122,71,.10), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(37,99,235,.09), transparent 58%),
    linear-gradient(180deg, #f3f6fa 0%, #e9eef5 100%) fixed !important;
  color: var(--gl-ink);
}
/* glass surfaces (legacy navy panels are converted to these two classes by light_fix.js) */
html:is([data-skin="white"],[data-skin="mist"]) .sqx-lt-surf {
  background: var(--gl-card) !important; background-image: none !important;
  border: 1px solid var(--gl-line) !important; border-radius: 14px !important;
  box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
html:is([data-skin="white"],[data-skin="mist"]) .sqx-lt-tint {
  background: rgba(255,255,255,.52) !important; background-image: none !important;
  border: 1px solid var(--gl-line-soft) !important; border-radius: 10px !important;
}
html:is([data-skin="white"],[data-skin="mist"]) :is(.stat-card,.card,.panel,.metric-card,.perf-metric-item,.perf-card,.perf-section,.perf-filter-bar,#apiGauges) {
  background: var(--gl-card) !important; border: 1px solid var(--gl-line) !important;
  border-radius: 12px !important; box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
/* buttons: frosted pills with a clear edge and a lift on hover */
html:is([data-skin="white"],[data-skin="mist"]) :is(.btn,.perf-mode-btn,.perf-strat-pill,.perf-ticker-pill):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.action-btn) {
  background: rgba(255,255,255,.72) !important; color: var(--gl-ink) !important;
  border: 1px solid rgba(30,41,59,.22) !important; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(15,23,42,.07);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
html:is([data-skin="white"],[data-skin="mist"]) :is(.btn,.perf-mode-btn,.perf-strat-pill,.perf-ticker-pill):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.action-btn):hover {
  background: rgba(255,255,255,.95) !important; border-color: rgba(6,122,71,.55) !important;
  transform: translateY(-1px); box-shadow: 0 1px 0 #fff inset, 0 8px 18px -8px rgba(15,23,42,.28);
}
html:is([data-skin="white"],[data-skin="mist"]) :is(.perf-mode-btn.active,.btn.active) {
  background: linear-gradient(180deg, rgba(6,122,71,.16), rgba(6,122,71,.08)) !important;
  border-color: var(--gl-accent) !important; color: #054d2e !important; font-weight: 700;
}
html:is([data-skin="white"],[data-skin="mist"]) .btn.btn-success { box-shadow: 0 6px 16px -6px rgba(6,122,71,.55); border-radius: 10px; }
html:is([data-skin="white"],[data-skin="mist"]) .btn.btn-danger { background:#b42318 !important; color:#fff !important; border:1px solid #8f1c13 !important; border-radius:10px; }
/* fields */
html:is([data-skin="white"],[data-skin="mist"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea) {
  background: var(--gl-card-strong) !important; color: var(--gl-ink) !important;
  border: 1px solid rgba(30,41,59,.30) !important; border-radius: 9px !important;
  box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(15,23,42,.06);
}
/* tables: no more dark zebra rows */
html:is([data-skin="white"],[data-skin="mist"]) .perf-table {
  border: 1px solid var(--gl-line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--gl-card); box-shadow: var(--gl-shadow);
}
html:is([data-skin="white"],[data-skin="mist"]) .perf-table thead th {
  background: rgba(226,232,240,.85) !important; color: var(--gl-ink2) !important;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--gl-line) !important; padding: 11px 12px;
}
html:is([data-skin="white"],[data-skin="mist"]) .perf-table tbody tr { background: rgba(255,255,255,.62) !important; color: var(--gl-ink) !important; }
html:is([data-skin="white"],[data-skin="mist"]) .perf-table tbody tr:nth-child(even) { background: rgba(241,245,249,.80) !important; }
html:is([data-skin="white"],[data-skin="mist"]) .perf-table tbody tr:hover { background: rgba(6,122,71,.10) !important; }
html:is([data-skin="white"],[data-skin="mist"]) .perf-table tbody td { color: inherit; border-bottom: 1px solid var(--gl-line-soft) !important; padding: 10px 12px; }
html:is([data-skin="white"],[data-skin="mist"]) table:not(.perf-table) thead th { background: rgba(226,232,240,.85) !important; }
/* section separators and headings */
html:is([data-skin="white"],[data-skin="mist"]) .tab-content :is(h1,h2,h3,h4) { color: var(--gl-ink) !important; }
html:is([data-skin="white"],[data-skin="mist"]) :is(.perf-card,.perf-section,.perf-filter-bar) { padding: 16px 20px !important; margin-bottom: 16px; }
html:is([data-skin="white"],[data-skin="mist"]) .perf-section .perf-filter-bar { background: rgba(255,255,255,.45) !important; border: 1px solid var(--gl-line-soft) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:is([data-skin="white"],[data-skin="mist"]) .perf-card { border-left: 4px solid var(--gl-accent) !important; }
html:is([data-skin="white"],[data-skin="mist"]) .perf-card-title { color: var(--gl-ink2) !important; font-weight: 700; }
html:is([data-skin="white"],[data-skin="mist"]) .tab-content hr { border: 0; border-top: 1px solid var(--gl-line); }
html:is([data-skin="white"],[data-skin="mist"]) .tab-content ::-webkit-scrollbar-thumb { background: rgba(71,85,105,.45); border-radius: 8px; }
html:is([data-skin="white"],[data-skin="mist"]) .tab-content ::-webkit-scrollbar-track { background: rgba(148,163,184,.18); }
html:is([data-skin="white"],[data-skin="mist"]) .footer, html:is([data-skin="white"],[data-skin="mist"]) footer { color: var(--gl-ink3); border-top: 1px solid var(--gl-line-soft); }


/* =================== PART 1B: DARK GLASS (Dark / Slate / Abyss themes) =================== */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]),
html[data-theme="dark"],
html[data-skin="dark"] {
  --gl-card: rgba(18, 24, 38, 0.72);
  --gl-card-strong: rgba(24, 32, 50, 0.90);
  --gl-line: rgba(255, 255, 255, 0.09);
  --gl-line-soft: rgba(255, 255, 255, 0.05);
  --gl-ink: #f1f5f9;
  --gl-ink2: #cbd5e1;
  --gl-ink3: #94a3b8;
  --gl-accent: #10b981;
  --gl-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) body {
  background:
    radial-gradient(1100px 520px at 10% -8%, rgba(16, 185, 129, 0.08), transparent 60%),
    radial-gradient(1000px 560px at 95% -4%, rgba(6, 182, 212, 0.07), transparent 58%),
    linear-gradient(180deg, #090d14 0%, #0d121c 100%) fixed !important;
  color: var(--gl-ink);
}
/* glass surfaces */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .sqx-lt-surf {
  background: var(--gl-card) !important; background-image: none !important;
  border: 1px solid var(--gl-line) !important; border-radius: 14px !important;
  box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .sqx-lt-tint {
  background: rgba(24, 32, 50, 0.55) !important; background-image: none !important;
  border: 1px solid var(--gl-line-soft) !important; border-radius: 10px !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(.stat-card,.card,.panel,.metric-card,.perf-metric-item,.perf-card,.perf-section,.perf-filter-bar,#apiGauges,#soundSettingsPanel,.dashboard-section) {
  background: var(--gl-card) !important; border: 1px solid var(--gl-line) !important;
  border-radius: 12px !important; box-shadow: var(--gl-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
/* buttons: frosted pills with luminous edge and hover lift */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(.btn,.perf-mode-btn,.perf-strat-pill,.perf-ticker-pill):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.action-btn):not(.btn-3d) {
  background: rgba(30, 41, 59, 0.65) !important; color: var(--gl-ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(.btn,.perf-mode-btn,.perf-strat-pill,.perf-ticker-pill):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.action-btn):not(.btn-3d):hover {
  background: rgba(45, 60, 85, 0.85) !important; border-color: rgba(16, 185, 129, 0.55) !important;
  transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 20px -6px rgba(0, 0, 0, 0.6);
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(.perf-mode-btn.active,.btn.active) {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.12)) !important;
  border-color: var(--gl-accent) !important; color: #34d399 !important; font-weight: 700;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .btn.btn-success { box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.55); border-radius: 10px; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .btn.btn-danger { background: #dc2626 !important; color: #fff !important; border: 1px solid #b91c1c !important; border-radius: 10px; }

/* fields */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea) {
  background: var(--gl-card-strong) !important; color: var(--gl-ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 9px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* tables */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-table {
  border: 1px solid var(--gl-line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--gl-card); box-shadow: var(--gl-shadow);
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-table thead th {
  background: rgba(22, 30, 48, 0.90) !important; color: var(--gl-ink2) !important;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--gl-line) !important; padding: 11px 12px;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-table tbody tr { background: rgba(18, 24, 38, 0.55) !important; color: var(--gl-ink) !important; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-table tbody tr:nth-child(even) { background: rgba(26, 34, 52, 0.65) !important; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-table tbody tr:hover { background: rgba(16, 185, 129, 0.12) !important; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-table tbody td { color: inherit; border-bottom: 1px solid var(--gl-line-soft) !important; padding: 10px 12px; }

/* section separators and headings */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .tab-content :is(h1,h2,h3,h4) { color: var(--gl-ink) !important; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(.perf-card,.perf-section,.perf-filter-bar) { padding: 16px 20px !important; margin-bottom: 16px; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-section .perf-filter-bar { background: rgba(22, 30, 48, 0.50) !important; border: 1px solid var(--gl-line-soft) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-card { border-left: 4px solid var(--gl-accent) !important; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-card-title { color: var(--gl-ink2) !important; font-weight: 700; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .tab-content hr { border: 0; border-top: 1px solid var(--gl-line); }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .tab-content ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 8px; }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .tab-content ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); }
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .footer, html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) footer { color: var(--gl-ink3); border-top: 1px solid var(--gl-line-soft); }

/* =================== PART 2: FLUID LAYOUT (all themes) =================== */
.tab-content { width: 100%; box-sizing: border-box; overflow-x: clip; }
.tab-content :is(h1) { font-size: clamp(22px, .8vw + 16px, 32px); line-height: 1.2; letter-spacing: -.005em; }
.perf-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.perf-table { width: 100%; font-variant-numeric: tabular-nums; }
.perf-table :is(th,td) { white-space: nowrap; }
.perf-table td:nth-child(5), .perf-table th:nth-child(5) { white-space: normal; min-width: 180px; }
:is(.perf-metric-value,.perf-table td) { font-variant-numeric: tabular-nums; }
.tab-content :is(input,select,textarea,button) { max-width: 100%; box-sizing: border-box; }
/* big monitors: scale the content so it does not look tiny and lost */
@media (min-width: 2200px) { .tab-content { zoom: 1.15; } }
@media (min-width: 3000px) { .tab-content { zoom: 1.35; } }
/* laptops and tablets */
@media (max-width: 1100px) {
  .tab-content { padding-left: 16px !important; padding-right: 16px !important; }
  .tab-content :is(table) { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
/* phones */
@media (max-width: 640px) {
  .tab-content { padding: 14px 12px 96px !important; }
  .perf-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-content :is(input,select,textarea) { font-size: 16px; min-height: 40px; }
  .tab-content .btn, .tab-content button { min-height: 38px; }
  .tab-content [style*="display: flex"], .tab-content [style*="display:flex"] { flex-wrap: wrap; }
  .tab-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .perf-leaderboard-tabs { max-width: 100%; overflow-x: auto; }
  html .perf-section, html .perf-card { padding: 12px !important; }
  html .perf-section .perf-filter-bar { padding: 10px !important; }
}
/* page headers: the redesign made these 36-62px display type; scale them to a dashboard-appropriate size */
.dashboard-section-header { font: 700 clamp(22px, .7vw + 16px, 30px)/1.2 'Inter','Geist',system-ui,sans-serif !important; letter-spacing: -.005em !important; margin: 4px 0 18px !important; }
.dashboard-section-header small, .dashboard-section-header > span:last-child:not(:first-child) { font: 400 clamp(13px, .2vw + 12px, 15px)/1.45 'Inter','Geist',system-ui,sans-serif !important; margin: 6px 0 0 !important; max-width: none !important; }

/* =================== PART 3: MOBILE FIXES (orders scroll, cut-off text, E-STOP label) =================== */
@media (max-width: 768px) {
  /* --- Orders / History: no nested vertical scroller (it trapped the swipe); the page scrolls, the table only pans sideways --- */
  html #history .table-responsive,
  html .tab-content .table-responsive {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    max-width: 100%;
  }
  /* part 2 turned every table into display:block, which breaks column sizing inside a scroller */
  html .tab-content .table-responsive table,
  html .tab-content .table-responsive > table {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    overflow: visible !important;
  }
  /* sticky headers only work against the (now non-scrolling) vertical axis, so drop them */
  html #history thead,
  html #history thead th { position: static !important; }
  /* wrap the long text columns instead of clipping them; keep numbers on one line */
  html #historyTable th, html #historyTable td { white-space: nowrap; padding: 8px 10px !important; }
  html #historyTable td:nth-child(5), html #historyTable th:nth-child(5),
  html #historyTable td:nth-child(9), html #historyTable th:nth-child(9),
  html #historyTable td:nth-child(11), html #historyTable th:nth-child(11) {
    white-space: normal !important; word-break: break-word; min-width: 150px; max-width: 220px;
  }
  html #historyTable td:nth-child(3), html #historyTable td:nth-child(4) { white-space: normal !important; min-width: 96px; }
  /* Performance dashboard audit table: same treatment */
  html .perf-table td:nth-child(5), html .perf-table th:nth-child(5) { min-width: 150px; max-width: 240px; }
  html .perf-table { width: max-content; min-width: 100%; }
  /* make it obvious the table pans sideways */
  html #history .table-responsive { box-shadow: inset -14px 0 12px -12px rgba(148,163,184,.35); }
}

/* --- E-STOP on mobile: redesign.css hides its icon and the button has no text, leaving an empty ring --- */
html .emergency-stop.sqx-mes svg, html .emergency-stop.sqx-mes i { display: none !important; }
html .emergency-stop.sqx-mes::after {
  content: "E-STOP"; display: block; color: var(--red) !important; font: 700 9px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .02em; text-transform: uppercase; text-align: center; pointer-events: none;
}
html .emergency-stop.sqx-mes { min-width: 46px !important; width: 46px !important; height: 46px !important; display: flex !important; align-items: center; justify-content: center; }
html .emergency-stop.sqx-mes:hover::after, html .emergency-stop.sqx-mes:active::after { color: #fff !important; }


/* ===== PART 4: mobile order cards + badge contrast ===== */
/* Badges with a solid green (#28a745) or grey (#999) fill had white text at ~2.2-2.6:1; use dark text there */
.ticker-badge[style*="28a745"], .ticker-badge[style*="40, 167, 69"],
.ticker-badge[style*="#999"], .ticker-badge[style*="153, 153, 153"],
.ticker-badge.badge-active {
  color: #04140a !important;
  font-weight: 700 !important;
}

/* Order History as per-order cards on phones: fluid responsive, no cut-offs, proper theme parity */
@media (max-width: 768px) {
  #history {
    padding-bottom: 96px !important;
  }
  #history .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
    border: 0 !important;
    background: transparent !important;
    padding-bottom: 24px !important;
  }
  #history #historyTable, #history #historyTable tbody { display: block !important; width: 100% !important; }
  #history #historyTable thead { display: none !important; }

  /* Ensure collapsed rows remain hidden! */
  #history #historyTable tr[style*="display: none"],
  #history #historyTable tr[style*="display:none"] {
    display: none !important;
  }

  /* Visible rows render as modern tactile cards */
  #history #historyTable tr:not([style*="display: none"]):not([style*="display:none"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 0 0 12px 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    transition: all 0.18s ease !important;
  }

  /* Dark Theme Card */
  html:not([data-theme="light"]):not(.light-theme) #history #historyTable tr:not([style*="display: none"]):not([style*="display:none"]) {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    color: #f1f5f9 !important;
  }
  html:not([data-theme="light"]):not(.light-theme) #history #historyTable td {
    color: #f1f5f9 !important;
  }
  html:not([data-theme="light"]):not(.light-theme) #history #historyTable td::before {
    color: #94a3b8 !important;
  }

  /* Light Theme Card */
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #history #historyTable tr:not([style*="display: none"]):not([style*="display:none"]) {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #history #historyTable td {
    color: #0f172a !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #history #historyTable td::before {
    color: #64748b !important;
    opacity: 1 !important;
  }

  #history #historyTable tr[class*="child"], #history #historyTable tr[class*="phantom-child"] {
    margin-left: 10px !important;
    border-left: 3px solid #38bdf8 !important;
  }
  #history #historyTable td {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    text-align: left !important;
    font-size: 12px !important;
  }
  #history #historyTable td::before {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-family: inherit;
  }
  #history #historyTable td:nth-child(1)::before  { content: "Time"; }
  #history #historyTable td:nth-child(2)::before  { content: "Symbol"; }
  #history #historyTable td:nth-child(3)::before  { content: "Strikes"; }
  #history #historyTable td:nth-child(4)::before  { content: "Action"; }
  #history #historyTable td:nth-child(5)::before  { content: "Strategy"; }
  #history #historyTable td:nth-child(6)::before  { content: "Tag"; }
  #history #historyTable td:nth-child(7)::before  { content: "Qty"; }
  #history #historyTable td:nth-child(8)::before  { content: "Price"; }
  #history #historyTable td:nth-child(9)::before  { content: "Exit price(s) / targets"; }
  #history #historyTable td:nth-child(10)::before { content: "Status"; }
  #history #historyTable td:nth-child(11)::before { content: "Message"; }
  #history #historyTable td:nth-child(1),
  #history #historyTable td:nth-child(5),
  #history #historyTable td:nth-child(9),
  #history #historyTable td:nth-child(11) { grid-column: 1 / -1; }
  #history #historyTable td:nth-child(9) span { white-space: normal !important; }
  /* single-cell placeholder rows (loading / empty / error) */
  #history #historyTable td[colspan] { grid-column: 1 / -1; }
  #history #historyTable td[colspan]::before { content: none; }
}