:root {
  --navy-950: #111b19;
  --navy-900: #111b19;
  --navy-800: #20332f;
  --navy-700: #36534c;
  --teal-700: #05645f;
  --teal-600: #087e78;
  --teal-500: #15998d;
  --teal-300: #d8f35c;
  --teal-100: #dff5ef;
  --teal-50: #eef9f5;
  --blue-50: #f7f7f2;
  --blue-100: #eff8bf;
  --amber-100: #eff8bf;
  --amber-700: #59651b;
  --slate-950: #111b19;
  --slate-800: #2d3e3a;
  --slate-700: #495955;
  --slate-600: #5f6c69;
  --slate-500: #74807c;
  --slate-400: #929c98;
  --slate-300: #cbd3cc;
  --slate-200: #dfe4df;
  --slate-100: #f0f3ef;
  --shadow-card: 0 14px 42px rgba(17, 27, 25, 0.055);
}

body {
  background:
    radial-gradient(circle at 93% 1%, rgba(216, 243, 92, 0.16), transparent 27rem),
    radial-gradient(circle at 5% 30%, rgba(8, 126, 120, 0.055), transparent 26rem),
    var(--blue-50);
}

.skip-link {
  border-radius: 7px;
  background: var(--navy-900);
}

.topbar {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  min-height: 82px;
  border-bottom-color: var(--slate-200);
  background: rgba(247, 247, 242, 0.91);
  box-shadow: none;
}

.brand {
  gap: 11px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #d8f35c;
  box-shadow: none;
  font-size: 0.68rem;
}

.brand-copy strong {
  font-size: 0.9rem;
  letter-spacing: -0.015em;
}

.brand-copy small {
  color: var(--slate-400);
  font-size: 0.66rem;
}

.topnav a {
  color: var(--slate-600);
}

.dashboard-hero {
  padding-top: clamp(54px, 7vw, 96px);
  padding-bottom: clamp(38px, 5vw, 66px);
}

.eyebrow,
.panel-kicker,
.chart-eyebrow {
  color: var(--teal-600);
}

h1 {
  max-width: 920px;
  margin-bottom: 20px;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.hero-copy {
  max-width: 780px;
  color: var(--slate-600);
}

.hero-meta > span {
  border-color: var(--slate-200);
  color: var(--slate-600);
  background: rgba(255, 255, 255, 0.74);
}

.hero-meta .status-pill {
  border-color: transparent;
  color: var(--teal-700);
  background: var(--teal-100);
}

.status-pill i {
  background: #16a275;
}

.dashboard-layout {
  gap: 18px;
}

.filter-panel,
.kpi-section,
.chart-section,
.methodology,
.chart-card {
  border-color: var(--slate-200);
  background: var(--white);
  box-shadow: none;
}

.filter-panel {
  top: 104px;
  border-radius: 18px;
}

.field select {
  border-color: var(--slate-300);
  border-radius: 10px;
  background: #fbfbf7;
}

.field select:focus-visible,
.button:focus-visible,
.chart-actions button:focus-visible,
.icon-button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline-color: var(--teal-700);
}

.button,
.chart-actions button,
.icon-button {
  border-radius: 10px;
}

.button {
  color: var(--navy-900);
  background: var(--slate-100);
}

.button:hover {
  background: var(--slate-200);
}

.button-primary {
  color: var(--white);
  background: var(--teal-600);
}

.button-primary:hover {
  background: var(--teal-700);
}

.button-quiet {
  border-color: var(--slate-200);
  color: var(--slate-700);
  background: var(--white);
}

.filter-note {
  border-radius: 12px;
  background: var(--teal-100);
}

.kpi-section,
.chart-section,
.methodology {
  border-radius: 18px;
}

.kpi-card {
  border-color: var(--slate-200);
  border-radius: 14px;
  background: #fbfbf7;
}

.kpi-card:nth-child(even) {
  background: #fcfdeb;
}

.kpi-card::after {
  height: 5px;
  background: var(--teal-500);
}

.kpi-card:nth-child(even)::after {
  background: #d8f35c;
}

.insights-panel {
  border: 1px solid var(--slate-200);
  color: var(--navy-950);
  background: linear-gradient(125deg, var(--teal-100), #ffffff 48%, var(--amber-100));
  box-shadow: none;
}

.insights-panel .panel-kicker {
  color: var(--teal-700);
}

.insights-panel h2 {
  color: var(--navy-950);
}

.insight-icon {
  border-color: rgba(89, 101, 27, 0.12);
  color: #536015;
  background: #d8f35c;
}

.insight-list p {
  border-left-color: var(--teal-500);
  color: var(--slate-700);
}

.chart-card {
  border-radius: 15px;
  background: var(--white);
}

.chart-actions button {
  border-color: var(--slate-200);
  color: var(--slate-600);
  background: #fbfbf7;
}

.chart-actions button:hover {
  border-color: #b8e0d8;
  color: var(--teal-700);
  background: var(--teal-50);
}

.data-details,
.source-details {
  border-top-color: var(--slate-200);
}

.table-wrap th {
  background: var(--slate-100);
}

.calculation-note {
  background: var(--slate-100);
}

.method-grid article {
  border-color: var(--slate-200);
  border-radius: 14px;
  background: #fbfbf7;
}

.method-grid article:nth-child(2) {
  background: #fcfdeb;
}

.analyst-cta {
  border: 1px solid var(--slate-200);
  background: linear-gradient(125deg, var(--teal-100), var(--amber-100));
}

.footer {
  width: min(100%, var(--content-width));
  min-height: 86px;
  margin-inline: auto;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-500);
  background: transparent;
}

.footer a {
  color: var(--navy-900);
}

.chart-dialog {
  border: 1px solid var(--slate-200);
  background: var(--white);
  box-shadow: 0 30px 90px rgba(17, 27, 25, 0.24);
}

.chart-dialog::backdrop {
  background: rgba(17, 27, 25, 0.65);
}

@media (max-width: 900px) {
  .filter-panel {
    top: 0;
    border-radius: 0 18px 18px 0;
  }

  .filter-scrim {
    background: rgba(17, 27, 25, 0.58);
  }
}

@media (max-width: 720px) {
  .topbar {
    min-height: 72px;
  }

  .dashboard-hero {
    padding-top: 44px;
  }

  h1 {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }
}