/* =========================================================
   Trarity Configurable Dashboard — Styles
   ========================================================= */

/* ── CSS Variables ── */
:root{
  --bg: #0c0e14;
  --surface: #0d1014;
  --surface2: #0a0b11;
  --surface3: rgb(22, 27, 36);
  --glass: rgba(13,16,20,.95);
  --glass2: rgba(13,16,20,.88);
  --ink: #e9eef6;
  --muted: #8b99ad;
  --line: rgba(255,255,255,.068);
  --line2: rgba(255,255,255,.055);
  --line-soft: rgba(255,255,255,.042);
  --good: #3b9b6a;
  --bad: #c75555;
  --warn: #f59e0b;
  --r: clamp(10px, 1.2vw, 14px);
  --r-lg: clamp(12px, 1.3vw, 18px);
  --pad: clamp(.6rem, 1.2vh, 1rem);
  --gutter: clamp(8px, 1.2vh, 14px);
  --fs-xs: clamp(.64rem, .7vw, .74rem);
  --fs-sm: clamp(.7rem, .78vw, .82rem);
  --fs-base: clamp(.8rem, .88vw, .92rem);

/* ── Card header tooltips ── */
[data-tooltip]{ cursor:help; }
.card-tooltip{
  position:fixed; z-index:9999;
  width:max(220px, min(320px, 40vw));
  padding:10px 14px; border-radius:10px;
  background:rgba(14,18,26,.96); border:1px solid rgba(118,158,230,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  color:#c8d4e6; font:500 12px/1.55 var(--font-sans);
  letter-spacing:0; text-transform:none;
  pointer-events:none;
  opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  white-space:normal;
}
.card-tooltip.is-visible{ opacity:1; transform:translateY(0); }
body.theme-light .card-tooltip{ background:rgba(255,255,255,.97); border-color:rgba(0,0,0,.12); color:#1e293b; box-shadow:0 12px 40px rgba(0,0,0,.14); }

/* ── Heatmap tooltip ── */
.heat-tooltip{ position:fixed; z-index:10000; pointer-events:none; padding:8px 10px; border-radius:10px;
  background:rgba(10,12,18,.92); color:rgba(226,232,240,.95); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35); font: 12px "Inter", ui-sans-serif; min-width:160px; display:none; }
.heat-tooltip .ht-title{ font-weight:700; margin-bottom:4px; letter-spacing:.2px; }
.heat-tooltip .ht-row{ display:flex; justify-content:space-between; gap:8px; line-height:1.35; }
body.theme-light .heat-tooltip{ background:#fff; color:#1e293b; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 22px rgba(0,0,0,.10); }

/* ── Equity tooltip ── */
.eq-tooltip{
  position:fixed; z-index:10000; display:none;
  min-width:200px; padding:10px 12px; border-radius:var(--r);
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--accentA) 12%, transparent); color:var(--ink);
  box-shadow:var(--shadow2);
  font: 700 12px/1.25 "Inter", ui-sans-serif;
  pointer-events:none;
}
.eq-tooltip .eqt-title{ font:800 14px/1.2 "Inter"; margin-bottom:4px; }
.eq-tooltip .eqt-sub{ font-weight:700; opacity:.95; }
body.theme-light .eq-tooltip{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(226,232,240,.8)); color:#0b162c; border-color:rgba(0,0,0,.08); }

/* ── Monte Carlo tooltip ── */
.mc-tooltip{
  position:fixed; z-index:10000; display:none;
  min-width:180px; padding:10px 12px; border-radius:10px;
  background:rgba(10,12,18,.92); color:rgba(226,232,240,.95); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35); font: 12px "Inter", ui-sans-serif;
  pointer-events:none;
}
.mc-tooltip .mct-title{ font-weight:700; margin-bottom:4px; letter-spacing:.2px; }
.mc-tooltip .mct-row{ display:flex; justify-content:space-between; gap:8px; line-height:1.35; }
body.theme-light .mc-tooltip{ background:#fff; color:#1e293b; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 22px rgba(0,0,0,.10); }

/* ── Histogram tooltip ── */
.hist-tooltip{ position:fixed; z-index:10000; pointer-events:none; padding:8px 10px; border-radius:10px;
  background:rgba(10,12,18,.92); color:rgba(226,232,240,.95); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35); font: 12px "Inter", ui-sans-serif; min-width:140px; display:none; }
.hist-tooltip .hst-title{ font-weight:700; margin-bottom:4px; letter-spacing:.2px; }
.hist-tooltip .hst-row{ display:flex; justify-content:space-between; gap:8px; line-height:1.35; }
body.theme-light .hist-tooltip{ background:#fff; color:#1e293b; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 22px rgba(0,0,0,.10); }

/* ── Risk trend tooltip ── */
.rt-tooltip{
  position:fixed; z-index:10000; display:none;
  min-width:190px; padding:10px 12px; border-radius:var(--r);
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--accentA) 12%, transparent); color:var(--ink);
  box-shadow:var(--shadow2);
  font: 700 12px/1.25 "Inter", ui-sans-serif;
  pointer-events:none;
}
.rt-tooltip .rtt-title{ font:800 14px/1.2 "Inter"; margin-bottom:4px; }
.rt-tooltip .rtt-row{ display:flex; justify-content:space-between; gap:8px; line-height:1.35; font-weight:500; }
body.theme-light .rt-tooltip{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(226,232,240,.8)); color:#0b162c; border-color:rgba(0,0,0,.08); }

/* ── Instrument tooltip ── */
.instr-tooltip{ position:fixed; z-index:10000; pointer-events:none; padding:10px 12px; border-radius:10px;
  background:rgba(10,12,18,.92); color:rgba(226,232,240,.95); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35); font: 12px "Inter", ui-sans-serif; min-width:160px; display:none; }
.instr-tooltip .it-title{ font:800 14px/1.2 "Inter"; margin-bottom:5px; }
.instr-tooltip .it-row{ display:flex; justify-content:space-between; gap:10px; line-height:1.4; }
body.theme-light .instr-tooltip{ background:#fff; color:#1e293b; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 22px rgba(0,0,0,.10); }

/* ── After-Market tooltip ── */
.am-tooltip{ position:fixed; z-index:10000; pointer-events:none; padding:10px 12px; border-radius:10px;
  background:rgba(10,12,18,.92); color:rgba(226,232,240,.95); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35); font: 12px "Inter", ui-sans-serif; min-width:170px; display:none; }
.am-tooltip .amt-title{ font:800 14px/1.2 "Inter"; margin-bottom:5px; }
.am-tooltip .amt-row{ display:flex; justify-content:space-between; gap:10px; line-height:1.4; }
body.theme-light .am-tooltip{ background:#fff; color:#1e293b; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 22px rgba(0,0,0,.10); }

.pes-tooltip{ position:fixed; z-index:10000; pointer-events:none; padding:10px 12px; border-radius:10px;
  background:rgba(10,12,18,.92); color:rgba(226,232,240,.95); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35); font: 12px "Inter", ui-sans-serif; min-width:180px; display:none; }
