:root{
  /* Stratefy CI tokens */
  --brand:#0B5FFF;        /* Primary */
  --accent:#14B8A6;       /* Accent */
  --ink:#0B1220;          /* Near-black */
  --ink-muted:#61708B;    /* Muted ink */
  --surface:#0F172A;      /* Deep slate */
  --elev-1:#111827;       /* Card */
  --elev-2:#1F2937;       /* Hover */
  --buy:#22C55E;          /* Success/Buy */
  --sell:#EF4444;         /* Danger/Sell */
  --code-bg:#0B1220;      /* Code/JSON surfaces */
  --chart-bg: var(--panel);     /* Chart surface */

  /* Map existing UI tokens onto CI */
  --bg: var(--surface);
  --panel: var(--elev-1);
  --text: #E6E9EF;
  --muted: var(--ink-muted);
  --border: #1c2233;
  --ok: var(--buy);
  --good: var(--buy);
  --bad: var(--sell);
  --warn: #F59E0B;

  /* Elevation, radius, motion */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.25);
  --shadow-2: 0 12px 30px rgba(0,0,0,.35);
  --transition-fast: 160ms ease;
  --transition-med: 220ms ease;

  /* Admin tokens used by admin.css (were missing) */
  --ui-1: var(--elev-1);   /* zebra row */
  --ui-2: var(--elev-2);   /* table header / hover bg */
  --ui-2h:#243246;         /* button hover */
  --ui-3:#10162b;          /* row separators */
  --hairline:#1b2335;      /* thin borders in drawer */
  --text-soft:#c4c9d4;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Page width & chart height */
  --container-w: 1480px;
  --chart-h: clamp(520px, 60vh, 680px);
}`r`n`r`n*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); }
/* Typography */
h1,h2,h3{ font-family:var(--sans); }
h1{ font-weight:700; }
h2{ font-weight:600; }
h3{ font-weight:600; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background: var(--panel);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 18%, var(--surface)), var(--surface));
  backdrop-filter: saturate(1.1) blur(2px);
}
.brand{ font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:.5rem }
.brand.logo-ok .brand-txt{ display:none }
.brand img{ height:28px; vertical-align:middle }
.brand .brand-sub{ font-weight:500; font-size:12.5px; color:var(--text-soft); margin-left:.25rem }
.badge{ padding:4px 8px; border-radius:999px; background:var(--accent); color:var(--ink); font-size:12px; border:1px solid color-mix(in srgb, var(--accent) 60%, #0000) }

/* User dropdown */
.user-menu{ position:relative }
.user-btn{ display:flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--accent) 8%, var(--elev-2)); color:var(--text); border:1px solid var(--border); padding:6px 10px; border-radius:8px; cursor:pointer }
.user-btn:hover{ filter:brightness(1.1) }
.user-btn .caret{ opacity:.8; font-size:12px }
/* Dark theme: brighten username text */
:root:not([data-theme="light"]) #top-user{ color: var(--text) !important; }
[data-theme="light"] #top-user{ color: var(--text) !important; }
.dropdown{ position:absolute; right:0; top:calc(100% + 6px); background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.35); min-width:180px; z-index:50 }
.dropdown .dd-item{ display:block; width:100%; text-align:left; background:transparent; color:var(--text); border:0; padding:8px 10px; cursor:pointer }
.dropdown .dd-item:hover{ background:var(--ui-2h) }

.container{ max-width:var(--container-w); margin:0 auto; padding:16px }

