/* Source: v11-layout-optimization.css */
/* Zhongqi Zhiyan / V11 layout optimization
 * Final cascade for the August desktop layout review. IDs, bindings and
 * trading logic remain unchanged; only composition and presentation change.
 */

:root {
  --zq-work-gap: 12px;
  --zq-dense-gap: 8px;
  --zq-panel-header: 46px;
}

html.v2-layout-ready .view,
html.v2-layout-ready .view > *,
html.v2-layout-ready .v2-region,
html.v2-layout-ready .v2-region > * {
  min-width: 0;
}

html.v2-layout-ready .view > .page-heading {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 10px !important;
}

html.v2-layout-ready :where(.panel-heading, .section-heading) {
  min-height: var(--zq-panel-header);
}

html.v2-layout-ready :where(.panel-heading, .section-heading) h2 {
  font-size: var(--zq-font-panel) !important;
  line-height: 1.3 !important;
}

html.v2-layout-ready :where(.panel-heading, .section-heading) p {
  color: var(--zq-text-secondary) !important;
  font-size: var(--zq-font-assist) !important;
  line-height: 1.45 !important;
}

/* Overview */
/* The overview keeps the market tape and execution rail as its first-screen
   decision surface. Runtime-chain and duplicate decision-summary cards remain
   bound for their owning pages, but do not occupy overview layout space. */
html.v2-layout-ready .quant-system-summary,
html.v2-layout-ready #overview .overview-decision-summary-rail {
  display: none !important;
}

@media (min-width: 1101px) {
  html.v2-layout-ready #overview .dashboard-grid {
    grid-template-columns: minmax(0, 1.72fr) minmax(360px, .78fr) !important;
    gap: var(--zq-work-gap) !important;
    align-items: stretch !important;
  }
}

html.v2-layout-ready #overview .overview-plan-command {
  grid-template-columns: minmax(180px, .72fr) repeat(2, minmax(0, 1fr)) !important;
  gap: var(--zq-dense-gap) !important;
  margin: 8px 0 0 !important;
}

html.v2-layout-ready #overview .overview-plan-command > article {
  min-height: 68px !important;
  padding: 8px 10px !important;
  justify-content: flex-start !important;
  border-radius: 4px !important;
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready #overview .overview-plan-command > article > strong,
html.v2-layout-ready #overview .overview-plan-command > article > small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html.v2-layout-ready #overview .overview-plan-command > article > small {
  min-height: 0 !important;
}

html.v2-layout-ready #overview #marketChart {
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
}

html.v2-layout-ready #overview .overview-market-subcharts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html.v2-layout-ready #overview .overview-market-subchart {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 272px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(172px, 1fr) auto !important;
  align-content: stretch !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .overview-market-subchart canvas {
  width: 100% !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: none !important;
}

html.v2-layout-ready #overview .overview-subchart-stats {
  min-height: 54px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .dashboard-side-column {
  align-self: stretch !important;
}

html.v2-layout-ready #overview .overview-depth-panel,
html.v2-layout-ready #overview .trade-plan-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .overview-order-book {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 146px !important;
  max-height: none !important;
  grid-template-rows: repeat(3, 48px) !important;
  grid-auto-rows: 48px !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .overview-book-stats {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .overview-contract-specs {
  height: auto !important;
  min-height: 58px !important;
  max-height: none !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .trade-plan-panel > .plan-list,
html.v2-layout-ready #overview .trade-plan-panel > .plan-blocker,
html.v2-layout-ready #overview .trade-plan-panel > .panel-actions {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html.v2-layout-ready #overview .trade-plan-panel > .panel-actions {
  margin-top: 8px !important;
}

/* Keep the blocked-state message visually separate from the action row. The
   legacy rail used an auto margin here, which collapses to zero in an
   auto-height plan panel. */
html.v2-layout-ready #overview .dashboard-side-column > .trade-plan-panel > .panel-actions {
  margin-top: auto !important;
  padding-top: 10px !important;
}

/* Fill the aligned right rail with the full plan while keeping its action row
   at the bottom of the panel. The depth snapshot above remains content-sized. */
html.v2-layout-ready #overview .dashboard-side-column > .trade-plan-panel {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Contract decision and five-layer strategy */
html.v2-layout-ready #decision > .v2-primary-workspace,
html.v2-layout-ready #decision > .v2-page-controls {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}

html.v2-layout-ready #decision > .v2-page-controls > .analysis-inputs,
html.v2-layout-ready #decision .decision-hierarchy-grid {
  width: 100% !important;
  min-width: 1120px !important;
}

html.v2-layout-ready #decision > .v2-page-controls > .analysis-inputs {
  grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-hierarchy-grid {
  display: grid !important;
  grid-template-columns: calc(67.5% - (var(--zq-work-gap) / 2)) calc(32.5% - (var(--zq-work-gap) / 2)) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: var(--zq-work-gap) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #decision .decision-final-layer {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  width: auto !important;
}

html.v2-layout-ready #decision .decision-analysis-layer {
  grid-column: 1 !important;
  grid-row: 2 !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-top: 0 !important;
  align-self: stretch !important;
}

/* The execution rail remains the height reference at every zoom level. The
   workspace scrolls locally once the viewport is narrower than this layout. */
html.v2-layout-ready #decision .decision-execution-layer {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  float: none !important;
  width: auto !important;
  align-self: stretch !important;
}

html.v2-layout-ready #decision :where(.decision-final-layer, .decision-execution-layer, .decision-analysis-layer) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  overflow: visible !important;
}

html.v2-layout-ready #decision .decision-execution-layer .execution-subsection {
  margin-top: 7px !important;
  padding-bottom: 7px !important;
  overflow: visible !important;
}

html.v2-layout-ready #decision .decision-execution-layer .execution-subsection-heading {
  min-height: 40px !important;
  padding: 6px 9px !important;
  gap: 8px !important;
}

html.v2-layout-ready #decision .decision-execution-layer .decision-pipeline-step {
  min-height: 66px !important;
  padding: 7px 8px !important;
  align-content: start !important;
}

html.v2-layout-ready #decision .decision-execution-layer .specialist-gate-strip > div {
  min-height: 74px !important;
  padding: 7px 8px !important;
}

/* The strip background is the divider itself. Keep it identical to the outer
   border instead of inheriting the global 8px panel gap. */
html.v2-layout-ready #decision .decision-execution-layer .specialist-gate-strip {
  gap: 1px !important;
  background: var(--zq-line) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready #decision .decision-execution-layer :where(.decision-pipeline-step, .specialist-gate-strip > div) > small {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html.v2-layout-ready #decision .decision-execution-layer :where(.scenario-levels > div, .plan-list > div, .exit-rule-list > span) {
  min-height: 54px !important;
  padding: 7px 8px !important;
}

/* Preserve the screenshot's internal column structure when browser zoom
   reduces the CSS viewport width. */
html.v2-layout-ready #decision .decision-final-layer > .direction-summary {
  grid-template-columns: minmax(180px, .8fr) minmax(0, 3.2fr) !important;
}

html.v2-layout-ready #decision .decision-final-layer .evidence-split {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .decision-pipeline {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .specialist-gate-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .scenario-levels {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Entry ranges are the only execution values that routinely contain two
   six-digit prices. Give that field the full trigger-card width so digits
   stay grouped while the surrounding two-column geometry remains fixed. */
html.v2-layout-ready #decision .decision-execution-layer .scenario-levels > div:first-child {
  grid-column: 1 / -1 !important;
}

html.v2-layout-ready #decision .decision-execution-layer .scenario-levels > div {
  padding-inline: 4px !important;
}

html.v2-layout-ready #decision .decision-execution-layer .exit-rule-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .plan-list.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .plan-list.compact.execution-risk-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .plan-list.compact.execution-data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-execution-layer :where(.decision-pipeline-step, .specialist-gate-strip > div) {
  border: 0 !important;
}

/* Keep the final decision surface in reading order: the blocked/allowed
   outcome first, followed by the full-width trend report. The three compact
   direction/regime/evidence cells duplicate information already shown in the
   report and are intentionally removed from the visual composition. */
html.v2-layout-ready #decision .decision-final-insight {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
}

html.v2-layout-ready #decision .decision-final-insight > .trend-report-key-status {
  display: none !important;
}

html.v2-layout-ready #decision .decision-final-insight > .decision-final-outcome,
html.v2-layout-ready #decision .decision-final-insight > .trend-report-overview {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .trend-report-primary,
html.v2-layout-ready #decision .decision-analysis-layer .rationale-column,
html.v2-layout-ready #decision .decision-analysis-layer .trend-scenario-grid > article {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html.v2-layout-ready #decision .decision-analysis-layer {
  display: flex !important;
  flex-direction: column !important;
}

html.v2-layout-ready #decision .decision-analysis-layer > .decision-layer-heading {
  flex: 0 0 auto !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .decision-report-authority {
  grid-column: auto !important;
  justify-items: end !important;
  text-align: right !important;
}

html.v2-layout-ready #decision .decision-analysis-layer > .trend-report-primary {
  height: 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .direction-rationale {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .short-rationale {
  border-left: 1px solid var(--zq-line) !important;
  border-top: 3px solid var(--price-down) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 7px !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul:has(> li:nth-child(3)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul > li {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 2px 8px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul > li > :where(span, small) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .long-rationale :where(h3, li > strong, li > span) {
  color: var(--price-up) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .short-rationale :where(h3, li > strong, li > span) {
  color: var(--price-down) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column li > small {
  color: var(--zq-text-muted) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .trend-scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .trend-scenario-grid > article {
  box-sizing: border-box !important;
  height: 100% !important;
  align-self: stretch !important;
}

/* Spread engine */
html.v2-layout-ready #arbitrage.view.is-active > .v2-arbitrage-auto-workspace {
  order: 2 !important;
}

html.v2-layout-ready #arbitrage.view.is-active > .v2-arbitrage-ranking-workspace {
  order: 3 !important;
}

html.v2-layout-ready #arbitrage.view.is-active > .v2-arbitrage-gate-band {
  order: 4 !important;
}

html.v2-layout-ready #arbitrage.view.is-active > .v2-arbitrage-ledger-workspace {
  order: 5 !important;
}

html.v2-layout-ready #arbitrage.view.is-active > .v2-detail-band:not(.v2-arbitrage-gate-band) {
  order: 6 !important;
}

html.v2-layout-ready #arbitrage .arbitrage-layout {
  grid-template-columns: minmax(520px, 1.48fr) minmax(380px, .72fr) !important;
  gap: var(--zq-work-gap) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #arbitrage .arbitrage-candidate-section {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  align-self: stretch !important;
  contain: none !important;
}

html.v2-layout-ready #arbitrage #arbitrageDetail {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
}

html.v2-layout-ready #arbitrage .arbitrage-candidate-section > .arbitrage-table-scroll {
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow: auto !important;
}

html.v2-layout-ready #arbitrage :where(
  .arbitrage-auto-gate,
  .arbitrage-auto-gate-status,
  .arbitrage-auto-gate-status > span,
  .arbitrage-diagnostic-details,
  .arbitrage-diagnostic-details > summary,
  .arbitrage-diagnostics,
  .arbitrage-diagnostics > div,
  .arbitrage-blockers,
  .arbitrage-order-lock
) {
  background: var(--zq-surface) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-auto-gate-heading {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-auto-gate-heading span {
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-execution-ledger {
  min-height: 250px !important;
  height: auto !important;
}

/* Opportunity radar */
@media (min-width: 1181px) {
  html.v2-layout-ready #ranking.view.is-active {
    box-sizing: border-box !important;
    height: calc(100dvh - 128px) !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #ranking > .v2-primary-workspace {
    height: auto !important;
    min-height: 380px !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #ranking .ranking-layout {
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    /* v10's content-led align-self:start made the grid shrink-wrap on wide
       desktops, leaving an unused band after the detail column. Keep the
       existing column ratio, but make the two-column workspace span its
       complete parent width. */
    align-self: stretch !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .58fr) !important;
    gap: var(--zq-work-gap) !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #ranking .ranking-layout > .ranking-table,
  html.v2-layout-ready #ranking .ranking-layout > #rankingDetail {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  html.v2-layout-ready #ranking .ranking-table > .table-scroll {
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
  }

  html.v2-layout-ready #ranking #rankingDetail {
    overflow: auto !important;
    scrollbar-gutter: stable !important;
  }
}

html.v2-layout-ready #ranking #rankingDetail.is-system-recommendation {
  border-top: 3px solid var(--zq-amber) !important;
}

html.v2-layout-ready #ranking #rankingDetail.is-system-recommendation > .panel-heading {
  background: color-mix(in srgb, var(--zq-amber) 8%, var(--zq-surface-raised)) !important;
  border-bottom-color: var(--zq-line-strong) !important;
}