.pes-tooltip .pest-title{ font:800 13px/1.2 "Inter"; margin-bottom:5px; white-space:nowrap; }
.pes-tooltip .pest-row{ display:flex; justify-content:space-between; gap:10px; line-height:1.4; }
body.theme-light .pes-tooltip{ background:#fff; color:#1e293b; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 22px rgba(0,0,0,.10); }

/* ── After-Market Breakdown Table ── */
.card-am-breakdown{ min-height:auto; }
.card-am-breakdown .card-h{ margin-bottom:0; flex:0 0 auto; }
.am-breakdown-wrap{ padding:0 14px 10px; flex:1 1 auto; display:flex; flex-direction:column; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.am-breakdown-tbl{
  width:100%; min-width:480px; border-collapse:separate; border-spacing:0;
  font:600 13px/1.35 var(--font-sans);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden;
  flex:1 1 auto; display:table;
}
.am-breakdown-tbl thead th{
  font:800 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase;
  padding:14px 12px; text-align:center; border:none; white-space:nowrap;
}
.amb-col-label{ width:28%; min-width:120px; background:var(--surface); }
.amb-col-overall{ color:var(--accent-light); background:color-mix(in srgb, var(--accentA) 15%, transparent); }
.amb-col-profits{ color:#4ade80; background:rgba(34,197,94,.15); }
.amb-col-losses{ color:#f87171; background:rgba(239,68,68,.15); }
.amb-col-be{ color:#fbbf24; background:rgba(230,162,60,.15); }
.am-breakdown-tbl tbody td{
  padding:16px 12px; text-align:center;
  border-top:1px solid rgba(255,255,255,.06); color:var(--ink);
  font:800 16px/1.2 var(--font-sans); white-space:nowrap;
}
/* Column tint on data cells */
.am-breakdown-tbl tbody td:nth-child(2){ background:color-mix(in srgb, var(--accentA) 5%, transparent); }
.am-breakdown-tbl tbody td:nth-child(3){ background:rgba(34,197,94,.05); }
.am-breakdown-tbl tbody td:nth-child(4){ background:rgba(239,68,68,.05); }
.am-breakdown-tbl tbody td:nth-child(5){ background:rgba(230,162,60,.05); }
.am-breakdown-tbl tbody td.amb-metric{
  text-align:left; font:600 13px/1.3 var(--font-sans); color:var(--ink);
  border-left:3px solid color-mix(in srgb, var(--accentA) 35%, transparent); padding-left:14px;
  background:var(--surface);
}
.amb-metric__name{ display:block; font-weight:800; font-size:13px; }
.amb-metric__sub{ display:block; font:500 10px/1.2 var(--font-sans); color:var(--muted); margin-top:2px; }
.amb-info{ font-size:10px; width:16px; height:16px; min-width:16px; min-height:16px; padding:0; vertical-align:middle; margin-left:3px; }
.am-breakdown-tbl tbody tr:hover td:nth-child(2){ background:color-mix(in srgb, var(--accentA) 10%, transparent); }
.am-breakdown-tbl tbody tr:hover td:nth-child(3){ background:rgba(34,197,94,.10); }
.am-breakdown-tbl tbody tr:hover td:nth-child(4){ background:rgba(239,68,68,.10); }
.am-breakdown-tbl tbody tr:hover td:nth-child(5){ background:rgba(230,162,60,.10); }
/* In-cell comparison bars */
.am-breakdown-tbl tbody td[data-k^="amBk_eq_"],
.am-breakdown-tbl tbody td[data-k^="amBk_mfe_"],
.am-breakdown-tbl tbody td[data-k^="amBk_mae_"],
.am-breakdown-tbl tbody td[data-k^="amBk_nec_"]{
  position:relative; z-index:0; overflow:hidden;
}
.am-breakdown-tbl tbody td[data-k^="amBk_eq_"]::after,
.am-breakdown-tbl tbody td[data-k^="amBk_mfe_"]::after,
.am-breakdown-tbl tbody td[data-k^="amBk_mae_"]::after,
.am-breakdown-tbl tbody td[data-k^="amBk_nec_"]::after{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  height:60%; border-radius:4px;
  width:var(--amb-bar-w, 0%);
  max-width:calc(100% - 12px);
  background:rgba(255,255,255,.06); z-index:-1;
  transition:width .35s ease;
}
/* Share row — lighter text */
.amb-row--light td:not(.amb-metric){ font:700 13px/1.2 var(--font-sans); color:var(--muted); }
/* NEC colour classes */
.amb-nec--pos{ color:var(--good); }
.amb-nec--neg{ color:var(--bad); }
.amb-nec--neutral{ color:var(--muted); }
/* Interpretation row */
.amb-row--interp td:not(.amb-metric){
  font:700 11px/1.2 var(--font-sans); letter-spacing:.02em;
  color:var(--muted); text-transform:none;
}
.amb-interp--good{ color:var(--good); }
.amb-interp--bad{ color:var(--bad); }
.amb-interp--neutral{ color:var(--muted); }
.am-breakdown-note{ font:500 11px/1.4 var(--font-sans); color:var(--muted); opacity:.6; margin-top:8px; text-align:center; flex:0 0 auto; }
/* Light theme */
body.theme-light .am-breakdown-tbl{ border-color:rgba(0,0,0,.08); }
body.theme-light .am-breakdown-tbl tbody td{ border-top-color:rgba(0,0,0,.06); }
body.theme-light .amb-col-overall{ background:color-mix(in srgb, var(--accentA) 10%, transparent); }
body.theme-light .amb-col-profits{ background:rgba(34,197,94,.10); }
body.theme-light .amb-col-losses{ background:rgba(239,68,68,.10); }
body.theme-light .amb-col-be{ background:rgba(230,162,60,.10); }
body.theme-light .am-breakdown-tbl tbody td:nth-child(2){ background:color-mix(in srgb, var(--accentA) 3%, transparent); }
body.theme-light .am-breakdown-tbl tbody td:nth-child(3){ background:rgba(34,197,94,.03); }
body.theme-light .am-breakdown-tbl tbody td:nth-child(4){ background:rgba(239,68,68,.03); }
body.theme-light .am-breakdown-tbl tbody td:nth-child(5){ background:rgba(230,162,60,.03); }
body.theme-light .am-breakdown-tbl tbody td.amb-metric{ border-left-color:color-mix(in srgb, var(--accentA) 25%, transparent); background:var(--surface); }
body.theme-light .am-breakdown-tbl tbody tr:hover td:nth-child(2){ background:color-mix(in srgb, var(--accentA) 7%, transparent); }
body.theme-light .am-breakdown-tbl tbody tr:hover td:nth-child(3){ background:rgba(34,197,94,.07); }
body.theme-light .am-breakdown-tbl tbody tr:hover td:nth-child(4){ background:rgba(239,68,68,.07); }
body.theme-light .am-breakdown-tbl tbody tr:hover td:nth-child(5){ background:rgba(230,162,60,.07); }

/* ── What-If Scenarios Table ── */
/* ── What-If Scenarios Table (reuses am-breakdown-tbl) ── */
.am-whatif-n{ font-weight:500; opacity:.5; }
.card-whatif-scenarios .am-breakdown-tbl tbody td.good{ color:var(--good); }
.card-whatif-scenarios .am-breakdown-tbl tbody td.bad{ color:var(--bad); }

/* Scenario tier badges */
.wif-badge{
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:6px;
  font:700 10px/1.2 var(--font-sans); letter-spacing:.04em;
  vertical-align:middle;
}
.wif-badge--low{ background:color-mix(in srgb, var(--accentA) 15%, transparent); color:var(--accent-light); }
.wif-badge--mid{ background:rgba(34,197,94,.15); color:#4ade80; }
.wif-badge--high{ background:rgba(250,204,21,.18); color:#fbbf24; }

/* Value cells with inline bars */
.wif-val{ position:relative; overflow:hidden; }
.wif-bar{
  position:absolute; left:4px; top:50%; transform:translateY(-50%);
  height:60%; border-radius:4px; z-index:0;
  transition:width .4s ease;
}
.wif-num{ position:relative; z-index:1; }

/* Gross rows: slightly taller, bolder */
.wif-gross td:not(.amb-metric){ font:900 17px/1.2 var(--font-sans); }

/* Net rows: subdued, smaller */
.wif-net td:not(.amb-metric){ font:600 13px/1.2 var(--font-sans); opacity:.75; }

/* Separator between scenario pairs */
.wif-sep td{ border-top:2px solid color-mix(in srgb, var(--accentA) 12%, transparent) !important; }

/* Best value highlight */
.wif-best{
  box-shadow:inset 0 0 18px rgba(34,197,94,.08);
}
.wif-best .wif-num{ text-shadow:0 0 12px rgba(34,197,94,.25); }

/* Light theme overrides */
body.theme-light .wif-badge--low{ background:color-mix(in srgb, var(--accentA) 10%, transparent); color:#3b82c5; }
body.theme-light .wif-badge--mid{ background:rgba(34,197,94,.10); color:#16a34a; }
body.theme-light .wif-badge--high{ background:rgba(250,204,21,.12); color:#ca8a04; }
body.theme-light .wif-sep td{ border-top-color:rgba(0,0,0,.08) !important; }

/* New chart canvases */


/* Opp-Prot interpretation footer (uses chart-metrics boxes) */
.card-opp-prot.card--chart{ grid-template-rows:var(--card-head-h) 1fr auto; }
.opp-prot-hint{ font-size:11px; font-weight:600; color:var(--muted); white-space:normal; line-height:1.4; }
.card-whatif-scenarios{ min-height:auto; }
.card-whatif-scenarios .card-h{ margin-bottom:0; flex:0 0 auto; }

/* Responsive: compact table text at narrower widths */
@media (max-width:1099px){
  .am-breakdown-tbl{ font-size:12px; }
  .am-breakdown-tbl thead th{ padding:10px 8px; font-size:10px; }
  .am-breakdown-tbl tbody td{ padding:12px 8px; font-size:14px; }
  .amb-metric__name{ font-size:12px; }
}
@media (max-width:640px){
  .am-breakdown-tbl{ min-width:420px; }
  .am-breakdown-tbl thead th{ padding:8px 6px; font-size:9px; }
  .am-breakdown-tbl tbody td{ padding:10px 6px; font-size:13px; }
}

  --shadow1: 0 4px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.25);
  --shadow2: 0 12px 48px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.30);
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --card-r: var(--r);
  --chip-r: 999px;
  /* Card internal heights — match trade-analysis page */
  --chart-canvas-h: 300px;
  --card-head-h: 46px;
  --metrics-h: 84px;
  color-scheme: dark;
}

/* ── Base reset ── */
*,*::before,*::after{ box-sizing:border-box; }
html{ height:auto; min-height:100%; }
html,body{ font-family:var(--font-sans); font-feature-settings:"tnum" on,"lnum" on; }
body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100dvh;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* ── Ambient background ── */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -5%, color-mix(in srgb, var(--accentA) 9%, transparent), transparent 55%),
    radial-gradient(800px 500px at 80% 105%, rgba(107,143,170,.06), transparent 55%),
    radial-gradient(500px 300px at 60% 30%, color-mix(in srgb, var(--accentA) 3%, transparent), transparent 60%);
  z-index:0;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.010) 0 1px, transparent 1px 42px);
  z-index:0;
}

/* ── #app container pushed by sidebar ── */
#app{
  position:relative; z-index:5;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding: 0 clamp(12px,1.5vw,24px) clamp(12px,1.5vw,24px);
  transition: margin-left .4s ease, width .4s ease;
}

/* ── Topbar ── */
.ta-topbar-left{ transform:translateY(var(--topbar-offset-y, 5px)); }
.ta-topbar-right{ max-width:100%; }

@media (max-width:768px){
  #app{ padding-top: 56px; }
}
@media (max-width:640px){
  .ta-topbar{ flex-direction:column; align-items:flex-end; gap:10px; }
  .ta-topbar-right{ flex-wrap:wrap; justify-content:flex-end; }
}

/* ── KPI summary row ── */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(6px, 1vh, 12px);
  margin:clamp(8px, 1.2vh, 14px) 0 clamp(4px, 0.8vh, 10px);
}
.kpi-row > *{ width:100%; min-width:0; }

.summary-card{
  position:relative;
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  align-items:center; gap:2px clamp(8px, 1vw, 14px);
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(8px, 1.2vh, 16px) clamp(10px, 1vw, 18px);
  box-shadow:var(--shadow1);
  transition: box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.summary-card:hover{
  box-shadow:var(--shadow2);
}
.summary-card .sc-label{
  grid-column:1; grid-row:1;
  font:700 clamp(.66rem, .75vw, .78rem)/1 var(--font-sans);
  color:var(--muted);
  letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px;
}
.summary-card .sc-value{
  grid-column:1; grid-row:2;
  font:900 clamp(16px, 1.6vw, 24px)/1.15 var(--font-sans);
  color:var(--ink);
  letter-spacing:-.01em;
  margin-top:1px;
}
.summary-card .sc-value b{ font-weight:900; color:var(--ink); }
.summary-card .sc-value .sc-sym{ font-weight:800; color:var(--muted); margin-right:1px; }
.summary-card .sc-cv{
  grid-column:2; grid-row:1 / span 2;
  width:clamp(80px, 8vw, 110px);
  aspect-ratio:1.7 / 1;
  display:block;
}
.summary-card .kpi-inline-counts{ font-size:var(--fs-xs); color:var(--muted); font-weight:600; }

/* BE settings popup (on WR card) */
.be-settings-btn{ background:none; border:none; cursor:pointer; opacity:.55; font-size:13px; color:var(--muted); padding:2px; }
.be-settings-btn:hover{ opacity:1; color:var(--ink); transform:rotate(30deg); }
.summary-card--wr{ position:relative; }
.be-settings-popup{
  position:absolute; top:100%; right:0; z-index:50;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accentA) 20%, transparent);
  border-radius:var(--r); padding:14px; min-width:220px;
  box-shadow:var(--shadow2);
}
.be-settings-popup[hidden]{ display:none; }
.be-settings-label{ font:700 var(--fs-xs)/1.2 var(--font-sans); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:6px; }
.be-settings-hint{ font-weight:600; opacity:.7; }
.be-settings-row{ display:flex; gap:6px; align-items:center; }
.be-settings-input{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 10px; color:var(--ink); font-weight:700; width:60px; text-align:center; }
.be-settings-input:focus{ outline:none; border-color:color-mix(in srgb, var(--accentA) 50%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accentA) 10%, transparent); }
.be-settings-save{ background:linear-gradient(135deg,var(--accentA),color-mix(in srgb, var(--accentA) 70%, transparent)); color:#fff; border:none; border-radius:8px; padding:6px 14px; font-weight:700; cursor:pointer; font-size:12px; }
.be-settings-save:hover{ transform:translateY(-1px); box-shadow:0 8px 24px color-mix(in srgb, var(--accentA) 28%, transparent); }
.be-settings-desc{ font:500 10px/1.3 var(--font-sans); color:var(--muted); margin-top:8px; }

/* ── Cards grid ── */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-flow:dense;
  grid-auto-rows:auto;
  gap:var(--gutter);
  margin-top:var(--gutter);
  flex:1 1 auto;
  min-height:0;
  align-items:stretch;
}
.cards-grid > *{ max-width:100%; min-height:0; min-width:0; }
.cards-grid > .card{ min-height:0; }
/* Wide cards span 2 columns */
.cards-grid > .card--wide{ grid-column: span 2; }