/* Tabs */
.tabs{ display:flex; gap:8px; margin-bottom:12px }
.tabs .tab{ text-decoration:none }
.tab{ text-decoration:none }
.tab{ background:var(--elev-1); border:1px solid var(--border); color:var(--muted); padding:8px 12px; border-radius:10px; cursor:pointer; transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) }
.tab.active{ color:var(--text); background:var(--elev-2); border-color:var(--brand) }
.tab:hover{ background:var(--ui-2h); color:#d8def8 }
/* Dark theme: brighten inactive tab text for readability */
:root:not([data-theme="light"]) .tab{ color:#b9c6f2; }

/* Panels */
.panel{ display:none; opacity:0; transform:translateY(2px); transition: opacity var(--transition-med), transform var(--transition-med) }
.panel.active{ display:block; opacity:1; transform:translateY(0) }

/* Toolbar */
.toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.toolbar input,.toolbar select,.toolbar button{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:8px; border-radius:8px; outline:none; transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.toolbar button{ background:var(--elev-2); cursor:pointer }
.toolbar button:hover{ filter:brightness(1.1) }

/* Button variants */
.btn{ background:var(--elev-2); border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; transition:transform var(--transition-fast), filter var(--transition-fast) }
.btn:hover{ filter:brightness(1.1) }
.btn:active{ transform:translateY(1px) }
.btn.small{ padding:4px 10px; height:28px; line-height:20px }
.btn.primary{ background: var(--brand); color:#ffffff; border-color:var(--brand) }
.btn.ghost{ background:transparent; border-color:var(--brand); color:var(--text) }
.btn.loading{ position:relative; pointer-events:none; opacity:.8 }
.btn.loading::after{ content:""; position:absolute; right:10px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:2px solid rgba(255,255,255,.6); border-top-color:transparent; animation:spin 800ms linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }/* Chips */
.chk{ display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--panel) }
.buy{ color:var(--ok) } .sell{ color:var(--bad) }

/* Tables */
.table-wrap{ border:1px solid var(--border); border-radius:var(--radius); overflow:visible; box-shadow: var(--shadow-1) }
table{ width:100%; border-collapse:collapse; font-size:14px }
thead th{ position:sticky; top:0; background:var(--ui-2); border-bottom:1px solid var(--border); text-align:left; padding:8px; color:var(--text-soft) }
tbody td{ padding:8px; border-bottom:1px solid var(--border) }
tbody{ transition: opacity .18s ease }
tbody tr:hover{ background: var(--ui-2h) }
.row-focus{ outline:2px solid var(--brand); background:rgba(11,18,32,.5); }

/* Numeric alignment helpers */
.mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num, .pct{ font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
thead th.num, thead th.pct{ text-align: right; }

.summary{ color:var(--muted); margin:6px 2px; font-size:12.5px }

/* Small info/tooltip icon */
.tip{ display:inline-block; font-size:.85em; opacity:.75; margin-left:.4rem; cursor:help; vertical-align:baseline; color:#cbd5f7 }
.tip:hover{ opacity:1 }
.tip-icon{ display:inline-block; width:12px; height:12px }

/* Keep time and its info icon on one line (Signals/Trades tables) */
.time-inline{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle }
.time-inline .time-text{ white-space:nowrap }
.time-inline .tip{ margin-left:0; vertical-align:middle }
.tip-icon{ vertical-align:middle }

/* Skeleton loading */
.skeleton{ position:relative; overflow:hidden; background: var(--panel); border-radius:6px }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.2s infinite; }
@keyframes shimmer{ 100% { transform:translateX(100%); } }
tr.skeleton-row td{ background:var(--panel) }

/* PnL columns: keep cells left-aligned, but align numbers neatly
   by right-aligning inside a fixed-width inline-block with tabular numerals. */
.pnl30, .tenant-pnl30{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align:left;
  padding-left:8px;
}

/* Blur helper when showing overlaid drawers */
.blurred { filter: blur(2px); }

/* Pager */
.pager{ display:flex; align-items:center; gap:12px; margin-top:10px; font-size:12.5px }
.pager button{ background:var(--elev-2); border:1px solid var(--border); color:var(--text); padding:4px 8px; border-radius:8px; cursor:pointer; font-size:12.5px }

/* Code blocks */
.code{ margin:0; background:var(--code-bg); border:1px solid var(--border); border-radius:12px; padding:12px; font-family:var(--mono); font-size:12.5px; white-space:pre-wrap; color: var(--text) }
textarea.code{ color: var(--text); background: var(--code-bg); }

/* ===== Rule Builder (Nested) ===== */
.rule-breadcrumbs{ margin:8px 0 6px; font-size:12.5px; color:var(--text-soft); display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.rule-breadcrumbs .crumb{ padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:var(--panel); cursor:pointer }
.rule-breadcrumbs .crumb.active{ border-color:var(--brand); color:#e7eeff }

.rule-group{ border:1px solid var(--border); border-radius:10px; background:var(--panel); margin:8px 0; padding:6px }
.rule-group.root{ padding:8px; background:transparent; border:0 }
.rule-group .rule-group{ margin-left:16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); position:relative }
.rule-group .rule-group::before{ content:""; position:absolute; left:-10px; top:0; bottom:0; border-left:1px dashed var(--hairline); }
.rule-group-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 4px; border-bottom:1px dashed var(--hairline) }
.rule-group-header strong{ cursor:pointer; color:#cfe1ff }
.rule-group-header:hover{ background: color-mix(in srgb, var(--panel) 80%, #fff2) }
.rule-group-header .grp-name{ padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.04); cursor:pointer }
.rule-group-header .grp-name:hover{ background:rgba(255,255,255,.08) }
.rule-group.selected-group{ outline:1px solid var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent) }
.rule-group.selected-group .rule-group-header{ border-bottom-color: var(--brand); }
.rule-group-body{ padding:6px 4px 2px; }
.rule-grid{ grid-template-columns: 28px 200px 170px 140px 180px 1fr; gap:8px; align-items:center; margin:6px 2px; position:relative }
.rule-grid input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--brand); }
.rule-grid[draggable="true"]{ cursor:grab }
.rule-group-body .drop-target{ outline:1px dashed var(--brand); background: rgba(46,123,255,.06) }
.drop-between{ height:8px; margin:2px 0; border:1px dashed transparent; border-radius:12px }
.drop-between.active{ border-color: var(--brand); background: rgba(46,123,255,.10) }

/* Mode pills */
.mode-pill{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:600; font-size:12px; border:1px solid var(--border); }
.mode-all{ background: rgba(34,197,94,.12); color:#bafece; border-color: color-mix(in srgb, var(--ok) 40%, #0000); }
.mode-any{ background: rgba(59,130,246,.12); color:#d4e6ff; border-color: color-mix(in srgb, var(--brand) 40%, #0000); }

/* Elbow connectors between rows */
.rule-grid::before{
  content:""; position:absolute; left:-10px; top:-6px; width:12px; height:18px;
  border-left:1px dashed var(--hairline); border-bottom:1px dashed var(--hairline);
}
.rule-group .rule-group-body{ position:relative }

/* Inputs styled like Expert mode */
.rule-grid select, .rule-grid input[type="number"], .rule-group-header select{
  background: var(--elev-2);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 6px 10px;
  outline: none;
}
.rule-grid input[type="number"]{ width: 160px; }
.rule-grid .btn.small, .rule-group-header .btn.small{
  background: var(--elev-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.rule-grid .btn.small.bad{ border-color: color-mix(in srgb, var(--bad) 40%, #0000); }

/* Simple modal for renaming groups */
.modal-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9999 }
.modal-card{ background: var(--panel); color: var(--text); border:1px solid var(--border); border-radius:12px; padding:16px; width:min(420px, 90vw); box-shadow: var(--shadow-2) }
.modal-card h3{ margin:0 0 10px 0 }
.modal-card .row{ display:flex; gap:8px; align-items:center }
.modal-card input[type="text"]{ flex:1; background: var(--elev-2); color:var(--text); border:1px solid var(--hairline); border-radius:10px; padding:8px }
.modal-card .actions{ margin-top:12px; display:flex; gap:8px; justify-content:flex-end }
.modal-card .actions .btn{ background: var(--elev-2); border:1px solid var(--hairline); border-radius:10px; padding:8px 12px; cursor:pointer }

/* Indicator cards */
#indicatorsGrid{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px }
#indicatorsGrid .card{ background: var(--elev-1); border:1px solid var(--border); border-radius:12px; padding:12px; }
#indicatorsGrid .pill.tag{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background: var(--ui-1); margin-right:6px }
#indicatorsGrid .pill.tag.tag-trend{ border-color:#a33; background:rgba(163,51,51,.12); color:#f1b0b0 }
#indicatorsGrid .pill.tag.tag-momentum{ border-color:#a36a1f; background:rgba(163,106,31,.12); color:#f1d0a0 }
#indicatorsGrid .pill.tag.tag-volatility{ border-color:#6a33a3; background:rgba(106,51,163,.12); color:#d6baf1 }
#indicatorsGrid .pill.tag.tag-volume{ border-color:#2f6dab; background:rgba(47,109,171,.12); color:#c2dcf4 }
#indicatorsGrid .pill.tag.tag-levels{ border-color:#1f8a6d; background:rgba(31,138,109,.12); color:#b9f1e4 }
#indicatorsGrid .pill.tag.tag-src, #indicatorsGrid .pill.tag.tag-backend{ border-color:var(--hairline); color:var(--text-soft) }
.scroll{ max-height:var(--chart-h); overflow:auto }

/* Chart layout */
.grid{
  display:grid;
  grid-template-columns: minmax(720px, 2fr) minmax(500px, 1.1fr);
  align-items:start; gap:16px;
}
.chart{ position:relative; width:100%; border:1px solid var(--border); border-radius:12px; background:var(--chart-bg); height:var(--chart-h) }
#candlesChart{ width:100%; height:100%; display:block; border-radius:10px }

/* Tooltip */
#chartTip{
  position:absolute; pointer-events:none; padding:6px 8px;
  background:rgba(0,0,0,0.7); color:#e6ebff; font:11px ui-monospace,monospace;
  border:1px solid #223; border-radius:6px; transform:translate(-50%,-120%);
  display:none; z-index:5;
}

/* Dialogs */
.dialog-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px }
dialog{ border:none; border-radius:12px; padding:0; max-width:70ch }
dialog::backdrop{ background:rgba(0,0,0,.5) }
dialog pre{ margin:0; padding:16px }
dialog .dialog-actions{ padding:12px; background:#0e1330; border-top:1px solid var(--border) }
/* Light theme: dialog footer matches other light modals */
[data-theme="light"] dialog .dialog-actions{ background: var(--ui-2); border-top-color: var(--hairline); }
.footer{ opacity:.6; text-align:center; padding:24px }

/* Signal JSON modal */
#signalModal::backdrop{ background:rgba(0,0,0,.6) }
#signalModal{ background:var(--panel); color:var(--text); border:1px solid var(--border); max-width: 80vw; }
/* Ensure both signal and JSON modals use the exact same width */
#signalModal, #jsonModal{
  width: clamp(600px, 80vw, 900px);
}
#signalModal pre,#signalJson{
  margin:0; padding:16px; background:var(--code-bg); color:var(--text);
  font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  white-space:pre-wrap; word-break:break-word; max-height:60vh; overflow:auto;
}
/* Light theme: softer border + readable text */
[data-theme="light"] #signalModal{ border-color: var(--hairline); }
[data-theme="light"] #signalModal pre,#signalJson{ color: var(--text); background: var(--code-bg); }

/* Admin helpers */
.muted{ color:var(--muted) }
 param($m) $m.Value -replace "\}", ";"
.btn:hover{ filter:brightness(1.1) }
.btn[disabled]{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
  filter: grayscale(.5) saturate(.6) brightness(.95);
}
.btn.good[disabled]{
  background: color-mix(in srgb, var(--buy) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--buy) 30%, var(--border));
}
.btn.danger[disabled]{
  background: color-mix(in srgb, var(--sell) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--sell) 30%, var(--border));
}
.btn.good{ background: rgba(34,197,94,.18); border-color: var(--buy); }
.btn.danger, .btn.bad{ background: rgba(239,68,68,.18); border-color: var(--sell); }
.btn.bad[disabled]{
  background: color-mix(in srgb, var(--sell) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--sell) 30%, var(--border));
}

.pill{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px;
  background:var(--elev-1); border:1px solid var(--border); color:var(--text);
}
.pill.info{ border-color:var(--brand); background:var(--elev-2); color:var(--text-soft); }
/* More visible pulsing for active auto-refresh */
@keyframes pillPulseGlow {
  0%   { transform: translateZ(0) scale(1);   box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%  { transform: translateZ(0) scale(1.05); box-shadow: 0 0 14px 2px var(--brand); }
  100% { transform: translateZ(0) scale(1);   box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.pill.pulse{
  border-color: var(--brand);
  animation: pillPulseGlow 1.1s ease-in-out infinite;
}
[data-theme="light"] .pill.pulse{ background: var(--elev-2); }
.text-pos{ color: var(--ok); }
.text-neg{ color: var(--bad); }
.row-actions{ display:flex; gap:.4rem }
/* In tenant-admin mode, hide Tenants page Actions column */
.tenant-admin #tenants-page .row-actions{ display:none !important }
/* Global JSON modal styling */
#jsonModal {
  /* Match signal modal sizing */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  max-width: 80vw;
}
#jsonModal::backdrop { background: rgba(0,0,0,.6) }
#jsonModal pre {
  /* Match signal modal content rules */
  margin: 0;
  padding: 16px;
  color: var(--text);
  background: var(--code-bg);
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow: auto;
}
/* Indicator detail modal */
#indInfoModal{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  max-width: 70vw;
}
#indInfoModal::backdrop { background: rgba(0,0,0,.6) }
#indInfoModal .kv td{ border-top:1px solid var(--hairline); padding:4px 6px; font-size:12.5px }
/* Light theme: make JSON modal text match light UI */
[data-theme="light"] #jsonModal{ border-color: var(--hairline); }
[data-theme="light"] #jsonModal,
[data-theme="light"] #jsonModal pre{ color: var(--text); }

/* Toasts */
.toast-wrap{ position:fixed; right:16px; bottom:16px; z-index:3000; display:grid; gap:8px }
.toast{ background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow-1); min-width:260px; max-width:420px; animation:toast-in var(--transition-med) }
.toast.good{ border-color:#1f6d3a }
.toast.warn{ border-color:#8a6d00 }
.toast.bad{ border-color:#6d1f1f }
@keyframes toast-in{ from{ transform:translateY(6px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* Indicator cards */
.ind-card{ border-radius: 12px; padding: 12px; background: var(--panel); border:1px solid var(--border); box-shadow: var(--shadow-1); height: 140px; display:flex; flex-direction:column; gap:6px; overflow:hidden }
.ind-card:hover{ background: var(--elev-2) }
.ind-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 2px }
.ind-title{ font-weight:600; font-size: 13.5px; line-height: 1.3 }
.ind-desc{ margin-top: 0; font-size: 11.5px; line-height: 1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color: var(--muted) }
.ind-pills{ display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 0 0 }
.ind-io, .ind-params{ font-size: 12.5px; margin-top:4px }

/* Strategy builder chips */
#builderIndicators{ display:flex; gap:8px; flex-wrap:wrap }
.builder-ind-card{ flex:0 0 320px; max-width: 340px; min-height: 180px; background: var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow-1); padding:12px; display:flex; flex-direction:column; gap:8px }
.builder-ind-card .ind-param-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
.builder-ind-card label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color: var(--text-soft); overflow-wrap: break-word; word-wrap: break-word; }
.builder-ind-card input, .builder-ind-card select{ width:100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.builder-ind-card .ind-outputs-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px }
.builder-ind-card .pill.info{ border-color: var(--border); background: var(--ui-2); color: var(--text) }
.builder-ind-card label .help{ font-size: 11.5px; margin-top: 2px }
/* Header layout for indicator cards */
.builder-ind-card .ind-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.builder-ind-card .ind-title{ line-height: 1.2 }
.builder-ind-card .ind-actions{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; white-space:nowrap }
.builder-ind-card .ind-actions >  param($m) $m.Value -replace "\}", ";"
.builder-ind-card .ind-actions .btn.small{ display:inline-flex; align-items:center; justify-content:center; height:24px; line-height:22px; padding:2px 8px }
.builder-ind-card .ind-actions .btn.small.ghost{ padding:2px 6px ; border-color:transparent; background:transparent; box-shadow:none }
.builder-ind-card .ind-actions .btn +  param($m) $m.Value -replace "\}", ";"
.builder-ind-card .ind-actions .btn.small svg{ display:block }

/* Light theme: make pill text darker for readability */
[data-theme="light"] .pill{ color: var(--ink); }
[data-theme="light"] .pill.info{ color: var(--ink); }
[data-theme="light"] #indicatorsGrid .pill.tag{ color: var(--ink); }
.ind-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px }
.ind-chip .btn.small{ padding:2px 6px }

/* Tag pill variants */
.pill.tag{ padding: 2px 8px; font-size: 11.5px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 60%, #0000); }
.tag-trend{ border-color:#ef4444; color:#fecaca; background: rgba(239,68,68,.1) }
.tag-volume{ border-color:#3b82f6; color:#bfdbfe; background: rgba(59,130,246,.1) }
.tag-momentum{ border-color:#f59e0b; color:#fde68a; background: rgba(245,158,11,.12) }
.tag-volatility{ border-color:#a855f7; color:#e9d5ff; background: rgba(168,85,247,.12) }
.tag-levels{ border-color:#06b6d4; color:#a5f3fc; background: rgba(6,182,212,.12) }
.tag-overlay{ border-color:#10b981; color:#bbf7d0; background: rgba(16,185,129,.12) }
.tag-hand{ border-color:#10b981; color:#d1fae5; background: rgba(16,185,129,.12) }
.tag-talib{ border-color:#64748b; color:#cbd5e1; background: rgba(100,116,139,.14) }
.tag-pandas_ta{ border-color:#22d3ee; color:#99f6e4; background: rgba(34,211,238,.12) }

/* Focus visible */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px }

/* Theme toggle (light) */
@media (prefers-color-scheme: light){ :root { color-scheme: light dark } }

/* Explicit light theme tokens */
[data-theme="light"]{
  --brand:#0B5FFF; --accent:#14B8A6; --ink:#0B1220; --ink-muted:#61708B;
  --surface:#F7F9FC; --elev-1:#FFFFFF; --elev-2:#F3F4F6;
  --bg: var(--surface); --panel: var(--elev-1);
  --text:#0B1220; --muted:#61708B; --border:#D6DBE5;
  --ui-1:#F7F9FC; --ui-2:#FFFFFF; --ui-2h:#EEF2FB; --ui-3:#E4E7EE; --text-soft:#4b5563;
  /* Lighter hairline for inputs/modals in light theme */
  --hairline:#E6EAF1;
  --code-bg:#F8FAFC; --chart-bg: var(--panel);
  --shadow-1: 0 6px 22px rgba(16,24,40,.08);
  --shadow-2: 0 16px 46px rgba(16,24,40,.12);
}

/* Sticky headers for signals/trades tables */
#signalsTable thead th,
#tradesTable thead th{
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--ui-2);
}

/* Light: status good pill uses Accent */
[data-theme="light"] .pill.good{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, #ffffff); color: var(--ink); }

/* Light: make user button blue */
[data-theme="light"] .user-btn{
  background: color-mix(in srgb, var(--brand) 14%, var(--elev-1));
  border-color: var(--brand);
  color: var(--text);
}
[data-theme="light"] .user-btn:hover{ filter:brightness(1.05) }

/* Dark: make user button match Set limits */
:root:not([data-theme="light"]) .user-btn{
  background: color-mix(in srgb, var(--brand) 22%, var(--elev-2));
  border-color: color-mix(in srgb, var(--brand) 70%, #000 30%);
  color: #dde6ff;
}
:root:not([data-theme="light"]) .user-btn:hover{ filter: brightness(1.08); }

/* Dark: make theme toggle match Set limits */
:root:not([data-theme="light"]) #themeToggle{
  background: color-mix(in srgb, var(--brand) 22%, var(--elev-2));
  border-color: color-mix(in srgb, var(--brand) 70%, #000 30%);
  color: #dde6ff;
}
:root:not([data-theme="light"]) #themeToggle:hover{ filter: brightness(1.08); }
/* Strategy builder indicator card polish */
.builder-ind-card .ind-title strong{ font-size:14px }
.builder-ind-card .ind-desc{ font-size:12.5px; margin-top:2px }

/* Indicator parameter inputs: compact + rounded */
.builder-ind-card .ind-param-grid input,
.builder-ind-card .ind-param-grid select{
  width: 120px;
  max-width: 150px;
  border-radius: 8px;
  background: var(--ui-2);
  border: 1px solid var(--border);
  padding: 6px 8px;
  font-size: 13px;\n  color: var(--text);\n  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);\n}
/* Dark theme: soft tinted input backgrounds */
:root:not([data-theme="light"]) .builder-ind-card .ind-param-grid input,
:root:not([data-theme="light"]) .builder-ind-card .ind-param-grid select{
  background: var(--ui-2);
}

/* Focus: gentle glow and slight tint */
.builder-ind-card .ind-param-grid input:focus,
.builder-ind-card .ind-param-grid select:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, #0000);
  background: var(--ui-2);
}

/* Placeholder color */
.builder-ind-card .ind-param-grid input::placeholder,
.builder-ind-card .ind-param-grid select::placeholder{ color: var(--muted); opacity:.8 }

/* Force readable text color for numeric inputs (WebKit) */
.builder-ind-card .ind-param-grid input[type="number"],
.builder-ind-card .ind-param-grid input,
.builder-ind-card .ind-param-grid select{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}

/* Focus: gentle glow and slight tint */
.builder-ind-card .ind-param-grid input:focus,
.builder-ind-card .ind-param-grid select:focus{
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, #0000) !important;
  background: var(--ui-2) !important;
}


/* Label above outputs row in builder cards */
.builder-ind-card .ind-outputs-label{ font-size: 12px; margin-top: 6px; margin-bottom: 4px; color: var(--text-soft) }

/* ===== Strategies layout & Rule builder polish ===== */
/* Fix Rules column width to avoid overlap with indicator cards */
#tab-strategies > .grid{ grid-template-columns: 380px minmax(0,1fr) !important; align-items:start; gap:16px; }
/* Hard-fix child column widths so they don't shift when content changes */
#tab-strategies > .grid > div:first-child{ min-width:380px; max-width:380px }

/* Guided Mode: Make wizard take full width when visible */
#tab-strategies:has(.guided-mode:not([style*="display: none"])) > .grid {
  grid-template-columns: 1fr !important;
}

#tab-strategies:has(.guided-mode:not([style*="display: none"])) > .grid > div:first-child {
  max-width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0 20px;
}


/* Rule builder inputs: match indicator param inputs */
#tab-strategies .toolbar input,
#tab-strategies .toolbar select,
#tab-strategies textarea#bLong,
#tab-strategies textarea#bShort{
  background: var(--ui-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 13px;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#tab-strategies .toolbar input:focus,
#tab-strategies .toolbar select:focus,
#tab-strategies textarea#bLong:focus,
#tab-strategies textarea#bShort:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, #0000);
}
/* Ensure JSON boxes occupy full rules column width */
#tab-strategies textarea#bLong,
#tab-strategies textarea#bShort{ width:100%; min-width:100%; box-sizing:border-box }

/* Visual rule editor rows */
#ruleLongUI input, #ruleLongUI select,
#ruleShortUI input, #ruleShortUI select{
  background: var(--ui-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 13px;
}
#ruleLongUI input:focus, #ruleLongUI select:focus,
#ruleShortUI input:focus, #ruleShortUI select:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, #0000);
}
/* Rule visual containers scroll instead of overflowing */
#ruleLongUI, #ruleShortUI{ overflow:auto }
/* Stabilize scrollbars to avoid any width shift when content grows */
#ruleLongUI, #ruleShortUI{ scrollbar-gutter: stable both-edges }
#tab-strategies textarea#bLong,
#tab-strategies textarea#bShort{ scrollbar-gutter: stable both-edges }
/* Prevent grid children from forcing intrinsic expansion */
#ruleLongUI .grid > *, #ruleShortUI .grid > *{ min-width: 0; max-width: 100% }
/* Make sure all blocks inside the Rules column consume full fixed width */
#tab-strategies > .grid > div:last-child > .toolbar,
#tab-strategies > .grid > div:last-child > .grid,
#tab-strategies #bPreviewOut,
#tab-strategies #ruleLongUI,
#tab-strategies #ruleShortUI,
#tab-strategies textarea#bLong,
#tab-strategies textarea#bShort{ width:100%; box-sizing:border-box }

/* Buttons: match Admin "Set limits" CI blue */
:root:not([data-theme="light"]) .btn.primary{
  background: color-mix(in srgb, var(--brand) 22%, var(--elev-2));
  border-color: color-mix(in srgb, var(--brand) 70%, #000 30%);
  color: #dde6ff;
}
[data-theme="light"] .btn.primary{
  background: color-mix(in srgb, var(--brand) 22%, #ffffff);
  border-color: var(--brand);
  color: var(--ink);
}
/* Ensure small primary buttons (Add condition) keep single-line height */
#ruleLongUI .btn.small.primary, #ruleShortUI .btn.small.primary{
  white-space: nowrap; height: 28px; line-height: 20px; padding: 4px 10px;
}

/* Keep numbers compact but readable */
#ruleLongUI input[type="number"], #ruleShortUI input[type="number"]{ width: 110px; }

/* Dark theme text color enforcement for rule inputs (WebKit) */
:root:not([data-theme="light"]) #ruleLongUI input,
:root:not([data-theme="light"]) #ruleLongUI select,
:root:not([data-theme="light"]) #ruleShortUI input,
:root:not([data-theme="light"]) #ruleShortUI select{
  -webkit-text-fill-color: var(--text);
}



/* Ensure primary small buttons (Add condition) never wrap */
#ruleLongUI .btn.small.primary,
#ruleShortUI .btn.small.primary{ white-space: nowrap; height:28px; line-height:20px; padding:4px 10px }

/* Stabilize scrollbar width to avoid rule column shifting */
#tab-strategies textarea#bLong,
#tab-strategies textarea#bShort{ scrollbar-gutter: stable both-edges }

/* Ensure row grid itself stretches and aligns remove button to the right */
#ruleLongUI .grid, #ruleShortUI .grid{ width:100% }
#ruleLongUI [data-act='rem'], #ruleShortUI [data-act='rem']{ justify-self: end }

/* Align header hint into rule grid columns */
.rule-head .cmp-hint{ grid-column:3 / 5; justify-self:start; font-size:12px; color: var(--text-soft) }

/* Unified rule header and row grid to align columns */
.rule-grid{ display:grid; grid-template-columns: 140px 160px 120px 140px 90px; align-items:center; column-gap:6px; width:100% }
/* First column (source column) compact */
#ruleLongUI select[data-act='col'], #ruleShortUI select[data-act='col']{ min-width:140px }
/* Fourth cell (value input or value column) same width for both */
#ruleLongUI input[data-act='vnum'], #ruleShortUI input[data-act='vnum']{ width:110px }
#ruleLongUI select[data-act='vcol'], #ruleShortUI select[data-act='vcol']{ width:110px }
/* Header Add condition button matches smaller first column */
.rule-head .btn.small.primary{ max-width:140px; justify-self:start }

/* ============================================================================
   STRATEGY BUILDER: DUAL-MODE SYSTEM (Guided + Expert)
   ============================================================================ */

/* Mode Toggle Container */
.mode-toggle-container {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Mode Toggle Button Group */
.mode-toggle {
  display: inline-flex;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 4px;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.95em;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mode-btn .icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.mode-btn:hover:not(.active) {
  background: var(--elev-2);
  color: var(--text);
}

.mode-btn:hover:not(.active) .icon {
  opacity: 1;
}

.mode-btn.active,
.mode-btn.active:hover {
  background: var(--brand) !important;
  color: white !important;
  cursor: default;
  box-shadow: 0 2px 6px rgba(11, 95, 255, 0.3);
}

.mode-btn.active .icon,
.mode-btn.active:hover .icon {
  opacity: 1;
}

.mode-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.mode-hint {
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--muted);
}

/* Mode-specific container visibility */
body[data-builder-mode="guided"] #builderGuidedContainer {
  display: block !important;
}

body[data-builder-mode="guided"] #builderExpertContainer {
  display: none !important;
}

body[data-builder-mode="expert"] #builderGuidedContainer {
  display: none !important;
}

body[data-builder-mode="expert"] #builderExpertContainer {
  display: block !important;
}

/* Collapsible Section Component */
.collapsible-section {
  background: var(--panel);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color var(--transition-fast);
}

.collapsible-section:hover {
  border-color: rgba(11, 95, 255, 0.3);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.section-header:hover {
  background: var(--elev-2);
}

.section-header:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.section-icon {
  flex-shrink: 0;
  transition: transform var(--transition-med);
  font-size: 0.8em;
  color: var(--muted);
  width: 16px;
  text-align: center;
}

.collapsible-section.collapsed .section-icon {
  transform: rotate(-90deg);
}

.section-icon-custom {
  flex-shrink: 0;
  font-size: 1.2em;
  opacity: 0.8;
}

.section-title {
  flex: 1;
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.section-badge {
  padding: 4px 12px;
  background: var(--elev-2);
  border-radius: 12px;
  font-size: 0.85em;
  color: var(--muted);
  font-weight: 500;
}

.section-content {
  padding: 0 20px 20px 20px;
  max-height: 5000px;
  overflow: hidden;
  transition: max-height var(--transition-med) ease-out,
              opacity var(--transition-med) ease-out,
              padding var(--transition-med) ease-out;
}

.collapsible-section.collapsed .section-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Wizard Progress */
.wizard-progress {
  margin-bottom: 32px;
  padding: 0 20px;
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--elev-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1em;
  border: 2px solid var(--border);
  transition: all var(--transition-fast);
}

.progress-step.active .step-number {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.4);
}

.progress-step.completed .step-number {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}

.step-label {
  font-size: 0.85em;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
}

.progress-step.active .step-label {
  color: var(--text);
  font-weight: 600;
}

.progress-connector {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  position: relative;
  top: -12px;
}

.wizard-content {
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 0 20px;
}

.wizard-step {
  animation: fadeIn var(--transition-med) ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-step h2 {
  font-size: 1.8em;
  margin: 0 0 8px 0;
  color: var(--text);
}

.wizard-step > p.muted {
  margin: 0 0 32px 0;
  font-size: 1.05em;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 800px;
  margin: 32px auto 0;
  padding: 20px;
  border-top: 1px solid var(--border);
}

.wizard-nav button {
  min-width: 120px;
}

.wizard-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form Fields */
.form-field {
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.form-field .required {
  color: var(--bad);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1em;
  transition: all var(--transition-fast);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.1);
}

.field-hint {
  margin-top: 6px;
  font-size: 0.9em;
  color: var(--muted);
}

/* Wizard Step 1: Name/Description grid - spacing handled by inline styles */
.wizard-step[data-step="1"] .grid.name-desc-grid {
  align-items: start;
}

/* Wizard Step 1: Strategy Name width */
.wizard-step[data-step="1"] #g_name {
  max-width: 100%;
}

/* Wizard Step 1: Description textarea styling */
.wizard-step[data-step="1"] #g_desc {
  max-width: 100%;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* Wizard Step 1: Symbol/Timeframe grid - spacing handled by inline styles */
.wizard-step[data-step="1"] .grid.symbol-tf-grid {
  /* Grid properties defined inline */
}

/* Wizard Step 1: Risk Management grid - spacing handled by inline styles */
.wizard-step[data-step="1"] .grid.risk-mgmt-grid {
  /* Grid properties defined inline */
}

/* Wizard Step 1: Remove form-field margins - grid gap handles spacing */
.wizard-step[data-step="1"] .grid .form-field {
  margin-bottom: 0;
}

/* Wizard Step 1: All grid inputs - consistent width */
.wizard-step[data-step="1"] .grid .form-field input,
.wizard-step[data-step="1"] .grid .form-field select,
.wizard-step[data-step="1"] .grid .form-field textarea {
  max-width: 100%;
}

/* Quick Pick Buttons */
.quick-pick-btn,
.rule-template-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px;
  background: var(--elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.quick-pick-btn:hover,
.rule-template-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 95, 255, 0.3);
}

/* Indicator Card Grid */
.indicator-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Guided Mode: selected indicator styling */
.indicator-card-grid .ind-card.selected {
  border-color: var(--good);
  background: var(--elev-2);
}

/* Guided Mode: Info button - remove border */
.indicator-card-grid .btn.ghost[data-action="info"] {
  border: none;
  background: transparent;
  padding: 4px;
}

.indicator-card-grid .btn.ghost[data-action="info"]:hover {
  background: transparent;
  border: none;
}

/* Guided Mode: Add button styling - circular with rounded border */
.indicator-card-grid .ind-add-btn {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
}

/* Guided Mode: Add button default colors (no background) */
.indicator-card-grid .ind-add-btn.good {
  color: var(--good);
}

.indicator-card-grid .ind-add-btn.bad {
  color: var(--bad);
}

/* Guided Mode: Add button hover effects (show circle) */
.indicator-card-grid .ind-add-btn.good:hover {
  background: var(--good) !important;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(0, 255, 100, 1), 0 0 48px rgba(0, 255, 100, 0.8), 0 0 72px rgba(0, 200, 83, 0.4);
}

.indicator-card-grid .ind-add-btn.bad:hover {
  background: var(--bad) !important;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(255, 60, 60, 1), 0 0 48px rgba(255, 60, 60, 0.8), 0 0 72px rgba(220, 38, 38, 0.4);
}

/* Keep icon-sm for selected indicator cards */
.indicator-icon-sm {
  font-size: 18px;
}

/* Guided Mode: Hide duplicate condition match logic from _renderRuleUI */
.rule-builder-guided .rule-head {
  display: none !important;
}

/* Selected Indicator Grid (small cards at bottom) */
.selected-indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* Guided Mode: wider cards for indicators with parameters */
.selected-indicator-grid .builder-ind-card {
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 320px;
}

.selected-indicator-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--elev-2);
  border: 1px solid var(--good);
  border-radius: var(--radius);
  padding: 12px;
}

.selected-indicator-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selected-indicator-card strong {
  font-size: 0.95em;
  color: var(--text);
}

.btn-remove-indicator {
  background: transparent !important;
  border: none !important;
  color: var(--bad);
  font-size: 20px;
  font-weight: normal;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-remove-indicator:hover {
  background: var(--bad) !important;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(255, 60, 60, 1), 0 0 48px rgba(255, 60, 60, 0.8), 0 0 72px rgba(220, 38, 38, 0.4);
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
}

/* Review Summary */
.review-summary {
  display: grid;
  gap: 24px;
}

.review-section {
  background: var(--elev-2);
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.review-section h4 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 1.1em;
}

.review-section dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px 16px;
  margin: 0;
}

.review-section dt {
  font-weight: 600;
  color: var(--muted);
}

.review-section dd {
  margin: 0;
  color: var(--text);
}

/* Responsive */
@media (max-width: 768px) {
  .mode-toggle {
    width: 100%;
    flex-direction: column;
  }

  .mode-btn {
    width: 100%;
    justify-content: center;
  }

  .progress-steps {
    flex-wrap: wrap;
    gap: 16px;
  }

  .progress-connector {
    display: none;
  }
}

/* ============================================================================
   Strategy Management Styles (Phase 1 + 1.5)
   ============================================================================ */

.strategy-management {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.strategy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.strategy-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

/* Dropdown for New Strategy */
.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-size: 14px;
}

.dropdown-item:hover {
  background: var(--hover);
}

/* Strategy Tabs */
.strategy-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}

.strategy-tabs .tab {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--fg-dim);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: -2px;
}

