:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1d2733;
  --muted: #5d6b7a;
  --ok: #1a7f37;
  --ko: #c62828;
  --border: #dde3e9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 16px;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

h1 { margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 28px 0 8px; }
.sub { color: var(--muted); margin: 0 0 16px; }

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.checks { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.checks li {
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
}
.checks li.ok { background: var(--ok); }
.checks li.ok::before { content: "✓ "; }
.checks li.ko { background: var(--ko); }
.checks li.ko::before { content: "✗ "; }

/* Se il CSS è caricato, il badge CSS diventa verde */
#chk-css { background: var(--ok); }
#chk-css::before { content: "✓ "; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { width: 35%; color: var(--muted); font-weight: 500; }
td { word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; }