/* Journal Trading — Platform shared stylesheet
   Tokens and components mirror the Design system (journal-trading-design.pages.dev).
   The app shell runs light (matches the live product); the TradingView candlestick
   panel keeps its own dark canvas per the Design system's chart-anatomy spec. */

:root{
  --bg-primary:#ECF1FC; --bg-surface:#ffffff; --bg-sunken:#e4ebfa; --bg-surface-raised:#ffffff;
  --bg-brand:#0b2036;
  --brand-cyan:#009AC8; --brand-green:#1BB980;
  --brand-gradient: linear-gradient(246.81deg, #009AC8 13.39%, #1BB980 86.63%);
  --brand-gradient-ui: linear-gradient(246.81deg, #006F92 13.39%, #0C7A51 86.63%);
  --magenta-500:#a83b91;
  --ink-900:#0e1620; --ink-700:#33404e; --ink-500:#5c6b7a; --ink-300:#a3b0bd; --ink-150:#d6dee6;
  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500);
  --border-hairline:var(--ink-150); --border-strong:var(--ink-300);
  --accent:#009AC8; --accent-strong:#006f92; --accent-soft:#e0f2f6;
  --focus-ring:#009AC8;
  --pnl-pos:#0a7d0a; --pnl-neg:#c22f2f; --pnl-pos-bg:#e6f6e6; --pnl-neg-bg:#fbe9e9;
  --status-warning-bg:#fdf1dc; --status-warning-text:#8a5c00;
  --status-good:#0ca30c; --status-critical:#d03b3b;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --table-bg:#ffffff; --table-text:#0f1c28; --table-text-muted:#5c6b7a;
  --table-border:#e4e9f0; --table-header-bg:#f6f8fc; --table-row-hover:rgba(0,154,200,.06);
  --shadow-sm:0 1px 2px rgba(14,22,32,.06), 0 1px 1px rgba(14,22,32,.04);
  --shadow-md:0 4px 14px rgba(14,22,32,.09), 0 2px 4px rgba(14,22,32,.05);
  --shadow-lg:0 16px 36px rgba(14,22,32,.14), 0 4px 10px rgba(14,22,32,.06);
  /* TradingView candlestick canvas — fixed, not themed (see Design system §16) */
  --tv-bg:#131722; --tv-panel:#1e222d; --tv-grid:#242732; --tv-border:#2a2e39;
  --tv-text:#787b86; --tv-text-strong:#d1d4dc; --tv-up:#0ca30c; --tv-down:#d03b3b;

  /* Figma source-of-truth tokens (Backtesting flow, node 851-33822) — trade profit/loss
     read slightly differently from --pnl-pos/--pnl-neg used elsewhere; kept as their own
     pair here rather than overwritten everywhere, since only this flow was re-sourced. */
  --trade-profit:#1BB980; --trade-profit-bg:rgba(102,255,200,.2);
  --trade-loss:#880B2D; --trade-loss-bg:rgba(243,156,198,.2);
  --text-label:#617098;
  --brand-gradient-text: linear-gradient(200.48deg, #009AC8 13.39%, #1BB980 86.63%);
  /* light reference-chart canvas used by the Backtesting AI annotator (matches the live
     product — this widget stays light even though the standalone TradingView panel above
     is dark) */
  --rc-bg:#ffffff; --rc-grid:#eef1f8; --rc-axis:#8792a8;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg-primary); color:var(--text-primary);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
code,.mono,.num{ font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; }
h1,h2,h3{ font-family:"IBM Plex Sans",sans-serif; margin:0; text-wrap:balance; }
button, input, select, textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
a{ color:inherit; text-decoration:none; }

/* ===== app shell ===== */
.app{ display:grid; grid-template-columns:64px minmax(0,1fr); min-height:100vh; }

.rail{ background:var(--bg-surface); border-right:1px solid var(--border-hairline); display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; position:sticky; top:0; height:100vh; }
.rail .logo{ margin-bottom:18px; }
.rail a{ width:40px; height:40px; border-radius:9px; display:grid; place-items:center; color:var(--text-muted); position:relative; transition:background .12s ease, color .12s ease; }
.rail a:hover{ background:var(--bg-sunken); color:var(--text-secondary); }
.rail a.active{ background:var(--accent-soft); color:var(--brand-cyan); }
.rail a.active::before{ content:''; position:absolute; left:-16px; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--brand-gradient); }
.rail .spacer{ flex:1; }
.rail .avatar{ width:34px; height:34px; border-radius:50%; background:var(--brand-gradient); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; margin-top:8px; }
.rail .tooltip{ position:absolute; left:52px; background:var(--bg-brand); color:#fff; font-size:11.5px; font-weight:600; padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .1s ease; box-shadow:var(--shadow-md); }
.rail a:hover .tooltip, .rail a:focus-visible .tooltip{ opacity:1; }

main{ padding:20px 28px 60px; max-width:1400px; }
.topbar{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-bottom:6px; }
.topbar h1{ font-size:22px; font-weight:700; }
.topbar .sub{ font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.topbar .meta{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:100px; background:var(--bg-sunken); font-size:11.5px; font-weight:600; color:var(--text-secondary); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-300); }
.btn-date, .filter-btn{ background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:8px; padding:7px 12px; font-size:12.5px; font-weight:600; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .12s ease, border-color .12s ease; }
.btn-date:hover, .filter-btn:hover{ background:var(--bg-sunken); border-color:var(--ink-500); }
main > .topbar{ margin-bottom:16px; }

/* ===== buttons ===== */
.btn{ font-size:13.5px; font-weight:700; border-radius:7px; padding:9px 16px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:filter .12s ease, background .12s ease; }
.btn-primary{ background:var(--brand-gradient-ui); color:#ffffff; }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-primary[disabled]{ opacity:.45; cursor:not-allowed; filter:none; }
.btn-secondary{ background:var(--bg-sunken); color:var(--text-primary); border-color:var(--border-strong); }
.btn-secondary:hover{ background:#dbe4f5; }
.btn-ghost{ background:transparent; color:var(--text-secondary); }
.btn-ghost:hover{ background:var(--bg-sunken); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

/* ===== banner ===== */
.banner{ display:flex; align-items:center; gap:10px; background:var(--accent-soft); border:1px solid #b9e4ec; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:18px; }
.banner.warn{ background:var(--status-warning-bg); border-color:#f3d9a3; color:var(--status-warning-text); }
.banner b{ font-weight:700; }
.banner .cta{ margin-left:auto; background:var(--brand-gradient-ui); color:#fff; font-weight:700; font-size:12px; border:none; border-radius:7px; padding:7px 13px; cursor:pointer; }
.banner .x{ background:none; border:none; color:inherit; opacity:.6; cursor:pointer; font-size:15px; padding:2px; line-height:1; }
.banner .x:hover{ opacity:1; }

/* ===== KPI tiles ===== */
.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:16px; }
.kpis.cols-6{ grid-template-columns:repeat(6,1fr); }
.kpi{ background:var(--bg-surface); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease; }
.kpi:hover{ box-shadow:var(--shadow-md); }
.kpi .lbl{ font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:5px; font-weight:500; }
.kpi .lbl .info{ color:var(--text-muted); cursor:help; }
.kpi .val{ font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:600; margin-top:8px; }
.kpi .val.pos{ color:var(--pnl-pos); } .kpi .val.neg{ color:var(--pnl-neg); }
.kpi .sub{ margin-top:8px; }
.tag-sm{ display:inline-block; font-size:10.5px; font-weight:700; color:var(--text-muted); background:var(--bg-sunken); border-radius:5px; padding:3px 7px; }
.ring{ margin-top:8px; }

/* ===== panels ===== */
.content-grid{ display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
.panel{ background:var(--bg-surface); border-radius:12px; box-shadow:var(--shadow-sm); padding:18px 20px; }
.panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.panel-head h2{ font-size:14px; font-weight:600; }
.panel-head .filter{ margin-left:auto; font-size:12px; font-weight:600; color:var(--text-secondary); background:var(--bg-sunken); border-radius:7px; padding:6px 10px; border:none; cursor:pointer; }
.panel-head .seg{ margin-left:auto; }

.seg{ display:inline-flex; background:var(--bg-sunken); border-radius:8px; padding:3px; gap:2px; }
.seg button{ border:none; background:transparent; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); padding:6px 12px; border-radius:6px; cursor:pointer; }
.seg button.active{ background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }

.curve-stats{ display:flex; gap:28px; margin-bottom:10px; flex-wrap:wrap; }
.curve-stats div div:first-child{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:600; }
.curve-stats div div:last-child{ font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600; margin-top:3px; }

.metric-list{ display:flex; flex-direction:column; }
.metric-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-hairline); font-size:12.5px; }
.metric-row:last-child{ border-bottom:none; }
.metric-row span:first-child{ color:var(--text-secondary); }
.metric-row span:last-child{ font-family:"IBM Plex Mono",monospace; font-weight:600; }

/* ===== tabs ===== */
.tabs{ display:flex; gap:22px; border-bottom:1px solid var(--border-hairline); }
.tab{ padding:10px 2px; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; text-transform:uppercase; background:none; border-top:none; border-left:none; border-right:none; }
.tab.active{ color:var(--text-primary); border-bottom-color:var(--brand-cyan); }
.tab:hover:not(.active){ color:var(--text-secondary); }

/* ===== tables ===== */
table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--table-bg); color:var(--table-text); }
th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--table-text-muted); font-weight:700; padding:10px 14px; background:var(--table-header-bg); border-bottom:1px solid var(--table-border); position:sticky; top:0; white-space:nowrap; }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--text-primary); }
th .sort-icon{ opacity:.4; margin-left:3px; }
td{ padding:11px 14px; border-bottom:1px solid var(--table-border); color:var(--table-text); }
tbody tr{ transition:background .1s ease; }
tbody tr:hover td{ background:var(--table-row-hover); }
.table-wrap{ overflow-x:auto; border:1px solid var(--table-border); border-radius:10px; background:var(--table-bg); box-shadow:var(--shadow-sm); }
.table-wrap.attached{ border-radius:0 0 10px 10px; border-top:none; }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; }
.badge-win{ background:var(--pnl-pos-bg); color:var(--pnl-pos); }
.badge-loss{ background:var(--pnl-neg-bg); color:var(--pnl-neg); }
.badge-be{ background:var(--bg-sunken); color:var(--text-muted); }
.side-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--accent-soft); color:var(--accent-strong); }
.side-badge.short{ background:#fdeceb; color:#b23a2f; }
.expand-btn{ width:22px; height:22px; border-radius:5px; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-muted); cursor:pointer; display:inline-grid; place-items:center; font-size:12px; line-height:1; }
.expand-btn:hover{ background:var(--bg-sunken); }
.row-menu{ width:22px; height:22px; border-radius:5px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; }
.row-menu:hover{ background:var(--bg-sunken); }

