/* v24 realtime strip */
.realtime-strip-card .metric-row.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.health-dashboard-card {
  border: 1px solid rgba(101, 180, 255, 0.18);
}
.health-summary {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(137, 167, 232, 0.18);
  background: rgba(17, 32, 58, 0.72);
  color: #eef5ff;
  font-weight: 700;
  line-height: 1.5;
}
.health-dashboard-grid {
  align-items: start;
  margin-top: 18px;
}
.decision-header-section {
  margin-top: 2px;
}
.decision-header-card {
  border: 1px solid rgba(101, 180, 255, 0.22);
  background:
    radial-gradient(circle at top right, rgba(101, 180, 255, 0.15), transparent 28%),
    linear-gradient(180deg, rgba(16, 35, 68, 0.98), rgba(9, 23, 43, 0.98));
}
.decision-header-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.9fr);
  gap: 24px;
  align-items: stretch;
}
.decision-header-main,
.decision-header-policy-card,
.decision-header-drivers {
  background: rgba(10, 22, 43, 0.68);
  border: 1px solid rgba(137, 167, 232, 0.14);
  border-radius: 20px;
}
.decision-header-main {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}
.decision-header-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.decision-header-kicker {
  color: #8eb6ff;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}
.decision-header-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.05;
  color: #ffffff;
}
.decision-header-reason {
  margin: 14px 0 0;
  max-width: 60ch;
  color: #dce9ff;
  font-size: 16px;
  line-height: 1.6;
}
.decision-header-action-block {
  margin-top: 22px;
}
.decision-header-action-label {
  color: #9fb6dc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.decision-header-action {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(137, 167, 232, 0.18);
  background: rgba(17, 32, 58, 0.82);
  color: #f4f8ff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
}
.decision-header-side {
  display: grid;
  gap: 16px;
  align-content: start;
}
.decision-header-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.decision-header-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.decision-header-policy-card,
.decision-header-drivers {
  padding: 16px;
}
.decision-header-policy-text {
  color: #eef5ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}
.decision-driver-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.decision-driver-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(101, 180, 255, 0.12);
  border: 1px solid rgba(137, 167, 232, 0.16);
  color: #eef5ff;
  font-size: 13px;
  font-weight: 800;
}
.decision-badge-risk-on {
  color: #48e7a3;
  background: rgba(32, 167, 107, 0.12);
}
.decision-badge-balanced {
  color: #9fd0ff;
  background: rgba(101, 180, 255, 0.10);
}
.decision-badge-caution {
  color: #ffcb6a;
  background: rgba(255, 196, 74, 0.12);
}
.decision-badge-defensive {
  color: #ff9d57;
  background: rgba(255, 157, 87, 0.12);
}
.decision-badge-crisis {
  color: #ff7488;
  background: rgba(255, 92, 117, 0.10);
}
.health-level-healthy {
  color: #48e7a3;
  background: rgba(32, 167, 107, 0.12);
}
.health-level-watch {
  color: #ffcb6a;
  background: rgba(255, 196, 74, 0.12);
}
.health-level-degraded {
  color: #ff9d57;
  background: rgba(255, 157, 87, 0.12);
}
.health-level-stale {
  color: #ffb27a;
  background: rgba(255, 135, 87, 0.14);
}
.health-level-baseline {
  color: #ff7488;
  background: rgba(255, 92, 117, 0.10);
}
.mini-delta {
  margin-top: 6px;
  font-size: 12px;
  color: #a9c7ff;
}
@media (max-width: 980px) {
  .decision-header-layout,
  .decision-header-policy-grid,
  .decision-header-metrics {
    grid-template-columns: 1fr;
  }
  .decision-header-title {
    font-size: 30px;
  }
  .decision-header-action {
    font-size: 17px;
  }
  .realtime-strip-card .metric-row.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .health-dashboard-card .metric-row.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .decision-header-main,
  .decision-header-policy-card,
  .decision-header-drivers {
    padding: 14px;
    border-radius: 16px;
  }
  .decision-header-title {
    font-size: 24px;
  }
  .decision-header-reason,
  .decision-header-policy-text {
    font-size: 14px;
  }
  .realtime-strip-card .metric-row.four {
    grid-template-columns: 1fr;
  }
  .health-dashboard-card .metric-row.four {
    grid-template-columns: 1fr;
  }
}