/* Medium: 2 columns (1100–1799px, normal aspect ratio) */
@media (max-aspect-ratio: 5/2) and (min-width:1100px) and (max-width:1799px){
  .cards-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cards-grid > .card--wide{ grid-column: span 2; }
}
/* Narrow: 1 column (<1100px) */
@media (max-aspect-ratio: 5/2) and (max-width:1099px){
  .cards-grid{ grid-template-columns:minmax(0, 1fr); }
  .cards-grid > .card--chart{ height:auto; min-height:0; grid-template-rows:auto auto auto; }
  .cards-grid > .card--wide{ grid-column: span 1; }
}

/* ── Card base ── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--pad);
  box-shadow:var(--shadow1);
  transition: box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; min-height:0;
}
.card:hover{ box-shadow:var(--shadow2); }
.card--chart{
  display:grid;
  grid-template-rows:var(--card-head-h) 1fr var(--metrics-h);
  gap:8px 0;
  min-height:0;
  overflow:hidden;
  padding-bottom:8px;
}

/* 1080p/compact screens: smaller canvas */
@media (max-width:1600px){
  :root{ --chart-canvas-h: clamp(260px, 28vh, 340px); }
  .card{ padding:12px; }
}

/* Ultrawide 4×2 layout (aspect >= 5/2 and wide enough) */
@media (min-aspect-ratio: 5/2) and (min-width:1600px){
  .cards-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-auto-rows:auto;
    align-items:stretch;
  }
  .cards-grid > .card--wide{ grid-column: span 2; }
  .cards-grid > .card{
    min-height:0;
  }
  .card--chart{
    grid-template-rows:var(--card-head-h) 1fr var(--metrics-h);
    overflow:hidden;
  }
  .cv-equity, .cv-hist, .cv-heat, .cv-mc, .cv-score, .cv-time, .cv-duration, .cv-risk-trend, .cv-instruments, .cv-after-market, .cv-opp-prot, .cv-post-exit-scatter, .cv-tpsl-curve{
    height:clamp(320px, 32vh, 390px) !important;
    max-height:460px !important;
    width:100%; display:block;
  }
  .card-table .tbl-scroller{
    min-height:clamp(320px, 32vh, 390px);
  }
  .chart-metrics{
    height:var(--metrics-h);
    min-height:var(--metrics-h);
    max-height:var(--metrics-h);
    overflow:hidden;
  }
  .chart-metric__label{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%; line-height:1.15; font-size:11px;
  }
  .chart-metric__value{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%; line-height:1.1;
  }
}

.card-h{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  height:var(--card-head-h); min-height:var(--card-head-h);
  margin-bottom:0;
}
.card-h h3{ margin:0; font:900 14px/1.2 var(--font-sans); letter-spacing:.02em; color:var(--ink); margin-right:auto; }
.card-h.tight{ margin-bottom:4px; }

/* Legend pills */
.legend{ display:flex; gap:10px; align-items:center; }
.lg{ display:inline-flex; align-items:center; gap:5px; font:600 10px/1 var(--font-sans); color:var(--muted); letter-spacing:.04em; }
.lg-hist::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--accentA); }
.lg-dur::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accentA); }
.lg-heat::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--good); }

/* Risk Trend legend toggles */
.rt-legend{ display:flex; gap:4px; align-items:center; }
.rt-layer-btn{
  cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.04);
  padding:3px 8px; border-radius:6px; transition:all .2s;
  display:inline-flex; align-items:center; gap:4px;
  font:600 10px/1 var(--font-sans); color:var(--muted); letter-spacing:.04em;
}
.rt-layer-btn:not(.active){ opacity:.35; border-color:transparent; background:none; }
.rt-layer-btn:not(.active):hover{ opacity:.7; background:rgba(255,255,255,.03); }
.rt-layer-btn.active{ opacity:1; border-color:rgba(148,163,184,.25); background:rgba(255,255,255,.06); }
.rt-layer-btn.active:hover{ background:rgba(255,255,255,.1); }
.lg-swatch{ display:inline-block; width:10px; height:3px; border-radius:2px; vertical-align:middle; }
.lg-swatch--dot{ width:7px; height:7px; border-radius:50%; }
.lg-swatch--line{ height:2.5px; }

/* Chart canvas */
.cv-equity, .cv-hist, .cv-heat, .cv-mc, .cv-score, .cv-time, .cv-duration, .cv-risk-trend, .cv-instruments, .cv-after-market, .cv-opp-prot, .cv-post-exit-scatter, .cv-tpsl-curve{
  width:100%;
  height:100%;
  min-height:var(--chart-canvas-h);
  display:block;
  border-radius:var(--r);
  background:var(--surface2);
  border:1px solid var(--line-soft);
}
.card canvas{ width:100%; display:block; }

/* Chart metrics footer */
.chart-metrics{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin-top:0;
  height:var(--metrics-h); min-height:var(--metrics-h); max-height:var(--metrics-h);
  background:var(--surface2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.chart-metrics--two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.chart-metric{
  background:transparent; border:none; border-radius:0;
  min-width:0; padding:10px 16px; text-align:center;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:2px; min-height:0; height:auto; position:relative;
  transition:background .2s ease;
}
.chart-metric + .chart-metric{ border-left:1px solid var(--line); }
.chart-metric:hover{ background:color-mix(in srgb, var(--accentA) 4%, transparent); }
.chart-metric__label{
  font:700 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.chart-metric__value{
  font:800 clamp(14px,1.4vw,18px)/1.2 var(--font-sans);
  color:var(--ink); margin-top:2px;
}
.chart-metric__value.good{ color:var(--good); }
.chart-metric__value.bad{ color:var(--bad); }
.chart-metric__sub{
  font:600 clamp(11px,1vw,13px)/1.2 var(--font-sans);
  color:var(--muted); margin-top:2px;
}

/* Info popovers */
.info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--muted); font:700 9px/1 var(--font-sans);
  cursor:pointer; padding:0; flex-shrink:0;
}
.info-btn:hover{ background:rgba(255,255,255,.10); color:var(--ink); }
.summary-card .kpi-info-btn{
  position:absolute; top:8px; right:8px; z-index:5;
}
.info-pop{
  position:absolute; z-index:60;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accentA) 20%, transparent);
  border-radius:var(--r); padding:12px; max-width:260px;
  box-shadow:var(--shadow2);
}
.info-pop[hidden]{ display:none; }
.info-pop__title{ font:800 12px/1.2 var(--font-sans); color:var(--ink); margin-bottom:4px; }
.info-pop__body{ font:500 11px/1.4 var(--font-sans); color:var(--muted); }
.info-pop.info-pop--floating{
  position:fixed !important;
  top:0; left:0; right:auto;
  z-index:12000 !important;
  width:min(320px, calc(100vw - 24px));
}

