:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --canvas: #090d14;
  --canvas-raised: #0c111a;
  --surface: #111720;
  --surface-2: #151c27;
  --surface-3: #1a2230;
  --surface-hover: #1d2634;
  --border: #252d3a;
  --border-strong: #343e4d;
  --text: #8e8e8e;
  --text-soft: #c4cad4;
  --muted: #8e98a8;
  --muted-2: #687385;
  --purple: #806cf4;
  --purple-hover: #927ff8;
  --purple-soft: rgba(128, 108, 244, .14);
  --purple-border: rgba(146, 127, 248, .38);
  --live: #f97316;
  --live-soft: rgba(249, 115, 22, .12);
  --live-border: rgba(249, 115, 22, .42);
  --positive: #44d39d;
  --negative: #fb7185;
  --warning: #eabf57;
  --info: #61aef3;
  --topbar-height: 56px;
  --sidebar-width: 184px;
  --watchlist-width: 320px;
  --control-height: 36px;
  --radius: 9px;
  --radius-sm: 7px;
  --gap: 12px;
  --shadow-drawer: 0 18px 60px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; min-height: 100%; overflow-x: hidden; background: var(--canvas); }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--canvas);
  font-size: 13px;
  line-height: 1.4;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button svg, .button svg, .brand svg, .sidebar svg, .mobile-nav svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); line-height: 1.2; }
h1 { margin-bottom: 0; font-size: 15px; font-weight: 750; letter-spacing: -.015em; }
h2 { margin-bottom: 0; font-size: 15px; font-weight: 720; letter-spacing: -.01em; }
h3 { margin-bottom: 0; font-size: 13px; font-weight: 700; }
strong, .metric-value, td, .position-pnl { font-variant-numeric: tabular-nums; }
::selection { color: #fff; background: rgba(128, 108, 244, .5); }
[hidden], .hidden { display: none !important; }
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #a99cfa;
  outline-offset: 2px;
}

/* Shell */
.app-shell { width: 100%; min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: #0b1018;
}
.brand { min-width: 0; display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--purple-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--canvas);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
#app-title { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.brand-product { color: var(--muted); font-size: 12px; }
.topbar-status, .topbar-actions, .topbar-badges { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.app-frame {
  width: 100%;
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--watchlist-width);
  align-items: stretch;
}
.sidebar {
  position: sticky;
  top: var(--topbar-height);
  z-index: 35;
  width: var(--sidebar-width);
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  overflow: hidden auto;
  border-right: 1px solid var(--border);
  background: var(--canvas-raised);
}
.tabs, .primary-nav { display: flex; flex-direction: column; gap: 4px; }
.tabs button, .primary-nav button {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}
.tabs button:hover, .primary-nav button:hover { color: var(--text-soft); background: var(--surface-2); }
.tabs button.active, .tabs button[aria-current="page"], .primary-nav button.active, .primary-nav button[aria-current="page"] {
  color: #ece9ff;
  border-color: var(--purple-border);
  background: var(--purple-soft);
}
.workspace {
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - var(--topbar-height));
  padding: 12px;
}
.workspace-page, .tab-page { width: 100%; min-width: 0; }
.mobile-nav { display: none; }
.stack { display: grid; gap: var(--gap); }