html.v2-layout-ready #ranking #rankingDetail.is-system-recommendation .panel-heading h2 {
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready #ranking #rankingDetail.is-system-recommendation .score-large {
  color: var(--zq-amber) !important;
}

/* Event radar: keep the right control panel intact and align the shared row. */
html.v2-layout-ready #events .event-execution-policy > div {
  min-height: 68px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html.v2-layout-ready #events .event-execution-policy > div > span {
  color: var(--zq-text-muted) !important;
  font-size: 11px !important;
}

html.v2-layout-ready #events .event-execution-policy > div > strong {
  color: var(--zq-text-primary) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html.v2-layout-ready #events .event-execution-policy > .execution-command-primary > strong {
  font-size: 16px !important;
}

html.v2-layout-ready #events .event-execution-policy > div > small {
  color: var(--zq-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

@media (min-width: 1181px) {
  html.v2-layout-ready #events .event-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .42fr) !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #events .timeline-panel,
  html.v2-layout-ready #events .event-risk-panel {
    height: calc(100dvh - 306px) !important;
    min-height: 420px !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: auto !important;
    scrollbar-gutter: stable !important;
  }
}

/* Trading workspace */
html.v2-layout-ready #orders .order-layout {
  grid-template-columns: minmax(0, 1.32fr) minmax(380px, .68fr) !important;
  gap: var(--zq-work-gap) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #orders .order-layout > .tool-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
}

html.v2-layout-ready #orders .order-book-panel {
  display: flex !important;
  flex-direction: column !important;
}

html.v2-layout-ready #orders .order-book-panel > .order-book {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-rows: repeat(3, minmax(46px, auto)) !important;
  align-content: start !important;
}

html.v2-layout-ready #orders .order-book-panel :where(.book-row, .last-price) {
  height: auto !important;
  min-height: 30px !important;
  max-height: none !important;
}

/* Quant execution */
html.v2-layout-ready #automation .v2-primary-workspace > .automation-layout {
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, .72fr) !important;
  gap: var(--zq-work-gap) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #automation .automation-layout > .tool-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: visible !important;
}

html.v2-layout-ready #automation .automation-layout > .tool-panel:first-child .form-grid.two-columns > label {
  min-height: 64px !important;
  grid-template-rows: minmax(22px, auto) 38px !important;
  gap: 4px !important;
}

html.v2-layout-ready #automation .automation-suggestion-rail {
  margin: 0 0 10px !important;
  padding: 10px !important;
  border: 1px solid var(--zq-line) !important;
  background: var(--zq-surface-raised) !important;
}

html.v2-layout-ready #automation .automation-suggestion-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background: var(--zq-line) !important;
}

html.v2-layout-ready #automation .automation-suggestion-grid > div {
  min-height: 54px !important;
  padding: 7px 8px !important;
  background: var(--zq-surface) !important;
}

html.v2-layout-ready #automation #saveAutomationConfig {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  max-height: none !important;
  margin-top: 10px !important;
  align-self: stretch !important;
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready #automation #saveAutomationConfig:hover {
  background: var(--zq-surface-hover) !important;
  border-color: var(--zq-line-strong) !important;
}

html.v2-layout-ready #automation .v2-primary-workspace > .automation-layout > .tool-panel:nth-child(2) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  overflow: visible !important;
}

html.v2-layout-ready #automation .automation-layout > .tool-panel:nth-child(2) > :where(
  .automation-suggestion-rail,
  .panel-heading,
  .source-list,
  .storage-facts
) {
  flex: 0 0 auto !important;
}

html.v2-layout-ready #automation .automation-layout > .tool-panel:nth-child(2) > .source-list {
  height: auto !important;
  min-height: 0 !important;
}

@media (min-width: 1181px) {
  html.v2-layout-ready #automation .automation-layout > .tool-panel:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
  }

  html.v2-layout-ready #automation .automation-layout > .tool-panel:first-child > :where(
    .panel-heading,
    .automation-actions,
    .form-grid
  ) {
    grid-column: 1 / -1 !important;
  }

  html.v2-layout-ready #automation #autoTradingBlocker {
    grid-column: 1 !important;
  }

  html.v2-layout-ready #automation #saveAutomationConfig {
    grid-column: 2 !important;
  }
}

/* Position center */
@media (min-width: 1181px) {
  html.v2-layout-ready #positions.view.is-active {
    box-sizing: border-box !important;
    height: calc(100dvh - 128px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(380px, .72fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px var(--zq-work-gap) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace > .v2-region-heading {
    grid-column: 1 / -1 !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace > .positions-ledger-table {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions .positions-ledger-table > .table-scroll {
    height: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace > #positionDetail {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

@media (min-width: 1601px) {
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card {
    min-height: 240px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: auto 104px auto !important;
    gap: 8px 10px !important;
    padding: 10px !important;
    align-self: start !important;
    align-content: start !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .panel-heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 104px !important;
    height: auto !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 104px !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .detail-note {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
}

/* Risk center */
@media (min-width: 1181px) {
  html.v2-layout-ready #risk.view.is-active {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #risk > .v2-primary-workspace {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #risk .risk-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #risk .risk-layout > .tool-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #risk > .v2-detail-band {
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #risk > .v2-detail-band > .table-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #risk > .v2-detail-band > .table-section > .table-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }
}

html.v2-layout-ready #risk .limit-list > div {
  min-height: 50px !important;
  grid-template-columns: minmax(130px, .65fr) minmax(170px, 1.35fr) minmax(76px, auto) !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}

html.v2-layout-ready #risk .limit-list progress,
html.v2-layout-ready #risk progress {
  height: 12px !important;
  min-height: 12px !important;
  border-radius: 2px !important;
}

html.v2-layout-ready #risk .limit-list :where(span, strong) {
  font-size: 13px !important;
}

html.v2-layout-ready #risk #riskChart {
  width: 100% !important;
  height: 276px !important;
  min-height: 276px !important;
  max-height: 276px !important;
}

/* Data center */
html.v2-layout-ready #data .data-layout {
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
  gap: var(--zq-work-gap) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #data .data-layout > .tool-panel,
html.v2-layout-ready #data .data-latency-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: visible !important;
}

html.v2-layout-ready #data .data-layout > .tool-panel {
  display: flex !important;
  flex-direction: column !important;
}

html.v2-layout-ready #data .data-layout .detail-note {
  position: static !important;
  inset: auto !important;
  margin: 10px 0 0 !important;
  flex: 0 0 auto !important;
}

html.v2-layout-ready #data .data-latency-panel {
  margin-top: 0 !important;
}

html.v2-layout-ready #data .data-latency-panel .market-latency-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #data .data-latency-panel .market-latency-item {
  height: auto !important;
  min-height: 76px !important;
  max-height: none !important;
  overflow: visible !important;
}

html.v2-layout-ready #data .v2-detail-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--zq-work-gap) !important;
}

/* Governance recovery confirmation */
html.v2-layout-ready #governance .governance-recovery-layout > .tool-panel:has(> #governanceRecoveryChecklist) {
  display: flex !important;
  flex-direction: column !important;
}

html.v2-layout-ready #governance #governanceRecoveryChecklist {
  flex: 0 0 auto !important;
  gap: 8px 12px !important;
  margin: 10px 0 12px !important;
  border: 0 !important;
  background: transparent !important;
}

html.v2-layout-ready #governance #governanceRecoveryChecklist > .qualification-state {
  min-height: 48px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--zq-line) !important;
  background: color-mix(in srgb, var(--zq-surface-soft) 78%, transparent) !important;
}

html.v2-layout-ready #governance #governanceRecoveryChecklist + #acknowledgeRecoveryButton {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* Model workshop: research capability leads the product-specific model
   workspace, while raw registry detail remains the final audit surface. */
html.v2-layout-ready #models.view.is-active > .quant-research-section {
  order: 3 !important;
}

html.v2-layout-ready #models.view.is-active > .v2-primary-workspace {
  order: 4 !important;
}

html.v2-layout-ready #models.view.is-active > .v2-detail-band:not(.v2-model-registry-detail-band) {
  order: 5 !important;
}

html.v2-layout-ready #models.view.is-active > .v2-model-registry-detail-band {
  order: 6 !important;
}

/* Product model registry: the legacy 520px cap clipped the measured ten-row
   viewport before its own scroller could overflow. Keep ten rows visible and
   let additional models scroll inside the table body. */
@media (min-width: 1181px) {
  html.v2-layout-ready #models .model-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #models .model-layout > .table-section,
  html.v2-layout-ready #models .model-layout > .detail-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.v2-layout-ready #models .model-layout > .detail-panel {
    padding-bottom: 11px !important;
  }

  html.v2-layout-ready #models .model-layout > .table-section {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #models .model-layout > .table-section > .table-scroll {
    height: var(--v2-model-registry-scroll-height, 395px) !important;
    min-height: var(--v2-model-registry-scroll-height, 395px) !important;
    max-height: var(--v2-model-registry-scroll-height, 395px) !important;
    flex: 0 0 var(--v2-model-registry-scroll-height, 395px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  html.v2-layout-ready #models .model-layout > .table-section > .table-scroll thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
}

html.v2-layout-ready #models .model-registry-detail-section {
  height: clamp(340px, 48vh, 500px) !important;
  min-height: 340px !important;
  max-height: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--zq-surface) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready #models .model-registry-detail-section > .section-heading,
html.v2-layout-ready #models .model-registry-detail-section > .catalog-detail-facts {
  flex: 0 0 auto !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll {
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll table {
  width: 100% !important;
  min-width: 1496px !important;
  table-layout: fixed !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td) {
  display: table-cell !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--zq-table-row-height) !important;
  min-height: var(--zq-table-row-height) !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="model_id"] {
  width: 230px !important;
  min-width: 230px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="product"] {
  width: 80px !important;
  min-width: 80px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="timeframe"] {
  width: 96px !important;
  min-width: 96px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="strategy_family"] {
  width: 210px !important;
  min-width: 210px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="version"] {
  width: 116px !important;
  min-width: 116px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="evidence_level"] {
  width: 112px !important;
  min-width: 112px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="evidence_by_horizon"] {
  width: 220px !important;
  min-width: 220px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="active"] {
  width: 82px !important;
  min-width: 82px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="sha256"] {
  width: 180px !important;
  min-width: 180px !important;
  font-family: "SFMono-Regular", Consolas, monospace !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="registered_at"] {
  width: 170px !important;
  min-width: 170px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td)[data-field="model_id"] {
  position: sticky !important;
  left: 0 !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll thead th[data-field="model_id"] {
  z-index: 4 !important;
  background: var(--zq-surface-raised) !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll tbody td[data-field="model_id"] {
  z-index: 1 !important;
  background: var(--zq-surface) !important;
}

/* Responsive composition */
@media (min-width: 721px) and (max-width: 1360px) {
  html.v2-layout-ready #overview .overview-market-subcharts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  html.v2-layout-ready #overview .overview-market-subchart {
    height: auto !important;
    min-height: 248px !important;
    max-height: none !important;
  }

  html.v2-layout-ready #overview .overview-market-subchart canvas {
    height: 154px !important;
    min-height: 154px !important;
    max-height: none !important;
  }
}

@media (max-width: 1180px) {
  html.v2-layout-ready #arbitrage .arbitrage-layout,
  html.v2-layout-ready #orders .order-layout,
  html.v2-layout-ready #automation .v2-primary-workspace > .automation-layout,
  html.v2-layout-ready #data .data-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.v2-layout-ready #arbitrage .arbitrage-candidate-section,
  html.v2-layout-ready #arbitrage #arbitrageDetail {
    grid-column: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.v2-layout-ready #arbitrage .arbitrage-candidate-section { grid-row: 1 !important; }
  html.v2-layout-ready #arbitrage #arbitrageDetail { grid-row: 2 !important; }
}

@media (max-width: 720px) {
  html.v2-layout-ready #overview .overview-plan-command,
  html.v2-layout-ready #overview .overview-market-subcharts,
  html.v2-layout-ready #automation .automation-suggestion-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  html.v2-layout-ready #overview .overview-market-subchart {
    height: auto !important;
    min-height: 240px !important;
    max-height: none !important;
  }

  html.v2-layout-ready #overview .overview-market-subchart canvas {
    height: 150px !important;
    min-height: 150px !important;
  }

  html.v2-layout-ready #risk .limit-list > div {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html.v2-layout-ready #risk .limit-list progress {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

