:root {
  --owner-accent: #84f4c1;
  --owner-accent-soft: rgba(132, 244, 193, 0.2);
  --owner-focus: #ffd782;
}

body {
  line-height: 1.5;
}

.shell {
  width: min(1260px, 95vw);
  gap: 18px;
}

.top,
.panel {
  border-color: rgba(150, 196, 255, 0.34);
}

.top {
  padding: 28px;
}

.top h1 {
  letter-spacing: 0.01em;
}

.subtitle {
  max-width: 78ch;
  color: #dce7ff;
}

.panel {
  padding: 24px;
}

.recommendation-bar {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  overflow: visible;
}

.recommendation-pill-card {
  min-width: 0;
  background: linear-gradient(145deg, rgba(21, 33, 51, 0.95), rgba(14, 25, 40, 0.95));
}

.recommendation-pill-card .kicker {
  color: #a8c3f5;
}

#top-metric-driver {
  color: var(--owner-accent);
}

.score {
  font-size: clamp(1.9rem, 3.4vw, 2.45rem);
}

.profit-grid,
.profit-windows-grid,
.map-grid,
.relocation-grid,
.forecast-grid,
.county-grid,
.content-grid {
  margin-top: 14px;
}

.subpanel h3 {
  font-size: 1.14rem;
  margin-bottom: 8px;
}

.muted {
  color: #c4d5f4;
}

.driver-playbook-card,
.model-recommendation-card,
.owner-side-panel {
  border-color: rgba(160, 197, 255, 0.34);
}

.driver-playbook-card {
  background: rgba(20, 35, 54, 0.88);
}

.driver-plan-point strong {
  color: var(--owner-focus);
}

.stat {
  padding: 14px;
}

.stat .kicker {
  color: #9ab8ec;
}

.table-wrap {
  border: 1px solid rgba(147, 184, 239, 0.28);
  border-radius: 12px;
  overflow: auto;
}

table {
  min-width: 100%;
}

th,
td {
  padding: 10px 12px;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15, 26, 42, 0.98);
  color: #d8e7ff;
}

tbody tr:nth-child(even) {
  background: rgba(141, 185, 247, 0.05);
}

.provider-status.live {
  color: var(--owner-accent);
}

.recommended-model-pill {
  background: var(--owner-accent-soft);
  border: 1px solid rgba(132, 244, 193, 0.5);
  color: var(--owner-accent);
}

.zone-item {
  border-color: rgba(150, 190, 250, 0.38);
}

.relocation-positive {
  color: var(--owner-accent);
  font-weight: 700;
}

@media (max-width: 920px) {
  .top {
    padding: 20px;
  }

  .panel {
    padding: 16px;
  }

  th,
  td {
    padding: 9px 10px;
    font-size: 0.88rem;
  }
}