/* ==========================================================================
   type_scale.css - one deliberate type scale for the whole app (loaded LAST).

   Why: redesign.css gave every KPI label 22px and every value 34px, page titles up to
   62px, and sub-lines 19px - a marketing-site scale on a dense trading dashboard. Labels
   ended up as loud as the numbers they describe and dwarfed the 11-13px buttons beside them.

   Scale (desktop): 12 caption / 13 UI + table / 14 body / 16 section title / 26-28 KPI value
                    / 28-32 page title.  Ratios stay ~1.2-1.3 between neighbours, so the eye reads
                    value > label > caption without anything shouting.
   Tokens are variables: change a number here and every page follows.
   ========================================================================== */
:root {
  --t-cap: 12px;      /* captions, sub-lines, table headers */
  --t-ui: 13px;       /* buttons, inputs, pills, table cells */
  --t-body: 14px;     /* running text */
  --t-h3: 16px;       /* section / card titles */
  --t-kpi: 26px;      /* KPI numbers */
  --t-page: clamp(26px, 2.2vw, 32px);   /* page title */
}

body { font-size: var(--t-body) !important; line-height: 1.5; }

/* page header */
.dashboard-section-header { font-size: var(--t-page) !important; line-height: 1.15 !important; font-weight: 650 !important; margin: 4px 0 22px !important; letter-spacing: -.02em !important; }
.dashboard-section-header small,
.dashboard-section-header > span:last-child:not(:first-child) { font-size: var(--t-body) !important; line-height: 1.5 !important; margin-top: 6px !important; max-width: 72ch; }
.tab-content { padding-top: 28px !important; }

/* KPI cards: quiet label -> big value -> caption */
.perf-card-title { font-size: var(--t-ui) !important; line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--muted2, #8b949e) !important; }
.perf-card-value { font-size: var(--t-kpi) !important; line-height: 1.1 !important; font-weight: 650 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 6px 0 4px !important; }
.perf-card-subtitle { font-size: var(--t-cap) !important; line-height: 1.4 !important; font-weight: 500; }
.perf-card, .stat-card { padding: 16px 18px !important; }

/* section titles */
.ticker-title, .rs-section-title, .settings-section > h3, h3 { font-size: var(--t-h3) !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: -.01em !important; }
h2 { font-size: 20px; }

/* controls share one size so a button never looks smaller than the label above it */
.btn, .btn-sm, .btn-3d, .action-btn, .header-btn, .chart-tf-btn, .az-btn, .sim-template-btn, .call-btn,
.perf-mode-btn, .perf-strat-pill, .perf-ticker-pill { font-size: var(--t-ui) !important; }
input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], input[type=time], select, textarea { font-size: var(--t-ui) !important; }
label { font-size: var(--t-cap); }

/* tables */
th { font-size: var(--t-cap) !important; }
td { font-size: var(--t-ui); }

/* ---- the colour side: stop every card outlining itself in its own neon ----
   Cards built in JS/templates carry inline "border: 1px solid rgba(<accent>, .35)" and tinted fills.
   One neutral hairline + one surface reads as designed; six rainbow outlines read as generated. */
