:root {
  /* Light theme (Material-ish) */
  --bg1:#f6f8fc;
  --bg2:#eef3fb;
  --card: rgba(255,255,255,0.92);
  --muted:#5b6b8a;
  --text:#16233a;
  --accent:#1a73e8; /* Google blue */
  --danger:#d93025;
  --ok:#188038;
  --radius: 16px;
  --elev1: 0 2px 8px rgba(20,35,60,0.10);
  --elev2: 0 10px 24px rgba(20,35,60,0.16);

  /* Badge colors */
  --b-yellow-bg: #fff7e6;
  --b-yellow-tx: #7a4b00;
  --b-orange-bg: #fff0e9;
  --b-orange-tx: #8a2900;
  --b-red-bg: #fdecea;
  --b-red-tx: #a50e0e;
  --b-purple-bg: #f3e8ff;
  --b-purple-tx: #5b21b6;
  --b-blue-bg: #e8f0fe;
  --b-blue-tx: #174ea6;
}

* { box-sizing: border-box; }

body {
  margin:0;
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial;
  background: linear-gradient(180deg, var(--bg1), var(--bg2) 70%);
  color: var(--text);
}

header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(20,35,60,0.08);
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(246,248,252,0.82);
  z-index: 10;
}

h1 { font-size: 18px; margin: 0 0 6px; letter-spacing: 0.2px; font-weight:700; }
.sub { color: var(--muted); font-size: 13px; }

main { padding: 20px; max-width: 1100px; margin: 0 auto; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.card {
  background: var(--card);
  border: 1px solid rgba(20,35,60,0.10);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--elev1);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev2);
  border-color: rgba(26,115,232,0.22);
}

.k { color: var(--muted); font-size: 12px; }
.v { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing:0.2px; }
.v.zero { color: rgba(91,107,138,0.65); }

.row { display:flex; gap:12px; flex-wrap:wrap; }

.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(20,35,60,0.12);
  color: var(--muted);
  background: rgba(255,255,255,0.70);
}
.pill strong { color: var(--text); font-weight:500; }
.pill.ok { border-color: rgba(24,128,56,0.25); color: var(--ok); }
.pill.fail { border-color: rgba(217,48,37,0.25); color: var(--danger); }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:18px 0 10px; flex-wrap:wrap; }

select, input {
  background: rgba(255,255,255,0.92);
  color: var(--text);
  border:  1px solid rgba(20,35,60,0.14);
  border-radius: 12px;
  padding: 9px 10px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
select:focus, input:focus {
  border-color: rgba(26,115,232,0.55);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.12);
}
input { min-width: 220px; }

.badge {
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(20,35,60,0.10);
  white-space: nowrap;
}
.b-unit { background: var(--b-yellow-bg); color: var(--b-yellow-tx); }
.b-supplier { background: var(--b-orange-bg); color: var(--b-orange-tx); }
.b-category { background: var(--b-blue-bg); color: var(--b-blue-tx); }
.b-sku { background: var(--b-red-bg); color: var(--b-red-tx); }
.b-dup { background: var(--b-purple-bg); color: var(--b-purple-tx); }

.badge.ok { background: rgba(24,128,56,0.12); color: var(--ok); border-color: rgba(24,128,56,0.22); }
.badge.fail { background: rgba(217,48,37,0.10); color: var(--danger); border-color: rgba(217,48,37,0.22); }
.badge.warn { background: rgba(122,75,0,0.10); color: #7a4b00; border-color: rgba(122,75,0,0.20); }
.badge.info { background: rgba(23,78,166,0.08); color: #174ea6; border-color: rgba(23,78,166,0.18); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid rgba(20,35,60,0.08); vertical-align:top; }
th { color:var(--muted); font-weight:500; background: rgba(246,248,252,0.92); }
tbody tr:nth-child(2n) td { background: rgba(26,115,232,0.03); }

.muted { color: var(--muted); }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.small { font-size: 12px; }

.tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0 6px; }
.tab {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,35,60,0.12);
  background: rgba(255,255,255,0.7);
  color: var(--muted);
  cursor:pointer;
  user-select:none;
}
.tab[aria-selected="true"] {
  color: var(--text);
  border-color: rgba(26,115,232,0.30);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.08);
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }