/* CogniTrade tab */
.ct { display: flex; flex-direction: column; height: calc(100vh - 52px); overflow: hidden; gap: 8px; padding: 8px 10px; box-sizing: border-box; }
.ct.hidden { display: none; }
.ct .small { font-size: 11.5px; }
.ct .mono { font-family: var(--mono); }
.ct .nowrap { white-space: nowrap; }
.ct-sp { flex: 1; }
.ct-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-title b { font-size: 15px; }
.ct-cfg { display: flex; align-items: end; gap: 10px 14px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.ct-cfg label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.ct-cfg label.ct-chk { flex-direction: row; align-items: center; gap: 6px; color: var(--text); padding-bottom: 6px; }
.ct-cfg input:not([type=checkbox]), .ct-cfg select { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 8px; font: 12.5px var(--sans); }
.ct-cfg input[name=symbols] { width: 180px; } .ct-cfg input[type=number] { width: 80px; }
.ct-cfg.observe .ct-demo { display: none; }
.ct-note { background: rgba(255, 176, 32, .08); border: 1px solid rgba(255, 176, 32, .35); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; }
.ct-note.hidden { display: none; }
.ct-grid { flex: 1 1 60%; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.ct-vp { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.ct-vp > header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.ct-vp > header select { width: auto; flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 5px; padding: 2px 6px; font-size: 12px; }
.ct-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.ct-chart .ct-body { overflow: hidden; }
.ct-leg { margin-left: auto; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ct-leg i { display: inline-block; width: 14px; height: 2px; background: #f59e0b; }
.ct-leg i.c-band { background: none; border-top: 1px dashed #f59e0b99; }
.ct-mono { font: 11.5px/1.5 var(--mono); padding: 6px 10px; }
.ct-ml { border-bottom: 1px solid #ffffff08; padding: 2px 0; word-break: break-word; }
.ct-t { color: var(--accent); }
.ct-mod { color: #c4b5fd; }
.ct-heat { padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
.ct-hg { display: grid; grid-template-columns: 130px 1fr; gap: 6px; align-items: start; }
.ct-hm { font-size: 11px; color: var(--muted); padding-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-hc { display: flex; flex-wrap: wrap; gap: 2px; }
.ct-cell { display: flex; flex-direction: column; min-width: 76px; padding: 2px 6px; border-radius: 4px; font-size: 10.5px; color: var(--text); border: 1px solid #ffffff10; }
.ct-cell b { font: 600 11.5px var(--mono); }
.ct-perf { display: flex; flex-direction: column; overflow: hidden; }
.ct-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 10px; padding: 8px 10px; }
.ct-kpis div { display: flex; flex-direction: column; }
.ct-kpis span { font-size: 10.5px; color: var(--muted); }
.ct-kpis b { font: 600 13px var(--mono); }
.ct-eq { flex: 1; min-height: 90px; position: relative; }
.ct-bottom { flex: 0 0 34%; min-height: 160px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.ct-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid var(--line); padding: 0 6px; }
.ct-tabs button { white-space: nowrap; background: none; border: 0; color: var(--muted); padding: 7px 12px; cursor: pointer; font: 12.5px var(--sans); border-bottom: 2px solid transparent; }
.ct-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.ct-tabbody { flex: 1; overflow: auto; padding: 6px 10px; }
.ct-tabbody .st-tbl td { padding: 4px 8px; }
.ct-md pre, .ct-log { white-space: pre-wrap; font: 11.5px/1.45 var(--mono); margin: 0; }
.ct .up { color: var(--buy); } .ct .down { color: var(--sell); }
@media (max-width: 900px) {
  .ct { height: auto; overflow: visible; }
  .ct-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 320px); }
  .ct-bottom { flex-basis: auto; height: 360px; }
}
.ct-tabbody .st-tbl td:nth-child(1), .ct-tabbody .st-tbl td:nth-child(2) { width: 1%; white-space: nowrap; }
.ct-btf { margin: 6px 0 8px; }
.ct-btf input { width: 110px; }
.ct-run { cursor: pointer; } .ct-run:hover td { background: var(--panel2); }
.ct-btr { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; background: var(--bg); }
.ct-btr > header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.ct-btr > header button { margin-left: auto; }
.ct-btc { margin: 0 10px 8px; } .ct-btc svg { width: 100%; height: 120px; display: block; background: #05070c; border-radius: 6px; }
.ct-btr details { padding: 0 10px 8px; } .ct-btr summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
/* Brain tab (autonomous scalper) */
.ct-bh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ct-brain { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(300px, 1fr) minmax(220px, .8fr); gap: 10px; padding: 8px 10px; align-items: start; }
.ct-decs { display: flex; flex-direction: column; gap: 8px; }
.ct-dec { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--bg); }
.ct-dec header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ct-gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; font-size: 11px; }
.ct-gates li { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-gates li b { flex: 0 0 104px; font-weight: 600; }
.ct-gates li span { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ct-gates li.ok b { color: var(--buy); } .ct-gates li.no b { color: var(--sell); }
.ct-pb { display: inline-flex; width: 120px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); }
.ct-pb i { display: block; height: 100%; } .ct-pb i.dn { background: var(--sell); } .ct-pb i.fl { background: #64748b; } .ct-pb i.upb { background: var(--buy); }
.ct-wb { display: inline-block; width: 70px; height: 6px; background: var(--line); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.ct-wb i { display: block; height: 100%; background: var(--accent); }
.ct-mem td, .ct-mem th { padding: 2px 6px; }
@media (max-width: 1200px) { .ct-brain { grid-template-columns: 1fr; } }
/* header: master switch, kill switch, config summary, view switcher */
.ct-master { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.ct-master input { appearance: none; width: 34px; height: 18px; border-radius: 9px; background: var(--line); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.ct-master input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1; transition: left .15s; }
.ct-master input:checked { background: var(--buy); } .ct-master input:checked::after { left: 18px; background: #fff; }
.ct-master input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#ctKill.on { background: var(--sell); color: #fff; border-color: var(--sell); }
.ct-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.ct-sum .up { color: var(--buy); }
.ct-views { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ct-views button { background: none; border: 0; color: var(--muted); padding: 5px 14px; cursor: pointer; font: 600 12.5px var(--sans); }
.ct-views button + button { border-left: 1px solid var(--line); }
.ct-views button.on { background: var(--accent); color: #fff; }
/* the three views share the space below the header */
.ct-overview { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-overview.hidden, .ct-brainview.hidden, .ct-sup.hidden { display: none; }
.ct-brainview { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.ct-sup { flex: 1; min-height: 0; display: flex; }
.ct-sup > .ai { flex: 1; min-width: 0; }
.ct-tabbody h4 { margin: 10px 0 4px; }
@media (max-width: 900px) { .ct-overview { flex: none; } .ct-sup { min-height: 80vh; } }