/* Keep the spread Z-score gauge inside the graphite-teal color system. */
html.v2-layout-ready #arbitrage .arbitrage-z-gauge {
  background: var(--zq-surface-raised) !important;
  border-top-color: var(--zq-line) !important;
  border-bottom-color: var(--zq-line) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-z-gauge > div:first-child > span {
  color: var(--zq-text-muted) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-z-labels,
html.v2-layout-ready #arbitrage .arbitrage-z-labels > span {
  color: var(--zq-text-secondary) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-z-track {
  background-color: var(--zq-surface-raised) !important;
  background-image: linear-gradient(
    90deg,
    rgba(255, 117, 133, .28) 0 7%,
    rgba(231, 180, 95, .30) 7% 21%,
    rgba(79, 197, 174, .18) 21% 79%,
    rgba(231, 180, 95, .30) 79% 93%,
    rgba(255, 117, 133, .28) 93% 100%
  ) !important;
  border: 1px solid var(--zq-line) !important;
  box-sizing: border-box;
}

html.v2-layout-ready #arbitrage .arbitrage-z-track > span {
  background: var(--zq-line-strong) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-z-track > i {
  background: var(--zq-blue) !important;
  border-color: var(--zq-line-strong) !important;
  box-shadow: 0 0 0 1px var(--zq-blue) !important;
}

/* Overview trade-plan blocker: keep one warning frame and a small breathing gap. */
html.v2-layout-ready #overview .trade-plan-panel {
  border-left-color: transparent !important;
}

html.v2-layout-ready #overview .trade-plan-panel > .plan-blocker {
  margin-top: 12px !important;
  border-left: 0 !important;
}

/* Use the analytical blue for chart tops instead of the legacy near-white inset. */
html.v2-layout-ready #overview .overview-market-subchart {
  box-shadow: inset 0 2px 0 var(--zq-blue) !important;
}

/* Keep the primary quote divider quiet so the price remains the focal point. */
html.v2-layout-ready #overview .overview-primary-quote {
  box-shadow: inset 0 -1px 0 var(--zq-line) !important;
}

/* R38: stable contract tape. Keep the outer footprint fixed on desktop while
   giving identity, live quotes, and freshness telemetry distinct hierarchy. */
html.v2-layout-ready #overview .overview-market-banner {
  overflow: hidden !important;
  border: 1px solid #285267 !important;
  border-top: 3px solid #35c9b4 !important;
  border-radius: 4px !important;
  background-color: rgb(23, 67, 74) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(0, 12, 22, .22) !important;
}

html.v2-layout-ready #overview .overview-instrument-heading {
  min-width: 0 !important;
  border-color: #285267 !important;
  background: #102f3b !important;
}

html.v2-layout-ready #overview .overview-heading-icon {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #377486 !important;
  border-radius: 4px !important;
  background: #153f4c !important;
  color: #64d8c7 !important;
  box-shadow: inset 0 0 0 1px rgba(100, 216, 199, .08) !important;
}

html.v2-layout-ready #overview .overview-heading-icon svg {
  width: 20px !important;
  height: 20px !important;
}

html.v2-layout-ready #overview .overview-instrument-heading h2 {
  margin: 0 !important;
  color: #f4fbff !important;
  font-size: 20px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}

html.v2-layout-ready #overview .overview-instrument-heading p {
  margin-top: 4px !important;
  color: #9fc2d5 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

html.v2-layout-ready #overview .overview-instrument-heading .status-badge:not(.qualification-state) {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 16px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.v2-layout-ready #overview .overview-instrument-heading .status-badge.status-good:not(.qualification-state) {
  border-color: #3ebc9f !important;
  border-left-color: #64d8c7 !important;
  background: rgba(36, 119, 103, .34) !important;
  color: #e7fff8 !important;
}

html.v2-layout-ready #overview .overview-instrument-heading .status-badge.status-warn:not(.qualification-state) {
  border-color: #b88e45 !important;
  border-left-color: #e7b45f !important;
  background: rgba(126, 88, 31, .34) !important;
  color: #fff1c9 !important;
}

html.v2-layout-ready #overview .overview-instrument-heading .status-badge.status-neutral:not(.qualification-state) {
  border-color: #527c91 !important;
  border-left-color: #9fc2d5 !important;
  background: rgba(40, 82, 103, .42) !important;
  color: #e9f6fc !important;
}

html.v2-layout-ready #overview .overview-market-data {
  min-width: 0 !important;
  background: #0a1e2d !important;
}

html.v2-layout-ready #overview .overview-quote-grid {
  min-width: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #0c2436 !important;
}

html.v2-layout-ready #overview .overview-quote-grid > span {
  min-width: 0 !important;
  padding: 12px 7px !important;
  gap: 5px !important;
  justify-content: center !important;
  border-right: 1px solid #24485a !important;
  border-bottom: 0 !important;
  background: #0c2436 !important;
  color: #88adbf !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html.v2-layout-ready #overview .overview-quote-grid > span:last-child {
  border-right: 0 !important;
}

html.v2-layout-ready #overview .overview-quote-grid strong {
  color: #eef8fd !important;
  font-size: 14px !important;
  font-weight: 680 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

html.v2-layout-ready #overview :where(#marketHighLow, #marketLimitRange) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

html.v2-layout-ready #overview .overview-primary-quote {
  background: #102c40 !important;
  box-shadow: inset 0 -2px 0 #2f789f !important;
}

html.v2-layout-ready #overview .overview-primary-quote strong {
  font-size: 26px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html.v2-layout-ready #overview .overview-freshness-strip {
  min-width: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #24485a !important;
  background: #091c29 !important;
}

html.v2-layout-ready #overview .overview-freshness-strip > div {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 9px 11px !important;
  gap: 2px !important;
  align-content: center !important;
  border-right: 1px solid #24485a !important;
  background: #091c29 !important;
}

html.v2-layout-ready #overview .overview-freshness-strip span {
  color: #789db0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html.v2-layout-ready #overview .overview-freshness-strip strong {
  color: #dcecf4 !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums;
}

html.v2-layout-ready #overview .overview-freshness-strip small {
  color: #8aa9b9 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html.v2-layout-ready #overview .overview-freshness-strip :where(strong, small) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.v2-layout-ready #overview .overview-freshness-strip > .text-button {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  justify-content: center !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: #10293a !important;
  color: #79c8eb !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html.v2-layout-ready #overview .overview-freshness-strip > .text-button:hover,
html.v2-layout-ready #overview .overview-freshness-strip > .text-button:focus-visible {
  background: #15364a !important;
  color: #b7e9ff !important;
}

@media (min-width: 1101px) {
  html.v2-layout-ready #overview .overview-market-banner {
    display: grid !important;
    grid-template-columns: clamp(292px, 21vw, 338px) minmax(0, 1fr) !important;
    grid-template-rows: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }

  html.v2-layout-ready #overview .overview-instrument-heading {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    height: 160px !important;
    padding: 18px 16px !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
    align-content: center !important;
    border-right: 1px solid #285267 !important;
    border-bottom: 0 !important;
  }

  html.v2-layout-ready #overview .overview-heading-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }

  html.v2-layout-ready #overview .overview-instrument-heading > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
  }

  html.v2-layout-ready #overview .overview-instrument-heading p {
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html.v2-layout-ready #overview .overview-instrument-heading .status-badge {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
  }

  html.v2-layout-ready #overview .overview-market-data {
    display: grid !important;
    grid-template-rows: 91px 69px !important;
    height: 160px !important;
  }

  html.v2-layout-ready #overview .overview-quote-grid {
    width: 100% !important;
    grid-template-columns: 1.34fr .9fr .9fr 1fr 1fr .92fr 1.2fr .96fr .96fr 1.18fr !important;
  }

  html.v2-layout-ready #overview .overview-quote-grid > span {
    min-height: 91px !important;
    height: 91px !important;
  }

  html.v2-layout-ready #overview .overview-freshness-strip {
    grid-template-columns: 1.15fr 1.15fr 1.05fr 1fr minmax(116px, .72fr) !important;
    height: 69px !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  html.v2-layout-ready #overview .overview-market-banner {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.v2-layout-ready #overview .overview-instrument-heading {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 96px !important;
    padding: 14px !important;
    column-gap: 11px !important;
    row-gap: 7px !important;
    align-content: center !important;
    border-right: 0 !important;
    border-bottom: 1px solid #285267 !important;
  }

  html.v2-layout-ready #overview .overview-heading-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  html.v2-layout-ready #overview .overview-instrument-heading > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html.v2-layout-ready #overview .overview-instrument-heading .status-badge {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  html.v2-layout-ready #overview .overview-market-data {
    display: grid !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
  }

  html.v2-layout-ready #overview .overview-quote-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #overview .overview-quote-grid > span {
    min-height: 72px !important;
    height: 72px !important;
    border-bottom: 1px solid #24485a !important;
  }

  html.v2-layout-ready #overview .overview-quote-grid > span:nth-child(5n) {
    border-right: 0 !important;
  }

  html.v2-layout-ready #overview .overview-freshness-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(112px, .72fr) !important;
    min-height: 66px !important;
  }
}


/* Source: v12-visual-standard.css */
/* Zhongqi Zhiyan visual standard: one final, semantic presentation layer.
   Data, IDs, event bindings, and trading behavior remain unchanged. */

html.v2-layout-ready body #marketMacdChart {
  cursor: crosshair;
}

/* Position source controls and metric slots stay stable while quote snapshots refresh. */
html.v2-layout-ready #positions .positions-source-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 7px 9px;
  border: 1px solid var(--v3-line, var(--line));
  background: var(--v3-surface-soft, var(--surface-soft));
}

html.v2-layout-ready #positions .positions-source-toolbar > .segmented-control {
  flex-wrap: wrap;
  min-width: 0;
}

html.v2-layout-ready #positions .positions-source-toolbar > span {
  flex: 0 1 auto;
  max-width: 52ch;
  min-width: 0;
  color: var(--v3-muted, var(--muted));
  font-size: var(--font-meta, 12px);
  line-height: 1.4;
  text-align: right;
}

html.v2-layout-ready #positions .positions-metrics {
  grid-template-columns: repeat(6, minmax(142px, 1fr));
  align-items: stretch;
}

html.v2-layout-ready #positions .positions-metrics .metric-card {
  min-width: 0;
  min-height: 82px;
  overflow: hidden;
}

html.v2-layout-ready #positions .positions-metrics .metric-card strong {
  min-width: 12ch;
  min-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  font-variant-numeric: tabular-nums lining-nums;
}

html.v2-layout-ready #positions .positions-ledger-table td:first-child {
  min-width: 0 !important;
}

html.v2-layout-ready #positions .position-source-label {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.v2-layout-ready #positions .position-source-label.source-arbitrage {
  color: var(--v3-copper, var(--amber));
}

html.v2-layout-ready #positions .position-source-label.source-quant {
  color: var(--v3-blue, var(--blue));
}

html.v2-layout-ready #positions .position-source-label.source-mixed,
html.v2-layout-ready #positions .position-source-label.source-unclassified {
  color: var(--v3-muted, var(--muted));
}

html.v2-layout-ready #positions .positions-ledger-table tr.is-source-protected td {
  background: color-mix(in srgb, var(--v3-copper, var(--amber)) 5%, var(--v3-surface, var(--surface)));
}

html.v2-layout-ready #positions .positions-ledger-table tr.is-quant-managed td:first-child {
  box-shadow: inset 3px 0 0 var(--v3-blue, var(--blue));
}

html.v2-layout-ready #positions .positions-ledger-table .row-actions {
  min-width: 0 !important;
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  html.v2-layout-ready #positions .positions-metrics {
    grid-template-columns: repeat(3, minmax(142px, 1fr));
  }
}

@media (max-width: 720px) {
  html.v2-layout-ready #positions .positions-source-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  html.v2-layout-ready #positions .positions-source-toolbar > span {
    text-align: left;
  }

  html.v2-layout-ready #positions .positions-metrics {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }
}

/* Compact desktop and diagnostic-content safeguards. The extra body and
   layout qualifiers keep these contracts authoritative over legacy layers. */
@media (min-width: 1181px) and (max-width: 1400px) {
  html.v2-layout-ready body #automation #saveAutomationConfig {
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 18px !important;
    padding-inline: 4px !important;
  }
}

@media (min-width: 1181px) {
  html.v2-layout-ready body #validation .replay-depth-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

html.v2-layout-ready body #validation .replay-depth-heading,
html.v2-layout-ready body #validation .replay-depth-heading > div {
  min-width: 0 !important;
}

html.v2-layout-ready body #validation #replayDepthAuditBadge {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Backend errors can contain nested JSON and absolute paths. Keep the queue
   bounded and scannable while exposing the complete value through title and
   aria-label on the result cell. */
html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll {
  max-height: 280px !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges;
}

html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll table {
  min-width: 900px !important;
  table-layout: fixed !important;
}

html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll th:nth-child(1) { width: 24%; }
html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll th:nth-child(2) { width: 11%; }
html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll th:nth-child(3) { width: 12%; }
html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll th:nth-child(4),
html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll th:nth-child(5) { width: 14%; }
html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll th:nth-child(6) { width: 25%; }

html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll tbody tr {
  height: auto !important;
  min-height: 44px !important;
}

html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll tbody td {
  min-width: 0 !important;
  vertical-align: middle !important;
}

