:root {
  --brand-ink: #17324d;
  --brand-accent: #0b8f8c;
  --brand-blue: #2d6a9f;
  --brand-soft: #edf6f8;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
}

.md-header {
  background: linear-gradient(120deg, #17324d, #0b8f8c);
}

.md-tabs {
  background: #17324d;
}

.hero-note {
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(11, 143, 140, 0.08), rgba(23, 50, 77, 0.05));
  border: 1px solid #d8e8ed;
  margin: 18px 0 22px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}

.kpi-card {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, #ffffff, #f4fbfc);
  border: 1px solid #d9ebef;
}

.kpi-card strong {
  display: block;
  font-size: 1.35rem;
  color: var(--brand-ink);
}

.kpi-card span {
  color: #5d6b78;
  font-size: 0.85rem;
}

.status-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e6f5f7;
  color: #0b2239;
  font-weight: 700;
  font-size: 0.78rem;
}