.strategy-detail-grid {
  grid-template-columns: minmax(560px, 1.25fr) minmax(360px, .75fr);
  grid-template-areas:
    "account parameters"
    "spread parameters"
    "log parameters";
  align-items: start;
}

.strategy-main {
  font-size: 12px;
}

.strategy-detail-header h1,
.strategy-detail-section > header h2 {
  font-size: 15px;
}

.strategy-detail-header p,
.strategy-detail-section > header p,
.strategy-header-summary,
.primary-parameter-form,
.account-panel,
.log-panel {
  font-size: 11px;
}

.strategy-run-message {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 5;
  min-width: 0;
  max-width: 360px;
  padding: 5px 8px;
  border: 1px solid #46505a;
  border-radius: 3px;
  background: #20252b;
  color: #8f9aa2;
  box-shadow: 0 3px 10px rgb(0 0 0 / 28%);
  pointer-events: none;
  white-space: nowrap;
}

.strategy-run-message:empty {
  display: none;
}

.strategy-run-message.error {
  color: #ff6b6b;
}

.strategy-control-stack,
.strategy-lifecycle-control {
  display: flex;
  align-items: center;
  gap: 7px;
}

.strategy-control-stack {
  position: relative;
}

.strategy-lifecycle-control button {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 12px;
}

.online-action,
.strategy-lifecycle.online {
  color: #20b57a;
  border-color: #237c5f;
}

.strategy-lifecycle,
.strategy-lifecycle i {
  display: inline-flex;
  align-items: center;
}

.strategy-lifecycle {
  gap: 6px;
  color: #8f9aa2;
  white-space: nowrap;
}

.strategy-lifecycle i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6f7880;
}

.strategy-lifecycle.online i,
.strategy-state.online {
  background: #20b57a;
}

.strategy-lifecycle.offline i,
.strategy-state.offline {
  background: #6f7880;
}

.account-panel {
  grid-area: account;
  grid-row: auto;
}

.parameters-panel {
  grid-area: parameters;
}

.log-panel {
  grid-area: log;
}

.spread-panel {
  grid-area: spread;
}

.pnl-subsection {
  padding: 0;
}

.pnl-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
}

.pnl-subsection-title h3 {
  margin: 0;
}

.pnl-subsection-title span {
  overflow: hidden;
  color: #7f8a93;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}

.pnl-subsection .pnl-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
}

.pnl-subsection .pnl-metrics span,
.pnl-subsection .pnl-metrics strong {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

.backtest-summary {
  padding: 0;
}

.backtest-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #3b4148;
}

.backtest-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  background: #1b1e22;
  color: #8f9aa2;
  white-space: nowrap;
}

.backtest-metrics b {
  color: #eef1f3;
}

.backtest-summary > p {
  margin: 0;
  padding: 7px 9px;
  color: #e6a23c;
  font-size: 10px;
}

.backtest-analysis {
  border-top: 1px solid #3b4148;
  background: #1b1e22;
}

.backtest-assessment {
  padding: 7px 10px;
  border-left: 3px solid #e6a23c;
  background: #29261f;
  color: #f0c36b;
  font-weight: 600;
}

.backtest-assessment.pass {
  border-color: #20b57a;
  background: #1d2925;
  color: #43d79e;
}

.backtest-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #3b4148;
}

.backtest-detail-metrics span,
.backtest-data-range span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  background: #202329;
  color: #8f9aa2;
  white-space: nowrap;
}

.backtest-detail-metrics b,
.backtest-data-range b {
  overflow: hidden;
  color: #eef1f3;
  text-overflow: ellipsis;
}

.backtest-data-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #3b4148;
}

@media (max-width: 760px) {
  .backtest-detail-metrics,
  .backtest-data-range {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pnl-subsection .pnl-metrics strong {
  font-size: 11px;
}

.primary-parameter-form > label.pair-leg-detail {
  grid-template-columns: minmax(105px, 1fr) minmax(0, 1.4fr);
}

.pair-leg-detail output {
  overflow: hidden;
  color: #43fcfd;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.spread-chart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spread-chart-controls span {
  color: #8f9aa2;
  white-space: nowrap;
  font-size: 9px;
}

.spread-chart-controls span.live {
  color: #43d79e;
}

.spread-chart-controls select {
  width: 82px;
  height: 27px;
  padding: 2px 5px;
  font-size: 9px;
}

.valuation-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #3b4148;
}

.valuation-summary-grid section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  min-width: 0;
  padding: 8px 10px;
  background: #1b1e22;
}

.valuation-summary-grid span,
.valuation-summary-grid small {
  color: #8f9aa2;
  font-size: 9px;
}

