/* ============================================================================
   GUNUNG KAWI — PREMIUM SOFT LIGHT / MUTED SLATE GLOBAL THEME (v6)
   Comprehensive System-Wide Overhaul:
   1. Soft Slate & Crisp White Surfaces across all 11 pages (Zero Black).
   2. Large, high-contrast, crystal-clear typography (13.5px/14px standardized like Paper).
   3. All buttons modernized to soft light with high-contrast text.
   4. Table headers in soft mist slate (#f1f5f9) and rows with clean light hover.
   5. No dark artifacts in Command Center, Terminal, Strategies, Signals, Risk, Integrations.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. GLOBAL ROOTS & CSS VARIABLES
   ---------------------------------------------------------------------------- */
html[data-theme="light"],
html.theme-light,
body.theme-light,
[data-theme="light"] {
  --bg: #f1f5f9 !important;
  --panel: #ffffff !important;
  --panel2: #f8fafc !important;
  --line: #cbd5e1 !important;
  --line2: #94a3b8 !important;
  --muted: #334155 !important;
  --text: #0f172a !important;
  --cyan: #0284c7 !important;
  --green: #059669 !important;
  --red: #dc2626 !important;
  --yellow: #d97706 !important;
  --purple: #7c3aed !important;
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

html[data-theme="light"] body,
body.theme-light,
[data-theme="light"] body {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-family: Manrope, system-ui, sans-serif !important;
}

/* ----------------------------------------------------------------------------
   2. UNIVERSAL BUTTONS (NO MORE BLACK BUTTONS ANYWHERE!)
   ---------------------------------------------------------------------------- */
html[data-theme="light"] button,
body.theme-light button,
html[data-theme="light"] .ghost-btn,
body.theme-light .ghost-btn,
html[data-theme="light"] .icon-btn,
body.theme-light .icon-btn,
html[data-theme="light"] .filter-btn,
body.theme-light .filter-btn,
html[data-theme="light"] .preset-btn,
body.theme-light .preset-btn,
html[data-theme="light"] .strategy-actions button,
body.theme-light .strategy-actions button,
html[data-theme="light"] .atlas-actions button,
body.theme-light .atlas-actions button,
html[data-theme="light"] .polaris-actions button,
body.theme-light .polaris-actions button,
html[data-theme="light"] .breaksolid-head-actions button,
body.theme-light .breaksolid-head-actions button,
html[data-theme="light"] .breaksolid-collapse-toggle,
body.theme-light .breaksolid-collapse-toggle,
html[data-theme="light"] .breaksolid-ledger-collapsed,
body.theme-light .breaksolid-ledger-collapsed,
html[data-theme="light"] .scanner-runtime-row button,
body.theme-light .scanner-runtime-row button,
html[data-theme="light"] .builder-title button,
body.theme-light .builder-title button,
html[data-theme="light"] .strategy-risk-link,
body.theme-light .strategy-risk-link,
html[data-theme="light"] .indicator-strip button,
body.theme-light .indicator-strip button,
html[data-theme="light"] .chart-toolbar button,
body.theme-light .chart-toolbar button,
html[data-theme="light"] .segmented button,
body.theme-light .segmented button,
html[data-theme="light"] .atlas-source-row button,
body.theme-light .atlas-source-row button,
html[data-theme="light"] .polaris-source-row button,
body.theme-light .polaris-source-row button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html[data-theme="light"] button:hover:not(:disabled),
body.theme-light button:hover:not(:disabled) {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Primary Dark Accent Buttons (SAVE, REFRESH, ACTIVATE) */
html[data-theme="light"] .primary-btn,
body.theme-light .primary-btn,
html[data-theme="light"] .strategy-actions button.activate,
body.theme-light .strategy-actions button.activate,
html[data-theme="light"] .atlas-actions button:last-child,
body.theme-light .atlas-actions button:last-child,
html[data-theme="light"] .polaris-actions button:last-child,
body.theme-light .polaris-actions button:last-child,
html[data-theme="light"] .breaksolid-head-actions button:last-child,
body.theme-light .breaksolid-head-actions button:last-child {
  background: #0f172a !important;
  border: 1.5px solid #0f172a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] .primary-btn:hover,
body.theme-light .primary-btn:hover,
html[data-theme="light"] .breaksolid-head-actions button:last-child:hover,
body.theme-light .breaksolid-head-actions button:last-child:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

/* Engine Toggle Buttons ON / OFF */
html[data-theme="light"] .engine-state.on,
body.theme-light .engine-state.on {
  background: #ecfdf5 !important;
  border: 1.5px solid #34d399 !important;
  color: #047857 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .engine-state.off,
body.theme-light .engine-state.off {
  background: #fef2f2 !important;
  border: 1.5px solid #f87171 !important;
  color: #b91c1c !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Theme Switcher Button in Topbar */
html[data-theme="light"] .theme-toggle-btn,
body.theme-light .theme-toggle-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* ----------------------------------------------------------------------------
   3. UNIVERSAL PANELS, CARDS & CONTAINERS (WHITE WITH CRISP BORDERS)
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .panel,
body.theme-light .panel,
html[data-theme="light"] .card,
body.theme-light .card,
html[data-theme="light"] .stat-card,
body.theme-light .stat-card,
html[data-theme="light"] .session-card,
body.theme-light .session-card,
html[data-theme="light"] .login-card,
body.theme-light .login-card,
html[data-theme="light"] .modal,
body.theme-light .modal,
html[data-theme="light"] .watchlist-modal,
body.theme-light .watchlist-modal,
html[data-theme="light"] .paper-ledger,
body.theme-light .paper-ledger,
html[data-theme="light"] .integration-card,
body.theme-light .integration-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  color: #0f172a !important;
}

/* Card Headers & Section Titles — Soft Mist Slate Surface */
html[data-theme="light"] .panel-head,
body.theme-light .panel-head,
html[data-theme="light"] .card-head,
body.theme-light .card-head,
html[data-theme="light"] .section-header,
body.theme-light .section-header,
html[data-theme="light"] .breaksolid-head,
body.theme-light .breaksolid-head,
html[data-theme="light"] .atlas-head,
body.theme-light .atlas-head,
html[data-theme="light"] .polaris-head,
body.theme-light .polaris-head,
html[data-theme="light"] .scanner-runtime-head,
body.theme-light .scanner-runtime-head,
html[data-theme="light"] .analytics-head,
body.theme-light .analytics-head,
html[data-theme="light"] .watch-head,
body.theme-light .watch-head,
html[data-theme="light"] header.breaksolid-head,
body.theme-light header.breaksolid-head {
  background: #f8fafc !important; /* Soft mist slate surface! Never black! */
  border-bottom: 1.5px solid #e2e8f0 !important;
  padding: 16px 20px !important;
}

html[data-theme="light"] h1,
body.theme-light h1,
html[data-theme="light"] h2,
body.theme-light h2,
html[data-theme="light"] h3,
body.theme-light h3,
html[data-theme="light"] .panel-head h2,
body.theme-light .panel-head h2,
html[data-theme="light"] .breaksolid-head h2,
body.theme-light .breaksolid-head h2,
html[data-theme="light"] .atlas-head h2,
body.theme-light .atlas-head h2,
html[data-theme="light"] .section-header h2,
body.theme-light .section-header h2 {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

html[data-theme="light"] p,
body.theme-light p,
html[data-theme="light"] .panel-head p,
body.theme-light .panel-head p,
html[data-theme="light"] .breaksolid-head p,
body.theme-light .breaksolid-head p,
html[data-theme="light"] .atlas-head p,
body.theme-light .atlas-head p {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* ----------------------------------------------------------------------------
   4. STATISTIC CARDS & NUMBERS (SOLID BLACK & 24PX LARGE!)
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .stat-card,
body.theme-light .stat-card,
html[data-theme="light"] .atlas-stat-grid > div,
body.theme-light .atlas-stat-grid > div,
html[data-theme="light"] .paper-stats > div,
body.theme-light .paper-stats > div {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .stat-card span,
body.theme-light .stat-card span,
html[data-theme="light"] .atlas-stat-grid > div > span:first-child,
body.theme-light .atlas-stat-grid > div > span:first-child {
  color: #334155 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

html[data-theme="light"] .stat-card strong,
body.theme-light .stat-card strong,
html[data-theme="light"] .atlas-stat-grid > div > strong,
body.theme-light .atlas-stat-grid > div > strong,
html[data-theme="light"] .stat-card-value,
body.theme-light .stat-card-value {
  color: #0f172a !important; /* 100% Solid Deep Charcoal Black! */
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  margin: 4px 0 !important;
  display: block !important;
}

html[data-theme="light"] .stat-card small,
body.theme-light .stat-card small,
html[data-theme="light"] .atlas-stat-grid > div > small,
body.theme-light .atlas-stat-grid > div > small {
  color: #475569 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ----------------------------------------------------------------------------
   5. COMMAND CENTER & MARKET WATCH TABLE
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .market-table,
body.theme-light .market-table {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html[data-theme="light"] .market-table .thead,
body.theme-light .market-table .thead {
  background: #f1f5f9 !important; /* Soft mist slate! Never black! */
  border-bottom: 2px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  height: 42px !important;
  align-items: center !important;
}

html[data-theme="light"] .market-table .trow,
body.theme-light .market-table .trow {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  height: 52px !important;
}

html[data-theme="light"] .market-table .trow:hover,
body.theme-light .market-table .trow:hover {
  background: #f8fafc !important;
}

html[data-theme="light"] .market-table .trow strong,
body.theme-light .market-table .trow strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .market-table .trow small,
body.theme-light .market-table .trow small {
  color: #475569 !important;
  font-size: 11.5px !important;
}

/* ----------------------------------------------------------------------------
   6. TERMINAL: ORDER PANEL INPUTS & COUNTING BADGES
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .order-panel,
body.theme-light .order-panel {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .order-panel label > span,
body.theme-light .order-panel label > span {
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
}

html[data-theme="light"] .order-panel label > div,
body.theme-light .order-panel label > div,
html[data-theme="light"] .order-panel .input-unit,
body.theme-light .order-panel .input-unit {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 6px !important;
  height: 40px !important;
}

html[data-theme="light"] .order-panel input,
body.theme-light .order-panel input {
  background: transparent !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 0 12px !important;
}

html[data-theme="light"] .order-panel b,
body.theme-light .order-panel b {
  background: #f1f5f9 !important;
  border-left: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
}

/* Terminal Bottom Tabs & Badges (Counting) */
html[data-theme="light"] .bottom-panel,
body.theme-light .bottom-panel {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .bottom-tabs,
body.theme-light .bottom-tabs {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  height: 44px !important;
}

html[data-theme="light"] .bottom-tabs button,
body.theme-light .bottom-tabs button {
  color: #475569 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .bottom-tabs button.active,
body.theme-light .bottom-tabs button.active {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .bottom-tabs button.active:after,
body.theme-light .bottom-tabs button.active:after {
  background: #0284c7 !important;
  height: 2px !important;
}

/* Counting Badge on Terminal Tabs */
html[data-theme="light"] .bottom-tabs span,
body.theme-light .bottom-tabs span {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
}

/* Sidebar Nav Signal Counting Badge */
html[data-theme="light"] .sidebar nav button em,
body.theme-light .sidebar nav button em,
html[data-theme="light"] nav button em,
body.theme-light nav button em {
  background: #e2e8f0 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
}

/* ----------------------------------------------------------------------------
   7. STRATEGIES PAGE: ATLAS, POLARIS, MOBIUS, PHOENIX, URSA
   ---------------------------------------------------------------------------- */
/* Behind Stat Cards Area */
html[data-theme="light"] .atlas-stat-grid,
body.theme-light .atlas-stat-grid,
html[data-theme="light"] .polaris-metrics,
body.theme-light .polaris-metrics,
html[data-theme="light"] .polaris-stat-grid,
body.theme-light .polaris-stat-grid,
html[data-theme="light"] .breaksolid-period-stats,
body.theme-light .breaksolid-period-stats,
html[data-theme="light"] .breaksolid-kpis,
body.theme-light .breaksolid-kpis {
  background: #f1f5f9 !important; /* Never black! Soft gray distinction! */
  border-bottom: 1.5px solid #cbd5e1 !important;
}

/* MAP GATE APPLIES TO (ATLAS & POLARIS) */
html[data-theme="light"] .atlas-source-row,
body.theme-light .atlas-source-row,
html[data-theme="light"] .polaris-source-row,
body.theme-light .polaris-source-row {
  background: #f8fafc !important; /* Never black #0c131b! Soft mist slate! */
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  padding: 14px 18px !important;
}

html[data-theme="light"] .atlas-source-row > strong,
body.theme-light .atlas-source-row > strong,
html[data-theme="light"] .polaris-source-row strong,
body.theme-light .polaris-source-row strong {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .atlas-source-row > small,
body.theme-light .atlas-source-row > small,
html[data-theme="light"] .polaris-source-row small,
body.theme-light .polaris-source-row small {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .atlas-source-row button,
body.theme-light .atlas-source-row button,
html[data-theme="light"] .polaris-source-row button,
body.theme-light .polaris-source-row button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  height: 34px !important;
  border-radius: 6px !important;
}

html[data-theme="light"] .atlas-source-row button.active,
body.theme-light .atlas-source-row button.active,
html[data-theme="light"] .polaris-source-row button.active,
body.theme-light .polaris-source-row button.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Expand Button / Toggle Footer on Atlas, Polaris, Pegasus, Mobius, Phoenix */
html[data-theme="light"] .atlas-map-toggle,
body.theme-light .atlas-map-toggle {
  background: #f8fafc !important; /* Never black #0e1620! Soft mist surface! */
  border-top: 1.5px solid #e2e8f0 !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  padding: 14px 24px !important;
  min-height: 52px !important;
}

html[data-theme="light"] .atlas-map-toggle:hover,
body.theme-light .atlas-map-toggle:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] .atlas-map-toggle strong,
body.theme-light .atlas-map-toggle strong {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .atlas-map-toggle small,
body.theme-light .atlas-map-toggle small {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .atlas-map-toggle b,
body.theme-light .atlas-map-toggle b {
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* URSA / SCANNER RUNTIME INPUTS */
html[data-theme="light"] .scanner-runtime,
body.theme-light .scanner-runtime {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

html[data-theme="light"] .scanner-runtime input,
body.theme-light .scanner-runtime input,
html[data-theme="light"] .scanner-runtime select,
body.theme-light .scanner-runtime select,
html[data-theme="light"] .scanner-diagnostic-grid input,
body.theme-light .scanner-diagnostic-grid input,
html[data-theme="light"] .scanner-runtime-row input,
body.theme-light .scanner-runtime-row input {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  min-height: 36px !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}

/* ----------------------------------------------------------------------------
   8. SIGNALS PAGE: FORM INTAKE & TABLE
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .signal-intake,
body.theme-light .signal-intake {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

html[data-theme="light"] .signal-intake label > span,
body.theme-light .signal-intake label > span {
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
}

html[data-theme="light"] .signal-intake input,
body.theme-light .signal-intake input,
html[data-theme="light"] .signal-intake select,
body.theme-light .signal-intake select {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  height: 38px !important;
  border-radius: 6px !important;
  padding: 0 10px !important;
}

html[data-theme="light"] .signal-intake form > button,
body.theme-light .signal-intake form > button {
  background: #0f172a !important;
  border: 1.5px solid #0f172a !important;
  color: #ffffff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  height: 38px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

/* ----------------------------------------------------------------------------
   9. RISK MANAGEMENT: SCOPE & TRADING HOURS
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .risk-management-scope > div,
body.theme-light .risk-management-scope > div {
  background: #f8fafc !important; /* Never black #0b1216! */
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  padding: 16px 20px !important;
}

html[data-theme="light"] .risk-management-scope b,
body.theme-light .risk-management-scope b {
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 5px !important;
}

html[data-theme="light"] .strategy-risk-link,
body.theme-light .strategy-risk-link {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
}

/* TRADING HOURS / TRADING SESSIONS */
html[data-theme="light"] .trading-session-panel,
body.theme-light .trading-session-panel {
  background: #f8fafc !important; /* Never black #0b1119! */
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
}

html[data-theme="light"] .trading-session-head strong,
body.theme-light .trading-session-head strong {
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .trading-session-head small,
body.theme-light .trading-session-head small {
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .trading-session-row,
body.theme-light .trading-session-row {
  background: #ffffff !important; /* Never black #0e1621! */
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 14px !important;
}

html[data-theme="light"] .trading-session-row > .session-toggle,
body.theme-light .trading-session-row > .session-toggle {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .trading-session-row input[type="time"],
body.theme-light .trading-session-row input[type="time"] {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  color-scheme: light !important;
}

/* GLOBAL TRADING LIMITS RUNTIME BAR */
html[data-theme="light"] .global-risk,
body.theme-light .global-risk {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .global-risk-runtime,
body.theme-light .global-risk-runtime {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
}

html[data-theme="light"] .global-risk-runtime span,
body.theme-light .global-risk-runtime span {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-right: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .global-risk-runtime b,
body.theme-light .global-risk-runtime b {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

/* ----------------------------------------------------------------------------
   10. INTEGRATIONS PAGE: ICONS & CARDS
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .integration-card,
body.theme-light .integration-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .integration-icon,
body.theme-light .integration-icon {
  background: #f1f5f9 !important; /* Never black #0c1820! Soft mist slate! */
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0284c7 !important;
}

html[data-theme="light"] .integration-foot,
body.theme-light .integration-foot {
  background: #f8fafc !important; /* Never black #0c151c! */
  border-top: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .ai-analysis-box,
body.theme-light .ai-analysis-box {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 13px !important;
}

/* ----------------------------------------------------------------------------
   11. ALL POSITION & TRADE LISTINGS (STANDARDIZED LIKE PAPER TRADING!)
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .paper-table,
body.theme-light .paper-table,
html[data-theme="light"] .live-table,
body.theme-light .live-table,
html[data-theme="light"] .signals-table,
body.theme-light .signals-table,
html[data-theme="light"] .audit-table,
body.theme-light .audit-table,
html[data-theme="light"] table,
body.theme-light table {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Table Headers (Paper Head, Live Head, Signal Head, th) */
html[data-theme="light"] .paper-head,
body.theme-light .paper-head,
html[data-theme="light"] .live-head,
body.theme-light .live-head,
html[data-theme="light"] .live-position-head,
body.theme-light .live-position-head,
html[data-theme="light"] .signal-head,
body.theme-light .signal-head,
html[data-theme="light"] .breaksolid-row-head,
body.theme-light .breaksolid-row-head,
html[data-theme="light"] .atlas-row-head,
body.theme-light .atlas-row-head,
html[data-theme="light"] .polaris-ledger-head,
body.theme-light .polaris-ledger-head,
html[data-theme="light"] th,
body.theme-light th {
  background: #f1f5f9 !important; /* Soft mist slate! Never black! */
  border-bottom: 2px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  height: 44px !important;
  display: grid !important;
  align-items: center !important;
}

/* Table Rows (Paper Row, Live Row, Signal Row, tr, trow) */
html[data-theme="light"] .paper-row,
body.theme-light .paper-row,
html[data-theme="light"] .live-row,
body.theme-light .live-row,
html[data-theme="light"] .signal-row,
body.theme-light .signal-row,
html[data-theme="light"] .breaksolid-row,
body.theme-light .breaksolid-row,
html[data-theme="light"] .atlas-row,
body.theme-light .atlas-row,
html[data-theme="light"] .source-row,
body.theme-light .source-row,
html[data-theme="light"] tbody tr,
body.theme-light tbody tr {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important; /* Standardized to match Paper! */
  font-weight: 600 !important;
  min-height: 56px !important;
  align-items: center !important;
  transition: background 0.1s ease !important;
}

/* CLEAN HOVER ON ALL LISTING ROWS (NEVER DARK!) */
html[data-theme="light"] .paper-row:hover,
body.theme-light .paper-row:hover,
html[data-theme="light"] .live-row:hover,
body.theme-light .live-row:hover,
html[data-theme="light"] .signal-row:hover,
body.theme-light .signal-row:hover,
html[data-theme="light"] .breaksolid-row:hover,
body.theme-light .breaksolid-row:hover,
html[data-theme="light"] .atlas-row:hover,
body.theme-light .atlas-row:hover,
html[data-theme="light"] tbody tr:hover,
body.theme-light tbody tr:hover {
  background: #f8fafc !important; /* Clean light hover! Never dark #0b151c! */
}

/* Symbols in Rows */
html[data-theme="light"] .paper-row > strong,
body.theme-light .paper-row > strong,
html[data-theme="light"] .live-table strong,
body.theme-light .live-table strong,
html[data-theme="light"] .signal-row strong,
body.theme-light .signal-row strong,
html[data-theme="light"] .breaksolid-row strong,
body.theme-light .breaksolid-row strong {
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .paper-row > strong small,
body.theme-light .paper-row > strong small,
html[data-theme="light"] .live-table small,
body.theme-light .live-table small,
html[data-theme="light"] .signal-row small,
body.theme-light .signal-row small,
html[data-theme="light"] .breaksolid-row small,
body.theme-light .breaksolid-row small {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

/* Status Badges */
html[data-theme="light"] .paper-row > em,
body.theme-light .paper-row > em,
html[data-theme="light"] .live-table em,
body.theme-light .live-table em,
html[data-theme="light"] .signal-row > em,
body.theme-light .signal-row > em {
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

html[data-theme="light"] .paper-row > em.open,
body.theme-light .paper-row > em.open,
html[data-theme="light"] .paper-row > em.win,
body.theme-light .paper-row > em.win,
html[data-theme="light"] .live-table em.filled,
body.theme-light .live-table em.filled,
html[data-theme="light"] .signal-row > em.accepted,
body.theme-light .signal-row > em.accepted {
  background: #ecfdf5 !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #047857 !important;
}

html[data-theme="light"] .paper-row > em.loss,
body.theme-light .paper-row > em.loss,
html[data-theme="light"] .live-table em.rejected,
body.theme-light .live-table em.rejected,
html[data-theme="light"] .signal-row > em.rejected,
body.theme-light .signal-row > em.rejected {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #b91c1c !important;
}

html[data-theme="light"] .paper-row > em.pending,
body.theme-light .paper-row > em.pending,
html[data-theme="light"] .signal-row > em.pending,
body.theme-light .signal-row > em.pending {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #b45309 !important;
}

/* Row Action Buttons */
html[data-theme="light"] .paper-row > button,
body.theme-light .paper-row > button,
html[data-theme="light"] .signal-row > div button,
body.theme-light .signal-row > div button {
  height: 30px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
}

html[data-theme="light"] .paper-row > button,
body.theme-light .paper-row > button,
html[data-theme="light"] .signal-row > div .reject,
body.theme-light .signal-row > div .reject {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #b91c1c !important;
}

html[data-theme="light"] .signal-row > div .accept,
body.theme-light .signal-row > div .accept {
  background: #ecfdf5 !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #047857 !important;
}

/* ----------------------------------------------------------------------------
   13. LIVE TRADING: LIVE RISK GUARD & ARM BOX
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .live-control-panel,
body.theme-light .live-control-panel,
html[data-theme="light"] .live-ledger,
body.theme-light .live-ledger {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .live-settings-grid,
body.theme-light .live-settings-grid {
  background: #ffffff !important;
  padding: 20px 24px !important;
  gap: 16px !important;
}

html[data-theme="light"] .live-settings-grid label > span,
body.theme-light .live-settings-grid label > span {
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}

html[data-theme="light"] .live-settings-grid input,
html[data-theme="light"] .live-settings-grid select,
html[data-theme="light"] .live-arm-box input,
body.theme-light .live-settings-grid input,
body.theme-light .live-settings-grid select,
body.theme-light .live-arm-box input {
  background: #ffffff !important; /* Pure White! Zero Black! */
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important; /* Solid Black text */
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  height: 40px !important;
  border-radius: 6px !important;
  padding: 0 12px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

html[data-theme="light"] .live-settings-grid input:focus,
html[data-theme="light"] .live-settings-grid select:focus,
html[data-theme="light"] .live-arm-box input:focus,
body.theme-light .live-settings-grid input:focus,
body.theme-light .live-settings-grid select:focus,
body.theme-light .live-arm-box input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

html[data-theme="light"] .live-settings-grid label.check,
body.theme-light .live-settings-grid label.check {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  color: #0f172a !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html[data-theme="light"] .live-settings-grid label.check.danger span,
body.theme-light .live-settings-grid label.check.danger span {
  color: #b91c1c !important;
}

html[data-theme="light"] .live-settings-grid button,
body.theme-light .live-settings-grid button {
  background: #0f172a !important; /* Deep Slate Save Button */
  border: 1.5px solid #0f172a !important;
  color: #ffffff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  height: 40px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] .live-settings-grid button:hover:not(:disabled),
body.theme-light .live-settings-grid button:hover:not(:disabled) {
  background: #1e293b !important;
  border-color: #1e293b !important;
}

/* Two-Step Arming Box */
html[data-theme="light"] .live-arm-box,
body.theme-light .live-arm-box {
  background: #fff1f2 !important; /* Soft rose background for arming warning */
  border: 1.5px solid #fecdd3 !important;
  border-radius: 8px !important;
  margin: 0 20px 20px !important;
  padding: 16px 20px !important;
}

html[data-theme="light"] .live-arm-box strong,
body.theme-light .live-arm-box strong {
  color: #9f1239 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .live-arm-box span,
body.theme-light .live-arm-box span {
  color: #4c0519 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

html[data-theme="light"] .live-arm-box button,
body.theme-light .live-arm-box button {
  background: #059669 !important;
  border: 1.5px solid #059669 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  height: 38px !important;
  border-radius: 6px !important;
}

html[data-theme="light"] .live-arm-box .danger-btn,
body.theme-light .live-arm-box .danger-btn {
  background: #b91c1c !important;
  border: 1.5px solid #b91c1c !important;
  color: #ffffff !important;
}

/* Live Readiness Badge in Header */
html[data-theme="light"] .live-readiness,
body.theme-light .live-readiness {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .live-readiness.ready,
body.theme-light .live-readiness.ready {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

/* ----------------------------------------------------------------------------
   14. GLOBAL RISK MANAGEMENT PAGE: LIMITS FORM, INPUT UNITS, SESSIONS & WIB TIMESTAMP
   ---------------------------------------------------------------------------- */
html[data-theme="light"] .global-risk,
body.theme-light .global-risk {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .global-risk form,
body.theme-light .global-risk form {
  background: #ffffff !important;
  padding: 20px 24px !important;
  gap: 16px !important;
}

html[data-theme="light"] .global-risk label > span,
body.theme-light .global-risk label > span {
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
  display: block !important;
}

html[data-theme="light"] .global-risk form select,
body.theme-light .global-risk form select {
  width: 100% !important;
  height: 40px !important;
  border: 1.5px solid #94a3b8 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0 12px !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

html[data-theme="light"] .global-risk form select:focus,
body.theme-light .global-risk form select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

html[data-theme="light"] .global-risk .input-unit,
body.theme-light .global-risk .input-unit {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 6px !important;
  height: 40px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

html[data-theme="light"] .global-risk .input-unit input,
body.theme-light .global-risk .input-unit input {
  background: transparent !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 0 12px !important;
}

html[data-theme="light"] .global-risk .input-unit b,
body.theme-light .global-risk .input-unit b {
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: #f1f5f9 !important;
  border-left: 1.5px solid #cbd5e1 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
}

html[data-theme="light"] .global-risk form > button,
body.theme-light .global-risk form > button {
  height: 40px !important;
  background: #0f172a !important;
  border: 1.5px solid #0f172a !important;
  color: #ffffff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] .global-risk form > button:hover:not(:disabled),
body.theme-light .global-risk form > button:hover:not(:disabled) {
  background: #1e293b !important;
  border-color: #1e293b !important;
}

html[data-theme="light"] .global-risk-note,
body.theme-light .global-risk-note {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 24px 18px !important;
}

/* Trading Hours Head & Small Subtitle */
html[data-theme="light"] .trading-session-head strong,
body.theme-light .trading-session-head strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

html[data-theme="light"] .trading-session-head small,
body.theme-light .trading-session-head small {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

html[data-theme="light"] .trading-session-row,
body.theme-light .trading-session-row {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
}

html[data-theme="light"] .trading-session-row > .session-toggle,
body.theme-light .trading-session-row > .session-toggle {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .trading-session-row input[type="time"],
body.theme-light .trading-session-row input[type="time"] {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  height: 38px !important;
  border-radius: 6px !important;
  color-scheme: light !important;
}

/* Timestamp Status Banner (2026-09-23 14:33:47 WIB) — 100% LIGHT, NEVER BLACK! */
html[data-theme="light"] .trading-window-status,
body.theme-light .trading-window-status {
  background: #f8fafc !important; /* Never black #101923! Soft mist slate! */
  border: 1.5px solid #cbd5e1 !important;
  border-left: 4px solid #059669 !important;
  padding: 12px 18px !important;
  border-radius: 6px !important;
  color: #0f172a !important;
}

html[data-theme="light"] .trading-window-status.closed,
body.theme-light .trading-window-status.closed {
  border-left-color: #dc2626 !important;
  background: #fff1f2 !important;
}

html[data-theme="light"] .trading-window-status b,
body.theme-light .trading-window-status b {
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .trading-window-status span,
body.theme-light .trading-window-status span {
  color: #334155 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* 15. SIGNALS segmented + strategies filters + PHOENIX/RUNTIME cards (light only) */
html[data-theme="light"] .segmented,
body.theme-light .segmented {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .segmented button,
body.theme-light .segmented button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}
html[data-theme="light"] .segmented button:hover,
body.theme-light .segmented button:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .segmented button.active,
body.theme-light .segmented button.active {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}
/* strategies: filter grid ATLAS/PEGASUS/MOBIUS buttons */
html[data-theme="light"] .filter-grid button,
body.theme-light .filter-grid button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .filter-grid button span,
body.theme-light .filter-grid button span {
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .filter-grid button em,
body.theme-light .filter-grid button em {
  color: #475569 !important;
  font-size: 9px !important;
}
html[data-theme="light"] .filter-grid button.selected,
body.theme-light .filter-grid button.selected {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .filter-grid button.selected span i,
body.theme-light .filter-grid button.selected span i {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}
/* POLARIS checklist HTF EMA dll */
html[data-theme="light"] .polaris-check-grid label,
body.theme-light .polaris-check-grid label {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .polaris-check-grid label span,
body.theme-light .polaris-check-grid label span {
  color: #0f172a !important;
}
html[data-theme="light"] .polaris-config-grid input,
html[data-theme="light"] .polaris-config-grid select,
html[data-theme="light"] .polaris-test-row input,
html[data-theme="light"] .polaris-test-row select,
body.theme-light .polaris-config-grid input,
body.theme-light .polaris-config-grid select,
body.theme-light .polaris-test-row input,
body.theme-light .polaris-test-row select {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .polaris-source-row strong,
html[data-theme="light"] .polaris-test-row strong,
body.theme-light .polaris-source-row strong,
body.theme-light .polaris-test-row strong {
  color: #0f172a !important;
  font-size: 11px !important;
}
/* PEGASUS/MOBIUS/ATLAS config blocks: kolom + input + chart table */
html[data-theme="light"] .breaksolid-config,
body.theme-light .breaksolid-config {
  background: #e2e8f0 !important;
}
html[data-theme="light"] .breaksolid-block,
body.theme-light .breaksolid-block {
  background: #ffffff !important;
}
html[data-theme="light"] .breaksolid-block h3,
body.theme-light .breaksolid-block h3 {
  color: #0f172a !important;
  font-size: 13px !important;
}
html[data-theme="light"] .breaksolid-block label,
body.theme-light .breaksolid-block label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .breaksolid-block input,
html[data-theme="light"] .breaksolid-block select,
html[data-theme="light"] .breaksolid-block textarea,
body.theme-light .breaksolid-block input,
body.theme-light .breaksolid-block select,
body.theme-light .breaksolid-block textarea {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .breaksolid-block small,
html[data-theme="light"] .breaksolid-block p,
body.theme-light .breaksolid-block small,
body.theme-light .breaksolid-block p {
  color: #475569 !important;
  font-size: 11.5px !important;
}
html[data-theme="light"] .breaksolid-kpis,
body.theme-light .breaksolid-kpis {
  background: #e2e8f0 !important;
}
html[data-theme="light"] .breaksolid-kpis article,
body.theme-light .breaksolid-kpis article {
  background: #ffffff !important;
}
html[data-theme="light"] .breaksolid-kpis span,
body.theme-light .breaksolid-kpis span {
  color: #475569 !important;
  font-size: 11px !important;
}
html[data-theme="light"] .breaksolid-kpis strong,
body.theme-light .breaksolid-kpis strong {
  color: #0f172a !important;
  font-size: 15px !important;
}
/* ATLAS map table chart */
html[data-theme="light"] .atlas-map-table,
body.theme-light .atlas-map-table {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}
html[data-theme="light"] .atlas-map-head,
body.theme-light .atlas-map-head {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  font-size: 11px !important;
}
html[data-theme="light"] .atlas-map-row,
body.theme-light .atlas-map-row {
  color: #0f172a !important;
  border-top-color: #e2e8f0 !important;
  background: #ffffff !important;
}
html[data-theme="light"] .atlas-map-row small,
body.theme-light .atlas-map-row small {
  color: #475569 !important;
}
html[data-theme="light"] .atlas-map-toggle,
body.theme-light .atlas-map-toggle {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .atlas-map-toggle small,
body.theme-light .atlas-map-toggle small {
  color: #475569 !important;
  font-size: 11px !important;
}
/* PHOENIX panel + AUTONOMOUS RUNTIME cards + inputs + behind card */
html[data-theme="light"] .phoenix-panel,
html[data-theme="light"] .scanner-runtime,
body.theme-light .phoenix-panel,
body.theme-light .scanner-runtime {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .scanner-runtime-head span,
body.theme-light .scanner-runtime-head span {
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .scanner-runtime-head h3,
body.theme-light .scanner-runtime-head h3 {
  color: #0f172a !important;
  font-size: 16px !important;
}
html[data-theme="light"] .scanner-runtime-row,
body.theme-light .scanner-runtime-row {
  background: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="light"] .scanner-runtime-row small,
html[data-theme="light"] .scanner-runtime-row > span,
body.theme-light .scanner-runtime-row small,
body.theme-light .scanner-runtime-row > span {
  color: #475569 !important;
  font-size: 10px !important;
}
html[data-theme="light"] .scanner-runtime-row > span > b,
body.theme-light .scanner-runtime-row > span > b {
  color: #0f172a !important;
  font-size: 12px !important;
}
html[data-theme="light"] .signal-filter-list > div,
body.theme-light .signal-filter-list > div {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .signal-filter-list > div > span,
body.theme-light .signal-filter-list > div > span {
  color: #0f172a !important;
  font-size: 11px !important;
}
html[data-theme="light"] .signal-filter-list > div > small,
body.theme-light .signal-filter-list > div > small {
  color: #475569 !important;
  font-size: 10px !important;
}
html[data-theme="light"] .form-grid input,
html[data-theme="light"] .form-grid select,
html[data-theme="light"] .risk-config select,
html[data-theme="light"] .risk-config > label > input,
html[data-theme="light"] .period,
body.theme-light .form-grid input,
body.theme-light .form-grid select,
body.theme-light .risk-config select,
body.theme-light .risk-config > label > input,
body.theme-light .period {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-size: 12px !important;
}
html[data-theme="light"] .form-grid label > span,
html[data-theme="light"] .risk-config label > span,
body.theme-light .form-grid label > span,
body.theme-light .risk-config label > span {
  color: #0f172a !important;
  font-size: 11px !important;
}

/* 16. ATLAS config grid + MAP GATE APPLIES TO + stat (light only) */
html[data-theme="light"] .atlas-config-grid label > span,
body.theme-light .atlas-config-grid label > span {
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .atlas-config-grid input,
html[data-theme="light"] .atlas-config-grid select,
body.theme-light .atlas-config-grid input,
body.theme-light .atlas-config-grid select {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  height: 38px !important;
  padding: 0 10px !important;
}
html[data-theme="light"] .atlas-source-row,
body.theme-light .atlas-source-row {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .atlas-source-row > strong,
body.theme-light .atlas-source-row > strong {
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .atlas-source-row > small,
body.theme-light .atlas-source-row > small {
  color: #475569 !important;
  font-size: 11px !important;
}
html[data-theme="light"] .atlas-source-row button,
body.theme-light .atlas-source-row button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}
html[data-theme="light"] .atlas-source-row button.active,
body.theme-light .atlas-source-row button.active {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .atlas-stat-grid > div,
html[data-theme="light"] .atlas-stat-grid article,
body.theme-light .atlas-stat-grid > div,
body.theme-light .atlas-stat-grid article {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* 17. NUCLEAR LIGHT OVERRIDE — ATLAS/POLARIS config containers, inputs, options */
html[data-theme="light"] .atlas-panel,
html[data-theme="light"] .panel.atlas-panel,
html[data-theme="light"] .polaris-panel,
html[data-theme="light"] .panel.polaris-panel,
body.theme-light .atlas-panel,
body.theme-light .panel.atlas-panel,
body.theme-light .polaris-panel,
body.theme-light .panel.polaris-panel {
  background: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="light"] .atlas-config-grid,
html[data-theme="light"] .polaris-config-grid,
body.theme-light .atlas-config-grid,
body.theme-light .polaris-config-grid {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
}
html[data-theme="light"] .atlas-config-grid label,
html[data-theme="light"] .polaris-config-grid label,
body.theme-light .atlas-config-grid label,
body.theme-light .polaris-config-grid label {
  background: #ffffff !important;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  color-scheme: light !important;
}
html[data-theme="light"] option,
body.theme-light option {
  background: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="light"] input[type="number"],
body.theme-light input[type="number"] {
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  height: 38px !important;
}
html[data-theme="light"] .atlas-config-grid label > span,
html[data-theme="light"] .polaris-config-grid label > span,
body.theme-light .atlas-config-grid label > span,
body.theme-light .polaris-config-grid label > span {
  color: #0f172a !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

/* 18. PEGASUS/MOBIUS period stats HARI/MINGGU/BULAN — article putih */
html[data-theme="light"] .breaksolid-period-stats,
body.theme-light .breaksolid-period-stats {
  background: #e2e8f0 !important;
  gap: 8px !important;
  padding: 8px !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .breaksolid-period-stats article,
body.theme-light .breaksolid-period-stats article {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .breaksolid-period-stats span,
body.theme-light .breaksolid-period-stats span {
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .breaksolid-period-stats strong,
body.theme-light .breaksolid-period-stats strong {
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .breaksolid-period-stats small,
body.theme-light .breaksolid-period-stats small {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .breaksolid-period-stats b.up,
body.theme-light .breaksolid-period-stats b.up {
  color: #059669 !important;
}
html[data-theme="light"] .breaksolid-period-stats b.down,
body.theme-light .breaksolid-period-stats b.down {
  color: #dc2626 !important;
}

/* 19. URSA STRATEGY-SPECIFIC GUARD grid — putih */
html[data-theme="light"] .builder-title,
body.theme-light .builder-title {
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}
html[data-theme="light"] .builder-title strong,
body.theme-light .builder-title strong {
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .builder-title span,
body.theme-light .builder-title span {
  color: #475569 !important;
  font-size: 11px !important;
}
html[data-theme="light"] .strategy-risk-title,
body.theme-light .strategy-risk-title {
  background: #f8fafc !important;
}
html[data-theme="light"] .form-grid,
html[data-theme="light"] .strategy-risk-grid,
body.theme-light .form-grid,
body.theme-light .strategy-risk-grid {
  background: #ffffff !important;
}
html[data-theme="light"] .strategy-risk-grid label > span,
html[data-theme="light"] .form-grid label > span,
body.theme-light .strategy-risk-grid label > span,
body.theme-light .form-grid label > span {
  color: #0f172a !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .strategy-risk-grid .input-unit,
html[data-theme="light"] .form-grid .input-unit,
body.theme-light .strategy-risk-grid .input-unit,
body.theme-light .form-grid .input-unit {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 6px !important;
  height: 38px !important;
}
html[data-theme="light"] .strategy-risk-grid .input-unit input,
html[data-theme="light"] .form-grid .input-unit input,
body.theme-light .strategy-risk-grid .input-unit input,
body.theme-light .form-grid .input-unit input {
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .strategy-risk-grid .input-unit b,
html[data-theme="light"] .form-grid .input-unit b,
body.theme-light .strategy-risk-grid .input-unit b,
body.theme-light .form-grid .input-unit b {
  color: #334155 !important;
  background: #f1f5f9 !important;
  border-left: 1.5px solid #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* 20. Preset Library list URSA — font besar kontras */
html[data-theme="light"] .preset-library > div > button,
body.theme-light .preset-library > div > button {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
}
html[data-theme="light"] .preset-library > div > button:hover,
html[data-theme="light"] .preset-library > div > button.selected,
body.theme-light .preset-library > div > button:hover,
body.theme-light .preset-library > div > button.selected {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
}
html[data-theme="light"] .preset-library strong,
body.theme-light .preset-library strong {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .preset-library strong em,
body.theme-light .preset-library strong em {
  color: #059669 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .preset-library span,
body.theme-light .preset-library span {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .preset-library small,
body.theme-light .preset-library small {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .new-preset,
body.theme-light .new-preset {
  background: #ffffff !important;
  border: 1.5px dashed #0284c7 !important;
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
}

/* 21. Sidebar kiri + header topbar — abu gelap (bukan hitam) */
html[data-theme="light"] .sidebar,
body.theme-light .sidebar {
  background: #334155 !important;
  border-right: 1.5px solid #475569 !important;
}
html[data-theme="light"] .brand,
body.theme-light .brand {
  border-bottom: 1px solid #475569 !important;
}
html[data-theme="light"] .brand strong,
body.theme-light .brand strong {
  color: #f1f5f9 !important;
}
html[data-theme="light"] .brand span,
html[data-theme="light"] .workspace-label,
body.theme-light .brand span,
body.theme-light .workspace-label {
  color: #cbd5e1 !important;
}
html[data-theme="light"] .sidebar nav button,
html[data-theme="light"] .collapse-btn,
body.theme-light .sidebar nav button,
body.theme-light .collapse-btn {
  color: #e2e8f0 !important;
}
html[data-theme="light"] .sidebar nav button:hover,
html[data-theme="light"] .collapse-btn:hover,
body.theme-light .sidebar nav button:hover,
body.theme-light .collapse-btn:hover {
  color: #ffffff !important;
  background: #475569 !important;
}
html[data-theme="light"] .sidebar nav button.active,
body.theme-light .sidebar nav button.active {
  color: #ffffff !important;
  background: #475569 !important;
  border-left-color: #38bdf8 !important;
}
html[data-theme="light"] .sidebar nav button em,
body.theme-light .sidebar nav button em {
  background: #475569 !important;
  border-color: #64748b !important;
  color: #f1f5f9 !important;
}
html[data-theme="light"] .risk-box,
body.theme-light .risk-box {
  background: #475569 !important;
  border-color: #64748b !important;
  color: #f1f5f9 !important;
}
html[data-theme="light"] .risk-box span,
body.theme-light .risk-box span {
  color: #e2e8f0 !important;
}
html[data-theme="light"] .collapse-btn,
body.theme-light .collapse-btn {
  border-top: 1px solid #475569 !important;
}
html[data-theme="light"] .topbar,
body.theme-light .topbar {
  background: #334155 !important;
  border-bottom: 1.5px solid #475569 !important;
}
html[data-theme="light"] .crumb span,
body.theme-light .crumb span {
  color: #cbd5e1 !important;
}
html[data-theme="light"] .crumb b,
html[data-theme="light"] .crumb strong,
body.theme-light .crumb b,
body.theme-light .crumb strong {
  color: #ffffff !important;
}
html[data-theme="light"] .status-chip,
body.theme-light .status-chip {
  background: #475569 !important;
  border-color: #64748b !important;
  color: #f1f5f9 !important;
}
html[data-theme="light"] .mode-switch,
body.theme-light .mode-switch {
  background: #475569 !important;
  border-color: #64748b !important;
}
html[data-theme="light"] .mode-switch button,
body.theme-light .mode-switch button {
  color: #e2e8f0 !important;
}
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .avatar,
body.theme-light .icon-btn,
body.theme-light .avatar {
  background: #475569 !important;
  border-color: #64748b !important;
  color: #f1f5f9 !important;
}

/* 22. FIX sidebar/topbar buttons — transparent di atas abu gelap, teks putih kontras */
html[data-theme="light"] .sidebar nav button,
html[data-theme="light"] .collapse-btn,
body.theme-light .sidebar nav button,
body.theme-light .collapse-btn {
  background: transparent !important;
  border-color: transparent !important;
  border-left: 2px solid transparent !important;
  color: #f1f5f9 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .sidebar nav button:hover,
html[data-theme="light"] .collapse-btn:hover,
body.theme-light .sidebar nav button:hover,
body.theme-light .collapse-btn:hover {
  background: #475569 !important;
  border-color: #64748b !important;
  border-left: 2px solid #38bdf8 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .sidebar nav button.active,
body.theme-light .sidebar nav button.active {
  background: #475569 !important;
  border-left-color: #38bdf8 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .mode-switch button,
body.theme-light .mode-switch button {
  background: transparent !important;
  border-color: transparent !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .mode-switch button.selected,
body.theme-light .mode-switch button.selected {
  background: #0f172a !important;
  color: #ffffff !important;
}

/* 23. Terminal risk-preview POSITION VALUE / MAX PRICE RISK / FEE — putih */
html[data-theme="light"] .risk-preview,
body.theme-light .risk-preview {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .risk-preview span,
body.theme-light .risk-preview span {
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .risk-preview b,
body.theme-light .risk-preview b {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html[data-theme="light"] .risk-preview b.down,
body.theme-light .risk-preview b.down {
  color: #dc2626 !important;
}

/* 24. Judul page besar tegas semua halaman */
html[data-theme="light"] h1,
body.theme-light h1 {
  color: #0f172a !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}
html[data-theme="light"] h1 em,
body.theme-light h1 em {
  color: #0284c7 !important;
  font-style: normal !important;
}
html[data-theme="light"] .terminal-heading h1,
body.theme-light .terminal-heading h1 {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .terminal-heading h1 small,
body.theme-light .terminal-heading h1 small {
  color: #0284c7 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .eyebrow,
body.theme-light .eyebrow {
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}
html[data-theme="light"] h2,
html[data-theme="light"] .section-header h2,
html[data-theme="light"] .breaksolid-head h2,
html[data-theme="light"] .atlas-head h2,
html[data-theme="light"] .polaris-head h2,
body.theme-light h2,
body.theme-light .section-header h2,
body.theme-light .breaksolid-head h2,
body.theme-light .atlas-head h2,
body.theme-light .polaris-head h2 {
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}
html[data-theme="light"] .hero-row p,
body.theme-light .hero-row p {
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 25. LIVE: intent-head + live-table rows diseragamkan dgn READ-ONLY EXCHANGE SYNC */
html[data-theme="light"] .live-intent-head,
body.theme-light .live-intent-head {
  background: #f1f5f9 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  min-height: 44px !important;
  align-items: center !important;
}
html[data-theme="light"] div.live-table:not(.live-position-head):not(.live-intent-head),
body.theme-light div.live-table:not(.live-position-head):not(.live-intent-head) {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  min-height: 56px !important;
  align-items: center !important;
}
html[data-theme="light"] div.live-table:not(.live-position-head):not(.live-intent-head):hover,
body.theme-light div.live-table:not(.live-position-head):not(.live-intent-head):hover {
  background: #f8fafc !important;
}
html[data-theme="light"] div.live-table:not(.live-position-head):not(.live-intent-head) > span,
body.theme-light div.live-table:not(.live-position-head):not(.live-intent-head) > span {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .live-risk-action,
body.theme-light .live-risk-action {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #b91c1c !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* 26. PHOENIX stat 4 card 1 baris (semua tema — file ini selalu diload) */
.phoenix-panel .atlas-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
  .phoenix-panel .atlas-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .phoenix-panel .atlas-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 27. Hapus motif grid di backdrop */
html[data-theme="light"] .app-shell,
body.theme-light .app-shell {
  background-image: none !important;
}

/* 28. Brand icon = favicon */
.brand-glyph { padding: 0 !important; overflow: hidden !important; border-radius: 8px !important; }
.brand-glyph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 29. Kunci page: tidak pernah scroll horizontal (semua tema).
   overflow-x:clip TIDAK merusak sticky topbar dan TIDAK mematikan
   scroll di dalam tabel (wrapper overflow-x:auto tetap bisa digeser). */
html,
body,
.app-shell,
.main,
.page {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* ============================================================================
   30. TOKEN CANONICAL LAYER (Light) — MENANG atas section 1-29.
   Aturan: satu fungsi = satu nilai. Edit HANYA di sini untuk warna/font/tombol.
   ----------------------------------------------------------------------------
   WARNA
   --bg #f1f5f9 (halaman) | --panel #ffffff (card) | --panel2 #f8fafc (header card)
   --thead #f1f5f9 (header tabel) | --rowhi #ffffff baris / #f8fafc hover
   --line #cbd5e1 (border) | --line2 #94a3b8 (border input)
   --text #0f172a (teks utama) | --muted #334155 (label) | --faint #475569 (sub)
   --accent #0284c7 | --green #059669 | --red #dc2626 | --yellow #d97706
   --side #334155 (sidebar/topbar) | --side-line #475569 | --side-text #f1f5f9
   FONT
   Judul Manrope 900 (h1 30px, h2 22px) | Angka/label IBM Plex Mono
   (label 12px/800, input 13.5px/800, header tabel 12px/800, baris 13.5px/600)
   TOMBOL/RADIUS
   Aksi standar min-height 34px, radius 6px | card 8px | input 6px | badge 4px
   Putih default / Slate gelap primer / Pastel untuk status
   ========================================================================== */
html[data-theme="light"] .atlas-source-row,
body.theme-light .atlas-source-row,
html[data-theme="light"] .polaris-source-row,
body.theme-light .polaris-source-row {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .atlas-source-row button,
body.theme-light .atlas-source-row button,
html[data-theme="light"] .polaris-source-row button,
body.theme-light .polaris-source-row button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: 34px !important;
}
html[data-theme="light"] .atlas-source-row button.active,
body.theme-light .atlas-source-row button.active,
html[data-theme="light"] .polaris-source-row button.active,
body.theme-light .polaris-source-row button.active {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .breaksolid-kpis,
body.theme-light .breaksolid-kpis,
html[data-theme="light"] .breaksolid-period-stats,
body.theme-light .breaksolid-period-stats,
html[data-theme="light"] .atlas-stat-grid,
body.theme-light .atlas-stat-grid {
  background: #f1f5f9 !important;
}
html[data-theme="light"] .breaksolid-kpis article,
body.theme-light .breaksolid-kpis article,
html[data-theme="light"] .breaksolid-period-stats article,
body.theme-light .breaksolid-period-stats article,
html[data-theme="light"] .stat-card,
body.theme-light .stat-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] .segmented,
body.theme-light .segmented {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .segmented button,
body.theme-light .segmented button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 4px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .segmented button.active,
body.theme-light .segmented button.active {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}
html[data-theme="light"] .sidebar,
body.theme-light .sidebar,
html[data-theme="light"] .topbar,
body.theme-light .topbar {
  background: #334155 !important;
}
html[data-theme="light"] .sidebar nav button,
html[data-theme="light"] .collapse-btn,
body.theme-light .sidebar nav button,
body.theme-light .collapse-btn,
html[data-theme="light"] .mode-switch button,
body.theme-light .mode-switch button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #f1f5f9 !important;
}
html[data-theme="light"] .sidebar nav button.active,
html[data-theme="light"] .sidebar nav button:hover,
html[data-theme="light"] .collapse-btn:hover,
body.theme-light .sidebar nav button.active,
body.theme-light .sidebar nav button:hover,
body.theme-light .collapse-btn:hover {
  background: #475569 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .mode-switch button.selected,
body.theme-light .mode-switch button.selected {
  background: #0f172a !important;
  color: #ffffff !important;
}
html[data-theme="light"] .topbar .theme-toggle-btn,
body.theme-light .topbar .theme-toggle-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .input-unit,
body.theme-light .input-unit,
html[data-theme="light"] .form-grid input,
html[data-theme="light"] .form-grid select,
body.theme-light .form-grid input,
body.theme-light .form-grid select,
html[data-theme="light"] .atlas-config-grid input,
html[data-theme="light"] .atlas-config-grid select,
body.theme-light .atlas-config-grid input,
body.theme-light .atlas-config-grid select,
html[data-theme="light"] .polaris-config-grid input,
html[data-theme="light"] .polaris-config-grid select,
body.theme-light .polaris-config-grid input,
body.theme-light .polaris-config-grid select {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  min-height: 38px !important;
}
html[data-theme="light"] .strategy-risk-grid,
body.theme-light .strategy-risk-grid,
html[data-theme="light"] .form-grid,
body.theme-light .form-grid {
  background: #ffffff !important;
}
html[data-theme="light"] .risk-preview,
body.theme-light .risk-preview {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .live-intent-head,
body.theme-light .live-intent-head {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: 44px !important;
}
html[data-theme="light"] .preset-library > div > button strong,
body.theme-light .preset-library > div > button strong {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .preset-library span,
html[data-theme="light"] .preset-library small,
body.theme-light .preset-library span,
body.theme-light .preset-library small {
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .builder-title,
html[data-theme="light"] .strategy-risk-title,
body.theme-light .builder-title,
body.theme-light .strategy-risk-title {
  background: #f8fafc !important;
}
html[data-theme="light"] h1,
body.theme-light h1 {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}
html[data-theme="light"] h2,
html[data-theme="light"] .section-header h2,
html[data-theme="light"] .breaksolid-head h2,
html[data-theme="light"] .atlas-head h2,
body.theme-light h2,
body.theme-light .section-header h2,
body.theme-light .breaksolid-head h2,
body.theme-light .atlas-head h2 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .eyebrow,
body.theme-light .eyebrow {
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ============================================================================
   31. COMPONENT SWEEP (Light) — komponen yang selama ini tanpa override.
   Semua ikut token section 30: card #ffffff, header #f8fafc, teks #0f172a,
   label #334155, sub #475569, border #cbd5e1/#94a3b8, radius 8/6/4.
   ========================================================================== */
/* 31a. Info/error/empty boxes */
html[data-theme="light"] .breaksolid-message,
body.theme-light .breaksolid-message {
  background: #eff6ff !important;
  border: 1.5px solid #0284c7 !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .breaksolid-error,
body.theme-light .breaksolid-error {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  border-radius: 6px !important;
  color: #b91c1c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .breaksolid-empty,
html[data-theme="light"] .breaksolid-loading,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .large-empty,
html[data-theme="light"] .module-empty,
body.theme-light .breaksolid-empty,
body.theme-light .breaksolid-loading,
body.theme-light .empty-state,
body.theme-light .large-empty,
body.theme-light .module-empty {
  background: #ffffff !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  color: #475569 !important;
}
html[data-theme="light"] .empty-state strong,
html[data-theme="light"] .large-empty strong,
html[data-theme="light"] .module-empty h3,
body.theme-light .empty-state strong,
body.theme-light .large-empty strong,
body.theme-light .module-empty h3 {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
/* 31b. Engine ON/OFF pills */
html[data-theme="light"] .engine-on,
body.theme-light .engine-on {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #047857 !important;
}
html[data-theme="light"] .engine-off,
body.theme-light .engine-off {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
}
/* 31c. Terminal: LONG/SHORT mode, tabs, execute, metrics strip, OHLC, chart empty */
html[data-theme="light"] .order-mode button,
body.theme-light .order-mode button {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
  color: #334155 !important;
  min-height: 34px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .order-mode .long.active,
body.theme-light .order-mode .long.active {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #047857 !important;
}
html[data-theme="light"] .order-mode .short.active,
body.theme-light .order-mode .short.active {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
}
html[data-theme="light"] .order-tabs,
body.theme-light .order-tabs {
  border-bottom: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .order-tabs button,
body.theme-light .order-tabs button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .order-tabs button.active,
body.theme-light .order-tabs button.active {
  color: #0284c7 !important;
  border-bottom: 2px solid #0284c7 !important;
}
html[data-theme="light"] .execute.long,
body.theme-light .execute.long {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  min-height: 34px !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .execute.short,
body.theme-light .execute.short {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  min-height: 34px !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .execute:disabled,
body.theme-light .execute:disabled {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}
html[data-theme="light"] .market-metrics,
body.theme-light .market-metrics {
  border-top: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
}
html[data-theme="light"] .market-metrics > div,
body.theme-light .market-metrics > div {
  border-right: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .market-metrics span,
body.theme-light .market-metrics span {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .market-metrics b,
body.theme-light .market-metrics b {
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .ohlc,
body.theme-light .ohlc {
  color: #475569 !important;
  font-size: 11px !important;
}
html[data-theme="light"] .ohlc b,
body.theme-light .ohlc b {
  color: #0f172a !important;
}
html[data-theme="light"] .chart-empty,
body.theme-light .chart-empty {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  color: #475569 !important;
}
html[data-theme="light"] .safe-note,
body.theme-light .safe-note {
  color: #475569 !important;
  font-size: 11px !important;
}
/* 31d. Notes & guards */
html[data-theme="light"] .guard-note,
body.theme-light .guard-note {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 6px !important;
  color: #92400e !important;
}
html[data-theme="light"] .guard-note span,
body.theme-light .guard-note span {
  color: #475569 !important;
}
html[data-theme="light"] .signal-message,
html[data-theme="light"] .source-message,
html[data-theme="light"] .execution-reason,
body.theme-light .signal-message,
body.theme-light .source-message,
body.theme-light .execution-reason {
  background: #eff6ff !important;
  border-left: 3px solid #0284c7 !important;
  border-radius: 0 6px 6px 0 !important;
  color: #0f172a !important;
  font-size: 12px !important;
}
/* 31e. Page shells: overview grid, flow, stats, section header, session card */
html[data-theme="light"] .stats-grid > div,
html[data-theme="light"] .signal-stats > div,
html[data-theme="light"] .overview-grid > div,
html[data-theme="light"] .session-card,
body.theme-light .stats-grid > div,
body.theme-light .signal-stats > div,
body.theme-light .overview-grid > div,
body.theme-light .session-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .section-header,
body.theme-light .section-header {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}
html[data-theme="light"] .section-header h2,
body.theme-light .section-header h2 {
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}
html[data-theme="light"] .flow > div,
body.theme-light .flow > div {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .price-block strong,
body.theme-light .price-block strong {
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 900 !important;
}
/* 31f. Integrations cards */
html[data-theme="light"] .integration-grid > div,
html[data-theme="light"] .integration,
body.theme-light .integration-grid > div,
body.theme-light .integration {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}
html[data-theme="light"] .integration h3,
body.theme-light .integration h3 {
  color: #0f172a !important;
}
html[data-theme="light"] .integration p,
body.theme-light .integration p {
  color: #475569 !important;
}
html[data-theme="light"] .integration-icon,
body.theme-light .integration-icon {
  background: #eff6ff !important;
  border: 1.5px solid #0284c7 !important;
  border-radius: 8px !important;
  color: #0284c7 !important;
}
/* 31g. Login page */
html[data-theme="light"] .login-page,
body.theme-light .login-page {
  background: #f1f5f9 !important;
  background-image: none !important;
}
html[data-theme="light"] .login-card,
body.theme-light .login-card {
  background: #ffffff !important;
  border-right: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] .login-card h1,
body.theme-light .login-card h1 {
  color: #0f172a !important;
}
html[data-theme="light"] .login-card form label > div,
body.theme-light .login-card form label > div {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .login-card input,
body.theme-light .login-card input {
  color: #0f172a !important;
}
html[data-theme="light"] .login-error,
body.theme-light .login-error {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #b91c1c !important;
  border-radius: 6px !important;
}
/* 31h. Sources, secrets, analytics, signals intake */
html[data-theme="light"] .source-manager input,
html[data-theme="light"] .source-manager select,
html[data-theme="light"] .signal-intake input,
html[data-theme="light"] .signal-intake select,
body.theme-light .source-manager input,
body.theme-light .source-manager select,
body.theme-light .signal-intake input,
body.theme-light .signal-intake select {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
}
html[data-theme="light"] .secret-reveal,
body.theme-light .secret-reveal {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 6px !important;
}
html[data-theme="light"] .secret-reveal code,
body.theme-light .secret-reveal code {
  color: #0f172a !important;
}
html[data-theme="light"] .analytics-head,
body.theme-light .analytics-head {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] .analytics-row,
body.theme-light .analytics-row {
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
}
html[data-theme="light"] .risk-box,
body.theme-light .risk-box {
  background: #475569 !important;
  border-color: #64748b !important;
  border-radius: 6px !important;
}

/* ============================================================================
   32. BUTTON HEIGHT STANDARD (Light) — min-height 34px rata semua tombol aksi.
   Khusus: input/select 38px, header tabel 44px, baris tabel 56px (bukan tombol).
   ========================================================================== */
html[data-theme="light"] button,
body.theme-light button {
  min-height: 34px !important;
}
html[data-theme="light"] .paper-row > button,
html[data-theme="light"] .signal-row > div button,
html[data-theme="light"] .live-risk-action,
html[data-theme="light"] .chart-toolbar button,
html[data-theme="light"] .timeframe-picks button,
html[data-theme="light"] .builder-title button,
html[data-theme="light"] .preset-footer button,
html[data-theme="light"] .strategy-actions button,
html[data-theme="light"] .top-actions button,
html[data-theme="light"] .section-header button,
html[data-theme="light"] .atlas-actions button,
html[data-theme="light"] .polaris-actions button,
html[data-theme="light"] .breaksolid-head-actions button,
html[data-theme="light"] .ai-config-actions button,
html[data-theme="light"] .scanner-runtime-row > button,
html[data-theme="light"] .bottom-tabs button,
body.theme-light .paper-row > button,
body.theme-light .signal-row > div button,
body.theme-light .live-risk-action,
body.theme-light .chart-toolbar button,
body.theme-light .timeframe-picks button,
body.theme-light .builder-title button,
body.theme-light .preset-footer button,
body.theme-light .strategy-actions button,
body.theme-light .top-actions button,
body.theme-light .section-header button,
body.theme-light .atlas-actions button,
body.theme-light .polaris-actions button,
body.theme-light .breaksolid-head-actions button,
body.theme-light .ai-config-actions button,
body.theme-light .scanner-runtime-row > button,
body.theme-light .bottom-tabs button {
  min-height: 34px !important;
  border-radius: 6px !important;
}

/* PHOENIX: six settings cards fill two balanced rows; patterns span full width. */
.lyra-panel .breaksolid-config {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lyra-panel .breaksolid-block {
  min-width: 0;
}
.lyra-panel .breaksolid-ledger {
  padding: 12px 16px 16px;
}
.lyra-panel .breaksolid-ledger > button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line, #527183);
  border-radius: 6px;
  color: inherit;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}
.lyra-panel button.source-toggle {
  min-height: 36px;
  padding: 6px 14px;
  border: 2px solid #e06470;
  border-radius: 6px;
  background: #291a1d;
  color: #ffdce0;
  font-weight: 800;
  cursor: pointer;
}
.lyra-panel button.source-toggle.on {
  border-color: #63e6b0;
  background: #176a50;
  color: #fff;
}
html[data-theme="light"] .lyra-panel button.source-toggle.off,
body.theme-light .lyra-panel button.source-toggle.off {
  background: #fff0f1;
  color: #8d1521;
}
html[data-theme="light"] .lyra-panel button.source-toggle.on,
body.theme-light .lyra-panel button.source-toggle.on {
  background: #13704d;
  color: #fff;
}
.lyra-panel .table-scroll {
  margin-top: 10px;
  overflow-x: auto;
}
.lyra-panel .table-scroll table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 12px;
}
.lyra-panel .table-scroll th,
.lyra-panel .table-scroll td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #527183);
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .lyra-panel .breaksolid-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lyra-panel .breaksolid-config { grid-template-columns: minmax(0, 1fr); }
}
.phoenix-panel .breaksolid-config {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1350px) {
  .phoenix-panel .breaksolid-config {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .phoenix-panel .breaksolid-config {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Source switches show the saved state in text, shape, and color. */
.atlas-source-row button.source-toggle,
.polaris-source-row button.source-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  min-width: 105px;
  background: #291a1d;
  border: 2px solid #e06470;
  color: #ffdce0;
  font-weight: 800;
  cursor: pointer;
}
.atlas-source-row button.source-toggle.active,
.polaris-source-row button.source-toggle.active {
  background: #176a50;
  border-color: #63e6b0;
  color: #ffffff;
}
.atlas-source-row button.source-toggle b,
.polaris-source-row button.source-toggle b {
  font-size: 10px;
  letter-spacing: .08em;
}
.atlas-source-row button.source-toggle:disabled,
.polaris-source-row button.source-toggle:disabled {
  opacity: .55;
  cursor: wait;
}
.atlas-source-row button.source-toggle:focus-visible,
.polaris-source-row button.source-toggle:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}
html[data-theme="light"] .atlas-source-row button.source-toggle,
html[data-theme="light"] .polaris-source-row button.source-toggle,
body.theme-light .atlas-source-row button.source-toggle,
body.theme-light .polaris-source-row button.source-toggle {
  background: #fff1f2 !important;
  border: 2px solid #be123c !important;
  color: #9f1239 !important;
}
html[data-theme="light"] .atlas-source-row button.source-toggle.active,
html[data-theme="light"] .polaris-source-row button.source-toggle.active,
body.theme-light .atlas-source-row button.source-toggle.active,
body.theme-light .polaris-source-row button.source-toggle.active {
  background: #15803d !important;
  border-color: #166534 !important;
  color: #ffffff !important;
}