/* App shell and page layouts. Mobile first: base rules are the phone layout, media queries add width.
   Phone (< 720): bottom tab bar.  Tablet (720-1099): icon rail.  Desktop (>= 1100): full sidebar. */

.app { min-height: 100dvh; display: block; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--accent-strong); color: var(--on-accent); border-radius: var(--r-sm); }
.skip:focus { left: 8px; }

/* ----- sidebar (rail / full) ----- */
.side { display: none; }
.brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 var(--sp-2); font-weight: var(--fw-b); font-size: var(--fs-lg); letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent-strong), #6f5cf0); display: grid; place-items: center; color: #fff; flex: none; }
.brand-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: grid; gap: 2px; margin-top: var(--sp-2); }
.nav-h { margin: var(--sp-4) 0 var(--sp-1); padding: 0 var(--sp-3); color: var(--tx-3); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: .06em; text-transform: uppercase; }
.nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--tx-2); font-weight: var(--fw-m); transition: background-color .14s, color .14s; }
.nav a:hover { background: var(--surface-3); color: var(--tx); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--surface-3); color: var(--tx-2); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.nav a[aria-current="page"] .count { background: var(--accent-soft); color: var(--accent); }
.side-f { margin-top: auto; display: grid; gap: var(--sp-2); }
.side-user { display: flex; align-items: center; gap: 10px; padding: var(--sp-2); border-radius: var(--r-md); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-weight: var(--fw-b); font-size: var(--fs-sm); flex: none; }

/* ----- top bar ----- */
.main-col { min-width: 0; }
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--top-h); padding: 0 var(--page-pad); }
.top-title { font-size: var(--fs-lg); font-weight: var(--fw-b); margin-right: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-title .brand-mark { width: 26px; height: 26px; border-radius: 8px; }
.top-title .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--page-pad) 10px; overflow-x: auto; scrollbar-width: none; }
.status::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); white-space: nowrap; }
.chip .l { color: var(--tx-3); }
.chip b { font-weight: var(--fw-b); }
.chip select { width: auto; height: 28px; border: 0; background-color: transparent; padding: 0 24px 0 0; font-weight: var(--fw-m); }
.chip select:focus-visible { box-shadow: none; }
.stop-banner { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--page-pad); background: var(--bad-soft); color: var(--bad); font-weight: var(--fw-m); border-bottom: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }

/* ----- pages ----- */
.page { padding: var(--sp-4) var(--page-pad) var(--sp-6); max-width: 1480px; margin: 0 auto; display: grid; gap: var(--sp-4); }
.page-h { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.page-h h1 { font-size: var(--fs-xl); font-weight: var(--fw-b); letter-spacing: -.01em; }
.page-h p { color: var(--tx-2); font-size: var(--fs-sm); margin-top: 2px; }
.page-h .actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.toolbar .spacer { margin-left: auto; }

/* ----- bottom tab bar (phone) ----- */
.tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
.tabbar a, .tabbar button { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; background: transparent; color: var(--tx-3); font-size: var(--fs-xs); font-weight: var(--fw-m); min-height: var(--tap); }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.tabbar .badge-dot { position: absolute; top: 8px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent-strong); color: var(--on-accent); font-size: 10px; font-weight: var(--fw-b); display: grid; place-items: center; }

/* ----- overview ----- */
.grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.sparkline { width: 100%; height: 120px; display: block; }
.list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.list-row.link { cursor: pointer; }
.list-row.link:hover { background: var(--surface-2); }

