/* ============================================================
   GPUS-IT Infrastructure Portal — Custom Theme
   Matches status site aesthetic: infra.greenpeace.us
   v1.0 · 2026-03-14
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Palette variables ── */
:root {
  --bg:          #0d0e12;
  --bg2:         #13141a;
  --bg3:         #1a1b23;
  --card:        #1e1f2b;
  --card2:       #252738;
  --bdr:         #2a2c3e;
  --bdr2:        #363854;
  --tx1:         #e8eaf0;
  --tx2:         #9094a6;
  --tx3:         #5c6078;
  --accent:      #7c5cfc;
  --accent2:     #9b7dff;
  --accent-bg:   rgba(124,92,252,.08);
  --accent-bdr:  rgba(124,92,252,.2);
  --gn:          #34d399;
  --gn-bg:       rgba(52,211,153,.08);
  --gn-bdr:      rgba(52,211,153,.2);
  --bl:          #60a5fa;
  --bl-bg:       rgba(96,165,250,.08);
  --bl-bdr:      rgba(96,165,250,.2);
  --or:          #fb923c;
  --or-bg:       rgba(251,146,60,.08);
  --rd:          #f87171;
  --rd-bg:       rgba(248,113,113,.08);
  --rd-bdr:      rgba(248,113,113,.2);
  --yw:          #fbbf24;
  --cy:          #22d3ee;
}

/* ── Base typography & background ── */
body,
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-default-bg-color:        var(--bg);
  --md-default-fg-color:        var(--tx1);
  --md-default-fg-color--light: var(--tx2);
  --md-default-fg-color--lighter: var(--tx3);
  --md-primary-fg-color:        var(--accent);
  --md-primary-bg-color:        var(--bg2);
  --md-accent-fg-color:         var(--accent2);
  --md-code-bg-color:           var(--bg3);
  --md-code-fg-color:           var(--tx1);
  --md-typeset-color:           var(--tx1);
  --md-typeset-a-color:         var(--accent2);
  font-family: 'DM Sans', sans-serif !important;
}

body { background: var(--bg) !important; }

/* ── Header ── */
.md-header {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--bdr) !important;
  box-shadow: none !important;
}
.md-header__title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--tx1) !important;
  letter-spacing: 0.2px;
}
.md-header__button.md-logo { padding: 4px; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { width: 24px; height: 24px; }

/* ── Search ── */
.md-search__form {
  background: var(--bg3) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.md-search__form:focus-within {
  border-color: var(--accent-bdr) !important;
  background: var(--bg3) !important;
}
.md-search__input { font-family: 'DM Sans', sans-serif !important; color: var(--tx1) !important; }
.md-search__input::placeholder { color: var(--tx3) !important; }
.md-search__output { background: var(--card) !important; border: 1px solid var(--bdr) !important; border-radius: 8px !important; }
.md-search-result__meta { background: var(--bg3) !important; color: var(--tx3) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; }
.md-search-result__link:hover .md-search-result__article,
.md-search-result__link:focus .md-search-result__article { background: var(--bg3) !important; }
.md-search-result__title { color: var(--tx1) !important; }
.md-search-result__teaser { color: var(--tx2) !important; }

/* ── Navigation tabs ── */
.md-tabs {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--bdr) !important;
}
.md-tabs__link,
.md-tabs__item .md-tabs__link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tx3) !important;
  opacity: 1 !important;
  letter-spacing: 0.3px;
  transition: color 0.15s;
}
.md-tabs__link:hover,
.md-tabs__item .md-tabs__link:hover { color: var(--tx1) !important; }
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link,
.md-tabs__item--active > .md-tabs__link {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 600 !important;
}
[data-md-state="active"] .md-tabs__link { color: var(--accent) !important; }

/* ── Sidebar / Nav ── */
.md-sidebar { background: var(--bg2) !important; }
.md-sidebar__scrollwrap { border-right: 1px solid var(--bdr); }
.md-nav { font-family: 'DM Sans', sans-serif !important; }
.md-nav__title {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--tx3) !important;
  background: transparent !important;
  padding: 10px 12px 4px !important;
}
.md-nav__item .md-nav__link {
  font-size: 11px !important;
  color: var(--tx2) !important;
  padding: 4px 12px !important;
  border-radius: 4px;
  transition: color 0.15s;
}
.md-nav__item .md-nav__link:hover { color: var(--tx1) !important; }
.md-nav__item .md-nav__link--active {
  color: var(--accent) !important;
  background: var(--accent-bg) !important;
  font-weight: 500 !important;
}
.md-nav__item--nested > .md-nav__link { color: var(--tx3) !important; font-size: 10px !important; }