.perf-card[style*="border: 1px solid rgba("], .perf-card[style*="border:1px solid rgba("] {
  border: 1px solid var(--border, #263040) !important; background: var(--surface, #12161f) !important; border-radius: 10px !important;
}
.perf-card[style*="border: 1px solid rgba("] .perf-card-title,
.perf-card[style*="border:1px solid rgba("] .perf-card-title { text-transform: none !important; }
/* decorative icon colours inside card titles: keep one muted tone */
.perf-card-title svg, .perf-card-title i { color: var(--muted, #8b949e) !important; opacity: .85; }

@media (max-width: 768px) {
  :root { --t-kpi: 22px; --t-h3: 15px; --t-page: 24px; }
  .perf-card, .stat-card { padding: 12px 14px !important; }
}


/* ==========================================================================
   1. SOLID ACTIVE BUTTONS (NO NEON GLOW, CLEAN SOLID COLOR SWITCH)
   Applied across BOTH Light and Dark themes for ALL buttons, sub-tabs, and pills.
   ========================================================================== */

/* Universal elimination of fuzzy glows across all active buttons, filters, sorts and pills */
:is(.perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
    .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn, 
    .perf-lb-card, .perf-session-btn, .timeframe-btn, .nav-pill).active,
:is(.perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
    .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn, 
    .perf-lb-card, .perf-session-btn, .timeframe-btn, .nav-pill)[class*="active"] {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   A. DEDICATED SUB-TAB COLOR SWITCH (Both Light & Dark Theme)
   -------------------------------------------------------------------------- */
/* $5k Audit sub-tab: Solid Vibrant Emerald - Fluid Glass, No Glowing Halo */
#btnMode5kAudit.active, #btnMode5kAudit[class*="active"] {
  background: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* All Trades sub-tab: Solid Royal Blue - Fluid Glass, No Glowing Halo */
#btnModeAllTrades.active, #btnModeAllTrades[class*="active"] {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Daily Ledger sub-tab: Solid Cerulean/Cyan Blue - Fluid Glass, No Glowing Halo */
#btnModeDailyLedger.active, #btnModeDailyLedger[class*="active"] {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   B. STRATEGY FILTER PILLS (Both Light & Dark Theme)
   -------------------------------------------------------------------------- */
/* Internal Bot pill: Solid Emerald */
#btnStrat_INTERNAL.active, .perf-strat-pill[data-strat="bot"].active, .perf-strat-pill[data-strat="internal"].active {
  background: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  font-weight: 700 !important;
}
#btnStrat_INTERNAL.active *, .perf-strat-pill[data-strat="bot"].active * {
  color: #ffffff !important;
}

/* Social Pro pill: Solid Purple/Indigo */
#btnStrat_SOCIAL_ALL.active, .perf-strat-pill[data-strat="social"].active {
  background: #7c3aed !important;
  color: #ffffff !important;
  border: 1px solid #6d28d9 !important;
  font-weight: 700 !important;
}
#btnStrat_SOCIAL_ALL.active *, .perf-strat-pill[data-strat="social"].active * {
  color: #ffffff !important;
}

/* All Strategy pill */
#btnStrat_ALL.active, .perf-strat-pill[data-strat="all"].active {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  font-weight: 700 !important;
}
#btnStrat_ALL.active * {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   C. EXECUTION MODE PILLS (Live, Rejections, Traps, All)
   -------------------------------------------------------------------------- */
#btnAct_LIVE_SPX.active, .perf-5k-pill[data-act="live"].active {
  background: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  font-weight: 700 !important;
}
#btnAct_LIVE_SPX.active * { color: #ffffff !important; }

#btnAct_REJECTED.active, .perf-5k-pill[data-act="rejected"].active {
  background: #7c3aed !important;
  color: #ffffff !important;
  border: 1px solid #6d28d9 !important;
  font-weight: 700 !important;
}
#btnAct_REJECTED.active * { color: #ffffff !important; }

#btnAct_TRAPS.active, .perf-5k-pill[data-act="traps"].active {
  background: #d97706 !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  font-weight: 700 !important;
}
#btnAct_TRAPS.active * { color: #ffffff !important; }

#btnAct_ALL.active, .perf-5k-pill[data-act="all"].active {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  font-weight: 700 !important;
}
#btnAct_ALL.active * { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   D. SESSION & TICKER FILTER PILLS (Both Themes)
   -------------------------------------------------------------------------- */
#btnDateQuick_TODAY.active, #btnDateQuick_ALL.active, .perf-date-pill.active, .perf-session-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
  font-weight: 700 !important;
}
#btnDateQuick_TODAY.active *, #btnDateQuick_ALL.active * { color: #ffffff !important; }

.perf-ticker-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
  font-weight: 700 !important;
}
.perf-ticker-pill.active * { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   E. DEFAULT / GENERIC ACTIVE BUTTONS
   -------------------------------------------------------------------------- */
/* Dark theme default active */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) :is(
  .perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
).active:not(.btn-danger):not(.btn-success):not(#btnMode5kAudit):not(#btnModeAllTrades):not(#btnModeDailyLedger):not(#btnStrat_INTERNAL):not(#btnStrat_SOCIAL_ALL):not(#btnAct_LIVE_SPX):not(#btnAct_REJECTED):not(#btnAct_TRAPS):not(#btnAct_ALL):not(#btnStrat_ALL):not(#btnDateQuick_TODAY):not(#btnDateQuick_ALL) {
  background: #334155 !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
  font-weight: 700 !important;
}