/* ===== forms ===== */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:600; color:var(--text-secondary); }
.field input, .field select, .field textarea{ font-family:inherit; font-size:13.5px; padding:9px 11px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-primary); resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.field textarea::placeholder, .field input::placeholder{ color:var(--text-muted); }
.field .hint{ font-size:11.5px; color:var(--text-muted); }

.switch{ position:relative; width:36px; height:20px; border-radius:100px; background:var(--border-strong); flex:none; cursor:pointer; transition:background .15s ease; border:none; padding:0; }
.switch::after{ content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2px; left:2px; transition:transform .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.switch.on{ background:var(--brand-gradient-ui); }
.switch.on::after{ transform:translateX(16px); }

.ctrl-check, .ctrl-radio{ appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; border:1.5px solid var(--border-strong); background:var(--bg-surface); cursor:pointer; display:inline-grid; place-items:center; transition:background .12s ease, border-color .12s ease; margin:0; }
.ctrl-check{ border-radius:5px; } .ctrl-radio{ border-radius:50%; }
.ctrl-check:checked, .ctrl-radio:checked{ background:var(--brand-gradient-ui); border-color:transparent; }
.ctrl-check:checked::after{ content:''; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.ctrl-radio:checked::after{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
.ctrl-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; }

.chip{ font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:100px; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; }
.chip.active{ background:var(--bg-brand); color:#fff; border-color:var(--bg-brand); }

/* ===== calendar ===== */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr) 150px; gap:1px; background:var(--table-border); border:1px solid var(--table-border); border-radius:10px; overflow:hidden; }
.cal-head{ background:var(--table-header-bg); padding:9px 10px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.cal-cell{ background:var(--bg-surface); min-height:88px; padding:8px 9px; font-size:12px; font-family:"IBM Plex Mono",monospace; color:var(--text-muted); position:relative; }
.cal-cell.pos{ background:var(--pnl-pos-bg); }
.cal-cell.neg{ background:var(--pnl-neg-bg); }
.cal-cell .n{ font-weight:600; color:var(--text-secondary); }
.cal-cell.pos .n, .cal-cell.neg .n{ color:var(--text-primary); }
.cal-cell .pl{ margin-top:20px; font-weight:700; font-size:13px; }
.cal-cell.pos .pl{ color:var(--pnl-pos); } .cal-cell.neg .pl{ color:var(--pnl-neg); }
.cal-cell .trades{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.cal-cell.today{ box-shadow:inset 0 0 0 2px var(--brand-cyan); }
.cal-week{ background:var(--bg-sunken); padding:10px 12px; font-size:11px; }
.cal-week .lbl{ font-weight:700; color:var(--text-secondary); }
.cal-week .amt{ font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:14px; margin-top:4px; }
.cal-week .amt.pos{ color:var(--pnl-pos);} .cal-week .amt.zero{ color:var(--text-muted); }
.cal-week .sub{ font-size:10.5px; color:var(--text-muted); margin-top:3px; }

/* ===== TradingView-style panel ===== */
.tv-panel{ background:var(--tv-bg); border-radius:10px; overflow:hidden; border:1px solid var(--tv-border); }
.tv-toolbar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--tv-border); background:var(--tv-panel); flex-wrap:wrap; }
.tv-chip{ font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; padding:4px 8px; border-radius:5px; color:var(--tv-text); cursor:pointer; border:none; background:transparent; }
.tv-chip.active{ background:#2a2e39; color:var(--tv-text-strong); }
.tv-chip:hover:not(.active){ color:var(--tv-text-strong); }
.tv-sep{ width:1px; height:16px; background:var(--tv-border); }
.tv-legend{ position:absolute; top:10px; left:12px; z-index:2; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tv-text-strong); display:flex; gap:10px; background:rgba(19,23,34,.75); padding:3px 8px; border-radius:5px; }

/* ===== AI panel (Backtesting) ===== */
.ai-panel{ background:var(--bg-surface); border-radius:12px; box-shadow:var(--shadow-sm); padding:20px; border:1px solid transparent; background-image:linear-gradient(var(--bg-surface),var(--bg-surface)), var(--brand-gradient); background-origin:border-box; background-clip:padding-box, border-box; }
.ai-panel .kicker{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--magenta-500); margin-bottom:4px; }
.credit-pill{ font-size:11px; font-weight:600; color:var(--text-secondary); background:var(--bg-sunken); border-radius:100px; padding:5px 11px; }
.credit-pill b{ color:var(--text-primary); }

