/* Notion-like look: warm paper, quiet borders, pastel tags. Tokens first. */
:root {
  --bg: #ffffff; --side: #f7f6f3; --hover: rgba(55,53,47,.06); --active: rgba(55,53,47,.1);
  --fg: #37352f; --fg2: #787774; --fg3: #9b9a97; --line: #e9e9e7; --line2: #d3d1cb;
  --input: rgba(242,241,238,.6); --callout: #f1f1ef; --code: #f7f6f3;
  --blue: #2383e2; --blue-soft: #e7f0f9;
  /* Notion tag palette: bg / text */
  --tag-gray-bg: #e3e2e0; --tag-gray: #32302c;
  --tag-red-bg: #ffe2dd; --tag-red: #93000a;
  --tag-green-bg: #dbeddb; --tag-green: #1c3829;
  --tag-yellow-bg: #fdecc8; --tag-yellow: #402c1b;
  --tag-blue-bg: #d3e5ef; --tag-blue: #183347;
  --tag-purple-bg: #e8deee; --tag-purple: #412454;
  --tag-orange-bg: #fadec9; --tag-orange: #49290e;
  --tag-pink-bg: #f5e0e9; --tag-pink: #4c2337;
  --tag-brown-bg: #eee0da; --tag-brown: #442a1e;
  /* semantic */
  --up: #448361; --down: #eb5757; --up-soft: rgba(68,131,97,.16); --down-soft: rgba(235,87,87,.16);
  --chart-bg: #ffffff; --chart-grid: #f1f1ef; --chart-text: #787774; --chart-border: #e9e9e7;
  --ses-asia: 51,126,169; --ses-frankfurt: 144,101,176; --ses-london: 68,131,97; --ses-ny: 203,145,47;
  --shadow: 0 1px 2px rgba(15,15,15,.06), 0 4px 12px rgba(15,15,15,.05);
  --radius: 6px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #191919; --side: #202020; --hover: rgba(255,255,255,.055); --active: rgba(255,255,255,.1);
  --fg: #d4d4d4; --fg2: #9b9b9b; --fg3: #6f6f6f; --line: #2f2f2f; --line2: #444;
  --input: rgba(255,255,255,.055); --callout: #252525; --code: #202020;
  --blue: #529cca; --blue-soft: rgba(82,156,202,.15);
  --tag-gray-bg: #373737; --tag-gray: #d4d4d4; --tag-red-bg: #522e2a; --tag-red: #ffb3ad;
  --tag-green-bg: #2b593f; --tag-green: #c2e5cd; --tag-yellow-bg: #5c4b1d; --tag-yellow: #f3dfa0;
  --tag-blue-bg: #28456c; --tag-blue: #b7d4ee; --tag-purple-bg: #493064; --tag-purple: #dcc8ee;
  --tag-orange-bg: #5c3b23; --tag-orange: #f5c8a3; --tag-pink-bg: #4e2c3c; --tag-pink: #f3c2d8; --tag-brown-bg: #4a3428; --tag-brown: #e6cbbd;
  --up: #6cc08b; --down: #ff7369; --up-soft: rgba(108,192,139,.18); --down-soft: rgba(255,115,105,.18);
  --chart-bg: #191919; --chart-grid: #232323; --chart-text: #9b9b9b; --chart-border: #2f2f2f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 14px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 8px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 40px; line-height: 1.2; margin-bottom: 4px; }
h2 { font-size: 22px; margin-top: 26px; margin-bottom: 6px; }
h3 { font-size: 16px; margin-top: 20px; margin-bottom: 4px; }
::selection { background: rgba(35,131,226,.28); }

/* ---------- shell: sidebar + page ---------- */
#app { display: flex; min-height: 100%; }
#side { width: 240px; flex: none; background: var(--side); border-right: 1px solid var(--line); padding: 10px 8px;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; }
#side .ws { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-weight: 600; margin-bottom: 8px; border-radius: 4px; }
#side .ws .ico { width: 20px; height: 20px; border-radius: 4px; background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#side a.item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 4px; color: var(--fg2); font-weight: 500; }
#side a.item:hover { background: var(--hover); color: var(--fg); }
#side a.item.active { background: var(--active); color: var(--fg); }
#side a.item .em { width: 18px; text-align: center; font-size: 15px; }
#side .sep { font-size: 11px; color: var(--fg3); padding: 12px 10px 4px; text-transform: none; font-weight: 500; }
#side .foot { margin-top: auto; padding: 8px 10px; font-size: 12px; color: var(--fg3); display: flex; align-items: center; gap: 8px; }
#side .foot select { font-size: 12px; padding: 2px 4px; }
#page { flex: 1; min-width: 0; }
.page { max-width: 1080px; margin: 0; padding: 44px 48px 120px; }
.page.wide { max-width: 1400px; }
.page-icon { font-size: 60px; line-height: 1; margin-bottom: 10px; display: block; }
.page-sub { color: var(--fg2); margin-bottom: 20px; }
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .grow { flex: 1; }
.page-head .tools { display: flex; gap: 6px; align-items: center; padding-bottom: 8px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--line2);
  background: var(--bg); color: var(--fg); cursor: pointer; font: inherit; font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; color: var(--fg2); }