/* ── Main content area ── */
.md-main { background: var(--bg) !important; }
.md-content { background: var(--bg) !important; }
.md-typeset { color: var(--tx2) !important; font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; line-height: 1.7 !important; }

/* ── Headings ── */
.md-typeset h1 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--tx1) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}
.md-typeset h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--tx1) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding-bottom: 6px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-typeset h2::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
.md-typeset h3 { font-size: 14px !important; font-weight: 600 !important; color: var(--tx1) !important; }
.md-typeset h4 { font-size: 12px !important; font-weight: 600 !important; color: var(--tx2) !important; text-transform: uppercase; letter-spacing: 0.8px; }

/* ── Links ── */
.md-typeset a { color: var(--accent2) !important; text-decoration: none !important; }
.md-typeset a:hover { color: var(--accent) !important; text-decoration: underline !important; }

/* ── Code ── */
.md-typeset code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  background: var(--bg3) !important;
  color: var(--bl) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}
.md-typeset pre {
  background: var(--bg3) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
}
.md-typeset pre code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
  color: var(--tx1) !important;
  padding: 0 !important;
}
.md-typeset .highlight { background: var(--bg3) !important; border-radius: 8px !important; }
.md-typeset .highlight pre { margin: 0 !important; }
.md-clipboard { color: var(--tx3) !important; }
.md-clipboard:hover { color: var(--accent) !important; }

/* ── Tables ── */
.md-typeset table:not([class]) {
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12px !important;
}
.md-typeset table:not([class]) th {
  background: var(--bg3) !important;
  color: var(--tx3) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: 7px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.md-typeset table:not([class]) td {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  padding: 7px 12px !important;
  color: var(--tx2) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}
.md-typeset table:not([class]) tr:hover td { background: rgba(255,255,255,.015) !important; }
.md-typeset table:not([class]) tr:last-child td { border-bottom: none !important; }

/* ── Admonitions ── */
.md-typeset .admonition,
.md-typeset details {
  background: var(--card) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--bg3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-radius: 7px 7px 0 0 !important;
  padding: 8px 12px !important;
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary { border-left: 3px solid var(--bl) !important; color: var(--bl) !important; }
.md-typeset .warning > .admonition-title { border-left: 3px solid var(--or) !important; color: var(--or) !important; }
.md-typeset .danger > .admonition-title  { border-left: 3px solid var(--rd) !important; color: var(--rd) !important; }
.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title { border-left: 3px solid var(--gn) !important; color: var(--gn) !important; }
.md-typeset .info > .admonition-title    { border-left: 3px solid var(--accent) !important; color: var(--accent) !important; }

/* ── Footer ── */
.md-footer {
  background: var(--bg2) !important;
  border-top: 1px solid var(--bdr) !important;
}
.md-footer-meta { background: var(--bg2) !important; }
.md-footer__link { color: var(--tx3) !important; font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; }
.md-footer__link:hover { color: var(--accent) !important; }
.md-footer-copyright { color: var(--tx3) !important; font-size: 10px !important; }

/* ── TOC (right sidebar) ── */
.md-nav--secondary .md-nav__title { color: var(--tx3) !important; }
.md-nav--secondary .md-nav__link { font-size: 11px !important; color: var(--tx3) !important; }
.md-nav--secondary .md-nav__link:hover { color: var(--tx1) !important; }
.md-nav--secondary .md-nav__link--active { color: var(--accent) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx3); }

/* ── Back to top button ── */
.md-top { background: var(--card) !important; color: var(--accent) !important; border: 1px solid var(--bdr) !important; box-shadow: none !important; }

/* ── Breadcrumb ── */
.md-path { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; color: var(--tx3) !important; }
.md-path__item a { color: var(--tx3) !important; }
.md-path__item--active { color: var(--accent) !important; }

/* ── Tag badges / version labels ── */
.md-typeset .md-tag {
  background: var(--accent-bg) !important;
  color: var(--accent2) !important;
  border: 1px solid var(--accent-bdr) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  border-radius: 4px !important;
}

/* ── Version/status badge in content ── */
.md-typeset strong { color: var(--tx1) !important; }
.md-typeset em { color: var(--tx2) !important; }

/* ── Horizontal rule ── */
.md-typeset hr { border-color: var(--bdr) !important; }

/* ── Blockquote ── */
.md-typeset blockquote {
  border-left: 3px solid var(--accent) !important;
  background: var(--accent-bg) !important;
  border-radius: 0 6px 6px 0 !important;
  color: var(--tx2) !important;
  padding: 8px 14px !important;
}

/* ── Lists ── */
.md-typeset ul li::marker { color: var(--accent) !important; }
.md-typeset ol li::marker { color: var(--accent) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; }

/* ── Page title meta strip ── */
.md-source { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; color: var(--tx3) !important; }

/* ── Mobile hamburger ── */
.md-header__button { color: var(--tx2) !important; }
.md-header__button:hover { color: var(--tx1) !important; }

/* ============================================================
   GPUS-IT Color System — Badges, Banners, Callouts
   Matches status site visual language
   v1.1 · 2026-03-14
   ============================================================ */

/* ── Classification banners ── */
.classification-confidential,
.md-typeset .classification-confidential {
  display: block;
  background: linear-gradient(90deg, rgba(248,113,113,.15), rgba(248,113,113,.05));
  border-left: 4px solid var(--rd) !important;
  border-radius: 0 6px 6px 0;
  padding: 6px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--rd) !important;
  margin-bottom: 16px;
}
.classification-internal {
  display: block;
  background: rgba(251,146,60,.08);
  border-left: 4px solid var(--or) !important;
  border-radius: 0 6px 6px 0;
  padding: 6px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--or) !important;
  margin-bottom: 16px;
}
.classification-public {
  display: block;
  background: var(--gn-bg);
  border-left: 4px solid var(--gn) !important;
  border-radius: 0 6px 6px 0;
  padding: 6px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gn) !important;
  margin-bottom: 16px;
}