.strategy-tabs .tab:hover {
  color: var(--fg);
  border-bottom-color: var(--brand);
}

.strategy-tabs .tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Filters */
.strategy-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px;
  background: var(--bg-alt);
  border-radius: 8px;
}

.filter-group {
  flex: 1;
  min-width: 180px;
}

.strategy-filters input[type="text"],
.strategy-filters select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
}

.strategy-filters input[type="text"]:focus,
.strategy-filters select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Strategy Grid */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.strategy-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.strategy-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.strategy-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.strategy-card-title {
  flex: 1;
  min-width: 0;
}

.strategy-card-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strategy-card-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.strategy-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.strategy-meta {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-dim);
}

.strategy-meta span {
  font-weight: 500;
}

.strategy-description {
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.strategy-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 13px;
}

.strategy-metrics.muted {
  color: var(--fg-dim);
  justify-content: center;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  color: var(--fg-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.metric-value {
  color: var(--fg);
  font-weight: 600;
  font-size: 15px;
}

.strategy-stats {
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.strategy-card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.strategy-card-footer .btn {
  flex: 1;
  min-width: fit-content;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--fg);
}

.empty-state p {
  margin: 0 0 24px 0;
  font-size: 15px;
  color: var(--fg-dim);
  max-width: 400px;
}

/* Loading State */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  font-size: 15px;
  color: var(--fg-dim);
}

.loading::after {
  content: '...';
  animation: ellipsis 1.5s infinite;
}

@keyframes ellipsis {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Error State */
.error {
  padding: 40px 20px;
  text-align: center;
  color: var(--bad);
  font-size: 15px;
}

/* Badge Variations */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg);
  color: var(--fg-dim);
  border: 1px solid var(--border);
}

