:root { font-family: system-ui, sans-serif; }
body { margin: 0; background: #f6f7f9; color: #1a1a1a; }
main { max-width: 960px; margin: 0 auto; padding: 24px; }
h1 { margin-bottom: 4px; }
.muted { color: #666; margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 12px 0; display: flex; gap: 16px; }
textarea, input[type=text] { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; }
button { padding: 8px 14px; font: inherit; cursor: pointer; margin-top: 8px; }
.summary { font-weight: 600; }
#downloads { margin: 8px 0; display: flex; gap: 8px; }
#filter-wrap { margin: 8px 0; }
#filter { width: 340px; max-width: 100%; padding: 6px 8px; font: inherit; box-sizing: border-box; }
#filter-count { margin-left: 8px; font-size: 12px; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; background: #fff; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: top; }
thead th { cursor: pointer; user-select: none; white-space: nowrap; }
thead th:hover { background: #eef1f5; }
.finding.has-tip { border-bottom: 1px dotted currentColor; cursor: help; }
.findings li.has-tip { cursor: help; }
td a { word-break: break-all; }
.warn-line { color: #b45309; font-size: 13px; margin-top: 3px; }

/* bucket columns */
tbody tr:not(.detail-row):hover td { background: #f7f9fc; }
thead th:nth-child(2), thead th:nth-child(3), thead th:nth-child(4), thead th:nth-child(5), thead th:nth-child(6),
tbody td:nth-child(2), tbody td:nth-child(3), tbody td:nth-child(4), tbody td:nth-child(5), tbody td:nth-child(6) { text-align: center; }
.page-cell .caret { color: #98a2b3; display: inline-block; width: 10px; }
.status-badge { font-size: 11px; color: #98a2b3; margin-left: 4px; }
.status-badge.bad { color: #b42318; font-weight: 600; }
.chip { display: inline-block; min-width: 26px; text-align: center; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.chip-ok { color: #15803d; background: #e7f6ec; }
.chip-bad { color: #b42318; background: #fdecea; }
.chip-warn { color: #b45309; background: #fef6e7; }
.chip-none { color: #98a2b3; background: #f2f4f7; }
.bucket-detail { margin-bottom: 10px; }
.bucket-detail h4 { margin: 0 0 4px; font-size: 13px; color: #344054; }

/* per-category checklist */
.cat-section { margin-bottom: 14px; }
.cat-section h4 { margin: 0 0 6px; font-size: 13px; color: #1a1a1a; }
.cat-count { font-weight: 400; color: #98a2b3; font-size: 12px; margin-left: 6px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { font-size: 13px; padding: 1px 0; line-height: 1.5; }
.checklist .ck-icon { display: inline-block; width: 16px; font-weight: 700; text-align: center; }
.checklist li.ck-pass { color: #344054; }
.checklist li.ck-pass .ck-icon { color: #15803d; }
.checklist li.ck-fail { color: #b42318; }
.checklist li.ck-warn { color: #b45309; }
.checklist li.ck-na { color: #98a2b3; }
.ck-detail { color: #667085; font-size: 12px; }
details.raw { margin-top: 6px; }
details.raw summary { cursor: pointer; color: #1558d6; font-size: 12px; user-select: none; }

/* on-demand social share-card preview */
details.preview { margin: 2px 0 10px; }
details.preview summary { cursor: pointer; color: #1558d6; font-size: 12px; user-select: none; }
.og-card { max-width: 480px; border: 1px solid #e4e7ec; border-radius: 8px; overflow: hidden; margin: 8px 0; background: #fff; }
.og-img { display: block; width: 100%; max-height: 250px; object-fit: cover; background: #f2f4f7; }
.og-img-none { display: flex; align-items: center; justify-content: center; height: 110px; color: #98a2b3; font-size: 13px; }
.og-card-body { padding: 8px 12px; }
.og-card-site { font-size: 11px; color: #98a2b3; text-transform: uppercase; letter-spacing: .02em; }
.og-card-title { font-weight: 600; font-size: 14px; color: #1a1a1a; }
.og-card-desc { font-size: 13px; color: #475467; margin-top: 2px; }
.checklist.values li { color: #344054; }

.schema-toggle { background: none; border: 0; color: #1558d6; cursor: pointer; padding: 0; margin: 0; font: inherit; white-space: nowrap; }
tr.detail-row > td { background: #fafbfc; padding: 0; }
.detail { padding: 10px 14px; }
.detail .block { margin-bottom: 12px; }
.detail strong { font-size: 13px; }
.detail pre { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 12px; max-height: 320px; overflow-y: auto; margin: 6px 0; }
.rrt { margin-left: 8px; font-size: 12px; color: #1558d6; white-space: nowrap; }
.findings { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.findings li.error { color: #b42318; }
.findings li.warning { color: #b45309; }
.ok-line { color: #15803d; margin: 4px 0; font-size: 13px; }
.detail .note { font-size: 12px; color: #666; }
.ext-links { font-size: 12px; margin: 0 0 6px; color: #667085; }
.ext-links a { margin: 0 4px; color: #1558d6; white-space: nowrap; }
.version { margin-top: 28px; color: #b6b9be; font-size: 11px; }

/* image-sizes toggle */
.opt { display: inline-block; margin-left: 12px; font-size: 13px; color: #344054; user-select: none; }
.opt .muted { font-size: 12px; }

/* performance: image-weight table + image lists */
.imgtable { width: auto; min-width: 260px; margin: 6px 0 2px; background: #fff; }
.imgtable th, .imgtable td { font-size: 12px; padding: 3px 10px; border-bottom: 1px solid #eee; }
.imgtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.img-cap { font-size: 12px; color: #98a2b3; margin: 2px 0 8px; }
.img-note { font-size: 11px; color: #98a2b3; margin-top: 8px; }
details.imglist { margin: 4px 0; }
details.imglist > summary { cursor: pointer; color: #1558d6; font-size: 12px; user-select: none; }
details.imgrow { margin: 2px 0 2px 14px; }
details.imgrow > summary { cursor: pointer; font-size: 12px; line-height: 1.7; list-style: none; }
details.imgrow > summary::-webkit-details-marker { display: none; }
.img-size { display: inline-block; min-width: 64px; font-variant-numeric: tabular-nums; color: #475467; }
.img-size.over { color: #b42318; font-weight: 600; }
.img-fmt { color: #98a2b3; }
.img-name { color: #344054; word-break: break-all; }
.grp { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 600; }
.grp-cdn { color: #15803d; background: #e7f6ec; }
.grp-site { color: #b45309; background: #fef6e7; }
.grp-thirdparty { color: #6941c6; background: #f4f0fe; }
.img-detail { margin: 2px 0 6px 18px; font-size: 12px; }
.img-detail a { color: #1558d6; word-break: break-all; }
.img-dims { color: #667085; margin-top: 2px; }
.img-thumb { display: block; max-width: 220px; max-height: 140px; margin: 6px 0; border: 1px solid #e4e7ec; border-radius: 6px; background: #f2f4f7; }