/* Score card extras */
.score-footer{ margin-top:8px; }
.score-labels{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.score-main{ display:flex; align-items:baseline; gap:8px; }
.score-title{ font:800 var(--fs-xs)/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.score-value{ font:900 28px/1 var(--font-sans); color:var(--ink); }
.score-scale{ font:700 var(--fs-xs)/1 var(--font-sans); color:var(--muted); opacity:.6; }
.score-bar-wrap{ margin-top:4px; }
.score-bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.06); position:relative; overflow:hidden; }
.score-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--bad),#e6a23c,var(--good)); width:27%; transition:width .5s ease; }
.score-bar-marker{ position:absolute; top:-2px; width:3px; height:14px; background:#fff; border-radius:999px; left:27%; transition:left .5s ease; }
.score-bar-axis{ display:flex; justify-content:space-between; font:600 9px/1 var(--font-sans); color:var(--muted); opacity:.5; margin-top:3px; }

/* All Trades table card — flex column so scroller fills available space */
.card-table{
  display:flex; flex-direction:column;
  overflow:hidden;
  padding-bottom:8px;
}
.card-table .card-h{ flex:0 0 auto; }
.card-table .tbl-scroller{
  flex:1 1 0;
  min-height:var(--chart-canvas-h);
  overflow:auto;
  border-radius:var(--r);
  background:var(--surface2);
  border:1px solid var(--line-soft);
}
.card-table .chart-metrics{ flex:0 0 auto; margin-top:8px; }
.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.tbl thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface); color:var(--muted);
  font:700 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing:.06em; text-transform:uppercase;
  padding:8px 10px; text-align:left; border-bottom:1px solid var(--line);
}
.tbl td{ padding:6px 10px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.tbl td.good{ color:var(--good); }
.tbl td.bad{ color:var(--bad); }
.tbl tbody tr:hover{ background:rgba(255,255,255,.03); }

/* PnL-sign KPI coloring */
.sc-value.pnl-pos b{ color:var(--good); }
.sc-value.pnl-neg b{ color:var(--bad); }
.sc-value.pnl-pos .sc-sym{ color:var(--good); }
.sc-value.pnl-neg .sc-sym{ color:var(--bad); }

/* Day-streak KPI */
.summary-card--streak{
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto auto;
}
.summary-card--streak .sc-sub{
  font-size:var(--fs-xs); color:var(--muted); font-weight:600; margin-top:2px;
  grid-column:1 / -1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.summary-card--streak .sc-cv{
  grid-row:1 / 3;
}
.summary-card--streak.streak--win .sc-value b{ color:var(--good); }
.summary-card--streak.streak--win .sc-value .sc-sym{ color:var(--good); }
.summary-card--streak.streak--loss .sc-value b{ color:var(--bad); }
.summary-card--streak.streak--loss .sc-value .sc-sym{ color:var(--bad); }
.summary-card--streak.streak--neutral .sc-value b{ color:var(--muted); }

/* Avg Win/Loss KPI */
.summary-card--avgwl{
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto auto;
}
.summary-card--avgwl .sc-sub{
  font-size:var(--fs-xs); color:var(--muted); font-weight:600; margin-top:2px;
  grid-column:1 / -1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.summary-card--avgwl .sc-cv{
  grid-row:1 / 3;
}

/* ── PnL Calendar card ── */
.card-calendar{ display:flex; flex-direction:column; min-height:calc(var(--card-head-h) + var(--chart-canvas-h) + var(--metrics-h)); }
.card-calendar .card-h{ flex:0 0 auto; }
.card-calendar .cal-grid{ flex:1 1 auto; min-height:0; overflow:hidden; padding:4px 0; display:flex; flex-direction:column; }

.cal-controls{ display:flex; align-items:center; gap:4px; }
.cal-title{ font:800 16px/1 var(--font-sans); color:var(--ink); min-width:140px; text-align:center; flex:0 0 auto; }
.cal-prev, .cal-next{ min-width:30px; min-height:30px; padding:0; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; color:var(--muted); transition:all .15s; }
.cal-prev:hover, .cal-next:hover{ color:var(--ink); border-color:rgba(255,255,255,.15) !important; background:rgba(255,255,255,.06) !important; }
.cal-today{ font:700 11px/1 var(--font-sans); letter-spacing:.02em; padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.1) !important; background:rgba(255,255,255,.03) !important; color:var(--muted); cursor:pointer; transition:all .15s; margin-left:4px; }
.cal-today:hover{ color:var(--ink); border-color:rgba(255,255,255,.18) !important; background:rgba(255,255,255,.06) !important; }

/* Right controls: view toggle + stats */
.cal-right-controls{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.cal-view-toggle{ display:flex; border-radius:8px; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.cal-view-btn{ font:700 11px/1 var(--font-sans); padding:6px 16px; border:none !important; border-radius:0 !important; background:transparent !important; color:var(--muted); cursor:pointer; transition:all .15s; letter-spacing:.02em; }
.cal-view-btn:hover{ color:var(--ink); background:rgba(255,255,255,.04) !important; }
.cal-view-btn.active{ color:var(--ink); background:rgba(255,255,255,.08) !important; }

.cal-stats{ display:flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.08); font:800 13px/1 var(--font-sans); color:var(--muted); }
.cal-stats__pnl{ font-weight:900; font-size:14px; }
.cal-stats__pnl.good{ color:var(--good); }
.cal-stats__pnl.bad{ color:var(--bad); }
.cal-stats__sep{ opacity:.35; font-size:10px; }

/* Month view — 8 columns: 7 days + weekly summary */
.cal-month-grid{ display:grid; grid-template-columns:repeat(7, 1fr) minmax(70px, 0.6fr); gap:3px; flex:1 1 auto; }
.cal-day-header{ text-align:center; font:800 10px/1 var(--font-sans); color:var(--muted); padding:6px 0; letter-spacing:.06em; text-transform:uppercase; }
.cal-day{
  display:flex; flex-direction:column; align-items:flex-start;
  border-radius:6px; border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.02);
  padding:6px 8px 4px; gap:1px; cursor:pointer; transition:background .15s, border-color .15s;
  position:relative; min-height:0; overflow:hidden;
}
.cal-day:hover{ border-color:rgba(160,180,220,.3); background:rgba(255,255,255,.04); }
.cal-day.cal-day--empty{ border-color:transparent; background:transparent; pointer-events:none; }
.cal-day.cal-day--today{ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accentA) 60%, transparent); }
.cal-day.cal-day--pos{ background:rgba(0,110,50,.55); border-color:rgba(34,197,94,.25); }
.cal-day.cal-day--neg{ background:rgba(130,20,20,.55); border-color:rgba(239,68,68,.25); }
.cal-day.cal-day--zero{ background:rgba(255,255,255,.04); }
.cal-day__num{ font:700 10px/1 var(--font-sans); color:rgba(255,255,255,.45); margin-bottom:2px; }
.cal-day__pnl{ font:900 15px/1.1 var(--font-sans); white-space:nowrap; color:#fff; }
.cal-day__detail{ font:600 10px/1.2 var(--font-sans); color:rgba(255,255,255,.5); white-space:nowrap; }
.cal-day__spark{ display:block; width:100%; height:22px; margin-top:auto; pointer-events:none; flex-shrink:0; }

/* Weekly summary cell */
.cal-week{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:6px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05);
  padding:6px 4px; gap:3px;
}
.cal-week__label{ font:800 10px/1 var(--font-sans); color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.cal-week__pnl{ font:900 14px/1 var(--font-sans); white-space:nowrap; }
.cal-week__pnl.good{ color:var(--good); }
.cal-week__pnl.bad{ color:var(--bad); }
.cal-week__pnl.neutral{ color:var(--muted); }
.cal-week__days{ font:600 9px/1 var(--font-sans); color:var(--muted); opacity:.65; }

/* Year view — 4×3 month grid */
.cal-year-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 1fr); gap:4px; flex:1 1 auto; }
.cal-month{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid rgba(255,255,255,.04); background:rgba(255,255,255,.02);
  padding:10px 6px; gap:3px; cursor:pointer; transition:background .15s, border-color .15s;
}
.cal-month:hover{ filter:brightness(1.1); border-color:rgba(160,180,220,.35); }
.cal-month.cal-month--pos{ background:rgba(0,110,50,.45); border-color:rgba(34,197,94,.2); }
.cal-month.cal-month--neg{ background:rgba(130,20,20,.45); border-color:rgba(239,68,68,.2); }
.cal-month.cal-month--zero{ background:rgba(255,255,255,.04); }
.cal-month__name{ font:800 12px/1 var(--font-sans); color:rgba(255,255,255,.6); }
.cal-month__pnl{ font:900 16px/1 var(--font-sans); white-space:nowrap; color:#fff; }
.cal-month__trades{ font:600 10px/1 var(--font-sans); color:rgba(255,255,255,.45); }

/* Light theme calendar */
body.theme-light .cal-day{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
body.theme-light .cal-day:hover{ background:rgba(0,0,0,.04); }
body.theme-light .cal-day.cal-day--pos{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.25); }
body.theme-light .cal-day.cal-day--neg{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.25); }
body.theme-light .cal-day__num{ color:rgba(0,0,0,.4); }
body.theme-light .cal-day__pnl{ color:#0b162c; }
body.theme-light .cal-day__detail{ color:rgba(0,0,0,.45); }
body.theme-light .cal-month{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
body.theme-light .cal-month:hover{ background:rgba(0,0,0,.04); }
body.theme-light .cal-month.cal-month--pos{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.2); }
body.theme-light .cal-month.cal-month--neg{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.2); }
body.theme-light .cal-month__name{ color:rgba(0,0,0,.5); }
body.theme-light .cal-month__pnl{ color:#0b162c; }
body.theme-light .cal-week{ background:rgba(0,0,0,.02); }

/* Calendar trade popup */
.cal-popup-overlay{ position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; animation:calFadeIn .15s ease; }
.cal-popup-overlay[hidden]{ display:none !important; }
@keyframes calFadeIn{ from{opacity:0;} to{opacity:1;} }
.cal-popup{ background:var(--surface, rgba(18,20,24,1)); border:1px solid rgba(118,158,230,.28); border-radius:16px; padding:0; width:min(720px, 95vw); max-height:min(620px, 85vh); display:flex; flex-direction:column; box-shadow:0 28px 72px rgba(8,16,35,.50); animation:calPopIn .18s ease-out; overflow:hidden; }
@keyframes calPopIn{ from{opacity:0; transform:translateY(-8px) scale(.97);} to{opacity:1; transform:none;} }
.cal-popup__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--line-soft); flex:0 0 auto; }
.cal-popup__title{ font:900 15px/1.2 var(--font-sans); color:var(--ink); }
.cal-popup__subtitle{ font:600 11px/1 var(--font-sans); color:var(--muted); margin-top:2px; }
.cal-popup__close{ background:transparent; border:1px solid var(--line); color:var(--ink); width:28px; height:28px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; padding:0; flex:0 0 auto; }
.cal-popup__close:hover{ border-color:color-mix(in srgb, var(--accentA) 55%, transparent); background:rgba(255,255,255,.06); }
.cal-popup__chart{ flex:0 0 auto; padding:8px 12px 0; }
.cal-popup__chart[hidden]{ display:none; }
.cal-popup__canvas{ width:100%; height:90px; display:block; border-radius:8px; background:rgba(255,255,255,.02); }
body.theme-light .cal-popup__canvas{ background:rgba(0,0,0,.02); }
.cal-popup__body{ flex:1 1 auto; overflow-y:auto; padding:4px 0; scrollbar-width:thin; scrollbar-color:rgba(200,210,255,.5) transparent; }
.cal-popup__empty{ text-align:center; color:var(--muted); padding:24px 0; font:600 13px/1.4 var(--font-sans); }
.cal-popup__trade{ display:grid; grid-template-columns:72px 54px 44px 48px 72px 165px 64px 1fr; gap:6px; align-items:center; padding:7px 8px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:background .12s, border-color .12s; text-decoration:none; color:inherit; }
.cal-popup__trade:hover{ background:color-mix(in srgb, var(--accentA) 8%, transparent); border-color:color-mix(in srgb, var(--accentA) 20%, transparent); }
.cal-popup__trade-date{ font:700 10px/1 var(--font-sans); color:var(--muted); white-space:nowrap; }
.cal-popup__trade-time{ font:700 10px/1 var(--font-sans); color:var(--muted); }
.cal-popup__trade-sym{ font:800 11px/1 var(--font-sans); color:var(--ink); }
.cal-popup__trade-side{ font:700 10px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.06em; }
.cal-popup__trade-side.long{ color:var(--good); }
.cal-popup__trade-side.short{ color:var(--bad); }
.cal-popup__trade-pnl{ font:800 11px/1 var(--font-sans); text-align:right; }
.cal-popup__trade-pnl.good{ color:var(--good); }
.cal-popup__trade-pnl.bad{ color:var(--bad); }
.cal-popup__trade-dur{ font:600 10px/1 var(--font-sans); color:var(--muted); text-align:right; }
.cal-popup__trade-acct{ font:600 9px/1 var(--font-sans); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-popup__spark{ width:100%; height:28px; display:block; border-radius:4px; background:rgba(255,255,255,.03); }
body.theme-light .cal-popup__spark{ background:rgba(0,0,0,.03); }

/* Column headers (fixed above scroll) */
.cal-popup__colheader{ display:grid; grid-template-columns:72px 54px 44px 48px 72px 165px 64px 1fr; gap:6px; padding:6px 9px 4px; font:800 9px/1 var(--font-sans); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line-soft); flex:0 0 auto; }
.cal-popup__header-r{ text-align:right; }

/* Stats footer (fixed at bottom, outside scroll) */
.cal-popup__footer{ flex:0 0 auto; border-top:1px solid var(--line-soft); }
.cal-popup__stats{ display:flex; flex-wrap:wrap; gap:12px; padding:10px 12px 8px; font:700 11px/1 var(--font-sans); }
.cal-popup__stat{ display:flex; gap:4px; align-items:center; }
.cal-popup__stat span:first-child{ color:var(--muted); }
.cal-popup__stat .good{ color:var(--good); }
.cal-popup__stat .bad{ color:var(--bad); }

.cal-popup__total{ display:flex; justify-content:space-between; align-items:center; padding:10px 8px 4px; border-top:1px solid var(--line-soft); margin-top:4px; font:800 12px/1 var(--font-sans); }
.cal-popup__total-label{ color:var(--muted); }
.cal-popup__total-value.good{ color:var(--good); }
.cal-popup__total-value.bad{ color:var(--bad); }

/* Light theme popup */
body.theme-light .cal-popup{ background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 28px 72px rgba(0,0,0,.18); }
body.theme-light .cal-popup__trade:hover{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }

/* ── Row containers ── */
.db-row{
  display:contents;
}

/* ── Empty slot (placeholder for adding new items) ── */
.db-empty-slot{
  border:2px dashed color-mix(in srgb, var(--accentA) 30%, transparent);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  min-height:60px; cursor:pointer;
  color:var(--accentA); font:700 13px/1.2 var(--font-sans);
  letter-spacing:.03em;
  background:transparent;
  transition:border-color .2s, background .2s, color .2s;
}
.db-empty-slot:hover{
  border-color:color-mix(in srgb, var(--accentA) 55%, transparent);
  background:color-mix(in srgb, var(--accentA) 6%, transparent);
  color:#7eb8ee;
}
.db-empty-slot--card{ min-height:200px; }