/* v22.3 width consistency fix */
.page-shell > main > section,
.page-shell > footer {
  width: 100%;
}
.two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trading-action-grid,
.position-risk-grid,
.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.trading-action-grid > .card,
.position-risk-grid > .card,
.hero-grid > .card {
  width: 100%;
  max-width: 100%;
}
.full-width-section {
  width: 100%;
  max-width: 100%;
}
.chart-wrap,
.svg-wrap,
.table-wrap {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 980px) {
  .trading-action-grid,
  .position-risk-grid,
  .hero-grid,
  .two-col,
  .three-col {
    grid-template-columns: 1fr;
  }
}


/* v22.2 desktop + mobile polish */
.hero-grid,
.action-position-grid,
.execution-lock-grid,
.discipline-three {
  align-items: stretch;
}
.card {
  min-width: 0;
}
.card-head {
  min-height: 34px;
}
.card-head h2 {
  line-height: 1.2;
}
.metric-box,
.discipline-panel,
.execution-lock-main,
.execution-lock-panel,
.warning-card,
.scenario-card,
.trigger-rule {
  min-width: 0;
}
.metric-value,
.metric-value.small,
.progress-top span,
.warning-card-top strong,
.trigger-rule strong,
.today-action-box,
.execution-status-title,
.execution-status-desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.execution-lock-card {
  padding: 24px;
}
.execution-lock-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.execution-status-title {
  font-size: 30px;
  line-height: 1.15;
}
.execution-status-desc {
  max-width: 56ch;
}
.today-action-box {
  line-height: 1.6;
}
.table-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
table th, table td {
  white-space: nowrap;
}
table td:last-child, table th:last-child {
  white-space: normal;
}
#world-heatmap {
  width: 100%;
  height: auto;
}
.heatmap-layout {
  align-items: stretch;
}
.heatmap-legend {
  min-width: 0;
}
.warning-grid,
.action-position-grid {
  align-items: start;
}
@media (max-width: 1440px) {
  .page-shell {
    max-width: 1460px;
    padding: 18px;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .three-col {
    grid-template-columns: 1fr;
  }
  .metric-row,
  .metric-row.three,
  .metric-row.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .execution-lock-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 980px) {
  .page-shell {
    padding: 14px;
  }
  h1 {
    font-size: 38px;
  }
  .hero {
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
  }
  .hero-subtitle {
    font-size: 17px;
    line-height: 1.45;
  }
  .hero-status {
    width: 100%;
    min-width: 0;
  }
  .metric-row,
  .metric-row.two,
  .metric-row.three,
  .metric-row.four {
    grid-template-columns: 1fr;
  }
  .execution-lock-grid,
  .discipline-three {
    grid-template-columns: 1fr;
  }
  .execution-status-title {
    font-size: 24px;
  }
  .card {
    padding: 18px;
    border-radius: 18px;
  }
  .card h2 {
    font-size: 22px;
  }
  .card h3 {
    font-size: 16px;
  }
  .decision-line {
    font-size: 15px;
  }
  .today-action-box {
    font-size: 14px;
  }
  .position-target-chip {
    margin-left: 0;
    margin-top: 6px;
  }
  .warning-card-top {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .warning-time,
  .warning-level-order {
    margin-left: 0;
  }
  .table-wrap table {
    min-width: 760px;
  }
  .chart-wrap,
  .svg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #trend-chart,
  #trend-chart-30d,
  #world-heatmap {
    min-width: 720px;
  }
}
@media (max-width: 640px) {
  .page-shell {
    padding: 12px;
  }
  h1 {
    font-size: 31px;
  }
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  .hero-subtitle {
    font-size: 15px;
  }
  .card {
    padding: 16px;
    border-radius: 16px;
  }
  .metric-label {
    font-size: 13px;
  }
  .metric-value {
    font-size: 18px;
  }
  .metric-value.small {
    font-size: 15px;
  }
  .execution-status-pill {
    min-width: 100px;
    font-size: 12px;
  }
  .execution-status-title {
    font-size: 21px;
  }
  .bullet-list {
    gap: 8px;
    padding-left: 18px;
  }
  .table-wrap table {
    min-width: 680px;
  }
}

:root {
  --bg: #07111f;
  --bg-2: #0c1930;
  --panel: linear-gradient(180deg, rgba(16, 34, 66, 0.95), rgba(10, 24, 45, 0.96));
  --panel-border: rgba(128, 164, 255, 0.18);
  --text: #f2f7ff;
  --muted: #9eb4d8;
  --line: rgba(146, 174, 232, 0.16);
  --blue: #65b4ff;
  --blue-2: #3f7dff;
  --green: #2fd38a;
  --yellow: #ffd46a;
  --red: #ff6b7a;
  --orange: #ff9d57;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(circle at top left, rgba(29, 70, 138, 0.25), transparent 28%), linear-gradient(180deg, #040a14, #07111f 25%, #091526 100%);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.page-shell { max-width: 1660px; margin: 0 auto; padding: 20px; }
.hero {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 8px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.eyebrow { color: #8eb6ff; letter-spacing: 0.18em; font-size: 14px; margin-bottom: 10px; }
h1 { margin: 0; font-size: 56px; line-height: 1.05; }
.hero-subtitle { margin: 14px 0 0; color: #9fb5d8; font-size: 24px; }

.decision-line {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(137, 167, 232, 0.18);
  background: rgba(17, 32, 58, 0.82);
  color: #eef5ff;
  font-weight: 800;
  line-height: 1.45;
}
.metric-arrow.up { color: #ffb27a; }
.metric-arrow.down { color: #63e8a7; }
.metric-arrow.flat { color: #c8d8f3; }
.warning-time {
  color: #9fb6dc;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
}
.warning-driver {
  color: #9fb6dc;
  margin-bottom: 6px;
}


.execution-subtitle {
  margin-top: 10px;
  color: #c7dbff;
  font-size: 13px;
  font-weight: 700;
}
.action-checklist li::marker { color: #63e8a7; }
.action-blocklist li::marker { color: #ff7b8d; }
.threshold-list li::marker { color: #ffcb6a; }
.position-target-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(101, 180, 255, 0.12);
  color: #e8f2ff;
  font-weight: 800;
  font-size: 12px;
  margin-left: 8px;
}


.execution-lock-card {
  border: 1px solid rgba(255, 210, 106, 0.20);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}
.execution-lock-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.execution-lock-main,
.execution-lock-panel {
  background: rgba(11, 24, 45, 0.72);
  border: 1px solid rgba(137, 167, 232, 0.14);
  border-radius: 18px;
  padding: 16px;
}
.execution-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.execution-status-pill.green { background: rgba(47, 211, 138, 0.16); color: #64f5b0; }
.execution-status-pill.yellow { background: rgba(255, 212, 106, 0.16); color: #ffd46a; }
.execution-status-pill.red { background: rgba(255, 107, 122, 0.16); color: #ff9dab; }
.execution-status-title {
  margin-top: 14px;
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
}
.execution-status-desc {
  margin-top: 10px;
  color: #d9e8ff;
  line-height: 1.55;
}
.lock-allow li::marker { color: #63e8a7; }
.lock-block li::marker { color: #ff7b8d; }
.lock-mandatory li::marker { color: #ffd46a; }
@media (max-width: 1360px) {
  .execution-lock-grid { grid-template-columns: 1fr; }
}

.hero-status {
  border: 1px solid var(--panel-border); background: rgba(12, 24, 44, 0.8); padding: 18px 24px;
  border-radius: 18px; min-width: 220px; text-align: center; color: #c7dbff; font-weight: 700;
}
main { display: grid; gap: 22px; }
.grid { display: grid; gap: 22px; }
.two-col { grid-template-columns: 1.25fr 0.9fr; }
.three-col { grid-template-columns: 1fr 1fr 1fr; }
.full-width-section { display: block; width: 100%; }
.full-width-card { width: 100%; max-width: 100%; }
.card {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}
.card h2 { margin: 0 0 16px; font-size: 24px; }
.card h3 { margin: 0 0 10px; font-size: 18px; }
.card p, .card li, .card td, .card th, .muted { color: var(--muted); }
.split-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.metric-row { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(4, 1fr); }
.metric-row.two { grid-template-columns: repeat(2, 1fr); }
.metric-row.three { grid-template-columns: repeat(3, 1fr); }
.metric-row.four { grid-template-columns: repeat(4, 1fr); }
.metric-box {
  background: rgba(17, 32, 58, 0.78); border: 1px solid rgba(137, 167, 232, 0.14);
  border-radius: 18px; padding: 16px;
}
.metric-box.compact { padding: 14px 16px; }
.metric-label { color: #9fb6dc; font-size: 14px; margin-bottom: 8px; }
.metric-value { font-size: 20px; font-weight: 800; color: #ffffff; }
.metric-value.small { font-size: 16px; line-height: 1.35; word-break: break-word; }
.bullet-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.progress-group { display: grid; gap: 14px; }
.progress-row { display: grid; gap: 8px; }
.progress-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.progress-track {
  height: 14px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f86ff, #82d9ff);
}
.progress-fill.down { background: linear-gradient(90deg, #18b76b, #64f5b0); }
.progress-fill.flat { background: linear-gradient(90deg, #7387aa, #a8b5ca); }
.progress-note { font-size: 12px; color: #8aa4ce; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: #c2d7ff; font-weight: 700; }
td { color: #edf5ff; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,0.12);
}
.badge.strong { color: #48e7a3; background: rgba(32, 167, 107, 0.12); }
.badge.cautious { color: #ffcb6a; background: rgba(255, 196, 74, 0.12); }
.badge.underweight { color: #ff7488; background: rgba(255, 92, 117, 0.10); }
.badge.neutral { color: #ffbf66; background: rgba(255, 180, 70, 0.10); }
.chart-wrap { min-height: 220px; }
#trend-chart text { fill: #9eb4d8; font-size: 12px; }
#trend-chart .axis { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
#trend-chart .gridline { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
#trend-chart .series { fill: none; stroke: #70b8ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#trend-chart .point { fill: #d9f0ff; stroke: #70b8ff; stroke-width: 3; }
#trend-chart .area { fill: url(#chartGradient); opacity: 0.24; }
.heatmap-card { overflow: hidden; min-height: 640px; }
.heatmap-layout { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.68fr); gap: 20px; align-items: start; }
#world-heatmap { width: 100%; height: auto; min-height: 460px; display:block; }
.heat-region { stroke: rgba(255,255,255,0.18); stroke-width: 2; }
.heat-label { fill: #eef5ff; font-size: 13px; font-weight: 700; }
.heat-score { fill: #dbeafe; font-size: 12px; }
.heat-note { fill: #eef5ff; font-size: 11px; }
.heat-note tspan { dominant-baseline: hanging; }
.heatmap-legend { display: grid; gap: 10px; align-content: start; max-width: 100%; }
.legend-title { color: #d8e6ff; font-weight: 700; }
.legend-bar {
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, #2fd38a, #ffd46a, #ff8f5f, #ff536b);
}
.legend-labels { display: flex; justify-content: space-between; color: #9eb4d8; font-size: 12px; }
.heatmap-legend #heatmap-list { display:grid; gap:10px; }
.heatmap-legend .legend-title { margin-bottom:2px; }
.heatmap-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 14px; background: rgba(12, 26, 49, 0.68); border: 1px solid rgba(144, 170, 229, 0.12);
}
.swatch { width: 14px; height: 14px; border-radius: 999px; }
.swatch-label { min-width: 0; }
.swatch-label strong { display: block; color: #f3f7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch-label span { color: #90abd3; font-size: 12px; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scenario-card {
  background: rgba(17, 32, 58, 0.7); border: 1px solid rgba(137, 167, 232, 0.14); border-radius: 18px; padding: 16px; margin-bottom: 14px;
}
.scenario-title { color: #ffffff; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.scenario-meta { color: #9fb6dc; margin-bottom: 10px; }
.trigger-block + .trigger-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.footer { color: #9cb0cf; padding: 6px 4px 24px; }
code { color: #d3e4ff; }
.trend-strip { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.liquidity-metrics { margin-bottom: 18px; }
.transmission-card { overflow: hidden; }
.chain-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 22px;
  margin-bottom: 24px;
  align-items: stretch;
}
.chain-node {
  position: relative;
  background: rgba(13, 28, 52, 0.74);
  border: 1px solid rgba(137, 167, 232, 0.14);
  border-radius: 20px;
  padding: 18px 16px;
  min-height: 170px;
}
.chain-node::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  color: #86b7ff;
  font-size: 24px;
  font-weight: 800;
}
.chain-node:last-child::after { display: none; }
.chain-node-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.chain-node-title { font-weight: 800; color: #f4f8ff; }
.chain-node-score { font-size: 24px; font-weight: 900; color: #fff; }
.chain-node-direction { font-size: 12px; font-weight: 700; color: #dbe7ff; margin-bottom: 10px; }
.chain-node-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 10px; }
.chain-node-fill { height: 100%; border-radius: 999px; }
.chain-node-note { color: #96b0d8; font-size: 13px; line-height: 1.45; }
.chain-bottom-grid { align-items: start; }
.chain-asset-impacts { display: grid; gap: 12px; }
.chain-impact-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: rgba(13, 28, 52, 0.74); border: 1px solid rgba(137, 167, 232, 0.14);
}
.chain-impact-item strong { color: #f4f8ff; }
.chain-impact-direction { font-weight: 800; }
.chain-impact-direction.positive { color: #44e09d; }
.chain-impact-direction.negative { color: #ff7b8d; }
.chain-impact-direction.mixed { color: #ffd46a; }
.chain-impact-score { color: #dce9ff; font-weight: 800; }

@media (max-width: 1400px) {
  .chain-flow { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .chain-node:nth-child(3)::after, .chain-node:nth-child(6)::after { display: none; }
}

@media (max-width: 1280px) {
  .two-col, .three-col, .heatmap-layout { grid-template-columns: 1fr; }
  .metric-row, .trend-strip, .metric-row.two, .metric-row.three, .metric-row.four { grid-template-columns: 1fr 1fr; }
  .chain-flow { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .chain-node::after { display: none; }
  h1 { font-size: 44px; }
  .hero-subtitle { font-size: 20px; }
}

@media (max-width: 760px) {
  .page-shell { padding: 14px; }
  .hero { flex-direction: column; }
  .metric-row, .metric-row.two, .metric-row.three, .metric-row.four, .trend-strip, .chain-flow { grid-template-columns: 1fr; }
  h1 { font-size: 34px; }
  .hero-subtitle { font-size: 18px; }
}

/* v18 additions */
.network-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  margin-top: 24px;
}
.chain-layers, .chain-decomposition {
  display: grid;
  gap: 14px;
}
.chain-layer-card, .decomp-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(7, 18, 36, 0.42);
}
.chain-layer-title, .decomp-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
}
.chain-layer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chain-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(84, 129, 255, 0.15);
  color: var(--text);
  border: 1px solid rgba(132, 167, 255, 0.14);
  font-size: 13px;
}
.decomp-row {
  display: grid;
  grid-template-columns: 120px 1fr 52px;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}
.decomp-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(145, 171, 227, 0.14);
  overflow: hidden;
}
.decomp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6fa6ff, #7ed3ff);
}
.heat-label, .heat-score {
  font-family: inherit;
}
.heat-label {
  font-size: 13px;
  font-weight: 700;
}
.heat-score {
  font-size: 11px;
}
.heatmap-item strong { font-size: 17px; }
@media (max-width: 1200px) {
  .network-grid {
    grid-template-columns: 1fr;
  }
}


/* v19 additions */
.large-chart { min-height: 260px; margin-top: 16px; }
.time-grid { align-items: start; }
.warning-alert-list { display: grid; gap: 14px; margin-top: 18px; }
.warning-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(7, 18, 36, 0.42);
}
.warning-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text);
}
.warning-line {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.warning-line span:first-child {
  color: #c7dbff;
  font-weight: 700;
}
.rule-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.rule-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(17, 32, 58, 0.78);
  border: 1px solid rgba(137, 167, 232, 0.14);
  color: var(--text);
}
#trend-chart-30d text { fill: #9eb4d8; font-size: 11px; }
#trend-chart-30d .axis { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
#trend-chart-30d .gridline { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
#trend-chart-30d .series { fill: none; stroke: #70b8ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#trend-chart-30d .point { fill: #d9f0ff; stroke: #70b8ff; stroke-width: 2.5; }
#trend-chart-30d .area { fill: url(#trend-chart-30d-gradient); opacity: 0.24; }

@media (max-width: 1280px) {
  .time-grid { grid-template-columns: 1fr; }
}


.trend-explainer .metric-value.small { color: #dce9ff; font-weight: 700; }
.chain-node-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.chain-delta { font-size:12px; font-weight:800; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,0.08); color:#dce9ff; }
.chain-delta.up { color:#ffb27a; background: rgba(255,157,87,0.16); }
.chain-delta.down { color:#63e8a7; background: rgba(47,211,138,0.12); }
.chain-delta.flat { color:#c8d8f3; background: rgba(160,177,209,0.12); }
.warning-card.danger { border-color: rgba(255,107,122,0.35); }
.warning-card.warning { border-color: rgba(255,212,106,0.28); }
.warning-card.watch { border-color: rgba(101,180,255,0.24); }
.warning-card-top strong { flex:1; }
.warning-driver { margin-top:8px; color:#d8e6ff; font-size:13px; }
.warning-level-order { color:#9fb6dc; font-size:12px; font-weight:700; margin-left:auto; }
.asset-driver-chip { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background: rgba(101,180,255,0.12); color:#dce9ff; font-size:12px; font-weight:700; margin-right:6px; margin-bottom:4px; }
.return-driver-cell { min-width: 180px; }


.today-action-box {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(137, 167, 232, 0.18);
  background: rgba(17, 32, 58, 0.82);
  color: #f3f7ff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 16px;
}
.discipline-grid { display:grid; gap:18px; }
.discipline-grid.two-mini { grid-template-columns: 1fr 1fr; }
.discipline-panel {
  background: rgba(13, 28, 52, 0.74);
  border: 1px solid rgba(137, 167, 232, 0.14);
  border-radius: 18px;
  padding: 16px;
}
.discipline-three { align-items:start; }
#position-core-body td:first-child { font-weight: 800; color: #f3f7ff; }
@media (max-width: 1280px) {
  .discipline-grid.two-mini, .discipline-three { grid-template-columns: 1fr; }
}