.valuation-summary-grid strong {
  color: #eef1f3;
  font-size: 12px;
}

.valuation-summary-grid small {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.valuation-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  gap: 1px;
  overflow-x: auto;
  margin: 0;
  padding: 1px 0;
  list-style: none;
  background: #30363c;
}

.valuation-steps li {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 70px;
  padding: 7px 9px;
  border-top: 2px solid #65717a;
  background: #202329;
}

.valuation-steps li.ready { border-top-color: #43d79e; }
.valuation-steps li.blocked { border-top-color: #e35d6a; }
.valuation-steps strong { color: #cbd2d7; font-size: 9px; }
.valuation-steps b { color: #43fcfd; font-size: 11px; }
.valuation-steps span { color: #7f8a93; line-height: 1.35; font-size: 8px; }

.spread-chart-legend {
  display: flex;
  gap: 16px;
  padding: 7px 12px 0;
  color: #9ba5ad;
  font-size: 9px;
}

.spread-live-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(120px, .65fr);
  gap: 1px;
  background: #3b4148;
}

.spread-live-strip > section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  padding: 7px 10px;
  background: #1b1e22;
}

.spread-live-strip section > strong {
  flex: 0 0 auto;
  font-size: 11px;
}

.spread-live-strip .quote-symbol {
  overflow: hidden;
  flex: 1 1 auto;
  color: #43fcfd;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.spread-live-strip section > span:not(.quote-symbol) {
  flex: 0 0 auto;
  color: #8f9aa2;
  white-space: nowrap;
  font-size: 10px;
}

.spread-live-strip section > span b {
  margin-left: 5px;
  color: #eef1f3;
  font-size: 12px;
}

.spread-live-value > b {
  flex: 0 0 auto;
  margin: 0;
  color: #e6a23c;
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
}

.spread-executable-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #3b4148;
}

.spread-executable-strip > section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #202329;
}

.spread-executable-strip span {
  overflow: hidden;
  color: #8f9aa2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}

.spread-executable-strip b {
  color: #eef1f3;
  white-space: nowrap;
  font-size: 10px;
}

.valuation-panel {
  border-top: 1px solid #3b4148;
  background: #171a1e;
}

.valuation-input-strip,
.valuation-process-strip {
  display: grid;
  gap: 1px;
  background: #3b4148;
}

.valuation-input-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.valuation-process-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.valuation-input-strip section,
.valuation-process-strip section,
.valuation-formula-row {
  min-width: 0;
  background: #202329;
}

.valuation-input-strip section,
.valuation-process-strip section {
  display: grid;
  gap: 3px;
  padding: 7px 10px;
}

.valuation-input-strip span,
.valuation-process-strip span,
.valuation-formula-row span {
  overflow: hidden;
  color: #8f9aa2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}

.valuation-input-strip strong,
.valuation-process-strip b,
.valuation-formula-row b {
  overflow: hidden;
  color: #eef1f3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.valuation-input-strip strong {
  font-size: 12px;
}

.valuation-input-strip small {
  overflow: hidden;
  color: #43fcfd;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}

.valuation-process-strip b {
  font-size: 10px;
}

.valuation-formula-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
}

.valuation-formula-row b {
  color: #cdd4da;
  font-size: 9px;
  font-weight: 500;
}

.valuation-issues {
  padding: 7px 10px;
  border-left: 3px solid #e6a23c;
  background: #27231c;
  color: #f0c36b;
  font-size: 10px;
  line-height: 1.45;
}

.spread-chart-legend span::before {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin: 0 5px 3px 0;
  content: "";
}

.spread-chart-legend .mid-spread::before { background: #e6a23c; }
.spread-chart-legend .short-spread::before { background: #43d79e; }
.spread-chart-legend .long-spread::before { background: #409eff; }

.spread-chart-canvas {
  position: relative;
  height: 230px;
  padding: 4px 8px 8px;
}

.spread-chart-canvas canvas {
  width: 100%;
  height: 100%;
}

.spread-chart-canvas p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #7f8a93;
  font-size: 10px;
}

.strategy-log-row.friendly {
  grid-template-columns: 150px 42px minmax(0, 1fr);
}

.strategy-log-row.friendly span {
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .strategy-detail-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "account" "parameters" "spread" "log";
  }
}

@media (max-width: 620px) {
  .valuation-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .spread-live-strip {
    grid-template-columns: 1fr;
  }

  .spread-executable-strip {
    grid-template-columns: 1fr;
  }

  .valuation-input-strip,
  .valuation-process-strip,
  .valuation-formula-row {
    grid-template-columns: 1fr;
  }
}