.badge.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.badge.good {
  background: var(--good);
  color: white;
  border-color: var(--good);
}

.badge.bad {
  background: var(--bad);
  color: white;
  border-color: var(--bad);
}

.badge.muted {
  background: var(--bg-alt);
  color: var(--fg-dim);
  border-color: var(--border);
}

.badge.info {
  background: var(--info);
  color: white;
  border-color: var(--info);
}

/* Responsive Design */
@media (max-width: 768px) {
  .strategy-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .strategy-filters {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .strategy-grid {
    grid-template-columns: 1fr;
  }

  .strategy-card-footer {
    flex-direction: column;
  }

  .strategy-card-footer .btn {
    width: 100%;
  }
}

/* ============================================================================
   Strategy Enhancements - Phase 2 & 3 UI Styles
   Ratings, Reviews, Usage Analytics, and Backtesting
   ============================================================================ */

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

/* Modal Container */
.modal {
  background: #1a1d2e !important;
  border: 1px solid #2d3142 !important;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 400px;
}

.modal-medium {
  width: 650px;
  max-height: 550px;
}

.modal-large {
  width: 700px;
}

.modal-xlarge {
  width: 1000px;
}

/* Modal Header */
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #2d3142;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1d2e;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff !important;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #ffffff !important;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.modal-close:hover {
  background: #2d3142;
}