.btn.ghost:hover { color: var(--fg); }
.btn.danger { color: var(--down); }
.btn.small { padding: 3px 8px; font-size: 12.5px; }
.btn.active { background: var(--active); border-color: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--fg2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--active); color: var(--fg); font-weight: 600; }

input, select, textarea { font: inherit; color: var(--fg); background: var(--input); border: 1px solid transparent; border-radius: 4px; padding: 5px 8px; }
input:hover, select:hover, textarea:hover { background: var(--hover); }
input:focus, select:focus, textarea:focus { outline: none; background: var(--bg); border-color: var(--blue); box-shadow: 0 0 0 2px rgba(35,131,226,.25); }
textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--fg2); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--fg); font-size: 13.5px; padding-top: 18px; }
label.check input { width: 15px; height: 15px; accent-color: var(--blue); }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 14px; }
.form .wide { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* ---------- blocks ---------- */
.callout { display: flex; gap: 10px; align-items: flex-start; background: var(--callout); border-radius: 4px; padding: 12px 14px; margin: 8px 0; }
.callout .em { font-size: 18px; line-height: 1.2; }
.callout.warn { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--fg2); } .faint { color: var(--fg3); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--up); } .neg { color: var(--down); } .zero { color: var(--fg3); }
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 3px 0; font-weight: 600; user-select: none; }
details > summary::before { content: "▸"; color: var(--fg3); font-size: 12px; width: 12px; transition: transform .12s; }
details[open] > summary::before { transform: rotate(90deg); }
details > summary::-webkit-details-marker { display: none; }
details .body { padding: 4px 0 10px 18px; }

/* tags (Notion select pills) */
.tag { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 13px; line-height: 20px; white-space: nowrap;
  background: var(--tag-gray-bg); color: var(--tag-gray); }
.tag.TP, .tag.Long, .tag.confirmed, .tag.LONDON { background: var(--tag-green-bg); color: var(--tag-green); }
.tag.SL, .tag.Short, .tag.rejected { background: var(--tag-red-bg); color: var(--tag-red); }
.tag.BE, .tag.backtest { background: var(--tag-gray-bg); color: var(--tag-gray); }
.tag.live, .tag.ASIA { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag.open, .tag.NY { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.tag.FRANKFURT { background: var(--tag-purple-bg); color: var(--tag-purple); }
.tag.OVERLAP { background: var(--tag-orange-bg); color: var(--tag-orange); }
.tag.Limit { background: var(--tag-brown-bg); color: var(--tag-brown); }
.tag.Market { background: var(--tag-pink-bg); color: var(--tag-pink); }
.tag.setup { background: var(--tag-purple-bg); color: var(--tag-purple); }
.tag.inst { background: var(--tag-orange-bg); color: var(--tag-orange); font-weight: 600; }

/* property list (page properties) */
.props { display: grid; grid-template-columns: 160px 1fr; row-gap: 2px; font-size: 14px; }
.props > div { padding: 4px 6px; min-height: 30px; display: flex; align-items: center; gap: 6px; border-radius: 4px; }
.props > div:nth-child(odd) { color: var(--fg2); }
.props > div:nth-child(odd) .em { width: 16px; text-align: center; color: var(--fg3); font-size: 13px; }

/* stat "gallery" */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--bg); box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--fg2); }
.stat .v { font-size: 22px; font-weight: 600; margin-top: 2px; letter-spacing: -.01em; }