/* ── Inline badge pills ── */
/* Usage in markdown: <span class="badge-red">P1</span> */
.md-typeset .badge-red,
.md-typeset .badge-green,
.md-typeset .badge-blue,
.md-typeset .badge-purple,
.md-typeset .badge-orange,
.md-typeset .badge-yellow,
.md-typeset .badge-gray,
.md-typeset .badge-cyan {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}
.md-typeset .badge-red    { background: rgba(248,113,113,.12); color: var(--rd) !important; border: 1px solid rgba(248,113,113,.25); }
.md-typeset .badge-green  { background: var(--gn-bg); color: var(--gn) !important; border: 1px solid var(--gn-bdr); }
.md-typeset .badge-blue   { background: var(--bl-bg); color: var(--bl) !important; border: 1px solid var(--bl-bdr); }
.md-typeset .badge-purple { background: var(--accent-bg); color: var(--accent2) !important; border: 1px solid var(--accent-bdr); }
.md-typeset .badge-orange { background: rgba(251,146,60,.1); color: var(--or) !important; border: 1px solid rgba(251,146,60,.25); }
.md-typeset .badge-yellow { background: rgba(251,191,36,.1); color: var(--yw) !important; border: 1px solid rgba(251,191,36,.25); }
.md-typeset .badge-gray   { background: rgba(255,255,255,.05); color: var(--tx2) !important; border: 1px solid var(--bdr); }
.md-typeset .badge-cyan   { background: rgba(34,211,238,.08); color: var(--cy) !important; border: 1px solid rgba(34,211,238,.2); }