html.v2-layout-ready body #operations .remediation-center .remediation-job-scroll
  tbody td.remediation-result-detail {
  display: table-cell !important;
  max-width: 0 !important;
  height: auto !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

html.v2-layout-ready body #operations .remediation-center .remediation-result-summary {
  display: -webkit-box !important;
  max-height: 2.7em;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:root {
  --zq-canvas: #071218;
  --zq-surface: #0d1e25;
  --zq-surface-raised: #142a32;
  --zq-surface-hover: #193640;
  --zq-surface-selected: #123e50;
  --zq-line: #385761;
  --zq-line-strong: #587782;
  --zq-text-primary: #f4fbfc;
  --zq-text-body: #d6e5e7;
  --zq-text-secondary: #a9c0c6;
  --zq-text-muted: #7f9ba3;
  --zq-text-disabled: #607983;
  --zq-link: #64c7f2;
  --zq-blue: #42b5eb;
  --zq-blue-soft: rgba(66, 181, 235, .16);
  --zq-teal: #35d2b2;
  --zq-teal-muted: #86decf;
  --zq-teal-soft: rgba(53, 210, 178, .15);
  --zq-copper: #f2b957;
  --zq-copper-soft: rgba(242, 185, 87, .16);
  --zq-status-good: #4de0be;
  --zq-status-warn: #ffc45f;
  --zq-status-bad: #ff91a2;
  --zq-up: #ff5d70;
  --zq-down: #35dfa6;
  --zq-danger: #ff7082;
  --price-up: var(--zq-up);
  --price-down: var(--zq-down);
  --price-up-soft: rgba(255, 93, 112, .16);
  --price-down-soft: rgba(53, 223, 166, .15);
  --red: var(--zq-up);
  --green: var(--zq-down);
  --red-soft: var(--price-up-soft);
  --green-soft: var(--price-down-soft);
  --blue: var(--zq-blue);
  --blue-soft: var(--zq-blue-soft);
  --teal: var(--zq-teal);
  --amber: var(--zq-copper);
  --amber-soft: var(--zq-copper-soft);
  --chart-level-pressure: #ff8794;
  --chart-level-support: #4de0be;
  --chart-ma5: #f4be57;
  --chart-ma10: #c49aee;
  --chart-ma20: #53bbed;
  --chart-ma30: #a5bbc4;
  --nav: #08161c;
  --nav-hover: #15313a;
}

html.v2-layout-ready,
html.v2-layout-ready body,
html.v2-layout-ready .main-shell,
html.v2-layout-ready .view {
  background: var(--zq-canvas) !important;
  color: var(--zq-text-body) !important;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

html.v2-layout-ready .sidebar {
  background: #08161c !important;
  border-right-color: var(--zq-line) !important;
}

html.v2-layout-ready .brand,
html.v2-layout-ready .topbar,
html.v2-layout-ready .view > .page-heading {
  background: #0b1b22 !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready .system-ribbon,
html.v2-layout-ready .top-status {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready .global-latest-quote,
html.v2-layout-ready .environment-banner,
html.v2-layout-ready .environment-paper {
  background: var(--zq-surface-selected) !important;
  border-color: var(--zq-blue) !important;
}

html.v2-layout-ready :where(
  .tool-panel,
  .detail-panel,
  .table-section,
  .timeline-panel,
  .log-panel,
  .forward-progress-panel,
  .market-panel,
  .overview-depth-panel,
  .trade-plan-panel,
  .analysis-panel,
  .chart-panel,
  .settings-section,
  .model-training-section,
  .operations-integrations,
  .fundamental-report-panel,
  .v2-overview-detail
) {
  background: var(--zq-surface) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready :where(
  .panel-heading,
  .section-heading,
  .dialog-heading,
  table thead,
  .overview-timeframe-heading,
  .decision-layer-heading,
  .arbitrage-auto-gate-heading
) {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready :where(.page-heading h1, .panel-heading h2, .section-heading h2, .dialog-heading h2) {
  color: var(--zq-text-primary) !important;
  font-size: 16px;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html.v2-layout-ready :where(.page-heading h1) {
  font-size: 22px !important;
}

html.v2-layout-ready :where(.page-heading p, .panel-heading p, .section-heading p, .dialog-heading p) {
  color: var(--zq-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html.v2-layout-ready :where(
  .metric-strip > .metric-card,
  .health-strip > div,
  .ranking-summary-strip > div,
  .trade-account-strip > div,
  .automation-suggestion-grid > div,
  .overview-plan-command > article,
  .overview-book-stats > div,
  .overview-timeframe-grid > article,
  .fundamental-score-grid > div,
  .decision-pipeline-step,
  .specialist-gate-strip > div,
  .event-execution-policy > div,
  .governance-qualification-summary .metric-card,
  .security-summary,
  .billing-account-band > span
) {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready :where(table tbody td, .table-scroll td) {
  background: var(--zq-surface) !important;
  border-color: #294650 !important;
  color: var(--zq-text-body) !important;
  font-size: 13px !important;
}

html.v2-layout-ready :where(table tbody tr:nth-child(even) td) {
  background: #10242c !important;
}

html.v2-layout-ready :where(table thead th) {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-secondary) !important;
  font-size: 13px !important;
}

html.v2-layout-ready :where(
  .panel-heading p,
  .section-heading p,
  .page-heading p,
  .metric-card > span,
  .metric-card > small,
  .empty-state,
  .empty-table-state,
  .overview-subchart-stats > span,
  .overview-market-subchart > div:first-child > div:first-child > span
) {
  color: var(--zq-text-muted) !important;
}

html.v2-layout-ready :where(.status-badge, .qualification-state) {
  min-height: 24px !important;
  border-radius: 3px !important;
  border-width: 1px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
}

html.v2-layout-ready :where(.status-badge.status-good, .status-value-good, .check-pass, .gate-pass) {
  color: var(--zq-status-good) !important;
}

html.v2-layout-ready :where(.status-badge.status-good, .check-pass.qualification-state, .gate-pass.qualification-state) {
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .16) !important;
}

html.v2-layout-ready :where(.status-badge.status-warn, .status-value-warn, .check-pending, .gate-pending) {
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready :where(.status-badge.status-warn, .check-pending.qualification-state, .gate-pending.qualification-state) {
  border-color: var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .16) !important;
}

html.v2-layout-ready :where(
  .status-badge.status-blocked,
  .status-badge.status-bad,
  .status-value-bad,
  .gate-fail,
  .check-fail
) {
  color: var(--zq-status-bad) !important;
}

html.v2-layout-ready :where(
  .status-badge.status-blocked,
  .status-badge.status-bad,
  .gate-fail.qualification-state,
  .check-fail.qualification-state
) {
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 112, 130, .16) !important;
}

html.v2-layout-ready :where(.status-badge.status-neutral, .status-value-neutral, .gate-neutral) {
  color: var(--zq-link) !important;
  border-color: rgba(100, 199, 242, .65) !important;
  background: rgba(66, 181, 235, .12) !important;
}

html.v2-layout-ready :where(.status-badge.status-value-good, .qualification-state.status-value-good) {
  color: var(--zq-status-good) !important;
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .16) !important;
}

html.v2-layout-ready :where(.status-badge.status-value-warn, .qualification-state.status-value-warn) {
  color: var(--zq-status-warn) !important;
  border-color: var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .16) !important;
}

html.v2-layout-ready :where(.status-badge.status-value-bad, .qualification-state.status-value-bad) {
  color: var(--zq-status-bad) !important;
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 112, 130, .16) !important;
}

html.v2-layout-ready #overview #marketQuoteState.status-neutral {
  border-left-color: #9fc2d5 !important;
}

html.v2-layout-ready #governance .governance-qualification-summary .metric-card {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready .view .status-badge.status-good,
html.v2-layout-ready .view .qualification-state.status-good,
html.v2-layout-ready .view .status-badge.status-value-good,
html.v2-layout-ready .view .qualification-state.status-value-good,
html.v2-layout-ready .view .qualification-state[data-qualification-state="passed"],
html.v2-layout-ready #governance .check-pass.qualification-state {
  color: var(--zq-status-good) !important;
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .16) !important;
}

html.v2-layout-ready .view .status-badge.status-warn,
html.v2-layout-ready .view .qualification-state.status-warn,
html.v2-layout-ready .view .status-badge.status-value-warn,
html.v2-layout-ready .view .qualification-state.status-value-warn,
html.v2-layout-ready .view .qualification-state:is([data-qualification-state="pending"], [data-qualification-state="incomplete"]),
html.v2-layout-ready #validation .gate-pending.qualification-state,
html.v2-layout-ready #governance .gate-pending.qualification-state,
html.v2-layout-ready #governance .check-pending.qualification-state {
  color: var(--zq-status-warn) !important;
  border-color: var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .16) !important;
}

html.v2-layout-ready .view .status-badge:is(.status-blocked, .status-bad),
html.v2-layout-ready .view .qualification-state:is(.status-blocked, .status-bad, .status-value-bad),
html.v2-layout-ready .view .qualification-state:is([data-qualification-state="below-standard"], [data-qualification-state="missing"]),
html.v2-layout-ready #validation .gate-fail.qualification-state,
html.v2-layout-ready #governance .gate-fail.qualification-state,
html.v2-layout-ready #governance .check-fail.qualification-state {
  color: var(--zq-status-bad) !important;
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 112, 130, .16) !important;
}

html.v2-layout-ready .view .status-badge.status-neutral,
html.v2-layout-ready .view .qualification-state[data-qualification-state="not-applicable"] {
  color: var(--zq-link) !important;
  border-color: rgba(100, 199, 242, .65) !important;
  background: rgba(66, 181, 235, .12) !important;
}

html.v2-layout-ready #overview #marketQuoteState.status-neutral {
  color: #e9f6fc !important;
  border-color: #527c91 !important;
  border-left-color: #9fc2d5 !important;
  background: rgba(40, 82, 103, .42) !important;
}

/* Keep the training queue to three visible rows; larger batches scroll internally. */
html.v2-layout-ready #models .training-queue-disclosure > .training-queue-scroll {
  height: auto !important;
  min-height: 120px !important;
  max-height: 220px !important;
  overflow: auto !important;
}

/* Replay qualification labels stay visible in the evidence surface. The
   marker supplements the label; it does not replace or hide it. */
html.v2-layout-ready #validation .replay-section .status-badge.qualification-state {
  gap: 6px !important;
  overflow: visible !important;
  font-size: 13px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html.v2-layout-ready #validation .replay-section .status-badge.qualification-state::before {
  content: attr(data-qualification-marker) !important;
  display: inline-block !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Keep the replay-depth state visible and bounded. It is evidence for the
   current execution coverage, so the label must not be replaced by a marker
   or hidden from the visual audit. */
html.v2-layout-ready #validation #replayDepthAuditBadge.qualification-state {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 18px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.v2-layout-ready #validation #replayDepthAuditBadge.qualification-state::before {
  content: attr(data-qualification-marker) !important;
  display: inline-grid !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  place-items: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Final viewport anchors are intentionally last so the legacy closure layers
   cannot reintroduce a two-to-three pixel bottom band. */
@media (min-width: 1181px) {
  html.v2-layout-ready body #ranking.view.is-active {
    box-sizing: border-box !important;
    height: calc(100dvh - 125px) !important;
  }

  html.v2-layout-ready body #positions.view.is-active {
    box-sizing: border-box !important;
    height: calc(100dvh - 125px) !important;
  }
}

/* All automation workbench rows share one two-column contract. Keeping the
   same tracks across the command, candidate, and routing bands prevents a
   panel edge from drifting when a long status message reflows. */
@media (min-width: 1181px) {
  html.v2-layout-ready #automation .automation-layout,
  html.v2-layout-ready #automation .automation-execution-grid,
  html.v2-layout-ready #automation .v2-automation-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #models .model-layout {
    grid-template-columns: minmax(0, 3.04fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state)
    #positionDetail > .position-empty-card {
    height: 100% !important;
    min-height: 0 !important;
  }

  html.v2-layout-ready #ranking.view.is-active {
    height: calc(100dvh - 127px) !important;
  }
}

@media (min-width: 721px) {
  /* Position ledger and metric strip use the same six-column rhythm. */
  html.v2-layout-ready #positions > .v2-position-workspace {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace > .positions-ledger-table {
    grid-column: 1 / span 4 !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace > #positionDetail {
    grid-column: 5 / span 2 !important;
  }
}

/* The model detail table is a bounded audit surface. Full values remain in
   the cell title and horizontal scroller; rows stay one-line and scannable. */
html.v2-layout-ready #models .model-registry-detail-scroll tbody td.catalog-preview-value {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 4px 8px !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

/* Compact desktop keeps product and exact-contract selectors equal width. */
@media (min-width: 1041px) and (max-width: 1080px) {
  html.v2-layout-ready .contract-switcher {
    grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr) !important;
  }

  html.v2-layout-ready .contract-switcher .product-search-label {
    grid-column: auto !important;
  }
}

