.kar-wrap {
  --bg: #0b1020;
  --ink: #ecf1ff;
  --muted: #9fb0d4;
  --line: #283968;
  --card: #151f3e;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 5% -10%, #16316f 0%, transparent 60%),
    radial-gradient(900px 420px at 95% 0%, #064e3b 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), #080d1a);
  border-radius: 16px;
  padding: 14px;
}
.kar-top h2 { margin: 0; color: var(--ink); }
.kar-sub { color: var(--muted); margin-top: 4px; font-size: 13px; }
.kar-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.kar-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kar-table th, .kar-table td { padding: 8px; border-bottom: 1px solid #21315a; text-align: left; color: var(--ink); }
.kar-table th { color: #b8c8ea; }
.kar-link { color: #93c5fd; text-decoration: none; }
.kar-link:hover { text-decoration: underline; }
.kar-pill {
  display: inline-block;
  min-width: 44px;
  border-radius: 999px;
  padding: 2px 8px;
  text-align: center;
  font-weight: 700;
}
.kar-good { background: rgba(22,163,74,.2); color: #86efac; }
.kar-warn { background: rgba(217,119,6,.2); color: #fcd34d; }
.kar-bad { background: rgba(220,38,38,.2); color: #fca5a5; }
.kar-grid { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(100px,1fr)); }
.kar-grid .k { color: var(--muted); font-size: 12px; }
.kar-grid .v { font-size: 22px; }
.kar-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); font-size: 12px; line-height: 1.5; }
.kar-catgrid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(200px, 1fr)); }
.kar-catgrid h4 { margin: 0 0 6px; color: #dbe8ff; }
.kar-catgrid ul { margin: 0 0 0 18px; color: var(--muted); }
.kar-row { display: flex; gap: 8px; margin-top: 12px; }
.kar-btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f1a36;
  color: var(--ink);
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 900px) {
  .kar-grid { grid-template-columns: repeat(3, minmax(100px,1fr)); }
  .kar-catgrid { grid-template-columns: 1fr; }
}