:root {
  --bg: #f4f5f7;
  --ink: #1a1a2e;
  --muted: #6b7280;
  --brand: #4b2fa8;
  --line: #e3e5ea;
  --panel-bg: #0f1226;
  --panel-ink: #e8e9f3;
  --ok: #1f9d55;
  --no: #d64545;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* Page header */
.page { padding-top: 32px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 30px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.02em; }
.page-desc { margin: 0; max-width: 760px; color: var(--muted); font-size: 15px; }
.page-desc strong { color: var(--ink); }

/* Ad slots (two, at the top) */
.ad-row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 32px; }
.ad-wrap { margin: 0; text-align: center; }
.ad-wrap figcaption {
  font-family: system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ad-slot {
  width: 300px;
  height: 250px;
  margin: 0 auto;
  background: #e9eaef;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-frame { border: 0; display: block; }

/* Debug panel (full-width, below the article) */
.debug {
  background: var(--panel-bg);
  color: var(--panel-ink);
  border-radius: 12px;
  padding: 20px 24px 24px;
  margin: 0 auto 48px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.debug-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-title { margin: 0 0 4px; font-size: 18px; }
.panel-sub { margin: 0; color: #b9bbd6; font-size: 12px; max-width: 640px; }
.panel-sub strong { color: #fff; }

.status { border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 14px; }
.status-waiting { background: #322a12; color: #ffd479; }
.status-ok { background: #0f2f1f; color: #7ee2a8; }
.status-error { background: #3a1414; color: #ff9a9a; }

.panel-actions { display: flex; gap: 8px; }
.panel-actions button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
}
.panel-actions button.secondary { background: #2a2e4a; }
.panel-actions button:hover { filter: brightness(1.1); }

.panel-section { border-top: 1px solid #26294a; padding-top: 12px; margin-top: 12px; }
.panel-section h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #9fa2c4; }
.signal-section .panel-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 24px; align-items: start; }

/* Two-column vendor comparison. Both cards share the parent's row tracks via
   subgrid, so corresponding sections (verdict, bits, tag, requests) line up
   across columns even when content heights differ. Each card has exactly 7
   direct children (see buildVendorCard in js/debug-panel.js) = 7 rows. */
.vendors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(7, auto);
  gap: 0 16px;
  margin-top: 16px;
}
.vendor-card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  align-content: start;
  background: #05060f;
  border: 1px solid #26294a;
  border-radius: 10px;
  padding: 14px 16px;
}
@media (max-width: 760px) {
  .vendors { grid-template-columns: 1fr; grid-template-rows: none; }
  .vendor-card { grid-row: auto; display: block; }
}
.vendor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vendor-name { font-size: 16px; font-weight: 800; }
.vendor-id { font-size: 11px; color: #9fa2c4; font-family: ui-monospace, monospace; }
.vendor-sub { color: #9fa2c4; font-size: 11px; margin: 2px 0 10px; }
.vendor-bits { margin: 10px 0; }
.vendor-tag { border-top: 1px solid #1c1f38; padding-top: 10px; margin-top: 10px; }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
/* Reserve two lines so the tag-URL box below starts at the same height in both
   columns (the GDPR_CONSENT reason wraps to 2 lines for some vendors). */
.kv-consent { min-height: 3em; align-items: flex-start; }
.kv-hot { background: #1c2140; border-radius: 6px; padding: 4px 6px; }
.kv-k { color: #b9bbd6; }
.kv-v { text-align: right; word-break: break-all; }
.kv-v.ok { color: #7ee2a8; }
.muted { color: #8a8db0; }
.err { color: #ff9a9a; }

.vendor-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-weight: 700;
}
.verdict-yes { background: rgba(31, 157, 85, 0.18); border: 1px solid var(--ok); }
.verdict-no { background: rgba(214, 69, 69, 0.18); border: 1px solid var(--no); }
.verdict-label { font-weight: 500; color: #d7d8ec; display: flex; flex-direction: column; }
.verdict-sub { font-weight: 400; font-size: 11px; color: #9fa2c4; margin-top: 2px; }
.verdict-yes .verdict-val { color: #7ee2a8; }
.verdict-no .verdict-val { color: #ff9a9a; }

.chips { margin: 10px 0; }
.chips-title { color: #9fa2c4; margin-bottom: 6px; font-size: 11px; }
.chip {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 3px 7px;
  margin: 2px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.chip-on { background: rgba(31, 157, 85, 0.25); color: #9dedbd; }
.chip-off { background: #24263f; color: #6b6e90; }
.chip-focus { outline: 2px solid #ffd479; }

.code {
  background: #05060f;
  border: 1px solid #26294a;
  border-radius: 8px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 6px;
  max-height: 180px;
  overflow: auto;
}

.req-log { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.req {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  padding: 6px 0;
  border-bottom: 1px solid #1c1f38;
  font-size: 11px;
}
.req-method {
  grid-row: span 2;
  align-self: start;
  background: #2a2e4a;
  border-radius: 5px;
  padding: 2px 6px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
.req-tag .req-method { background: #3b2f6b; color: #cbb8ff; }
.req-url { font-family: ui-monospace, monospace; word-break: break-all; color: #cfd1ea; }
.req-meta { grid-column: 2; color: #8a8db0; }