/* database table */
.db { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { color: var(--fg2); font-weight: 500; font-size: 12.5px; border-top: 1px solid var(--line); }
th + th, td + td { border-left: 1px solid var(--line); }
td.num, th.num { text-align: right; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--hover); }
td.text { white-space: normal; min-width: 280px; max-width: 460px; color: var(--fg2); line-height: 1.35; }
.mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 24px; }
.mini table { font-size: 13px; }
.mini td, .mini th { padding: 4px 6px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 12px; background: var(--side); border-radius: var(--radius); }
.filters label { min-width: 96px; }
.filters input[type=date] { width: 136px; }

/* chart */
.chart-wrap { margin: 4px 0 6px; }
.chart-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.chart-toolbar .spacer { flex: 1; }
.chart-box { position: relative; height: 580px; border: 1px solid var(--chart-border); border-radius: var(--radius); overflow: hidden; background: var(--chart-bg); }
.legend { position: absolute; top: 8px; left: 10px; z-index: 3; font-size: 12px; color: var(--chart-text); pointer-events: none; }

/* screenshots gallery */
.shots { display: flex; gap: 10px; flex-wrap: wrap; }
.shots a { display: block; position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--side); }
.shots img { height: 150px; display: block; }
.shots .del { position: absolute; top: 4px; right: 4px; opacity: 0; }
.shots a:hover .del { opacity: 1; }

/* markdown */
.md { line-height: 1.6; } .md h1 { font-size: 26px; margin: 18px 0 6px; } .md h2 { font-size: 20px; } .md h3 { font-size: 16px; }
.md pre { background: var(--code); padding: 10px 12px; border-radius: 4px; overflow-x: auto; font-size: 13px; }
.md code { background: var(--code); padding: 1px 4px; border-radius: 3px; font-size: 13px; color: #eb5757; }
.md blockquote { border-left: 3px solid var(--fg); margin: 8px 0; padding-left: 12px; }
.md ul, .md ol { padding-left: 22px; }
.md table { width: auto; } .md hr { border: 0; border-top: 1px solid var(--line); }

.equity { width: 100%; height: 190px; display: block; }
.list-item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.list-item .grow { flex: 1; min-width: 120px; }
.block { padding: 10px 0; border-top: 1px solid var(--line); }
.block:last-child { border-bottom: 1px solid var(--line); }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); border-radius: 6px;
  padding: 8px 14px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50; box-shadow: var(--shadow); }
#toast.show { opacity: 1; }
#toast.err { background: var(--down); color: #fff; }
.empty { padding: 30px 0; color: var(--fg3); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 40; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 96vh; border-radius: 4px; }

@media (max-width: 900px) {
  #side { display: none; }
  #topbar { display: flex !important; }
  .page { padding: 24px 16px 80px; }
  h1 { font-size: 30px; } .page-icon { font-size: 44px; }
  .chart-box { height: 420px; }
  .props { grid-template-columns: 120px 1fr; }
}
#topbar { display: none; position: sticky; top: 0; z-index: 10; background: var(--side); border-bottom: 1px solid var(--line); padding: 8px 12px; gap: 12px; overflow-x: auto; }
#topbar a { color: var(--fg2); white-space: nowrap; font-size: 13.5px; } #topbar a.active { color: var(--fg); font-weight: 600; }