/* ----- charts and signals ----- */
.cs { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.cs-chart { display: grid; grid-template-rows: auto 1fr auto; min-height: 420px; }
.chart-wrap { position: relative; min-height: 340px; height: 52vh; }
.chart-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.chart-legend { position: absolute; left: 12px; top: 8px; font-size: var(--fs-xs); color: var(--tx-2); display: flex; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.cs-chart { order: -1; }
.cs-list { display: grid; align-content: start; max-height: 520px; overflow-y: auto; }
.cs-item { display: grid; gap: 4px; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border: 0; border-top: 1px solid var(--line); background: transparent; border-left: 3px solid transparent; }
.cs-item:first-child { border-top: 0; }
.cs-item:hover { background: var(--surface-2); }
.cs-item[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.cs-item.dim b { color: var(--tx-2); }
.cs-item.dim { background: var(--surface-2); }
.tools { display: flex; gap: 2px; flex-wrap: wrap; }

/* ----- settings ----- */
.set { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }
.set-nav { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.set-nav::-webkit-scrollbar { display: none; }
.set-nav button { flex: none; height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--tx-2); font-weight: var(--fw-m); display: inline-flex; align-items: center; gap: 8px; }
.set-nav button[aria-current="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.savebar { position: sticky; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ----- style guide ----- */
.swatches { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sw { display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--tx-2); }
.sw i { display: block; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line-2); }

/* ================= tablet: icon rail ================= */
@media (min-width: 720px) {
  .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); padding-bottom: 0; }
  .side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: var(--sp-2); background: var(--surface); border-right: 1px solid var(--line); align-items: stretch; overflow-y: auto; }
  .brand .name, .nav .lbl, .nav .count, .nav-h, .side-user .meta { display: none; }
  .brand { justify-content: center; padding: 0; }
  .nav a { justify-content: center; padding: 0; height: 44px; }
  .side-user { justify-content: center; padding: var(--sp-2) 0; }
  .tabbar { display: none; }
  .top-title .brand-mark { display: none; }
  .savebar { bottom: var(--sp-4); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-wrap { height: 56vh; }
}
/* ================= wide tablet and desktop: one-row top bar, split layouts ================= */
@media (min-width: 1100px) {
  .top { display: flex; align-items: center; }
  .top-row { display: contents; }
  .top-title { order: 1; margin: 0; padding-left: var(--page-pad); min-width: 170px; }
  .status { order: 2; flex: 1; justify-content: flex-end; padding: 0 var(--sp-3); }
  .top-actions { order: 3; padding-right: var(--page-pad); }
  .grid-2.wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .cs-chart { order: 0; }
  .cs { grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - var(--top-h) - 120px); min-height: 560px; }
  .cs-chart { min-height: 0; }
  .chart-wrap { height: auto; min-height: 0; }
  .cs-side { min-height: 0; display: grid; grid-template-rows: auto 1fr; }
  .cs-list { max-height: none; min-height: 0; }
  .set { grid-template-columns: 220px minmax(0, 1fr); }
  .set-nav { flex-direction: column; overflow: visible; position: sticky; top: calc(var(--top-h) + var(--sp-4)); }
  .set-nav button { border-radius: var(--r-md); border-color: transparent; background: transparent; justify-content: flex-start; }
  .set-nav button:hover { background: var(--surface-3); }
  .set-nav button[aria-current="true"] { background: var(--accent-soft); }
}
/* ================= desktop: full sidebar ================= */
@media (min-width: 1280px) {
  .app { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .brand .name, .nav .lbl, .nav-h, .side-user .meta { display: block; }
  .brand .name { display: inline; }
  .nav .lbl { display: inline; }
  .nav .count { display: inline-grid; }
  .brand { justify-content: flex-start; padding: 0 var(--sp-2); }
  .nav a { justify-content: flex-start; padding: 0 var(--sp-3); height: 40px; }
  .side-user { justify-content: flex-start; padding: var(--sp-2); }
}
@media (min-width: 720px) and (max-width: 1279px) { .chip.opt, .si.opt { display: none; } }
#view:focus { outline: none; }
.status { min-width: 0; }
@media (max-width: 1099px) { .top .top-actions .hide-sm { display: none; } }

/* ================= round 2 layout changes ================= */
/* quiet status line replaces the pill chips */
.status { gap: 0; padding-top: 0; padding-bottom: 10px; }
.top-title { display: flex; }
.side-f { margin-top: auto; display: grid; gap: var(--sp-1); }
.side-f .nav { margin-top: 0; }
.side-div { height: 1px; background: var(--line); margin: var(--sp-2) 0; }

/* the page title shows in the top bar on small screens and in the page head on wide ones */
@media (max-width: 1099px) { .page-h h1 { display: none; } .page-h { align-items: center; } }
@media (min-width: 1100px) { .top-title { display: none; } .status { padding-left: var(--page-pad); justify-content: flex-start; } }

/* charts page: both panels share one height and one gap */
.cs { gap: var(--sp-4); }
.cs-side, .cs-chart { display: flex; flex-direction: column; min-height: 0; }
.cs-side .cs-list { flex: 1; min-height: 0; }
.cs-chart .chart-wrap { flex: 1; min-height: 320px; }
.chart-wrap .kline { position: absolute; inset: 0; }
@media (min-width: 1100px) {
  .cs { grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - var(--top-h) - 130px); min-height: 520px; }
  .cs-side .cs-list { max-height: none; }
}
@media (max-width: 1099px) { .cs-side .cs-list { max-height: 420px; } .cs-chart .chart-wrap { height: 52vh; flex: none; } }