@media (min-width: 721px) and (max-width: 1040px) {
  html.v2-layout-ready .contract-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready .contract-switcher .compact-contract-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready .contract-switcher .product-search-label {
    grid-column: 1 / -1 !important;
  }
}

/* Six-period reports need two complete rows at compact desktop widths. */
@media (min-width: 1181px) and (max-width: 1360px) {
  html.v2-layout-ready #overview .overview-timeframe-matrix,
  html.v2-layout-ready #overview .overview-timeframe-grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #overview .overview-timeframe-grid > article {
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Final semantic color pass for the eight reviewed blocks. Geometry,
   spacing, data bindings, and control behavior intentionally remain intact. */

/* Quantitative execution save action: informational blue, including its
   disabled state, instead of the legacy low-contrast secondary palette. */
html.v2-layout-ready #automation #saveAutomationConfig {
  background: rgba(66, 181, 235, .12) !important;
  border-color: var(--zq-blue) !important;
  color: var(--zq-link) !important;
}

html.v2-layout-ready #automation #saveAutomationConfig:hover:not(:disabled) {
  background: rgba(66, 181, 235, .2) !important;
  border-color: var(--zq-link) !important;
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready #automation #saveAutomationConfig:disabled {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-disabled) !important;
}

/* The seven suggestion cards leave one final grid slot empty at two columns.
   Keep that slot on the card surface instead of exposing the separator color
   as a large blue-gray block. Borders still provide the intended dividers. */
html.v2-layout-ready #automation .automation-suggestion-grid {
  background: var(--zq-surface) !important;
}

/* Final geometry contract. This layer is intentionally last in the cascade
   so legacy page rules cannot reopen fixed desktop workbench geometry. */
@media (min-width: 1181px) {
  html.v2-layout-ready #automation .automation-layout,
  html.v2-layout-ready #automation .v2-primary-workspace > .automation-layout,
  html.v2-layout-ready #automation .v2-automation-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--zq-work-gap) !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #automation .automation-layout > .tool-panel {
    min-width: 0 !important;
    align-self: stretch !important;
  }

  html.v2-layout-ready #automation .automation-layout > .tool-panel:first-child {
    /* The status message and save action form one full-width command row.
       Keep two equal tracks so the row closes the form without a blank tail. */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
  }

  html.v2-layout-ready #automation .automation-layout > .tool-panel:first-child > :where(
    .panel-heading,
    .automation-actions,
    .form-grid
  ) {
    grid-column: 1 / -1 !important;
  }

  html.v2-layout-ready #automation #autoTradingBlocker {
    grid-column: 1 !important;
  }

  html.v2-layout-ready #automation #saveAutomationConfig {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    margin-top: 10px !important;
  }

  html.v2-layout-ready #automation #autoTradingBlocker,
  html.v2-layout-ready #automation #saveAutomationConfig {
    min-height: 42px !important;
    height: 42px !important;
  }

  html.v2-layout-ready #automation .automation-execution-grid,
  html.v2-layout-ready #automation .v2-automation-execution > .automation-execution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #automation .automation-execution-grid > .table-section,
  html.v2-layout-ready #automation .v2-automation-detail > .table-section {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.v2-layout-ready #orders .order-book .book-row {
    min-height: 46px !important;
    height: 46px !important;
  }

  html.v2-layout-ready #orders .order-book .last-price {
    min-height: 62px !important;
    height: 62px !important;
  }

  html.v2-layout-ready #orders .simulation-layout {
    width: 100% !important;
    grid-template-columns: minmax(0, 1.32fr) minmax(380px, .68fr) !important;
    gap: var(--zq-work-gap) !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace {
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace > .positions-ledger-table,
  html.v2-layout-ready #positions > .v2-position-workspace > #positionDetail {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  html.v2-layout-ready #ranking.view.is-active {
    height: calc(100dvh - 127px) !important;
  }
}

/* Empty-position evidence has three independent rows. The previous wide
   override compressed the overview row below its content height, allowing
   the warning note to cover the empty-account message. */
@media (min-width: 1181px) {
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) > .v2-position-workspace {
    grid-template-rows: auto minmax(240px, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) #positionDetail,
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card {
    min-height: 240px !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card {
    display: grid !important;
    grid-template-columns: minmax(120px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: auto minmax(96px, auto) minmax(48px, auto) !important;
    gap: 8px 10px !important;
    padding: 10px !important;
    align-content: stretch !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .panel-heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 96px !important;
    height: auto !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 96px !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .detail-note {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1601px) {
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) #positionDetail {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    align-self: start !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: 48px 84px 46px !important;
    gap: 4px 10px !important;
    padding: 6px 10px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview,
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts {
    min-height: 84px !important;
    height: 84px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview > svg {
    width: 24px !important;
    height: 24px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview > strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview > span {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts > div {
    padding: 2px 5px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts dt,
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts dd {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts dd {
    margin-top: 1px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .panel-heading {
    min-height: 0 !important;
    height: 48px !important;
    padding: 4px 8px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .panel-heading h2 {
    line-height: 1.1 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .panel-heading p {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .detail-note {
    min-height: 46px !important;
    height: 46px !important;
    padding: 6px 8px !important;
    line-height: 1.3 !important;
  }
}

/* Short desktop viewports have only a 200px row available below the ledger.
   Keep the same three-row contract, but use the compact typography already
   used by the terminal at max-height 760px so the note remains visible. */
@media (min-width: 1181px) and (max-height: 760px) {
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) > .v2-position-workspace {
    grid-template-rows: auto minmax(200px, minmax(0, 1fr)) !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) #positionDetail,
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card {
    min-height: 200px !important;
    height: 100% !important;
    max-height: 200px !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card {
    grid-template-columns: minmax(120px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: 48px 76px minmax(46px, auto) !important;
    gap: 6px 8px !important;
    padding: 8px !important;
    align-content: start !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-overview,
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts {
    min-height: 0 !important;
    height: 76px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts > div {
    padding: 2px 5px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts dt,
  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts dd {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-facts dd {
    margin-top: 1px !important;
  }

  html.v2-layout-ready #positions:has(#positionsBody > tr:only-child .empty-state) .position-empty-card > .detail-note {
    min-height: 46px !important;
    height: auto !important;
    padding: 5px 7px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 721px) {
  html.v2-layout-ready .top-status {
    min-height: 42px !important;
    height: 42px !important;
  }
}

/* Registry rows are compact; long evidence remains available through the
   bounded horizontal/vertical table scroller. */
html.v2-layout-ready #models .model-registry-detail-scroll :where(th, td) {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 4px 8px !important;
  line-height: 16px !important;
}

html.v2-layout-ready #models .model-registry-detail-scroll :where(td strong, td small) {
  line-height: 16px !important;
  white-space: nowrap !important;
}

html.v2-layout-ready #models .model-training-section table :where(th, td) {
  line-height: 16px !important;
}

html.v2-layout-ready #validation .replay-section .status-badge.qualification-state {
  min-height: 24px !important;
  height: 24px !important;
  width: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  color: transparent !important;
  display: inline-block !important;
}

html.v2-layout-ready #validation .replay-section .status-badge.qualification-state::before {
  color: currentColor !important;
}

/* Validation evidence counts use qualification state rather than the static
   class left in the markup, so the colors continue to follow live updates. */
html.v2-layout-ready #validation #validationUnvalidatedMetric,
html.v2-layout-ready #validation #validationWeakMetric,
html.v2-layout-ready #validation #validationModerateMetric:not([data-qualification-state="passed"]),
html.v2-layout-ready #validation #validationStrongMetric:not([data-qualification-state="passed"]),
html.v2-layout-ready #validation #validationForwardApprovedMetric:not([data-qualification-state="passed"]) {
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready #validation #validationRejectedMetric {
  color: var(--zq-status-bad) !important;
}

html.v2-layout-ready #validation #validationModerateMetric[data-qualification-state="passed"],
html.v2-layout-ready #validation #validationStrongMetric[data-qualification-state="passed"],
html.v2-layout-ready #validation #validationForwardApprovedMetric[data-qualification-state="passed"] {
  color: var(--zq-status-good) !important;
}

/* Audit rows stay on the graphite surface. Apply the fill to cells directly
   so older row-level zebra rules cannot reintroduce a white/gray band. */
html.v2-layout-ready #operations .audit-log-scroll thead th {
  background: var(--zq-surface-raised) !important;
  color: var(--zq-text-secondary) !important;
}

html.v2-layout-ready #operations .audit-log-scroll tbody tr > td {
  background: var(--zq-surface) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready #operations .audit-log-scroll tbody tr:nth-child(even) > td {
  background: #10242c !important;
}

html.v2-layout-ready #operations .audit-log-scroll tbody tr:hover > td {
  background: var(--zq-surface-hover) !important;
}

html.v2-layout-ready #operations .audit-log-scroll tbody tr > td:nth-child(2),
html.v2-layout-ready #operations .audit-log-scroll tbody tr > td:nth-child(6) {
  color: var(--zq-text-muted) !important;
}

/* Arbitrage leg analysis and combination handoff controls carry distinct
   blue/amber/teal meanings while disabled controls share one quiet gray. */
html.v2-layout-ready #arbitrage .arbitrage-leg-actions .secondary-button,
html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-reconcile] {
  background: rgba(66, 181, 235, .12) !important;
  border-color: var(--zq-blue) !important;
  color: var(--zq-link) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-leg-actions .secondary-button:hover:not(:disabled),
html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-reconcile]:hover:not(:disabled) {
  background: rgba(66, 181, 235, .2) !important;
  border-color: var(--zq-link) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-takeover] {
  background: rgba(255, 196, 95, .14) !important;
  border-color: var(--zq-status-warn) !important;
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-takeover]:hover:not(:disabled) {
  background: rgba(255, 196, 95, .22) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-release] {
  background: rgba(77, 224, 190, .13) !important;
  border-color: var(--zq-status-good) !important;
  color: var(--zq-status-good) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-release]:hover:not(:disabled) {
  background: rgba(77, 224, 190, .21) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-leg-actions .secondary-button:disabled,
html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-takeover]:disabled,
html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-reconcile]:disabled,
html.v2-layout-ready #arbitrage .arbitrage-combination-control [data-combination-release]:disabled {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-disabled) !important;
}

/* Automatic spread entry gate: status is expressed by text, icon, and
   outline; the whole order-lock strip is never flooded with red. */
html.v2-layout-ready #arbitrage .arbitrage-blockers li,
html.v2-layout-ready #arbitrage .arbitrage-blockers li svg {
  color: var(--zq-status-bad) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-blockers li.is-warning,
html.v2-layout-ready #arbitrage .arbitrage-blockers li.is-warning svg {
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-blockers li.is-passed,
html.v2-layout-ready #arbitrage .arbitrage-blockers li.is-passed svg {
  color: var(--zq-status-good) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-order-lock [data-manual-spread-order]:disabled,
html.v2-layout-ready #arbitrage .arbitrage-order-lock [data-arbitrage-auto-status]:disabled {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-disabled) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-order-lock [data-manual-spread-order]:not(:disabled) {
  background: rgba(66, 181, 235, .12) !important;
  border-color: var(--zq-blue) !important;
  color: var(--zq-link) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-order-lock [data-arbitrage-auto-status]:disabled {
  color: var(--zq-status-warn) !important;
  border-color: rgba(255, 196, 95, .7) !important;
  background: rgba(255, 196, 95, .1) !important;
}

html.v2-layout-ready #arbitrage .arbitrage-order-lock .danger-outline-button:disabled {
  background: var(--zq-surface) !important;
  border-color: var(--zq-status-bad) !important;
  color: var(--zq-status-bad) !important;
}

/* Training queue keeps the existing scroll bounds and table geometry while
   making each status legible against the dark table surface. */
html.v2-layout-ready #models .model-training-section table thead th {
  background: var(--zq-surface-raised) !important;
  color: var(--zq-text-secondary) !important;
}

html.v2-layout-ready #models .model-training-section table tbody tr > td {
  background: var(--zq-surface) !important;
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready #models .model-training-section table tbody tr:nth-child(even) > td {
  background: #10242c !important;
}

html.v2-layout-ready #models .model-training-section table tbody tr:hover > td {
  background: var(--zq-surface-hover) !important;
}

/* Compact replay markers keep their full state in aria-label/title; only the
   semantic marker belongs inside the fixed badge box. */
html.v2-layout-ready #validation .replay-section .status-badge.qualification-state {
  gap: 6px !important;
  overflow: visible !important;
  font-size: 13px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html.v2-layout-ready #validation .replay-section .status-badge.qualification-state::before {
  content: attr(data-qualification-marker) !important;
  display: inline-block !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

html.v2-layout-ready #validation #replayDepthAuditBadge.qualification-state {
  gap: 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  white-space: normal !important;
}

