:root { --ink:#12161c; --soft:#5b6673; --faint:#8a95a3; --line:#e2e7ee; --bg:#eef1f5; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; padding:30px 26px 70px; }
.wrap { max-width:1180px; margin:0 auto; }
h1 { font-size:23px; letter-spacing:-.01em; }
h1 small { display:block; font-size:13px; color:var(--soft); font-weight:400; margin-top:6px; word-break:break-all; }
.tally { display:flex; gap:8px; margin:18px 0 26px; }
.tally span { border-radius:999px; padding:5px 13px; font-size:12.5px; font-weight:600; }
.tally .ok { background:#dcf5e6; color:#15703c; } .tally .warn { background:#fdf0d5; color:#8a6100; } .tally .fail { background:#fde3e3; color:#a11b1b; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:22px; }
body.compare .grid { grid-template-columns:1fr; gap:30px; }
.slot > h2 { display:flex; align-items:center; gap:7px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:9px; }
.slot > h2 .brand { width:15px; height:15px; flex:none; object-fit:contain; }
.c { border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.c img { display:block; width:100%; aspect-ratio:1.91/1; object-fit:cover; }
.noimg { display:grid; place-items:center; aspect-ratio:1.91/1; background:#dfe4ea; color:#7a8494; font-size:13px; }
.c .b { padding:11px 13px; }
.c b { display:block; font-size:15px; line-height:1.3; }
.c p { font-size:13px; color:var(--soft); margin-top:4px; }
.dom { display:block; font-size:11.5px; color:var(--faint); }
.fb .b { background:#f2f3f5; } .fb .dom { text-transform:uppercase; margin-bottom:3px; } .fb p { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.x { border-radius:16px; } .x .dom { margin-top:5px; }
.wa { border-radius:8px; background:#dcf8c6; } .wa .b { background:#dcf8c6; }
.tg { border-left:3px solid #2f9fe3; background:#fff; } .tg .b { padding-bottom:8px; } .tg img { border-radius:8px; margin:0 13px 13px; width:calc(100% - 26px); }
.dc { background:#2b2d31; border-color:#1f2124; } .dc b { color:#00a8fc; } .dc p { color:#dbdee1; } .dc .dom { color:#b5bac1; margin-bottom:5px; } .dc img { border-radius:8px; margin-top:10px; }
.li .b { padding:13px; } .li .dom { margin-top:5px; }
.sl { display:flex; background:#fff; } .sl .bar { width:4px; background:#dddddd; flex:none; } .sl .b { padding:12px 14px; } .sl b { color:#1264a3; } .sl .dom { margin-bottom:4px; font-weight:600; color:#616061; } .sl img { border-radius:8px; margin-top:10px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-top:34px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); padding:11px 14px; background:#f7f9fb; }
td { padding:10px 14px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:top; }
td.k { font-weight:600; white-space:nowrap; } td.d { color:var(--soft); word-break:break-word; }
td.lvl { width:58px; } td.lvl span { display:inline-block; border-radius:5px; padding:2px 7px; font-size:11px; font-weight:700; text-transform:uppercase; }
tr.ok .lvl span { background:#dcf5e6; color:#15703c; } tr.warn .lvl span { background:#fdf0d5; color:#8a6100; } tr.fail .lvl span { background:#fde3e3; color:#a11b1b; }
footer { margin-top:26px; font-size:12.5px; color:var(--faint); }
form { display:flex; gap:9px; margin:16px 0 8px; }
#u { flex:1; min-width:0; padding:11px 14px; font-size:14.5px; line-height:1.5; font-family:inherit; resize:vertical; border:1px solid #d3dae3; border-radius:9px; background:#fff; color:var(--ink); }
#u:focus { outline:none; border-color:#0b72e7; box-shadow:0 0 0 3px rgba(11,114,231,.14); }
button { padding:11px 20px; font-size:14px; font-weight:650; border:0; border-radius:9px; background:#12161c; color:#fff; cursor:pointer; }
button:hover { background:#2b3440; }
#status { display:block; font-size:12.5px; color:var(--faint); min-height:18px; margin-bottom:14px; }
body[data-state=loading] #grid, body[data-state=loading] #audit { opacity:.35; transition:opacity .2s; }
body[data-state=error] #status { color:#a11b1b; }
#audit:empty, #tally:empty { display:none; }

.lane { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:16px; align-items:start; }
.pane { min-width:0; }
.who { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--soft); margin-bottom:7px; font-weight:600; word-break:break-all; }
.dot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.d0 { background:#0b72e7; } .d1 { background:#e0761f; } .d2 { background:#12a150; } .d3 { background:#8b46d6; } .d4 { background:#d63b5e; }
.tally { flex-wrap:wrap; }
.sum { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 13px; font-size:12.5px; }
.sum b { font-weight:650; } .sum em { font-style:normal; font-weight:700; border-radius:5px; padding:1px 6px; font-size:11.5px; }
.sum em.ok { background:#dcf5e6; color:#15703c; } .sum em.warn { background:#fdf0d5; color:#8a6100; } .sum em.fail { background:#fde3e3; color:#a11b1b; }
#audit th .dot { margin-right:6px; }
td.d .pip { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; vertical-align:middle; }
.pip.ok { background:#15703c; } .pip.warn { background:#c98a00; } .pip.fail { background:#a11b1b; }
td.d.fail { color:#a11b1b; } td.d.muted { color:var(--faint); }
@media (max-width:900px) { .lane { grid-template-columns:1fr; } }