/* ── Edit-mode wrapper around each item ── */
.db-edit-item--wide{ grid-column: span 2; }
.db-edit-item--tall{ grid-row: span 2; }
.db-edit-item--tall > .card{ max-height:100%; overflow:hidden; }
@media (max-aspect-ratio: 5/2) and (max-width:1099px){ .db-edit-item--wide{ grid-column: span 1; } }
.db-edit-item{
  position:relative;
  border:2px dashed rgba(160,180,220,.25);
  border-radius:var(--r);
  transition:border-color .2s, opacity .2s;
  cursor:grab;
}
.db-edit-item:hover{ border-color:rgba(160,180,220,.45); }
.db-edit-item.is-dragging{
  opacity:.4; cursor:grabbing;
  border-color:var(--accentA);
  border-style:solid;
  background:color-mix(in srgb, var(--accentA) 8%, transparent);
}

/* Nested card/summary-card should not double the borders */
.db-edit-item > .card,
.db-edit-item > .summary-card{
  border:none; box-shadow:none;
}

/* ── Remove button (floating X on top-right of each item) ── */
.db-remove-btn{
  position:absolute; top:-10px; right:-10px; z-index:20;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid rgba(160,180,220,.35);
  background:var(--glass);
  color:var(--muted); font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, color .15s, transform .12s;
  padding:0;
}
.db-remove-btn .material-symbols-rounded{ font-size:16px; }
.db-remove-btn:hover{
  background:rgba(199,85,85,.18);
  border-color:rgba(199,85,85,.55);
  color:var(--bad);
  transform:scale(1.1);
}

/* ── Edit toolbar (floats at top when editing) ── */
.edit-toolbar{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding:10px 24px;
  background:var(--glass);
  border-bottom:1px solid rgba(120,160,255,.12);
  backdrop-filter:blur(10px);
  transform:translateY(-100%);
  transition:transform .3s ease;
  pointer-events:none;
}
.edit-toolbar.is-visible{
  transform:translateY(0);
  pointer-events:auto;
}
.edit-toolbar__btn{
  padding:8px 20px; border-radius:8px;
  font:700 12px/1 var(--font-sans);
  letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; border:none;
  transition:background .15s, box-shadow .15s, transform .12s;
}
.edit-toolbar__btn--cancel{
  background:rgba(255,255,255,.06);
  color:var(--muted);
  border:1px solid var(--line);
}
.edit-toolbar__btn--cancel:hover{
  background:rgba(255,255,255,.10);
  color:var(--ink);
}
.edit-toolbar__btn--save{
  background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 80%, transparent));
  color:#fff;
  box-shadow:0 4px 16px color-mix(in srgb, var(--accentA) 25%, transparent);
}
.edit-toolbar__btn--save:hover{
  box-shadow:0 8px 28px color-mix(in srgb, var(--accentA) 35%, transparent);
  transform:translateY(-1px);
}

/* Push #app down when toolbar is visible */
body.is-dashboard-editing #app{
  padding-top:56px;
}

/* ── Widget picker modal ── */
.widget-picker{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.widget-picker.is-open{
  opacity:1; pointer-events:auto;
}
.widget-picker__backdrop{
  position:absolute; inset:0;
  background:rgba(12,14,20,.65);
  backdrop-filter:blur(4px);
}
.widget-picker__panel{
  position:relative; z-index:1;
  width:min(480px, 90vw); max-height:70vh;
  background:linear-gradient(180deg, rgba(13,16,20,.97), rgba(10,11,17,.99));
  border:1px solid rgba(120,160,255,.18);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.widget-picker__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.widget-picker__head h3{
  margin:0; font:900 16px/1.2 var(--font-sans);
  color:var(--ink); letter-spacing:.02em;
}
.widget-picker__close{
  width:28px; height:28px; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--muted); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.widget-picker__close:hover{ background:rgba(255,255,255,.08); color:var(--ink); }

.widget-picker__body{
  flex:1 1 auto; overflow-y:auto; padding:12px 16px;
  display:flex; flex-direction:column; gap:6px;
}

.widget-picker__option{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px;
  border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  cursor:pointer; width:100%;
  font:600 13px/1.2 var(--font-sans); color:var(--ink);
  transition:background .12s, border-color .12s;
  text-align:left;
}
.widget-picker__option:hover:not(.is-added){
  background:color-mix(in srgb, var(--accentA) 10%, transparent);
  border-color:color-mix(in srgb, var(--accentA) 35%, transparent);
}
.widget-picker__option.is-added{
  opacity:.4; cursor:default;
}
.widget-picker__option-text{ flex:1; display:flex; flex-direction:column; gap:3px; }
.widget-picker__option-label{ font:600 13px/1.2 var(--font-sans); }
.widget-picker__option-desc{
  font:400 11px/1.4 var(--font-sans); color:var(--muted); display:block;
}
.widget-picker__option-badge{
  font:700 10px/1 var(--font-sans);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.06);
  padding:4px 8px; border-radius:6px;
}

/* ── Light theme adjustments ── */
body.theme-light .db-edit-item{ border-color:rgba(0,0,0,.15); }
body.theme-light .db-edit-item:hover{ border-color:rgba(0,0,0,.25); }
body.theme-light .db-remove-btn{
  background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.15); color:#64748b;
}
body.theme-light .db-remove-btn:hover{
  background:rgba(199,85,85,.12); border-color:rgba(199,85,85,.4); color:var(--bad);
}
body.theme-light .edit-toolbar{
  background:rgba(241,245,249,.95); border-bottom-color:rgba(0,0,0,.08);
}
body.theme-light .edit-toolbar__btn--cancel{
  background:rgba(0,0,0,.04); color:#475569; border-color:rgba(0,0,0,.1);
}
body.theme-light .widget-picker__panel{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,249,.99));
  border-color:rgba(0,0,0,.12);
}
body.theme-light .widget-picker__option{
  background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06);
}
body.theme-light .db-empty-slot{
  border-color:rgba(0,0,0,.15); color:#475569;
}
body.theme-light .db-empty-slot:hover{
  border-color:color-mix(in srgb, var(--accentA) 40%, transparent); background:color-mix(in srgb, var(--accentA) 5%, transparent);
}

/* Buttons */
.btn{
  height:36px; padding:0 16px; border-radius:8px;
  border:1px solid var(--line);
  font:600 var(--fs-sm)/1 var(--font-sans);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  color:var(--muted); background:rgba(255,255,255,.02);
  transition:all .18s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--accentA) 25%, transparent); background:color-mix(in srgb, var(--accentA) 5%, transparent); color:var(--ink); }
.btn--solid{
  border:none; background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 70%, transparent));
  color:#fff; font-weight:700; box-shadow:0 4px 14px color-mix(in srgb, var(--accentA) 18%, transparent);
}
.btn--solid:hover{ box-shadow:0 8px 24px color-mix(in srgb, var(--accentA) 28%, transparent); background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 85%, transparent)); }
.btn--ghost{ background:rgba(255,255,255,.03); color:var(--ink); }
.btn--sm{ min-height:28px; padding:6px 10px; font-size:var(--fs-xs); border-radius:8px; }
.instr-mode-btn{ font-size:11px; font-weight:700; letter-spacing:.04em; width:62px; text-align:center; opacity:.45; transition:opacity .15s, background .15s; box-sizing:border-box; }
.instr-mode-btn.active{ opacity:1; background:color-mix(in srgb, var(--accentA) 18%, transparent); }
.instr-mode-btn:hover{ opacity:.8; }
.btn--danger{ color:var(--bad); border-color:rgba(199,85,85,.25); }
.btn--danger:hover{ background:rgba(199,85,85,.08); border-color:rgba(199,85,85,.45); }

/* ── Light theme ── */
body.theme-light{
  --bg:#f1f5f9; --surface:rgba(255,255,255,.85); --surface2:rgba(255,255,255,.75);
  --glass:rgba(255,255,255,.85); --glass2:rgba(255,255,255,.75);
  --ink:#0b162c; --muted:#475569;
  --line:rgba(0,0,0,.08); --line-soft:rgba(0,0,0,.04);
}
body.theme-light .summary-card{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(226,232,240,.80));
  border-color:rgba(0,0,0,.08); color:#0b162c;
}
body.theme-light .summary-card:hover{ box-shadow:var(--shadow2); }
body.theme-light .card{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.75));
  border-color:rgba(0,0,0,.08); color:#0b162c;
}
body.theme-light .chart-metrics{
  background:rgba(241,245,249,.9); border-color:rgba(0,0,0,.06); color:#0b162c;
}
body.theme-light .chart-metric + .chart-metric{ border-color:rgba(0,0,0,.06); }
body.theme-light .tbl thead th{ background:rgba(255,255,255,.92); color:#334155; }
body.theme-light .tbl th, body.theme-light .tbl td{ color:#0b162c; border-bottom:1px solid rgba(0,0,0,.06); }
body.theme-light .tbl tbody tr:hover{ background:rgba(0,0,0,.035); }
body.theme-light .cv-equity, body.theme-light .cv-hist, body.theme-light .cv-heat, body.theme-light .cv-mc{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.75));
  border-color:rgba(0,0,0,.08);
}

/* ── Dark theme explicit ── */
body.theme-dark{
  --glass:rgba(13,16,20,.95); --glass2:rgba(13,16,20,.88);
  --line:rgba(255,255,255,.068); --line-soft:rgba(255,255,255,.042);
  --muted:#8b99ad;
}

/* ══ Filter modal ══════════════════════════════════════ */
.filters-overlay{
  position:fixed; top:0; right:0; bottom:auto; left:auto;
  width:auto; height:auto; background:transparent; backdrop-filter:none;
  z-index:4100; display:block; padding:0; pointer-events:none;
}
.filters-overlay[hidden]{ display:none !important; }
.filters-modal{
  position:fixed; top:66px; right:18px;
  width:min(780px, 96vw); max-height:clamp(680px, 80vh, 1000px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(18,20,24,1), rgba(14,16,20,1));
  border:1px solid rgba(118,158,230,.28); border-radius:20px;
  padding:24px 26px 26px;
  box-shadow:0 28px 72px rgba(8,16,35,.50), inset 0 1px 0 rgba(255,255,255,.04);
  font-size:14px; line-height:1.55; pointer-events:auto;
  animation:filterPop .18s ease-out;
}
@keyframes filterPop{ from{opacity:0; transform:translateY(-8px) scale(.97);} to{opacity:1; transform:none;} }

/* Scrollbar */
.filters-modal{ scrollbar-width:thin; scrollbar-color:rgba(200,210,255,.75) transparent; }
.filters-modal::-webkit-scrollbar{ width:8px; }
.filters-modal::-webkit-scrollbar-track{ background:radial-gradient(circle at 30% 0, rgba(148,163,255,.08), rgba(15,23,42,0)); border-radius:999px; }
.filters-modal::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(210,220,255,.45)); border-radius:999px; box-shadow:0 0 0 1px rgba(15,23,42,.95), 0 0 12px rgba(148,163,255,.45); }
.filters-modal::-webkit-scrollbar-thumb:hover{ box-shadow:0 0 0 1px rgba(15,23,42,.95), 0 0 18px rgba(148,163,255,.7); }