/* ===== Ai-coach box — reused for inline suggestions, AI summary, and the coach card ===== */
.ai-coach-box{ background:var(--bg-primary); border:1px solid var(--brand-cyan); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.ai-coach-box .ai-head{ display:flex; align-items:center; gap:8px; }
.ai-coach-box .ai-head svg{ flex:none; color:var(--brand-cyan); }
.ai-coach-box .ai-title{ font-size:13px; font-weight:600; background:var(--brand-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ai-coach-box p{ font-size:13px; line-height:20px; color:var(--text-primary); margin:0; }
.ai-coach-box .apply{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--brand-cyan); background:none; border:none; cursor:pointer; padding:0; }
.ai-coach-box .apply:hover{ text-decoration:underline; }

/* ===== step breadcrumb ===== */
.steps{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted); flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:6px; }
.step .n{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; background:var(--bg-sunken); color:var(--text-muted); }
.step.done .n{ background:var(--brand-gradient); color:#fff; }
.step.current{ color:var(--text-primary); font-weight:700; }
.step.current .n{ background:var(--brand-gradient-ui); color:#fff; }
.steps .sep{ color:var(--border-strong); }

/* ===== metadata chip pills (Name / Description / Product ...) ===== */
.meta-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.meta-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-secondary); background:var(--bg-sunken); border-radius:100px; padding:5px 12px; }
.meta-chip b{ font-weight:600; color:var(--text-primary); }
.meta-chip svg{ opacity:.55; cursor:pointer; }

/* ===== reference chart panel (light) ===== */
.rc-panel{ background:var(--bg-surface); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
.rc-toolbar{ display:flex; align-items:center; gap:8px; padding:12px 16px; flex-wrap:wrap; }
.rc-select{ font-size:12.5px; font-weight:600; color:var(--text-secondary); background:var(--bg-sunken); border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
.rc-annotate-row{ display:flex; align-items:center; gap:8px; padding:0 16px 12px; flex-wrap:wrap; }
.rc-annotate-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; margin-right:2px; }
.rc-mode{ font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.rc-mode.active{ border-color:var(--brand-green); color:var(--brand-green); background:var(--trade-profit-bg); }
.rc-hint{ margin:0 16px 14px; background:var(--bg-primary); border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--text-secondary); display:flex; gap:8px; }
.rc-hint svg{ flex:none; color:var(--brand-cyan); margin-top:1px; }
.rc-chart-wrap{ position:relative; padding:0 16px 16px; }
.rc-mark{ cursor:pointer; }
.rc-mark:hover rect{ filter:brightness(0.9); }

/* ===== annotation modal ===== */
.modal-overlay{ position:fixed; inset:0; background:rgba(14,22,32,.35); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal-overlay[hidden]{ display:none; }
.annotate-modal{ background:var(--bg-surface); border-radius:12px; box-shadow:var(--shadow-lg); width:380px; max-width:100%; padding:20px; }
.annotate-modal .row-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.annotate-modal .price-line{ font-size:15px; }
.annotate-modal .price-line b{ font-family:"IBM Plex Mono",monospace; }
.close-x{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; padding:2px; }
.close-x:hover{ color:var(--text-primary); }
.signal-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.signal-chip{ font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:7px 11px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; }
.signal-chip.active{ background:var(--accent-soft); border-color:var(--brand-cyan); color:var(--accent-strong); }
.sltp-row{ display:flex; align-items:center; gap:10px; }
.sltp-row .field{ flex:1; }
.sltp-row label{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }

/* ===== annotation list (review step) ===== */
.annot-card{ border:1px solid var(--border-hairline); border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.annot-card .top{ display:flex; align-items:center; justify-content:space-between; }
.annot-card .side{ color:var(--brand-green); font-weight:700; font-size:13px; }
.annot-card .ts{ font-size:12px; color:var(--text-muted); margin-left:6px; }
.annot-card .tag{ font-weight:600; font-size:13px; }
.annot-card .note{ font-size:12.5px; color:var(--text-secondary); }
.annot-card.missing{ background:var(--trade-loss-bg); }
.annot-card.missing .note{ color:var(--trade-loss); font-weight:600; }

/* ===== KPI with comparison (Current / Previous) ===== */
.kpi.compare .prev-lbl{ font-size:11px; color:var(--text-muted); margin-top:10px; }
.kpi.compare .prev-val{ font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600; color:var(--text-primary); margin-top:2px; }
.compare-banner{ display:flex; align-items:center; gap:10px; background:var(--bg-sunken); border-radius:10px; padding:10px 14px; font-size:12.5px; color:var(--text-secondary); margin-bottom:16px; }
.compare-banner b{ color:var(--text-primary); }

/* ===== edit drawer (Modify strategy) ===== */
.drawer-overlay{ position:fixed; inset:0; background:rgba(14,22,32,.25); z-index:40; }
.drawer-overlay[hidden]{ display:none; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:420px; max-width:100%; background:var(--bg-primary); box-shadow:var(--shadow-lg); z-index:41; padding:22px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }

/* ===== history list ===== */
.history-row{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border-hairline); }
.history-row:last-child{ border-bottom:none; }
.result-pill{ background:var(--brand-gradient); color:#fff; font-size:12px; font-weight:700; border:none; border-radius:8px; padding:8px 14px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex:none; }
.history-row .name{ font-weight:600; font-size:13.5px; }
.history-row .symbol{ font-family:"IBM Plex Mono",monospace; color:var(--text-muted); font-size:12.5px; margin-left:auto; margin-right:14px; }
.history-row .chevron{ background:none; border:none; color:var(--text-muted); cursor:pointer; }
.history-detail{ padding:0 4px 16px; display:none; }
.history-detail.open{ display:block; }
.history-detail .dates{ display:flex; gap:32px; font-size:12px; margin-bottom:12px; }
.history-detail .dates span:first-child{ color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; display:block; margin-bottom:3px; }

footer.page-foot{ margin-top:56px; padding-top:20px; border-top:1px solid var(--border-hairline); font-size:11.5px; color:var(--text-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

@media (max-width:1080px){
  .content-grid{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(3,1fr); }
  .kpis.cols-6{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .kpis, .kpis.cols-6{ grid-template-columns:repeat(2,1fr); }
}