html.v2-layout-ready #validation #replayDepthAuditBadge.qualification-state::before {
  content: attr(data-qualification-marker) !important;
  display: inline-block !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

html.v2-layout-ready #validation .replay-section .status-badge.qualification-state::after,
html.v2-layout-ready #validation #replayDepthAuditBadge.qualification-state::after {
  content: none !important;
  display: none !important;
}

/* Keep the registry audit surface after the working queue. Its absolute
   placement preserves the existing visual alignment; measured bottom padding
   makes the model view contain it so the sticky navigation is not pushed away
   at the end of document scrolling. */
@media (min-width: 1181px) {
  html.v2-layout-ready #models.is-active {
    position: relative;
    padding-bottom: var(--v2-model-registry-reserved-space, 0px) !important;
  }

  html.v2-layout-ready #models.is-active > .v2-model-registry-detail-band {
    position: absolute;
    top: var(--v2-model-registry-detail-top, 0px);
    left: 16px;
    right: 16px;
    width: auto;
    margin-top: 0;
  }
}

/* At very wide desktop sizes the viewport can use a denser registry table;
   this moves the queue back toward the sidebar baseline without changing the
   normal desktop density contract. */
@media (min-width: 2000px) {
  html.v2-layout-ready #models .model-layout > .table-section tbody tr {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  html.v2-layout-ready #models .model-layout > .table-section thead th,
  html.v2-layout-ready #models .model-layout > .table-section tbody td {
    height: 36px !important;
    min-height: 36px !important;
    padding: 2px 6px !important;
    line-height: 16px !important;
  }

  html.v2-layout-ready #models .model-layout td:nth-child(4) .status-badge,
  html.v2-layout-ready #models .model-layout td:nth-child(5) .status-badge {
    min-height: 20px !important;
    height: 20px !important;
    padding-block: 0 !important;
  }
}

html.v2-layout-ready #models .model-training-section table tbody .status-badge.status-neutral,
html.v2-layout-ready #models .model-training-section table tbody .status-badge[data-qualification-state="pending"] {
  color: var(--zq-link) !important;
  border-color: rgba(100, 199, 242, .65) !important;
  background: rgba(66, 181, 235, .12) !important;
}

html.v2-layout-ready #models .model-training-section table tbody .status-badge.status-good,
html.v2-layout-ready #models .model-training-section table tbody .status-badge[data-qualification-state="passed"] {
  color: var(--zq-status-good) !important;
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .13) !important;
}

html.v2-layout-ready #models .model-training-section table tbody .status-badge.status-blocked,
html.v2-layout-ready #models .model-training-section table tbody .status-badge.status-bad,
html.v2-layout-ready #models .model-training-section table tbody .status-badge[data-qualification-state="below-standard"] {
  color: var(--zq-status-bad) !important;
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 145, 162, .13) !important;
}

html.v2-layout-ready #models .model-training-section table tbody tr.is-cancelled > td,
html.v2-layout-ready #models .model-training-section table tbody .status-badge.status-cancelled {
  color: var(--zq-text-disabled) !important;
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

/* Market latency cards use the same surface as the rest of the data page;
   status values retain vivid semantic tones and descriptions stay muted. */
html.v2-layout-ready #data .data-latency-panel,
html.v2-layout-ready #data .data-latency-panel .market-latency-strip,
html.v2-layout-ready #data .data-latency-panel .market-latency-item {
  background: var(--zq-surface) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready #data .data-latency-panel .market-latency-item > span,
html.v2-layout-ready #data .data-latency-panel .market-latency-item > small {
  color: var(--zq-text-muted) !important;
}

html.v2-layout-ready #data .data-latency-panel .market-latency-item > strong.status-value-good {
  color: var(--zq-status-good) !important;
}

html.v2-layout-ready #data .data-latency-panel .market-latency-item > strong.status-value-warn {
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready #data .data-latency-panel .market-latency-item > strong.status-value-bad {
  color: var(--zq-status-bad) !important;
}

html.v2-layout-ready #data #marketLatencyFiveLevel {
  color: var(--zq-link) !important;
}

html.v2-layout-ready #overview #overviewBookFiveLevelAge {
  background: transparent !important;
}

/* The seven-stat overview grid deliberately keeps its two-column geometry;
   this pseudo-cell only paints the existing final slot instead of line gray. */
html.v2-layout-ready #overview .overview-book-stats::after {
  content: "";
  min-height: 55px;
  background: var(--zq-surface-raised);
}

/* Contract Intelligence carries a legacy ID-level title rule. Keep its
   outcome, execution, and analysis headings on the same primary text token
   as every other page heading. */
html.v2-layout-ready #decision .decision-final-layer > .panel-heading h2,
html.v2-layout-ready #decision .decision-execution-layer > .panel-heading h2,
html.v2-layout-ready #decision .decision-analysis-layer > .panel-heading h2 {
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready .view .status-badge.status-value-good {
  color: var(--zq-status-good) !important;
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .16) !important;
}

html.v2-layout-ready .view .status-badge.status-value-warn {
  color: var(--zq-status-warn) !important;
  border-color: var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .16) !important;
}

html.v2-layout-ready .view .status-badge.status-value-bad {
  color: var(--zq-status-bad) !important;
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 112, 130, .16) !important;
}

html.v2-layout-ready :where(.value-positive, .price-up, [data-direction="long"]) {
  color: var(--zq-up) !important;
}

html.v2-layout-ready :where(.value-negative, .price-down, [data-direction="short"]) {
  color: var(--zq-down) !important;
}

html.v2-layout-ready :where(.value-warning, .status-value-warn) {
  color: var(--zq-copper) !important;
}

html.v2-layout-ready :where(.status-dot.status-good, .status-dot.status-warn, .status-dot.status-bad) {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05), 0 0 10px currentColor !important;
}

html.v2-layout-ready .status-dot.status-good { background: var(--zq-status-good) !important; color: var(--zq-status-good) !important; }
html.v2-layout-ready .status-dot.status-warn { background: var(--zq-status-warn) !important; color: var(--zq-status-warn) !important; }
html.v2-layout-ready .status-dot.status-bad { background: var(--zq-status-bad) !important; color: var(--zq-status-bad) !important; }

/* Connection and account ribbons use the same status grammar as badges. */
html.v2-layout-ready :where(.top-status-item, .system-ribbon > div) {
  border-color: var(--zq-line) !important;
  background: var(--zq-surface-raised) !important;
}

html.v2-layout-ready .top-status-item:has(.status-dot.status-good),
html.v2-layout-ready .system-ribbon > div:has(.status-dot.status-good) {
  border-left: 2px solid var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .09) !important;
}

html.v2-layout-ready .top-status-item:has(.status-dot.status-warn),
html.v2-layout-ready .system-ribbon > div:has(.status-dot.status-warn) {
  border-left: 2px solid var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .09) !important;
}

html.v2-layout-ready .top-status-item:has(.status-dot.status-bad),
html.v2-layout-ready .system-ribbon > div:has(.status-dot.status-bad) {
  border-left: 2px solid var(--zq-status-bad) !important;
  background: rgba(255, 112, 130, .09) !important;
}

html.v2-layout-ready .intraday-signal-strip > div {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready .intraday-signal-strip > div:has(.status-value-good) { border-top: 2px solid var(--zq-status-good) !important; }
html.v2-layout-ready .intraday-signal-strip > div:has(.status-value-warn) { border-top: 2px solid var(--zq-copper) !important; }
html.v2-layout-ready .intraday-signal-strip > div:has(.status-value-bad) { border-top: 2px solid var(--zq-status-bad) !important; }

/* Secondary charts: visible independent zoom controls, stable headers, and
   the same analytical surface on every page that hosts a market subchart. */
html.v2-layout-ready #overview .overview-market-subchart {
  background: var(--zq-surface) !important;
  border-color: var(--zq-line) !important;
  box-shadow: inset 0 2px 0 var(--zq-blue) !important;
}

html.v2-layout-ready #overview .overview-market-subchart > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  min-height: 42px !important;
  margin-bottom: 6px !important;
  gap: 8px !important;
}

html.v2-layout-ready #overview .overview-market-subchart > div:first-child > div:first-child {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html.v2-layout-ready #overview .overview-market-subchart > div:first-child strong {
  color: var(--zq-text-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html.v2-layout-ready #overview .overview-market-subchart > div:first-child strong svg {
  color: var(--zq-blue) !important;
}

html.v2-layout-ready #overview .overview-market-subchart > div:first-child > div:first-child > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  font-size: 11px !important;
}

html.v2-layout-ready #overview .overview-market-subchart .chart-zoom-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}

html.v2-layout-ready #overview .overview-market-subchart .chart-zoom-controls .icon-button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 7px !important;
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
  color: var(--zq-text-secondary) !important;
}

html.v2-layout-ready #overview .overview-market-subchart .chart-zoom-controls .icon-button:hover:not(:disabled),
html.v2-layout-ready #overview .overview-market-subchart .chart-zoom-controls .icon-button:focus-visible {
  background: var(--zq-surface-selected) !important;
  border-color: var(--zq-blue) !important;
  color: var(--zq-link) !important;
}

html.v2-layout-ready #overview .overview-market-subchart .chart-zoom-controls .icon-button:disabled {
  opacity: .42 !important;
}

html.v2-layout-ready #overview .overview-market-subchart canvas {
  background: #081a24 !important;
  border: 1px solid #294b57 !important;
}

html.v2-layout-ready #overview .overview-subchart-stats {
  border-top-color: var(--zq-line) !important;
}

html.v2-layout-ready #overview .overview-subchart-stats > span {
  color: var(--zq-text-muted) !important;
}

html.v2-layout-ready #overview .overview-subchart-stats strong {
  color: var(--zq-text-primary) !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  html.v2-layout-ready #overview .overview-market-subchart > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.v2-layout-ready #overview .overview-market-subchart .chart-zoom-controls {
    justify-self: end !important;
  }
}

/* Final specificity pass: legacy layers contain equally important rules for
   qualification and metric cards, so semantic states must win explicitly. */
html.v2-layout-ready .view .metric-card,
html.v2-layout-ready .view .governance-qualification-summary .metric-card {
  background: var(--zq-surface-raised) !important;
  border-color: var(--zq-line) !important;
}

html.v2-layout-ready .status-badge.status-good,
html.v2-layout-ready .qualification-state.status-good,
html.v2-layout-ready .status-badge.status-value-good,
html.v2-layout-ready .qualification-state.status-value-good,
html.v2-layout-ready .check-pass.qualification-state,
html.v2-layout-ready .gate-pass.qualification-state {
  color: var(--zq-status-good) !important;
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .16) !important;
}

html.v2-layout-ready .status-badge.status-warn,
html.v2-layout-ready .qualification-state.status-warn,
html.v2-layout-ready .status-badge.status-value-warn,
html.v2-layout-ready .qualification-state.status-value-warn,
html.v2-layout-ready .check-pending.qualification-state,
html.v2-layout-ready .gate-pending.qualification-state {
  color: var(--zq-status-warn) !important;
  border-color: var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .16) !important;
}

html.v2-layout-ready .status-badge.status-blocked,
html.v2-layout-ready .status-badge.status-bad,
html.v2-layout-ready .qualification-state.status-blocked,
html.v2-layout-ready .qualification-state.status-bad,
html.v2-layout-ready .status-badge.status-value-bad,
html.v2-layout-ready .qualification-state.status-value-bad,
html.v2-layout-ready .gate-fail.qualification-state,
html.v2-layout-ready .check-fail.qualification-state {
  color: var(--zq-status-bad) !important;
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 112, 130, .16) !important;
}

html.v2-layout-ready .status-badge.status-neutral,
html.v2-layout-ready .qualification-state:not(.status-good):not(.status-warn):not(.status-bad):not(.status-blocked):not(.status-value-good):not(.status-value-warn):not(.status-value-bad):not(.check-pass):not(.check-pending):not(.gate-pass):not(.gate-pending):not(.gate-fail) {
  color: var(--zq-link) !important;
  border-color: rgba(100, 199, 242, .65) !important;
  background: rgba(66, 181, 235, .12) !important;
}

html.v2-layout-ready #overview #marketQuoteState.status-neutral {
  border-left-color: #9fc2d5 !important;
}

/* Governance evidence is a single aligned list. Keep the row surface neutral
   and apply semantic color only to its marker and result. */
html.v2-layout-ready #governance .gate-list > .qualification-state {
  color: var(--zq-text-body) !important;
  background: transparent !important;
  border-color: var(--zq-line) !important;
  border-bottom-color: var(--zq-line) !important;
}

html.v2-layout-ready #governance .governance-qualification-summary .metric-card {
  background: transparent !important;
}

html.v2-layout-ready #governance .gate-list > .gate-pass > svg,
html.v2-layout-ready #governance .gate-list > .gate-pass > .qualification-row-result {
  color: var(--zq-status-good) !important;
}