.filters-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.filters-head h4{ margin:0; font:900 18px/1.2 var(--font-sans); color:var(--ink); }
.filters-head-actions{ display:flex; align-items:center; gap:8px; }
.filters-reset{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  height:32px; padding:0 12px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  font:700 12px/1 var(--font-sans); transition:border-color .15s, color .15s;
}
.filters-reset:hover{ border-color:color-mix(in srgb, var(--accentA) 55%, transparent); color:var(--ink); }
.filters-x{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  width:32px; height:32px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  font-size:16px; padding:0;
}
.filters-x:hover{ border-color:color-mix(in srgb, var(--accentA) 55%, transparent); }
.filters-x:focus-visible{ outline:2px solid color-mix(in srgb, var(--accentA) 70%, transparent); outline-offset:3px; }
.filters-body{
  overflow:auto; padding:6px 4px 12px; max-height:calc(80vh - 180px);
}
.filters-body{ scrollbar-width:thin; scrollbar-color:rgba(200,210,255,.75) transparent; }
.filters-body::-webkit-scrollbar{ width:8px; }
.filters-body::-webkit-scrollbar-track{ background:radial-gradient(circle at 30% 0, rgba(148,163,255,.08), rgba(15,23,42,0)); border-radius:999px; }
.filters-body::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(210,220,255,.45)); border-radius:999px; box-shadow:0 0 0 1px rgba(15,23,42,.95), 0 0 12px rgba(148,163,255,.45); }

/* Filter card & toolbar layout */
.filter-card{ position:static; top:auto; box-shadow:none; background:transparent; border:none; padding:0; }
.toolbar.card{ overflow:hidden; padding-right:12px; }
.toolgrid-stack{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--gutter, 12px); align-items:start; }
@media (max-width:720px){ .toolgrid-stack{ grid-template-columns:1fr; } .tf-rail{ border-right:none; padding-right:0; } }

/* Timeframe rail — vertical chip column on the left */
.tf-rail{ border-right:1px solid var(--line-soft); padding-right:12px; }
.tf-rail .chipset{ display:flex; flex-direction:column; gap:6px; }
.tf-rail .chip{
  padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:#fff; font-weight:900; cursor:pointer;
  width:100%; text-align:center; font-size:12px;
}
.tf-rail .chip.is-active{
  background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 70%, transparent));
  color:#fff; border-color:color-mix(in srgb, var(--accentA) 40%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accentA) 18%, transparent);
}
.tf-rail .chip:hover{ background:rgba(255,255,255,.10); }
.tf-rail .chip.is-active:hover{ background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 80%, transparent)); }

/* Tool stack — right column of filter groups */
.tool-stack{ display:flex; flex-direction:column; gap:10px; }

/* Filter groups */
.fg{ background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:12px; position:relative; }
.fg + .fg{ margin-top:8px; }
.fg-h{ display:grid; grid-template-columns:74px 1fr auto; gap:10px; align-items:start; padding:8px 6px; }
.fg-title{ font:800 13px/1 var(--font-sans); color:#d7e6ff; width:74px; flex-shrink:0; padding-top:6px; }
.fg-body{ padding:8px 10px; border-top:1px dashed var(--line-soft); }
.fg-meta{ display:none; }

.fg-inline{ display:flex; gap:6px; flex-wrap:wrap; overflow-x:hidden; overflow-y:auto; justify-content:flex-start; max-height:108px; align-content:flex-start; scrollbar-width:thin; scrollbar-color:rgba(120,140,170,.45) rgba(8,12,20,.25); overflow:visible; padding-left:4px; }
.fg-inline::-webkit-scrollbar{ width:6px; }
.fg-inline::-webkit-scrollbar-thumb{ background:rgba(120,140,170,.45); border-radius:999px; }
.fg-inline::-webkit-scrollbar-track{ background:rgba(8,12,20,.25); border-radius:999px; }
.fg-inline--scroll{ overflow-x:hidden; overflow-y:auto; flex-wrap:wrap; max-height:108px; padding-right:6px; }

.fg-inline .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:12px; min-width:unset; max-width:unset; width:auto;
  border-radius:10px; background:rgba(255,255,255,.06); border:1px solid var(--line);
  font-weight:900; color:inherit; white-space:nowrap; justify-content:center; flex-shrink:0;
  cursor:pointer; background-clip:padding-box; padding-left:12px;
}
.fg-inline .chip.is-active{ background:rgba(218,211,211,.308); color:inherit; border-color:rgba(255,255,255,.18); }
.fg-inline .chip:hover{ background:rgba(255,255,255,.10); }
.fg-inline .chip--rating{ color:#f5c842; letter-spacing:.1em; font-size:11px; }
.fg-inline .chip--rating.is-active{ background:rgba(245,200,66,.18); border-color:rgba(245,200,66,.4); }

/* Setup criteria (Entry / Exit rows) */
.crit-ui{ display:flex; flex-direction:column; gap:8px; }
.crit-row{ display:grid; grid-template-columns:74px 1fr; gap:8px; align-items:center; }
.crit-lab{ font:800 13px/1 var(--font-sans); color:var(--muted); width:74px; }
.chipset--scroll{ display:flex; gap:6px; flex-wrap:wrap; overflow-x:hidden; overflow-y:auto; max-height:108px; align-content:flex-start; scrollbar-width:thin; scrollbar-color:rgba(120,140,170,.45) rgba(8,12,20,.25); }
.chipset--scroll::-webkit-scrollbar{ width:6px; }
.chipset--scroll::-webkit-scrollbar-thumb{ background:rgba(120,140,170,.45); border-radius:999px; }
.chipset--scroll::-webkit-scrollbar-track{ background:rgba(8,12,20,.25); border-radius:999px; }
.chipset--scroll .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  font-weight:900; color:inherit; white-space:nowrap; cursor:pointer;
}
.chipset--scroll .chip.is-active{ background:rgba(218,211,211,.308); border-color:rgba(255,255,255,.18); }
.chipset--scroll .chip:hover{ background:rgba(255,255,255,.10); }