/* Light theme default active */
html[data-theme="light"] :is(
  .perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
).active:not(.btn-danger):not(.btn-success):not(#btnMode5kAudit):not(#btnModeAllTrades):not(#btnModeDailyLedger):not(#btnStrat_INTERNAL):not(#btnStrat_SOCIAL_ALL):not(#btnAct_LIVE_SPX):not(#btnAct_REJECTED):not(#btnAct_TRAPS):not(#btnAct_ALL):not(#btnStrat_ALL):not(#btnDateQuick_TODAY):not(#btnDateQuick_ALL),
html:is([data-skin="white"],[data-skin="mist"]) :is(
  .perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
).active:not(.btn-danger):not(.btn-success):not(#btnMode5kAudit):not(#btnModeAllTrades):not(#btnModeDailyLedger):not(#btnStrat_INTERNAL):not(#btnStrat_SOCIAL_ALL):not(#btnAct_LIVE_SPX):not(#btnAct_REJECTED):not(#btnAct_TRAPS):not(#btnAct_ALL):not(#btnStrat_ALL):not(#btnDateQuick_TODAY):not(#btnDateQuick_ALL) {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   F. INACTIVE BUTTON STYLING IN LIGHT THEME (Crisp, High-Contrast)
   -------------------------------------------------------------------------- */
html[data-theme="light"] :is(
  .perf-mode-btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
):not(.active),
html:is([data-skin="white"],[data-skin="mist"]) :is(
  .perf-mode-btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
):not(.active) {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] :is(
  .perf-mode-btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
):not(.active):hover,
html:is([data-skin="white"],[data-skin="mist"]) :is(
  .perf-mode-btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, 
  .perf-strat-pill, .perf-ticker-pill, .perf-5k-pill, .chart-tf-btn
):not(.active):hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Leaderboard cards when active: solid border, no blurry glow */
.perf-lb-card.active {
  box-shadow: none !important;
  border-width: 1px !important;
}

/* ==========================================================================
   2. LIGHT THEME CONTRAST (SLIGHTLY DARKER GREY INSTEAD OF PALE GREY)
   ========================================================================== */
html[data-theme="light"], html:is([data-skin="white"],[data-skin="mist"]) {
  --muted: #334155 !important;
  --muted2: #475569 !important;
  --text-secondary: #334155 !important;
  --gl-ink2: #334155 !important;
  --gl-ink3: #475569 !important;
}

html[data-theme="light"] .perf-card-title,
html:is([data-skin="white"],[data-skin="mist"]) .perf-card-title,
html[data-theme="light"] .perf-card-subtitle,
html:is([data-skin="white"],[data-skin="mist"]) .perf-card-subtitle,
html[data-theme="light"] .text-muted,
html:is([data-skin="white"],[data-skin="mist"]) .text-muted,
html[data-theme="light"] small,
html:is([data-skin="white"],[data-skin="mist"]) small,
html[data-theme="light"] th,
html:is([data-skin="white"],[data-skin="mist"]) th {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Light theme body and table cells */
html[data-theme="light"] td,
html:is([data-skin="white"],[data-skin="mist"]) td {
  color: #0f172a !important;
}

/* Light theme active buttons: solid dark slate, white text, no glow */
html[data-theme="light"] :is(.perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, .chart-tf-btn).active:not(.btn-danger):not(.btn-success),
html:is([data-skin="white"],[data-skin="mist"]) :is(.perf-mode-btn, .btn, .perf-date-pill, .perf5k-lb-sort, .perf5k-lb-tab, .chart-tf-btn).active:not(.btn-danger):not(.btn-success) {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  box-shadow: none !important;
}

/* ==========================================================================
   3. DARK THEME COLOR STANDARDIZATION (SpyQiNex Brand Theme)
   ========================================================================== */
/* Standardize filter labels instead of random neon pink, cyan, sky blue, purple */
.perf5k-filter-label, 
.perf5k-action-pills ~ *label,
#perf5kAuditView span[style*="color: #ec4899"],
#perf5kAuditView span[style*="color: #38bdf8"],
#perf5kAuditView span[style*="color: #06b6d4"],
#perf5kAuditView span[style*="color: #f59e0b"] {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.5px !important;
}

/* Collapsible guardrails banner */
.sqx-guardrails-collapse {
  transition: all 0.2s ease;
}
.sqx-guardrails-collapse summary::-webkit-details-marker {
  display: none !important;
}
.sqx-guardrails-collapse summary::marker {
  display: none !important;
}
.sqx-guardrails-collapse[open] {
  background: rgba(16, 185, 129, 0.07) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
.sqx-guardrails-collapse[open] .sqx-collapse-badge {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}


/* ==========================================================================
   4. ALERTS TABLE FULL-ROW SHADING (Green, Red, White/Slate)
   Overrides redesign.css transparent tr rule for quick instant identification.
   ========================================================================== */
#alertsTabTable tbody tr.alert-row-green,
#alertsTabTable tbody tr[data-dir="bull"],
#alertsTabTable tbody tr[data-dir="call"],
#alertsTabTable tbody tr[style*="rgba(34,197,94"],
#alertsTabTable tbody tr[style*="rgba(16,185,129"] {
  background: rgba(16, 185, 129, 0.16) !important;
  border-left: 4px solid #10b981 !important;
}
#alertsTabTable tbody tr.alert-row-green:hover,
#alertsTabTable tbody tr[data-dir="bull"]:hover,
#alertsTabTable tbody tr[data-dir="call"]:hover,
#alertsTabTable tbody tr[style*="rgba(34,197,94"]:hover,
#alertsTabTable tbody tr[style*="rgba(16,185,129"]:hover {
  background: rgba(16, 185, 129, 0.25) !important;
}

#alertsTabTable tbody tr.alert-row-red,
#alertsTabTable tbody tr[data-dir="bear"],
#alertsTabTable tbody tr[data-dir="put"],
#alertsTabTable tbody tr[style*="rgba(239,68,68"] {
  background: rgba(239, 68, 68, 0.16) !important;
  border-left: 4px solid #ef4444 !important;
}
#alertsTabTable tbody tr.alert-row-red:hover,
#alertsTabTable tbody tr[data-dir="bear"]:hover,
#alertsTabTable tbody tr[data-dir="put"]:hover,
#alertsTabTable tbody tr[style*="rgba(239,68,68"]:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

