.type-row { --type-bg: #f8fafc; --type-hover: #f1f5f9; --type-accent: #64748b; }
.type-mscs { --type-bg: #f0f7ff; --type-hover: #e6f1fc; --type-accent: #4d82b8; }
.type-pts  { --type-bg: #f7f3fc; --type-hover: #efe8f8; --type-accent: #8065a8; }
.type-mnp  { --type-bg: #eef9f7; --type-hover: #e2f3ef; --type-accent: #438f80; }
.type-mgw  { --type-bg: #fff8ec; --type-hover: #f9efd9; --type-accent: #ad7c35; }
.type-mme  { --type-bg: #fdf3f5; --type-hover: #f8e8ec; --type-accent: #a76170; }

.type-row td { background: var(--type-bg); }
.type-row:hover td { background: var(--type-hover); }
.type-row td:first-child { border-left: 4px solid var(--type-accent); }
.type-pill {
  display: inline-block;
  min-width: 48px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--type-accent) 30%, transparent);
  border-radius: 99px;
  color: var(--type-accent);
  background: color-mix(in srgb, var(--type-accent) 8%, white);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}