/* Modal Body */
.modal-body {
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  background: #1a1d2e;
  color: #ffffff !important;
}

/* Modal Footer */
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #2d3142;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: #1a1d2e;
}

/* Rating Modal */
.rating-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.rating-modal .star-rating-section {
  grid-column: 1 / -1;
  text-align: center;
}

.rating-modal .review-section {
  grid-column: 1 / -1;
}

.rating-modal label {
  color: #ffffff !important;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}

.rating-modal textarea {
  padding: 12px;
  border: 1px solid #2d3142;
  border-radius: 6px;
  background: #0f1118 !important;
  color: #ffffff !important;
  font-size: 14px;
  font-family: inherit;
  min-height: 140px;
  max-height: 200px;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

.star-rating {
  display: inline-flex;
  gap: 16px;
  font-size: 52px;
  justify-content: center;
  margin: 12px 0 16px 0;
  line-height: 1;
}

.star-rating .star {
  cursor: pointer;
  color: #888;
  transition: color 0.15s, transform 0.15s;
  user-select: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

.star-rating .star::before {
  content: '★';
  font-family: Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}

.star-rating .star:hover {
  transform: scale(1.15);
  color: #FFD700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.star-rating .star.active {
  color: #FFD700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.rating-label {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff !important;
  margin: 0;
}

/* Rating Item in List */
.rating-item {
  padding: 16px;
  border: 1px solid #2d3142;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #0f1118 !important;
}

.rating-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.rating-stars {
  display: inline-flex;
  gap: 4px;
  font-size: 22px;
  line-height: 1;
  min-width: 150px;
}

.review-star {
  display: inline-block;
  color: #444;
  font-size: 22px;
  font-family: Arial, sans-serif;
  line-height: 1;
  user-select: none;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

.review-star::before {
  content: '★';
  font-style: normal;
  font-weight: normal;
}

.review-star.filled {
  color: #FFD700 !important;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.8);
}

.rating-author {
  font-weight: 500;
  color: #ffffff;
}

.rating-date {
  color: #888;
  font-size: 14px;
  margin-left: auto;
}

.rating-review {
  margin: 8px 0 0 0;
  color: #ffffff;
  line-height: 1.5;
}

/* Backtest Form */
.backtest-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: #ffffff !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #2d3142;
  border-radius: 6px;
  background: #0f1118 !important;
  color: #ffffff !important;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4a90e2;
}

.info-box {
  padding: 12px 16px;
  background: rgba(33, 150, 243, 0.1);
  border-left: 3px solid #2196F3;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff !important;
}

/* Backtest Results */
.backtest-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.result-metric {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg);
}

.metric-value.good {
  color: #4CAF50;
}

.metric-value.bad {
  color: #f44336;
}

/* Results Chart */
.results-chart {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.results-chart h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

#equityChart {
  width: 100%;
  height: auto;
}

/* Trades Table */
.results-trades {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.results-trades h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
}

.trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.trades-table th {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.trades-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}

.trades-table tbody tr:hover {
  background: var(--bg-alt);
}

.trades-table .good {
  color: #4CAF50;
  font-weight: 500;
}

.trades-table .bad {
  color: #f44336;
  font-weight: 500;
}

/* Rating Display on Strategy Cards */
.strategy-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
}

.strategy-rating-stars {
  color: #FFD700;
  font-family: Arial, sans-serif;
  line-height: 1;
  letter-spacing: 1px;
}

.strategy-rating-count {
  color: var(--muted);
}

.strategy-rating-avg {
  font-weight: 500;
  color: var(--fg);
}

/* Usage Stats Display */
.strategy-usage {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.usage-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.usage-stat-value {
  font-weight: 500;
  color: var(--fg);
}

/* Action Buttons on Cards */
.strategy-card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.strategy-card-footer button.btn-icon {
  padding: 8px 12px;
  font-size: 13px;
}

/* ============================================================================
   Strategy Details View (Phase 4)
   ============================================================================ */

.strategy-details {
  color: #ffffff;
  line-height: 1.6;
}

.details-header {
  background: #0f1118;
  border: 1px solid #2d3142;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.header-row {
  display: flex;
  gap: 24px;
  margin-bottom: 8px;
}

.header-row:last-child {
  margin-bottom: 0;
}

.header-item {
  flex: 1;
  color: #ffffff;
}

.header-item.full-width {
  flex-basis: 100%;
}

.header-item strong {
  color: #b3c0ff;
  margin-right: 8px;
}

.details-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #2d3142;
}

.details-section:last-of-type {
  border-bottom: none;
}

.details-section h4 {
  color: #b3c0ff;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

/* Rules Display */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rule-item {
  background: #0f1118;
  border: 1px solid #2d3142;
  border-radius: 6px;
  padding: 12px;
}

.rule-header {
  margin-bottom: 8px;
  color: #ffffff;
}

.rule-conditions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 16px;
}

.condition-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #e0e0e0;
}