html.v2-layout-ready #governance .gate-list > :is(.gate-pending, .check-pending) > svg,
html.v2-layout-ready #governance .gate-list > :is(.gate-pending, .check-pending) > .qualification-row-result {
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready #governance .gate-list > :is(.gate-fail, .check-fail) > svg,
html.v2-layout-ready #governance .gate-list > :is(.gate-fail, .check-fail) > .qualification-row-result {
  color: var(--zq-status-bad) !important;
}

/* Registry columns remain fixed and horizontally scrollable, while long
   audit values wrap inside their cells instead of being silently clipped. */
html.v2-layout-ready #models .model-registry-detail-scroll tbody td.catalog-preview-value {
  height: 40px !important;
  min-height: 40px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

/* Compact, square status labels preserve dense toolbars at narrow desktop
   widths and keep the same geometry across every semantic state. */
html.v2-layout-ready .status-badge {
  padding: 3px 5px !important;
  border-radius: 0 !important;
}

/* Ten-domain states are semantic labels, so keep them readable as one unit.
   The audit table may scroll horizontally on narrow viewports instead of
   compressing labels such as "非门禁 · 计算模型" into vertical text. */
html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table table {
  min-width: 1040px;
  table-layout: fixed;
}

html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table :is(th, td):nth-child(1) { width: 9%; }
html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table :is(th, td):nth-child(2) { width: 16%; }
html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table :is(th, td):nth-child(3) { width: 8%; }
html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table :is(th, td):nth-child(4) { width: 18%; }
html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table :is(th, td):nth-child(5) { width: 8%; }
html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table :is(th, td):nth-child(6) { width: 41%; }

html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table td:nth-child(2) > .status-badge {
  max-width: none !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

html.v2-layout-ready #overview
  .fundamental-evidence:not(.market-source-evidence)
  .fundamental-domain-table td:nth-child(6) {
  height: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* The registry keeps exact status labels readable at every desktop width.
   Narrow layouts scroll only the table body instead of squeezing a status. */
html.v2-layout-ready #models .model-layout > .table-section table {
  min-width: 900px !important;
  table-layout: fixed !important;
}

html.v2-layout-ready #models .model-layout > .table-section :is(th, td):nth-child(1) { width: 24% !important; }
html.v2-layout-ready #models .model-layout > .table-section :is(th, td):nth-child(2) { width: 22% !important; }
html.v2-layout-ready #models .model-layout > .table-section :is(th, td):nth-child(3) { width: 14% !important; }
html.v2-layout-ready #models .model-layout > .table-section :is(th, td):nth-child(4) { width: 15% !important; }
html.v2-layout-ready #models .model-layout > .table-section :is(th, td):nth-child(5) { width: 12% !important; }
html.v2-layout-ready #models .model-layout > .table-section :is(th, td):nth-child(6) { width: 13% !important; }

html.v2-layout-ready #models .model-layout > .table-section td:nth-child(4) .status-badge,
html.v2-layout-ready #models .model-layout > .table-section td:nth-child(5) .status-badge {
  max-width: none !important;
}

/* Legacy page-specific selectors carried the former market palette with
   higher specificity. This final pass makes every quote use one vivid pair. */
html.v2-layout-ready .value-positive,
html.v2-layout-ready .price-up,
html.v2-layout-ready [data-direction="long"] {
  color: var(--zq-up) !important;
}

html.v2-layout-ready .value-negative,
html.v2-layout-ready .price-down,
html.v2-layout-ready [data-direction="short"] {
  color: var(--zq-down) !important;
}

/* Page-scoped legacy rules include ID specificity. Keep the final visual
   contract authoritative for every primary view and both desktop headers. */
html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings, .topbar
) .value-positive {
  color: var(--zq-up) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings, .topbar
) .value-negative {
  color: var(--zq-down) !important;
}

html.v2-layout-ready body .status-badge:is(
  .status-good, .status-warn, .status-blocked, .status-bad, .status-neutral
),
html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) .status-badge {
  border-radius: 0 !important;
}

@media (min-width: 721px) and (max-width: 900px) {
  html.v2-layout-ready #automation .automation-emergency-actions {
    flex-wrap: wrap !important;
  }

  html.v2-layout-ready #automation .automation-emergency-actions > * {
    flex: 0 0 auto !important;
  }
}

/* One computed typography hierarchy across all primary views. */
html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) :is(.panel-heading h2, .section-heading h2, .dialog-heading h2) {
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) :is(.page-heading p, .panel-heading p, .section-heading p, .dialog-heading p) {
  color: var(--zq-text-secondary) !important;
}

/* Status badges and status values use the same four semantic tones even when
   legacy page rules carry ID-level specificity. */
html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) :is(.status-badge.status-good, .status-badge.status-value-good) {
  color: var(--zq-status-good) !important;
  border-color: var(--zq-status-good) !important;
  background: rgba(77, 224, 190, .16) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) :is(.status-badge.status-warn, .status-badge.status-value-warn) {
  color: var(--zq-status-warn) !important;
  border-color: var(--zq-status-warn) !important;
  background: rgba(255, 196, 95, .16) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) :is(.status-badge.status-blocked, .status-badge.status-bad, .status-badge.status-value-bad) {
  color: var(--zq-status-bad) !important;
  border-color: var(--zq-status-bad) !important;
  background: rgba(255, 145, 162, .16) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) .status-badge.status-neutral {
  color: var(--zq-link) !important;
  border-color: rgba(100, 199, 242, .65) !important;
  background: rgba(66, 181, 235, .12) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) .status-value-good {
  color: var(--zq-status-good) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) .status-value-warn {
  color: var(--zq-status-warn) !important;
}

html.v2-layout-ready body :is(
  #overview, #ranking, #decision, #orders, #automation, #arbitrage,
  #positions, #risk, #validation, #events, #data, #models, #operations,
  #governance, #settings
) .status-value-bad {
  color: var(--zq-status-bad) !important;
}

html.v2-layout-ready #overview #marketQuoteState.status-neutral {
  color: #e9f6fc !important;
  border-color: #527c91 !important;
  border-left-color: #9fc2d5 !important;
  background: rgba(40, 82, 103, .42) !important;
}

/* Contract intelligence: directional color belongs to the heading and top
   border. Evidence and trigger copy must remain neutral, wrap inside its
   column, and preserve the existing two-panel geometry. */
html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul {
  gap: 8px !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul > li {
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr) !important;
  min-width: 0 !important;
  line-height: 1.55 !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul > li > :where(strong, span, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.55 !important;
}

html.v2-layout-ready #decision .decision-analysis-layer :is(.long-rationale, .short-rationale) > ul > li > :where(strong, span) {
  color: var(--zq-text-body) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer :is(.long-rationale, .short-rationale) > ul > li > small {
  color: var(--zq-text-secondary) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side {
  min-width: 0 !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side > :where(span, strong, small),
html.v2-layout-ready #decision .decision-execution-layer .trigger-side .scenario-levels :where(dt, dd) {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side > span,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side > small,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side .scenario-levels dt {
  color: var(--zq-text-secondary) !important;
  line-height: 1.5 !important;
}

/* Keep the two-panel rationale layout, but let each panel size to its evidence.
   A single compact list gives the text enough width to wrap inside the card
   instead of overflowing a fixed-height, two-column grid. */
html.v2-layout-ready #decision .decision-analysis-layer > .trend-report-primary {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .direction-rationale {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  align-items: start !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: visible !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul,
html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul:has(> li:nth-child(3)) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  flex: 0 0 auto !important;
  align-content: start !important;
  gap: 4px !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul > li {
  grid-template-columns: minmax(64px, 72px) minmax(0, 1fr) !important;
  gap: 2px 8px !important;
  padding: 3px 0 !important;
  line-height: 1.42 !important;
}

/* Contract rationale is a fixed comparison surface. Both sides share the same
   collapsed height and remain aligned; only genuine overflow exposes a compact
   disclosure command. Expanded evidence keeps the two card borders equal. */
html.v2-layout-ready #decision .decision-analysis-layer .direction-rationale {
  align-self: stretch !important;
  align-items: stretch !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column {
  box-sizing: border-box !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .long-rationale {
  border-top: 3px solid var(--price-up) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .short-rationale {
  border-top: 3px solid var(--price-down) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > h3 {
  flex: 0 0 auto !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul,
html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul:has(> li:nth-child(3)) {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-overflow-toggle {
  width: 100% !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 6px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--zq-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--zq-text-secondary) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-overflow-toggle[hidden] {
  display: none !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-overflow-toggle > svg {
  width: 15px !important;
  height: 15px !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-overflow-toggle:hover {
  background: var(--zq-surface-hover) !important;
  color: var(--zq-text-primary) !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .direction-rationale.has-expanded-rationale .rationale-column {
  height: auto !important;
  min-height: 380px !important;
  max-height: none !important;
  overflow: visible !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .direction-rationale.has-expanded-rationale .rationale-column > ul,
html.v2-layout-ready #decision .decision-analysis-layer .direction-rationale.has-expanded-rationale .rationale-column > ul:has(> li:nth-child(3)) {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

html.v2-layout-ready #decision .decision-analysis-layer .rationale-column > ul > li > :where(strong, span, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.42 !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side > strong,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side .scenario-levels dd {
  color: var(--zq-text-primary) !important;
  line-height: 1.5 !important;
}

/* Numeric execution levels must wrap at semantic separators, never between
   individual digits. Two columns keep the values readable inside the fixed
   decision rail without changing the page's overall two-column layout. */
html.v2-layout-ready #decision .decision-execution-layer .trigger-side .scenario-levels dd {
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-variant-numeric: tabular-nums !important;
}

/* The automation blocker is populated with state-dependent Chinese copy. Keep
   the command row's minimum height, but let the note grow when the copy wraps
   so its second line cannot be clipped by the desktop geometry contract. */
html.v2-layout-ready #automation #autoTradingBlocker {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  height: auto !important;
  max-height: none !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

html.v2-layout-ready #automation #autoTradingBlocker > :is(svg, i) {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px !important;
}

html.v2-layout-ready #automation #autoTradingBlocker > span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.45 !important;
}

@media (min-width: 1181px) {
  html.v2-layout-ready #automation #saveAutomationConfig {
    box-sizing: border-box !important;
    min-height: 42px !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
  }
}

/* The spread heading carries a long market timestamp plus scan controls.
   At narrow desktop widths those controls must move to a second row; keeping
   all three grid tracks on one row collapses the title column to zero. */
@media (min-width: 721px) and (max-width: 1100px) {
  html.v2-layout-ready #arbitrage.view.is-active > .arbitrage-page-heading {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: minmax(56px, auto) auto !important;
  }

  html.v2-layout-ready #arbitrage.view.is-active > .arbitrage-page-heading::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html.v2-layout-ready #arbitrage.view.is-active > .arbitrage-page-heading > .arbitrage-title-copy {
    width: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html.v2-layout-ready #arbitrage.view.is-active > .arbitrage-page-heading > .view-actions {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  html.v2-layout-ready #arbitrage.view.is-active > .arbitrage-page-heading > .view-actions > .timestamp {
    flex: 1 1 100% !important;
    max-width: none !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Keep the navigation rail on its normal viewport contract. The populated
   workspace is content-led, while the two detail cards use compact panel
   padding so the complete ledger and exit controls fit on the same baseline. */
html.v2-layout-ready:has(#positions.view.is-active) {
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
}

html.v2-layout-ready:has(#positions.view.is-active)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

html.v2-layout-ready #positions #positionDetail:has(> .position-ledger-card) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-content: start !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
  gap: 12px !important;
}

html.v2-layout-ready #positions #positionDetail:has(> .position-ledger-card) > :is(.position-ledger-card, .position-exit-card) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 10px !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  overflow: visible !important;
}

html.v2-layout-ready #positions.is-active:has(#positionDetail > .position-ledger-card) {
  height: auto !important;
  min-height: calc(100dvh - 125px) !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

@media (min-width: 721px) {
  html.v2-layout-ready #positions > .v2-position-workspace:has(#positionDetail > .position-ledger-card) {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto auto !important;
    overflow: visible !important;
    align-items: stretch !important;
  }
}

/* On desktop the left ledger stretches to the compact right-hand audit
   surface. Only the page content grows; app-shell and sidebar dimensions stay
   under the unchanged global navigation contract. */
@media (min-width: 1181px) {
  html.v2-layout-ready .main-shell:has(#positions.view.is-active #positionDetail > .position-ledger-card)
    > main {
    height: auto !important;
  }

  html.v2-layout-ready body #positions.view.is-active:has(#positionDetail > .position-ledger-card) {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: calc(100dvh - 125px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace:has(#positionDetail > .position-ledger-card) {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  html.v2-layout-ready #positions > .v2-position-workspace:has(#positionDetail > .position-ledger-card)
    > .positions-ledger-table {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #positions #positionDetail:has(> .position-ledger-card) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
  }
}

/* Final position metric overrides follow the legacy layout closures. */
html.v2-layout-ready #positions .positions-metrics {
  grid-template-columns: repeat(6, minmax(142px, 1fr)) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #positions .positions-metrics .metric-card strong {
  min-width: 12ch !important;
  min-height: 24px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Microsoft YaHei", monospace !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

@media (max-width: 1180px) {
  html.v2-layout-ready #positions .positions-metrics {
    grid-template-columns: repeat(3, minmax(142px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html.v2-layout-ready #positions .positions-metrics {
    grid-template-columns: repeat(2, minmax(132px, 1fr)) !important;
  }
}

/* The execution rail may be taller than the evidence column. Keep the
   analysis layer content-sized so grid stretching cannot create a blank band
   below its final visible module. */
html.v2-layout-ready #decision .decision-analysis-layer {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* The data-center cost note is allowed to use its natural height when the
   reference-cost coverage text wraps to a third line. Keep the strip aligned
   without clipping the full status sentence. */
html.v2-layout-ready #data > .metric-strip {
  height: auto !important;
  min-height: var(--desktop-summary-strip-height, 76px) !important;
  align-items: stretch !important;
}

html.v2-layout-ready #data > .metric-strip .metric-card {
  height: auto !important;
  min-height: var(--desktop-summary-strip-height, 76px) !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Trigger labels, prices, and their confirmation copy carry one direction
   signal. This keeps bullish text red and bearish text green instead of
   leaving the explanatory line visually detached from its trigger. */
html.v2-layout-ready #decision .decision-execution-layer .trigger-side.long-side {
  color: var(--price-up) !important;
  border-top-color: var(--price-up) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side.short-side {
  color: var(--price-down) !important;
  border-top-color: var(--price-down) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side.long-side > span,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side.long-side > strong,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side.long-side > small {
  color: var(--price-up) !important;
}

html.v2-layout-ready #decision .decision-execution-layer .trigger-side.short-side > span,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side.short-side > strong,
html.v2-layout-ready #decision .decision-execution-layer .trigger-side.short-side > small {
  color: var(--price-down) !important;
}

/* Desktop decision columns close on the same baseline. The rationale cards
   keep their fixed comparison height; the scenario row is the only elastic
   analysis module and therefore consumes the remaining grid track without
   leaving an unexplained blank band below the report. */
@media (min-width: 1181px) {
  html.v2-layout-ready #decision .decision-analysis-layer {
    align-self: stretch !important;
    min-height: auto !important;
  }

  html.v2-layout-ready #decision .decision-analysis-layer > .trend-report-primary {
    height: auto !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
    grid-template-rows: auto minmax(380px, max-content) minmax(152px, 1fr) !important;
    align-content: stretch !important;
  }

  html.v2-layout-ready #decision .decision-analysis-layer .trend-scenario-grid,
  html.v2-layout-ready #decision .decision-analysis-layer .trend-scenario-grid > article {
    height: 100% !important;
    min-height: 152px !important;
    align-self: stretch !important;
  }
}

/* The recovery controls contain all required copy at this density. Tighten
   only non-content spacing so the paired audit panels stay below 270px while
   retaining a 48px heading and at least 8px of bottom breathing room. */
@media (min-width: 1181px) {
  html.v2-layout-ready #operations > .v2-detail-grid > .recovery-control-panel {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
  }

  html.v2-layout-ready #operations .recovery-control-panel > .panel-heading {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-bottom: 6px !important;
    padding-block: 5px !important;
  }

  html.v2-layout-ready #operations .recovery-control-panel > .recovery-action-row,
  html.v2-layout-ready #operations .recovery-control-panel > .detail-note {
    margin-top: 6px !important;
  }

  html.v2-layout-ready #operations .recovery-control-panel > .detail-note {
    flex: 0 0 auto !important;
    margin-top: auto !important;
  }
}

