:root {
  color-scheme: light;
  --navy: #012650;
  --navy-2: #0a376e;
  --pink: #df61aa;
  --purple: #8130f1;
  --gold: #eac632;
  --ink: #142033;
  --muted: #5d6b80;
  --line: #e2e8f1;
  --paper: #f4f7fb;
  --card: #ffffff;
  font-family: "IBM Plex Sans", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
.mast {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: 22px 28px;
  background: var(--navy);
  color: white;
}
.product { margin: 0; letter-spacing: 0.14em; font-size: 12px; color: var(--pink); }
h1 { margin: 4px 0; font-size: 28px; }
.source { margin: 0; color: rgba(255,255,255,0.72); font-size: 13px; max-width: 720px; }
.mast-actions { display: flex; gap: 12px; align-items: end; }
.search { display: grid; gap: 4px; font-size: 12px; color: rgba(255,255,255,0.75); }
.search input, button {
  font: inherit;
  border-radius: 999px;
  border: 0;
  padding: 10px 14px;
}
.search input { min-width: 280px; }
button { background: var(--pink); color: white; font-weight: 600; cursor: pointer; }
button.ghost { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.35); }
button:disabled { opacity: 0.6; cursor: wait; }
button.active, .chip.active { background: var(--purple); }
main { padding: 22px 28px 48px; display: grid; gap: 18px; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.kpis.inner { padding: 0 14px 8px; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 0 14px 8px; }
.mod { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mod strong { display: block; font-size: 14px; }
.mod span { color: var(--muted); font-size: 12px; }
.mod.up { border-color: #b7e4c7; }
.mod.down { border-color: #f3c1c7; }
.mod.off { border-color: #e2e8f1; }
.kpi, .panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.kpi { padding: 14px 16px; }
.kpi span, .kpi em { display: block; color: var(--muted); font-style: normal; font-size: 12px; }
.kpi strong { display: block; font-size: 26px; margin: 4px 0; }
.split { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 18px; }
.panel { padding: 8px 8px 16px; }
.panel-head { padding: 12px 14px 6px; }
.panel-head h2 { margin: 0; font-size: 18px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 52px; gap: 10px; align-items: center; padding: 6px 14px; font-size: 13px; }
.track { height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; display: flex; }
.seg { height: 100%; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px 0; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat strong { display: block; font-size: 20px; }
.stat span { color: var(--muted); font-size: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.chip { background: #e8eef6; color: var(--navy); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: white; }
tr.clickable { cursor: pointer; }
tr.clickable:hover, tr.selected { background: #f7f4ff; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.pill.C { background: #e5f6ec; color: #157a45; }
.pill.E { background: #efe7ff; color: #5b21b6; }
.pill.S { background: #fff6d6; color: #8a6910; }
.pill.M { background: #fde7f3; color: #a1266b; }
.pill.D, .pill.X { background: #fde8ea; color: #a12638; }
.pill.O { background: #eef2f6; color: #445066; }
.pill.gar { background: #fff6d6; color: #8a6910; }
.pill.Verified, .pill.built { background: #e5f6ec; color: #157a45; }
.pill.Discovery, .pill.partial { background: #efe7ff; color: #5b21b6; }
.pill.Passing { background: #e5f6ec; color: #157a45; }
.pill.Mapped { background: #e5f6ec; color: #157a45; }
.mono { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.item { max-width: 520px; }
@media (max-width: 1100px) {
  .kpis, .split { grid-template-columns: 1fr; }
  .mast { flex-direction: column; align-items: start; }
}