/* Date inputs */
.g-date{ display:grid; grid-template-columns:74px max-content 74px max-content; gap:8px; align-items:center; }
.g-date .datewrap{ width:160px; justify-self:start; }
.g-date .lab-to{ justify-self:end; }
.group .lab{ color:#c8d4ea; font-weight:900; letter-spacing:.01em; font-size:13px; }
.g-compact .lab{ font-size:12px; }
.datewrap{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:0 12px; height:44px; }
.datewrap svg{ opacity:.8; }
.filters-modal input[type="date"]{ background:transparent; color:var(--ink); border:none; height:32px; font:700 14px/1 var(--font-sans); outline:none; width:100%; }
::-webkit-calendar-picker-indicator{ filter:invert(0.85); }

/* Segmented controls */
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg-item{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:6px 11px; min-height:36px; border-radius:12px; font:600 12px/1.2 var(--font-sans); color:var(--ink); box-sizing:border-box; cursor:pointer; background-clip:padding-box; padding-left:12px; }
.seg-item--xs{ padding:5px 10px; font-size:12px; }
.seg-item input{ margin:0; accent-color:var(--accentA) !important; }
.seg-item input:checked + span{ color:inherit; }
.fg-inline .seg{ gap:6px; flex-wrap:nowrap; }

/* Hour range slider */
.g-hours{ display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto auto; gap:4px 12px; align-items:start; }
.g-hours .lab{ grid-row:1 / span 3; align-self:center; }
.g-hours .range-wrap{ grid-column:2; grid-row:1; margin-top:2px; justify-self:start; position:relative; height:28px; width:100%; padding:0 12px 0 6px; box-sizing:border-box; }
.g-hours .range-wrap::before{ content:""; position:absolute; top:-8px; bottom:-8px; left:6px; right:14px; border-radius:999px; background:rgba(9,15,28,.4); border:1px solid rgba(118,158,230,.18); box-shadow:0 6px 18px rgba(4,8,16,.45); pointer-events:none; }
.g-hours input[type=range]{ position:absolute; left:6px; right:14px; top:50%; transform:translateY(-50%); -webkit-appearance:none; appearance:none; height:10px; margin:0; background:transparent; pointer-events:auto; z-index:3; -webkit-tap-highlight-color:transparent; touch-action:none; }
.g-hours .hr-start{ z-index:4; }
.g-hours .hr-end{ z-index:3; }
.g-hours input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:40%; background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 70%, transparent)); border:1.4px solid rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(10,18,34,.45); cursor:pointer; transition:transform .12s ease; }
.g-hours input[type=range]::-moz-range-thumb{ width:12px; height:12px; border-radius:40%; background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 70%, transparent)); border:1.4px solid rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(10,18,34,.45); cursor:pointer; transition:transform .12s ease; }
.g-hours input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.1); }
.g-hours input[type=range]::-moz-range-thumb:active{ transform:scale(1.1); }
.g-hours input[type=range]::-webkit-slider-runnable-track{ height:10px; background:transparent; }
.g-hours input[type=range]::-moz-range-track{ height:10px; background:transparent; }
.range-track{ position:absolute; left:6px; right:14px; height:10px; top:50%; transform:translateY(-50%); border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.range-fill{ position:absolute; left:6px; width:0; height:10px; top:50%; transform:translateY(-50%); border-radius:999px; background:linear-gradient(90deg, var(--accentA), color-mix(in srgb, var(--accentA) 60%, transparent)); box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 6px 12px color-mix(in srgb, var(--accentA) 25%, transparent); z-index:2; pointer-events:none; }

.g-hours .hr-val{ grid-column:2; grid-row:2; justify-self:start; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:#e8f1ff; font-weight:700; font-size:12px; width:100%; margin:6px 0 0; padding:0 12px 0 6px; box-sizing:border-box; }
.hr-pill{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(12,22,40,.52); border:1px solid rgba(138,180,246,.22); border-radius:999px; padding:6px 12px; position:relative; box-shadow:0 4px 16px rgba(6,10,22,.24), inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .15s ease, background .15s ease; width:100%; }
.hr-pill:hover{ background:rgba(16,28,50,.62); border-color:rgba(145,190,255,.35); }
.hr-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accentA); box-shadow:0 0 6px color-mix(in srgb, var(--accentA) 45%, transparent); opacity:.9; flex-shrink:0; margin-right:8px; }
.hr-pill-label{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(158,186,233,.9); flex:1; text-align:left; opacity:.92; }
.hr-pill-value{ font-size:13px; font-weight:700; color:#f5f8ff; margin-right:4px; }
.hr-pill input[type=number]{ width:64px; height:30px; background:rgba(14,24,40,.92); border:1px solid rgba(154,196,255,.3); border-radius:8px; color:#f1f6ff; font-weight:700; font-size:14px; letter-spacing:.03em; text-align:center; appearance:textfield; -moz-appearance:textfield; transition:border-color .15s ease, box-shadow .15s ease; }
.hr-pill input[type=number]:focus-visible{ border-color:rgba(99,179,237,.7); box-shadow:0 0 0 2px rgba(99,179,237,.18); }
.hr-pill input[type=number]::-webkit-outer-spin-button,
.hr-pill input[type=number]::-webkit-inner-spin-button{ margin:0; -webkit-appearance:none; }
.hr-divider{ display:flex; align-items:center; justify-content:center; color:rgba(183,201,231,.5); font-weight:600; font-size:12px; line-height:1; min-width:16px; height:100%; }
.g-hours .range-ticks{ grid-column:2; grid-row:3; justify-self:start; display:flex; justify-content:space-between; font-size:11px; color:var(--muted); letter-spacing:.05em; font-weight:700; width:100%; margin:4px 0 0; padding:0 12px 0 6px; box-sizing:border-box; }
.range-ticks span{ position:relative; }
.range-ticks span::after{ content:""; position:absolute; top:-6px; left:50%; width:1px; height:5px; background:rgba(255,255,255,.12); }
.range-ticks span.is-active{ color:var(--ink); }
.range-ticks span.is-active::after{ background:linear-gradient(180deg, var(--accentA), var(--accentB, var(--accentA))); }

/* Invisible drag-target overlays for hour slider thumbs */
.thumb-catcher{ position:absolute; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; background:transparent; cursor:ew-resize; z-index:6; pointer-events:auto; }
.thumb-catcher--end{ z-index:6; }

/* ── Light theme filter overrides ── */
body.theme-light .filters-modal{ background:linear-gradient(180deg, rgba(255,255,255,1), rgba(240,243,248,1)); border-color:rgba(0,0,0,.10); box-shadow:0 28px 72px rgba(0,0,0,.15); }
body.theme-light .filter-card{ background:transparent; }
body.theme-light .fg{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
body.theme-light .fg-title{ color:#334155; }
body.theme-light .datewrap{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10); }
body.theme-light .filters-modal input[type="date"]{ color:#0b162c; }
body.theme-light .seg-item{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10); color:#0b162c; }
body.theme-light .fg-inline .chip{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10); color:#0b162c; }
body.theme-light .fg-inline .chip.is-active{ background:rgba(0,0,0,.10); border-color:rgba(0,0,0,.18); }
body.theme-light .tf-rail .chip{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10); color:#0b162c; }
body.theme-light .tf-rail .chip.is-active{ background:linear-gradient(135deg, var(--accentA), rgba(56,130,220,.85)); color:#fff; }

/* ══ Optimize modal ══════════════════════════════════════ */
.opt-overlay[hidden]{ display:none !important; }
.opt-overlay{ position:fixed; top:0; right:0; bottom:auto; left:auto; background:transparent; z-index:4100; padding:0; pointer-events:none; }
.opt-modal{ pointer-events:auto; }
.opt-card{ overflow:visible !important; padding:0; background:transparent; border:none; }
.opt-help{ background:transparent; border:1px solid var(--line); color:var(--ink); width:32px; height:32px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; }
.opt-help:hover{ background:rgba(255,255,255,.06); }
.opt-close{ background:transparent; border:1px solid var(--line); color:var(--ink); width:32px; height:32px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; }
.opt-close:hover{ border-color:color-mix(in srgb, var(--accentA) 55%, transparent); }

/* Optimize layout */
.opt-group{ display:flex; flex-direction:column; gap:8px; }
.opt-lab{ font:800 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.opt-radio-set{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.opt-radio{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:8px 14px; min-height:36px; border-radius:12px; font:600 13px/1.2 var(--font-sans); color:var(--ink); cursor:pointer; box-sizing:border-box; }
.opt-radio input{ margin:0; accent-color:var(--accentA); }

/* Weight sliders */
.opt-weight-row{ display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center; font:600 12px/1.2 var(--font-sans); color:var(--ink); }
.opt-weight-row label{ font-weight:700; letter-spacing:.04em; }
.opt-weight-hint{ font:500 11px/1.3 var(--font-sans); color:var(--muted); margin-top:4px; }
.opt-weights input[type=range]{ width:100%; }
.opt-info{ font-size:14px; cursor:pointer; opacity:.7; }
.opt-info:hover{ opacity:1; }
.opt-info-pop{ position:fixed; z-index:5200; max-width:240px; padding:10px 12px; border-radius:12px; background:#0f1829; border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 42px rgba(0,0,0,.55); color:var(--ink); font:600 12px/1.45 var(--font-sans); letter-spacing:.01em; animation:optInfoPop .16s ease; }
.opt-info-pop h5{ margin:0 0 6px; font:800 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@keyframes optInfoPop{ from{transform:translateY(4px); opacity:0;} to{transform:translateY(0); opacity:1;} }

/* Limit scope */
.opt-selects{ background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:16px; padding:14px 16px; }
.opt-select-grid{ display:flex; flex-direction:column; gap:2px; }
.opt-select-block{ display:grid; grid-template-columns:180px 1fr; align-items:center; gap:2px; min-width:0; }
.opt-select-title{ font:700 12px/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:#c8d4ea; }
.opt-chipset{ display:flex; flex-wrap:wrap; gap:6px; max-height:168px; overflow:auto; scrollbar-width:thin; }
.opt-chipset .chip{ background:rgba(255,255,255,.06); border:1px solid var(--line); padding:4px 8px; font-size:11px; font-weight:700; cursor:pointer; flex:0 0 auto; display:inline-flex; align-items:center; width:auto; white-space:nowrap; border-radius:10px; }
.opt-chipset .chip.is-sel{ background:linear-gradient(135deg, var(--accentA), color-mix(in srgb, var(--accentA) 70%, transparent)); color:#fff; border-color:color-mix(in srgb, var(--accentA) 40%, transparent); }
.opt-chipset .chip[hidden]{ display:none !important; }
.opt-select-hint{ margin-top:10px; font:600 11px/1.4 var(--font-sans); color:#8fa7ce; }
.opt-select-tools{ display:flex; gap:8px; align-items:center; justify-content:space-between; margin-top:-2px; }
.opt-select-actions{ display:flex; gap:8px; align-items:center; }
.opt-select-actions button{ background:transparent; border:1px solid transparent; color:var(--muted); font:800 10px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; cursor:pointer; padding:6px 8px; border-radius:8px; }
.opt-select-actions button:hover{ color:var(--muted); background:rgba(255,255,255,.06); border-color:var(--line); }
.opt-select-search{ flex:1; display:flex; justify-content:flex-end; }
.opt-select-search input{ width:180px; max-width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:6px 8px; color:var(--ink); font:600 12px/1.2 var(--font-sans); }
@media (max-width:560px){ .opt-select-block{grid-template-columns:1fr;} .opt-select-tools{flex-direction:column; align-items:stretch;} .opt-select-search{justify-content:stretch;} }

/* Results */
.opt-results{ display:flex; flex-direction:column; flex-wrap:wrap; gap:6px; font:600 12px/1.4 var(--font-sans); color:var(--ink); }
.opt-results-empty{ opacity:.6; font-style:italic; }
.opt-results-row{ display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:flex-start; }
.opt-results-row b{ font-weight:800; color:var(--ink); }
.opt-results-row span{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; }

/* Actions bar */
.filters-actions{ display:flex; justify-content:flex-end; gap:10px; padding-top:10px; margin-top:4px; border-top:1px solid var(--line-soft); }
.filters-actions .btn{ height:auto; min-height:0; padding:.5rem 1.1rem; border-radius:.5rem; background:linear-gradient(180deg, rgba(30,38,52,.9), rgba(24,32,44,.9)); border:1px solid var(--line); font:800 .92rem/1 var(--font-sans); color:var(--ink); cursor:pointer; }
.filters-actions .btn:hover{ background:linear-gradient(180deg, rgba(38,48,65,.95), rgba(30,40,55,.95)); transform:translateY(-1px); }
.filters-actions .btn.btn--line{ border:1px dashed var(--line); }

/* Light theme */
body.theme-light .opt-info-pop{ background:#fff; color:#0b162c; border-color:rgba(0,0,0,.12); }

/* ── Loading overlay ── */
.loading-overlay{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
}
.loading-overlay[hidden]{ display:none !important; }

/* ── Responsive ── */
@media (max-width:1100px){
  .kpi-row{ grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); }
}
@media (max-width:640px){
  .kpi-row{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .summary-card{ padding:12px 14px; }
  .summary-card .sc-cv{ width:min(110px, 28vw); aspect-ratio:1.7 / 1; }
  .summary-card .sc-value{ font-size:18px; }
  .tpsl-panels{ grid-template-columns:1fr; }
}
@media (max-height:1080px){
  .cv-equity, .cv-hist, .cv-heat, .cv-mc, .cv-tpsl-curve{ min-height:300px; height:auto; max-height:none; }
}

/* ===== Account Modal ===== */
.account-overlay[hidden]{ display:none !important; }
.account-overlay{
  --acct-col-bal: 170px;
  --acct-col-pnl: 170px;
  --acct-col-wr:  88px;
  --acct-col-pf:  78px;
  --acct-col-tr:  90px;
  position:fixed; top:0; right:0; bottom:auto; left:auto;
  width:auto; height:auto;
  background:transparent; backdrop-filter:none;
  z-index:4100; display:block; padding:0; pointer-events:none;
}
.account-overlay .csv-modal{
  position:fixed; top:66px; right:18px;
  width:min(980px,96vw); max-height:calc(100vh - 82px);
  display:flex; flex-direction:column;
  font-size:13px; line-height:1.45;
  background:linear-gradient(180deg, rgba(18,20,24,1), rgba(14,16,20,1));
  border:1px solid rgba(118,158,230,.28);
  border-radius:20px;
  padding:24px 26px 26px;
  box-shadow:0 28px 72px rgba(8,16,35,.50), inset 0 1px 0 rgba(255,255,255,.04);
  pointer-events:auto;
  animation:coachPop .18s ease-out;
}
.account-overlay .csv-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.account-overlay .csv-head h4{ margin:0; font:900 20px/1.2 "Inter",ui-sans-serif; }
.account-overlay .csv-x{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  width:32px; height:32px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  line-height:1; font-size:16px; padding:0;
}
.account-overlay .csv-box{
  background:transparent; border:none; box-shadow:none;
  padding:0; border-radius:0; flex:1 1 auto;
  overflow-y:auto; min-height:0; margin-bottom:12px;
}
.account-overlay .csv-help-title{ font-weight:900; color:var(--muted); margin-bottom:8px; }
.account-overlay .csv-actions{
  flex:0 0 auto; display:flex; justify-content:flex-end; gap:12px; margin-top:12px;
  border-top:1px solid var(--line-soft); padding-top:10px;
}
.account-overlay .csv-actions .btn{
  height:auto; min-height:0; padding:.5rem 1.1rem; border-radius:.5rem;
  background:linear-gradient(180deg, rgba(30,38,52,.9), rgba(24,32,44,.9));
  border:1px solid var(--line); font:800 .92rem/1 "Inter",ui-sans-serif; color:var(--ink);
}
.account-overlay .csv-actions .btn:hover{
  background:linear-gradient(180deg, rgba(38,48,65,.95), rgba(30,40,55,.95));
  transform:translateY(-1px);
}
.account-overlay .csv-actions .btn.btn--line{
  background:linear-gradient(180deg, rgba(30,38,52,.9), rgba(24,32,44,.9));
  border:1px dashed var(--line);
}
.account-overlay .csv-actions .acct-mask-balance{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:136px; white-space:nowrap;
}
/* Account chips grid */
.account-overlay .acct-chips{ display:grid; gap:4px; }
.account-overlay .acct-section-label{
  padding:12px 0 4px 2px;
  font:700 10px/1 "Inter",ui-sans-serif;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
}
.account-overlay .acct-row{
  display:grid;
  grid-template-columns: 1fr var(--acct-col-bal) var(--acct-col-pnl) var(--acct-col-wr) var(--acct-col-pf) var(--acct-col-tr);
  gap:10px; align-items:center;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--ink); cursor:pointer;
}
.account-overlay .acct-row:hover{ background:rgba(255,255,255,.06); }
.account-overlay .acct-row.is-active{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accentA) 14%, transparent), rgba(70,120,180,.08));
  border-color:color-mix(in srgb, var(--accentA) 40%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accentA) 15%, transparent), 0 6px 18px rgba(8,16,35,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.account-overlay .acct-row.is-active .acct-name{ color:rgba(130,180,230,1); }
.account-overlay .acct-name{
  font:900 13px/1.2 "Inter",ui-sans-serif;
  letter-spacing:.02em; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-overlay .acct-kpi{
  display:inline-flex; align-items:center; justify-content:space-between;
  width:100%; gap:6px; padding:5px 8px; height:22px;
  border-radius:999px; font:800 11px/1 "Inter",ui-sans-serif;
  letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04); color:var(--muted);
  box-sizing:border-box; overflow:hidden;
}
.account-overlay .acct-kpi .lab{ opacity:.8; font-weight:800; white-space:nowrap; }
.account-overlay .acct-kpi .val{
  font-weight:900; font-size:11px; text-align:right;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1;
  white-space:nowrap;
}
.account-overlay .acct-kpi.acct-bal.is-masked .val{
  font-size:16px; line-height:1; letter-spacing:.12em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  display:inline-block; vertical-align:middle;
}
.account-overlay .acct-kpi.good{ color:#cfeedd; border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.06); }
.account-overlay .acct-kpi.bad{ color:#f2d0d0; border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06); }

/* ── Upgrade overlay (filters + optimize) ─────────────── */
.filters-upgrade-overlay{
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; min-height:340px;
}
.filters-upgrade-overlay[hidden]{ display:none !important; }
.filters-upgrade-card{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:18px; max-width:400px;
}
.filters-upgrade-icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accentA) 18%, transparent), rgba(56,189,248,.12));
  border:1px solid color-mix(in srgb, var(--accentA) 28%, transparent);
  box-shadow:0 8px 24px rgba(8,16,35,.35);
}
.filters-upgrade-icon .material-symbols-rounded{
  font-size:28px; color:rgba(130,180,230,1);
}
.filters-upgrade-title{
  margin:0; font:900 20px/1.2 "Inter",ui-sans-serif; color:#eaf2ff;
}
.filters-upgrade-desc{
  margin:0; font:500 14px/1.55 "Inter",ui-sans-serif; color:#9aa9c5; max-width:340px;
}
.filters-upgrade-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:999px;
  font:800 14px/1 "Inter",ui-sans-serif; text-decoration:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accentA) 90%, transparent), rgba(56,189,248,.85));
  color:#041225; border:1px solid color-mix(in srgb, var(--accentA) 55%, transparent);
  box-shadow:0 8px 28px rgba(56,189,248,.22);
  transition:transform .15s, box-shadow .15s;
}
.filters-upgrade-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(56,189,248,.35);
}
.filters-upgrade-cta .material-symbols-rounded{ font-size:18px; }

/* ── Free-tier account notice ──────────────────────────── */
.acct-free-notice{
  padding:8px 12px; border-radius:8px;
  background:color-mix(in srgb, var(--accentA) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accentA) 18%, transparent);
  font:600 11px/1.4 "Inter",ui-sans-serif;
  color:var(--muted);
}
.acct-free-notice a{
  color:rgba(130,180,230,1); text-decoration:underline;
  text-underline-offset:2px;
}

/* ── TP/SL Optimiser ───────────────────────────────────── */
.card-tpsl-optimiser{
  display:flex; flex-direction:column; gap:4px;
  padding-bottom:10px;
  grid-template-rows:none;
  grid-row: span 2;
}
.card-tpsl-optimiser.card--chart{
  grid-template-rows:var(--card-head-h) auto auto 1fr auto auto auto;
}
.card-tpsl-optimiser .card-h{ flex-shrink:0; }

/* TP/SL unit toggle (ticks vs $ PnL) */
.tpsl-unit-toggle{ display:flex; gap:0; border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; margin-left:auto; margin-right:4px; }
.tpsl-unit-btn{ background:none; border:none; padding:3px 10px; font:600 10px/1.2 "Inter",ui-sans-serif; color:var(--muted); cursor:pointer; transition:background .15s, color .15s; letter-spacing:.03em; }
.tpsl-unit-btn:hover:not(.active){ background:rgba(255,255,255,.04); color:var(--ink); }
.tpsl-unit-btn.active{ background:var(--accentA); color:#fff; }
body.theme-light .tpsl-unit-btn.active{ background:var(--accentA); color:#fff; }
body.theme-light .tpsl-unit-btn:hover:not(.active){ background:rgba(0,0,0,.04); }

.card-tpsl-optimiser .tpsl-status:empty{ display:none !important; padding:0 !important; }
.card-tpsl-optimiser .cv-tpsl-curve{ flex:0 0 auto; min-height:200px; max-height:320px; }
.tpsl-summary{ padding:0 12px; }
.tpsl-opt-row{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding:2px 0 4px; font:600 12px/1.3 "Inter",ui-sans-serif;
}
.tpsl-opt-item{ display:flex; flex-direction:column; gap:1px; min-width:80px; }
.tpsl-opt-label{ font-size:10px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.tpsl-opt-val{ font-size:14px; font-weight:700; color:var(--ink); }
.tpsl-good{ color:var(--good); }
.tpsl-bad{ color:var(--bad); }
.tpsl-diag{
  display:flex; flex-direction:column; gap:3px;
  padding:0; font:400 11px/1.45 "Inter",ui-sans-serif; color:var(--muted);
}
.tpsl-diag span::before{ content:"\2022 "; color:var(--accentA); }
.tpsl-sel-kpis{
  display:flex; flex-wrap:wrap; gap:6px 16px;
  padding:4px 12px; font:600 11px/1.4 "Inter",ui-sans-serif; color:var(--ink);
}
.tpsl-sel-kpis b{ color:var(--accentA); }
.tpsl-heatmap-wrap{ padding:0 12px; overflow-x:auto; }
.tpsl-heat-tbl{
  border-collapse:collapse; font:600 11px/1 "Inter",ui-sans-serif;
  width:100%; table-layout:auto;
}
.tpsl-heat-tbl th, .tpsl-heat-tbl td{
  padding:5px 7px; text-align:center; border:1px solid var(--line-soft);
  white-space:nowrap;
}
.tpsl-heat-tbl th{
  background:var(--surface2); color:var(--muted); font-size:10px;
  font-weight:600; letter-spacing:.03em;
}
.tpsl-heat-tbl td{
  color:#fff; font-size:11px; cursor:pointer; transition:outline .15s;
}
.tpsl-heat-tbl td:hover{ outline:2px solid var(--accentA); outline-offset:-2px; z-index:1; position:relative; }
.tpsl-heat-best{ outline:2px solid rgba(250,204,21,.9) !important; outline-offset:-2px; position:relative; z-index:2; }
.tpsl-heat-sel{ outline:2px solid var(--accentA) !important; outline-offset:-2px; position:relative; z-index:2; }
.tpsl-heat-region{ outline:1px dashed rgba(250,204,21,.55); outline-offset:-1px; position:relative; }
.tpsl-heat-region-label{ font-size:10px; color:var(--muted); padding:4px 0 0; font-style:italic; }
.tpsl-heat-corner{ font-size:9px; color:var(--muted); }
.tpsl-disclaimer{ padding:6px 12px; font-size:10px; color:var(--muted); line-height:1.4; }

/* TP/SL panels row */
.tpsl-panels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:0 12px;
}
.tpsl-panel{
  border:1px solid var(--line-soft); border-radius:6px;
  padding:8px 10px; background:var(--surface2);
  height:190px; overflow:hidden;
}
.tpsl-panel-title{
  font:600 10px/1.2 "Inter",ui-sans-serif; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); margin-bottom:4px;
}

/* Outcome bar */
.tpsl-outcome-bar{
  display:flex; height:14px; border-radius:4px; overflow:hidden; margin-bottom:6px;
}
.tpsl-ob-seg{ min-width:2px; transition:width .25s; }
.tpsl-ob-tp{ background:var(--good); }
.tpsl-ob-sl{ background:var(--bad); }
.tpsl-ob-fb{ background:var(--muted); opacity:.45; }
.tpsl-outcome-legend{
  display:flex; flex-wrap:wrap; gap:4px 10px;
  font:400 10px/1.3 "Inter",ui-sans-serif; color:var(--ink);
}
.tpsl-ol-item{ display:flex; align-items:center; gap:4px; }
.tpsl-ol-dot{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.tpsl-ol-tp{ background:var(--good); }
.tpsl-ol-sl{ background:var(--bad); }
.tpsl-ol-fb{ background:var(--muted); opacity:.45; }

/* Signal cards */
.tpsl-signals-wrap{ display:flex; flex-direction:column; gap:8px; }
.tpsl-signal{}
.tpsl-sig-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
.tpsl-sig-name{ font:600 11px/1.2 "Inter",ui-sans-serif; color:var(--ink); }
.tpsl-sig-strength{ font:700 10px/1 "Inter",ui-sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.tpsl-sig-high{ color:var(--good); }
.tpsl-sig-med{ color:var(--accentA); }
.tpsl-sig-low{ color:var(--muted); }
.tpsl-sig-bar{ height:5px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
.tpsl-sig-fill{ height:100%; border-radius:3px; transition:width .3s; }
.tpsl-sig-fill-high{ background:var(--good); }
.tpsl-sig-fill-med{ background:var(--accentA); }
.tpsl-sig-fill-low{ background:var(--muted); }
.tpsl-sig-detail{ font:400 9px/1.3 "Inter",ui-sans-serif; color:var(--muted); margin-top:1px; }

/* Robustness */
.tpsl-robust-badge{
  font:700 11px/1 "Inter",ui-sans-serif; padding:4px 8px;
  border-radius:4px; white-space:nowrap; display:inline-block; margin-bottom:4px;
}
.tpsl-robust-stable{ background:rgba(34,197,94,.18); color:var(--good); }
.tpsl-robust-plateau{ background:rgba(96,165,250,.18); color:rgba(96,165,250,1); }
.tpsl-robust-sensitive{ background:rgba(250,204,21,.18); color:rgba(202,138,4,1); }
.tpsl-robust-fragile{ background:rgba(239,68,68,.18); color:var(--bad); }
.tpsl-robust-explain{
  font:400 10px/1.4 "Inter",ui-sans-serif; color:var(--muted); margin-top:4px;
}
.tpsl-mini-tbl{ border-collapse:collapse; font:600 10px/1 "Inter",ui-sans-serif; width:100%; margin-top:2px; }
.tpsl-mini-tbl th{
  padding:3px 5px; text-align:center; border:1px solid var(--line-soft);
  color:var(--muted); font-weight:600; font-size:9px; background:var(--surface2);
}
.tpsl-mini-tbl td{
  padding:3px 6px; text-align:center; border:1px solid var(--line-soft);
  color:#fff; min-width:32px; font-size:10px;
}
.tpsl-mini-corner{ font-size:8px; color:var(--muted); }
.tpsl-mini-center{ outline:2px solid rgba(250,204,21,.8); outline-offset:-2px; font-weight:800; }
.tpsl-mini-empty{ background:transparent; border-color:transparent; }

/* Drawdown strip */
.cv-tpsl-dd{
  display:block; width:100%; height:36px;
  margin:0; padding:0;
}