/* Compact primitives */
.panel, .surface {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
.panel-heading, .section-heading, .report-title, .settings-pane-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.compact-heading { min-height: 24px; }
.eyebrow { display: none; }
.muted, .field-hint {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.field-hint strong { color: var(--text-soft); }
.badge, .count-pill, .heartbeat-label, .engine-state, .status-dot, .signal,
.watchlist-live-indicator, .schedule-chip, .status-chip, .symbol-pnl-card {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: .015em;
  white-space: nowrap;
}
.badge.safe { color: #8ce3bd; border-color: rgba(68, 211, 157, .28); background: rgba(68, 211, 157, .08); }
.badge.connected { color: #9ecefb; border-color: rgba(97, 174, 243, .3); background: rgba(97, 174, 243, .09); }
.badge.attention { color: #d3caff; border-color: var(--purple-border); background: var(--purple-soft); }
#execution-safety-badge.badge.attention { color: #ffcfad; border-color: var(--live-border); background: var(--live-soft); }
.muted-badge { color: var(--muted); }
.count-pill { min-width: 24px; }
.paper-mode-badge { color: #d7d0ff; border-color: var(--purple-border); background: var(--purple-soft); }
.live-mode-badge { color: #ffcfad; border-color: var(--live-border); background: var(--live-soft); }
label { min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #0d131c;
  outline: 0;
}
textarea { height: auto; min-height: 72px; padding-block: 8px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(128, 108, 244, .16); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--purple); }
select { color-scheme: dark; }
.button, button.button, .icon-button {
  min-height: 34px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.button:hover:not(:disabled), .icon-button:hover:not(:disabled) { color: var(--text); background: var(--surface-hover); }
.button:disabled, .icon-button:disabled { opacity: .42; cursor: not-allowed; }
.button.primary { color: #fff; border-color: #806cf4; background: #705ce6; }
.button.primary:hover:not(:disabled) { background: var(--purple-hover); }
.button.secondary { color: #d9d3ff; border-color: var(--purple-border); background: var(--purple-soft); }
.button.ghost { color: var(--text-soft); border-color: var(--border); background: transparent; }
.button.danger { color: #ffc2cc; border-color: rgba(251, 113, 133, .34); background: rgba(251, 113, 133, .09); }
.icon-button { width: 34px; min-width: 34px; padding: 0; border-color: var(--border); background: transparent; }
.execution-overflow > summary { color: var(--text); }
.execution-overflow > summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: currentColor;
}
.full-width { width: 100%; }
.text-button { padding: 0; border: 0; color: #bdb4ff; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.text-button:hover { color: #e2ddff; }
.notice {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(97, 174, 243, .26);
  border-radius: var(--radius-sm);
  color: #bcddfb;
  background: rgba(97, 174, 243, .07);
  font-size: 11px;
  line-height: 1.45;
}
.notice.warning { color: #f0d48e; border-color: rgba(234, 191, 87, .28); background: rgba(234, 191, 87, .07); }
.notice.error { color: #ffc2cc; border-color: rgba(251, 113, 133, .3); background: rgba(251, 113, 133, .07); }
.notice.success { color: #a5e8ca; border-color: rgba(68, 211, 157, .28); background: rgba(68, 211, 157, .07); }
details > summary { cursor: pointer; }
details.notice > summary, .context-help > summary, .danger-zone > summary { font-size: 11px; font-weight: 650; }
details.notice > p, .context-help > p { margin: 7px 0 0; }
.context-help { color: var(--muted); font-size: 10px; }
.context-help summary { color: var(--text-soft); }

/* Segmented controls */
.segmented-control {
  min-width: 0;
  min-height: 36px;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0d131c;
}
.segmented-control label {
  position: relative;
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.segmented-control label:hover { color: var(--text-soft); }
.segmented-control label:has(input:checked) { color: #ece9ff; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--purple-border); }
.segmented-control input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented-control label:has(input:focus-visible) { outline: 2px solid var(--purple-hover); outline-offset: 1px; }

/* Popover menus */
.action-menu {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
}
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  right: 0;
  min-width: 176px;
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow-drawer);
}
.menu-action, .action-menu-popover a {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}
.menu-action:hover, .action-menu-popover a:hover { color: var(--text); background: var(--surface-hover); }
.danger-text { color: #ffabb9; }

/* Execution */
.execution-toolbar { display: grid; gap: 9px; padding: 10px 11px; }
.execution-toolbar-top {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.execution-identity, .execution-heading-group, .execution-header-status {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.execution-heading-group h2 { white-space: nowrap; }
.heartbeat-label { color: #9ecefb; border-color: rgba(97, 174, 243, .24); background: rgba(97, 174, 243, .07); }
.engine-state { text-transform: uppercase; }
.state-running, .state-starting, .status-open { color: #9ce6c5; border-color: rgba(68, 211, 157, .28); background: rgba(68, 211, 157, .08); }
.state-stopped, .status-closed { color: var(--muted); }
.state-error { color: #ffc2cc; border-color: rgba(251, 113, 133, .3); background: rgba(251, 113, 133, .08); }
.execution-control-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(174px, .68fr) minmax(112px, .38fr) minmax(210px, 1fr) minmax(150px, .58fr) auto;
  align-items: center;
  gap: 8px;
}
.compact-field { min-width: 0; display: grid; gap: 3px; color: var(--muted); font-size: 9px; font-weight: 650; }
.execution-broker-field { min-height: 36px; align-content: center; padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0d131c; }
.execution-broker-field strong { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.execution-account-field { min-height: 36px; align-content: center; padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0d131c; }
.execution-account-field strong { color: var(--text-soft); font-size: 11px; overflow-wrap: anywhere; }
.schedule-chip {
  min-width: 0;
  min-height: 36px;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #0d131c;
}
.schedule-chip > span { flex: 0 0 auto; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.schedule-chip > strong { overflow: hidden; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.execution-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.execution-actions .button { padding-inline: 9px; }
.execution-actions .button svg { width: 14px; height: 14px; flex-basis: 14px; }
.manual-options { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0d131c; }
.execution-instrument-picker { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.execution-instrument-picker legend { margin-bottom: 5px; padding: 0; color: var(--muted); font-size: 10px; font-weight: 650; }
.instrument-checkboxes { min-width: 0; display: grid; gap: 5px; }
.instrument-execution-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(84px, .7fr) minmax(110px, 1fr) minmax(110px, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.instrument-checkbox-option, .instrument-protection-field {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  color: var(--text-soft) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.instrument-checkbox-option input, .instrument-protection-field input { width: 16px; height: 16px; margin: 0; }
.instrument-capital-field { min-width: 0; display: grid !important; gap: 3px !important; color: var(--muted) !important; font-size: 9px !important; }
.instrument-capital-input { height: 30px !important; padding-inline: 7px !important; font-size: 11px; }
.instrument-family-field { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: grid; gap: 3px; font-size: 10px; color: var(--muted); }
.instrument-family-input { width: 100%; min-width: 0; height: 32px; font-size: 11px; }
.family-lifecycle { padding: 8px; color: var(--text-soft); font-size: 11px; overflow-wrap: anywhere; }
.live-trading-mode .execution-toolbar { border-color: var(--live-border); background: #17130f; }
.live-trading-mode .execution-heading-group h2 { color: #fff0e5; }
.live-trading-mode .heartbeat-label { color: #ffcfad; border-color: var(--live-border); background: var(--live-soft); }
.live-trading-mode .execution-mode-control label:has(input:checked),
.live-trading-mode .selection-mode-control label:has(input:checked) { color: #fff0e5; background: var(--live-soft); box-shadow: inset 0 0 0 1px var(--live-border); }
.live-trading-mode .execution-toolbar input[type="checkbox"], .live-trading-mode .execution-toolbar input[type="radio"] { accent-color: var(--live); }
.live-trading-mode .execution-actions .button.primary { border-color: var(--live); background: #d85b0b; }
.live-trading-mode .execution-actions .button.primary:hover:not(:disabled) { background: var(--live); }
.live-trading-mode .open-position-panel { border-color: var(--live-border); }
.live-trading-mode .chart-line { stroke: var(--live); }
.execution-message { min-height: auto; }

/* KPI strips */
.metrics-grid, .kpi-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}
.metrics-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metrics-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-card {
  min-width: 0;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 11px;
  background: var(--surface);
}
.metric-label { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.metric-value { overflow: hidden; font-size: clamp(16px, 1.55vw, 21px); font-weight: 760; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.metric-hint { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric-positive .metric-value, .positive { color: var(--positive) !important; }
.metric-negative .metric-value, .negative { color: var(--negative) !important; }
.position-pnl { min-height: 28px; padding: 4px 9px; font-size: 11px; font-weight: 750; }
.position-pnl.positive { color: var(--positive); border-color: rgba(68, 211, 157, .3); background: rgba(68, 211, 157, .08); }
.position-pnl.negative { color: var(--negative); border-color: rgba(251, 113, 133, .3); background: rgba(251, 113, 133, .08); }
.position-pnl.neutral { color: var(--muted); }
.open-position-panel:has(.empty-chart), .open-position-panel.is-empty { padding-block: 9px; }
.open-position-panel.is-empty .trade-detail-container { display: none; }
.trade-detail-container:empty { display: none; }
.execution-history-panel .compact-empty { min-height: 54px; }

/* Persistent watchlist */
.market-watchlist {
  position: sticky;
  top: var(--topbar-height);
  width: var(--watchlist-width);
  height: calc(100vh - var(--topbar-height));
  padding: 13px;
  overflow: auto;
  border-left: 1px solid var(--border-strong);
  background: var(--canvas-raised);
}
.watchlist-header {
  position: sticky;
  top: -13px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -13px -13px 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--canvas-raised);
}
.watchlist-header > div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.watchlist-updated { margin: -5px 0 10px; color: var(--muted-2); font-size: 9px; }
.watchlist-live-indicator.active { color: #9ce6c5; border-color: rgba(68, 211, 157, .28); background: rgba(68, 211, 157, .08); }
.watchlist-live-indicator.error { color: #ffc2cc; border-color: rgba(251, 113, 133, .28); background: rgba(251, 113, 133, .08); }
.watchlist-items { min-width: 0; display: grid; gap: 8px; }
.watchlist-empty, .watchlist-pending { padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: 11px; }
.watchlist-error { color: #ffc2cc; border-color: rgba(251, 113, 133, .3); }
.watchlist-error small { display: block; margin-top: 5px; color: var(--muted-2); overflow-wrap: anywhere; }
.watchlist-instrument { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.watchlist-instrument-heading, .watchlist-contract, .watchlist-candidate { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; }
.watchlist-instrument-heading { border-bottom: 1px solid var(--border); }
.watchlist-instrument-heading > div > strong { font-size: 12px; }
.watchlist-instrument-heading small, .watchlist-indicator small { color: var(--muted-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.watchlist-indicators { display: flex !important; align-items: center; gap: 10px !important; text-align: right; }
.watchlist-indicator { display: grid; justify-items: end; gap: 1px; }
.watchlist-indicator strong { font-size: 11px; }
.watchlist-ott strong { color: #cfc7ff; }
.watchlist-spot strong { color: #a8d4fc; }
.watchlist-live-snapshot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 5px 10px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 8px; }
.watchlist-live-snapshot > small { margin-right: auto; color: var(--muted-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.watchlist-live-snapshot strong { margin-left: 2px; color: var(--text-soft); font-size: 9px; }
.watchlist-contract { padding-block: 6px; color: var(--muted); background: var(--surface-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.watchlist-contract-direction { display: inline-flex; align-items: center; gap: 5px; }
.reference-direction { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; color: var(--muted); }
.reference-direction svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.reference-direction.up { color: var(--positive); }
.reference-direction.down { color: var(--negative); }
.reference-direction.down svg { transform: scaleY(-1); }
.watchlist-live-snapshot .reference-direction, .watchlist-contract .reference-direction { width: 16px; height: 16px; flex-basis: 16px; }
.watchlist-legs { display: grid; }
.watchlist-leg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 7px; padding: 7px 10px; border-top: 1px solid var(--border); }
.watchlist-leg:first-child { border-top: 0; }
.watchlist-leg > span { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--text-soft); font-size: 10px; }
.watchlist-leg > strong { font-size: 10px; }
.watchlist-leg > small { grid-column: 1 / -1; color: var(--muted-2); font-size: 8px; }
.watchlist-leg > small b, .watchlist-contract b { font-weight: 750; }
.watchlist-candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-2); }
.watchlist-candidate > span { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; }
.watchlist-candidate > small { grid-column: 1 / -1; color: var(--muted-2); font-size: 8px; }
.watchlist-option-ltp { display: grid !important; justify-items: end; gap: 1px !important; }
.watchlist-option-ltp small { color: var(--muted-2); font-size: 7px; text-transform: uppercase; }
.watchlist-option-ltp strong { font-size: 10px; }
.watchlist-option-type, .watchlist-side { min-width: 26px; padding: 2px 4px; border-radius: 4px; text-align: center; font-size: 8px; }
.watchlist-option-type.pe, .watchlist-side.sell { color: #ffb4c0; background: rgba(251, 113, 133, .1); }
.watchlist-option-type.ce, .watchlist-side.buy { color: #9ce6c5; background: rgba(68, 211, 157, .1); }

/* Backtests */
.backtest-toolbar { min-width: 0; display: grid; gap: 8px; padding: 9px 10px; }
.toolbar-row { min-width: 0; display: flex; align-items: center; gap: 7px; }
.backtest-run-row { display: grid; grid-template-columns: auto minmax(170px, .8fr) minmax(170px, .7fr) minmax(252px, auto) auto auto; }
.backtest-history-row { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.35fr) auto minmax(0, auto); }
.date-range { min-width: 0; display: grid; grid-template-columns: minmax(118px, 1fr) auto minmax(118px, 1fr); align-items: end; gap: 5px; }
.date-range label { min-width: 0; display: grid; gap: 2px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.date-range-separator { padding-bottom: 9px; color: var(--muted-2); }
.backtest-name-field { min-width: 0; }
#backtest-name-error { color: #ffc2cc; font-size: 11px; text-transform: none; }
#new-backtest-name[aria-invalid="true"] { border-color: #ffc2cc; }
.report-select-field { min-width: 0; }
.rename-editor { min-width: 0; display: flex; align-items: center; gap: 5px; }
.rename-editor input { min-width: 128px; }
.toolbar-progress {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(70px, .5fr) auto;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 8px;
  border: 1px solid var(--purple-border);
  border-radius: var(--radius-sm);
  background: var(--purple-soft);
}
.toolbar-progress .progress-copy { min-width: 0; display: grid; }
.toolbar-progress .progress-copy strong, .toolbar-progress .progress-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-progress .progress-copy strong { font-size: 10px; }
.toolbar-progress .progress-copy small { color: var(--muted); font-size: 8px; }
.progress-track { height: 3px; overflow: hidden; border-radius: 999px; background: var(--border); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--purple); transition: width .25s ease; }
.progress-indeterminate .progress-track span { width: 100% !important; opacity: .35; }
.history-cache-field { max-width: 320px; }
.spinner { width: 12px; height: 12px; display: inline-block; border: 2px solid rgba(207, 199, 255, .3); border-top-color: #cfc7ff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.compact-empty-state { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted-2); font-size: 11px; }
.compact-empty-state svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.backtest-results-layout { align-items: start; }
.report-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.report-title-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.report-title-line h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.result-toggle { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 10px; font-weight: 650; }
.result-toggle input { width: 15px; height: 15px; margin: 0; }
.result-filter-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.result-filter-toolbar label { min-width: 0; display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.symbol-pnl-strip { min-width: 0; padding-inline: 2px; }
.symbol-pnl-grid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.symbol-pnl-card { gap: 6px; padding-inline: 9px; }
.symbol-pnl-card span { color: var(--muted); font-size: 9px; }
.symbol-pnl-card strong { font-size: 11px; }
.backtest-kpis { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.backtest-chart-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

/* Charts */
.chart-wrap { width: 100%; min-width: 0; min-height: 205px; margin-top: 7px; overflow: hidden; }
.empty-chart { min-height: 110px; display: grid; place-content: center; padding: 12px; color: var(--muted-2); text-align: center; font-size: 11px; }
.empty-chart.compact-empty { min-height: 54px; }
.line-chart { width: 100%; height: auto; min-height: 195px; overflow: visible; }
.chart-grid line { stroke: rgba(142, 152, 168, .16); stroke-width: 1; }
.chart-grid text, .chart-x-labels text { fill: var(--muted-2); font-size: 10px; }
.chart-line { fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.negative-line { stroke: var(--negative); }
.chart-area { fill: rgba(251, 113, 133, .1); }
.chart-dot { fill: #cfc7ff; stroke: var(--surface); stroke-width: 2; }
.chart-hover-point { fill: transparent; stroke: transparent; cursor: crosshair; pointer-events: all; }
.chart-hover-point:hover, .chart-hover-point:focus { fill: rgba(207, 199, 255, .18); stroke: #cfc7ff; stroke-width: 1.5; }
.monthly-pnl-wrap { overflow-x: auto; }
.monthly-pnl-chart { width: 100%; height: auto; min-height: 205px; display: block; overflow: visible; }
.zero-line { stroke: rgba(243, 245, 248, .36); stroke-width: 1; }
.pnl-bar { fill: var(--purple); opacity: .9; }
.pnl-bar.net { fill: var(--positive); }
.pnl-bar.negative { fill: var(--negative); }
.month-label { fill: var(--muted-2); font-size: 9px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 13px; padding: 0 2px; color: var(--muted); font-size: 9px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--purple); }
.chart-legend .net::before { background: var(--positive); }

/* Trade summaries and expandable details */
.table-panel { min-width: 0; padding-bottom: 8px; overflow: hidden; }
.table-scroll, .trade-list { width: 100%; min-width: 0; margin-top: 7px; overflow-x: auto; overscroll-behavior-inline: contain; }
table { width: 100%; border-collapse: collapse; }
.compact-trade-table { min-width: 780px; table-layout: auto; }
th { padding: 8px 9px; border-bottom: 1px solid var(--border); color: var(--muted-2); font-size: 9px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
td { padding: 9px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 11px; vertical-align: middle; }
td strong, td small { display: block; }
td small { margin-top: 2px; overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.trade-summary-row { cursor: pointer; transition: background-color .12s ease; }
.trade-summary-row:hover, .trade-summary-row.is-expanded { background: var(--surface-2); }
.trade-expand-button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.trade-expand-button:hover { color: var(--text); background: var(--surface-hover); }
.trade-expand-button[aria-expanded="true"] { color: #d7d0ff; border-color: var(--purple-border); background: var(--purple-soft); }
.trade-expand-button svg { width: 13px; height: 13px; transition: transform .15s ease; }
.trade-expand-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.trade-detail-row td { padding: 0; border-bottom: 1px solid var(--border-strong); background: #0d131c; }
.trade-detail-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 9px; }
.trade-leg-detail { min-width: 0; display: grid; gap: 5px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.trade-leg-detail > span { color: var(--muted-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.trade-leg-detail > strong { font-size: 10px; }
.trade-leg-detail dl { min-width: 0; display: grid; gap: 3px; margin: 0; }
.trade-leg-detail dl > div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.trade-leg-detail dt { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.trade-leg-detail dd { margin: 0; color: var(--text-soft); font-size: 9px; text-align: right; }
.trade-detail-meta { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 9px 9px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.trade-detail-meta > div { min-width: 0; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 4px; }
.trade-detail-meta dt, .trade-detail-meta dd { min-width: 0; margin: 0; font-size: 10px; font-weight: 700; line-height: 1.4; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.trade-detail-meta dt { color: var(--muted-2); }
.trade-detail-meta dd { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.trade-pagination, .pagination-bar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 1px 0; }
.trade-page-summary, .pagination-bar > span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.trade-pagination > div, .pagination-actions { display: flex; align-items: center; gap: 5px; }
.trade-pagination [data-trade-page] { min-height: 30px; padding-inline: 9px; }
.leg-cell, .trade-pnl-cell { min-width: 0; }
.leg-cell small, .trade-pnl-cell small { display: flex; justify-content: space-between; gap: 8px; }
.signal { border: 0; }
.signal.up { color: #b9daf8; background: rgba(97, 174, 243, .1); }
.signal.down { color: #d7d0ff; background: var(--purple-soft); }
.status-dot { min-height: 22px; border: 0; }

/* Settings */
.settings-layout { min-width: 0; display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: start; gap: 12px; }
.settings-nav {
  position: sticky;
  top: calc(var(--topbar-height) + 12px);
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.settings-nav button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  text-align: left;
}
.settings-nav button:hover { color: var(--text-soft); background: var(--surface-2); }
.settings-nav button.active, .settings-nav button[aria-current="page"] { color: #ece9ff; border-color: var(--purple-border); background: var(--purple-soft); }
.settings-content, .settings-pane { min-width: 0; }
.settings-pane { padding-bottom: 0; }
.settings-pane-heading { min-height: 36px; padding-inline: 2px; }
.config-section { display: grid; gap: 11px; }
.config-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.compact-config-grid { grid-template-columns: repeat(3, minmax(0, 220px)); }
.config-grid label, .broker-fields label, .weekday-field { min-width: 0; display: grid; align-content: end; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.config-grid .wide-field, .weekday-field.wide-field { grid-column: span 2; }
.toggle-field {
  min-height: var(--control-height);
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft) !important;
  background: #0d131c;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.toggle-field input { width: 16px; height: 16px; margin: 0; }
.weekday-options { min-height: var(--control-height); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.weekday-options label { min-height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); background: #0d131c; font-size: 10px; text-transform: none; }
.weekday-options input { width: 14px; height: 14px; margin: 0; }
.settings-savebar {
  position: sticky;
  z-index: 25;
  bottom: 10px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(17, 23, 32, .96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
}
.settings-save-state { flex: 1; color: var(--muted); font-size: 10px; }
.settings-save-state.is-dirty { color: var(--text-soft); }
.settings-save-state.is-locked { color: var(--warning); }
.schedule-config-panel { border-color: var(--purple-border); }
.schedule-rule-table { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.schedule-rule-header, .schedule-rule-row { min-width: 0; display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(70px, .4fr) minmax(120px, .75fr); align-items: center; gap: 8px; padding: 7px 9px; }
.schedule-rule-header { color: var(--muted-2); background: var(--surface-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.schedule-rule-row { border-top: 1px solid var(--border); }
.schedule-rule-row strong { font-size: 10px; }
.schedule-rule-row :where(select, input) { height: 32px !important; }
.schedule-rule-row .schedule-units { color: var(--muted); font-size: 10px; }
.schedule-warning { color: var(--warning); }
.market-instruments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.market-instrument-card { min-width: 0; display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0d131c; }
.market-instrument-card > div { min-width: 0; display: grid; gap: 2px; }
.market-instrument-card strong { font-size: 12px; }
.market-instrument-card small { color: var(--muted-2); font-size: 9px; }
.market-instrument-card label { min-width: 135px; display: grid; gap: 3px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.broker-settings-layout { min-width: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 10px; }
.broker-selector { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: #0d131c; }
.broker-selector button { width: 100%; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; color: var(--text-soft); background: transparent; cursor: pointer; text-align: left; }
.broker-selector button > span:first-child { min-width: 0; display: grid; gap: 2px; }
.broker-selector button small { color: var(--muted-2); font-size: 8px; }
.broker-selector button:hover { background: var(--surface-2); }
.broker-selector button.active, .broker-selector button[aria-current="page"] { border-color: var(--purple-border); background: var(--purple-soft); }
.broker-form-stack, .broker-form { min-width: 0; }
.broker-form { display: grid; gap: 10px; }
.broker-fields { min-width: 0; display: grid; gap: 8px; }
.broker-fields input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.danger-zone { padding: 8px 9px; border: 1px solid rgba(251, 113, 133, .25); border-radius: var(--radius-sm); background: rgba(251, 113, 133, .04); }
.danger-zone > div { margin-top: 8px; }
.formula, code { color: #d7d0ff; background: var(--purple-soft); }
.formula { margin-top: 10px; padding: 8px 9px; border: 1px solid var(--purple-border); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
code { padding: 1px 4px; border-radius: 4px; }

@media (max-width: 1199px) {
  :root { --sidebar-width: 64px; --watchlist-width: 280px; }
  .sidebar { align-items: center; padding-inline: 7px; }
  .primary-nav { width: 100%; }
  .tabs button, .primary-nav button { justify-content: center; width: 48px; margin-inline: auto; padding: 0; }
  .primary-nav button span { display: none; }
  .execution-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .execution-actions { grid-column: 1 / -1; }
  .backtest-run-row { grid-template-columns: auto minmax(160px, 1fr) minmax(160px, 1fr) minmax(250px, auto) auto auto; }
  .backtest-history-row { grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) auto; }
  .rename-editor { grid-column: 1 / -1; }
  .backtest-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .backtest-run-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .backtest-run-row .backtest-mode-control { grid-column: 1; grid-row: 1; }
  .backtest-run-row .backtest-schedule-chip { grid-column: 2 / -1; grid-row: 1; }
  .backtest-run-row .backtest-name-field { grid-column: 1 / -1; grid-row: 2; }
  .backtest-run-row .date-range { grid-column: 1 / -1; grid-row: 3; }
  .backtest-run-row #run-dhan { grid-column: 3; grid-row: 4; }
  .backtest-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .toolbar-progress { grid-column: 1 / -1; grid-row: 2; }
  .backtest-chart-grid { grid-template-columns: 1fr; }
  .metrics-grid, .metrics-grid.five, .metrics-grid.six { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body { padding-bottom: 60px; }
  .app-shell { min-height: calc(100vh - 60px); }
  .topbar { padding-inline: 10px; }
  .brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
  #app-title { max-width: 35vw; font-size: 13px; }
  .brand-product { display: none; }
  .topbar-status .badge:not(:last-of-type) { display: none; }
  .app-frame { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .mobile-nav.tabs {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--border);
    background: #0b1018;
  }
  .mobile-nav.tabs button {
    width: 100%;
    height: 51px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 3px;
    border-radius: 6px;
    font-size: 9px;
    text-align: center;
  }
  .mobile-nav.tabs button span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mobile-nav.tabs svg { width: 16px; height: 16px; flex-basis: 16px; }
  .workspace { min-height: calc(100vh - 116px); padding: 8px; }
  .stack { gap: 8px; }
  .panel, .surface { padding: 10px; }
  .report-header { align-items: flex-start; flex-direction: column; }
  .report-actions { width: 100%; justify-content: flex-start; }
  .execution-toolbar-top { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .execution-identity { align-items: flex-start; flex-direction: column; gap: 4px; }
  .execution-control-grid { grid-template-columns: 1fr; }
  .execution-actions { grid-column: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .execution-actions .button { padding-inline: 5px; }
  .execution-actions .button span { overflow: hidden; text-overflow: ellipsis; }
  .instrument-execution-row { grid-template-columns: 1fr; }
  .metrics-grid, .metrics-grid.three, .metrics-grid.five, .metrics-grid.six, .backtest-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 62px; padding: 8px 9px; }
  .metric-value { font-size: 17px; }
  .market-watchlist {
    display: none;
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 116px);
    padding: 10px;
    border-top: 1px solid var(--border-strong);
    border-left: 0;
  }
  .watchlist-header { position: static; margin: -10px -10px 10px; padding: 10px; }
  body[data-section="watchlist"] .workspace { display: none; }
  body[data-section="watchlist"] .market-watchlist { display: block; }
  .backtest-run-row { grid-template-columns: minmax(0, 1fr) auto; }
  .backtest-run-row .backtest-mode-control { grid-column: 1 / -1; grid-row: 1; }
  .backtest-run-row .backtest-schedule-chip { min-width: 0; grid-column: 1; grid-row: 2; }
  .backtest-run-row .backtest-name-field { grid-column: 1 / -1; grid-row: 3; }
  .backtest-run-row .date-range { grid-column: 1 / -1; grid-row: 4; }
  .backtest-run-row #run-dhan { grid-column: 2; grid-row: 5; }
  .backtest-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .toolbar-progress, .rename-editor { grid-column: 1 / -1; }
  .toolbar-progress { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .toolbar-progress .progress-track { grid-column: 1 / -1; }
  .result-filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-filter-toolbar .button { grid-column: 1 / -1; justify-self: end; }
  .chart-wrap { min-height: 175px; }
  .line-chart, .monthly-pnl-chart { min-height: 165px; }
  .trade-list { overflow-x: visible; }
  .compact-trade-table,
  .compact-trade-table tbody,
  .compact-trade-table tr,
  .compact-trade-table td { width: 100%; min-width: 0; }
  .compact-trade-table { display: block; }
  .compact-trade-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .compact-trade-table tbody { display: grid; gap: 8px; }
  .trade-summary-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    padding: 9px 9px 9px 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .trade-summary-row td { display: block; padding: 0; border: 0; overflow: hidden; }
  .trade-summary-row td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    color: var(--muted-2);
    font-size: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .trade-summary-row .trade-expand-cell { position: absolute; top: 9px; left: 8px; width: 26px; }
  .trade-summary-row .trade-expand-cell::before { display: none; }
  .trade-summary-row td:nth-child(2), .trade-summary-row td:last-child { grid-column: 1 / -1; }
  .trade-detail-row { display: block; margin-top: -8px; }
  .trade-detail-row > td { display: block; padding: 8px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: #0d131c; }
  .trade-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-detail-meta { grid-template-columns: 1fr 1fr; }
  .settings-layout { display: block; }
  .settings-nav {
    position: sticky;
    top: var(--topbar-height);
    z-index: 24;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -8px -8px 8px;
    padding: 6px 8px;
    overflow-x: hidden;
    border-width: 0 0 1px;
    border-radius: 0;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button { width: 100%; min-width: 0; padding-inline: 6px; }
  .config-grid, .compact-config-grid { grid-template-columns: 1fr; }
  .config-grid .wide-field, .weekday-field.wide-field { grid-column: auto; }
  .settings-savebar { bottom: 68px; }
  .schedule-rule-header { display: none; }
  .schedule-rule-row { grid-template-columns: 1fr 1fr; padding: 9px; }
  .schedule-rule-row > strong { grid-column: 1 / -1; }
  .market-instruments { grid-template-columns: 1fr; }
  .market-instrument-card { align-items: stretch; flex-direction: column; }
  .market-instrument-card label { min-width: 0; }
  .broker-settings-layout { grid-template-columns: 1fr; }
  .broker-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .topbar-status .badge { max-width: 126px; overflow: hidden; text-overflow: ellipsis; }
  .execution-toolbar-top { grid-template-columns: 1fr auto; }
  .execution-mode-control { grid-column: 1 / -1; width: 100%; }
  .execution-actions .button span { display: none; }
  .date-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .date-range-separator { display: none; }
  .result-filter-toolbar { grid-template-columns: 1fr 1fr; }
  .trade-detail-grid, .trade-detail-meta { grid-template-columns: 1fr; }
  .trade-pagination, .pagination-bar { align-items: flex-start; flex-direction: column; }
  .trade-pagination > div, .pagination-actions { width: 100%; }
  .trade-pagination [data-trade-page], .pagination-actions .button { flex: 1; }
  .schedule-rule-row { grid-template-columns: 1fr; }
  .schedule-rule-row > strong { grid-column: auto; }
  .broker-selector { grid-template-columns: 1fr; }
}

/* Size dense controls against the workspace, including when the watchlist is open. */
:root { --muted-2: #909bad; }
.workspace { container-type: inline-size; }
body[data-section="backtests"] .app-frame,
body[data-section="settings"] .app-frame { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
body[data-section="backtests"] .market-watchlist,
body[data-section="settings"] .market-watchlist { display: none; }
.backtest-toolbar { gap: 14px; padding: 16px; }
.backtest-run-row { grid-template-columns: auto minmax(0, 1fr) minmax(160px, 1fr) minmax(250px, 1fr) auto; align-items: end; gap: 10px; }
.backtest-history-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.backtest-history-row .toolbar-progress, .backtest-history-row .rename-editor { grid-column: 1 / -1; grid-row: auto; }
.backtest-history-row .report-overflow { grid-column: 2; grid-row: 1; align-self: end; }
.backtest-schedule-chip { height: auto; white-space: normal; }
.schedule-chip > strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.report-title { flex: 1; }
.report-title-line { width: 100%; flex-wrap: wrap; }
.report-title-line h2 { white-space: normal; overflow-wrap: anywhere; font-size: 18px; }
.report-title-line .badge { flex-shrink: 0; }
.report-actions { flex-shrink: 0; flex-wrap: wrap; }
.metrics-grid.backtest-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-card { min-height: 90px; padding: 14px; }
.metric-label, .metric-hint { white-space: normal; overflow-wrap: anywhere; }
.metric-label { font-size: 10px; }
.metric-value { font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
.metric-hint { font-size: 11px; }
.panel-heading { flex-wrap: wrap; }
.chart-wrap { min-height: 285px; }
.line-chart { display: block; height: 285px; }
.monthly-pnl-chart { height: 245px; }
.chart-grid text, .chart-x-labels text, .month-label { font-size: 11px; }
.result-filter-toolbar { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; padding: 12px; gap: 10px; }
.compact-field, .date-range label, .result-filter-toolbar label,
.config-grid label, .broker-fields label { font-size: 11px; }
.settings-layout { grid-template-columns: 160px minmax(0, 1fr); }
.schedule-rule-header, .schedule-rule-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(60px, .4fr) minmax(0, .75fr); }
.schedule-rule-row > * { min-width: 0; overflow-wrap: anywhere; }
.market-instrument-card { flex-wrap: wrap; }
.market-instrument-card label { flex: 1; }
.broker-selector button { padding-block: 8px; grid-template-columns: 1fr; }
.broker-selector .badge { justify-self: start; white-space: normal; }
.execution-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.execution-actions { grid-column: 1 / -1; flex-wrap: wrap; }
.execution-actions .button { min-height: 38px; }

@container (max-width: 1000px) {
  .backtest-run-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backtest-run-row > * { grid-column: auto !important; grid-row: auto !important; }
  .backtest-run-row .backtest-name-field { grid-column: 1 / -1 !important; }
  .backtest-run-row #run-dhan { align-self: end; }
  .backtest-chart-grid { grid-template-columns: 1fr; }
  .metrics-grid.backtest-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .config-grid, .compact-config-grid, .market-instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .broker-settings-layout { grid-template-columns: 1fr; }
  .broker-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 650px) {
  .metrics-grid.backtest-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-header { flex-direction: column; align-items: stretch; }
  .report-actions { justify-content: flex-start; }
  .export-menu .action-menu-popover { left: 0; right: auto; }
  .result-filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-filter-toolbar .button { grid-column: 1 / -1; justify-self: end; }
  .settings-layout { display: block; }
  .settings-nav { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 12px; }
  .config-grid, .compact-config-grid, .market-instruments { grid-template-columns: 1fr; }
  .config-grid .wide-field, .weekday-field.wide-field { grid-column: auto; }
  .schedule-rule-header { display: none; }
  .schedule-rule-row { grid-template-columns: minmax(0, 1fr) minmax(60px, .4fr); gap: 8px; padding: 12px; }
  .schedule-rule-row > strong, .schedule-rule-row .schedule-units { grid-column: 1 / -1; }
  .schedule-rule-row strong::after { content: ' · Strategy / lots'; color: var(--muted); font-weight: 400; }
}

@media (max-width: 767px) {
  :root { --control-height: 44px; --mobile-nav-height: calc(60px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--mobile-nav-height); }
  body[data-section="backtests"] .app-frame, body[data-section="settings"] .app-frame { grid-template-columns: minmax(0, 1fr); }
  .app-shell { min-height: calc(100dvh - var(--mobile-nav-height)); }
  .workspace { padding: 12px; }
  .stack { gap: 12px; }
  .panel, .surface, .backtest-toolbar { padding: 12px; }
  .backtest-run-row .backtest-mode-control, .backtest-run-row .backtest-schedule-chip,
  .backtest-run-row .date-range, .backtest-run-row #run-dhan { grid-column: 1 / -1 !important; }
  .backtest-run-row .date-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .date-range-separator { display: none; }
  .report-title-line h2 { order: 3; flex: 1 1 100%; font-size: 18px; }
  .metric-card { padding: 12px; }
  .metric-value { font-size: 20px; }
  .mobile-nav.tabs { height: var(--mobile-nav-height); }
  .settings-savebar { bottom: calc(var(--mobile-nav-height) + 8px); flex-wrap: wrap; }
  .settings-save-state { flex-basis: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .button, button.button, .icon-button, .menu-action, .action-menu-popover a,
  .settings-nav button, .segmented-control label, .weekday-options label { min-height: 44px; }
  .schedule-rule-row :where(select, input) { height: 44px !important; }
  .instrument-execution-row { grid-template-columns: 1fr; gap: 10px; }
  .instrument-capital-input { height: 44px !important; }
  .instrument-checkbox-option, .instrument-protection-field { min-height: 36px; }
  .trade-expand-button { width: 36px; height: 44px; }
  .trade-summary-row { padding-left: 52px; }
  .trade-summary-row .trade-expand-cell { width: 36px; }
  .trade-summary-row td::before, .trade-leg-detail dt, .trade-leg-detail dd { font-size: 10px; }
  .trade-leg-detail > strong, .trade-summary-row td { font-size: 12px; }
  .trade-leg-detail dl > div { flex-wrap: wrap; }
  .trade-detail-grid { padding: 0; }
  .trade-detail-meta { margin: 8px 0 0; }
  .toolbar-progress { grid-template-columns: auto minmax(0, 1fr) auto; }
  .toolbar-progress #cancel-backtest { grid-column: 1 / -1; }
  .toolbar-progress .progress-track { grid-row: auto; }
  .execution-actions .button span { display: inline; }
  .execution-actions .button { flex: 1; }
}

@media (max-width: 360px) {
  .backtest-run-row .date-range { grid-template-columns: minmax(0, 1fr); }
  .backtest-history-row { grid-template-columns: minmax(0, 1fr); }
  .backtest-history-row .report-overflow { grid-column: 1; grid-row: auto; }
  .report-overflow .action-menu-popover { left: 0; right: auto; }
  .rename-editor { flex-wrap: wrap; }
  .rename-editor input { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Versioned schedule controls need their own vertical space. */
#schedule-backtest-options, #schedule-live-options {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  padding: 12px; height: auto; min-width: 0; align-self: stretch;
  white-space: normal; overflow-wrap: anywhere;
}
#schedule-live-options { grid-column: 1 / -1; }
#schedule-backtest-options { grid-column: 1 / -1 !important; grid-row: auto !important; }
#schedule-backtest-options label, #schedule-live-options label { display: grid; gap: 6px; font-size: 11px; }
#schedule-backtest-options select, #schedule-live-options select { width: 100%; min-width: 0; }
#schedule-backtest-options > small, #schedule-live-options > small { line-height: 1.5; color: var(--muted); }
#schedule-preview { overflow: auto; max-height: 400px; margin-bottom: 12px; }
#schedule-preview:empty { display: none; }
#schedule-preview table { width: 100%; border-collapse: collapse; font-size: 11px; }
#schedule-preview td, #schedule-preview th { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
.calendar-warning { position: sticky; top: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin-bottom: 16px; border: 1px solid var(--warning); border-radius: 10px; background: #302817; color: #ffe4a3; }
.calendar-warning p { margin: 5px 0 0; font-size: 13px; }
.calendar-manager { min-width: 0; border: 1px solid var(--border-strong); padding: 18px; border-radius: 12px; scroll-margin-top: 120px; }
.calendar-manager p { line-height: 1.5; }
.calendar-status-label { color: var(--text-soft); font-size: 16px; }
.calendar-actions, .calendar-facts { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.calendar-facts > span { background: var(--surface-2); padding: 10px 14px; border-radius: 8px; font-size: 12px; line-height: 1.7; }
.calendar-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.calendar-fields label, #calendar-key-field { display: flex; flex-direction: column; gap: 6px; }
.calendar-table-wrap { overflow-x: auto; max-height: 390px; border: 1px solid var(--border); border-radius: 8px; }
.calendar-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.calendar-table td, .calendar-table th { padding: 8px; white-space: nowrap; border-bottom: 1px solid var(--border); text-align: left; }
.calendar-table thead { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.calendar-table input[type=date] { min-width: 130px; }
.calendar-table input[type=checkbox], .calendar-review-check input { width: 18px; height: 18px; accent-color: var(--purple); }
.calendar-issue { padding: 14px; margin: 10px 0; background: #302817; border: 1px solid var(--warning); border-radius: 8px; overflow-wrap: anywhere; }
.calendar-review-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.calendar-error { color: var(--warning); }
.calendar-manager { font-size: 13px; color: var(--text-soft); }
.calendar-manager .calendar-review-check { display: flex; flex-direction: row; align-items: center; text-transform: none; font-size: 13px; }
.calendar-manager .calendar-review-check input { flex: 0 0 18px; }
.calendar-selected-row { background: var(--purple-soft); }
#calendar-feedback { color: var(--text-soft); overflow-wrap: anywhere; }
@media (max-width: 700px) { .calendar-warning { position: relative; flex-direction: column; align-items: stretch; } .calendar-fields { grid-template-columns: 1fr; } .calendar-manager { padding: 12px; } }

.research-v2-selection { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; overflow-wrap: anywhere; }
@media (min-width: 981px) {
  .research-v2-table .schedule-rule-header, .research-v2-table .schedule-rule-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) 45px minmax(90px, .5fr);
  }
}

/* Execution shares its workspace with the watchlist, so viewport breakpoints
   alone cannot determine how many controls or metrics will fit. */
#schedule-deployment-details { overflow-wrap: anywhere; margin-top: 12px; }
.schedule-field { display: grid; gap: 5px; }
.schedule-field-label { display: none; color: var(--muted); font-size: 11px; }
.schedule-strategy-selection { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
#report-source-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.4; }
.execution-actions { display: flex; }
.execution-actions .button { flex: 0 1 auto; }
.execution-actions .button span { overflow: visible; white-space: normal; }
.icon-button { min-width: 44px; }

@container (max-width: 650px) {
  .metrics-grid:not(.backtest-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .execution-toolbar-top { grid-template-columns: minmax(0, 1fr) auto; }
  .execution-mode-control { grid-column: 1 / -1; width: 100%; }
  .execution-identity { align-items: flex-start; }
  .execution-header-status { justify-content: flex-end; }
  .execution-control-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .execution-actions { gap: 8px; }
  .execution-actions .button { flex: 1; min-height: 44px; }
  .execution-actions .icon-button { min-height: 44px; }
  .schedule-rule-row, .research-v2-table .schedule-rule-row { grid-template-columns: minmax(0, 1fr); }
  .schedule-rule-row strong::after { content: none; }
  .schedule-field-label { display: block; }
  .schedule-rule-row > strong { font-size: 12px; }
}

/* Keep the execution workspace usable on portrait tablets. */
@media (min-width: 768px) and (max-width: 1000px) {
  body[data-section="execution"] .app-frame { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  body[data-section="execution"] .market-watchlist { grid-column: 2; position: static; width: auto; height: auto; min-height: 240px; border-top: 1px solid var(--border); }
  body[data-section="execution"] .sidebar { grid-row: 1 / 3; }
}

@media (pointer: coarse) {
  :root { --control-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .button, button.button, .icon-button, .menu-action, .action-menu-popover a,
  .settings-nav button, .segmented-control label, .weekday-options label,
  .primary-nav button, .text-button, details > summary { min-height: 44px; }
  .schedule-rule-row :where(select, input), .instrument-capital-input { height: 44px !important; }
  .instrument-family-input { height: 44px; font-size: 16px; }
}

@media (max-width: 767px) {
  .execution-actions .button { flex: 1; }
  .instrument-family-input { height: 44px; font-size: 16px; }
  .button { padding-block: 8px; }
  .text-button, details > summary { min-height: 44px; display: flex; align-items: center; }
  details:not(.action-menu) > summary::before { content: '▸'; margin-right: 8px; }
  details[open]:not(.action-menu) > summary::before { content: '▾'; }
}

#capital-multiplier-hint { grid-column: 1 / -1; color: var(--muted); text-transform: none; }

/* Setup adapts to available workspace width, including the execution watchlist. */
.backtest-toolbar > .backtest-mode-control { justify-self: start; }
.backtest-setup-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.backtest-setup-main { min-width: 0; display: grid; gap: 12px; }
.backtest-data-options { min-width: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.backtest-data-options h2 { margin: 0; font-size: 12px; }
.backtest-data-options p { margin: 0; font-size: 11px; line-height: 1.5; }
.backtest-data-options .history-cache-field { max-width: none; }
.backtest-data-options .result-toggle { align-items: start; line-height: 1.5; }
.backtest-data-options .result-toggle input { flex-shrink: 0; margin-top: 2px; }
.backtest-setup-main .backtest-run-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.backtest-setup-main .backtest-run-row > * { grid-column: auto !important; grid-row: auto !important; }
.backtest-setup-main #schedule-backtest-options { grid-column: 1 / -1 !important; }
.backtest-setup-main #independent-backtest-options { grid-column: 1 / -1 !important; }
.backtest-setup-main .backtest-run-row #preview-schedule { justify-self: start; }
.backtest-setup-main .backtest-run-row #run-dhan { justify-self: end; min-width: 160px; }
#schedule-backtest-options, #schedule-live-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 16px; row-gap: 6px; align-content: start; }
#schedule-backtest-options > span, #schedule-live-options > span { grid-column: 1; grid-row: 1; }
#schedule-backtest-options > strong, #schedule-live-options > strong { grid-column: 1; grid-row: 2; font-size: 12px; }
#schedule-backtest-options > label, #schedule-live-options > label { grid-column: 2; grid-row: 1 / 3; align-self: start; }
#schedule-backtest-options > small, #schedule-live-options > small { grid-column: 1 / -1; margin-top: 4px; font-size: 11px; }
.backtest-history-row { border-top: 1px solid var(--border); padding-top: 12px; }
.manual-options .instrument-checkboxes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.manual-options .instrument-execution-row { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); padding: 12px; gap: 10px; align-content: start; }
.execution-control-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.execution-control-grid .selection-mode-control { grid-column: 1 / 3; justify-self: start; align-self: center; }
.execution-control-grid #schedule-live-options { grid-column: 1 / 3; }
.execution-control-grid .execution-actions { grid-column: auto; flex-wrap: wrap; align-self: end; }
.execution-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.execution-context-grid > * { min-width: 0; }
.execution-context-grid p { line-height: 1.6; }
.result-filter-toolbar:has(#capital-multiplier-hint) { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
.result-filter-toolbar #capital-multiplier-hint { grid-row: 2; margin: 0; line-height: 1.5; }

@container (max-width: 1100px) {
  .backtest-setup-grid { grid-template-columns: minmax(0, 1fr); }
  .backtest-data-options { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .backtest-data-options h2 { grid-column: 1 / -1; }
  .backtest-data-options .result-toggle { grid-column: 1; grid-row: 2; }
  .backtest-data-options .result-toggle + p { grid-column: 1; grid-row: 3; }
  .backtest-data-options .history-cache-field { grid-column: 2; grid-row: 2; }
  .backtest-data-options #history-cache-help { grid-column: 2; grid-row: 3; }
  .execution-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .execution-control-grid .selection-mode-control { grid-column: 1; }
  .execution-control-grid #schedule-live-options { grid-column: 1 / -1; }
  .execution-control-grid > .execution-account-field { grid-column: 1 / -1; }
  .result-filter-toolbar:has(#capital-multiplier-hint) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-filter-toolbar #capital-multiplier-hint { grid-row: 4; }
}

@container (max-width: 650px) {
  .backtest-setup-main .backtest-run-row { grid-template-columns: minmax(0, 1fr); }
  .backtest-setup-main .backtest-run-row > * { grid-column: 1 / -1 !important; }
  .backtest-setup-main .backtest-run-row #run-dhan,
  .backtest-setup-main .backtest-run-row #preview-schedule { width: 100%; min-width: 0; }
  #schedule-backtest-options, #schedule-live-options { grid-template-columns: minmax(0, 1fr); }
  #schedule-backtest-options > :is(span, strong, label, small),
  #schedule-live-options > :is(span, strong, label, small) { grid-column: 1; grid-row: auto; }
  .backtest-data-options { grid-template-columns: minmax(0, 1fr); }
  .backtest-data-options > * { grid-column: 1 !important; grid-row: auto !important; }
  .execution-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .execution-control-grid .execution-report-select, .execution-control-grid .execution-actions { grid-column: 1 / -1; }
  .execution-context-grid { grid-template-columns: minmax(0, 1fr); }
  .result-filter-toolbar:has(#capital-multiplier-hint) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-filter-toolbar #capital-multiplier-hint { grid-row: 5; }
  .manual-options .instrument-execution-row { grid-template-columns: minmax(0, 1fr); }
  .manual-options .instrument-family-field { grid-row: auto; }
}