#alertsTabTable tbody tr.alert-row-neutral,
#alertsTabTable tbody tr[data-dir="neutral"],
#alertsTabTable tbody tr[style*="rgba(148,163,184"],
#alertsTabTable tbody tr[style*="rgba(96,165,250"],
#alertsTabTable tbody tr[style*="rgba(234,179,8"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border-left: 4px solid #94a3b8 !important;
}
#alertsTabTable tbody tr.alert-row-neutral:hover,
#alertsTabTable tbody tr[data-dir="neutral"]:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

#alertsTabTable tbody td {
  background: transparent !important;
}


/* Mobile typography refinement - proportional headers, crisp buttons */
@media (max-width: 768px) {
  :root { 
    --t-kpi: 20px; 
    --t-h3: 14px; 
    --t-page: 18px; 
    --t-ui: 11.5px;
    --t-cap: 11px;
    --t-body: 13px;
  }
  .dashboard-section-header { 
    font-size: 19px !important; 
    margin: 4px 0 8px !important; 
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }
  .dashboard-section-header small,
  .dashboard-section-header > span:last-child:not(:first-child) { 
    font-size: 11px !important; 
    margin-top: 3px !important;
    color: var(--muted, #94a3b8) !important;
    display: block;
  }
  .perf-mode-btn { 
    font-size: 11.5px !important; 
    padding: 8px 12px !important; 
    min-height: 38px !important;
  }
  .perf-card, .stat-card { 
    padding: 10px 12px !important; 
  }
  .perf-view-mode-bar {
    padding: 6px !important;
    gap: 6px !important;
  }
  /* Mobile solid active states for sub-tabs */
  #btnMode5kAudit.active {
    background: #065f46 !important;
    color: #ffffff !important;
    border: 1px solid #10b981 !important;
  }
  #btnModeAllTrades.active {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
  }
  #btnModeDailyLedger.active {
    background: #075985 !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
  }
}


/* ==========================================================================
   5. CRITICAL ALERT INVERTED HIGHLIGHT (Beacon Effect)
   Dark Theme: High-contrast white background with dark text
   Light Theme: Deep dark slate background with crisp white text
   ========================================================================== */
/* Dark Theme (Default) */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) #alertsTabTable tbody tr.alert-row-critical,
#alertsTabTable tbody tr.alert-row-critical {
  background: #ffffff !important;
  color: #090d14 !important;
  border-left: 6px solid #dc2626 !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) #alertsTabTable tbody tr.alert-row-critical td,
#alertsTabTable tbody tr.alert-row-critical td {
  color: #090d14 !important;
  font-weight: 700 !important;
  background: transparent !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) #alertsTabTable tbody tr.alert-row-critical strong,