/* At ultra-wide widths the capability grid is shallow but still spans two
   rows. Keep the section content-led so its cards and research boundary cannot
   be clipped by a fixed-height inner scroller. */
@media (min-width: 2000px) {
  html.v2-layout-ready #models .quant-research-section {
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
  }
}

/* Event and ranking workspaces are anchored to their measured page top. The
   top control area can gain a row at narrower desktop widths, so subtracting
   a fixed pixel constant eventually pushes both workspaces below the viewport. */
@media (min-width: 1181px) {
  html.v2-layout-ready:has(body :is(#events, #ranking).view.is-active),
  html.v2-layout-ready body:has(:is(#events, #ranking).view.is-active) {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready body:has(:is(#events, #ranking).view.is-active) > .app-shell {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready body :is(#events, #ranking).view.is-active {
    box-sizing: border-box !important;
    height: var(--v2-active-view-height, calc(100dvh - 127px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #events > :is(.page-heading, .event-execution-policy) {
    flex: 0 0 auto !important;
  }

  html.v2-layout-ready #events > .v2-primary-workspace {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.v2-layout-ready #events .event-layout {
    height: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
  }

  html.v2-layout-ready #events :is(.timeline-panel, .event-risk-panel) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }
}

/* Keep the complete absolute/percentage move visible in the fixed desktop
   command bar without changing the bar height or the surrounding layout. */
@media (min-width: 1181px) {
  html.v2-layout-ready .v2-command-side .global-latest-quote {
    min-inline-size: 246px !important;
  }

  html.v2-layout-ready .v2-command-side .global-latest-quote > strong {
    display: grid !important;
    grid-template-columns: minmax(103px, 1fr) minmax(108px, auto) !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  html.v2-layout-ready .v2-command-side #globalLastPrice,
  html.v2-layout-ready .v2-command-side #globalChangeSummary {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html.v2-layout-ready .v2-command-side #globalChangeSummary {
    font-size: 11px !important;
  }
}

/* Seven fixed execution stages must retain a single-row overview at desktop
   widths. Reclaim label width inside each cell without changing strip size. */
@media (min-width: 1181px) {
  html.v2-layout-ready #automation .execution-stage-list li {
    gap: 2px 5px !important;
    padding-inline: 7px !important;
  }

  html.v2-layout-ready #automation .execution-stage-list small {
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
}

/* The ten-cell overview tape remains one fixed-height row on compact desktop.
   Allow compound values and audit timestamps to use the vertical room that is
   already reserved instead of clipping them horizontally. */
@media (min-width: 1101px) and (max-width: 1350px) {
  html.v2-layout-ready #overview #marketLastPrice {
    font-size: 23px !important;
  }

  html.v2-layout-ready #overview #marketHighLow,
  html.v2-layout-ready #overview #marketLimitRange {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  html.v2-layout-ready #overview .overview-freshness-strip > div {
    padding-block: 5px !important;
  }

  html.v2-layout-ready #overview .overview-freshness-strip strong,
  html.v2-layout-ready #overview .overview-freshness-strip small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Mobile keeps the full paper-environment disclosure visible. It occupies a
   second text row in the existing status band instead of presenting an
   ellipsis that could hide the no-live-order boundary. */
@media (max-width: 720px) {
  html.v2-layout-ready .system-ribbon #environmentBanner {
    height: auto !important;
    min-height: 36px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: start !important;
    row-gap: 2px !important;
    overflow: visible !important;
  }

  html.v2-layout-ready .system-ribbon #environmentBanner > svg {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  html.v2-layout-ready .system-ribbon #environmentBanner > strong,
  html.v2-layout-ready .system-ribbon #environmentDescription {
    grid-column: 2 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  html.v2-layout-ready .view {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.v2-layout-ready .mobile-bottom-nav {
    position: fixed !important;
    z-index: 80 !important;
    inset: auto 0 0 0 !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-top: 1px solid var(--zq-line-strong) !important;
    background: rgba(15, 31, 38, 0.98) !important;
    box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.24) !important;
  }

  html.v2-layout-ready .mobile-bottom-nav button {
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--zq-text-muted) !important;
    font-size: 11px !important;
  }

  html.v2-layout-ready .mobile-bottom-nav button svg {
    width: 21px !important;
    height: 21px !important;
  }

  html.v2-layout-ready .mobile-bottom-nav button.is-active {
    color: var(--zq-teal) !important;
    box-shadow: inset 0 2px 0 var(--zq-teal) !important;
  }

  html.v2-layout-ready .mobile-more-dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: min(76vh, 650px) !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--zq-line) !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--zq-surface) !important;
    color: var(--zq-text-body) !important;
  }

  html.v2-layout-ready .mobile-more-dialog::backdrop {
    background: rgba(0, 0, 0, 0.56) !important;
  }

  html.v2-layout-ready .mobile-more-sheet {
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.v2-layout-ready .mobile-more-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px 8px !important;
    padding: 10px 0 18px !important;
  }

  html.v2-layout-ready .mobile-more-grid button {
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--zq-text-body) !important;
    font-size: 12px !important;
  }

  html.v2-layout-ready .mobile-more-grid button svg {
    width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
    border: 1px solid var(--zq-line-strong) !important;
    border-radius: 50% !important;
    color: var(--zq-teal) !important;
  }

  html.v2-layout-ready .mobile-more-grid button span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* Compact desktop: retain the established page columns while preventing the
   event and spread summaries from imposing wider intrinsic tracks. */
@media (min-width: 1101px) and (max-width: 1360px) {
  html.v2-layout-ready #overview .overview-event-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.v2-layout-ready #overview .overview-event-item,
  html.v2-layout-ready #overview .overview-event-item > div,
  html.v2-layout-ready #overview .overview-event-item :where(strong, small) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html.v2-layout-ready #arbitrage #arbitrageDetail,
  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary {
    grid-template-columns: minmax(104px, 0.8fr) minmax(96px, 0.8fr) minmax(0, 1.8fr) !important;
    gap: 6px !important;
  }

  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary > div,
  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary :where(span, strong, small, .status-badge) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary .status-badge {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-inline: 3px !important;
    justify-content: center !important;
  }
}

html.v2-layout-ready #overview .overview-event-column,
html.v2-layout-ready #arbitrage #arbitrageDetail {
  container-type: inline-size;
}

@container (max-width: 360px) {
  html.v2-layout-ready #overview .overview-event-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.v2-layout-ready #overview .overview-event-item,
  html.v2-layout-ready #overview .overview-event-item > div,
  html.v2-layout-ready #overview .overview-event-item :where(strong, small) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

@container (max-width: 420px) {
  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(104px, 0.8fr) minmax(96px, 0.8fr) minmax(0, 1.8fr) !important;
    gap: 6px !important;
  }

  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary > div,
  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary :where(span, strong, small, .status-badge) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.v2-layout-ready #arbitrage #arbitrageDetail .arbitrage-score-summary .status-badge {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-inline: 3px !important;
    justify-content: center !important;
  }
}

@media (max-width: 1100px) {
  html.v2-layout-ready #overview .fundamental-intelligence-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  html.v2-layout-ready #overview :where(.fundamental-core-column, .fundamental-driver-column, .overview-event-column) {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Ultrawide workspace contract. The shell and navigation continue to fill the
   window, while operational content stops growing once 1920 CSS pixels are
   available. The max() fallbacks preserve the established desktop paddings at
   normal widths, so this changes only the otherwise unbounded wide-screen
   geometry. */
html.v2-layout-ready {
  --zq-workspace-max: 1920px;
  scrollbar-gutter: stable;
}

/* Keep the desktop navigation rail pinned while the active view grows. The
   shell previously kept main at one viewport height, so its overflowing view
   content sat outside the sticky containing block and pulled the rail away on
   page scroll. Mobile keeps its existing fixed drawer contract below 721px. */
@media (min-width: 721px) {
  html.v2-layout-ready .app-shell {
    height: auto !important;
    min-height: 100vh !important;
    align-items: start !important;
  }

  html.v2-layout-ready .main-shell > main {
    height: auto !important;
    min-height: calc(100dvh - 125px) !important;
  }

  html.v2-layout-ready .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
  }
}

html.v2-layout-ready .topbar {
  padding-inline: max(12px, calc((100% - var(--zq-workspace-max)) / 2)) !important;
}

html.v2-layout-ready .system-ribbon {
  box-sizing: border-box !important;
  padding-inline: max(14px, calc((100% - var(--zq-workspace-max)) / 2)) !important;
}

html.v2-layout-ready .main-shell > .halt-banner,
html.v2-layout-ready .view {
  box-sizing: border-box !important;
  padding-inline: max(16px, calc((100% - var(--zq-workspace-max)) / 2)) !important;
}

/* The model registry audit is the only direct view child positioned against
   physical edges. Bind it to the same content rails as normal-flow sections. */
@media (min-width: 2145px) {
  html.v2-layout-ready #models.is-active > .v2-model-registry-detail-band {
    left: calc((100% - var(--zq-workspace-max)) / 2) !important;
    right: calc((100% - var(--zq-workspace-max)) / 2) !important;
  }
}