/* settings master-detail */
.set { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .set { grid-template-columns: 290px minmax(0, 1fr); } .set-master { position: sticky; top: calc(var(--top-h) + var(--sp-4)); } }
.set-master.card { padding: var(--sp-3); }
@media (max-width: 1099px) { .set-master.card { padding: var(--sp-3); } }

@media (max-width: 899px) { .grp-h .m.hide-sm { display: none; } }
@media (min-width: 1280px) { .grid-2.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= round 3: audit fixes ================= */
@media (max-width: 1099px) {
  .top { position: static; backdrop-filter: none; background: transparent; border-bottom: 0; }
  .top-row { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .status { border-bottom: 1px solid var(--line); padding-top: 8px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.top-title { font-size: var(--fs-lg); font-weight: var(--fw-b); }
.list-row .log-at { min-width: 132px; }
@media (max-width: 719px) { .list-row { flex-wrap: wrap; gap: 2px var(--sp-3); } .list-row .log-at { min-width: 0; flex-basis: 100%; } .list-row .grow { flex-basis: 100%; } }
/* simple statistics tables scroll sideways on a phone; the first column stays in view */
.tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.tbl th:first-child { background: var(--surface-2); }
.tbl tr.sel td:first-child { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.tbl .linkish { padding: 0; border: 0; background: none; color: inherit; font-weight: var(--fw-b); text-align: left; cursor: pointer; }
.tbl .linkish:hover { color: var(--accent); }
.tbl td { padding-top: 14px; padding-bottom: 14px; }
.blocked-tag { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- touch: every target is at least 44 x 44 px on a coarse pointer ---------- */
@media (pointer: coarse) {
  .btn, .btn.sm, .ib, .fbar .ib, .seg button, .fbar .seg button, .tabs button, .set-nav button, .back, .sg-item, .menu-p button, .sheet-list a, .sheet-list button, .more-row .btn, .ptabs button, .grp-h > button { min-height: 44px; }
  .ib, .fbar .ib { min-width: 44px; width: 44px; height: 44px; }
  .xs-ib { width: 44px; height: 44px; }
  .btn.sm { height: 44px; }
  .seg button { min-width: 44px; justify-content: center; }
  input[type="text"], input[type="number"], input[type="password"], select, .search input, .fbar input.min { height: 44px; }
  .si a, .si select { min-height: 44px; display: inline-flex; align-items: center; }
  .si a { padding: 0 12px; margin: 0 -12px; }
  .tbl .linkish { min-height: 44px; }
  .qa .btn { height: 44px; font-size: var(--fs-sm); }
  .dt-row .c.act .btn { height: 44px; }
  .check input { width: 24px; height: 24px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  /* the switch keeps its 40 x 24 look; its button is larger and transparent */
  .switch { width: 52px; height: 44px; border: 0; background: transparent; }
  .switch::before { content: ""; position: absolute; left: 6px; top: 10px; width: 40px; height: 24px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-3); transition: background-color .16s, border-color .16s; }
  .switch::after { top: 13px; left: 9px; }
  .switch[aria-checked="true"]::before { background: var(--accent-soft); border-color: var(--accent); }
  .switch[aria-checked="true"]::after { transform: translateX(16px); }
  .tbl td { padding-top: 16px; padding-bottom: 16px; }
}
.skip { min-height: 0; }

.menu-p [role="group"] { display: contents; }
.cs-item[aria-selected="true"] { outline-offset: -2px; }
.cs-list:focus-visible { outline-offset: -2px; }
.dt-item.dim { background: var(--surface-2); }
.pin-note { color: var(--warn); }

/* status line: plain items with a gap, no separators */
.status { gap: 6px 20px; }
.status .si + .si { margin-left: 0; padding-left: 0; border-left: 0; }
.status .tag { background: transparent; padding: 0; height: auto; font-weight: var(--fw-m); }
.status .tag.warn { color: var(--warn); } .status .tag.bad { color: var(--bad); }
.status #pnlWarn { padding: 0 8px; background: var(--warn-soft); height: 22px; cursor: pointer; }
.nav a .lbl { font-size: var(--fs-md); }

/* ---------- Charts & Signals page ---------- */
.cs { gap: var(--sp-4); }
.cs-panel { order: -1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cs-side { display: flex; flex-direction: column; min-height: 0; }
.cs-track { display: grid; }
.cs-list { flex: 1; min-height: 0; overflow: auto; overflow-anchor: none; max-height: 420px; }
.cs-row { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; }
.cs-row:first-child { border-top: 0; }
.cs-row:hover { background: var(--surface-2); }
.cs-row[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.cs-row.dim { background: var(--surface-2); }
.cs-row.dim b { color: var(--tx-2); }
.cs-orderbar { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cs-orderin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.cs-facts { display: flex; flex-wrap: wrap; gap: 4px var(--sp-5); }
.cs-fact { display: grid; gap: 2px; }
.cs-fact .l { color: var(--tx-3); font-size: var(--fs-sm); }
.cs-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.cs-body { min-height: 340px; height: 52vh; }
@media (min-width: 1100px) {
  .cs { grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - var(--top-h) - 150px); min-height: 560px; }
  .cs-panel { order: 0; }
  .cs-list { max-height: none; }
  .cs-body { height: auto; flex: 1; }
}
@media (pointer: coarse) { .cs-row { min-height: 44px; } .cs-tf, .cs-ind, .cs-fit { min-height: 44px; min-width: 44px; } .cs-indw .ib { width: 44px; height: 44px; } }
.cs-body { display: flex; }
.cs-tfs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }

/* forms and tables inside an opened trade row */
.stops { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.stops label:not(.chk) { display: grid; gap: 4px; color: var(--tx-2); font-size: var(--fs-sm); }
.stops input[type="number"] { width: 130px; }
.ords { overflow-x: auto; }

/* ---------- strategies page ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix thead th { color: var(--tx-3); font-weight: var(--fw-m); }
.matrix td.off { opacity: .6; }
.mx-cell { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.chk { display: inline-flex; align-items: center; gap: 6px; }
.settings.one { display: block; max-width: none; }
.settings.one > form.card { max-width: none; }
#view-strategies .mstats { padding: 0; border: 0; }
@media (min-width: 1100px) { #view-strategies .stack[id^="strategy-"] { grid-template-columns: minmax(0, 1fr); } }
/* the settings cards are forms with their own rows: they need the padding the generic card does not have */
form.card { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
form.card > .card-h { padding-left: 0; padding-right: 0; }

/* ---------- settings: master list and detail ---------- */
.set { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.set-master { padding: var(--sp-3); }
.set.list-only .set-pane, .set.detail-only .set-master { display: none; }
.back-row { margin-bottom: var(--sp-2); }
.set-head { margin-bottom: var(--sp-3); }
.set-crumb { color: var(--tx-3); font-size: var(--fs-sm); }
.set-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-b); }
.set-head h2:focus { outline: none; }
@media (min-width: 1100px) {
  .set { grid-template-columns: 290px minmax(0, 1fr); }
  .set-master { position: sticky; top: calc(var(--top-h) + var(--sp-4)); }
  .back-row { display: none; }
}
.fr label { display: block; font-size: var(--fs-md); color: var(--tx); }
.fr { min-height: 44px; padding: 4px 0; }
.fi textarea.lines { width: 220px; height: 112px; padding: var(--sp-2) var(--sp-3); font-family: var(--mono); text-align: left; resize: vertical; }
@media (max-width: 719px) { .fr .fi textarea.lines { width: 100%; } }

/* ---------- compact tables (display preference) ---------- */
.compact .dt-row { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.compact .pos-h { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.compact .tbl td { padding-top: 7px; padding-bottom: 7px; }
.compact .cs-row { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.compact .list-row { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.dirty-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--surface-3); border-top: 1px solid var(--line); }

/* wide tables inside a card scroll sideways instead of widening the page */
.ords { overflow-x: auto; }
.ords table { min-width: 460px; }
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { min-height: 44px; }
  .acard input, .set-body input, .set-body select { min-height: 44px; }
}

.cs-orderin .tag { white-space: normal; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; max-width: 100%; line-height: 1.3; }
.cs-orderin { min-width: 0; }

/* ---------- Active trades as a table ---------- */
.dt.cols-trades { --cols: minmax(170px, 1.5fr) minmax(76px, .8fr) minmax(76px, .8fr) minmax(76px, .8fr) minmax(200px, 1.6fr) minmax(84px, .8fr) 204px; }
.dt-item.pl-up { box-shadow: inset 3px 0 0 var(--good); } .dt-item.pl-down { box-shadow: inset 3px 0 0 var(--bad); }
.dt-row .c.main .pick { margin-right: 2px; }
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.qa .btn { height: 28px; padding: 0 6px; font-size: var(--fs-xs); width: 100%; min-width: 0; }
.trade-detail .stops { margin: 0; }
.trade-detail .ords, .trade-detail .note-box { margin: 0; }
.dt-item .dt-detail { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1099px) { .dt-detail.trade-detail { grid-template-columns: minmax(0, 1fr); } .qa .btn { height: 36px; font-size: var(--fs-sm); } }
@media (max-width: 719px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis .stat { padding: var(--sp-3); } .kpis .stat .v { font-size: var(--fs-lg); } .kpis .stat .d { font-size: var(--fs-xs); } }
@media (pointer: coarse) { .qa .btn { height: 44px; } .dt-row .c.main .pick { width: 24px; height: 24px; } }

@media (min-width: 720px) { .dt-row .c.main { flex-wrap: nowrap; } .dt-row .c.main .sym { min-width: 0; } .dt-row .c.main .sym .meta { flex-wrap: wrap; } }

/* ---------- strategies: cards side by side, parameters on click ---------- */
.strat-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .strat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .strat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strat-card.open { grid-column: 1 / -1; }
.strat-card .card-h h3 { min-width: 0; }
.strat-toggle { gap: 8px; }
.strat-form { margin-top: var(--sp-3); }
.strat-form form.bare { padding: 0; }
.strat-form .foot { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); }
.runs-on { display: grid; grid-template-columns: 1fr; gap: 4px; border-bottom: 0; }
.runs-list { display: grid; gap: 6px; }
.runs-chip { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 44px; }
.runs-chip .chk { flex: 1; min-width: 0; }
.runs-chip.on { border-color: var(--accent); }
.runs-chip .dot.bad { background: var(--bad); box-shadow: none; } .runs-chip .dot.ok { background: var(--good); box-shadow: none; }

.strat-card .mstats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.strat-card .mstats .v { font-size: var(--fs-md); }
.strat-card .card-h h3 { overflow-wrap: anywhere; line-height: 1.25; }
.strat-card .card-h { align-items: flex-start; padding-top: var(--sp-3); }
.runs-on .fi, .runs-on .runs-list { display: grid; width: 100%; }
.runs-on > label { font-weight: var(--fw-m); color: var(--tx-2); font-size: var(--fs-sm); }
.strat-grid { grid-auto-flow: dense; }
.strat-card.open .strat-form { max-width: 760px; }

/* ---------- blocks inside an opened row ---------- */
.pblock { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.pblock-h { margin: 0; color: var(--tx-3); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: .05em; text-transform: uppercase; }
.span-all { grid-column: 1 / -1; }
.kv { display: grid; gap: 0; margin: 0; font-size: var(--fs-sm); }
.kv > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 5px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--tx-3); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.dt-detail.trade-detail { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.pblock .stops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: 0; border: 0; background: none; align-items: start; }
.pblock .stops .chk { grid-column: 1 / -1; }
.pblock .stops-act { grid-column: 1 / -1; display: flex; gap: var(--sp-2); justify-content: flex-end; }
.pblock .stops input[type="number"] { width: 100%; }
.pblock .stops .err { grid-column: 1 / -1; }
.pblock .ords { margin: 0; }
.pblock .note-box { margin: 0; }
@media (max-width: 1099px) { .dt-detail.trade-detail { grid-template-columns: minmax(0, 1fr); } }

/* ---------- full width on a large screen, readable forms ---------- */
.page { max-width: none; }
.set-pane { max-width: 920px; }
.set-body.card.pad { padding: var(--sp-4); }
.set-body.card.pad > :first-child { margin-top: 0; }
.field > label, .setting .t label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.set-body .field > label, .set-body .setting .t label { display: flex; }
.field > label .tag { flex: none; }

.acct-card { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }
.acct-card > .card-h { padding-left: 0; padding-right: 0; }
.acct-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
.acct-kv > div:nth-child(2) { border-top: 0; }
@media (max-width: 719px) { .acct-kv { grid-template-columns: minmax(0, 1fr); } .acct-kv > div:nth-child(2) { border-top: 1px solid var(--line); } }
.acct-card .foot { margin-top: 0; }

.page { margin: 0; width: 100%; }

/* ---------- Charts & Signals: the page fills the screen exactly, nothing scrolls except a long list ---------- */
@media (min-width: 1100px) {
  body[data-page="charts"] .main-col { height: 100dvh; display: flex; flex-direction: column; }
  body[data-page="charts"] .top { flex: none; }
  body[data-page="charts"] .banner { flex: none; }
  body[data-page="charts"] #main { flex: 1; min-height: 0; }
  body[data-page="charts"] #view-charts { height: 100%; }
  body[data-page="charts"] #view-charts > .page { height: 100%; min-height: 480px; grid-template-rows: auto minmax(0, 1fr); padding-bottom: var(--sp-4); gap: var(--sp-3); }
  body[data-page="charts"] .cs { height: auto; min-height: 0; grid-template-columns: 380px minmax(0, 1fr); }
  body[data-page="charts"] .page-h p { display: none; }
}
.cs-row { padding: 7px var(--sp-4); gap: 2px; }
.cs-row .row { min-height: 20px; }
.dt-row.openable { cursor: pointer; }
.dt-row.openable:hover { background: var(--surface-2); }

/* nothing of a row may reach outside its card */
.card.flush { overflow: hidden; }
.dt-row .c.act { min-width: 0; }
.qa .btn { overflow: hidden; text-overflow: ellipsis; }