:root {
  --bg: #0f1419;
  --card: #1a2332;
  --text: #e7ecf3;
  --muted: #8b98a8;
  --accent: #3d8bfd;
  --danger: #e85d6c;
  --ok: #3ecf8e;
  --border: #2a3548;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.75rem max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

#app > .api-connect-banner {
  margin-bottom: 0.65rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
}

.card code {
  font-size: 0.68rem;
  word-break: break-all;
  background: #0d1117;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }
h2 { font-size: 1rem; margin: 1.25rem 0 0.5rem; font-weight: 600; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.35rem; }

.muted { color: var(--muted); font-size: 0.85rem; }
.small { font-size: 0.8rem; }
.tiny { font-size: 0.72rem; line-height: 1.35; }
.install-hint { margin-top: 0.5rem; padding: 0.5rem 0.55rem; background: #141c28; border-radius: 8px; border: 1px solid var(--border); }

label { display: block; font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0.15rem; }
input, select, button {
  font: inherit;
  color: var(--text);
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  width: 100%;
}

input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  cursor: pointer;
  margin-top: 0.75rem;
  font-weight: 600;
}
.btn.primary { background: var(--accent); border-color: #5a9fff; color: #fff; }
.btn.danger { background: #3a2228; border-color: var(--danger); color: #ffb3bc; }
.btn.small { width: auto; padding: 0.35rem 0.75rem; margin-top: 0; font-size: 0.85rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.error { color: #ff8a8a; margin: 0.35rem 0; font-size: 0.85rem; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0 0.75rem;
  border-bottom: 1px solid var(--border);
}

.pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #2a3548;
}
.pill.ok { background: #1e3d2f; color: var(--ok); }
.pill.warn { background: #3d3020; color: #ffb86b; }

/* Market-session pill — separate concept from "Live" (broker mode).
   Green when NSE F&O regular session is active; yellow during buffer
   windows where the bot is awake but real orders are still blocked;
   grey for weekends/holidays/off-hours when the bot is in auto-test-mode. */
.market-pill { letter-spacing: 0.02em; }
.market-pill.is-open    { background: #1e3d2f; color: var(--ok); }
.market-pill.is-buffer  { background: #3d3020; color: #ffb86b; }
.market-pill.is-closed  { background: #2a2f3a; color: #9aa3b2; }
.market-pill.is-unknown { background: #2a3548; color: #c6cad2; opacity: 0.85; }

/* ─── Live data feed health pill (header) ─── */
.data-feed-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: rgba(160, 160, 160, 0.12);
  color: var(--muted);
  cursor: help;
  white-space: nowrap;
}
.data-feed-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  flex: 0 0 auto;
}
.data-feed-pill.is-init,
.data-feed-pill.is-reconnecting {
  background: rgba(255, 184, 107, 0.12);
  color: #ffb86b;
  border-color: rgba(255, 184, 107, 0.45);
}
.data-feed-pill.is-reconnecting .data-feed-dot,
.data-feed-pill.is-init .data-feed-dot {
  animation: data-feed-pulse 1s ease-in-out infinite;
}
.data-feed-pill.is-connected {
  background: rgba(46, 160, 67, 0.18);
  color: #2ea043;
  border-color: rgba(46, 160, 67, 0.5);
}
.data-feed-pill.is-stale {
  background: rgba(255, 184, 107, 0.18);
  color: #f0a040;
  border-color: rgba(255, 184, 107, 0.55);
}
.data-feed-pill.is-polling {
  background: rgba(160, 160, 160, 0.18);
  color: #c0a060;
  border-color: rgba(192, 160, 96, 0.45);
}
.data-feed-pill.is-disconnected {
  background: rgba(218, 80, 80, 0.18);
  color: #f06060;
  border-color: rgba(218, 80, 80, 0.55);
}
.data-feed-pill.is-errored {
  /* Solid red — different from "reconnecting" pulse — and clickable
     (cursor changes) because the click handler kicks off a Relogin. */
  background: rgba(218, 80, 80, 0.22);
  color: #ff7070;
  border-color: rgba(218, 80, 80, 0.65);
  cursor: pointer;
}
.data-feed-pill.is-errored:hover { filter: brightness(1.15); }
.data-feed-pill.is-disconnected { cursor: pointer; }
.data-feed-pill.is-stalled {
  /* SSE never opened OR opened but no data — treat as a separate failure
     mode from "errored" (server-side build_snapshot raised) and from
     "reconnecting" (browser auto-retry). Click → manual EventSource
     restart. Solid orange-red so it stands out from both. */
  background: rgba(232, 120, 60, 0.22);
  color: #ff9050;
  border-color: rgba(232, 120, 60, 0.6);
  cursor: pointer;
}
.data-feed-pill.is-stalled:hover { filter: brightness(1.15); }
@keyframes data-feed-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@media (max-width: 959px) {
  /* Phone topbar is space-constrained — show only the dot, age in tooltip. */
  .layout-mobile .data-feed-label {
    max-width: 5.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── Top-level mode switcher (Live / Dashboard) ─── */
.mode-switcher {
  display: flex;
  gap: 0;
  padding: 0.55rem 0;
}
.mode-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-btn:first-child { border-radius: 8px 0 0 8px; }
.mode-btn:last-child { border-radius: 0 8px 8px 0; }
.mode-btn.active {
  background: var(--accent);
  border-color: #5a9fff;
  color: #fff;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.tab {
  flex: 0 0 auto;
  width: auto;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  font-size: 0.82rem;
}
.tab.active {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.tab-panel { padding-top: 0.75rem; }

.banner {
  background: #2d2618;
  border: 1px solid #5c4d1a;
  color: #f5e6a3;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.api-connect-banner {
  background: #2a1f24;
  border-color: #6b2d3a;
  color: #ffd6dc;
  margin-bottom: 0.65rem;
}

.safeguard-banner {
  background: #351b22;
  border-color: #8f3344;
  color: #ffd6dc;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.safeguard-banner.safeguard-critical {
  background: #5a0e1c;
  border-color: #ff5b73;
  color: #ffe2e8;
  box-shadow: 0 0 0 1px rgba(255, 91, 115, 0.45);
  animation: safeguard-critical-pulse 1.6s ease-in-out infinite;
}

@keyframes safeguard-critical-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 91, 115, 0.35); }
  50% { box-shadow: 0 0 0 3px rgba(255, 91, 115, 0.55); }
}

.order-error-banner {
  background: #4a0f1a;
  border: 2px solid #ff5b73;
  color: #ffe2e8;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 0 0 1px rgba(255, 91, 115, 0.5);
  position: sticky;
  top: 0.25rem;
  z-index: 50;
}
.order-error-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.order-error-title {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
}
.order-error-dismiss {
  background: #ffd6dc;
  color: #5a0e1c;
  border: 1px solid #ff5b73;
  font-weight: 600;
}
.order-error-dismiss:hover { background: #ffe2e8; }
.order-error-detail {
  margin: 0 0 0.35rem 0;
  font-size: 0.9rem;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
}
.order-error-hint {
  margin: 0.35rem 0 0 0;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 214, 220, 0.12);
  border-left: 3px solid #ffd6dc;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.order-error-rid {
  margin: 0.5rem 0 0 0;
  opacity: 0.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.safeguard-sync-btn {
  margin-left: auto;
  background: #ffd6dc;
  color: #5a0e1c;
  border: 1px solid #ff5b73;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.safeguard-sync-btn:hover:not([disabled]) {
  background: #ffe2e8;
}

.safeguard-sync-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.api-connect-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}

.api-connect-inner #api-connect-msg {
  flex: 1 1 12rem;
  min-width: 0;
  line-height: 1.45;
}

.api-connect-inner .btn.small {
  margin-top: 0;
  flex: 0 0 auto;
}

.layout-mobile .api-connect-inner .btn.small {
  min-height: 44px;
  padding: 0.45rem 0.9rem;
}

.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.row-actions .btn { margin-top: 0; width: auto; }

.spots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.spots.funds-spots {
  grid-template-columns: 1fr;
  margin: 0.35rem 0 0.5rem;
}

.metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
}
.metric .lbl { display: block; font-size: 0.72rem; color: var(--muted); }
.metric .val { font-size: 1.1rem; font-weight: 700; }

/* P&L strip */
.pnl-spots {
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0;
}

.lb-pnl .desk-section-title {
  margin-bottom: 0.45rem;
}

.pnl-metric .val.pnl-pos { color: var(--ok); }
.pnl-metric .val.pnl-neg { color: var(--danger); }

.layout-mobile .pnl-spots .pnl-metric:nth-child(3) { order: 1; }
.layout-mobile .pnl-spots .pnl-metric:nth-child(1) { order: 2; }
.layout-mobile .pnl-spots .pnl-metric:nth-child(2) { order: 3; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.65rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0.35rem 0;
}
.table-wrap.scroll { max-height: 55vh; overflow-y: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
table.data th, table.data td {
  padding: 0.45rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.data th { color: var(--muted); font-weight: 600; }

/* Long formatted option symbols (positions + SL) */
table.data td.sym-cell {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-weight: 500;
  font-size: 0.82rem;
  vertical-align: middle;
}
table.data td.td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
}
/* One table per expiry — add columns in thead/tbody of .tbl-positions-leg */
.positions-mount {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pos-expiry-block {
  margin: 0;
}
.pos-expiry-title {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.tbl-positions-leg {
  table-layout: fixed;
  width: 100%;
}
.tbl-positions-leg th.th-left {
  text-align: left;
}
.tbl-positions-leg th.th-right {
  text-align: right;
}
.tbl-positions-leg td.td-lots {
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 600;
}
.tbl-positions-leg td.sym-cell {
  font-size: 1.05rem;
  font-weight: 600;
}
.tbl-positions-leg td.td-sl {
  text-align: left;
  font-size: 0.8rem;
  color: var(--muted);
}
.tbl-positions-leg th.th-pick,
.tbl-positions-leg td.td-pick {
  width: 2.1rem;
  text-align: center;
  vertical-align: middle;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}
/* Phone: row-tap — hide row checkboxes visually; keep header "select all" for the expiry */
.layout-mobile .tbl-positions-leg tbody .pos-sl-pick {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
}
.layout-mobile .tbl-positions-leg td.td-pick {
  width: 0.25rem;
  padding: 0 0.05rem;
  border: none;
}
.layout-mobile .tbl-positions-leg tbody tr.pos-leg-row {
  cursor: pointer;
}
.layout-mobile .tbl-positions-leg tbody tr.pos-leg-row.pos-row-selected {
  box-shadow: inset 3px 0 0 0 var(--accent, #4a9eff);
  background: rgba(74, 158, 255, 0.08);
}
.layout-desktop .tbl-positions-leg tbody tr.pos-leg-row.pos-row-selected {
  background: rgba(74, 158, 255, 0.06);
}
.positions-sl-bulk-anchor {
  margin-top: 0.75rem;
}
.layout-desktop .positions-sl-bulk-anchor:empty {
  display: none;
}
.sl-bulk-form-host {
  margin-top: 0.5rem;
}
.layout-mobile .sl-bulk-form-host {
  padding-top: 0.65rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.layout-mobile #btn-sl-bulk {
  width: 100%;
  min-height: 48px;
  margin-top: 0.5rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.layout-desktop .sl-mobile-bulk-locate {
  display: none !important;
}
.layout-mobile .sl-mobile-bulk-locate {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
}
/* Phone: save vertical space — title + long copy hidden; row hint + fields only */
.layout-mobile .sl-bulk-form-host > h3 {
  display: none;
}
.layout-mobile #sl-bulk-help {
  display: none;
}
.layout-desktop .positions-sl-selection-hint {
  display: none !important;
}
/* Mobile positions: single-leg market exit (hidden on desktop — use Quick ticket there). */
.layout-desktop #pos-exit-one-wrap {
  display: none;
}
/* Phase 2: the chart workspace IS the position surface, so multi-leg
   "Exit selected @ market" is shown there even in desktop layout. Higher
   specificity (2 classes + id) than the .layout-desktop hide above, so it
   wins regardless of source order. */
.chart-workspace-body.layout-desktop #pos-exit-one-wrap {
  display: block;
}

.pos-exit-one-wrap {
  margin: 0.5rem 0 0.75rem;
}

.pos-exit-one-wrap .btn {
  width: 100%;
}

/* Phase 2 polish: collapsible SL-attach in the chart sidebar so the tall
   form doesn't dominate the 280px column. Collapsed by default; the
   exit-selected control sits above it and stays visible. */
.chart-slbulk-details {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.09));
  padding-top: 0.35rem;
}
.chart-slbulk-details > summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #9aa7b4);
  padding: 0.2rem 0;
  user-select: none;
}
.chart-slbulk-details[open] > summary {
  margin-bottom: 0.4rem;
}
/* Explicitly hide the fields when collapsed. The native <details> close can
   be defeated by children with their own display (.grid2 is display:grid),
   so force it. Only applies while closed — open state keeps each wrap's own
   visibility from slBulkSyncVisibility(). */
.chart-slbulk-details:not([open]) > :not(summary) {
  display: none !important;
}

.pos-exit-one-msg {
  margin: 0.35rem 0 0;
}

.sl-bulk-type-hint {
  margin: 0.25rem 0 0.35rem;
  line-height: 1.4;
  color: var(--muted);
}
.tbl-positions-leg .pos-sl-pick,
.tbl-positions-leg .pos-sl-pick-all {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  vertical-align: middle;
}
.tbl-positions-leg th:nth-child(2),
.tbl-positions-leg td:nth-child(2) {
  width: 24%;
}
.tbl-positions-leg th:nth-child(3),
.tbl-positions-leg td:nth-child(3) {
  width: 11%;
}
.tbl-positions-leg th:nth-child(4),
.tbl-positions-leg td:nth-child(4),
.tbl-positions-leg th:nth-child(5),
.tbl-positions-leg td:nth-child(5),
.tbl-positions-leg th:nth-child(6),
.tbl-positions-leg td:nth-child(6) {
  width: 13%;
}
.tbl-positions-leg th:nth-child(7),
.tbl-positions-leg td:nth-child(7) {
  width: 18%;
}

/* ─── Mobile positions: Kotak-style cards (not a cramped table) ─── */
.layout-mobile .pos-pickall-bar {
  display: flex;
  align-items: center;
  margin: 0.15rem 0 0.5rem;
  padding: 0 0.05rem;
}
.layout-mobile .pos-pickall-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.layout-mobile .pos-cards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.layout-mobile .pos-card {
  background: var(--panel-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.65rem 0.75rem 0.55rem;
}
.layout-mobile .pos-card-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.layout-mobile .pos-card-lots {
  font-size: 1.08rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.02em;
}
.layout-mobile .pos-card-tag {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.layout-mobile .pos-card-row2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}
.layout-mobile .pos-card-name {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.layout-mobile .pos-card-pnl {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.layout-mobile .pos-card-pnl.pnl-pos {
  color: var(--ok, #3ecf8e);
}
.layout-mobile .pos-card-pnl.pnl-neg {
  color: var(--danger, #ff6b6b);
}
.layout-mobile .pos-card-row3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07));
  font-size: 0.78rem;
  color: var(--muted);
}
.layout-mobile .pos-card-metric {
  flex: 1 1 42%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-mobile .pos-card-metric strong {
  color: var(--text);
  font-weight: 600;
}
.layout-mobile .pos-card-row4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
}
.layout-mobile .pos-card-pick {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.layout-mobile .pos-card-pick input.pos-sl-pick {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}
.layout-mobile .pos-card-sl {
  flex: 1;
  text-align: right;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.layout-mobile .pos-card-sl-l {
  color: var(--muted);
  margin-right: 0.25rem;
}
.layout-mobile .pos-card.pos-leg-row.pos-row-selected {
  box-shadow: inset 3px 0 0 0 var(--accent, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
  border-color: rgba(74, 158, 255, 0.25);
}

/* SL rules: stacked cards on phone (table stays on desktop) */
.layout-desktop .sl-cards-mount {
  display: none !important;
}

.layout-mobile .sl-rules-table-wrap {
  display: none;
}

.layout-mobile .sl-cards-mount {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.layout-mobile .sl-cards-mount[hidden] {
  display: none !important;
}

.layout-mobile .sl-card {
  background: var(--panel-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 0.65rem 0.75rem 0.6rem;
}

.layout-mobile .sl-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.07));
}

.layout-mobile .sl-card-kind {
  min-width: 0;
}

.layout-mobile .sl-card-kind strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.38;
  word-break: break-word;
  color: var(--text);
}

.layout-mobile .sl-card-security {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.35rem;
}

.layout-mobile .sl-card-security .sl-card-v {
  font-weight: 650;
  line-height: 1.35;
}

.layout-mobile .sl-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  width: 100%;
}

.layout-mobile .sl-card-actions {
  display: flex;
  justify-content: flex-end;
}

.layout-mobile .sl-card-actions .del-sl {
  min-height: 2.25rem;
  padding: 0.25rem 0.65rem;
}

.layout-mobile .sl-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.layout-mobile .sl-card-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
}

.layout-mobile .sl-card-k {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.layout-mobile .sl-card-v {
  color: var(--text);
  word-break: break-word;
}

.layout-mobile .sl-card-v.sl-card-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.check { display: flex; align-items: center; gap: 0.5rem; margin: 0.65rem 0; font-size: 0.85rem; }
.check input { width: auto; }
.layout-mobile .lb-failsafe .check { display: none; }

.contract-line { margin: 0.5rem 0; word-break: break-all; }

.mono { white-space: pre-wrap; word-break: break-word; }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.metrics .metric { font-size: 0.8rem; }

.leg-strikes label { margin-top: 0.35rem; }
.del-sl {
  background: transparent;
  border: none;
  color: var(--danger);
  width: auto;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

/* ─── Laptop / wide: Streamlit-like full layout ─── */
.desk-section-title {
  margin-top: 0;
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
}

.desk-only {
  display: none;
}

@media (min-width: 960px) {
  .install-hint {
    display: none;
  }

  .desk-only {
    display: block;
  }

  #app {
    max-width: none;
    padding: 0.75rem clamp(1rem, 2vw, 2rem) calc(2rem + env(safe-area-inset-bottom));
  }

  .mobile-tabs {
    display: none !important;
  }

  .layout-desktop .topbar {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }

  .layout-desktop .panel-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.35rem;
  }

  .layout-desktop .spots.panel-card {
    padding: 0.65rem 1rem;
  }

  .layout-desktop .row-actions.panel-card {
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
  }

  .strip-global {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }

  .desk-mid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
    max-width: 1480px;
    margin: 0 auto;
  }

  .desk-mid > .lb-positions {
    grid-column: 1 / -1;
  }

  .desk-left,
  .desk-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  .grid-qt-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout-desktop .metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .layout-desktop .lb-dash .table-wrap.scroll {
    max-height: min(48vh, 440px);
  }

  .dash-sub {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
  }

  #mode-dash .lb-dash {
    max-width: 1480px;
    margin: 0 auto;
  }

  .layout-desktop .mode-switcher {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }

  h2.desk-section-title {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
  }
}

@media (min-width: 1200px) {
  .grid-qt-wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ─── Dashboard: calendar heatmap + controls ─── */
.dash-trades-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
}

.dash-trades-log-toolbar select {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 100%;
}

.dash-trades-log-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  max-width: 460px;
}
.cal-nav .btn {
  width: auto;
  margin: 0;
  padding: 0.3rem 0.65rem;
  font-size: 1rem;
}
.cal-nav select {
  flex: 1;
  min-width: 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 0.75rem;
  max-width: 460px;
}
.cal-header {
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
  padding: 0.2rem 0;
  font-weight: 600;
}
.cal-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  min-height: 32px;
}
.cal-cell.empty {
  background: transparent;
}
.cal-cell .cal-day { font-size: 0.85rem; font-weight: 700; }
.cal-cell .cal-pnl { font-size: 0.58rem; font-weight: 400; opacity: 0.85; }
.cal-lv0 { background: #B71C1C; }
.cal-lv1 { background: #EF5350; }
.cal-lv2 { background: #353535; }
.cal-lv3 { background: #66BB6A; }
.cal-lv4 { background: #1B5E20; }

.dash-campaigns-detail {
  margin-top: 0.5rem;
  padding: 0.65rem;
  background: #141c28;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Tags editing */
.tags-table input {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.35rem;
  font-size: 0.78rem;
  width: 100%;
  min-width: 4rem;
}
.tags-table input:focus {
  outline: 1px solid var(--accent);
}

@media (max-width: 959px) {
  .cal-cell { min-height: 38px; }
  .cal-cell .cal-day { font-size: 0.95rem; }
  .cal-cell .cal-pnl { font-size: 0.62rem; }
  .cal-header { font-size: 0.78rem; }
}

/* Strategy: hide order-type extras on phone (defaults NRML/MKT/DAY in JS) */
.strat-speed-hint {
  display: none;
  margin: 0.15rem 0 0.35rem;
}

/* Strategy spot: read-only index readout (hidden field holds value for API) */
.st-spot-info {
  margin-top: 0.2rem;
  padding: 0.55rem 0.75rem;
  background: #141c28;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  color: var(--text);
  user-select: none;
}

.layout-mobile .st-spot-info {
  font-size: 1.15rem;
  padding: 0.62rem 0.85rem;
}

/* Strategy numeric steppers (+/−) — full controls on phone, inputs-only on desktop */
.lb-strategies .num-stepper {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 0.15rem;
  touch-action: manipulation;
}

.lb-strategies .num-stepper .step-btn {
  flex: 0 0 52px;
  min-height: 52px;
  width: 52px;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  background: #243044;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lb-strategies .num-stepper .step-btn:active {
  background: #2d3d56;
}

.lb-strategies .num-stepper .stepper-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  min-height: 52px;
}

.layout-mobile .lb-strategies .btn-place-strat {
  width: 100%;
  min-height: 56px;
  font-size: 1.12rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
}

@media (min-width: 960px) {
  .lb-strategies .num-stepper {
    display: block;
  }

  .lb-strategies .num-stepper .step-btn {
    display: none !important;
  }

  .lb-strategies .num-stepper .stepper-input {
    width: 100%;
    min-height: auto;
    text-align: left;
    font-size: inherit;
    font-weight: inherit;
  }

  .lb-strategies .btn-place-strat {
    width: auto;
    min-height: auto;
    font-size: inherit;
    margin-top: 0.75rem;
    padding: 0.55rem 0.65rem;
  }
}

@media (max-width: 959px) {
  .strat-advanced-only {
    display: none !important;
  }

  .strat-speed-hint {
    display: block;
  }

}

/* ─── Phone: larger type + softer secondary text (easier on eyes) ─── */
@media (max-width: 959px) {
  #view-login.card {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  #view-login.card h1 {
    font-size: 1.45rem;
  }

  #view-login.card .muted,
  #view-login.card .tiny {
    font-size: 0.95rem;
  }

  .layout-mobile {
    --muted: #b4c0d0;
  }

  .layout-mobile #app {
    font-size: 1.0625rem;
    line-height: 1.55;
    /* Space for fixed bottom tab bar + home indicator */
    padding: 0.55rem 0.7rem calc(4.35rem + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }

  .layout-mobile h2 {
    font-size: 1.15rem;
    margin: 0.55rem 0 0.4rem;
  }

  .layout-mobile h3 {
    font-size: 1.05rem;
    margin: 0.65rem 0 0.35rem;
  }

  .layout-mobile .desk-section-title {
    font-size: 1.12rem;
  }

  .layout-mobile .tabs {
    padding: 0.4rem 0;
    gap: 0.2rem;
  }

  /* Thumb-reach: main nav pinned to bottom on phone */
  .layout-mobile .mobile-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin: 0;
    padding: 0.4rem max(0.45rem, env(safe-area-inset-left, 0px))
      calc(0.35rem + env(safe-area-inset-bottom, 0px)) max(0.45rem, env(safe-area-inset-right, 0px));
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.42);
  }

  .layout-mobile .tab {
    flex: 1;
    text-align: center;
    padding: 0.55rem 0.3rem;
    font-size: 0.98rem;
    min-width: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .layout-mobile .tab.active {
    font-weight: 700;
  }

  .layout-mobile .topbar {
    font-size: 1.08rem;
    position: sticky;
    top: 0;
    z-index: 90;
    margin: 0 -0.15rem;
    padding-left: max(0.15rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.15rem, env(safe-area-inset-right, 0px));
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .layout-mobile .pill {
    font-size: 0.82rem;
    padding: 0.22rem 0.5rem;
  }

  .layout-mobile .spots {
    gap: 0.3rem;
    margin: 0.2rem 0 0.25rem;
  }

  .layout-mobile .metric {
    padding: 0.35rem 0.5rem;
  }

  .layout-mobile .metric .lbl {
    font-size: 0.82rem;
  }

  .layout-mobile .metric .val {
    font-size: 1.1rem;
  }

  .layout-mobile table.data {
    font-size: 0.92rem;
  }

  .layout-mobile table.data th,
  .layout-mobile table.data td {
    padding: 0.4rem 0.45rem;
  }

  .layout-mobile table.data td.sym-cell {
    font-size: 0.86rem;
    line-height: 1.38;
  }

  .layout-mobile .pos-expiry-title {
    font-size: 1.02rem;
  }

  .layout-mobile input,
  .layout-mobile select {
    font-size: 1.05rem;
    padding: 0.58rem 0.65rem;
  }

  .layout-mobile .btn {
    font-size: 1.05rem;
    padding: 0.62rem 0.85rem;
    margin-top: 0.65rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .layout-mobile .row-actions .btn {
    margin-top: 0;
    min-height: 46px;
  }

  .layout-mobile .row-actions {
    margin-bottom: 0.45rem;
  }

  .layout-mobile .check {
    font-size: 1rem;
    margin: 0.5rem 0;
    line-height: 1.4;
  }

  .layout-mobile .banner {
    padding: 0.4rem 0.55rem;
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
  }

  .layout-mobile label {
    font-size: 0.95rem;
    margin: 0.45rem 0 0.12rem;
  }

  .layout-mobile .muted {
    font-size: 0.98rem;
  }

  .layout-mobile .small {
    font-size: 0.95rem;
  }

  .layout-mobile .tiny {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .layout-mobile .strat-speed-hint {
    font-size: 0.9rem;
  }

  .layout-mobile .grid2 {
    gap: 0.45rem 0.55rem;
  }

  .layout-mobile .lb-pnl {
    margin-bottom: 0.15rem;
  }

  .layout-mobile .lb-pnl .desk-section-title {
    font-size: 0.82rem;
    margin-bottom: 0.2rem;
    opacity: 0.7;
  }

  .layout-mobile .pnl-spots {
    gap: 0.25rem;
  }

  .layout-mobile .pnl-metric {
    padding: 0.3rem 0.45rem;
  }

  .layout-mobile .pnl-metric .lbl {
    font-size: 0.78rem;
  }

  .layout-mobile .pnl-metric .val {
    font-size: 1rem;
  }

  .layout-mobile .strip-global.panel-card,
  .layout-mobile .desk-mid .panel-card {
    padding: 0.55rem 0.7rem;
  }

  .layout-mobile .mono.small {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .layout-mobile .lb-strategies .num-stepper .stepper-input {
    font-size: 1.2rem;
    min-height: 56px;
  }

  .layout-mobile .lb-strategies .num-stepper .step-btn {
    flex: 0 0 56px;
    min-height: 56px;
    width: 56px;
    font-size: 1.55rem;
    touch-action: manipulation;
  }

  .layout-mobile .lb-strategies .btn-place-strat {
    font-size: 1.2rem;
    min-height: 58px;
  }

  .layout-mobile .btn.small {
    font-size: 1rem;
    padding: 0.45rem 0.85rem;
  }

  .layout-mobile .contract-line {
    font-size: 0.95rem;
  }

  .layout-mobile .mode-btn {
    font-size: 1.02rem;
    padding: 0.45rem 0.75rem;
    min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .layout-mobile .mode-switcher {
    padding: 0.3rem 0 0.15rem;
  }

  .layout-mobile .spots.panel-card {
    padding: 0.35rem 0.55rem !important;
    margin-bottom: 0.1rem;
  }

  .layout-mobile .safeguard-banner {
    display: none;
  }

  .layout-mobile #banner-test {
    margin-bottom: 0.25rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Dashboard mode: full-width, no bottom-tab padding needed */
  .layout-mobile #mode-dash .lb-dash {
    padding: 0.85rem 0.9rem;
  }

  /* Phone topbar: title + status pill + small refresh icon on the left.
     `flex-wrap: wrap` is what stops the brand row from colliding with the
     Logout button on a 375px iPhone — items spill onto a second row instead
     of overlapping. `flex: 1 1 auto` + `min-width: 0` lets this column
     consume the available width before Logout is squeezed. */
  .layout-mobile .topbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.4rem;
    row-gap: 0.3rem;
  }
  .layout-mobile .topbar {
    align-items: flex-start;
    gap: 0.5rem;
  }
  .layout-mobile .topbar > #btn-logout {
    flex-shrink: 0;
  }

  .layout-mobile .topbar .btn-icon {
    margin: 0;
    width: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    border-radius: 8px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Funds compact strip on phone (no big section header) */
  .layout-mobile .lb-funds {
    padding: 0.35rem 0.65rem !important;
    margin-bottom: 0.15rem;
  }

  .layout-mobile .lb-funds .funds-spots {
    margin: 0;
  }

  .layout-mobile .lb-funds .metric {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.15rem 0;
    align-items: baseline;
    padding: 0.35rem 0.5rem;
    gap: 0.5rem;
  }

  .layout-mobile .lb-funds .metric .lbl {
    font-size: 0.85rem;
  }

  .layout-mobile .lb-funds .metric .val {
    font-size: 1.05rem;
    font-weight: 700;
  }

  /* Quick ticket: hide advanced fields on phone (NRML/MKT/DAY defaults applied in JS) */
  .layout-mobile .qt-advanced-only {
    display: none !important;
  }

  .layout-mobile .qt-speed-hint {
    display: block;
    margin: 0.15rem 0 0.35rem;
    font-size: 0.9rem;
  }

  /* Inline "Emergency exit" inside Positions tab on phone */
  .layout-mobile .lb-failsafe-inline {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border);
  }

  .layout-mobile .btn-failsafe-inline {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
  }

  /* API connect banner: action button cluster wraps under the message on narrow screens */
  .layout-mobile .api-connect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
  }
}

/* Defaults outside the phone media query — keep advanced fields shown on desktop */
.qt-speed-hint {
  display: none;
}

.api-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-failsafe-inline {
  margin-top: 0.6rem;
}

/* Dry-run modal — appears centered, scrollable when many legs */
.dryrun-dialog {
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 10px;
  padding: 0;
  max-width: min(560px, 92vw);
  background: var(--panel-bg, #161a22);
  color: var(--text, #e6e8ee);
}
.dryrun-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.dryrun-form {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 80vh;
  overflow-y: auto;
}
.dryrun-form h3 {
  margin: 0;
  font-size: 1.05rem;
}
.dryrun-form h4 {
  margin: 0.3rem 0 0.2rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.dryrun-list {
  margin: 0;
  padding-left: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.4;
}
.dryrun-section {
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  background: var(--panel-bg-alt, rgba(255, 255, 255, 0.02));
}
.dryrun-warnings {
  border: 1px solid #b5651d;
  background: rgba(181, 101, 29, 0.12);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
}
.dryrun-warnings ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}
.dryrun-actions {
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.dry-run-sl {
  margin-right: 0.35rem;
}

/* ─── SL distance + paused-state colour cues ─── */
.sl-dist-green { color: #4caf50; font-weight: 600; }
.sl-dist-amber { color: #f0a000; font-weight: 600; }
.sl-dist-red   { color: #ff6464; font-weight: 700; }
.sl-dist-breach{
  color: #fff;
  background: #b00020;
  padding: 0 0.35rem;
  border-radius: 4px;
  font-weight: 700;
}
.sl-status-paused {
  color: #ffd166;
  font-style: italic;
}
.pause-sl, .resume-sl { margin-right: 0.35rem; }

/* ─── Daily MTM circuit-breaker card ─── */
#circuit-breaker-card.cb-tripped {
  border: 1px solid #b00020;
  background: rgba(176, 0, 32, 0.10);
}
#circuit-breaker-card.cb-warn {
  border: 1px solid #b5651d;
  background: rgba(181, 101, 29, 0.10);
}
#circuit-breaker-card .row-actions { margin-top: 0.5rem; }

/* ─── Dashboard SL analytics grid ─── */
.dash-sl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.sl-analytics-mini { padding: 0.65rem 0.85rem; }
.sl-analytics-mini h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
#sl-analytics-summary .metric { min-width: 10rem; }

/* ─── Extended trade analytics ─── */
.dash-sub-sep {
  border: 0;
  border-top: 1px dashed var(--border);
  margin: 1.4rem 0 0.75rem;
}
.dash-extended-analytics .dash-extra-h {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.dash-extended-analytics .dash-extra-table {
  width: 100%;
  font-size: 0.83rem;
  margin-bottom: 0.6rem;
}
.dash-extended-analytics .dash-extra-table .td-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dash-extended-analytics .is-pos { color: var(--green, #2faa6f); }
.dash-extended-analytics .is-neg { color: var(--red, #d04848); }
.dash-extended-analytics code.tiny {
  font-size: 0.7rem;
  color: var(--muted);
}

/* ─── Strategy breakdown (algo vs live) ─── */
#dash-origin-totals { margin: 0.4rem 0 0.5rem; }
#dash-origin-totals .metric .val.is-pos { color: var(--green, #2faa6f); }
#dash-origin-totals .metric .val.is-neg { color: var(--red, #d04848); }
#dash-origin-totals .metric .sub {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
#tbl-dash-strategy-origin { width: 100%; font-size: 0.83rem; }
#tbl-dash-strategy-origin .td-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#tbl-dash-strategy-origin .is-pos { color: var(--green, #2faa6f); }
#tbl-dash-strategy-origin .is-neg { color: var(--red, #d04848); }
.tag-algo, .tag-live {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tag-algo {
  background: rgba(94, 158, 255, 0.18);
  color: #4d8be6;
}
.tag-live {
  background: rgba(255, 165, 64, 0.18);
  color: #d18b3a;
}

/* ─── Charts tab (v0a) ─── */
.lb-charts .charts-toolbar,
.lb-charts .charts-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  margin: 0.5rem 0;
}
.lb-charts .charts-toolbar label,
.lb-charts .charts-add-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--muted);
}
.lb-charts .charts-toolbar input,
.lb-charts .charts-toolbar select,
.lb-charts .charts-add-row input,
.lb-charts .charts-add-row select {
  padding: 0.3rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.lb-charts .chart-mount {
  height: 460px;
  min-height: 320px;
  width: 100%;
  margin: 0.4rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.lb-charts .chart-lib-missing {
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--amber, #d39a3a);
  border-radius: 6px;
  background: rgba(220, 165, 50, 0.08);
}
.lb-charts .chart-lib-missing code {
  font-size: 0.78rem;
  background: rgba(127, 127, 127, 0.12);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.lb-charts .chart-drawings-list {
  margin-top: 0.6rem;
}
/* Desktop chart tab is now a redirect card to /chart. Keep the panel
   layout but tighten the spacing so it doesn't take a full panel's worth
   of vertical real-estate. */
.chart-handoff-card p { margin: 0.4rem 0; }
.chart-handoff-card .btn.primary { padding: 0.45rem 0.9rem; }
.tab.tab-external { text-decoration: none; }
.tab.tab-external:hover { text-decoration: underline; }
/* Selected-drawing panel — appears between chart and add-row form when the
   user clicks a horizontal_line / trendline. Carries the
   "deploy strategy on touch" form. */
.chart-selected-panel {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent, #3d8bfd);
  background: rgba(61, 139, 253, 0.07);
  border-radius: 4px;
}
.chart-selected-panel .chart-selected-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.chart-selected-panel .chart-selected-head strong { font-size: 0.95rem; }
.chart-selected-panel .chart-selected-head .btn { margin-left: auto; }
.chart-selected-panel .chart-selected-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  align-items: flex-end;
}
.chart-selected-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
}
.chart-selected-panel select,
.chart-selected-panel input[type="number"] {
  padding: 0.25rem 0.35rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 9rem;
}
.chart-selected-panel .chart-selected-autofire {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}
.chart-selected-panel .chart-selected-actions {
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}
/* QW-5 campaign breadcrumb — sits between the panel header and the
   deploy form. Highlights the fire-time effect ("ends RUN X · spawns
   new SL") so the user doesn't need to read action_params raw. */
.chart-selected-breadcrumb {
  margin: 0.25rem 0 0.5rem;
  padding: 0.35rem 0.55rem;
  border-left: 2px solid rgba(201, 122, 255, 0.55);
  background: rgba(201, 122, 255, 0.06);
  border-radius: 3px;
  line-height: 1.45;
}
.chart-selected-breadcrumb code {
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.12);
}
/* Visual highlight for the currently selected drawing on the chart. */
.chart-drawings-table tr.is-selected td {
  background: rgba(61, 139, 253, 0.10);
}

/* QW-1 PnL/breakeven strip — corner badge inside chart-mount-wrap. The
   value flips green when profit / red when loss / muted when neutral.
   Position pinned top-right so it doesn't fight the LC legend. */
.chart-pnl-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  padding: 0.45rem 0.65rem;
  background: rgba(14, 17, 22, 0.85);
  color: var(--text, #d1d5db);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 6px;
  font-size: 0.82rem;
  pointer-events: none;
  min-width: 8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.chart-pnl-badge .pnl-badge-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.chart-pnl-badge .pnl-badge-label { color: var(--muted, #888); }
.chart-pnl-badge .pnl-badge-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.chart-pnl-badge .pnl-badge-value.is-pos { color: #2faa6f; }
.chart-pnl-badge .pnl-badge-value.is-neg { color: #d04848; }
.chart-pnl-badge .pnl-badge-detail {
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  line-height: 1.35;
}

/* BM-1 combined-premium badge — same chrome as the PnL badge, stacked
   directly below it. When both toggles are on the two badges sit one
   above the other on the right edge of the chart mount. */
.chart-premium-badge {
  position: absolute;
  top: 96px;  /* sits below .chart-pnl-badge at top:12; leaves room for
                 a 4-line detail block above it */
  right: 12px;
  z-index: 8;
  padding: 0.45rem 0.65rem;
  background: rgba(14, 17, 22, 0.85);
  color: var(--text, #d1d5db);
  border: 1px solid rgba(201, 122, 255, 0.45);
  border-radius: 6px;
  font-size: 0.82rem;
  pointer-events: none;
  min-width: 8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.chart-premium-badge .pnl-badge-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.chart-premium-badge .pnl-badge-label { color: var(--muted, #888); }
.chart-premium-badge .pnl-badge-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #c97aff;
}
.chart-premium-badge .pnl-badge-value.is-pos { color: #2faa6f; }
.chart-premium-badge .pnl-badge-value.is-neg { color: #d04848; }
.chart-premium-badge .pnl-badge-detail {
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  line-height: 1.35;
}

/* Open-positions legend — top-left corner of the chart mount. Unlike the
   read-only badges (pointer-events:none, top-right), this one is
   interactive: each entry has an ✕ that closes the leg at market, so it
   needs pointer-events:auto. Scrolls if a basket has many legs. */
.chart-positions-legend {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9;
  max-width: 15rem;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 0.35rem 0.45rem 0.45rem;
  background: rgba(14, 17, 22, 0.88);
  color: var(--text, #d1d5db);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 6px;
  font-size: 0.8rem;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.chart-positions-legend .cpl-head {
  color: var(--muted, #888);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.chart-positions-legend .cpl-item {
  padding: 0.3rem 0;
  border-top: 1px solid rgba(127, 127, 127, 0.18);
}
.chart-positions-legend .cpl-item:first-of-type { border-top: 0; }
.chart-positions-legend .cpl-row1 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.chart-positions-legend .cpl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.chart-positions-legend .cpl-title {
  font-weight: 600;
  flex: 1 1 auto;
  white-space: nowrap;
}
.chart-positions-legend .cpl-close {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 1;
  padding: 0;
  border: 1px solid rgba(208, 72, 72, 0.5);
  border-radius: 4px;
  background: transparent;
  color: #e07a7a;
  cursor: pointer;
  font-size: 0.72rem;
}
.chart-positions-legend .cpl-close:hover {
  background: rgba(208, 72, 72, 0.2);
  color: #fff;
}
.chart-positions-legend .cpl-row2,
.chart-positions-legend .cpl-row3 {
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  margin-top: 0.1rem;
}
.chart-positions-legend .cpl-row2 { color: var(--muted, #9aa0aa); }
.chart-positions-legend .cpl-row3 { font-weight: 600; }
.chart-positions-legend .cpl-row3.is-pos { color: #2faa6f; }
.chart-positions-legend .cpl-row3.is-neg { color: #d04848; }
.chart-positions-legend .cpl-avg {
  cursor: pointer;
  border-bottom: 1px dashed rgba(127, 127, 127, 0.45);
}
.chart-positions-legend .cpl-avg:hover {
  color: var(--text, #fff);
  border-bottom-color: rgba(127, 127, 127, 0.85);
}
.chart-positions-legend .cpl-avg.is-pinned {
  color: #cda85a;  /* amber = operator-pinned entry, not broker-reported */
  border-bottom-style: solid;
}

/* Chart popups (close-position, and future SL-attach). Overlay centered on
   the chart mount. The explicit [hidden] rule is required because the
   display:flex below out-specifies the bare [hidden] attribute. */
.chart-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.chart-modal[hidden] { display: none; }
.chart-modal-box {
  width: min(20rem, 90%);
  background: var(--card, #161b22);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 8px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.chart-modal-head {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.chart-modal-field {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted, #9aa0aa);
}
.chart-modal-field input,
.chart-modal-field select {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.4rem 0.5rem;
  box-sizing: border-box;
  background: var(--input-bg, #0d1117);
  color: var(--text, #e6edf3);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.4));
  border-radius: 5px;
}
.chart-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
/* Attach-SL modal is taller/wider — it hosts the full SL form. */
.chart-sl-modal-box {
  width: min(30rem, 94%);
  max-height: 88%;
  overflow-y: auto;
}
.chart-sl-legs {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.45rem 0 0.4rem;
  max-height: 9rem;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 5px;
  padding: 0.4rem 0.5rem;
}
.chart-sl-leg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.chart-sl-form-anchor .chart-slbulk-details > summary { display: none; }
.lb-charts .chart-drawings-table {
  width: 100%;
  font-size: 0.82rem;
}
.lb-charts .chart-drawings-table .td-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lb-charts .chart-drawings-table .btn { margin-right: 0.25rem; }
.lb-charts .chart-draw-hint {
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--accent, #3d8bfd);
  background: rgba(61, 139, 253, 0.06);
  margin: 0.4rem 0 0;
}
.lb-charts .charts-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}
.lb-charts .charts-add-row textarea {
  padding: 0.3rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.78rem;
  min-width: 22rem;
}
.lb-charts .chart-auto-fire {
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
}

/* ─── Strategy-grouped SL table headers + advanced collapsible ─── */
.sl-group-row td.sl-group-cell {
  background: rgba(61, 139, 253, 0.07);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.6rem;
  color: var(--accent);
}
.sl-advanced {
  margin-top: 1rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
.sl-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}
.sl-advanced[open] > summary { color: var(--text); }
.sl-bulk-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.3rem 0;
}

/* ─── Unprotected positions card (Stops tab) ─── */
.sl-unprotected-card {
  margin: 0.5rem 0 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(218, 112, 71, 0.55);
  background: rgba(218, 112, 71, 0.08);
  border-radius: 6px;
}
.sl-unprotected-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sl-unprotected-count {
  font-size: 0.75rem;
  color: var(--muted);
}
.sl-unprotected-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sl-unprotected-group {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.4rem 0.55rem;
  background: var(--card);
}
.sl-unprotected-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.sl-unprotected-template {
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(80, 130, 200, 0.12);
  color: var(--text);
  border: 1px solid rgba(80, 130, 200, 0.4);
  letter-spacing: 0.02em;
  margin-left: 0.35rem;
}
.sl-unprotected-leg-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sl-unprotected-leg-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  gap: 0.4rem;
}
.sl-unprotected-result {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.55rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Algorithmic-trading engine card ─── */
.lb-algo {
  margin-top: 0.6rem;
}
.algo-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.algo-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
}
.algo-pill.is-on {
  background: rgba(46, 160, 67, 0.18);
  color: #2ea043;
  border-color: rgba(46, 160, 67, 0.5);
}
.algo-pill.is-off {
  background: rgba(160, 160, 160, 0.12);
  color: var(--muted);
}
.algo-actions {
  margin: 0.4rem 0 0.6rem;
}
.algo-strategy-list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.algo-strategy-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  background: var(--bg);
}
.algo-strategy-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.algo-dry-run-out {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.55rem;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 4px;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Per-strategy execution mode pill (paper / live) ─── */
.algo-mode-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  margin-right: auto;  /* push the action buttons to the right */
}
.algo-mode-pill.is-paper {
  background: rgba(56, 139, 253, 0.16);
  color: #58a6ff;
  border-color: rgba(56, 139, 253, 0.5);
}
.algo-mode-pill.is-live {
  background: rgba(248, 81, 73, 0.16);
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.5);
}

/* ─── Off / Paper / Live segmented control ─── */
.algo-mode-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.algo-mode-seg .seg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  min-width: 3.2rem;
}
.algo-mode-seg .seg-btn:last-child {
  border-right: 0;
}
.algo-mode-seg .seg-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.algo-mode-seg .seg-btn.is-active.is-off {
  background: rgba(160, 160, 160, 0.22);
  color: var(--text);
}
.algo-mode-seg .seg-btn.is-active.is-paper {
  background: rgba(56, 139, 253, 0.22);
  color: #58a6ff;
}
.algo-mode-seg .seg-btn.is-active.is-live {
  background: rgba(248, 81, 73, 0.22);
  color: #f85149;
}
.algo-strategy-desc {
  margin-top: 0.1rem;
}

/* ─── "Advanced" collapsible (capital governor + signal rules) ─── */
.algo-advanced {
  margin-top: 0.6rem;
}
.algo-advanced > summary {
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  user-select: none;
  list-style: none;
}
.algo-advanced > summary::before {
  content: "▸ ";
  color: var(--muted);
}
.algo-advanced[open] > summary::before {
  content: "▾ ";
}
.algo-advanced[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ─── Paper trades panel ─── */
.algo-paper-summary {
  margin: 0.4rem 0 0.8rem;
}
.algo-paper-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.algo-paper-summary-table th,
.algo-paper-summary-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.algo-paper-summary-table th {
  font-weight: 600;
  color: var(--muted);
}
.algo-paper-total-row td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  padding-top: 0.45rem;
}
.algo-paper-trades {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.algo-paper-trade-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  background: var(--bg);
}
.algo-paper-trade-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.algo-paper-trade-mtm {
  margin-left: auto;
}
.algo-paper-legs {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.algo-paper-leg {
  font-size: 0.82rem;
}
.algo-mtm.pos { color: #2ea043; font-weight: 600; }
.algo-mtm.neg { color: #f85149; font-weight: 600; }
.algo-mtm.muted { color: var(--muted); }

.algo-paper-status {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
}
.algo-paper-status.is-open {
  background: rgba(56, 139, 253, 0.16);
  color: #58a6ff;
  border-color: rgba(56, 139, 253, 0.5);
}
.algo-paper-status.is-closed {
  background: rgba(160, 160, 160, 0.16);
  color: var(--muted);
}

/* ─── Strategy SL inline-edit dialog ─── */
.sl-edit-dialog {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  min-width: min(360px, 95vw);
  max-width: 95vw;
}
.sl-edit-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.sl-edit-dialog h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.sl-edit-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  align-items: center;
  margin: 0.4rem 0;
}
.sl-edit-row > span { color: var(--muted); font-size: 0.85rem; }
.sl-edit-row input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sl-edit-row .sl-edit-hint {
  grid-column: 2 / -1;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
  opacity: 0.85;
}
.sl-edit-dialog form > .muted.small {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
}
.sl-edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin: 0.8rem 0 0;
  padding: 0;
}
.sl-edit-actions button { padding: 0.35rem 0.85rem; }

/* ─── Morph dialog (transition between strategies) ─── */
.morph-dialog {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  min-width: min(420px, 95vw);
  max-width: 95vw;
}
.morph-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.morph-dialog h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.morph-dialog .muted.small { font-size: 0.78rem; margin: 0 0 0.45rem; }
.morph-current-legs {
  list-style: none;
  margin: 0.5rem 0 0.8rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.morph-current-legs code { font-size: 0.78rem; }
.morph-side-buy { color: var(--accent); font-weight: 600; }
.morph-side-sell { color: #ef5350; font-weight: 600; }
.morph-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.morph-preset-btn {
  text-align: left;
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
}
.morph-preset-btn.is-active {
  border-color: var(--accent);
  background: rgba(102, 187, 106, 0.12);
}
.morph-strike-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  column-gap: 0.5rem;
  margin: 0.5rem 0;
}
.morph-strike-row > span { color: var(--muted); font-size: 0.85rem; }
.morph-strike-row input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.morph-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin: 0.8rem 0 0;
  padding: 0;
}
.morph-actions button { padding: 0.35rem 0.85rem; }

@media (max-width: 480px) {
  .morph-preset-grid { grid-template-columns: 1fr; }
  .morph-strike-row { grid-template-columns: 1fr; row-gap: 0.25rem; }
}

/* ─── /chart desktop workspace ──────────────────────────────────────── */
body.chart-workspace-body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
body.chart-workspace-body #view-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
/* The display:flex above out-specifies the [hidden] attribute, so without
   this rule view-main renders even while hidden=true — the chart would
   flash before auth and stay visible behind the login message. Restore it. */
body.chart-workspace-body #view-main[hidden] {
  display: none;
}
.chart-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.chart-topbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chart-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.chart-topbar-actions .btn { padding: 0.25rem 0.6rem; }
.chart-topbar .brand-name { margin-right: 0.4rem; }

.chart-workspace {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 0.5rem;
  padding: 0.5rem;
  min-height: 0;  /* allow children to scroll inside the grid */
  background: var(--bg);
}
.chart-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  overflow: hidden;
}
.chart-sidebar-title {
  margin: 0.4rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chart-sidebar-title:first-child { margin-top: 0; }
.chart-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 0.5rem;
  /* sub-panels stack: cap each child's height with its own scroll. */
}
.chart-sidebar-scroll:last-child { margin-bottom: 0; }

.chart-positions-mount table.data { font-size: 0.78rem; }
.chart-sl-mount .sl-strat-card {
  margin: 0 0 0.4rem;
  padding: 0.4rem 0.5rem;
}
.chart-sl-mount .sl-strat-card-chips { gap: 0.2rem; }
.chart-sl-mount .sl-chip { font-size: 0.74rem; }

.chart-main {
  display: flex;
  flex-direction: row;        /* controls rail on the left, chart fills the rest */
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;         /* anchor the collapsed controls-rail chevron */
}
/* The chart + its hint lines, stacked, filling the space to the right of the
   control rail. */
.chart-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* Left vertical control rail (was a top row). Fixed width with its own scroll,
   so a tall stack of controls scrolls in place instead of wrapping into extra
   rows that shove the chart down. */
.chart-controls {
  flex: 0 0 280px;
  width: 280px;
  padding: 0.5rem 0.55rem;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;         /* anchor its own collapse toggle */
}
/* Collapsible control rail — same UX as the left/right sidebars. Collapsed →
   zero width so the chart-stage (flex: 1) spans the full chart-main width;
   a thin chevron tab pinned to the chart's left edge reopens it. */
.chart-controls-toggle { left: auto; right: 4px; }
.chart-controls.is-collapsed {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border-right-color: transparent;
  background: transparent;
  overflow: visible;
}
.chart-controls.is-collapsed > *:not(.chart-controls-toggle) { display: none; }
.chart-controls.is-collapsed .chart-controls-toggle {
  position: absolute;
  left: 0;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 46px;
  opacity: 0.45;
  z-index: 20;
  border-radius: 0 5px 5px 0;
  transition: opacity 0.15s ease;
}
.chart-controls.is-collapsed .chart-controls-toggle:hover { opacity: 1; }
.chart-controls .charts-toolbar {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: stretch;
}
/* Each labelled control stacks: caption above a full-width input / select. */
.chart-controls .charts-toolbar > label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chart-controls .charts-toolbar select,
.chart-controls .charts-toolbar input[type="number"] {
  width: 100%;
}
/* Action buttons fill the rail width, left-aligned, so it reads as a list. */
.chart-controls .charts-toolbar .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
/* Status text wraps inside the rail rather than stretching a row. */
.chart-controls .charts-toolbar #chart-ind-status,
.chart-controls .charts-toolbar #chart-vwap-anchor-status {
  display: block;
  white-space: normal;
  word-break: break-word;
}

/* ─── Option chain in the left rail (CALL LTP | STRIKE | PUT LTP) ─── */
.chart-optchain {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.chart-optchain-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}
.chart-optchain-title .oc-expiry-sel {
  font-weight: 400;
  text-transform: none;
  color: rgba(150, 190, 255, 0.95);
  font-size: 0.74rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 1px 2px;
  max-width: 135px;
  cursor: pointer;
}
.chart-optchain-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 0.7rem;
  color: rgba(150, 154, 165, 0.8);
  letter-spacing: 0.04em;
  padding: 0 0.1rem 0.25rem;
}
.chart-optchain-head span:first-child { text-align: right; }
.chart-optchain-head span:nth-child(2) { text-align: center; }
.chart-optchain-head span:last-child { text-align: left; }
.chart-optchain-body {
  position: relative;
  /* No internal scroll — all 10+10 strikes show at once. The whole rail
     (.chart-controls) scrolls only if the controls below need it. */
}
.optchain-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  padding: 3px 0.15rem;
  border-radius: 3px;
  cursor: pointer;
}
.optchain-row:hover { background: rgba(80, 130, 255, 0.14); }
.optchain-row .oc-call { text-align: right; color: rgba(225, 150, 150, 0.95); padding-right: 4px; }
.optchain-row .oc-put { text-align: left; color: rgba(140, 210, 165, 0.95); padding-left: 4px; }
.optchain-row .oc-strike { text-align: center; color: rgba(200, 204, 214, 0.92); font-weight: 600; }
.optchain-row.is-atm { background: rgba(120, 170, 255, 0.16); }
.optchain-row.is-atm .oc-strike { color: #cfe0ff; }
.optchain-spot {
  font-size: 0.7rem;
  text-align: center;
  color: #ffd27a;
  border-top: 1px dashed rgba(255, 200, 100, 0.5);
  border-bottom: 1px dashed rgba(255, 200, 100, 0.5);
  margin: 1px 0;
  padding: 1px 0;
  letter-spacing: 0.02em;
}
.optchain-empty {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 0.6rem 0;
}
.chart-main .chart-mount-full {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}
.chart-main #chart-draw-hint,
.chart-main #chart-lib-missing {
  margin: 0.3rem 0.6rem;
}

/* Reserve a fixed-height slot for the draw-hint so showing / hiding
   messages (load summary, drag hints, ✓ feedback) doesn't reflow the
   chart below it. Without this the chart would jump up/down by ~22px
   every time _setDrawHint() toggled the element on/off. Default
   `hidden` would set display:none and remove the reserved space —
   override to visibility:hidden so the slot persists but the line
   is invisible when empty. */
#chart-draw-hint {
  min-height: 1.4em;
  line-height: 1.4em;
}
#chart-draw-hint[hidden] {
  display: block !important;
  visibility: hidden;
}

/* ─── Floating drawing toolbar (TradingView-style) ───
 * Sits over the chart mount with the chart-mount-wrap acting as the
 * relative-positioning context. Pure presentation — chart.js drives
 * the .is-active class and quick-add behavior. */
.chart-mount-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chart-toolbar-floating {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: rgba(20, 22, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-select: none;
}
.chart-tool-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: rgba(220, 222, 230, 0.85);
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.chart-tool-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.chart-tool-btn.is-active {
  background: rgba(80, 130, 255, 0.28);
  color: #cfd8ff;
}
.chart-tool-btn.is-active:hover {
  background: rgba(80, 130, 255, 0.36);
}
.chart-tool-btn.is-danger:hover {
  background: rgba(208, 72, 72, 0.18);
  color: #ffb8b8;
}
.chart-tool-sep {
  width: 1px;
  margin: 4px 2px;
  background: rgba(255, 255, 255, 0.1);
}

/* Simulator toggle on the chart toolbar — green tint when ON so the
   operator can see synthetic ticks are flowing. */
#btn-chart-simulator.is-active {
  background: rgba(47, 170, 111, 0.18);
  border-color: rgba(47, 170, 111, 0.45);
  color: #c7f0d6;
}

/* Right-click context menu. Position is set inline by chart.js. */
.chart-ctxmenu {
  position: absolute;
  z-index: 20;
  min-width: 180px;
  background: rgba(28, 30, 36, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
  user-select: none;
  -webkit-user-select: none;
}
.chart-ctxmenu .chart-ctxmenu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: rgba(225, 227, 235, 0.92);
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.chart-ctxmenu .chart-ctxmenu-item:hover { background: rgba(80, 130, 255, 0.22); color: #fff; }
.chart-ctxmenu .chart-ctxmenu-item.is-danger { color: #ffb8b8; }
.chart-ctxmenu .chart-ctxmenu-item.is-danger:hover { background: rgba(208, 72, 72, 0.22); }
.chart-ctxmenu .chart-ctxmenu-sep {
  height: 1px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.08);
}
.chart-ctxmenu .chart-ctxmenu-head {
  padding: 4px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(180, 184, 195, 0.8);
}

/* Drawing hover tooltip. chart.js positions inline; pure-CSS look. */
.chart-hover-tip {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  padding: 4px 8px;
  background: rgba(28, 30, 36, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(225, 227, 235, 0.92);
  font-size: 0.74rem;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-hover-tip .ht-color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.chart-hover-tip .ht-action {
  color: rgba(180, 200, 255, 0.95);
  font-weight: 500;
}
.chart-hover-tip .ht-sep { color: rgba(150, 154, 165, 0.7); margin: 0 4px; }

/* Edit-drawing modal — positioned over the chart area, opens from
   the right-click "Edit" menu item. */
.chart-edit-modal {
  position: absolute;
  z-index: 25;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: rgba(28, 30, 36, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  padding: 12px;
}
.chart-edit-modal-head {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: rgba(225, 227, 235, 0.92);
}
.chart-edit-modal label {
  display: block;
  margin: 6px 0;
  font-size: 0.74rem;
  color: rgba(180, 184, 195, 0.85);
}
.chart-edit-modal input,
.chart-edit-modal select {
  width: 100%;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
}
.chart-edit-modal .chart-edit-note {
  margin: 8px 0 6px;
  line-height: 1.3;
}
.chart-edit-modal-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Quick-place mini ticket — floating panel over the chart area.
   Replaces the prompt()-based quick-place. Same dark-glass treatment as
   chart-edit-modal; wider grid so all 5 fields stay one-glance readable. */
.chart-quickplace-ticket {
  position: absolute;
  z-index: 26;
  top: 12px;
  right: 12px;
  left: auto;
  transform: none;
  width: 320px;
  min-width: 300px;
  max-width: 340px;
  /* Never taller than the chart: scroll inside instead of running off the
     bottom (where .chart-main overflow:hidden would clip Place Now). Docked
     to the right edge so it stops bisecting the candles. */
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: rgba(28, 30, 36, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  padding: 12px;
}
.chart-quickplace-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.chart-quickplace-head strong { font-size: 0.95rem; color: rgba(225, 227, 235, 0.95); }
.chart-quickplace-head .btn { margin-left: auto; }
.chart-quickplace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.chart-quickplace-grid label {
  display: block;
  margin: 0;
  font-size: 0.72rem;
  color: rgba(180, 184, 195, 0.85);
}
/* The SL preset row spans both columns so the longer option labels fit. */
.chart-quickplace-grid label:last-of-type { grid-column: 1 / -1; }
.chart-quickplace-grid select,
.chart-quickplace-grid input[type="number"] {
  width: 100%;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}
.chart-quickplace-actions {
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  list-style: none;
}
.chart-quickplace-actions .btn { font-size: 0.82rem; }
#quickplace-status {
  margin: 8px 0 0;
  line-height: 1.3;
}
#quickplace-status.is-error { color: #ffb8b8; }
#quickplace-status.is-ok { color: #8de0a0; }

/* One-tap preset row — chip-style buttons above the form grid. */
.chart-quickplace-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chart-quickplace-presets .btn.tiny {
  font-size: 0.72rem;
  padding: 3px 8px;
  background: rgba(80, 130, 255, 0.15);
  border: 1px solid rgba(80, 130, 255, 0.3);
  color: rgba(225, 227, 235, 0.92);
}
.chart-quickplace-presets .btn.tiny:hover:not([disabled]) {
  background: rgba(80, 130, 255, 0.32);
  border-color: rgba(80, 130, 255, 0.55);
}
.chart-quickplace-presets .btn.tiny[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(120, 120, 130, 0.12);
  border-color: rgba(120, 120, 130, 0.25);
}
#btn-quickplace-settings {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Settings drawer — collapsible section between presets and form. */
.chart-quickplace-settings {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.qp-settings-head {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(180, 184, 195, 0.85);
  margin-bottom: 6px;
}
.qp-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.qp-settings-grid label {
  font-size: 0.72rem;
  color: rgba(180, 184, 195, 0.85);
}
.qp-settings-grid input,
.qp-settings-grid select {
  width: 100%;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
}
.qp-oneclick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: rgba(180, 184, 195, 0.85);
}
.qp-oneclick-row input[type="checkbox"]:disabled + span {
  color: rgba(150, 154, 165, 0.5);
}
.qp-settings-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* Trigger price row — sits between settings and form grid. */
.chart-quickplace-trigger-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chart-quickplace-trigger-row label {
  font-size: 0.72rem;
  color: rgba(180, 184, 195, 0.85);
}
.chart-quickplace-trigger-row input[type="number"] {
  width: 100%;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
}
.qp-trigger-hint { display: block; }

/* Auto-SL row — same shape as trigger row but the chrome is red to
   signal "this is the loss-cap line, take it seriously." */
.chart-quickplace-autosl-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chart-quickplace-autosl-row label {
  font-size: 0.72rem;
  color: rgba(255, 180, 180, 0.95);
  font-weight: 600;
}
.chart-quickplace-autosl-row input[type="number"] {
  width: 100%;
  margin-top: 2px;
  background: rgba(208, 72, 72, 0.08);
  border: 1px solid rgba(208, 72, 72, 0.35);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
}
#qp-autosl-hint { display: block; }
#qp-autosl-hint.is-clamped { color: #ffcf6b; font-weight: 600; }

/* Headline row in projection — recommended lots chip + auto-SL spot. */
.qp-proj-headline {
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.qp-recommend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(47, 170, 111, 0.22);
  color: #c9f5d8;
  font-weight: 600;
  font-size: 0.74rem;
}
.qp-recommend-chip.is-capped {
  background: rgba(229, 196, 74, 0.22);
  color: #ffe9a0;
}
.qp-recommend-chip strong { font-weight: 700; }

/* Projection footer — margin/max-loss/payoff/breakeven numbers. */
.chart-quickplace-projection {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(60, 90, 140, 0.15);
  border: 1px solid rgba(80, 130, 255, 0.22);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qp-proj-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.74rem;
}
.qp-proj-row strong { color: rgba(225, 227, 235, 0.95); margin-left: 4px; }
.qp-proj-row.qp-proj-row-is-loss strong { color: #ffb8b8; }
.qp-proj-faint { color: rgba(150, 154, 165, 0.75); }

/* Mode pill row — Safe / One-click indicator + hint. */
.chart-quickplace-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.qp-mode-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(80, 130, 255, 0.22);
  color: rgba(225, 227, 235, 0.95);
}
.qp-mode-pill[data-mode="one-click"] {
  background: rgba(208, 72, 72, 0.28);
  color: #ffd8d8;
}
#qp-mode-hint { flex: 1; }

/* Sidebar collapse toggles. Buttons live INSIDE each sidebar; their
   click handler toggles the .is-collapsed class on the parent <aside>,
   which together with .chart-workspace.has-left-collapsed (etc.) on the
   workspace itself re-arranges the grid columns to give the chart
   more screen area. */
.chart-sidebar { position: relative; }
.chart-sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(180, 184, 195, 0.85);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0;
  z-index: 5;
}
.chart-sidebar-toggle:hover { background: rgba(80, 130, 255, 0.18); color: #cfd8ff; }
.chart-sidebar-left .chart-sidebar-toggle { left: 4px; right: auto; }

/* Collapsed sidebar: ZERO width and no visible chrome (border/background
   gone) so the chart spans the full workspace — no leftover strip. The
   only thing that remains is a small, semi-transparent chevron tab pinned
   to the chart edge so the panel can be reopened. */
.chart-sidebar.is-collapsed {
  padding: 0;
  width: 0;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  overflow: visible;
}
.chart-sidebar.is-collapsed > *:not(.chart-sidebar-toggle) { display: none; }
.chart-sidebar.is-collapsed .chart-sidebar-toggle {
  position: fixed;     /* pin flush to the viewport edge, not the 0-width aside */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 15px;
  height: 46px;
  opacity: 0.4;
  z-index: 20;
  transition: opacity 0.15s ease;
}
.chart-sidebar.is-collapsed .chart-sidebar-toggle:hover { opacity: 1; }
.chart-sidebar-left.is-collapsed .chart-sidebar-toggle {
  left: 0; right: auto;
  border-radius: 0 5px 5px 0;
}
.chart-sidebar-right.is-collapsed .chart-sidebar-toggle {
  right: 0; left: auto;
  border-radius: 5px 0 0 5px;
}

/* Grid-column overrides — a collapsed sidebar takes ZERO width and the
   chart grows to fill the freed space (the reopen tab is overlaid). */
.chart-workspace.has-left-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 320px;
}
.chart-workspace.has-right-collapsed {
  grid-template-columns: 280px minmax(0, 1fr) 0;
}
.chart-workspace.has-left-collapsed.has-right-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

.chart-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
/* The Add-drawing form is hidden in the sidebar and shown only when
   relocated into #chart-draw-modal (right-click → Add drawing / action).
   The base rule sets display:flex, so [hidden] needs an explicit override. */
.chart-add-form[hidden] { display: none; }
.chart-add-form label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.chart-add-form label.chart-auto-fire {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
.chart-add-form input,
.chart-add-form select,
.chart-add-form textarea {
  width: 100%;
  padding: 0.3rem 0.45rem;
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.chart-add-form textarea { resize: vertical; font-family: ui-monospace, monospace; font-size: 0.78rem; }
.chart-add-form button { width: 100%; padding: 0.4rem; }

.chart-drawings-list-compact .chart-drawings-table {
  font-size: 0.72rem;
  width: 100%;
}
.chart-drawings-list-compact .chart-drawings-table th,
.chart-drawings-list-compact .chart-drawings-table td {
  padding: 0.2rem 0.3rem;
}

@media (max-width: 1100px) {
  .chart-workspace { grid-template-columns: 240px minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  .chart-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    overflow-y: auto;
  }
  body.chart-workspace-body { overflow: auto; }
  body.chart-workspace-body #view-main { height: auto; min-height: 100vh; }
  .chart-sidebar { max-height: 320px; }
  /* Narrow screens: rail reverts to a top bar so the chart keeps its width. */
  .chart-main { min-height: 60vh; flex-direction: column; }
  .chart-controls {
    flex: 0 0 auto;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 160px;
  }
  .chart-controls .charts-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .chart-controls .charts-toolbar > label { text-transform: none; }
}

/* ─── Conditional rules block on Place Strategy form ─── */
.strategy-cond-rules {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.strategy-cond-rules > h4 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--muted); }
.strategy-cond-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0;
  align-items: end;
}
.strategy-cond-row .cr-when,
.strategy-cond-row .cr-arrow,
.strategy-cond-row .cr-anchor {
  align-self: center;
  white-space: nowrap;
}
.strategy-cond-row label { min-width: 5rem; }
.strategy-cond-row .cr-tpl-wrap { min-width: 9rem; }
.strategy-cond-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--muted);
}
.strategy-cond-row input,
.strategy-cond-row select {
  padding: 0.3rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.strategy-cond-row .btn { padding: 0.3rem 0.6rem; }
.strategy-cond-row .cr-chain-wrap {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-left: 2px solid var(--border);
  background: rgba(127, 127, 127, 0.04);
  border-radius: 0 4px 4px 0;
}
.strategy-cond-row .cr-chain-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.strategy-cond-row .cr-chain-add {
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
}
.strategy-cond-chain-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  gap: 0.4rem;
  align-items: end;
}
.strategy-cond-chain-row .cc-prefix { align-self: center; }
.strategy-cond-chain-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  color: var(--muted);
}
.strategy-cond-chain-row input {
  padding: 0.25rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.strategy-cond-chain-row .btn { padding: 0.2rem 0.5rem; font-size: 0.75rem; }

/* ─── SL Strategy Risk Cards ─── */
.sl-toolbar { align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sl-view-toggle {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.sl-view-toggle .sl-view-btn {
  padding: 0.25rem 0.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
}
.sl-view-toggle .sl-view-btn + .sl-view-btn { border-left: 1px solid var(--border); }
.sl-view-toggle .sl-view-btn.is-active { background: var(--accent, #2d6cdf); color: #fff; }

.sl-strategy-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.5rem 0 0.75rem;
}
.sl-strat-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg, var(--bg));
  padding: 0.6rem 0.75rem;
}
.sl-strat-card.is-orphan { opacity: 0.85; border-style: dashed; }
.sl-strat-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 0.5rem;
}
.sl-strat-card-title strong { font-size: 0.95rem; }
.sl-strat-card-title .muted { margin-left: 0.4rem; }
.sl-card-pnl { font-variant-numeric: tabular-nums; font-weight: 600; }
.sl-card-pnl.is-pos { color: var(--green, #2faa6f); }
.sl-card-pnl.is-neg { color: var(--red, #d04848); }

.sl-strat-card-chips {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sl-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(127, 127, 127, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
}
.sl-chip-icon { font-size: 0.95rem; opacity: 0.85; min-width: 1rem; text-align: center; }
.sl-chip-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sl-chip-title { color: var(--text); font-weight: 500; line-height: 1.1; }
.sl-chip-value { color: var(--muted); font-size: 0.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sl-chip-broker { font-size: 0.85rem; line-height: 1; }
.sl-chip-dist {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.sl-chip-status {
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.15);
  color: var(--muted);
}
.sl-chip-status.is-paused { background: rgba(220, 165, 50, 0.18); color: var(--amber, #d39a3a); }
.sl-chip-status.is-triggered { background: rgba(47, 170, 111, 0.18); color: var(--green, #2faa6f); }
.sl-chip-status.is-cancelled { background: rgba(127, 127, 127, 0.18); }
.sl-chip-status.is-errored { background: rgba(208, 72, 72, 0.18); color: var(--red, #d04848); }
.sl-chip-actions { display: flex; gap: 0.2rem; flex-shrink: 0; }
.sl-chip-actions .btn.small.ghost {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.sl-chip-actions .btn.small.ghost:hover { color: var(--text); border-color: var(--text); }
.sl-chip-actions .btn.small.ghost.danger:hover { color: var(--red, #d04848); border-color: var(--red, #d04848); }

@media (max-width: 720px) {
  .sl-chip { flex-wrap: wrap; }
  .sl-chip-body { flex-basis: 100%; order: 1; }
  .sl-chip-broker, .sl-chip-dist, .sl-chip-status { order: 2; }
  .sl-chip-actions { order: 3; margin-left: auto; }
}

/* ─── Per-strategy auto-SL overrides admin block ─── */
.sl-overrides-card {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.sl-overrides-card h3 { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--muted); }
.sl-override-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: 0.4rem;
  align-items: end;
  margin: 0.3rem 0;
}
.sl-override-row label { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--muted); }
.sl-override-row select,
.sl-override-row input {
  padding: 0.25rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sl-override-row .btn { padding: 0.2rem 0.55rem; font-size: 0.75rem; }

/* ─── Broker workspace switcher ──────────────────────────────────── */
/* The active broker drives a body class (broker-kotak / broker-ibkr) so
   downstream components can theme themselves. The header itself gets a
   left-border accent in the broker color so you can never misread which
   workspace you're acting on. */
:root {
  --broker-kotak: #f5811f;
  --broker-kotak-soft: rgba(245, 129, 31, 0.18);
  --broker-ibkr: #4a90e2;
  --broker-ibkr-soft: rgba(74, 144, 226, 0.18);
}
body.broker-kotak .topbar { border-left: 3px solid var(--broker-kotak); padding-left: 0.6rem; }
body.broker-ibkr  .topbar { border-left: 3px solid var(--broker-ibkr);  padding-left: 0.6rem; }
body.broker-ibkr .brand-name::after { content: " · IBKR"; color: var(--broker-ibkr); font-weight: 600; }
body.broker-kotak .brand-name::after { content: " · Kotak"; color: var(--broker-kotak); font-weight: 600; }

/* Commit CK (2026-05-18): broker-scoped optgroups in symbol +
   underlying dropdowns. Hide the inactive market's options so the
   user can't accidentally select a NIFTY contract while on IBKR
   or SPY while on Kotak. */
body.broker-kotak .chart-symbol-us,
body.broker-kotak optgroup.chart-symbol-us,
body.broker-kotak option.chart-symbol-us { display: none; }
body.broker-ibkr  .chart-symbol-nse,
body.broker-ibkr  optgroup.chart-symbol-nse,
body.broker-ibkr  option.chart-symbol-nse { display: none; }

.broker-switcher {
  display: inline-flex;
  margin-left: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
  vertical-align: middle;
}
.broker-btn {
  position: relative;
  padding: 0.18rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.broker-btn:hover { color: var(--text); }
.broker-btn[data-broker="kotak"].active {
  background: var(--broker-kotak);
  color: #1a0f00;
}
.broker-btn[data-broker="ibkr"].active {
  background: var(--broker-ibkr);
  color: #04162b;
}
/* Subtle green dot when this broker's market is open and you're viewing the
   other one — hint to switch, but never auto-switch. */
.broker-btn.market-live::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 4px var(--ok);
}

@media (max-width: 959px) {
  .broker-switcher { margin-left: 0.3rem; }
  .broker-btn { padding: 0.14rem 0.45rem; font-size: 0.68rem; }
}

/* ─── Signal rules — phone layout ─── */
/* Wide desktop tables (sigrules-list, sigrules-audit) sit inside
   .table-wrap.scroll on phone, so they scroll horizontally instead of
   blowing the viewport. The add-rule form switches to a single-column
   stack with full-width inputs so each field is reachable with one tap. */
.sigrules-add-details {
  margin-top: 0.6rem;
  border: 1px solid var(--border, rgba(127,127,127,0.25));
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
.sigrules-add-details > summary {
  cursor: pointer;
  padding: 0.3rem 0;
  list-style: none;
}
.sigrules-add-details > summary::-webkit-details-marker { display: none; }
.sigrules-add-details[open] > summary { margin-bottom: 0.4rem; }

.sigrules-add-row-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sigrules-add-row-mobile label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}
.sigrules-add-row-mobile input,
.sigrules-add-row-mobile select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  font-size: 0.95rem;
}
.sigrules-add-row-mobile button[type="button"] {
  margin-top: 0.4rem;
  width: 100%;
}

.sigrules-live-status {
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  background: rgba(127,127,127,0.08);
  margin: 0.4rem 0;
}
.sigrules-live-status.is-live-armed {
  background: rgba(208,72,72,0.12);
  color: var(--bad, #d04848);
  font-weight: 600;
}