.condition-indicator {
  background: #1e293b;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: #8ab4f8;
  font-size: 13px;
}

.condition-op {
  font-weight: 600;
  color: #fbbf24;
}

.condition-value {
  background: #1e293b;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: #10b981;
  font-size: 13px;
}

/* Risk Config Display */
.risk-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.risk-item {
  background: #0f1118;
  border: 1px solid #2d3142;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk-label {
  color: #b3c0ff;
  font-weight: 500;
}

.risk-value {
  color: #ffffff;
  font-weight: 600;
}

/* Performance Metrics Grid */
.performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.perf-metric {
  background: #0f1118;
  border: 1px solid #2d3142;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

.perf-label {
  color: #b3c0ff;
  font-size: 13px;
  margin-bottom: 8px;
}

.perf-value {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

/* Rating Summary in Details */
.rating-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0f1118;
  border: 1px solid #2d3142;
  border-radius: 6px;
  padding: 16px;
}

.rating-stars-large {
  font-size: 32px;
  color: #FFD700;
  line-height: 1;
}

.rating-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rating-stats strong {
  font-size: 24px;
  color: #ffffff;
}

.rating-stats .muted {
  font-size: 14px;
  color: #888;
}

/* Usage Stats Grid in Details */
.usage-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.usage-stat-item {
  background: #0f1118;
  border: 1px solid #2d3142;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

.usage-stat-label {
  color: #b3c0ff;
  font-size: 13px;
  margin-bottom: 8px;
}

.usage-stat-value {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
}

/* Metadata Footer */
.details-meta {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #2d3142;
  font-size: 13px;
  color: #888;
}

.meta-item {
  color: #888;
}

.meta-item strong {
  color: #10b981;
}

/* ============================================================================
   Light Theme Overrides for Modals and Strategy Details
   ============================================================================ */

/* Light Theme: Modal Components */
[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .modal {
  background: var(--elev-1) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .modal-header {
  background: var(--elev-1);
  border-bottom-color: var(--border);
}

[data-theme="light"] .modal-header h3 {
  color: var(--text) !important;
}

[data-theme="light"] .modal-close {
  color: var(--text) !important;
}

[data-theme="light"] .modal-close:hover {
  background: var(--ui-2h);
}

[data-theme="light"] .modal-body {
  background: var(--elev-1);
  color: var(--text) !important;
}

[data-theme="light"] .modal-footer {
  background: var(--elev-1);
  border-top-color: var(--border);
}

/* Light Theme: Rating Modal */
[data-theme="light"] .rating-modal label {
  color: var(--text) !important;
}

[data-theme="light"] .rating-modal textarea {
  background: var(--ui-2) !important;
  color: var(--text) !important;
  border-color: var(--border);
}

[data-theme="light"] .rating-label {
  color: var(--text) !important;
}

[data-theme="light"] .rating-item {
  background: var(--ui-2) !important;
  border-color: var(--border);
}

[data-theme="light"] .rating-author,
[data-theme="light"] .rating-date,
[data-theme="light"] .rating-review {
  color: var(--text);
}

/* Light Theme: Strategy Details */
[data-theme="light"] .strategy-details {
  color: var(--text);
}

[data-theme="light"] .details-header {
  background: var(--ui-2);
  border-color: var(--border);
}

[data-theme="light"] .header-item {
  color: var(--text);
}

[data-theme="light"] .header-item strong {
  color: var(--brand);
}

[data-theme="light"] .details-section {
  border-bottom-color: var(--border);
}

[data-theme="light"] .details-section h4 {
  color: var(--brand);
}

[data-theme="light"] .rule-item {
  background: var(--ui-2);
  border-color: var(--border);
}

[data-theme="light"] .rule-header {
  color: var(--text);
}

[data-theme="light"] .condition-item {
  color: var(--text);
}

[data-theme="light"] .condition-indicator {
  background: var(--ui-3);
  color: var(--brand);
}

[data-theme="light"] .condition-op {
  color: #d97706;
}

[data-theme="light"] .condition-value {
  background: var(--ui-3);
  color: #059669;
}

[data-theme="light"] .risk-item {
  background: var(--ui-2);
  border-color: var(--border);
}

[data-theme="light"] .risk-label {
  color: var(--brand);
}

[data-theme="light"] .risk-value {
  color: var(--text);
}

[data-theme="light"] .perf-metric {
  background: var(--ui-2);
  border-color: var(--border);
}

[data-theme="light"] .perf-label {
  color: var(--brand);
}

[data-theme="light"] .perf-value {
  color: var(--text);
}

[data-theme="light"] .rating-summary {
  background: var(--ui-2);
  border-color: var(--border);
}

[data-theme="light"] .rating-stats strong {
  color: var(--text);
}

[data-theme="light"] .rating-stats .muted {
  color: var(--muted);
}

[data-theme="light"] .usage-stat-item {
  background: var(--ui-2);
  border-color: var(--border);
}

[data-theme="light"] .usage-stat-label {
  color: var(--brand);
}

[data-theme="light"] .usage-stat-value {
  color: var(--text);
}

[data-theme="light"] .details-meta {
  border-top-color: var(--border);
  color: var(--muted);
}

[data-theme="light"] .meta-item {
  color: var(--muted);
}

[data-theme="light"] .meta-item strong {
  color: #059669;
}

/* Light Theme: Native Dialog Backdrop */
[data-theme="light"] dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* Dark Theme: Native Dialog Backdrop */
:root:not([data-theme="light"]) dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}