#alertsTabTable tbody tr.alert-row-critical strong {
  color: #000000 !important;
}

/* Light Theme: Inverted dark background with white text */
html[data-theme="light"] #alertsTabTable tbody tr.alert-row-critical,
html:is([data-skin="white"],[data-skin="mist"]) #alertsTabTable tbody tr.alert-row-critical {
  background: #0f172a !important;
  color: #ffffff !important;
  border-left: 6px solid #ef4444 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="light"] #alertsTabTable tbody tr.alert-row-critical td,
html:is([data-skin="white"],[data-skin="mist"]) #alertsTabTable tbody tr.alert-row-critical td {
  color: #ffffff !important;
  font-weight: 700 !important;
  background: transparent !important;
}
html[data-theme="light"] #alertsTabTable tbody tr.alert-row-critical strong,
html:is([data-skin="white"],[data-skin="mist"]) #alertsTabTable tbody tr.alert-row-critical strong {
  color: #ffffff !important;
}

/* ==========================================================================
   6. LIGHT THEME ADAPTIVE LOGO & INVISIBLE TEXT FIXES
   ========================================================================== */
/* Swap logo to dark navy text in light mode */
html[data-theme="light"] :is(.sqx-brand-logo, .sqx-brand-logo-m),
html:is([data-skin="white"],[data-skin="mist"]) :is(.sqx-brand-logo, .sqx-brand-logo-m) {
  content: url("/static/img/spyqinex_logo_horizontal_light.png?v=20261021_v9") !important;
}

