.visual-status-band {
  min-height: 224px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(460px, 0.8fr);
  align-items: end;
  gap: 28px;
  padding: 26px 28px;
  color: #fff;
  background-color: rgba(11, 32, 40, 0.7);
  background-image: url("/assets/pattaya-revenue-digital-twin-v1.jpg");
  background-size: cover;
  background-position: center 46%;
  background-blend-mode: multiply;
  border: 1px solid #294d5b;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(15, 41, 51, 0.16);
  overflow: hidden;
}

.visual-status-copy { max-width: 660px; }
.visual-status-copy .eyebrow { color: #95e0e8; }
.visual-status-copy h2 { margin: 7px 0 8px; max-width: 620px; font-size: 25px; line-height: 1.25; font-weight: 690; }
.visual-status-copy > p:not(.eyebrow) { margin: 0; max-width: 640px; color: #d5e4e8; line-height: 1.6; }
.hero-refresh {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  padding: 0 9px;
  border: 1px solid rgba(211, 235, 239, 0.36);
  border-radius: 4px;
  background: rgba(7, 28, 36, 0.52);
  color: #e7f4f6;
  font-size: 11px;
}
.hero-refresh svg { width: 14px; height: 14px; }
.hero-refresh.syncing svg { animation: spin 0.9s linear infinite; }
.hero-refresh.ready { color: #a9ead8; border-color: rgba(123, 216, 189, 0.5); }

.source-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: end;
  background: rgba(7, 27, 34, 0.72);
  border: 1px solid rgba(207, 231, 235, 0.28);
  border-radius: 5px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.source-status-grid article { min-height: 78px; padding: 13px 14px; border-right: 1px solid rgba(207, 231, 235, 0.18); border-bottom: 1px solid rgba(207, 231, 235, 0.18); }
.source-status-grid article:nth-child(2n) { border-right: 0; }
.source-status-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
.source-status-grid span { color: #a8c0c8; font-size: 10px; text-transform: uppercase; }
.source-status-grid b { display: block; margin-top: 5px; color: #fff; font-size: 14px; line-height: 1.25; }
.source-status-grid small { display: block; margin-top: 4px; color: #a9bec5; font-size: 10px; line-height: 1.35; }
.source-status-grid .live b { color: #9fe3ce; }
.source-status-grid .reference b { color: #ffd493; }
.source-status-grid .partial b { color: #ffc1b5; }

.forecast-filter {
  margin-top: 12px;
  grid-template-columns: minmax(110px, 0.6fr) minmax(200px, 1.4fr) minmax(120px, 0.7fr) minmax(150px, 0.8fr) 1fr;
}

.period-control > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.period-control .segmented { width: 100%; }
.forecast-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.forecast-chart-grid { grid-template-columns: 1.08fr 0.92fr; }

.forecast-kpis .kpi-card { position: relative; overflow: hidden; }
.kpi-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label-row svg { width: 17px; height: 17px; color: var(--accent); }

.forecast-filter, .forecast-kpis .kpi-card, .demand-panel, .forecast-chart-grid .panel, .decision-panel {
  border-color: #d4dee3;
  box-shadow: 0 7px 22px rgba(18, 48, 61, 0.065);
}

.forecast-filter select { background-color: #fbfcfd; }
.forecast-filter .segmented button.active { background: #173f50; }

.demand-panel { overflow: hidden; }
.demand-source { color: var(--muted); font-size: 11px; text-align: right; line-height: 1.5; }

.heat-overview {
  height: 62px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8px, 1fr);
  align-items: end;
  gap: 2px;
  padding: 8px 8px 6px;
  border: 1px solid var(--line);
  background: #f8fafb;
  overflow: hidden;
}

.heat-overview-bar {
  min-width: 4px;
  background: #cdd6db;
  border-radius: 2px 2px 0 0;
}
.heat-overview-bar.heat-h-1 { height: 7px; }
.heat-overview-bar.heat-h-2 { height: 12px; }
.heat-overview-bar.heat-h-3 { height: 17px; }
.heat-overview-bar.heat-h-4 { height: 22px; }
.heat-overview-bar.heat-h-5 { height: 27px; }
.heat-overview-bar.heat-h-6 { height: 32px; }
.heat-overview-bar.heat-h-7 { height: 37px; }
.heat-overview-bar.heat-h-8 { height: 42px; }
.heat-overview-bar.heat-h-9 { height: 47px; }
.heat-overview-bar.heat-h-10 { height: 52px; }
.heat-overview-bar.selected { background: #2d78e6; }
.heat-overview-bar.very-high { background: #ff8279; }
.heat-overview-bar.high { background: #ffc56c; }

.heat-layout {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.heat-axis {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0 28px;
  color: #53646e;
  font-size: 11px;
  text-align: right;
}

.heat-chart { width: 100%; height: 300px; min-width: 0; }
.heat-chart svg { display: block; width: 100%; height: 100%; }

.heat-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.heat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.heat-dot { width: 11px; height: 11px; border-radius: 3px; background: #2d78e6; }
.heat-dot.very-high { background: #ff8279; }
.heat-dot.high { background: #ffc56c; }
.heat-note { margin-left: auto; }

.price-swatch.hostex { background: #1677a6; }
.price-swatch.total { background: #c55b49; }
.price-swatch.net { background: #0a8a75; }
.price-swatch.recommendedNet { background: #b74f78; }

.action-chip, .heat-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 650;
}
.action-chip.up { color: #08715f; background: var(--green-soft); }
.action-chip.down { color: #a54838; background: var(--red-soft); }
.action-chip.hold { color: #6f4a0a; background: var(--amber-soft); }
.approval-chip { display: inline-flex; min-height: 20px; margin-top: 4px; align-items: center; padding: 0 6px; border-radius: 4px; color: #a13b34; background: #ffebe9; font-size: 9px; font-weight: 700; }
.heat-chip.very-high { color: #a13b34; background: #ffebe9; }
.heat-chip.high { color: #805204; background: #fff3d7; }
.heat-chip.above { color: #145fae; background: #eaf3ff; }
.heat-chip.below, .heat-chip.low, .heat-chip.very-low { color: #53646e; background: #edf1f3; }
.heat-chip.missing { color: #7a8790; background: #f1f3f4; }
.demand-alert { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding: 9px 10px; border-left: 3px solid #e0a138; background: #fff8e8; color: #735015; font-size: 10px; line-height: 1.5; }
.demand-alert svg { width: 14px; height: 14px; flex: 0 0 auto; }
.demand-trend { display: inline-flex; min-height: 20px; align-items: center; gap: 3px; margin: 3px 0 0 4px; color: #71818b; font-size: 9px; white-space: nowrap; }
.demand-trend svg { width: 12px; height: 12px; }
.demand-trend.rising { color: #08715f; }
.demand-trend.falling { color: #a54838; }

.forecast-table th:last-child, .forecast-table td:last-child { text-align: left; }
.forecast-table td:last-child { max-width: 360px; white-space: normal; line-height: 1.45; color: #53646e; }
.forecast-table .pressure-row td { background: #fff9ed; }
.forecast-table .weak-row td { background: #fff3f0; }
.forecast-table .date-cell { font-weight: 650; color: var(--ink); }
.forecast-table .confidence { display: block; margin-top: 3px; color: #89959c; font-size: 10px; }
.mobile-forecast-list { display: none; }

.chart-wrap .forecast-band { fill: rgba(10, 138, 117, 0.12); }
.chart-wrap .pace-line { stroke: #b87912; stroke-width: 2; stroke-dasharray: 7 5; fill: none; }
.chart-wrap .current-line { stroke: #1677a6; stroke-width: 2.6; fill: none; }
.chart-wrap .forecast-line { stroke: #0a8a75; stroke-width: 2.6; fill: none; }

@media (max-width: 1180px) {
  .visual-status-band { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr); }
  .forecast-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .forecast-filter .period-stamp { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .forecast-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forecast-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .visual-status-band {
    min-height: 360px;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 18px;
    padding: 20px;
    background-position: 61% center;
  }
  .visual-status-copy h2 { font-size: 20px; }
  .visual-status-copy > p:not(.eyebrow) { font-size: 12px; }
  .source-status-grid { width: 100%; }
  .source-status-grid article { min-height: 70px; padding: 11px 12px; }
  .forecast-filter { grid-template-columns: 1fr 1fr; }
  .forecast-filter .room-filter { grid-column: 1 / -1; }
  .forecast-filter .period-stamp { grid-column: 1 / -1; }
  .forecast-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heat-layout { grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
  .heat-axis { height: 250px; font-size: 10px; }
  .heat-chart { height: 250px; overflow-x: auto; }
  .heat-chart svg { min-width: 680px; }
  .heat-legend { justify-content: flex-start; flex-wrap: wrap; gap: 10px 14px; }
  .heat-note { width: 100%; margin-left: 0; }
  .demand-source { text-align: left; }
  .chart-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
  .chart-wrap svg { min-width: 680px; }
  .decision-panel .table-shell { display: none; }
  .mobile-forecast-list { display: grid; gap: 10px; }
  .mobile-forecast-card {
    padding: 13px;
    background: #fff;
    border: 1px solid #dce4e7;
    border-left: 3px solid #8da1aa;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(18, 48, 61, 0.06);
  }
  .mobile-forecast-card.pressure { border-left-color: #d49a31; background: #fffdf7; }
  .mobile-forecast-card.weak { border-left-color: #c55b49; background: #fffaf8; }
  .mobile-forecast-card > header { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mobile-card-date, .mobile-card-action { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .mobile-card-date b { font-size: 14px; white-space: nowrap; }
  .mobile-card-date .demand-trend { margin-top: 0; }
  .mobile-card-action { justify-content: flex-end; }
  .mobile-card-action small { color: #71818b; font-size: 10px; white-space: nowrap; }
  .mobile-pace { position: relative; height: 5px; margin: 11px 0 12px; overflow: visible; background: #e8eef0; border-radius: 3px; }
  .mobile-pace i { display: block; height: 100%; background: #1677a6; border-radius: inherit; }
  .mobile-pace span { position: absolute; top: -3px; width: 2px; height: 11px; background: #b87912; transform: translateX(-1px); }
  .pace-width-0 { width: 0%; } .pace-left-0 { left: 0%; }
  .pace-width-5 { width: 5%; } .pace-left-5 { left: 5%; }
  .pace-width-10 { width: 10%; } .pace-left-10 { left: 10%; }
  .pace-width-15 { width: 15%; } .pace-left-15 { left: 15%; }
  .pace-width-20 { width: 20%; } .pace-left-20 { left: 20%; }
  .pace-width-25 { width: 25%; } .pace-left-25 { left: 25%; }
  .pace-width-30 { width: 30%; } .pace-left-30 { left: 30%; }
  .pace-width-35 { width: 35%; } .pace-left-35 { left: 35%; }
  .pace-width-40 { width: 40%; } .pace-left-40 { left: 40%; }
  .pace-width-45 { width: 45%; } .pace-left-45 { left: 45%; }
  .pace-width-50 { width: 50%; } .pace-left-50 { left: 50%; }
  .pace-width-55 { width: 55%; } .pace-left-55 { left: 55%; }
  .pace-width-60 { width: 60%; } .pace-left-60 { left: 60%; }
  .pace-width-65 { width: 65%; } .pace-left-65 { left: 65%; }
  .pace-width-70 { width: 70%; } .pace-left-70 { left: 70%; }
  .pace-width-75 { width: 75%; } .pace-left-75 { left: 75%; }
  .pace-width-80 { width: 80%; } .pace-left-80 { left: 80%; }
  .pace-width-85 { width: 85%; } .pace-left-85 { left: 85%; }
  .pace-width-90 { width: 90%; } .pace-left-90 { left: 90%; }
  .pace-width-95 { width: 95%; } .pace-left-95 { left: 95%; }
  .pace-width-100 { width: 100%; } .pace-left-100 { left: 100%; }
  .mobile-card-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e2e8eb; border-radius: 5px; overflow: hidden; }
  .mobile-card-metrics div { min-height: 49px; padding: 8px 9px; border-right: 1px solid #e8edef; border-bottom: 1px solid #e8edef; }
  .mobile-card-metrics div:nth-child(2n) { border-right: 0; }
  .mobile-card-metrics div:nth-last-child(-n + 2) { border-bottom: 0; }
  .mobile-card-metrics span, .mobile-card-metrics b { display: block; }
  .mobile-card-metrics span { color: #71818b; font-size: 10px; }
  .mobile-card-metrics b { margin-top: 4px; color: #294651; font-size: 13px; }
  .mobile-card-metrics b.risk { color: #a54838; }
  .mobile-card-metrics b.positive { color: #08715f; }
  .mobile-card-prices { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 11px; background: #edf5f5; border-radius: 5px; }
  .mobile-card-prices div:last-child { text-align: right; }
  .mobile-card-prices span, .mobile-card-prices b { display: block; }
  .mobile-card-prices span { color: #71818b; font-size: 10px; }
  .mobile-card-prices b { margin-top: 3px; font-size: 17px; }
  .mobile-card-prices b.down { color: #a54838; }
  .mobile-card-prices b.up { color: #08715f; }
  .mobile-card-prices > svg { width: 17px; height: 17px; color: #71818b; }
  .floor-alert { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding: 8px 9px; color: #923c34; background: #ffebe9; border: 1px solid #f5c9c4; border-radius: 5px; font-size: 10px; line-height: 1.45; }
  .floor-alert svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
  .mobile-forecast-card > p { margin: 10px 0 0; color: #53646e; font-size: 11px; line-height: 1.55; }
  .mobile-confidence { display: block; margin-top: 5px; color: #89959c; font-size: 9px; line-height: 1.4; }
  .mobile-empty { padding: 30px 12px; color: #71818b; text-align: center; }
}

@media (max-width: 420px) {
  .visual-status-band { min-height: 390px; padding: 18px; }
  .source-status-grid b { font-size: 12px; }
  .forecast-filter { grid-template-columns: 1fr; }
  .forecast-filter .room-filter, .forecast-filter .period-stamp { grid-column: 1; }
  .forecast-kpis { grid-template-columns: 1fr 1fr; }
}