/* ---- inline editing on the trade card, dashboard columns, accounts */
a.ws { color: inherit; text-decoration: none; }
.props .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.props .editing input, .props .editing select { padding: 3px 7px; font-size: 13px; max-width: 170px; }
.props .editing input[type="number"] { width: 110px; }
.props .editing input[type="date"], .props .editing input[type="time"] { width: auto; }
.check.inline { display: inline-flex; gap: 5px; align-items: center; padding: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; margin-top: 8px; }
.cols h2 { margin-top: 14px; }
.rules { padding: 6px 0 10px; }
.tag.prop { background: var(--tag-purple-bg); color: var(--tag-purple); }
.tag.personal { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag.active { background: var(--tag-green-bg); color: var(--tag-green); }
.tag.passed { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag.failed { background: var(--tag-red-bg); color: var(--tag-red); }
.tag.closed { background: var(--tag-gray-bg); color: var(--tag-gray); }

#side .ws.active { background: var(--active); }
#topbar a.brand { font-weight: 700; }

table.compact td, table.compact th { padding: 8px 12px; }
table.compact .text { max-width: 520px; }
.warn-mark { color: var(--tag-yellow); font-weight: 700; }
.checklist label { font-size: 13.5px; }

/* ---- cards for setups / backtests / accounts, collapsible "new" forms */
[hidden] { display: none !important; }
.card + .card { margin-top: 10px; }
.card-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card-head .grow { flex: 1; min-width: 80px; }
.card .desc { color: var(--fg2); margin-top: 6px; font-size: 13.5px; }
.card .desc .md p { margin: 0 0 4px; }
.card .form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.collapsible { position: relative; }
.collapsible > .form { position: absolute; right: 0; top: 40px; z-index: 5; width: min(720px, 90vw); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.card .desc img, .md img { max-width: 100%; display: block; margin: 8px 0; border-radius: 6px; background: rgba(127,127,127,.06); }
.card .desc ol, .card .desc ul { margin: 4px 0 8px; }

.card-head .title { font-weight: 700; font-size: 15px; }
.card-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--fg2); font-size: 13px; margin-top: 6px; }

/* ---- setups: list rows and the setup page */
a.setup-row { display: block; padding: 12px 16px; }
a.setup-row:hover { background: var(--hover); }
.setup-body { max-width: 900px; }
.setup-body .md h3 { margin-top: 24px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.setup-body .md img { margin: 14px 0 6px; background: rgba(127,127,127,.05); padding: 6px; }
.setup-body .md li { margin: 3px 0; }

.page > .back { display: inline-block; margin-bottom: 18px; color: var(--fg2); font-size: 13.5px; padding: 4px 8px; margin-left: -8px; border-radius: 4px; }
.page > .back:hover { background: var(--hover); color: var(--fg); }
a.setup-row .card-meta { font-size: 14px; color: var(--fg2); margin-top: 8px; }

/* ---- new trade form */
.trade-form { display: flex; flex-direction: column; gap: 20px; max-width: 980px; }
.trade-form .group { display: flex; flex-direction: column; gap: 8px; }
.trade-form .group-title { font-size: 11.5px; color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.trade-form .seg-row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-end; }
.trade-form .checks { display: flex; gap: 18px; align-items: center; padding-bottom: 6px; }
.seg-field { display: block; }
.seg-input button { padding: 6px 12px; font-size: 13px; }
.seg-input button.active.seg-Long, .seg-input button.active.seg-TP { background: var(--tag-green-bg); color: var(--tag-green); }
.seg-input button.active.seg-Short, .seg-input button.active.seg-SL { background: var(--tag-red-bg); color: var(--tag-red); }
.seg-input button.active.seg-live { background: var(--tag-blue-bg); color: var(--tag-blue); }
.seg-input { flex-wrap: wrap; max-width: 100%; }
/* fields fill their grid cell exactly: no overlap with the neighbour */
.trade-form .form > label > input, .trade-form .form > label > select, .trade-form .form > label > span { width: 100%; min-width: 0; }
.trade-form .form > label > span > input, .trade-form .form > label > span > select { width: 100%; min-width: 0; flex: 1 1 auto; }
.trade-form .form > label > span.row { display: flex; }
.trade-form select { text-overflow: ellipsis; }
.trade-form .seg-row > label > span.row select { min-width: 200px; }

/* ---- paste zones (Cmd+V), analysis */
.paste-zone { border: 1.5px dashed var(--line2); border-radius: var(--radius); padding: 10px 12px; color: var(--fg2); font-size: 13px; cursor: pointer; margin-top: 8px; outline: none; }
.paste-zone .pz-hint { color: var(--fg3); }
.paste-zone a { color: var(--blue); }
.paste-zone:hover, .paste-zone.over { background: var(--hover); }
.paste-zone.active { border-color: var(--blue); color: var(--fg); }
.paste-zone.active::after { content: ' ← Cmd+V вставит сюда'; color: var(--blue); font-size: 12px; }
.shot-queue .shots:empty { display: none; }
.analysis-fields { display: flex; flex-direction: column; gap: 10px; }
.analysis-box .card .desc { margin-top: 8px; }
.analysis-box .shots { margin-top: 10px; }
.tag.bias-Long { background: var(--tag-green-bg); color: var(--tag-green); }
.tag.bias-Short { background: var(--tag-red-bg); color: var(--tag-red); }
.tag.bias-Flat { background: var(--tag-gray-bg); color: var(--tag-gray); }
.seg-input button.active.seg-Flat { background: var(--tag-gray-bg); color: var(--tag-gray); }
.tag.bias-Both, .seg-input button.active.seg-Both { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag.reached-Yes, .seg-input button.active.seg-Yes { background: var(--tag-green-bg); color: var(--tag-green); }
.tag.reached-Partial, .seg-input button.active.seg-Partial { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.tag.reached-No, .seg-input button.active.seg-No { background: var(--tag-red-bg); color: var(--tag-red); }

/* charts: TradingView light look in both themes */
.chart-box { background: #ffffff; border-color: #e0e3eb; }
.chart-box .legend { color: #131722; font-weight: 500; }

/* ---- trade page */
.page-head h1 .dir.Long { color: var(--up); } .page-head h1 .dir.Short { color: var(--down); }
.trade-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 2px 0 12px; }
.tstat { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--bg); }
.tstat .k { font-size: 11px; color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.tstat .v { font-size: 18px; font-weight: 650; margin-top: 3px; white-space: nowrap; }
.tstat .s { font-size: 12px; color: var(--fg2); margin-top: 1px; }
.tstat.result-TP { background: var(--tag-green-bg); border-color: transparent; } .tstat.result-TP .v { color: var(--tag-green); }
.tstat.result-SL { background: var(--tag-red-bg); border-color: transparent; } .tstat.result-SL .v { color: var(--tag-red); }
.tstat.result-BE { background: var(--tag-gray-bg); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chips:empty { display: none; }
.tag.chip-warn { background: var(--tag-yellow-bg); color: var(--tag-yellow); white-space: normal; }
.chart-note { font-size: 12.5px; color: var(--fg2); margin-top: 6px; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px 22px; margin-top: 22px; align-items: start; }
.flow-col { min-width: 0; }
.flow-col > h3 { margin: 0 0 10px; font-size: 15px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.flow-col .shots img { height: 120px; max-width: 100%; object-fit: cover; }
.flow-col .md { font-size: 13.5px; }
details.fields { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 12px; }
details.fields > summary { cursor: pointer; color: var(--fg2); font-weight: 600; margin-bottom: 10px; }

/* ---- breakdown cards */
.bd-group { font-size: 11.5px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 8px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.bd-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 6px; min-width: 0; }
.bd-title { font-weight: 650; font-size: 13.5px; margin-bottom: 6px; }
.bd-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 118px 66px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; border-top: 1px solid var(--line); }
.bd-row .num { text-align: right; }
.bd-head { border-top: 0; font-size: 11px; color: var(--fg3); padding-top: 0; }
.bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-wr { display: flex; align-items: center; gap: 8px; }
.bd-wr .num { width: 38px; }
.bd-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--tag-red-bg); overflow: hidden; }
.bd-bar i { display: block; height: 100%; background: var(--up); }

details.filter-box { margin-bottom: 6px; }
details.filter-box > summary { cursor: pointer; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line2); border-radius: var(--radius); font-size: 13.5px; list-style: none; }
details.filter-box > summary::-webkit-details-marker { display: none; }
details.filter-box > summary:hover { background: var(--hover); }
details.filter-box[open] > summary { margin-bottom: 8px; background: var(--active); border-color: transparent; }
.tstat.ses-ASIA .v { color: var(--tag-blue); } .tstat.ses-ASIA { background: var(--tag-blue-bg); border-color: transparent; }
.tstat.ses-FRANKFURT .v { color: var(--tag-purple); } .tstat.ses-FRANKFURT { background: var(--tag-purple-bg); border-color: transparent; }
.tstat.ses-LONDON .v { color: var(--tag-green); } .tstat.ses-LONDON { background: var(--tag-green-bg); border-color: transparent; }
.tstat.ses-NY .v { color: var(--tag-yellow); } .tstat.ses-NY { background: var(--tag-yellow-bg); border-color: transparent; }
.tstat.ses-OVERLAP .v { color: var(--tag-orange); } .tstat.ses-OVERLAP { background: var(--tag-orange-bg); border-color: transparent; }

details.more-stats { margin-top: 12px; }
details.more-stats > summary { cursor: pointer; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line2); border-radius: var(--radius); font-size: 13.5px; list-style: none; }
details.more-stats > summary::-webkit-details-marker { display: none; }
details.more-stats > summary::before { content: '▸'; margin-right: 6px; color: var(--fg3); }
details.more-stats[open] > summary::before { content: '▾'; }
details.more-stats > summary:hover { background: var(--hover); }

/* ---- stats panel on the trades / backtest page */
.stats-panel { margin-top: 18px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--side); }
.stats-panel .panel-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.stats-panel .stat { background: var(--bg); }
.stats-panel details.more-stats > summary { background: var(--bg); }
.stats-panel .bd-card { background: var(--bg); }
.stats-panel h2 { margin-top: 18px; }
.journal-title { margin-top: 30px; }