/* Trade Advisor ribbon in light theme - high contrast */
html[data-theme="light"] #apiGauges,
html:is([data-skin="white"],[data-skin="mist"]) #apiGauges {
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] #apiGauges :is(#apiScoreSPX, #apiScoreNDX),
html:is([data-skin="white"],[data-skin="mist"]) #apiGauges :is(#apiScoreSPX, #apiScoreNDX) {
  color: #0f172a !important;
  font-weight: 800 !important;
}
html[data-theme="light"] #apiGauges :is(#apiModeLabelSPX, #apiModeLabelNDX),
html:is([data-skin="white"],[data-skin="mist"]) #apiGauges :is(#apiModeLabelSPX, #apiModeLabelNDX) {
  color: #334155 !important;
  font-weight: 700 !important;
}
html[data-theme="light"] #apiGauges span[style*="color:#4a5568"],
html:is([data-skin="white"],[data-skin="mist"]) #apiGauges span[style*="color:#4a5568"] {
  color: #64748b !important;
}
html[data-theme="light"] #apiGauges #apiSignalMob,
html:is([data-skin="white"],[data-skin="mist"]) #apiGauges #apiSignalMob {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] #apiGauges :is(#apiChartBtn, #apiInfoBtn),
html:is([data-skin="white"],[data-skin="mist"]) #apiGauges :is(#apiChartBtn, #apiInfoBtn) {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Leaderboard cards in light theme - fixes invisible text in cards 4 and 5 */
html[data-theme="light"] .perf-lb-card,
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
html[data-theme="light"] .perf-lb-card .perf-lb-title,
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card .perf-lb-title,
html[data-theme="light"] .perf-lb-card span[style*="color: #f8fafc"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card span[style*="color: #f8fafc"],
html[data-theme="light"] .perf-lb-card span[style*="color:var(--text, #f8fafc)"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card span[style*="color: var(--text, #f8fafc)"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .perf-lb-card span[style*="color: #94a3b8"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card span[style*="color: #94a3b8"],
html[data-theme="light"] .perf-lb-card span[style*="color: var(--muted, #94a3b8)"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card span[style*="color: var(--muted, #94a3b8)"] {
  color: #334155 !important;
}
html[data-theme="light"] .perf-lb-card span[style*="color: #64748b"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card span[style*="color: #64748b"],
html[data-theme="light"] .perf-lb-card span[style*="color: var(--muted2, #64748b)"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card span[style*="color: var(--muted2, #64748b)"] {
  color: #475569 !important;
}
html[data-theme="light"] .perf-lb-card b[style*="color: #cbd5e1"],
html:is([data-skin="white"],[data-skin="mist"]) .perf-lb-card b[style*="color: #cbd5e1"] {
  color: #475569 !important;
}

/* Mobile responsive filters - prevents cutoff and overflow */
@media (max-width: 768px) {
  #perf5kAuditView .perf-section {
    padding: 8px 10px !important;
    overflow-x: hidden !important;
  }
  #perf5kAuditView div[style*="min-width: 580px"],
  #perf5kAuditView div[style*="width: 580px"],
  #perf5kAuditView div[style*="min-width: 480px"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex: 1 1 100% !important;
  }
  #perf5kAuditView .perf5k-select-styled {
    width: 100% !important;
    max-width: 100% !important;
  }
  .perf5k-session-dates-box {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 4px !important;
  }
  #perf5kLeaderboardContainer {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}


/* ==========================================================================
   7. LIVE INDEX TICKERS (SPX, NDX, VIX) - RESPONSIVE SCALING & NO OVERLAP
   ========================================================================== */
@media (min-width: 601px) {
  #liveSPX, #liveNDX, #liveVIX {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    font-family: 'Geist Mono', monospace !important;
  }
}

@media (max-width: 600px) {
  #liveSPX, #liveNDX, #liveVIX,
  .mob-ticker-header #liveSPX,
  .mob-ticker-header #liveNDX,
  .mob-ticker-header #liveVIX,
  .sqx-mtk strong, .sqx-mtk span {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    font-family: 'Geist Mono', monospace !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

.mob-ticker-header div[style*="text-align:center"] > div:first-child,
.mob-ticker-header div[style*="text-align: center"] > div:first-child {
  font-size: 11.6px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: var(--muted, #94a3b8) !important;
}

html[data-theme="light"] .mob-ticker-header div[style*="text-align:center"] > div:first-child,
html:is([data-skin="white"],[data-skin="mist"]) .mob-ticker-header div[style*="text-align:center"] > div:first-child {
  color: #334155 !important;
  font-weight: 800 !important;
}

.live-ticker-bar {
  font-size: 13.8px !important;
}
.live-ticker-bar span {
  font-weight: 700 !important;
}
.live-ticker-bar strong {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}


/* ==========================================================================
   8. STRATEGY PAGES STANDARDIZATION (All 12 Strategies Unified Design)
   Ensures consistent spacing, borders, cards, inputs, sliders, and font styles.
   ========================================================================== */

/* Strategy section headers */
.dashboard-section-header, .rs-strat-head {
  padding: 14px 18px !important;
  border-radius: 10px 10px 0 0 !important;
  border: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Strategy cards & frames */
.glass-panel, .rs-panel, .ticker-section, .settings-section, .rs-strat-body {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}

/* Light Theme Strategy Standardization */
html[data-theme="light"] :is(.glass-panel, .rs-panel, .ticker-section, .settings-section, .rs-strat-body, .rs-strat-head, .dashboard-section-header),
html:is([data-skin="white"],[data-skin="mist"]) :is(.glass-panel, .rs-panel, .ticker-section, .settings-section, .rs-strat-body, .rs-strat-head, .dashboard-section-header) {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] :is(.glass-panel, .rs-panel, .ticker-section, .settings-section) :is(h1, h2, h3, h4, .ticker-title, .panel-header h2),
html:is([data-skin="white"],[data-skin="mist"]) :is(.glass-panel, .rs-panel, .ticker-section, .settings-section) :is(h1, h2, h3, h4, .ticker-title, .panel-header h2) {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme="light"] :is(.glass-panel, .rs-panel, .ticker-section, .settings-section) :is(p, small, .ticker-description, .rs-subtitle, label),
html:is([data-skin="white"],[data-skin="mist"]) :is(.glass-panel, .rs-panel, .ticker-section, .settings-section) :is(p, small, .ticker-description, .rs-subtitle, label) {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* Strategy Inputs and Form Fields */
:is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) input[type="text"],
:is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) input[type="number"],
:is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) select,
.rs-input-num {
  height: 32px !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] :is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) input[type="text"],
html[data-theme="light"] :is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) input[type="number"],
html[data-theme="light"] :is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) select,
html[data-theme="light"] .rs-input-num,
html:is([data-skin="white"],[data-skin="mist"]) :is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) input[type="text"],
html:is([data-skin="white"],[data-skin="mist"]) :is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) input[type="number"],
html:is([data-skin="white"],[data-skin="mist"]) :is(.tab-content, .rs-strategy-shell, .glass-panel, .settings-section, .ticker-section) select,
html:is([data-skin="white"],[data-skin="mist"]) .rs-input-num {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Standardized Range Sliders */
input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #334155 !important;
  outline: none !important;
  margin: 8px 0 !important;
}
html[data-theme="light"] input[type="range"],
html:is([data-skin="white"],[data-skin="mist"]) input[type="range"] {
  background: #cbd5e1 !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  cursor: pointer !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  cursor: pointer !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Strategy Action Buttons */
.rs-btn, :is(.glass-panel, .settings-section, .ticker-section) .btn {
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}


/* ==========================================================================
   PERFORMANCE FILTER ACTION BUTTONS (APPLY & RESET) - MODERNIZED
   ========================================================================== */
.perf-filter-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 1px !important;
}

.perf-btn-apply,
.perf-btn-reset {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
}

.perf-btn-apply svg,
.perf-btn-reset svg,
.perf-btn-apply i,
.perf-btn-reset i {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* Apply button - Crisp Primary Action (Fluid Glass Color Change, No Blurry Halos) */
/* Dark Theme */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-btn-apply {
    background: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-btn-apply:hover {
    background: #10b981 !important;
    border-color: #34d399 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-btn-apply:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Light Theme */
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-btn-apply {
    background: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-btn-apply:hover {
    background: #047857 !important;
    border-color: #065f46 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-btn-apply:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Reset button - Refined Secondary/Outline Action */
/* Dark Theme */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-btn-reset {
    background: rgba(30, 41, 59, 0.7) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-btn-reset:hover {
    background: rgba(45, 60, 85, 0.9) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-btn-reset:active {
    transform: translateY(0) !important;
}

/* Light Theme */
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-btn-reset {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-btn-reset:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-btn-reset:active {
    transform: translateY(0) !important;
}

@media (max-width: 768px) {
    .perf-filter-actions {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .perf-btn-apply, .perf-btn-reset {
        flex: 1 !important;
    }
}

/* ==========================================================================
   DAILY LEDGER & AUDIT TABLES - MOBILE RESPONSIVE SCROLLING & ALIGNMENT
   ========================================================================== */
#perfDailyLedgerView,
#perfDailyLedgerView .perf-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#perfDailyLedgerView .table-container,
#perf5kAuditView .table-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(15, 23, 42, 0.2) !important;
}

#perfDailyLedgerView .table-container::-webkit-scrollbar,
#perf5kAuditView .table-container::-webkit-scrollbar {
  height: 6px !important;
  background: rgba(15, 23, 42, 0.15) !important;
}

#perfDailyLedgerView .table-container::-webkit-scrollbar-thumb,
#perf5kAuditView .table-container::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.55) !important;
  border-radius: 4px !important;
}

#dailyLedgerTable {
  width: max-content !important;
  min-width: 100% !important;
  display: table !important;
  border-collapse: collapse !important;
  overflow: visible !important;
}

#dailyLedgerTable th,
#dailyLedgerTable td {
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  #perfDailyLedgerView .perf-section {
    padding: 10px 8px !important;
    overflow-x: visible !important;
  }

  .mobile-table-scroll-hint {
    display: flex !important;
  }
}

/* ==========================================================================
   SENIOR CRAFT: FLUID GLASS BUTTON COLOR CHANGES & THEME PARITY (NO HALO GLOWS)
   ========================================================================== */

/* 1. Primary View Mode Switcher */
.perf-view-mode-bar {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-view-mode-bar {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-view-mode-bar {
    background: rgba(241, 245, 249, 0.9) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.perf-mode-btn {
    flex: 1 !important;
    min-height: 42px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.12s ease !important;
}

.perf-mode-btn:active {
    transform: translateY(1px) !important;
}

/* Dark Theme Inactive */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-mode-btn {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-mode-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Dark Theme Active - Fluid Solid Color Changes (NO Glowing Halos) */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-mode-btn.active#btnModeAllTrades {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-mode-btn.active#btnMode5kAudit {
    background: #065f46 !important;
    color: #ffffff !important;
    border: 1px solid #10b981 !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-mode-btn.active#btnModeDailyLedger {
    background: #0369a1 !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
}

/* Light Theme Inactive */
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-mode-btn {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-mode-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Light Theme Active - Fluid Solid Color Changes (NO Glowing Halos) */
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-mode-btn.active#btnModeAllTrades {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-mode-btn.active#btnMode5kAudit {
    background: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-mode-btn.active#btnModeDailyLedger {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0369a1 !important;
}

/* 2. Quick Date Range Buttons in Filter Bar */
.perf-quick-ranges {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}

.perf-quick-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.12s ease !important;
}

.perf-quick-btn:active {
    transform: translateY(1px) !important;
}

/* Dark Theme Inactive */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-quick-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-quick-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Dark Theme Active */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-quick-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
}

/* Light Theme Inactive */
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-quick-btn {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-quick-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Light Theme Active */
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-quick-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0369a1 !important;
}

/* 3. Filter Inputs & Dropdowns: 38px height, 8px radius, matching the buttons */
.perf-filter-group input,
.perf-filter-group select {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-filter-group input,
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-filter-group select {
    background: #0e121c !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-filter-group input:focus,
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-filter-group select:focus {
    border-color: #38bdf8 !important;
    outline: none !important;
}

html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-filter-group input,
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-filter-group select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-filter-group input:focus,
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-filter-group select:focus {
    border-color: #0284c7 !important;
    outline: none !important;
}

/* 4. Enhanced Secondary Text Contrast */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .perf-filter-group label {
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .perf-filter-group label {
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

/* 5. 10 Risk Pillars Theme Parity */
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .sqn-pillar-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #38bdf8 !important;
    color: #f8fafc !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .sqn-pillar-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #0284c7 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .sqn-pillar-card .pillar-title {
    color: #0f172a !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .sqn-pillar-card .pillar-desc {
    color: #475569 !important;
}

/* 6. API Cheat Sheet Modal Typography & Spacing */
.sqn-cheat-modal {
    line-height: 1.6 !important;
}
html:not([data-theme="light"]):not([data-skin="white"]):not([data-skin="mist"]) .sqn-cheat-modal {
    background: #12161f !important;
    border: 1px solid #2d3748 !important;
    color: #cbd5e0 !important;
}
html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"]) .sqn-cheat-modal {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}


/* ==========================================================================
   SENIOR MOBILE POLISH: ORDER HISTORY & CHART PAGES (Dark & Light Theme Parity)
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Prevent Bottom Navigation Overlap */
  #history,
  #chart,
  .tab-content#history,
  .tab-content#chart {
    padding-bottom: 96px !important;
  }

  /* 2. Order History Header Action Buttons */
  #history .dashboard-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #history .dashboard-section-header > div {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
  }
  #history .dashboard-section-header button {
    flex: 1 !important;
    min-height: 34px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  /* 3. Order History Filter Dropdowns */
  #historyFilterBar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
  #historyFilterBar #strategyDropdownWrap,
  #historyFilterBar #statusDropdownWrap {
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
  #historyFilterBar button {
    min-height: 36px !important;
    border-radius: 6px !important;
  }

  /* 4. Chart Section Layout & Height */
  #chart {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chartContainerWrap,
  #chart .chart-display-area,
  #tradingChart {
    height: 340px !important;
    min-height: 320px !important;
    width: 100% !important;
  }

  /* 5. Chart Controls - Clean Two-Row Layout */
  .sqn-chart-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    flex-shrink: 0 !important;
  }

  .chart-ticker-btns,
  .chart-timeframes {
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  /* 6. Tactile Fluid Glass Chart Buttons */
  .chart-tf-btn {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
  }

  /* Dark Theme Chart Buttons */
  html:not([data-theme="light"]):not(.light-theme) .sqn-chart-controls {
    background: rgba(15, 23, 42, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  html:not([data-theme="light"]):not(.light-theme) .chart-tf-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  html:not([data-theme="light"]):not(.light-theme) .chart-tf-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
  }
  html:not([data-theme="light"]):not(.light-theme) .chart-tf-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
    font-weight: 700 !important;
  }

  /* Light Theme Chart Buttons */
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) .sqn-chart-controls {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) .chart-tf-btn {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) .chart-tf-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) .chart-tf-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0369a1 !important;
    font-weight: 700 !important;
  }

  /* 7. Indicator Grid Below Chart */
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart {
    background: #f8fafc !important;
    color: #0f172a !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart > div {
    border-color: #e2e8f0 !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart [style*="background:var(--chart-surface)"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart [style*="background:var(--chart-surface2)"] {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart span[style*="color:var(--chart-dim)"] {
    color: #64748b !important;
  }
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart span[style*="color:var(--chart-text)"],
  html:is([data-theme="light"],[data-skin="white"],[data-skin="mist"],.light-theme) #chart div[style*="color:var(--chart-text)"] {
    color: #0f172a !important;
  }
}