/* ── Server name chips ── */
.md-typeset .server-sky    { display: inline-block; background: rgba(96,165,250,.1); color: var(--bl) !important; border: 1px solid var(--bl-bdr); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.md-typeset .server-rain   { display: inline-block; background: rgba(34,211,238,.08); color: var(--cy) !important; border: 1px solid rgba(34,211,238,.2); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.md-typeset .server-sun    { display: inline-block; background: rgba(251,191,36,.1); color: var(--yw) !important; border: 1px solid rgba(251,191,36,.25); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.md-typeset .server-wind   { display: inline-block; background: rgba(52,211,153,.08); color: var(--gn) !important; border: 1px solid var(--gn-bdr); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.md-typeset .server-gcp    { display: inline-block; background: var(--accent-bg); color: var(--accent2) !important; border: 1px solid var(--accent-bdr); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* ── Status indicators ── */
.md-typeset .status-ok       { color: var(--gn) !important; font-weight: 600; }
.md-typeset .status-ok::before    { content: '✓ '; }
.md-typeset .status-warn     { color: var(--yw) !important; font-weight: 600; }
.md-typeset .status-warn::before  { content: '⚠ '; }
.md-typeset .status-crit     { color: var(--rd) !important; font-weight: 600; }
.md-typeset .status-crit::before  { content: '✗ '; }
.md-typeset .status-info     { color: var(--bl) !important; font-weight: 600; }
.md-typeset .status-info::before  { content: '● '; }

/* ── Severity row highlighting in tables ── */
.md-typeset table tr.p1 td { background: rgba(248,113,113,.06) !important; border-left: 3px solid var(--rd) !important; }
.md-typeset table tr.p2 td { background: rgba(251,146,60,.06) !important; border-left: 3px solid var(--or) !important; }
.md-typeset table tr.p3 td { background: rgba(251,191,36,.04) !important; border-left: 3px solid var(--yw) !important; }
.md-typeset table tr.p4 td { background: rgba(52,211,153,.04) !important; border-left: 3px solid var(--gn) !important; }

/* ── CIS / compliance framework tags ── */
.md-typeset .cis-tag, .md-typeset .nist-tag, .md-typeset .pci-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.md-typeset .cis-tag  { background: rgba(96,165,250,.1); color: var(--bl) !important; border: 1px solid var(--bl-bdr); }
.md-typeset .nist-tag { background: var(--accent-bg); color: var(--accent2) !important; border: 1px solid var(--accent-bdr); }
.md-typeset .pci-tag  { background: rgba(52,211,153,.08); color: var(--gn) !important; border: 1px solid var(--gn-bdr); }

/* ── IP address / hostname monospace highlight ── */
.md-typeset .ip {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--cy) !important;
  background: rgba(34,211,238,.06);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Callout cards (use with <div class="callout-X"> in md_in_html) ── */
.md-typeset .callout-red,
.md-typeset .callout-green,
.md-typeset .callout-blue,
.md-typeset .callout-purple,
.md-typeset .callout-orange {
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13px !important;
}
.md-typeset .callout-red    { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.2); }
.md-typeset .callout-green  { background: var(--gn-bg); border: 1px solid var(--gn-bdr); }
.md-typeset .callout-blue   { background: var(--bl-bg); border: 1px solid var(--bl-bdr); }
.md-typeset .callout-purple { background: var(--accent-bg); border: 1px solid var(--accent-bdr); }
.md-typeset .callout-orange { background: rgba(251,146,60,.08); border: 1px solid rgba(251,146,60,.2); }

/* ── Nav tab active — stronger override ── */
.md-tabs__item--active .md-tabs__link,
.md-tabs__item--active > .md-tabs__link,
.md-tabs__link--active,
.md-tabs__link[data-md-state="blur"],
.md-header-nav__button ~ .md-tabs .md-tabs__item--active .md-tabs__link {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.md-tabs__item--active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
  border-radius: 1px 1px 0 0;
  margin-top: -2px;
}

/* ============================================================
   GPUS-IT Status Pills — ESTABLISHED, 100%, ONLINE, etc.
   v1.2 · 2026-03-14
   ============================================================ */

/* ── Base status pill ── */
.md-typeset .st,
.md-typeset [class^="st-"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Green — operational / good / complete ── */
.md-typeset .st-green,
.md-typeset .st-ok,
.md-typeset .st-established,
.md-typeset .st-online,
.md-typeset .st-compliant,
.md-typeset .st-100,
.md-typeset .st-active,
.md-typeset .st-signed,
.md-typeset .st-enabled,
.md-typeset .st-done,
.md-typeset .st-passing,
.md-typeset .st-resolved {
  background: rgba(52,211,153,.12);
  color: #34d399 !important;
  border: 1px solid rgba(52,211,153,.3);
}
.md-typeset .st-green::before,
.md-typeset .st-ok::before,
.md-typeset .st-established::before,
.md-typeset .st-online::before,
.md-typeset .st-compliant::before,
.md-typeset .st-100::before,
.md-typeset .st-active::before,
.md-typeset .st-signed::before,
.md-typeset .st-enabled::before,
.md-typeset .st-done::before,
.md-typeset .st-passing::before,
.md-typeset .st-resolved::before { content: '●'; font-size: 8px; }

/* ── Red — down / failed / critical ── */
.md-typeset .st-red,
.md-typeset .st-down,
.md-typeset .st-failed,
.md-typeset .st-critical,
.md-typeset .st-compromised,
.md-typeset .st-disabled,
.md-typeset .st-violated,
.md-typeset .st-breach {
  background: rgba(248,113,113,.12);
  color: #f87171 !important;
  border: 1px solid rgba(248,113,113,.3);
}
.md-typeset .st-red::before,
.md-typeset .st-down::before,
.md-typeset .st-failed::before,
.md-typeset .st-critical::before,
.md-typeset .st-compromised::before,
.md-typeset .st-disabled::before,
.md-typeset .st-violated::before,
.md-typeset .st-breach::before { content: '●'; font-size: 8px; }

/* ── Yellow / amber — warning / partial / in-progress ── */
.md-typeset .st-yellow,
.md-typeset .st-warn,
.md-typeset .st-partial,
.md-typeset .st-pending,
.md-typeset .st-degraded,
.md-typeset .st-review,
.md-typeset .st-inprogress {
  background: rgba(251,191,36,.1);
  color: #fbbf24 !important;
  border: 1px solid rgba(251,191,36,.3);
}
.md-typeset .st-yellow::before,
.md-typeset .st-warn::before,
.md-typeset .st-partial::before,
.md-typeset .st-pending::before,
.md-typeset .st-degraded::before,
.md-typeset .st-review::before,
.md-typeset .st-inprogress::before { content: '●'; font-size: 8px; }

/* ── Blue — informational / synced / connected ── */
.md-typeset .st-blue,
.md-typeset .st-info,
.md-typeset .st-synced,
.md-typeset .st-connected,
.md-typeset .st-mapped,
.md-typeset .st-implemented {
  background: rgba(96,165,250,.1);
  color: #60a5fa !important;
  border: 1px solid rgba(96,165,250,.25);
}
.md-typeset .st-blue::before,
.md-typeset .st-info::before,
.md-typeset .st-synced::before,
.md-typeset .st-connected::before,
.md-typeset .st-mapped::before,
.md-typeset .st-implemented::before { content: '●'; font-size: 8px; }

/* ── Purple — planned / scheduled / future ── */
.md-typeset .st-purple,
.md-typeset .st-planned,
.md-typeset .st-scheduled,
.md-typeset .st-future {
  background: rgba(124,92,252,.1);
  color: #9b7dff !important;
  border: 1px solid rgba(124,92,252,.25);
}
.md-typeset .st-purple::before,
.md-typeset .st-planned::before,
.md-typeset .st-scheduled::before,
.md-typeset .st-future::before { content: '●'; font-size: 8px; }

/* ── Gray — not applicable / unknown / n/a ── */
.md-typeset .st-gray,
.md-typeset .st-na,
.md-typeset .st-unknown {
  background: rgba(255,255,255,.05);
  color: #9094a6 !important;
  border: 1px solid rgba(255,255,255,.1);
}
.md-typeset .st-gray::before,
.md-typeset .st-na::before,
.md-typeset .st-unknown::before { content: '●'; font-size: 8px; }

/* ── Percentage / score pills (no dot prefix) ── */
.md-typeset .pct-green { background: rgba(52,211,153,.12); color: #34d399 !important; border: 1px solid rgba(52,211,153,.3); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 700; padding: 2px 8px; border-radius: 5px; display: inline-block; vertical-align: middle; }
.md-typeset .pct-red   { background: rgba(248,113,113,.12); color: #f87171 !important; border: 1px solid rgba(248,113,113,.3); font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 700; padding: 2px 8px; border-radius: 5px; display: inline-block; vertical-align: middle; }
.md-typeset .pct-yellow{ background: rgba(251,191,36,.1);   color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.3);  font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 700; padding: 2px 8px; border-radius: 5px; display: inline-block; vertical-align: middle; }

/* ── VPN / tunnel status ── */
.md-typeset .vpn-up   { background: rgba(52,211,153,.12); color: #34d399 !important; border: 1px solid rgba(52,211,153,.3); font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; font-weight: 700; padding: 3px 8px; border-radius: 5px; display: inline-block; letter-spacing: 0.5px; }
.md-typeset .vpn-up::before { content: '⇄  '; font-size: 10px; }
.md-typeset .vpn-down { background: rgba(248,113,113,.12); color: #f87171 !important; border: 1px solid rgba(248,113,113,.3); font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; font-weight: 700; padding: 3px 8px; border-radius: 5px; display: inline-block; letter-spacing: 0.5px; }
.md-typeset .vpn-down::before { content: '✗  '; }