/* Q18 / M15 (Kuang, Oct 17 22:17): Inter is self-hosted so every visitor
   sees the same designed font (it was named here but never loaded, so each
   visitor got their system sans). Variable weight 100-900, latin +
   latin-ext; files + OFL licence in /fonts/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* === CrawlReady shared components (single source) === */
/* ==========================================================================
   SERAVERRA shared component stylesheet — single source of truth for:
   design tokens, base type, header/nav/footer + hamburger, buttons,
   content primitives, auth screens, report modules, GBP/NAP tools,
   competitor compare, admin panels.
   build.py stamps this in front of each property's own stylesheet at
   build time: dist/*.css = components/shared.css + <site>/<site>.css
   Brand: teal var(--teal) (primary), orange var(--orange) (secondary). NO BLUE.
   ========================================================================== */

:root {
  color-scheme: light;
  --teal: #1e5f7b;
  --teal-dark: #164a61;
  --teal-ink: #0f3c50;
  --orange: #ff7e00;
  --orange-dark: #e56f00;
  /* M10 (Kuang, Oct 17, option A): the fill stays #ff7e00; text ON orange is
     dark (5.7:1), orange TEXT on light grounds is #b85300 (4.9:1 on white). */
  --on-orange: #0f2c3a;
  --orange-text: #b85300;
  --ink: #1a2b33;
  --muted: #5a6f78;
  --bg: #ffffff;
  --bg-soft: #f4f7f8;
  --bg-sage: #eef3f1;
  --border: #dde5e8;
  --red: #c0392b;
  --red-bg: #fde8e8;
  --amber: #b7791f;
  --amber-bg: #fef3e2;
  --green: #1e7e34;
  --green-bg: #e6f4ea;
  --surface: #fff;
  --surface-2: #fbfdff;
  --ink-2: #3a4a52;
  --ink-3: #24333b;
  --doc-ink: #17211f;
  --muted-2: #71828c;
  --line: #dde6ea;
  --line-2: #e3ebee;
  --ok: #1a7a3a;
  --ok-dark: #14522a;
  --ok-bg: #e8f5e9;
  --err-bg: #fdecea;
  --err-line: #f5c6cb;
  --warn-bg: #fff8e1;
  --warn-line: #ffe082;
  --teal-bg: #eaf3f6;
  --teal-2: #1E6F67;
  --soft-2: #eef2f3;
  --soft-3: #e8eef0;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Sticky footer (all properties): every page is header / main / footer, so a
   flex column on body with main flex:1 keeps the footer at the viewport
   bottom on short pages. Replaces the app-only rule formerly in app/app.css. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > header, body > footer { flex-shrink: 0; }
a { text-decoration: none; color: inherit; }
img, svg { display: block; }
.lang-menu button.active { color: var(--teal); font-weight: 700; }
.lang-menu button.active::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-left: auto; flex: none; }
.token-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px; font-size: 14.5px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.token-pill svg { width: 15px; height: 15px; color: var(--orange); }
.token-pill a { color: var(--orange-text); font-weight: 700; }
a.mon-pill { text-decoration: none; }
a.mon-pill:hover { border-color: var(--teal); }

body.auth-page .token-pill { display: none !important; }
body.admin-mode .token-pill { display: none !important; }

.btn, .mons-view {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; height: 40px; padding: 0 20px; margin: 0;
  border: 0; border-radius: 999px; box-shadow: none;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; flex: none;
}
.btn-orange, .btn-teal { background: var(--orange); color: var(--on-orange); }
.btn-orange:hover, .btn-teal:hover { background: var(--orange-dark); color: var(--on-orange); }
.btn-outline, .mons-view, .btn#comp-add-btn { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.btn-outline:hover, .mons-view:hover, .btn#comp-add-btn:hover { background: var(--teal); color: #fff; }
.btn:disabled, .mons-view:disabled { opacity: .55; cursor: not-allowed; }
.btn-link, .add-row-btn, .add-item-btn, .paste-toggle, .comp-edit, .rm-section, .file-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 20px;
  color: var(--teal); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-link:hover, .add-row-btn:hover, .add-item-btn:hover, .paste-toggle:hover, .comp-edit:hover, .rm-section:hover, .file-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn-link:disabled, .add-row-btn:disabled { opacity: .55; cursor: not-allowed; text-decoration: none; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange-text); margin-bottom: 12px; }
h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.12; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.8px; margin-bottom: 12px; }
.prose p.kicker { color: var(--orange-text); font-size: 12.5px; }

/* ---------- Severity / impact badges ---------- */
.sev { display: inline-flex; align-items: center; height: 24px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; padding: 0 12px; border-radius: 999px; margin-left: 10px; vertical-align: 2px; }
.sev-high { background: var(--red-bg); color: var(--red); }
.sev-med { background: var(--amber-bg); color: var(--amber); }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 14.5px; margin-bottom: 28px; }
.auth-error { display: none; background: var(--red-bg); color: var(--red); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; margin-bottom: 20px; }
/* Floating labels: only when the label follows its input (auth forms).
   Scoped with input + label so tool pages using .field with plain
   labels (e.g. robots.txt generator) are not affected. */
.show-pw { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); margin: 2px 0 18px; cursor: pointer; user-select: none; }
.show-pw input { width: 16px; height: 16px; accent-color: var(--teal); }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google svg { width: 20px; height: 20px; }
.switch { text-align: center; margin-top: 24px; font-size: 14.5px; color: var(--muted); }
.switch a { color: var(--teal); font-weight: 600; }
.score-ring .num { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--muted); }
.score-ring .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
/* Competitor chart (Local & competitors, Kuang 2026-10-20): bar groups
   spaced out; a label wraps inside its own column rather than running
   into the next bar's label. */
#p-comp-results .vbar-chart { gap: 30px; }
#p-comp-results .vbar-col { max-width: 124px; }
#p-comp-results .vbar-name { width: 100%; overflow-wrap: anywhere; }
.rank-num { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--teal); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.rank-card.impact-high .rank-num { background: var(--orange); color: var(--on-orange); }
.fix code, .snippet code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.snippet { position: relative; background: var(--teal-ink); color: #d9e8ee; border-radius: 8px; padding: 14px 18px; margin-top: 10px; overflow-x: auto; white-space: pre; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.comp-add { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.comp-add input { flex: 1; min-width: 200px; }
.comp-list { list-style: none; margin-bottom: 18px; }
.comp-list li { display: grid; grid-template-columns: 1fr 150px 70px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bg-soft); font-size: 14.5px; }
.comp-list .comp-remove { justify-self: end; }
.comp-list li:last-child { border-bottom: none; }
.comp-list .comp-status { font-size: 13px; color: var(--muted); }
.comp-list .comp-status.scanning { color: var(--orange-text); font-weight: 600; }
.comp-list .comp-status.done { color: var(--green); font-weight: 700; }

/* ---------- Settings ---------- */





.field-label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
/* style-phase2 D12: login card title lives in the shared sheet (both login
   pages carried identical private copies). Alignment/margin stay per page. */
.login-card h1 { font-size: 24px; letter-spacing: -0.4px; line-height: 1.2; }
.field-input { width: 100%; max-width: 380px; }
.pw-ok { color: var(--green); font-weight: 600; font-size: 14.5px; margin: 10px 0; }
.invoice-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; margin-top: 16px; }@media print {
  .btn-link { display: none !important; }
  .invoice-card { border: none; padding: 0; }
}
.step-kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.comp-add-row { display: flex; gap: 10px; margin: 18px 0 6px; }
.comp-add-row input { flex: 1; }
.listings-block { margin: 26px 0 6px; padding-top: 20px; border-top: 1px solid var(--border); }

.listings-title .opt { font-weight: 500; color: var(--muted); font-size: 13px; }

.listings-block input { display: block; width: 100%; margin-bottom: 10px; }
.wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }


/* ---------- Scan progress steps (Siftly-style) ---------- */
.pulse-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.scan-steps { list-style: none; margin: 0 0 20px; padding: 0; }
.scan-steps li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--muted); }
.scan-steps li .st-ic { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.scan-steps li.done { color: var(--ink); }
.scan-steps li.done .st-ic { color: var(--green); }
.scan-steps li.active { color: var(--ink); font-weight: 600; }
.scan-steps li.active .st-ic { color: var(--orange-dark); }
.scan-steps li.active .st-ic .mini-spin { width: 16px; height: 16px; border: 2.5px solid var(--border); border-top-color: var(--orange-dark); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan-steps li.todo .st-ic { color: var(--border); }
.scan-progress { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.scan-progress-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), var(--orange)); border-radius: 999px; transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform .6s ease; }
.scan-progress-label { font-size: 13px; color: var(--muted); }
.form-msg { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.form-msg.form-ok { color: var(--green); }
.form-msg.form-err { color: var(--red); }@media (max-width: 820px) {
  .token-pill { padding: 6px 12px; font-size: 13px; }
  #p-comp-results .vbar-chart { gap: 14px; }
}
.profile-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--teal); cursor: pointer; transition: border-color .15s, background .15s; }
.profile-btn svg { width: 21px; height: 21px; }
.profile-btn:hover { border-color: var(--teal); background: var(--bg-soft); }
.profile-toggle:checked + .profile-btn { border-color: var(--teal); background: var(--bg-soft); }
.side-nav a.active { background: var(--bg-soft); color: var(--teal); font-weight: 700; }

/* ---------- Profile cards (Cloudflare-style) ---------- */
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--bg-soft); }
.pf-row:last-child { border-bottom: none; }
/* CRA-139: the Sign-in method row (the card's old last row) is gone; the card's
   last VISIBLE row keeps no divider (a hidden note follows it, so :last-child misses). */
#email-card > .pf-row:not(:has(~ .pf-row:not([hidden]))) { border-bottom: none; }
.pf-label { font-size: 16px; font-weight: 700; }
.pf-value { color: var(--muted); font-size: 14.5px; margin-top: 2px; word-break: break-all; }
.pf-hint { color: var(--muted); font-size: 14.5px; margin-top: 2px; }

/* ---------- Modals ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,44,58,.52); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 500; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface); border-radius: 18px; width: 100%; max-width: 460px; padding: 28px; box-shadow: 0 24px 64px rgba(0,0,0,.25); max-height: calc(100vh - 60px); overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.modal-head h2 { font-size: 20px; letter-spacing: -0.4px; margin: 0; }
.modal-x { background: none; border: none; font-size: 30px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.modal-x:hover { color: var(--ink); }
.modal-sub { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.modal-sub strong { color: var(--ink); }
.modal .field-input { max-width: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.req { color: var(--red); }

/* ===== merged QA batch qa-css-a.css ===== */
/* ===== QA batch A — SERAVERRA wizard fixes (Items 1–4) =====
   Merge AFTER components/shared.css so these rules win ties. */

/* --- ITEM 1: competitor rows — one clean baseline for URL text, Edit, and × --- */
ul.comp-list li.comp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  line-height: 1.45;
}
ul.comp-list li.comp-item .comp-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
ul.comp-list li.comp-item .comp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
ul.comp-list li.comp-item .comp-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  text-decoration: none;
}
ul.comp-list li.comp-item .comp-remove:hover { color: var(--ink); }

/* --- ITEM 2: wizard nav — Back left, Skip + primary grouped right --- */
.wizard .wizard-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}@media (max-width: 480px) {
  .wizard .wizard-nav { flex-wrap: wrap; gap: 12px; }
}

/* --- ITEM 3: listings labels + ~20px spacing between fields --- */
.listings-block .listing-field { margin-bottom: 20px; }
.listings-block .listing-field:last-child { margin-bottom: 0; }
.listings-block .listing-field label {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
/* beat .listings-block input's 10px bottom margin in shared.css */
.listings-block .listing-field input { margin-bottom: 0; }
.fs-step.active { color: var(--ink); font-weight: 600; }
.fs-step.active .dot { border-color: var(--orange); }
.fs-step.active .dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  animation: fs-pulse 1s infinite;
}
@keyframes fs-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Item 15: pill file picker (button inside the input) ---------- */
.file-pill {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 40px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 0 14px; max-width: 440px; transition: border-color .15s, box-shadow .15s;
}
.file-pill:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.file-pill .file-name {
  flex: 1; min-width: 0; font-size: 14.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-pill .file-name.has-file { color: var(--ink); }

/* ---------- Items 10 + 15: logo preview container + corner x ---------- */
.logo-wrap { position: relative; display: inline-block; }
.logo-wrap img {
  display: block; max-height: 64px; max-width: 200px;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--surface);
}
.logo-x {
  position: absolute; top: -10px; right: -10px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 14.5px; line-height: 1; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.logo-x:hover { color: var(--red); border-color: var(--red); }
.mini-ring .big{font-size: 30px;font-weight:800;line-height:1;}
.pill{display:inline-flex;align-items:center;height:24px;font-size:12px;font-weight:700;padding:0 12px;border-radius:999px;white-space:nowrap;}
.pill.allow{background:var(--green-bg);color:var(--ok);}
.pill.block{background:var(--red-bg);color:#a93226;}
.pill.neutral{background:var(--soft-2);color:var(--muted);}
.side-head.active { background: var(--bg-soft); color: var(--teal); font-weight: 700; }

/* ---------- Utilities (2026-10-14: inline styles moved to the sheet) ----------
   Single-purpose classes replacing the most common style="..." patterns.
   New markup uses these, never inline styles. */
.u-muted { color: var(--muted); }
.u-sub { font-weight: 400; color: var(--muted); }
.u-teal-b { color: var(--teal); font-weight: 700; }
.u-teal-6 { color: var(--teal); font-weight: 600; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-lead-sm { font-size: 12px; margin-bottom: 2px; }
.input-plain { width: 100%; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mb-10 { margin-bottom: 10px; }
.u-pb-16 { padding: 0 0 16px; }
.u-flex240 { flex: 1; min-width: 240px; }
.u-flex1 { flex: 1; }
.u-align-start { align-items: flex-start; }
.u-check-row { display: flex; gap: 8px; align-items: center; font-size: 14.5px; cursor: pointer; }
.u-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.u-m-4-10 { margin: 4px 0 10px; }
.u-mt-18 { margin-top: 18px; }
.u-mb-8 { margin-bottom: 8px; }
.u-fs145 { font-size: 14.5px; }
.u-fs15 { font-size: 14.5px; }
.u-hint-lg { font-size: 13px; color: var(--muted); }
.u-flex-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14.5px; }
.u-cb { width: 16px; height: 16px; }
.u-block { display: block; }
.u-flex-between-c { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.u-m-0 { margin: 0; }
.u-pf-hint { margin: 6px 0 4px; }
.u-grid2b { display: grid; grid-template-columns: 1fr 130px; gap: 12px; max-width: 520px; }
.u-mt-24 { margin-top: 24px; }



.u-c-muted { color: var(--muted); }

/* ---------- Theme: dark (Kuang 2026-10-14) ----------
   Light is the default. Dark applies only when the user picks it with
   the header toggle (data-theme="dark" on <html>, persisted in
   localStorage 'ui_theme'; set pre-paint by the build-injected init
   script). No OS auto-switching. Print always renders light. The dark
   palette stays in the brand family: deep teal-ink surfaces, brighter
   teal for text, the same orange. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --teal: #4aa8cc;
  --teal-dark: #2e7ea6;
  --orange: #ff7e00;
  --orange-dark: #ffa040;
  --orange-text: #ff7e00;
  --ink: #e9f1f3;
  --muted: #9db4bc;
  --bg: #0b181e;
  --bg-soft: #10222a;
  --bg-sage: #0f2420;
  --border: #22414d;
  --red: #ff9a8a;
  --red-bg: #3a1e1a;
  --amber: #e3ac55;
  --amber-bg: #33290f;
  --green: #4cc38a;
  --green-bg: #11301f;
  --surface: #0f2027;
  --surface-2: #12262e;
  --ink-2: #c2d3d9;
  --ink-3: #d9e5e9;
  --doc-ink: #e9f1f3;
  --muted-2: #87a0a8;
  --line: #22414d;
  --line-2: #1b333d;
  --ok: #4cc38a;
  --ok-dark: #8fe0b0;
  --ok-bg: #11301f;
  --err-bg: #3a1e1a;
  --err-line: #6e352c;
  --warn-bg: #2f2a0e;
  --warn-line: #6b5d1e;
  --teal-bg: #10303d;
  --teal-2: #2ea89b;
  --soft-2: #12262e;
  --soft-3: #16303a;
}
/* Theme toggle (app header): moon in light, sun in dark. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: none; border: 1px solid transparent; cursor: pointer; color: var(--muted);
}
.theme-toggle:hover { color: var(--teal); background: var(--bg-soft); }
.theme-toggle svg { width: 21px; height: 21px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #fbfdff;
    --ink: #1a2b33; --ink-2: #3a4a52; --ink-3: #24333b; --doc-ink: #17211f;
    --muted: #5a6f78; --muted-2: #71828c; --border: #dde5e8;
    --line: #dde6ea; --line-2: #e3ebee; --bg-soft: #f4f7f8; --bg-sage: #eef3f1;
  }
}

/* === app property styles === */
body { font-size: 13px; }
/* SERAVERRA app + admin site-specific styles.
   Shared system (tokens, app header, buttons, report modules, auth, admin
   panels) comes from components/shared.css, prepended at build time. */

body { background: var(--bg-soft); }

/* The `hidden` attribute must win over display:* rules (e.g. .mon-plan's
   display:flex) or toggled sections stay visible. */
[hidden] { display: none !important; }
.wizard .sub { text-align: left; color: var(--muted); margin-bottom: 32px; }
.url-hint { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
.url-error { display: none; text-align: center; color: var(--red); font-size: 14.5px; margin-top: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.tokens-card .big { font-size: 54px; font-weight: 800; color: var(--teal); }
.co-steps li.on { color: var(--ink); }
.co-steps li.on span { background: var(--teal); color: #fff; }
.co-row2 .field-input { max-width: none; }
.co-card .field-input { max-width: none; }
.co-coupon-row .field-input { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rep-tip{position:relative;display:inline-flex;flex:none;color:var(--muted);cursor:help;outline:none;}
.rep-tip::after{content:attr(data-tip);position:absolute;right:-4px;top:calc(100% + 8px);width:max-content;max-width:min(230px,calc(100vw - 32px));background:#1a2b33;color:#fff;font-size:12px;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;padding:8px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:40;box-shadow:0 8px 24px rgba(16,42,54,.25);}
.rep-tip:hover::after,.rep-tip:focus::after,.rep-tip:focus-visible::after{opacity:1;}
.rep-tip:hover,.rep-tip:focus-visible{color:var(--ink);}
.rep-tip:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:50%;}
/* dark theme: the dark bubble vanished into the dark card (1.14:1) — invert it */
:root[data-theme="dark"] body:not(.pg-report) .rep-tip::after{background:#e9f1f3;color:#0b181e;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.rep-tab.active{color:var(--teal);border-bottom-color:var(--orange,var(--orange));}
.rep-panel.active{display:block;}


/* ---------- Admin standardization (2026-10-14: inline styles moved here) ---------- */
.page-h1 { font-size: 30px; margin-bottom: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }


/* ================= Page styles moved from inline <style> blocks (2026-10-14) ================= */
/* ===== schema-wizard (moved from page, scoped body.pg-wizard) ===== */
body.pg-wizard .tool-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;}@media (max-width: 860px) {
body.pg-wizard .tool-grid {grid-template-columns: 1fr;}
}
body.pg-wizard .tool-form .field, body.pg-schemaval .tool-form .field, body.pg-robotsval .tool-form .field, body.pg-llmsgen .tool-form .field, body.pg-robotsgen .tool-form .field {margin-bottom: 18px;}
body.pg-wizard .tool-form label.flabel, body.pg-schemaval .tool-form label.flabel, body.pg-robotsval .tool-form label.flabel, body.pg-llmsgen .tool-form label.flabel, body.pg-robotsgen .tool-form label.flabel {display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px;}
.tool-form label {display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px;}
/* Option-row labels (checkbox rows) are their own role — like .bot-opts
   pills, they keep their component style, not the field-label standard. */
.tool-form label.u-flex-label {display: flex; font-weight: 400; margin-bottom: 0;}
.tool-form label.u-fs145 {display: inline; font-weight: 400; margin-bottom: 0;}
body.pg-wizard .tool-form .hint, body.pg-schemaval .tool-form .hint, body.pg-robotsval .tool-form .hint, body.pg-llmsgen .tool-form .hint, body.pg-robotsgen .tool-form .hint {font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.5;}
body.pg-wizard .tool-form input[type="text"], body.pg-wizard .tool-form input[type="url"], body.pg-wizard .tool-form input[type="tel"], body.pg-wizard .tool-form textarea, body.pg-wizard .tool-form select {width: 100%;}
body.pg-wizard .tool-form textarea {min-height: 80px; resize: vertical;}
body.pg-wizard .type-tabs {display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;}
body.pg-wizard .schema-fields {display: none;}
body.pg-wizard .schema-fields.active {display: block;}
body.pg-wizard .faq-item, body.pg-wizard .offer-item {border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; background: var(--surface); position: relative;}
body.pg-wizard .rm-item {position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;}
body.pg-wizard .output-pane, body.pg-schemaval .output-pane, body.pg-robotsval .output-pane, body.pg-llmsgen .output-pane, body.pg-robotsgen .output-pane {position: sticky; top: 90px;}
body.pg-wizard .output-pane pre {background: var(--teal-ink); color: var(--teal-bg); border-radius: 14px; padding: 20px;
  font-size: 14.5px; line-height: 1.65; overflow-x: auto; min-height: 380px; max-height: 600px; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;}
body.pg-wizard .output-actions {display: flex; gap: 10px; margin: 12px 0 26px; flex-wrap: wrap;}
body.pg-wizard .out-label, body.pg-schemaval .out-label, body.pg-robotsval .out-label, body.pg-llmsgen .out-label, body.pg-robotsgen .out-label {display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px;}
body.pg-wizard .steps-list, body.pg-schemaval .steps-list, body.pg-robotsval .steps-list, body.pg-llmsgen .steps-list, body.pg-robotsgen .steps-list {counter-reset: step; list-style: none; padding: 0; margin: 20px 0 0;}
body.pg-wizard .steps-list li, body.pg-schemaval .steps-list li, body.pg-robotsval .steps-list li, body.pg-llmsgen .steps-list li, body.pg-robotsgen .steps-list li {counter-increment: step; padding: 14px 0 14px 52px; position: relative; font-size: 13px; line-height: 1.6; border-bottom: 1px solid var(--border);}
body.pg-wizard .steps-list li::before, body.pg-schemaval .steps-list li::before, body.pg-robotsval .steps-list li::before, body.pg-llmsgen .steps-list li::before, body.pg-robotsgen .steps-list li::before {content: counter(step); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;}
body.pg-wizard .steps-list li:last-child, body.pg-schemaval .steps-list li:last-child, body.pg-robotsval .steps-list li:last-child, body.pg-llmsgen .steps-list li:last-child, body.pg-robotsgen .steps-list li:last-child {border-bottom: none;}
body.pg-wizard .webperson-box, body.pg-schemaval .webperson-box, body.pg-robotsval .webperson-box, body.pg-llmsgen .webperson-box, body.pg-robotsgen .webperson-box {background: var(--surface); border: 1.5px dashed var(--teal); border-radius: 12px; padding: 18px; font-size: 14.5px; line-height: 1.65; margin-top: 16px;}
body.pg-wizard code.inline {background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; font-size: 13px;}

/* ===== schema-validator (moved from page, scoped body.pg-schemaval) ===== */
body.pg-schemaval .tool-form input[type="text"], body.pg-schemaval .tool-form textarea {width: 100%;}
body.pg-schemaval .tool-form textarea {min-height: 160px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;}
body.pg-wizard .field-tip, body.pg-schemaval .field-tip, body.pg-robotsval .field-tip, body.pg-llmsgen .field-tip, body.pg-robotsgen .field-tip {position: relative; display: flex; align-items: center;}
body.pg-wizard .field-tip input, body.pg-schemaval .field-tip input, body.pg-robotsval .field-tip input, body.pg-llmsgen .field-tip input, body.pg-robotsgen .field-tip input {flex: 1; padding-right: 36px;}
body.pg-wizard .tip-icon, body.pg-schemaval .tip-icon, body.pg-robotsval .tip-icon, body.pg-llmsgen .tip-icon, body.pg-robotsgen .tip-icon {position: absolute; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: help; flex-shrink: 0;}
body.pg-wizard .tip-icon:hover, body.pg-schemaval .tip-icon:hover, body.pg-robotsval .tip-icon:hover, body.pg-llmsgen .tip-icon:hover, body.pg-robotsgen .tip-icon:hover {background: var(--teal, var(--teal-2)); color: #fff;}
body.pg-schemaval .schema-block {border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 16px; background: var(--surface);}
body.pg-schemaval .schema-block h3 {margin: 0 0 4px; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
body.pg-schemaval .schema-block .block-sub {font-size: 13px; color: var(--muted); margin-bottom: 10px;}
body.pg-schemaval .badge {display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px;}
body.pg-schemaval .badge-ok {background: var(--ok-bg); color: var(--ok);}
body.pg-schemaval .badge-warn {background: var(--warn-bg); color: #8a6d00;}
body.pg-schemaval .badge-err {background: var(--err-bg); color: var(--red);}
body.pg-schemaval .issue {display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.55;}
body.pg-schemaval .issue:first-of-type {border-top: none;}
body.pg-schemaval .issue .dot {width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;}
body.pg-schemaval .dot-err {background: var(--red);}
body.pg-schemaval .dot-warn {background: #e8930c;}
body.pg-schemaval .dot-info {background: #1976d2;}
body.pg-schemaval .issue .fix {display: block; color: var(--muted); font-size: 13px; margin-top: 3px;}
body.pg-schemaval .issue .fix code {background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; font-size: 12.5px;}
body.pg-schemaval details.raw-json {margin-top: 10px;}
body.pg-schemaval details.raw-json summary {cursor: pointer; font-size: 13px; color: var(--teal); font-weight: 600;}
body.pg-schemaval details.raw-json pre {background: var(--teal-ink); color: var(--teal-bg); border-radius: 10px; padding: 14px; font-size: 12.5px; line-height: 1.6; overflow-x: auto; max-height: 300px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;}
body.pg-schemaval .summary-counts {display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0;}
body.pg-schemaval .count-card {border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; background: var(--surface); text-align: center; min-width: 110px;}
body.pg-schemaval .count-card .num {font-size: 30px; font-weight: 800;}
body.pg-schemaval .count-card .lbl {font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;}

/* ===== robots-validator (moved from page, scoped body.pg-robotsval) ===== */
body.pg-robotsval .tool-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;}@media (max-width: 860px) {
body.pg-robotsval .tool-grid {grid-template-columns: 1fr;}
}
body.pg-robotsval .tool-form input[type="text"], body.pg-robotsval .tool-form textarea {width: 100%;}
body.pg-robotsval .tool-form textarea {min-height: 180px; resize: vertical; font-family: ui-monospace, monospace;}
body.pg-robotsval .mode-toggle {display: flex; gap: 8px; margin-bottom: 16px;}
body.pg-robotsval .mode-toggle button {flex: 1; padding: 10px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--ink);}
body.pg-robotsval .mode-toggle button.active {border-color: var(--teal); background: var(--bg-soft); color: var(--teal-ink);}
body.pg-robotsval .stat-row {display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;}
body.pg-robotsval .stat-chip {flex: 1; min-width: 90px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; background: var(--surface);}
body.pg-robotsval .stat-chip .num {font-size: 20px; font-weight: 800;}
body.pg-robotsval .stat-chip .lbl {font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;}
body.pg-robotsval .line-table-wrap {overflow-x: auto; margin-bottom: 18px;}
body.pg-robotsval table.line-table {width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px;}
body.pg-robotsval table.line-table th {text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--border);}
body.pg-robotsval table.line-table td {padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top;}
body.pg-robotsval table.line-table td.ln {font-family: ui-monospace, monospace; color: var(--muted); width: 40px;}
body.pg-robotsval table.line-table td.rule {font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all;}
body.pg-robotsval .badge {display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;}
body.pg-robotsval .badge-ok {background: var(--green-bg); color: var(--ok-dark);}
body.pg-robotsval .badge-warn {background: #fff3d6; color: #6b4a12;}
body.pg-robotsval .badge-err {background: var(--err-bg); color: #7a1f16;}
body.pg-robotsval .badge-info {background: #e3f2fd; color: #1a4f7a;}
body.pg-robotsval .line-explain {font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5;}
body.pg-robotsval .output-pane pre {background: var(--teal-ink); color: var(--teal-bg); border-radius: 14px; padding: 20px;
  font-size: 14.5px; line-height: 1.65; overflow-x: auto; min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;}
body.pg-robotsval .output-actions {display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;}
body.pg-robotsval .check-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px;}
body.pg-robotsval .check-card {border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface);}
body.pg-robotsval .check-card h3 {font-size: 17px; font-weight: 800; margin: 0 0 6px;}
body.pg-robotsval .check-card p {font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55;}
body.pg-robotsval .form-msg {font-size: 14.5px;}

/* ===== llms-txt-generator (moved from page, scoped body.pg-llmsgen) ===== */
body.pg-llmsgen .tool-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;}@media (max-width: 860px) {
body.pg-llmsgen .tool-grid {grid-template-columns: 1fr;}
}
body.pg-llmsgen .tool-form input[type="text"], body.pg-llmsgen .tool-form textarea {width: 100%;}
body.pg-llmsgen .tool-form textarea {min-height: 96px; resize: vertical;}
body.pg-llmsgen .section-card {border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: var(--surface);}
body.pg-llmsgen .section-card h3 {font-size: 17px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center;}
body.pg-llmsgen .link-row {display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;}
body.pg-llmsgen .link-row input {width: 100%;}
body.pg-llmsgen .link-row .link-desc {width: 100%;}
body.pg-llmsgen .link-row-wrap {position: relative;}
body.pg-llmsgen .rm-link {position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14.5px; line-height: 1;}
body.pg-llmsgen .rm-link:hover {color: var(--red); border-color: var(--red);}
body.pg-llmsgen .check-row {display: flex; gap: 10px; align-items: flex-start; background: var(--bg-soft); border-radius: 10px; padding: 12px 14px; margin: 18px 0;}
body.pg-llmsgen .check-row input {margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal);}
body.pg-llmsgen .check-row .hint {margin-top: 2px;}
body.pg-llmsgen .output-pane pre {background: var(--teal-ink); color: var(--teal-bg); border-radius: 14px; padding: 20px;
  font-size: 14.5px; line-height: 1.65; overflow-x: auto; min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;}
body.pg-llmsgen .output-actions {display: flex; gap: 10px; margin: 12px 0 26px; flex-wrap: wrap;}
body.pg-llmsgen .out-label .fname {font-family: ui-monospace, monospace; font-weight: 700; color: var(--teal);}
/* (robotsgen tool-form labels take the general .tool-form label rule above) */
body.pg-robotsgen .tool-form input[type="text"], body.pg-robotsgen .tool-form input[type="number"], body.pg-robotsgen .tool-form textarea {width: 100%;}
body.pg-robotsgen .tool-form textarea {min-height: 90px; resize: vertical; font-family: ui-monospace, monospace;}
body.pg-robotsgen .bot-row {display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--surface);}
body.pg-robotsgen .bot-row > div:first-child {flex: 1; min-width: 0;}
body.pg-robotsgen .bot-row .bot-name {font-weight: 600; font-size: 14.5px; font-family: ui-monospace, monospace;}
body.pg-robotsgen .bot-row .bot-who {font-size: 13px; color: var(--muted);}
body.pg-robotsgen .bot-row .bot-opts {flex-shrink: 0;}
body.pg-robotsgen .bot-opts {display: flex; gap: 4px;}
body.pg-robotsgen .bot-opts label {font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; margin: 0;}
body.pg-robotsgen .bot-opts input {position: absolute; opacity: 0; pointer-events: none; width: auto; padding: 0; border: none;}
body.pg-robotsgen .bot-opts input:checked + span {font-weight: 700;}
body.pg-robotsgen .bot-opts .opt-allow input:checked + span {color: var(--green);}
body.pg-robotsgen .bot-opts .opt-block input:checked + span {color: var(--red);}
body.pg-robotsgen .bot-opts label:has(input:checked) {border-color: var(--border); background: var(--bg-soft);}
body.pg-robotsgen .output-pane pre {background: var(--teal-ink); color: var(--teal-bg); border-radius: 14px; padding: 20px;
  font-size: 14.5px; line-height: 1.65; overflow-x: auto; min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;}

/* ===== parity-check (moved from page, scoped body.pg-parity) ===== */
body.pg-parity .parity-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px;}@media (max-width: 860px) {
body.pg-parity .parity-grid {grid-template-columns: 1fr;}
}
body.pg-parity .parity-pane {border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface);}
body.pg-parity .parity-pane h3 {margin: 0 0 12px; font-size: 20px;}
body.pg-parity .parity-pane .word-count {font-size: 30px; font-weight: 800; margin: 8px 0;}
body.pg-parity .parity-pane .word-label {font-size: 13px; color: var(--muted);}
body.pg-parity .parity-text {background: var(--bg-soft); border-radius: 8px; padding: 16px; font-size: 14.5px; line-height: 1.6; max-height: 400px; overflow-y: auto; margin-top: 12px; white-space: pre-wrap;}

/* ===== settings (moved from page, scoped body.pg-settings) ===== */
body.pg-settings .chips-list {display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;}
body.pg-settings .chips-list:empty {display: none;}
body.pg-settings .chip {display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E8F2EF;
  color: #173F3A;
  border-radius: 20px;
  padding: 8px 8px 8px 16px;
  font-size: 14.5px;
  font-weight: 600;
  max-width: 100%;}
body.pg-settings .chip span {overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;}
body.pg-settings .chip button {background: none;
  border: none;
  color: #5b6b68;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;}
body.pg-settings .chip button:hover {background: rgba(23,63,58,.12);
  color: #173F3A;}

/* ===== papers (moved from page, scoped body.pg-papers) ===== */
body.pg-papers .side-sub-link.active {background: var(--teal); color: #fff; border-radius: 8px;}
body.pg-papers .masthead {display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 3px solid var(--teal); padding-bottom: 22px;}
body.pg-papers .masthead .logo-slot img, body.pg-agencyrep .masthead .logo-slot img {max-height: 64px; max-width: 260px; object-fit: contain;}
body.pg-papers .masthead .logo-slot .placeholder-logo, body.pg-agencyrep .masthead .logo-slot .placeholder-logo {font-size: 14.5px; font-weight: 800; color: var(--teal); border: 2px dashed #b9cdd6; border-radius: 10px; padding: 14px 20px; display: inline-block;}
body.pg-papers .masthead .who, body.pg-agencyrep .masthead .who {text-align: right;}
body.pg-papers .masthead .aname {font-size: 20px; font-weight: 800; color: var(--teal);}
body.pg-papers .masthead .aaddr {font-size: 14.5px; color: var(--ink-2); margin-top: 3px; white-space: pre-line;}
body.pg-papers .doc-sheet {display: none; max-width: 820px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(30,95,123,.10); padding: 60px 68px 48px; margin: 28px 0 36px; color: var(--doc-ink);}
body.pg-papers .doc-sheet.active {display: block;}
body.pg-papers .doc-sheet .kicker, body.pg-agencyrep .doc-sheet .kicker {display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange-text); margin: 30px 0 10px;}
body.pg-papers .doc-sheet h2.doc-title, body.pg-agencyrep .doc-sheet h2.doc-title {font-size: 20px; line-height: 1.15; letter-spacing: -0.8px; color: var(--doc-ink); margin: 0 0 10px;}
body.pg-papers .doc-sheet .doc-sub {font-size: 16px; color: var(--ink-2); line-height: 1.55; margin: 0 0 26px;}
body.pg-papers .doc-sheet h3.sec-title {font-size: 17px; color: var(--teal); letter-spacing: -0.4px; margin: 28px 0 6px;}
body.pg-papers .doc-sheet .sec-sub {font-size: 14.5px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.55;}
body.pg-papers .doc-sheet p.body {font-size: 14.5px; line-height: 1.65; color: var(--ink-3); margin: 0 0 14px;}
body.pg-papers .stat-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 6px 0 8px;}
body.pg-papers .stat-card, body.pg-agencyrep .stat-card {border: 1px solid var(--line-2); border-radius: 12px; padding: 22px 24px; background: var(--surface-2);}
body.pg-papers .stat-card .num, body.pg-agencyrep .stat-card .num {font-size: 44px; font-weight: 800; color: var(--teal); line-height: 1; letter-spacing: -1px;}
body.pg-papers .stat-card .num .unit, body.pg-agencyrep .stat-card .num .unit {font-size: 20px; color: var(--orange-text); font-weight: 800;}
body.pg-papers .stat-card .lbl, body.pg-agencyrep .stat-card .lbl {font-size: 14.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.45;}
body.pg-papers .method {font-size: 12.5px; color: var(--muted-2); line-height: 1.55; margin-top: 26px; border-top: 1px solid var(--line-2); padding-top: 14px;}
body.pg-papers .cta-block {background: var(--teal); color: #fff; border-radius: 14px; padding: 26px 30px; margin-top: 30px; display: flex; gap: 20px; align-items: center;}
body.pg-papers .cta-block .cta-t {font-size: 16px; line-height: 1.55;}
body.pg-papers .cta-block .cta-t strong {color: #ffd9a8;}
body.pg-papers .chart-row {display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin: 10px 0 6px;}
body.pg-papers .donut-box {text-align: center;}
body.pg-papers .donut-box .d-lbl {font-size: 13px; color: var(--ink-2); margin-top: 6px; max-width: 170px; line-height: 1.4;}
body.pg-papers .donut-box .d-num {font-size: 30px; font-weight: 800; fill: var(--teal);}
body.pg-papers .gauge-row {display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px;}
body.pg-papers .gauge {flex: 1 1 120px; text-align: center; border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 8px 12px; background: var(--surface-2);}
body.pg-papers .gauge .g-name {font-size: 13px; font-weight: 700; color: var(--ink-3); margin-top: 4px;}
body.pg-papers .gauge .g-note {font-size: 12px; color: var(--muted-2); line-height: 1.4; margin-top: 3px;}
body.pg-papers .waffle {display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: 230px;}
body.pg-papers .waffle i {aspect-ratio: 1; border-radius: 3px; background: var(--line-2); display: block;}
body.pg-papers .waffle i.on {background: var(--orange);}
body.pg-papers .waffle i.on.teal {background: var(--teal);}
body.pg-papers .pictogram {display: flex; gap: 7px;}
body.pg-papers .pictogram svg {width: 30px; height: 30px;}
body.pg-papers .dotplot {margin: 10px 0 4px;}
body.pg-papers .dotplot .dp-row {display: grid; grid-template-columns: 150px 1fr 92px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-2);}
body.pg-papers .dotplot .dp-name {font-size: 14.5px; font-weight: 600; color: var(--ink-3);}
body.pg-papers .dotplot .dp-track {position: relative; height: 22px; background: #f2f6f8; border-radius: 6px;}
body.pg-papers .dotplot .dp-avg {position: absolute; top: -3px; bottom: -3px; width: 2px; background: #98a8b1;}
body.pg-papers .dotplot .dp-dot {position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);}
body.pg-papers .dotplot .dp-val {font-size: 14.5px; color: var(--ink-2);}
body.pg-papers .dotplot .dp-val strong {color: var(--teal); font-size: 16px;}
body.pg-papers .lolli {margin: 8px 0 4px;}
body.pg-papers .lolli .l-row {display: grid; grid-template-columns: 1fr 130px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line-2);}
body.pg-papers .lolli .l-name {font-size: 14.5px; color: var(--ink-3);}
body.pg-papers .lolli .l-name .l-fix {display: block; font-size: 13px; color: var(--muted-2); margin-top: 2px; line-height: 1.45;}
body.pg-papers .lolli .l-track {position: relative; height: 4px; background: var(--line-2); border-radius: 2px;}
body.pg-papers .lolli .l-line {position: absolute; left: 0; top: 0; height: 4px; background: var(--teal); border-radius: 2px;}
body.pg-papers .lolli .l-dot {position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);}
body.pg-papers .lolli .l-val {position: absolute; right: -4px; top: -20px; font-size: 13px; font-weight: 800; color: var(--teal); transform: translateX(50%);}
body.pg-papers .steps {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 4px;}
body.pg-papers .step {border: 1px solid var(--line-2); border-radius: 12px; padding: 18px; background: var(--surface-2);}
body.pg-papers .step .s-num {font-size: 13px; font-weight: 800; color: var(--orange-text); letter-spacing: 1.2px;}
body.pg-papers .step .s-title {font-size: 16px; font-weight: 800; color: var(--teal); margin: 5px 0 6px;}
body.pg-papers .step .s-body {font-size: 13px; color: var(--ink-2); line-height: 1.55;}
body.pg-papers table.bots {width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 4px;}
body.pg-papers table.bots th {text-align: left; color: var(--teal); font-size: 13px; letter-spacing: .6px; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--teal);}
body.pg-papers table.bots td {padding: 9px 10px; border-bottom: 1px solid var(--line-2); color: var(--ink-3); vertical-align: top; line-height: 1.5;}
body.pg-papers table.bots td.bot {font-weight: 800; white-space: nowrap;}
body.pg-papers .checklist {margin: 8px 0 4px;}
body.pg-papers .checklist .c-row {display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); align-items: flex-start;}
body.pg-papers .checklist .c-box {flex: none; width: 21px; height: 21px; border: 2.2px solid var(--teal); border-radius: 6px; margin-top: 2px;}
body.pg-papers .checklist .c-text {font-size: 14.5px; color: var(--ink-3); line-height: 1.55;}
body.pg-papers .checklist .c-text .c-why {display: block; font-size: 13px; color: var(--muted-2); margin-top: 2px;}@media print {
:root[data-theme="dark"] {
  color-scheme: light;
  --teal: #1e5f7b; --teal-dark: #164a61; --teal-ink: #0f3c50;
  --orange: #ff7e00; --orange-dark: #e56f00; --orange-text: #b85300;
  --ink: #1a2b33; --muted: #5a6f78;
  --bg: #ffffff; --bg-soft: #f4f7f8; --bg-sage: #eef3f1;
  --border: #dde5e8;
  --red: #c0392b; --red-bg: #fde8e8;
  --amber: #b7791f; --amber-bg: #fef3e2;
  --green: #1e7e34; --green-bg: #e6f4ea;
  --surface: #fff; --surface-2: #fbfdff;
  --ink-2: #3a4a52; --ink-3: #24333b; --doc-ink: #17211f;
  --muted-2: #71828c; --line: #dde6ea; --line-2: #e3ebee;
  --ok: #1a7a3a; --ok-dark: #14522a; --ok-bg: #e8f5e9;
  --err-bg: #fdecea; --err-line: #f5c6cb;
  --warn-bg: #fff8e1; --warn-line: #ffe082;
  --teal-bg: #eaf3f6; --teal-2: #1E6F67;
  --soft-2: #eef2f3; --soft-3: #e8eef0;
}
}@media print {
body.pg-papers .doc-head, body.pg-papers .profile-nudge, body.pg-papers .side-nav, body.pg-papers header, body.pg-papers footer {display: none !important;}
/* the anchored left menu (.side, a 232px grid column) must not print:
   hide it and collapse the shell so the sheet takes the full width */
body.pg-papers .side, body.pg-papers .apphead {display: none !important;}
body.pg-papers .shell {display: block !important;}
/* print = only the paper on screen (the .active one), complete (Kuang,
   2026-10-20: the button printed all six papers; it prints the page
   it's on — same single-paper rule as app/app.css) */
body.pg-papers .doc-sheet {display: none !important;}
body.pg-papers .doc-sheet.active {display: block !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important;}
/* lollipop value labels hang half their width past the chart's right edge
   (fine on screen, cut off the % in print): center each on its dot, but
   never let it end past the track's right end */
body.pg-papers .lolli .l-val {left: auto; right: max(0px, calc(100% - var(--x) - 1em)); transform: none; white-space: nowrap;}
body.pg-papers .doc-sheet, body.pg-papers .stat-card, body.pg-papers .cta-block, body.pg-papers .gauge, body.pg-papers .step, body.pg-papers .placeholder-logo {-webkit-print-color-adjust: exact; print-color-adjust: exact;}
a {text-decoration: none !important; color: inherit !important;}
}

/* ===== agency-report (moved from page, scoped body.pg-agencyrep) ===== */
/* Page head, actions and profile nudge: portal chrome, see body.pg-pdoc below. */
body.pg-agencyrep .doc-sheet {max-width: 820px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(30,95,123,.10); padding: 60px 68px 48px; margin: 28px 0 36px; color: var(--doc-ink);}
body.pg-agencyrep .masthead {display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 26px; border-bottom: 3px solid var(--teal);}
body.pg-agencyrep .masthead .who .aname {font-size: 20px; font-weight: 800; color: var(--teal);}
body.pg-agencyrep .masthead .who .aaddr {font-size: 13px; color: #5b6b72; margin-top: 4px;}
body.pg-agencyrep .doc-sheet .doc-sub {font-size: 16px; color: var(--ink-2); line-height: 1.55; margin: 0 0 30px;}
body.pg-agencyrep .stat-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px;}
body.pg-agencyrep .method {font-size: 12.5px; color: #7a8b92; line-height: 1.6; border-top: 1px solid #eef2f4; padding-top: 18px;}
body.pg-agencyrep .powered {text-align: center; font-size: 12.5px; color: #9aa8ae; letter-spacing: 0.4px; margin-top: 30px;}
body.pg-agencyrep .doc-sheet h3.sec-title {font-size: 17px; color: var(--teal); letter-spacing: -0.4px; margin: 28px 0 6px;}
body.pg-agencyrep .doc-sheet .sec-sub {font-size: 14.5px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.55;}
body.pg-agencyrep .finding {display: flex; gap: 16px; margin-bottom: 20px;}
body.pg-agencyrep .finding .ico {flex: none; width: 42px; height: 42px; border-radius: 12px; background: #e8f1f5; display: flex; align-items: center; justify-content: center;}
body.pg-agencyrep .finding .ico svg {width: 22px; height: 22px; color: var(--teal);}
body.pg-agencyrep .finding .f-title {font-size: 16px; font-weight: 800; color: var(--doc-ink);}
body.pg-agencyrep .finding .f-num {color: var(--orange-text);}
body.pg-agencyrep .finding .f-text {font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.55;}
body.pg-agencyrep .chart-wrap {margin: 22px 0 6px;}
body.pg-agencyrep .chart-wrap .chart-cap {font-size: 14.5px; font-weight: 700; color: var(--doc-ink); margin-bottom: 10px;}
body.pg-agencyrep .chart-wrap svg {width: 100%; height: auto; display: block;}
body.pg-agencyrep .chart-note {font-size: 12.5px; color: #7a8b92; margin: 8px 0 0;}
body.pg-agencyrep .cta-block {background: var(--teal); color: #fff; border-radius: 14px; padding: 26px 30px; margin-top: 26px;}
body.pg-agencyrep .cta-block .cta-q {font-size: 20px; font-weight: 800; letter-spacing: -0.3px;}
body.pg-agencyrep .cta-block .cta-t {font-size: 14.5px; line-height: 1.6; margin-top: 8px;}
body.pg-agencyrep .cta-block .cta-t strong {color: #ffd9b3;}
@page { size: letter; margin: 0.5in 0.6in; }@media print {
body.pg-agencyrep .app-header, body.pg-agencyrep .side-nav, body.pg-agencyrep .site-footer, body.pg-agencyrep .no-print {display: none !important;}
/* the anchored left menu (.side, a 232px grid column) must not print:
   hide it and collapse the shell so the sheet takes the full width */
body.pg-agencyrep .side, body.pg-agencyrep .apphead {display: none !important;}
body.pg-agencyrep .shell {display: block !important;}
body.pg-agencyrep .acct-layout {display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important;}
body.pg-agencyrep .acct-content {padding: 0 !important;}
body {background: #fff !important;}
body.pg-agencyrep .doc-sheet {box-shadow: none !important; border: none !important; border-radius: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important;}
body.pg-agencyrep .doc-sheet.page-2 {break-before: page; page-break-after: avoid;}
body.pg-agencyrep .doc-sheet .masthead {break-inside: avoid;}
body.pg-agencyrep .doc-sheet h3.sec-title {margin-top: 14px !important;}
body.pg-agencyrep .doc-sheet .sec-sub {margin-bottom: 12px !important;}
body.pg-agencyrep .finding {margin-bottom: 13px !important;}
body.pg-agencyrep .chart-wrap {margin: 12px 0 4px !important;}
body.pg-agencyrep .chart-wrap svg {max-height: 150px;}
body.pg-agencyrep .cta-block {padding: 18px 24px !important; margin-top: 16px !important;}
body.pg-agencyrep .doc-sheet .doc-sub {margin-bottom: 20px !important;}
/* page 2 ran one line long: its closing "Powered by" line spilled onto a
   third page. Tighter tail spacing keeps the handout at exactly 2 pages. */
body.pg-agencyrep .doc-sheet.page-2 .finding {margin-bottom: 10px !important;}
body.pg-agencyrep .doc-sheet.page-2 .cta-block {margin-top: 12px !important;}
body.pg-agencyrep .doc-sheet.page-2 .powered {margin-top: 10px !important;}
/* real branding runs taller than the placeholder this was tuned on: a
   wide logo raises the masthead and the agency name + address wrap the
   CTA line to two lines, pushing the closing "Powered by" line onto a
   third page. Trim the tail so page 2 holds at exactly 2 pages with a
   real logo and address too. */
body.pg-agencyrep .doc-sheet.page-2 .cta-block {padding-top: 13px !important; padding-bottom: 13px !important;}
body.pg-agencyrep .doc-sheet.page-2 .powered {margin-top: 5px !important;}
body.pg-agencyrep .stat-grid {margin-bottom: 20px !important; gap: 12px !important;}
body.pg-agencyrep .doc-sheet, body.pg-agencyrep .stat-card, body.pg-agencyrep .cta-block, body.pg-agencyrep .finding .ico, body.pg-agencyrep .placeholder-logo {-webkit-print-color-adjust: exact; print-color-adjust: exact;}
}@media print {
body.pg-report .report-close, body.pg-report .report-actions, body.pg-report .dropdown-toggle, body.pg-report button.close, body.pg-report .no-print {display: none !important;}
body.pg-report .fix-toggle {display: none !important;}
body.pg-report .fix-collapsible {display: block !important;}
body.pg-report .score-category, body.pg-report .chart-container, body.pg-report .crawler-matrix, body.pg-report .report-section {page-break-inside: avoid;}
body.pg-report .fs-cats, body.pg-report .category-bars {page-break-inside: avoid;}
body.pg-report .rep-panel {display: block !important;}
body.pg-report .rep-tabs {display: none !important;}
body.pg-report .rep-tip {display: block; position: static; margin-top: 4px; cursor: default;}
body.pg-report .rep-tip svg {display: none !important;}
body.pg-report .rep-tip::after {content: attr(data-tip); position: static; opacity: 1; background: none; color: var(--muted); box-shadow: none; padding: 0; font-size: 11.5px; max-width: none; width: auto;}
}
body.pg-papers .dp-avg, body.pg-papers .dp-dot, body.pg-papers .l-dot, body.pg-papers .l-val { left: var(--x); }
body.pg-papers .l-line { width: var(--x); }
.svg-score { font-size: 20px; font-weight: 800; fill: #173f3a; }
body.pg-papers .dp-note { font-size: 13px; color: var(--ink-2); margin-top: 8px; max-width: 230px; }
body.pg-papers .dp-src { font-size: 13px; color: var(--muted-2); text-align: right; }
body.pg-settings .pf-amber { color: #b45309; }
/* One Save/Cancel pair per Settings card (T13, Kuang Oct 16 22:13-22:14):
   together at the card's bottom-right, Cancel then the orange Save. */
body.pg-settings .set-actions { display: flex; gap: 8px; margin-left: auto; }
body.pg-settings .set-actions [hidden] { display: none; }
body.pg-settings .x-card > .pf-row:last-child { padding-bottom: 0; }
body.pg-settings .p-set-note:empty { display: none; }
/* Team (CRA-55): a member row's buttons drop under the name on a phone. */
body.pg-settings #team-members .pf-row, body.pg-settings #team-invites .pf-row { flex-wrap: wrap; }
/* CRA-90: the phone row carries two buttons; on a phone they drop under the number. */
body.pg-settings #phone-row { flex-wrap: wrap; }
body.pg-settings #phone-row > div:first-child { flex: 1 1 220px; min-width: 0; }
body.pg-settings #team-members .pf-row > div:first-child, body.pg-settings #activity-list .pf-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
/* API keys (CRA-57; CRA-82 on Cloudflare's API token screen). The reveal
   panel: the new key on one line with its Copy button; long keys wrap. */
body.pg-settings #api-keys .x-card { margin-bottom: 16px; }
body.pg-settings .key-reveal { border-color: var(--teal); }
body.pg-settings .key-secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
body.pg-settings #key-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--bg-soft); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; min-width: 0; flex: 1 1 260px; }
/* Plan / reads today / keys, in one strip above the table. */
body.pg-settings .key-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.pg-settings .key-stats .x-label { margin-bottom: 4px; }
body.pg-settings .key-stat { font-size: 15px; font-weight: 700; color: var(--ink); }
body.pg-settings .key-date { max-width: 220px; }
body.pg-settings #key-create-form .field-label { margin-top: 12px; }
body.pg-settings .key-summary { margin-bottom: 8px; }
body.pg-settings .key-summary .pf-label { flex: 0 0 120px; }
body.pg-settings .key-summary .pf-value { flex: 1 1 auto; min-width: 0; word-break: normal; overflow-wrap: anywhere; } /* .pf-value breaks mid-word (break-all); here words stay whole */
/* The menu column's .sr-only heading is absolutely placed: keep it inside the scroll box. */
body.pg-settings .key-table-card .dt-scroll { position: relative; }
/* The keys table is CRA-83's table.dt (13px cells, 11px headings, compact
   rows, sorted by portal-table.js); only its own cells are styled here. The
   name cell is dt-wrap, so a key's note gets its own short line. */
body.pg-settings .key-name-t { font-weight: 600; color: var(--ink); }
body.pg-settings .key-note { color: var(--muted); font-size: 12px; }
body.pg-settings .key-table td.key-name { min-width: 140px; }
/* CRA-94: who made the key is the one long cell: on desktop it clips to
   one line on narrower desktops (the full address is its title), so the
   table fits its card. */
@media (min-width: 641px) and (max-width: 1199px) { body.pg-settings .key-table td.key-by { max-width: 14em; overflow: hidden; text-overflow: ellipsis; } }
body.pg-settings .key-act-h, body.pg-settings .key-act-c { width: 48px; text-align: right; }
body.pg-settings .key-act { position: relative; display: inline-block; }
body.pg-settings .key-more { width: 28px; height: 28px; font-size: 18px; line-height: 1; color: var(--muted); }
body.pg-settings .key-menu { position: fixed; z-index: 50; min-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); padding: 4px; text-align: left; }
body.pg-settings .key-menu[hidden] { display: none; }
body.pg-settings .key-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
body.pg-settings .key-menu-item:hover, body.pg-settings .key-menu-item:focus { background: var(--bg-soft); outline: none; }
body.pg-settings .key-menu-item.danger { color: var(--red); }
body.pg-settings .key-empty { margin: 8px 0 0; }
body.pg-settings .key-empty[hidden], body.pg-settings .key-table[hidden] { display: none; }
@media (max-width: 640px) {
  body.pg-settings .key-stats { grid-template-columns: 1fr; gap: 12px; }
  body.pg-settings .key-summary .pf-label { flex-basis: 100%; }
}
/* Activity (CRA-62): the sentence reads in the label weight, the time quiet below. */
body.pg-settings #activity-list .pf-label { font-size: 15px; font-weight: 600; }
body.pg-settings #activity .set-actions { margin-top: 4px; }
body.pg-settings .agency-fields { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
/* Branding card: one column — Role, Logo (report masthead preview), agency fields. */
body.pg-settings .brand-stack { flex: 1; min-width: 0; }
body.pg-settings .brand-logo { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
body.pg-settings .brand-logo[hidden] { display: none; }
body.pg-settings .brand-logo .pf-label { display: block; }
body.pg-settings .brand-logo .file-pill { width: 100%; }
/* The preview is a slice of a report page: always light (that's what
   prints), so it pins the light palette even on the dark theme. Logo and
   type sizes match the study/papers masthead. */
body.pg-settings .brand-preview {
  --teal: #1e5f7b; --ink: #1a2b33; --ink-2: #3a4a52; --muted: #5a6f78;
  --surface: #fff; --border: #dde5e8; --red: #c0392b;
  margin: 0 0 14px; background: #fff; color: var(--ink); color-scheme: light;
  border: 1px solid #dde5e8; border-radius: 12px; padding: 18px 32px 28px;
  box-shadow: 0 1px 3px rgba(15, 60, 80, .08);
}
body.pg-settings .brand-preview-cap { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
body.pg-settings .brand-preview-mast { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 3px solid var(--teal); padding-bottom: 22px; }
body.pg-settings .brand-preview .logo-slot { flex-shrink: 0; }
body.pg-settings .brand-preview .logo-wrap img { max-height: 64px; max-width: 260px; object-fit: contain; border: none; border-radius: 0; padding: 0; background: none; }
body.pg-settings .brand-preview .placeholder-logo { font-size: 14.5px; font-weight: 800; color: var(--teal); border: 2px dashed #b9cdd6; border-radius: 10px; padding: 14px 20px; display: inline-block; }
body.pg-settings .brand-preview .logo-wrap:not([hidden]) + .placeholder-logo { display: none; }
body.pg-settings .brand-preview .who { text-align: right; min-width: 0; }
body.pg-settings .brand-preview .aname { font-size: 20px; font-weight: 800; color: var(--teal); overflow-wrap: break-word; }
body.pg-settings .brand-preview .aaddr { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; white-space: pre-line; overflow-wrap: break-word; }@media (max-width: 640px) {
  body.pg-settings .brand-preview { padding: 14px 18px 20px; }
  body.pg-settings .brand-preview-mast { flex-wrap: wrap; }
}
body.pg-wizard .site-pick { margin-bottom: 16px; padding: 12px; background: #fff8f0; border: 1px solid #ffd8a8; border-radius: 8px; }
body.pg-wizard .combine-box { margin: 12px 0; padding: 10px; background: #f0f7ff; border-radius: 8px; }
body.pg-llmsgen .sec-title { flex: 1; margin-right: 8px; }
body.pg-papers .star-on { color: var(--orange); }
body.pg-papers .star-off { color: #c3d0d7; }
body.pg-robotsval .num, body.pg-schemaval .num { color: var(--c); }
.u-mt-24 { margin-top: 24px; }
body.pg-settings .acct-content h1.brand-head { margin-bottom: 24px; }

/* Tool hero kicker (Kuang, 2026-10-14): the orange "Free tool · No signup"
   line on the five portal tool heroes goes a little bigger than the global
   13px kicker — scoped to tool heroes inside the app shell only. */
.acct-content .hero .kicker { font-size: 14.5px; }
:root[data-theme="dark"] body.pg-robotsval .badge-warn { background: var(--surface-2); color: var(--amber); }
:root[data-theme="dark"] body.pg-wizard .site-pick { background: var(--surface-2); border-color: #5c4d1c; }
:root[data-theme="dark"] body.pg-robotsval .mode-toggle button.active { color: var(--ink); }
:root[data-theme="dark"] .output-pane pre, :root[data-theme="dark"] body.pg-schemaval details.raw-json pre { color: #d9e8ee; }
:root[data-theme="dark"] body.pg-wizard .combine-box { background: var(--surface-2); }
/* Reports tab (2026-10-15): icon actions, delivery switches, badge, history table. */
.icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--teal); cursor: pointer; vertical-align: middle; }
.icobtn:hover { background: var(--surface-2); }
.mons-tos { display: block; font-size: 14.5px; margin: 8px 0 12px; }

.switch { font-size: 13px; }
.share-pg .sub { color: var(--muted); margin: 0 0 16px; }
.share-pg .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 14px 0; }
.share-pg .muted { color: var(--muted); }
.share-pg .foot { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 26px; }

/* Claude portal build (2026-10-16): x- layout helpers used by the generated screens.
   Presentation only — no behavior. Component styles stay in shared.css. */
.x-field { display: flex; flex-direction: column; gap: 4px; }
.x-field input { width: 100%; }
.x-full { width: 100%; justify-content: center; }
.x-row .show-pw { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.x-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.x-card-head h2 { font-size: 17px; font-weight: 800; margin: 0; }
.x-link { display: inline-flex; align-items: center; gap: 4px; color: var(--teal); font-weight: 600; font-size: 13px; text-decoration: none; }

.x-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin: 0 0 8px; }


.x-table { width: 100%; border-collapse: collapse; }
.x-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--line, var(--border)); }
.x-table td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line, var(--border)); }
.x-table tbody tr { cursor: pointer; }
.x-table tbody tr:hover { background: var(--bg-soft); }

/* Claude portal build: sites page + shared bits. */
.muted { color: var(--muted); }
.x-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; }
.x-search { position: relative; flex: 1 1 280px; max-width: 420px; display: block; }
.x-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.x-search input { width: 100%; }
.x-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.x-pager[hidden] { display: none; }
.icobtn[disabled] { opacity: .4; cursor: default; }
.pill.good { background: var(--green-bg); color: var(--ok); }
.pill.warn { background: #fff6ea; color: var(--orange-text); } /* M10: #b85300 on --amber-bg is 4.48:1; this tint gives 4.59:1 */
:root[data-theme="dark"] .pill.warn { background: var(--amber-bg); }
.pill.bad { background: var(--red-bg); color: var(--red); }
body.pg-report .rank-card { display: block; }
body.pg-report .mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
body.pg-report .mode-toggle button { padding: 0 16px; height: 32px; background: transparent; border: 0; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--muted); }
body.pg-report .mode-toggle button.active { color: var(--teal); background: var(--bg-soft); }

/* Report panels: only the active tab shows (the x-stack flex must not win). */
body.pg-report .rep-panel { display: none; }
body.pg-report .rep-panel.active { display: block; }
body.pg-report .rep-panel.x-stack.active { display: flex; }
body.pg-report .x-mast { padding-top: 64px; }
body.pg-report .plan-table td:nth-child(4) { white-space: nowrap; }
body.pg-report .pro-group-header { background: transparent; border: 0; padding: 0; }
body.pg-report .plan-box-msg { white-space: pre-wrap; }@media print { body.pg-report .rep-panel { display: block !important; } }
body.pg-report .x-mast { align-items: start; }
/* Masthead actions: their own right-aligned row above the grid cells —
   absolute positioning clipped the verdict at app content widths. */
body.pg-report .x-mast { padding-top: 24px; }
body.pg-report .x-mast-actions { position: static; grid-column: 1 / -1; justify-self: end; }
.x-card-head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.x-table { width: 100%; border-collapse: collapse; }
.x-table th { padding: 0 8px 8px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.x-table td { height: 48px; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.x-table tbody tr { position: relative; }
.x-table tbody tr:hover { background: var(--bg-soft); }
.x-table tfoot td { height: auto; border-bottom: 0; }
.x-table .x-num { text-align: right; }
.x-offer-act .mons-tos { margin: 0; }
.x-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.x-split { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.x-row:has(> .x-row-lines) { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.x-row:has(> .x-row-lines):last-child { border-bottom: 0; }

/* Portal design — tool pages */
.x-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.x-page-head h1 { margin: 0; }
.x-head-sub { margin: 4px 0 0; color: var(--muted); }
.x-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.x-link { display: inline-flex; align-items: center; gap: 8px; }
.x-pack .btn { margin-top: 16px; width: 100%; }
.x-sec-h { font-size: 17px; font-weight: 800; margin: 0 0 16px; }

/* Settings switch rows (from the design batch's settings page). */
.x-sw-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line, var(--border)); }
.x-sw-row:last-child { border-bottom: 0; }
.x-sw-row p { margin: 4px 0 0; color: var(--muted); }
/* Settings switch: visually-hidden native checkbox drives the track + knob. */
.x-switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.x-switch-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; appearance: none; -webkit-appearance: none; }
.x-switch-track { position: relative; display: block; width: 42px; height: 24px; border-radius: 999px; background: var(--line, var(--border)); transition: background .15s; }
.x-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.x-switch-input:checked + .x-switch-track { background: var(--green); }
.x-switch-input:checked + .x-switch-track::after { left: 21px; }
.x-switch-input:focus-visible + .x-switch-track { outline: 2px solid var(--teal); outline-offset: 2px; }
.x-switch-input:disabled + .x-switch-track { opacity: .5; }
.x-switch:has(.x-switch-input:disabled) { cursor: default; }
/* ===== Robots tool — Claude layout (Build | Check) ===== */
.x-ico{width:16px;height:16px;flex:none}
.x-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.x-picker-sel{display:flex;align-items:center;gap:8px}
.x-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:32px;align-items:start}
.x-sticky{position:sticky;top:88px}
.x-field{margin-bottom:16px}
.x-from{font-size:12px;color:var(--muted);font-weight:600;margin-left:8px}
.x-rep-row .field-input{flex:1;margin:0}
.x-counts{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.x-icons{display:flex;gap:8px}
.x-full{margin-top:32px}
.x-mode{margin-bottom:24px}
.bots{display:flex;flex-direction:column}
.bot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.bot-row:last-child{border-bottom:none}
.bot-name{font-weight:700}
.bot-opts{display:flex;gap:14px;flex:none}
.bot-opts .opt{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.bot-row-master{border-bottom:2px solid var(--border)}
.bot-row-master .bot-name{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.bot-row-master .opt{font-weight:600}
/* Master radios sit in the per-crawler radio columns: each label copies a bot
   label's geometry (radio + hidden "Allow"/"Block" at the same weight), and the
   "Allow all"/"Block all" text floats above, centered on its radio. */
body.pg-robots .bot-row-master{padding-top:28px}
body.pg-robots .bot-row-master .opt{font-weight:inherit}
body.pg-robots .bot-row-master .opt-dot{position:relative;display:inline-flex}
body.pg-robots .bot-row-master .opt-text{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;white-space:nowrap;font-size:13px;font-weight:600;line-height:1.2}
body.pg-robots .bot-row-master .opt input{margin:0}
body.pg-robots .bot-row-master .opt-ghost{visibility:hidden}
.add-row-btn{margin-top:4px}
.type-tabs{display:flex;gap:8px;flex-wrap:wrap}
.type-tab{padding:8px 16px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.type-tab.active{background:var(--teal);border-color:var(--teal);color:#fff}
.type-tab:hover:not(.active){border-color:var(--teal)}
body.pg-robotsval .line-table td.num{color:var(--muted);white-space:nowrap}
body.pg-robotsval .line-table td code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px}

/* Home "Your sites": fixed layout so sorting/paging never moves the columns. */
table.sites { table-layout: fixed; }
table.sites th:nth-child(1) { width: 46%; }
table.sites th:nth-child(2) { width: 14%; }
table.sites th:nth-child(3) { width: 18%; }
table.sites th:nth-child(4) { width: 16%; }
table.sites th:nth-child(5) { width: 6%; }
table.sites td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brandrow img { height: 30px; width: auto; display: block; }
/* Brandmark lockup (mascot + two-tone wordmark): the same rules the
   SMB audience block carries for the portal brandmark, stated once
   for every audience — the admin rail uses this lockup on all
   storefronts (its brandrow is the mascot + the brand wordmark). */
.brandrow a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brandrow .brand-text { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.brandrow .brand-text em { font-style: normal; color: var(--orange-text); }

/* Portal Tools hub (portal/tools.html): each card is one link. */
body.pg-tools .x-tool-grid { margin-top: 24px; gap: 16px; align-items: stretch; }
body.pg-tools .x-tool-link { text-decoration: none; color: inherit; }
body.pg-tools .x-tool-link:hover { border-color: var(--teal); }
body.pg-tools .x-tool-link .x-card-head { margin-bottom: 8px; }
body.pg-tools .x-tool-link .x-ico { color: var(--muted); }
body.pg-tools .x-tool-link p { margin: 0; }

/* Portal tool pages ported from the old app (tool-llms, tool-schema-wizard,
   tool-schema-validator, tool-parity). The old pages' scoped rules
   (pg-llmsgen / pg-wizard / pg-schemaval / pg-parity) still style the
   tool bodies; these only fit them into the portal cards. */
body.pg-llms .section-card .sec-title { width: auto; max-width: 240px; }
body.pg-llms .output-pane pre, body.pg-schemawiz .output-pane pre { margin-top: 0; }
body.pg-schemawiz .type-tabs { margin-bottom: 16px; }
body.pg-schemavalidator .x-counts { margin-top: 0; }
body.pg-paritytool .parity-pane.x-card { border-radius: var(--radius); padding: 24px; }
body.pg-paritytool .parity-pane .x-card-head { margin-bottom: 8px; }
body.pg-paritytool .parity-pane .x-card-head .x-ico { color: var(--muted); }

/* Portal rail: "Client reports" is a menu, not a page (Kuang). A native
   <details> — the header opens/closes the sub-list, nothing navigates;
   the sub-links go out to the client handouts. Collapsed by default. */
.navgroup > summary { list-style: none; cursor: pointer; user-select: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::marker { content: ""; }
.navgroup > summary:hover { color: var(--ink); }
.navgroup[open] > summary { color: var(--ink); }
.navgroup .navchev { width: 14px; height: 14px; flex: none; margin-left: auto; transition: transform .15s ease; }
.navgroup[open] > summary .navchev { transform: rotate(180deg); }
.navsub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 18px; padding-left: 12px; border-left: 2px solid var(--border); }
.navgroup:not([open]) .navsub { display: none; }
.navsub-link { display: block; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); text-decoration: none; }
/* Rail submenu group labels (admin Tools: Customer / Scan / System tools) */


/* The tools page's hash highlight (showTool toggles .active on the
   rail link carrying data-tool-link; the live rail's tool links carry
   it since admin-tools-submenus-1020). Same treatment as .on. */
.navsub-link.active { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
.navsub-link:hover { background: var(--bg-soft); color: var(--ink); }

/* Tool verdicts: ONE result banner for every tool (robots, llms.txt,
   schema validator, parity) — Kuang, 2026-10-16. Pill spec (rounded,
   pill tints, no border) + the small circular icon (20px solid dot,
   white glyph, mx-dot colors): is-pass ✓, is-fail ✕, is-warn !.
   No filled bars, no emoji. Block + absolute icon (not flex) so an
   inline <strong> lead stays in the same text run. */
.tool-verdict { position: relative; display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin-bottom: 16px; padding: 6px 16px 6px 38px; border-radius: 16px; font-size: 14.5px; font-weight: 600; line-height: 20px; color: var(--ink); background: var(--soft-2); }
.tool-verdict:empty { display: none; }
.tool-verdict::before { position: absolute; left: 8px; top: 6px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; }
.tool-verdict strong { font-weight: 700; }
.tool-verdict.is-pass { background: var(--green-bg); }
.tool-verdict.is-pass::before { content: "\2713"; background: #1e7e34; }
.tool-verdict.is-fail { background: var(--red-bg); }
.tool-verdict.is-fail::before { content: "\2715"; background: #b3362b; }
.tool-verdict.is-warn { background: var(--amber-bg); }
.tool-verdict.is-warn::before { content: "!"; background: #d97706; }

/* Tool action buttons with a leading icon: icon + label on one line,
   and the footer note shrinks instead of the button (the schema
   validator's "Validate schema" wrapped its icon above the word). */

/* Portal top bar (Kuang, 2026-10-16): the app bar on every portal page —
   tokens pill + Buy, Monitoring pill, New scan, theme toggle, profile. */
.apphead a.profile-btn { text-decoration: none; }
.apphead .token-pill svg { flex: none; }

/* Scan wizard modal: lives here (not Home's page styles) because the top
   bar's New scan opens it on every portal page. */
.scan-modal-backdrop { position: fixed; inset: 0; background: rgba(13, 33, 44, .48); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 60; overflow-y: auto; }
.scan-modal-backdrop[hidden] { display: none; }
.scan-modal-card { position: relative; width: min(680px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 38px 24px 24px; box-shadow: 0 24px 60px rgba(13, 33, 44, .25); }
.scan-modal-card .card { padding: 24px; box-shadow: none; }
.scan-modal-card .wizstep { margin-top: 16px; }
.scan-modal-card .x-card-head h2 { font-size: 17px; font-weight: 800; margin: 0; }
.scan-modal-card .scanbar { display: flex; gap: 10px; }
.scan-modal-card .scanbar input { flex: 1; }
.scan-modal-x { position: absolute; top: 6px; right: 8px; z-index: 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.scan-modal-x svg { width: 16px; height: 16px; }

/* Portal report (portal/report.html): score + band on one row, the
   web-person hand-off, What AI sees, and the Local tab. Bar lengths come
   in as --w / --h set from the report data. */
.p-rep-scorerow { display: flex; align-items: center; justify-content: center; gap: 12px; }
.p-rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.p-rep-gap { margin-top: 16px; }
.p-rep-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.p-rep-cardhead h3 { font-size: 17px; font-weight: 800; margin: 0; }
.p-rep-flush { margin: 0 0 10px; }
.p-rep-err { margin: 0 0 10px; color: var(--red); font-size: 13px; }

/* Fixes: who filter + group headings */
.p-rep-who { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.p-rep-who[hidden] { display: none; }
.p-rep-who span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.p-rep-who span.on { background: var(--teal); color: #fff; }
#p-rep-findings > [data-who][hidden], #p-rep-plan-body tr[hidden] { display: none; }

/* perf-1021 fix 4: reserve the report page's layout before its data
   lands, so the page composes in one pass (was CLS 0.36-0.38).
   Conditional tabs hold their space via visibility instead of
   display:none — revealing one no longer shoves the Monitoring tab
   sideways; portal-report.js collapses any tab the data does not call
   for (settleTabs) and drops .loading once the render lands. The mast,
   tiles and fixes panel hold the heights the rendered report occupies,
   and the You/Web-person seg holds its fixhead space (it otherwise
   grows the fixhead ~7px when wireWhoFilter shows it). These rules are
   report-only: .loading, .tab-rsv and the #p-rep-* ids exist only on
   report.html. */
.tab-rsv { visibility: hidden; }
.content.loading .mast { min-height: 144px; }
.content.loading #p-rep-tiles { min-height: 128px; }
.content.loading [data-panel="fixes"] { min-height: 1273px; }
.content.loading [data-panel="fixes"] > .card { min-height: 266px; }
.content.loading .p-rep-who[hidden] { display: inline-flex !important; visibility: hidden; }

/* Local */
.p-rep-compadd { margin-bottom: 4px; }
#p-comp-list[hidden] { display: none; }
#p-comp-list li { grid-template-columns: 1fr auto; }

/* Portal settings (portal/settings.html, approved mock 2026-10-16): the
   rail swaps to Settings mode (back link + SETTINGS label + four
   sections) and one section shows at a time. Scoped to body.pg-settings
   so the other portal pages keep their own rail styles untouched. */
body.pg-settings .navitem:hover { color: var(--ink); }
body.pg-settings .rail-back { margin-bottom: 10px; }
body.pg-settings .rail-back svg { width: 16px; height: 16px; }
body.pg-settings .rail-back:hover { background: var(--bg-soft); color: var(--ink); }
body.pg-settings .rail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 10px; }
/* CRA-94 (Kuang 2026-10-23 20:15, on Settings > API keys: "you have so
   much real estate, why is the table so small?"): the column was capped
   at 720px inside a 1200px content cap, so the keys table scrolled
   sideways in its card while most of the screen sat empty. Form panels
   keep the 720px reading width; the panels that hold tables (Team,
   Activity, API keys: .p-set-wide) take the whole content width;
   the content cap is the shell's own (1600px, every page alike: Q32).
   Cards in a wide panel that hold no table (create key, invite, stats)
   keep the form width. */
.p-set-col { max-width: none; }
.p-set-panel:not(.p-set-wide) { max-width: 720px; }
.p-set-wide .card:not(:has(table)) { max-width: 720px; }
.p-set-panel[hidden] { display: none; }
.p-set-h1 { font-size: 30px; margin: 0 0 4px; }
/* CRA-148 (Kuang 2026-10-24, API keys: "make it the same length as the
   first card"): a settings intro is capped at the card column below it —
   the same 720px measure — so in a wide panel it no longer runs the page. */
.p-set-sub { color: var(--muted); margin: 0 0 24px; max-width: 720px; }
.p-set-cardsub { color: var(--muted); margin: 4px 0 12px; }
.p-set-note { color: var(--muted); margin: 12px 0 0; }

/* ===== Portal client reports: study.html + papers.html (body.pg-pdoc) =====
   The old app's study handout and GEO papers in the portal shell. The
   document styles are the existing body.pg-agencyrep / body.pg-papers
   rules above (the pages carry those classes too); this block adds the
   shell (same as Settings — no private <style> block), the chart colours
   that were SVG attributes, and print rules that drop the shell. */
/* the paper on screen is marked in the rail */
body.pg-pdoc .navsub-link.on { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
/* the current sub-link is marked in the rail (admin rail, same shell) */
.navsub-link.on { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
/* page chrome = tool-page standard: .x-page-head with .page-h1 + .x-head-sub,
   Download PDF as an .icobtn on the right (same as the tools' Download) */
/* papers: the Download icon sits right beside the heading block, not at the far edge */
body.pg-papers .doc-head .x-page-head { justify-content: flex-start; align-items: center; }
/* study: same placement — the Download button sits beside the heading
   block, not at the far right edge (Kuang, 2026-10-17) */
body.pg-agencyrep .doc-head .x-page-head { justify-content: flex-start; align-items: center; }
body.pg-pdoc .profile-nudge { display: none; margin-top: 16px; padding: 12px 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink-2); font-size: 13px; line-height: 1.55; }
body.pg-pdoc .profile-nudge a { color: var(--teal); font-weight: 700; }
body.pg-pdoc .profile-nudge.show { display: block; }
/* study bar chart */
body.pg-pdoc .ch-g { font-family: inherit; font-size: 13px; }
body.pg-pdoc .ch-lbl { fill: var(--ink-2); }
body.pg-pdoc .ch-val { fill: var(--doc-ink); font-weight: 700; }
body.pg-pdoc .ch-track { fill: #eef3f5; }
body.pg-pdoc .ch-bar { fill: #1e5f7b; }
body.pg-pdoc .ch-bar.ch-bar-hot { fill: #ff7e00; }
/* papers: donut, gauges, pictogram glyphs */
body.pg-pdoc .donut-box svg { width: 150px; height: 150px; }
body.pg-pdoc .donut-track, body.pg-pdoc .donut-arc { fill: none; stroke-width: 10; }
body.pg-pdoc .donut-track { stroke: var(--line-2); }
body.pg-pdoc .donut-arc { stroke: #ff7e00; stroke-linecap: round; }
body.pg-pdoc .gauge svg { width: 86px; height: 86px; }
body.pg-pdoc .gauge-track, body.pg-pdoc .gauge-arc { fill: none; stroke-width: 9; }
body.pg-pdoc .gauge-track { stroke: var(--line-2); }
body.pg-pdoc .gauge-arc { stroke-linecap: round; }
body.pg-pdoc .gauge-teal { stroke: #1e6f67; }
body.pg-pdoc .gauge-orange { stroke: #ff7e00; }
body.pg-pdoc .gauge-amber { stroke: #f5a623; }
body.pg-pdoc .pictogram svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }@media print {
  body.pg-pdoc .side, body.pg-pdoc .apphead, body.pg-pdoc .no-print { display: none !important; }
  html:has(body.pg-pdoc), body.pg-pdoc { display: block !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  body.pg-pdoc .shell, body.pg-pdoc .shell > div, body.pg-pdoc .content, body.pg-pdoc #shareable-doc { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  body.pg-pdoc .doc-sheet { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 0.12in !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; overflow-wrap: break-word; }
  body.pg-pdoc .doc-sheet * { max-width: 100%; min-width: 0; }
  /* papers text column keeps its 240px floor so it wraps under the chart
     instead of collapsing to a few px (one word per line) */
  body.pg-pdoc .doc-sheet .u-flex240 { min-width: 240px; }
  /* masthead right block shrinks and wraps instead of running off the edge */
  body.pg-pdoc .masthead .who { min-width: 0; max-width: 100%; }
  body.pg-pdoc .masthead .who .aname, body.pg-pdoc .masthead .who .aaddr { overflow-wrap: break-word; max-width: 100%; }
  body.pg-pdoc .doc-sheet img, body.pg-pdoc .doc-sheet svg { max-width: 100% !important; }
  /* page breaks: blocks never split, headings stay with what follows */
  body.pg-pdoc .masthead, body.pg-pdoc .stat-card, body.pg-pdoc .finding, body.pg-pdoc .chart-wrap, body.pg-pdoc .cta-block,
  body.pg-pdoc .chart-row, body.pg-pdoc .gauge, body.pg-pdoc .step, body.pg-pdoc .dp-row, body.pg-pdoc .l-row,
  body.pg-pdoc .c-row, body.pg-pdoc table.bots tr { break-inside: avoid; }
  body.pg-pdoc .doc-title, body.pg-pdoc .sec-title, body.pg-pdoc .sec-sub, body.pg-pdoc .kicker { break-after: avoid; }
  body.pg-pdoc .ch-track, body.pg-pdoc .ch-bar, body.pg-pdoc .donut-arc, body.pg-pdoc .gauge-arc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}/*/ONLY*/
/* Print = the invoice only, same discipline as the report sheets: the shell
   (rail, top bar), the billing page behind it and the Back/Download
   controls are dropped; every ancestor of the card becomes a plain block at
   auto width so the card lays out at the printable width of the sheet,
   nothing clipped. Only applies while the invoice view is open.
   The invoice prints on its OWN named page with margin: 0
   (portal-tokens-visual-fix-1020): the shared @page box (0.5in/0.6in)
   leaves a margin band and the browser prints its own header/footer
   into it — date + page title on top, URL + page number below (Kuang,
   2026-10-20: "why is there a header on this pdf print"). With a zero
   margin there is no band to print into; the card carries the old
   sheet margins as its own padding instead, so the sheet the customer
   sees is unchanged — invoice only, one page. The named page scopes
   this to the invoice alone; the report sheets keep the shared @page. */
@page invoice-sheet { size: letter; margin: 0; }@media print {
  body:has(#invoice-view:not([hidden])) :is(.side, .apphead, #tokens-main),
  #invoice-view > :not(.invoice-card) { display: none !important; }
  html:has(#invoice-view:not([hidden])), body:has(#invoice-view:not([hidden])) { display: block !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  body:has(#invoice-view:not([hidden])) :is(.shell, .shell > div, .content, #invoice-view) { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  #invoice-view .invoice-card { page: invoice-sheet; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0.5in 0.6in !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; overflow: visible !important; overflow-wrap: break-word; break-inside: avoid; }
  #invoice-view .invoice-card * { max-width: 100%; min-width: 0; }
}

/* ---------- Text inputs: ONE spec (Kuang 2026-10-16) ----------
   Every text field, search box, textarea and select in the portal. Older
   per-page/per-tool input rules were deleted or cut down to layout only
   (width/flex); nothing else may set an input's border, radius, padding,
   font or focus. :root raises this above the page <style> blocks.
   Focus = teal border + a soft ring drawn with box-shadow, so focusing a
   field can never change its size or move the layout around it (border
   width and padding are identical in every state). 40px tall, same as a
   button. */
:root :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="color"]), textarea, select) {
  box-sizing: border-box; margin: 0;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 400; line-height: 20px;
  outline: none; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
:root :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="color"]), textarea, select):focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); outline: none;
}
:root :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root :is(input, textarea, select):disabled { opacity: .6; cursor: not-allowed; }@media (pointer: coarse) { :root :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"]), textarea, select) { font-size: 16px; } }
/* layout exception: the search box leaves room for its magnifier icon */
:root .x-search input { padding-left: 36px; }
/* CRA-147: the phone field's country-code control (.ph-cc, portal-phone.js)
   is a box beside the number field: same background, text and border
   tokens as the field, in both themes (its select is invisible inside it). */
:root .ph-cc { background: var(--surface); color: var(--ink); border-color: var(--border); }

/* ---------- Cards: ONE spec (Kuang 2026-10-16) ----------
   Every portal card (.card, alone or with .x-card; the settings .pf-card
   list card) is the same box: surface, 1px border, 12px radius, 24px
   inset. .pf-card's rows carry 18px of their own, so its block padding is
   the remainder — same visual inset. Head / body / foot stack in a
   column with the foot pinned to the bottom. A foot that hosts an inline
   form (Tokens: Redeem a code) reserves one control row (40px) so opening
   the form never grows the card.
   Cards placed in a row always end level: every card row stretches its
   cards to the tallest one. Exception: sticky output panes (tool pages)
   keep their own height so they can follow the scroll. */
.card, .pf-card { box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: none; }
.pf-card { padding-block: 6px; margin-bottom: 20px; }
.x-card { display: flex; flex-direction: column; }
.x-card-body { flex: 1; }
.x-card-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 8px; }
.x-card-foot:has(form) { min-height: 56px; }
.x-card-foot > form { margin-top: 0 !important; } /* the page's inline 8px top gap would make the row 48px */
:is(.x-row, .statrow, .p-rep-grid, .x-kpis, .x-split, .x-grid22, .x-tool-grid, .x-row2, .x-row3, .x-grid2, .x-status, .x-deliv, .monc-reports-grid, .monc-two-eq, .aeo-rec-two) { align-items: stretch; }
:is(.x-row, .statrow, .p-rep-grid, .x-kpis, .x-split, .x-grid22, .x-tool-grid, .x-row2, .x-row3, .x-grid2, .x-status, .x-deliv) > :is(.card, .x-card, .x-kpi) { height: auto; margin: 0; align-self: stretch; }
.x-tool-grid > .x-sticky { align-self: start; }

/* ---------- Rail logo follows the theme ----------
   Light: seraverra-logo.png (the <img> in every page's .brandrow).
   Dark: the same <img> box paints seraverra-logo-dark.png instead — the
   light file is pushed out of its box with object-position and the dark
   file is drawn as the box background (same 1380x290 artwork, so the box
   size never changes). Driven by the existing data-theme="dark" switch;
   no page markup involved. */
/*ONLY:agency,combined*/:root[data-theme="dark"] .brandrow img { object-position: -99999px 0; background: url("seraverra-logo-dark.png") center / contain no-repeat; }/*/ONLY*/
@media print { :root[data-theme="dark"] .brandrow img { object-position: 50% 50%; background: none; } }
.icobtn.is-busy svg { animation: pdl-pulse 1s ease-in-out infinite; }
@keyframes pdl-pulse { 50% { opacity: .3; } }
/* Top-bar Log out (Kuang, 2026-10-17): visible, not buried in settings.
   Same 40px height and muted -> teal hover as the theme toggle. */
.logout-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; flex: none;
  border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
}
.logout-btn:hover { color: var(--teal); background: var(--bg-soft); }
.logout-btn svg { width: 19px; height: 19px; flex: none; }@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pulse-dot, .fs-step.active .dot::after, .icobtn.is-busy svg { animation-duration: 2.4s !important; }
}

/* ===== Portal shell (Q32 / PT3, Kuang Oct 17 22:45) =====
   ONE source for the rail + top bar + content frame on every portal page.
   Was 18 copies: an inline <style> in 15 pages + body.pg-settings and
   body.pg-pdoc blocks here. Kept at the end of the file so it sits where
   the inline copies did in the cascade (after everything above). */
body { margin: 0; }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; }
.side .brandrow { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; }
.navitem { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.navitem.on { background: var(--bg-soft); color: var(--ink); }
.navitem svg { width: 17px; height: 17px; flex: none; }
.side .sp { flex: 1; }
.apphead { height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--surface); }
/* CRA-94: 1600px (was 1200px): on a wide window the portal uses the room
   (Kuang: "you have so much real estate"); one shell for every page (Q32). */
.content { padding: 28px 32px 40px; max-width: 1600px; }@media (min-width: 821px) {
  body[data-admin-gate] .shell { grid-template-columns: 200px 1fr; }
  /* CRA-94: the portal column too (as admin's, CRA-85): a wide table must
     never push the page past the window; it fits or scrolls in its card. */
  .shell > div { min-width: 0; }
  body[data-admin-gate] .content { max-width: none; padding: 28px 20px 40px; }
}

/* Q33 / PT9 (Kuang, Oct 17 22:46): native radios and checkboxes wear the
   brand accent, not the browser's blue. */
input[type="radio"], input[type="checkbox"] { accent-color: var(--teal); }

/* Q33 / PT8 (Kuang, Oct 17 22:46): heading order — section heads are h2
   (report's site name is its h1), styled exactly as the h3s they replace. */
.sec-h { font-weight: 700; letter-spacing: normal; margin-bottom: 0; }
.p-rep-cardhead h2 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: normal; }
.p-rep-h1 { font-size: 17px; font-weight: 800; letter-spacing: normal; line-height: inherit; }@media (max-width: 820px) {
  .shell { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; position: relative; }
  .shell > div { display: contents; }
  .apphead { order: 1; height: auto; flex-wrap: wrap; justify-content: flex-start; gap: 10px 8px; padding: 12px 16px; }
  .apphead::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .apphead > * { order: 2; }
  .apphead > .theme-toggle, .apphead > .js-logout { order: 0; }
  .apphead > .theme-toggle { margin-left: auto; }
  .apphead > .js-new-scan { margin-left: auto; }
  .apphead > .profile-btn { display: none; }
  .apphead .token-pill { padding: 6px 12px; font-size: 13px; white-space: nowrap; min-width: 0; }
  .apphead .mon-pre { display: none; }
  .side { order: 2; flex-direction: row; flex-wrap: wrap; gap: 0; padding: 4px 6px; border-right: 0; border-bottom: 1px solid var(--border); }
  .side .brandrow { position: absolute; top: 12px; left: 16px; padding: 0; height: 36px; z-index: 2; }
  .side .brandrow img { height: 22px; width: auto; display: block; }
  .side .sp, .side .rail-label { display: none; }
  .navgroup { display: contents; }
  .side > .navitem, .navgroup > summary { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px; border-radius: 10px; font-size: 11px; line-height: 1.2; text-align: center; }
  .navitem[data-short] { font-size: 0; }
  .navitem[data-short]::after { content: attr(data-short); font-size: 11px; }
  .navgroup .navchev { display: none; }
  .navgroup::details-content { order: 10; flex-basis: 100%; min-width: 0; }
  .navgroup:not([open])::details-content { display: none; }
  .navsub { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin: 2px 0 4px; padding: 6px 0 2px; border-left: 0; border-top: 1px solid var(--border); }
  .navsub-link { white-space: nowrap; flex: none; }
  
  .navsub { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .content { order: 3; padding: 20px 16px 32px; min-width: 0; }
}@media screen and (max-width: 600px) {
  .shell .statrow { grid-template-columns: minmax(0, 1fr) !important; }
  .shell .mast { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .shell .mast > div[style*="text-align:right"] { text-align: left !important; }
  .shell .mast > div[style*="text-align:right"] > div:first-child { justify-content: flex-start !important; }
  .shell .catstrip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .shell .x-table td, .shell .x-table th { padding-left: 8px; padding-right: 8px; }
  .shell .x-table td { overflow-wrap: anywhere; }
  .shell .x-table th { white-space: nowrap; }
  .shell .x-add { flex-wrap: wrap; }
  .shell table.sites tr > :nth-child(4), .shell table.sites tr > :nth-child(5) { display: none; }
  .shell table.sites td, .shell table.sites th { padding-left: 6px; padding-right: 6px; }
  .shell table.sites th:nth-child(1) { width: 50%; }
  .shell table.sites th:nth-child(2) { width: 18%; }
  .shell table.sites th:nth-child(3) { width: 32%; }
  .shell .x-add input { min-width: 0; flex: 1 1 160px; }
  .shell .fixhead { flex-wrap: wrap; }
  .shell .fixhead h2 { white-space: nowrap; }
  body.pg-papers .pictogram { flex-wrap: wrap; gap: 4px; }
  .shell .x-table-card { padding-left: 16px; padding-right: 16px; }
  body.pg-papers .pictogram svg { width: 24px; height: 24px; }
  .shell [aria-label="Sites"] .x-table tr > :nth-child(3),
  .shell [aria-label="Sites"] .x-table tr > :nth-child(4),
  .shell [aria-label="Sites"] .x-table tr > :nth-child(6) { display: none; }
  .shell #mon-root .x-table-card .x-table tr > :nth-child(3),
  .shell #mon-root .x-table-card .x-table tr > :nth-child(5) { display: none; }
  .shell .x-picker, .shell .x-picker-sel { min-width: 0; max-width: 100%; }
  .shell .x-picker select { min-width: 0; max-width: 100%; }
  body.pg-papers .steps { grid-template-columns: minmax(0, 1fr) !important; }
  body.pg-agencyrep .stat-grid, body.pg-papers .stat-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   Page styles moved out of private <style> blocks
   (style-finish-1021, audit V3 / DECISIONS D12). Each page's
   rules are scoped to its body class so the move changes no
   other page's cascade. One sheet per page: portal/app.css.
   ============================================================ */

/* --- checkout.html (body.pg-checkout) --- */
/* CRA-69: the section below the plan cards stays hidden until the cards are drawn (no load-time jump). */
body.pg-checkout .co-wait {visibility:hidden}
body.pg-checkout .billing-toggle {display:inline-flex;background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:4px;margin:8px 0 4px}
body.pg-checkout .billing-toggle__btn {border:none;background:transparent;border-radius:999px;padding:8px 22px;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer}
body.pg-checkout .billing-toggle__btn--active {background:var(--teal);color:#fff}
:root[data-theme="dark"] .billing-toggle__btn--active {color:var(--bg)}
body.pg-checkout .x-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px;margin-bottom:32px}@media (max-width:820px) { body.pg-checkout .x-row {grid-template-columns:minmax(0,1fr)} }
body.pg-checkout .x-card {display:flex;flex-direction:column;padding:24px;margin:0}
body.pg-checkout .x-label {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px;min-height:24px}
body.pg-checkout .x-card-body {flex:1}
body.pg-checkout .x-card-foot {margin-top:auto;padding-top:16px}
body.pg-checkout .x-price {font-size:20px;font-weight:800;margin:8px 0 4px}
body.pg-checkout .x-pack .btn {width:100%}
body.pg-checkout .x-sec-h {font-size:17px;font-weight:800;margin:0 0 4px}
body.pg-checkout .co-sec-sub {margin:0 0 16px}
body.pg-checkout .co-item {cursor:pointer;scroll-margin-top:24px;transition:border-color .15s,box-shadow .15s}
body.pg-checkout .co-item.co-sel {border-color:var(--orange);box-shadow:0 12px 40px rgba(255,126,0,.16)}
body.pg-checkout .co-item .co-tag {margin-left:auto}
body.pg-checkout .co-pre {display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:28px 0 0;scroll-margin-bottom:24px}
body.pg-checkout .co-pre .mons-tos {margin:0}
body.pg-checkout .co-coupon {display:flex;gap:8px;align-items:center}
body.pg-checkout .co-coupon .field-input {max-width:180px}
body.pg-checkout .co-item .x-card-foot {flex-direction:column;align-items:stretch}
body.pg-checkout .co-msg {margin:8px 0 0;font-size:13px}
body.pg-checkout .co-msg.ok {color:var(--green)}
body.pg-checkout .co-msg.err {color:var(--red)}

/* --- index.html, portal home (body.pg-home) --- */
body.pg-home .scanbar { display: flex; gap: 10px; }
body.pg-home .scanbar input { flex: 1; padding: 13px 18px; font-size: 13px; border: 2px solid var(--teal); border-radius: 999px; background: var(--surface); font-family: inherit; }
body.pg-home .statrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 16px; }
body.pg-home .statcard { display: flex; flex-direction: column; }
body.pg-home .statcard .foot { margin-top: auto; padding-top: 12px; }
body.pg-home .mon-pitch-hint { margin-top: 8px; height: 28px; color: var(--teal); filter: blur(2.5px); opacity: .55; }
body.pg-home .mon-pitch-hint svg { display: block; width: 100%; height: 100%; }
body.pg-home table.sites { width: 100%; border-collapse: collapse; } /* cells + headings: the CRA-83 table standard (table.dt) */
body.pg-home .wizstep { margin-top: 16px; }
body.pg-home .sites-scroll table.sites { border-collapse: separate; border-spacing: 0; }
body.pg-home .x-card-head h2 { font-size: 17px; font-weight: 800; margin: 0; }
body.pg-home .scan-modal-backdrop { position: fixed; inset: 0; background: rgba(13, 33, 44, .48); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 60; overflow-y: auto; }
body.pg-home .scan-modal-backdrop[hidden] { display: none; }
body.pg-home .scan-modal-card { position: relative; width: min(680px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 38px 24px 24px; box-shadow: 0 24px 60px rgba(13, 33, 44, .25); }
body.pg-home .scan-modal-card .card { padding: 24px; box-shadow: none; }
body.pg-home .scan-modal-x { position: absolute; top: 6px; right: 8px; z-index: 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
body.pg-home .scan-modal-x svg { width: 16px; height: 16px; }

/* --- login.html (self-scoped: body.pg-login / .login-card) --- */
/* Centered sign-in card: no rail, no top bar. Card, button and input
   specs come from app.css; this section is layout only. */
body.pg-login { background: var(--bg-soft); }
.login-wrap { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.login-card { width: 100%; max-width: 400px; padding: 32px; }
.login-card .brandrow { display: flex; justify-content: center; margin-bottom: 24px; }
.login-card .brandrow img { height: 30px; width: auto; }
.login-card h1 { text-align: center; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.login-card .btn { width: 100%; }
.login-card .btn-google svg { width: 18px; height: 18px; }
.login-card .divider { margin: 20px 0 4px; }
.login-card .field-label { margin-top: 16px; }
.login-card input:not([type="checkbox"]) { width: 100%; }
.login-card .show-pw { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 8px 0 0; cursor: pointer; }
.login-card .show-pw input { width: 14px; height: 14px; }
.login-card .auth-error { margin: 16px 0 0; font-size: 13px; }
.login-card button[type="submit"] { margin-top: 24px; }
.login-card .switch { margin-top: 20px; font-size: 13px; }

/* --- monitoring-site.html (body.pg-monsite) --- */
body.pg-monsite .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-monsite .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-monsite .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-monsite .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-monsite .tile { text-align: left; cursor: pointer; }
body.pg-monsite .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-monsite .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-monsite .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-monsite .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-monsite .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-monsite .fixhead h3 { margin: 0; }
body.pg-monsite .locked { position: relative; overflow: hidden; }
body.pg-monsite .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-monsite .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-monsite .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-monsite .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-monsite .seg span.on { background: var(--teal); color: #fff; }
body.pg-monsite .mons-inactive {gap:5px}
body.pg-monsite .mons-inactive-line {margin-top:8px}
body.pg-monsite .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-monsite .icobtn svg { width: 16px; height: 16px; }
body.pg-monsite table.plan { width: 100%; border-collapse: collapse; }
body.pg-monsite table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-monsite table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
body.pg-monsite .x-8-4 { align-items: stretch; }
body.pg-monsite .x-8-4 > .x-stack > .x-card { flex: 1 1 auto; }
body.pg-monsite .x-8-4 .mons-chart { height: 280px; }
body.pg-monsite [data-mpanel="changes"] .x-7-5 { align-items: stretch; }
body.pg-monsite [data-mpanel="changes"] .x-7-5 > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.pg-monsite [data-mpanel="changes"] .x-7-5 > div > .x-card { flex: 1 1 auto; }
body.pg-monsite [data-mpanel="changes"] .x-7-5 > div:last-child > .x-card > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
body.pg-monsite [data-mpanel="changes"] .x-7-5 > div:last-child .monc-watch-row { flex: 1 1 auto; }

/* --- site.html (body.pg-site) --- */
body.pg-site .site-sum {display:flex;align-items:center;gap:24px;margin-bottom:16px}
body.pg-site .site-sum .big {font-size:54px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
body.pg-site .site-sum .meta {display:flex;flex-direction:column;align-items:flex-start;gap:8px}
body.pg-site .x-table {width:100%;border-collapse:collapse}
body.pg-site .x-table:not(.dt) th {font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);text-align:left;padding:8px 16px;border-bottom:1px solid var(--border)}
body.pg-site .x-table:not(.dt) td {height:48px;padding:0 16px;border-bottom:1px solid var(--border);font-size:13px}
body.pg-site .x-table tbody tr:last-child td {border-bottom:0}
body.pg-site .x-table tbody tr {cursor:pointer}
body.pg-site .x-table tbody tr:hover td {background:var(--bg-soft)}
body.pg-site .x-num {text-align:right;font-variant-numeric:tabular-nums}
body.pg-site .x-score {font-weight:800}
body.pg-site .x-chev {width:32px;color:var(--muted)}

/* --- monitoring.html (body.pg-monitoring) --- */
body.pg-monitoring .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-monitoring .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-monitoring .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-monitoring .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-monitoring .tile { text-align: left; cursor: pointer; }
body.pg-monitoring .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-monitoring .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-monitoring .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-monitoring .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-monitoring .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-monitoring .fixhead h3 { margin: 0; }
body.pg-monitoring .locked { position: relative; overflow: hidden; }
body.pg-monitoring .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-monitoring .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-monitoring .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-monitoring .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-monitoring .seg span.on { background: var(--teal); color: #fff; }
body.pg-monitoring .x-filters {display:inline-flex;gap:4px;margin-left:auto}
body.pg-monitoring .x-filters button {height:32px;padding:0 16px;border-radius:16px;border:1px solid var(--border);background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:inherit}
body.pg-monitoring .x-filters button[aria-pressed="true"] {background:var(--teal);border-color:var(--teal);color:#fff}
body.pg-monitoring .mons-inactive {gap:5px}
body.pg-monitoring .mons-inactive-line {margin-top:8px}
body.pg-monitoring .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-monitoring .icobtn svg { width: 16px; height: 16px; }
body.pg-monitoring table.plan { width: 100%; border-collapse: collapse; }
body.pg-monitoring table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-monitoring table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* --- report.html (body.pg-report) --- */
body.pg-report .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-report .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-report .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-report .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-report .tile { text-align: left; cursor: pointer; }
body.pg-report .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-report .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-report .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-report .tab.on { color: var(--teal); border-color: var(--teal); }@media (max-width: 480px) { body.pg-report .tabs { flex-wrap: wrap; } body.pg-report .tab { padding: 9px 10px; } }
body.pg-report .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-report .fixhead h3 { margin: 0; }
body.pg-report .locked { position: relative; overflow: hidden; }
body.pg-report .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-report .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-report .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-report .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-report .seg span.on { background: var(--teal); color: #fff; }
body.pg-report .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-report .icobtn svg { width: 16px; height: 16px; }
body.pg-report table.plan { width: 100%; border-collapse: collapse; }
body.pg-report table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-report table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
body.pg-report .p-aeo-t3 { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.35; }
body.pg-report td.p-aeo-named { color: var(--green); font-weight: 600; }
/* CRA-89: the PDF's real state under the buttons (it was a hover
   tooltip only), a tap flashes it; Try again when the PDF failed. */
body.pg-report .p-rep-pdf-state { margin: 0 0 10px; max-width: 34em; margin-left: auto; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
body.pg-report .p-rep-pdf-state.p-rep-pdf-flash { animation: p-rep-pdf-flash 1s ease-out; }
@keyframes p-rep-pdf-flash { from { color: var(--ink); background: var(--bg-soft); } to { color: var(--muted); background: transparent; } }
body.pg-report .p-rep-pdf-retry { font: inherit; font-weight: 600; color: var(--teal); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
/* CRA-89: on phones the questions x assistants grid stacks: one block
   per question, each assistant's answer on its own labelled line, so
   the grid fits 390px with no sideways scroll (it ran 121px over). */
@media (max-width: 640px) {
  body.pg-report table.p-aeo-grid, body.pg-report table.p-aeo-grid tbody, body.pg-report table.p-aeo-grid tr, body.pg-report table.p-aeo-grid td { display: block; width: auto; }
  body.pg-report table.p-aeo-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.pg-report table.p-aeo-grid tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  body.pg-report table.p-aeo-grid td { padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  body.pg-report table.p-aeo-grid td.p-aeo-q { font-weight: 700; color: var(--ink); padding-bottom: 6px; }
  body.pg-report table.p-aeo-grid td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
  body.pg-report .p-rep-pdf-state { margin-left: 0; text-align: left; }
}

/* --- sites.html (body.pg-sites) --- */
body.pg-sites .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-sites .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-sites .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-sites .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-sites .tile { text-align: left; cursor: pointer; }
body.pg-sites .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-sites .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-sites .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-sites .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-sites .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-sites .fixhead h3 { margin: 0; }
body.pg-sites .locked { position: relative; overflow: hidden; }
body.pg-sites .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-sites .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-sites .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-sites .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-sites .seg span.on { background: var(--teal); color: #fff; }
body.pg-sites .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-sites .icobtn svg { width: 16px; height: 16px; }
body.pg-sites table.plan { width: 100%; border-collapse: collapse; }
body.pg-sites table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-sites table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
body.pg-sites .x-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px}
body.pg-sites .x-search {position:relative;flex:1 1 280px;max-width:420px}
body.pg-sites .x-search svg {position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
body.pg-sites .x-search input {width:100%;padding-left:36px}
body.pg-sites .x-filters {display:inline-flex;gap:4px;margin-left:auto}
body.pg-sites .x-filters button {height:32px;padding:0 16px;border-radius:16px;border:1px solid var(--border);background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:inherit}
body.pg-sites .x-filters button[aria-pressed="true"] {background:var(--teal);border-color:var(--teal);color:#fff}
body.pg-sites .x-table {width:100%;border-collapse:collapse}
body.pg-sites .x-table:not(.dt) th {font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);text-align:left;padding:8px 16px;border-bottom:1px solid var(--border)}
body.pg-sites .x-table:not(.dt) td {height:48px;padding:0 16px;border-bottom:1px solid var(--border);font-size:13px}
body.pg-sites .x-table tbody tr {cursor:pointer}
body.pg-sites .x-num {text-align:right;font-variant-numeric:tabular-nums}
body.pg-sites .x-score {font-weight:800}
body.pg-sites .x-chev {width:32px;color:var(--muted)}
body.pg-sites .x-pager {display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}

/* --- tokens.html (body.pg-tokens) --- */
/* Usage (CRA-64): the third card of the top row — plain lines, a quiet label over each value. */
body.pg-tokens .usage-row { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px; }
body.pg-tokens .usage-row:last-child { padding-bottom: 0; }
body.pg-tokens .usage-k { font-size: 13px; color: var(--muted); }
body.pg-tokens .usage-v { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
body.pg-tokens .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-tokens .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-tokens .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-tokens .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-tokens .tile { text-align: left; cursor: pointer; }
body.pg-tokens .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-tokens .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-tokens .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-tokens .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-tokens .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-tokens .fixhead h3 { margin: 0; }
body.pg-tokens .locked { position: relative; overflow: hidden; }
body.pg-tokens .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-tokens .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-tokens .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-tokens .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-tokens .seg span.on { background: var(--teal); color: #fff; }
body.pg-tokens .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-tokens .icobtn svg { width: 16px; height: 16px; }
body.pg-tokens table.plan { width: 100%; border-collapse: collapse; }
body.pg-tokens table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-tokens table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
body.pg-tokens .tok-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px;margin-bottom:32px}
body.pg-tokens .tok-buyline {margin:10px 0 0}
body.pg-tokens .tok-row .x-card-foot {display:block}
body.pg-tokens .tok-redeem-slot {height:40px;display:flex;align-items:center}
body.pg-tokens .tok-redeem-form {display:flex;gap:8px;align-items:center;width:100%;max-width:380px}
body.pg-tokens .tok-redeem-form[hidden] {display:none}
body.pg-tokens .tok-redeem-form input {flex:1;min-width:0}
body.pg-tokens .tok-redeem-msg {min-height:20px;margin:6px 0 0;font-size:13px;line-height:20px}@media (max-width:820px) { body.pg-tokens .tok-row {grid-template-columns:minmax(0,1fr)} }
body.pg-tokens .x-card {display:flex;flex-direction:column;padding:24px;margin:0}
body.pg-tokens .x-label {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
body.pg-tokens .x-card-body {flex:1}
body.pg-tokens .x-card-foot {margin-top:auto;padding-top:16px}
body.pg-tokens .x-price {font-size:20px;font-weight:800;margin:8px 0 4px}
body.pg-tokens .x-sec-h {font-size:17px;font-weight:800;margin:0 0 16px}
body.pg-tokens .x-table {width:100%;border-collapse:collapse}
body.pg-tokens .x-table:not(.dt) th {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:8px 16px;border-bottom:1px solid var(--border)}
body.pg-tokens .x-table:not(.dt) td {padding:8px 16px;height:48px;border-bottom:1px solid var(--border);font-size:13px}
body.pg-tokens .x-table .num {text-align:right}
body.pg-tokens .x-pos {color:var(--green)}

/* --- tools.html (body.pg-tools) --- */
body.pg-tools .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-tools .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-tools .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-tools .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-tools .tile { text-align: left; cursor: pointer; }
body.pg-tools .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-tools .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-tools .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-tools .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-tools .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-tools .fixhead h3 { margin: 0; }
body.pg-tools .locked { position: relative; overflow: hidden; }
body.pg-tools .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-tools .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-tools .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-tools .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-tools .seg span.on { background: var(--teal); color: #fff; }
body.pg-tools .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-tools .icobtn svg { width: 16px; height: 16px; }
body.pg-tools table.plan { width: 100%; border-collapse: collapse; }
body.pg-tools table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-tools table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* --- tool-llms.html (body.pg-llmsgen) — block identical to tools.html's, own scope --- */
body.pg-llmsgen .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-llmsgen .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-llmsgen .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-llmsgen .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-llmsgen .tile { text-align: left; cursor: pointer; }
body.pg-llmsgen .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-llmsgen .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-llmsgen .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-llmsgen .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-llmsgen .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-llmsgen .fixhead h3 { margin: 0; }
body.pg-llmsgen .locked { position: relative; overflow: hidden; }
body.pg-llmsgen .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-llmsgen .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-llmsgen .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-llmsgen .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-llmsgen .seg span.on { background: var(--teal); color: #fff; }
body.pg-llmsgen .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-llmsgen .icobtn svg { width: 16px; height: 16px; }
body.pg-llmsgen table.plan { width: 100%; border-collapse: collapse; }
body.pg-llmsgen table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-llmsgen table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* --- tool-parity.html (body.pg-parity) — block identical to tools.html's, own scope --- */
body.pg-parity .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-parity .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-parity .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-parity .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-parity .tile { text-align: left; cursor: pointer; }
body.pg-parity .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-parity .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-parity .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-parity .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-parity .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-parity .fixhead h3 { margin: 0; }
body.pg-parity .locked { position: relative; overflow: hidden; }
body.pg-parity .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-parity .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-parity .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-parity .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-parity .seg span.on { background: var(--teal); color: #fff; }
body.pg-parity .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-parity .icobtn svg { width: 16px; height: 16px; }
body.pg-parity table.plan { width: 100%; border-collapse: collapse; }
body.pg-parity table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-parity table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* --- tool-robots.html (body.pg-robotsval) — block identical to tools.html's, own scope --- */
body.pg-robotsval .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-robotsval .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-robotsval .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-robotsval .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-robotsval .tile { text-align: left; cursor: pointer; }
body.pg-robotsval .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-robotsval .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-robotsval .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-robotsval .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-robotsval .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-robotsval .fixhead h3 { margin: 0; }
body.pg-robotsval .locked { position: relative; overflow: hidden; }
body.pg-robotsval .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-robotsval .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-robotsval .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-robotsval .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-robotsval .seg span.on { background: var(--teal); color: #fff; }
body.pg-robotsval .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-robotsval .icobtn svg { width: 16px; height: 16px; }
body.pg-robotsval table.plan { width: 100%; border-collapse: collapse; }
body.pg-robotsval table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-robotsval table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* --- tool-schema-validator.html (body.pg-schemaval) — block identical to tools.html's, own scope --- */
body.pg-schemaval .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-schemaval .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-schemaval .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-schemaval .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-schemaval .tile { text-align: left; cursor: pointer; }
body.pg-schemaval .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-schemaval .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-schemaval .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-schemaval .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-schemaval .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-schemaval .fixhead h3 { margin: 0; }
body.pg-schemaval .locked { position: relative; overflow: hidden; }
body.pg-schemaval .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-schemaval .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-schemaval .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-schemaval .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-schemaval .seg span.on { background: var(--teal); color: #fff; }
body.pg-schemaval .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-schemaval .icobtn svg { width: 16px; height: 16px; }
body.pg-schemaval table.plan { width: 100%; border-collapse: collapse; }
body.pg-schemaval table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-schemaval table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* --- tool-schema-wizard.html (body.pg-wizard) — block identical to tools.html's, own scope --- */
body.pg-wizard .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
body.pg-wizard .mast .score { font-size: 54px; font-weight: 800; line-height: 1; color: var(--ink); text-align: center; }
body.pg-wizard .mast .score small { font-size: 20px; color: var(--muted); font-weight: 600; }
body.pg-wizard .catstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
body.pg-wizard .tile { text-align: left; cursor: pointer; }
body.pg-wizard .tile .tv { font-size: 20px; font-weight: 800; margin-top: 4px; }
body.pg-wizard .tabs { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
body.pg-wizard .tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
body.pg-wizard .tab.on { color: var(--teal); border-color: var(--teal); }
body.pg-wizard .fixhead { display: flex; align-items: center; gap: 12px; }
body.pg-wizard .fixhead h3 { margin: 0; }
body.pg-wizard .locked { position: relative; overflow: hidden; }
body.pg-wizard .locked .blur { filter: blur(5px); opacity: .55; pointer-events: none; }
body.pg-wizard .lockbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.pg-wizard .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
body.pg-wizard .seg span { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
body.pg-wizard .seg span.on { background: var(--teal); color: #fff; }
body.pg-wizard .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
body.pg-wizard .icobtn svg { width: 16px; height: 16px; }
body.pg-wizard table.plan { width: 100%; border-collapse: collapse; }
body.pg-wizard table.plan th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.pg-wizard table.plan td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* RESTORED (style-finish-1021, verification): report chart rules.
   portal-report.js renders .hbar-*/.vbar-* markup from JS — no HTML in the
   tree carries these class names, so the HTML-corpus trim removed the rules;
   the rendered report page uses them. Restored verbatim from
   phase2/trim-backup/portal.removed.txt; media overrides re-wrapped in
   their original @media (max-width: 820px) context. */
/* horizontal bar chart */
.hbar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hbar-row:last-child { margin-bottom: 0; }
.hbar-name { flex: 0 0 150px; font-size: 13px; font-weight: 400; color: var(--muted); text-align: right; }
.hbar-track { flex: 1; background: var(--soft-2); border-radius: 999px; height: 22px; overflow: hidden; }
.hbar-fill { width: var(--w, 0%); height: 100%; border-radius: 999px; }
.hbar-fill.teal { background: var(--teal); }
.hbar-fill.orange { background: var(--orange); }
.hbar-fill.red { background: var(--red); }
.hbar-fill.gray { background: #9aa5ad; }
.hbar-score { flex: 0 0 34px; font-size: 13px; font-weight: 400; color: var(--muted); text-align: right; }
/* vertical bar chart (local stacking) */
.vbar-chart { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 220px; padding-top: 30px; }
.vbar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 110px; }
.vbar-score { font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }
.vbar { width: 100%; border-radius: 8px 8px 0 0; }
.vbar.teal { background: var(--teal); }
.vbar.gray { background: #b9c8cd; }
.vbar.orange { background: var(--orange); }
.vbar-name { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.35; min-height: 32px; }
.vbar-name strong { color: var(--ink); }
#report-root .hbar-fill { width: var(--w, 0%); }
#report-root .vbar { height: var(--h); }
.p-rep-vbar { height: var(--h, 0%); }
@media (max-width: 820px) {
  .hbar-name { flex: 0 0 108px; font-size: 12px; }
  .vbar-chart { gap: 10px; height: 190px; }
  .vbar-name { font-size: 11px; }
}

/* RESTORED (style-finish-1021, verification — portal JS):
   rules the HTML-corpus trim removed whose classes are rendered
   by this surface's JS. Restored verbatim from the trim backups. */
/* Two-tone page titles: same effect as the SERAVERRA wordmark —
   first word teal, the rest orange, extrabold. Applied via JS. */
.brand-head { font-weight: 800; letter-spacing: -0.5px; }
.brand-head .w1 { color: var(--teal); }
.brand-head .w2 { color: var(--orange-text); }
.sev-low { background: var(--green-bg); color: var(--green); }
.hbar-track { flex: 1; background: var(--soft-2); border-radius: 999px; height: 22px; overflow: hidden; }
.hbar-fill { width: var(--w, 0%); height: 100%; border-radius: 999px; }
.hbar-fill.teal { background: var(--teal); }
.hbar-fill.orange { background: var(--orange); }
.hbar-fill.red { background: var(--red); }
.hbar-fill.gray { background: #9aa5ad; }
/* vertical bar chart (local stacking) */
.vbar-chart { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 220px; padding-top: 30px; }
.vbar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 110px; }
.vbar-score { font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }
.vbar { width: 100%; border-radius: 8px 8px 0 0; }
.vbar.teal { background: var(--teal); }
.vbar.gray { background: #b9c8cd; }
.vbar.orange { background: var(--orange); }
.vbar-name { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.35; min-height: 32px; }
.vbar-name strong { color: var(--ink); }
.fix { background: var(--bg-soft); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 13px; color: var(--muted); }
.fix strong { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--teal); margin-bottom: 6px; }
.snippet-copy { position: absolute; top: 8px; right: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #d9e8ee; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.snippet-copy:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.gbp-fix.show { display: block; }
 
 
 

#consist-results.show { display: block; }
.comp-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; text-decoration: underline; }
/* ---------- Billing & invoices ---------- */
.inv-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.inv-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.inv-meta { text-align: right; display: flex; flex-direction: column; gap: 8px; }
.inv-meta span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.inv-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-bottom: 20px; }
.inv-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--border); }
.inv-table td { padding: 14px 8px; border-bottom: 1px solid var(--border); }
.inv-total { display: flex; justify-content: space-between; font-size: 20px; padding: 12px 8px; }
/* T37: the monthly invoice itemizes 4 columns; on a phone it must fit the card without side-scroll. */
@media (max-width: 480px) { .invoice-card { padding: 20px 16px; } .inv-table { font-size: 13px; } .inv-table th, .inv-table td { padding-left: 4px; padding-right: 4px; } }
.comp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bg-soft); font-size: 14.5px; }
.comp-item .comp-remove { font-size: 20px; text-decoration: none; line-height: 1; padding: 4px 8px; }
.query-ic.bad { background: var(--red-bg); }
 .query-ic.bad svg { stroke: var(--red); }
.query-ic.good { background: var(--green-bg); }
 .query-ic.good svg { stroke: var(--green); }
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.err { background: var(--red-bg); color: var(--red); }
.tag.warn { background: var(--amber-bg); color: var(--amber); }
@media (max-width: 820px) {
  .vbar-chart { gap: 10px; height: 190px; }
  .vbar-name { font-size: 11px; }
}
.page-matrix { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.page-matrix th, .page-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.page-matrix th:first-child, .page-matrix td:first-child { text-align: left; }
.page-matrix thead th { font-size: 12px; color: var(--muted); border-bottom: 2px solid var(--border); }
.page-matrix thead th a { color: var(--teal); font-weight: 700; text-decoration: none; }
.page-matrix tbody tr:last-child td { border-bottom: none; }
.page-matrix tbody tr:hover td { background: var(--bg-soft); }
.mx-check { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; }
.platform-steps { margin: 12px 0 0; padding: 0; }
.platform-steps dt { font-weight: 700; color: var(--teal); font-size: 13px; margin-top: 10px; }
.platform-steps dt:first-child { margin-top: 0; }
.platform-steps dd { margin: 2px 0 0; padding: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.fix p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* --- ITEM 4: app scan steps match marketing free-preview .fs-step style --- */
.fs-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--muted);
}
.fs-step .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.fs-step.done { color: var(--ink); }
.fs-step.done .dot { border-color: var(--teal); background: var(--teal); color: #fff; }
.fs-step.done .dot::after { content: "✓"; }
/* ---------- Item 13: invoice bill-to / notes / footer ---------- */
.inv-billto { margin: 0 0 26px; font-size: 14.5px; }
.inv-billto .bill-k {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 4px;
}
.inv-billto strong { font-size: 16px; }
.inv-billto .bill-addr { margin-top: 2px; color: var(--muted); font-size: 13px; }
.inv-notes {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.inv-notes strong {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 6px;
}
.inv-notes p { margin: 4px 0; }
.inv-foot {
  margin-top: 30px; padding-top: 14px; border-top: 2px solid var(--border);
  font-size: 12.5px; color: var(--muted); text-align: center;
}
.step-node .dot{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;
  font-weight:800;font-size: 20px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.door.bad{border-color:var(--red);}
.door.bad .door-ic{color:var(--red);}
.u-right { text-align: right; }
.u-pre { margin: 8px 0 0; white-space: pre-wrap; font-size: 12.5px; max-height: 200px; overflow-y: auto; }
.u-pre-sm { margin: 8px 0 0; font-size: 13px; }
.u-muted-145 { color: var(--muted); font-size: 14.5px; }
.u-mb-0 { margin-bottom: 0; }
.field-err.ok { color: #2e7d6f; }
.rep-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line,var(--line));margin:10px 0 18px;flex-wrap:wrap;}
.rep-tab{background:none;border:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);padding:10px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;}
#report-root .hbar-fill { width: var(--w, 0%); }
#report-root .vbar { height: var(--h); }
/* ===== App work-page headings: ONE standard (Kuang 2026-10-14) =====
   28px two-tone brand-head, -0.6px tracking, 6px under the title; the
   header block keeps its 24px bottom spacing via the sub where one
   exists, or the title itself where it does not (settings). */
.acct-content h1.brand-head { font-size: 30px; letter-spacing: -0.6px; margin-bottom: 6px; }
/* Monitoring summary + detail pages (2026-10-15) — .mons- prefix. */
.mons-meta { color: var(--muted); font-size: 13px; }
.plan-jump { color: var(--ink); font-weight: 600; text-decoration: none; }
.plan-jump:hover { color: var(--teal); text-decoration: underline; }
.monc-deliv-grid .monc-rule { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; border-bottom: none; padding: 0; }
.rule-line.monc-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.monc-three .monc-alert-row { flex-wrap: wrap; }
.monc-three .monc-alert-main { flex: 1 1 100%; order: 3; }
.monc-snippet + .mons-view { margin-top: 4px; }
.monc-snippet { display: block; max-width: 100%; white-space: normal; word-break: break-all; background: var(--surface-2); border-radius: 6px; padding: 5px 9px; font-size: 11.5px; margin-bottom: 8px; }
.mons-err { color: var(--red); font-size: 14.5px; margin-top: 10px; }
.mons-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.mons-spark { display: block; }
.mons-add { display: flex; gap: 10px; flex-wrap: wrap; }
.mons-plans { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.mons-plan-sel { border-color: var(--orange,#ff7e00); background: #fff7ec; }
.mons-chart { width: 100%; height: auto; display: block; }
.monc-chart-card .mons-chart { flex: 1 1 auto; min-height: 230px; }
.mons-grid { stroke: var(--border); stroke-width: 1; }
.mons-axis { font-size: 11px; fill: var(--muted); }
.mons-cats { margin-top: 14px; border-top: 1px solid var(--border); }
.mons-cat-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.mons-cat-row span:first-child { flex: 1; }
.mons-list { list-style: none; margin: 0; padding: 0; }
.mons-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.mons-list li:last-child { border-bottom: none; }
.mons-cg { overflow-x: auto; }
table.dt .mons-cg-cell { text-align: center; } /* CRA-83: the crawler grid is a .dt table */
.mons-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
/* CRA-83: the crawler grid's dot colours (lost in the style-finish-1021
   unused-CSS trim, which left every dot blank). */
.mons-dot-ok { background: var(--green); }
.mons-dot-bad { background: var(--red); }
.mons-dot-unknown { background: var(--surface); border: 2px solid var(--border); width: 7px; height: 7px; }
/* Monitoring console tabs (2026-10-15, Kuang's mockup layout) */
.monc-tabs { margin-top: 16px; }
.monc-watch-card .monc-watch-row { flex: 1; align-items: center; }
.monc-scroll { max-height: 46vh; overflow-y: auto; }
.monc-watch-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.monc-watch-row:last-child { border-bottom: none; }
.monc-watch-name { font-weight: 600; font-size: 13px; white-space: nowrap; }
/* CRA-128: tracked-questions answer cells — one shape, colours that never
   compete with the crawler-access grid (allowed/blocked = green/red). Your
   mention is teal; a competitor is quiet grey with its name second and
   smaller. Both tokens flip for dark mode via :root[data-theme="dark"]. */
.monc-ans-you { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--teal); }
.monc-ans-you .monc-ans-pos { color: var(--teal); }
.monc-ans-rival { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-size: 13px; font-weight: 700; color: var(--muted); }
.monc-ans-rival .monc-ans-pos { color: var(--muted); }
.monc-ans-name { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.monc-rules-strip { margin-top: 16px; }
.monc-rules-strip .mons-meta { display: block; margin-top: 10px; }
.monc-alert-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.monc-alert-row:last-child { border-bottom: none; }
.monc-alert-main { flex: 1; font-size: 13px; color: var(--muted); }
.monc-rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14.5px; }
.monc-rule input { display: none; }
.monc-switch { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.monc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.monc-rule input:checked + .monc-switch { background: var(--green); }
.monc-rule input:checked + .monc-switch::after { left: 21px; }
.monc-bar-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.monc-bar-lab { flex: 0 0 130px; font-size: 13px; color: var(--muted); }
.monc-bar-track { flex: 1; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.monc-bar-fill { display: block; height: 100%; background: var(--teal); border-radius: 999px; width: var(--w, 0%); }
.monc-bar-alt { background: var(--orange); }
.monc-bar-val { flex: 0 0 44px; text-align: right; font-weight: 400; font-size: 13px; color: var(--muted); }
.monc-matrix-wrap { overflow-x: auto; }
[data-mpanel="reports"] .mons-list li { font-size: 13px; color: var(--muted); }
[data-mpanel="reports"] .monc-rule { font-size: 13px; }
.monc-rules-strip .monc-rule { font-size: 14.5px; padding: 8px 0; }
.u-red { color: var(--red); }
/* Claude portal build: home layout (from the generated screens). */
.x-pagehead { margin-bottom: 24px; }
.x-pagehead h1 { margin: 0; }
.x-num { text-align: right; font-variant-numeric: tabular-nums; }
.x-score { font-weight: 800; }
.x-chev { width: 32px; color: var(--muted); }
.x-score { color: var(--c, inherit); }
.x-table-card { padding: 16px; }
.x-mast .x-score { font-size: 54px; line-height: 1; }
.x-mast .x-score small { font-size: 17px; font-weight: 600; color: var(--muted); }
.x-stack { display: flex; flex-direction: column; gap: 16px; }
.chips-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Portal design — monitoring (summary + detail + sales) */
.x-sub { margin: 4px 0 0; color: var(--muted); }
.x-allclear { display: flex; align-items: center; gap: 4px; color: var(--green); font-weight: 700; }
.x-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-bottom: 24px; }
.x-kpis-tight { margin-bottom: 0; }
.x-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.x-kpi-lab { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.x-kpi-val { margin: 0; font-size: 20px; font-weight: 800; }
.x-kpi-sub { margin: 0; color: var(--muted); }
.x-rowlink { color: inherit; font-weight: 700; text-decoration: none; }
.x-rowlink::after { content: ""; position: absolute; inset: 0; }
.x-above { position: relative; z-index: 1; width: 40px; }
.x-meta-line { display: block; color: var(--muted); }
.x-chev { width: 32px; color: var(--muted); }
.x-add { display: flex; align-items: center; gap: 8px; }
.x-add input { flex: 1; max-width: 320px; }
.x-offer { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.x-offer h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.x-offer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.x-plans { display: inline-flex; gap: 4px; }
.x-plans .mons-plan { border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 14px; margin: 0; font-size: 13px; font-weight: 700; background: var(--surface); }
.x-plans .mons-plan-sel { border-color: var(--teal); color: var(--teal-ink); background: var(--bg-soft); }
.x-plans .mons-plan input { position: absolute; opacity: 0; pointer-events: none; }
.x-offer-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 640px) { .x-offer-act { align-items: flex-start; } }
.x-dhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-bottom: 24px; }
.x-dhead h1 { margin: 0; font-size: 30px; }
.x-bigscore { display: flex; align-items: center; gap: 8px; }
.x-score-num { font-size: 54px; line-height: 1; font-weight: 800; color: var(--c, inherit); }
@media (max-width: 900px) { .x-dhead { grid-template-columns: 1fr; } }
.x-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.x-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: auto; }
.x-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .x-8-4, .x-7-5, .x-6-6 { grid-template-columns: minmax(0, 1fr); } }
.x-row-lines { display: flex; flex-direction: column; gap: 4px; }
.x-line { display: flex; align-items: center; gap: 8px; }
.x-up { color: var(--green); font-weight: 700; }
.x-down { color: var(--red); font-weight: 700; }
/* CRA-124 item 6 (Kuang): the Delivery switches sit exactly 2 per row, fixed,
   so they never pack into one row; a phone stacks them one per row. */
.x-deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .x-deliv { grid-template-columns: 1fr; } }
.monc-panel[hidden] { display: none; }
.x-price { font-size: 20px; font-weight: 800; margin: 8px 0 4px; }
.x-copied{color:var(--green)!important;border-color:var(--green)!important}
.p-rep-subhead { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.p-rep-guide { margin: 10px 0 0; font-size: 13px; }
.p-rep-guide a { color: var(--teal); font-weight: 600; text-decoration: none; }
.p-rep-guide a:hover { text-decoration: underline; }
.p-rep-offscreen { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
.p-rep-grouphead { margin: 24px 0 0; font-size: 13px; color: var(--muted); }
.p-rep-grouphead strong { color: var(--ink); }
/* Web-person hand-off */
.p-rep-wp { margin-top: 16px; }
.p-rep-msg { margin: 0; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--bg-soft); border-radius: 10px; padding: 14px 16px; }
.p-rep-matrix { margin-top: 16px; overflow-x: auto; }
/* What AI sees */
.p-rep-wbar { margin-bottom: 14px; }
.p-rep-wbar-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; }
.p-rep-wbar-track { flex: none; height: 14px; }
.p-rep-vbar { height: var(--h, 0%); }
.p-rep-ranknote { margin: 12px 0 0; font-size: 13.5px; }
.p-rep-checklist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.p-rep-nap { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.p-rep-nap dt { color: var(--muted); }
.p-rep-nap dd { margin: 0; font-weight: 600; }
/* ---------- Customer invoice (tokens.html?invoice=CR-…) ----------
   Header = the SERAVERRA logo (same artwork as the rail) + division line.
   Dark theme swaps to the dark logo on screen, same trick as the rail. */
.inv-logo { height: 34px; width: auto; display: block; }
.inv-division { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
/*ONLY:agency,combined*/:root[data-theme="dark"] .inv-logo { object-position: -99999px 0; background: url("seraverra-logo-dark.png") center / contain no-repeat; }/*/ONLY*/
@media print {
  :root[data-theme="dark"] .inv-logo { object-position: 50% 50%; background: none; }
}
/* ---------- Rendered-PDF download buttons (portal-download.js) ----------
   Working state while the server prepares the file (study, papers, invoice). */
.is-busy { cursor: progress; opacity: .65; }

/* RESTORED (style-finish-1021, verification — shared removals needed by portal JS only):
   rules the HTML-corpus trim removed whose classes are rendered
   by this surface's JS. Restored verbatim from the trim backups. */

.sev-low { background: var(--green-bg); color: var(--green); }

.hbar-track { flex: 1; background: var(--soft-2); border-radius: 999px; height: 22px; overflow: hidden; }

.hbar-fill { width: var(--w, 0%); height: 100%; border-radius: 999px; }

.hbar-fill.teal { background: var(--teal); }

.hbar-fill.orange { background: var(--orange); }

.hbar-fill.red { background: var(--red); }

.hbar-fill.gray { background: #9aa5ad; }

/* vertical bar chart (local stacking) */
.vbar-chart { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 220px; padding-top: 30px; }

.vbar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 110px; }

.vbar-score { font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }

.vbar { width: 100%; border-radius: 8px 8px 0 0; }

.vbar.teal { background: var(--teal); }

.vbar.gray { background: #b9c8cd; }

.vbar.orange { background: var(--orange); }

.vbar-name { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.35; min-height: 32px; }

.vbar-name strong { color: var(--ink); }

.snippet-copy { position: absolute; top: 8px; right: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #d9e8ee; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; }

.snippet-copy:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

.comp-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; text-decoration: underline; }

.comp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bg-soft); font-size: 14.5px; }

.comp-item .comp-remove { font-size: 20px; text-decoration: none; line-height: 1; padding: 4px 8px; }

.query-ic.bad { background: var(--red-bg); }
 .query-ic.bad svg { stroke: var(--red); }

.query-ic.good { background: var(--green-bg); }
 .query-ic.good svg { stroke: var(--green); }

@media (max-width: 820px) {
  .vbar-chart { gap: 10px; height: 190px; }
  .vbar-name { font-size: 11px; }
}

.page-matrix { border-collapse: collapse; font-size: 13px; min-width: 100%; }

.page-matrix th, .page-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; }

.page-matrix th:first-child, .page-matrix td:first-child { text-align: left; }

.page-matrix thead th { font-size: 12px; color: var(--muted); border-bottom: 2px solid var(--border); }

.page-matrix thead th a { color: var(--teal); font-weight: 700; text-decoration: none; }

.page-matrix tbody tr:last-child td { border-bottom: none; }

.page-matrix tbody tr:hover td { background: var(--bg-soft); }

.mx-check { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; }

.platform-steps { margin: 12px 0 0; padding: 0; }

.platform-steps dt { font-weight: 700; color: var(--teal); font-size: 13px; margin-top: 10px; }

.platform-steps dt:first-child { margin-top: 0; }

.platform-steps dd { margin: 2px 0 0; padding: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }

.door.bad{border-color:var(--red);}

.door.bad .door-ic{color:var(--red);}

/* Getting-started checklist on the portal home (CRA-60, portal-onboarding.js).
   One card above the scan bar; each step ticks from the account's data. */
.onb { margin: 0 0 16px; }
.onb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.onb-head .sec-h { font-size: 17px; margin: 0; }
.onb-count { color: var(--muted); font-size: 13.5px; }
.onb-dismiss { margin-left: auto; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.onb-ask { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.onb-x { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13.5px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.onb-x:hover, .onb-x:focus-visible { color: var(--teal); }
.onb-yes { color: var(--teal); font-weight: 600; }
.onb-list { list-style: none; margin: 10px 0 0; padding: 0; }
.onb-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.onb-step:first-child { border-top: 0; }
.onb-ic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.onb-step.is-done .onb-ic { background: var(--green); border-color: var(--green); color: var(--surface); }
.onb-step strong { display: block; font-size: 15px; color: var(--ink); }
.onb-step.is-done strong { color: var(--muted); font-weight: 600; }
.onb-step p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.onb-act { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: none; cursor: pointer; white-space: nowrap; }
.onb-act:hover, .onb-act:focus-visible { text-decoration: underline; }
.onb-err { margin: 8px 0 0; color: var(--red); font-size: 13.5px; font-weight: 600; }
@media (max-width: 599.98px) {
  .onb-step { grid-template-columns: 26px minmax(0, 1fr); }
  .onb-act { grid-column: 2; justify-self: start; }
}

/* CRA-63: the settings rail now holds nine items for an admin (Business
   details joined it). Under 360px the "Menu" item goes (the logo above
   the rail is the same link home), and the labels step down one size with
   no side padding, so every label fits its slot. */
@media (max-width: 359.98px) {
  .side > .navitem.rail-back { display: none; }
  .side > .navitem { padding-left: 0; padding-right: 0; }
  .side > .navitem:not([data-short]), .navitem[data-short]::after { font-size: 10px; }
}

/* ===== CRA-83 table standard (Kuang 2026-10-23: "all table need sort in
   portal and admin and make the font smaller") — ONE block, byte-identical
   in components/shared.css (admin, via /app.css) and portal/app.css
   (portal); tests/q/cra83_table_standard_test.py holds them equal.
   Every portal + admin list is a real <table class="dt">: column headings,
   sortable columns (portal/portal-table.js turns each heading into a
   button; a click toggles the direction), small type and compact rows,
   one row per entry. Opt-outs: th.dt-nosort (not sortable), td.dt-wrap
   (may wrap), td.dt-grow / td.dt-clip (long text: one line, cut with an
   ellipsis, the full text in its title), .dt-num (right-aligned figures),
   td.dt-actions (row buttons, compact). ===== */
.dt-scroll { overflow-x: auto; position: relative; } /* relative: absolute bits (sr-only labels) stay inside the scroll box */
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
table.dt th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: bottom; }
table.dt td { height: auto; padding: 6px 10px; border-bottom: 1px solid var(--bg-soft); vertical-align: middle; white-space: nowrap; }
table.dt td.dt-wrap { white-space: normal; overflow-wrap: anywhere; }
table.dt td.dt-grow { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
table.dt td.dt-clip { max-width: 28em; overflow: hidden; text-overflow: ellipsis; }
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr:hover { background: var(--bg-soft); }
table.dt .dt-num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt .dt-muted { color: var(--muted); }
table.dt td.dt-empty { white-space: normal; color: var(--muted); padding: 12px 10px; }
table.dt td.dt-actions { width: 1%; text-align: right; }
table.dt td.dt-actions .btn { padding: 4px 12px; font-size: 12px; line-height: 1.4; }
table.dt td.dt-actions .btn + .btn { margin-left: 6px; }
table.dt td.dt-actions .row-actions { flex-wrap: nowrap; min-width: 0; justify-content: flex-end; }
table.dt td .icobtn { width: 26px; height: 26px; }
table.dt td .pill { vertical-align: middle; }
table.dt td > svg.mons-spark { height: 22px; width: auto; display: block; }
table.dt th .dt-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table.dt th .dt-sort::after { content: "\2195"; font-size: 10px; opacity: .45; }
table.dt th[aria-sort="ascending"] .dt-sort::after { content: "\25B2"; opacity: 1; }
table.dt th[aria-sort="descending"] .dt-sort::after { content: "\25BC"; opacity: 1; }
table.dt th[aria-sort] .dt-sort, table.dt th .dt-sort:hover { color: var(--ink); }
table.dt th .dt-sort:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
table.dt th.dt-num .dt-sort { flex-direction: row-reverse; }
.dt-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
/* CRA-103: the page-size + page navigation bar under a paged table.dt. One
   line: "Show [25] per page" on the left, Prev / "1-25 of N" / Next on the
   right. When the size dropdown moves into a filter row, only the nav shows. */
.dt-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.dt-pager[hidden] { display: none; }
.dt-pager-navonly { justify-content: flex-end; }
.dt-pager-size { display: inline-flex; align-items: center; gap: 6px; }
.dt-pager-select { width: auto; min-width: 64px; padding: 4px 8px; font-size: 13px; }
.dt-pager-nav { display: inline-flex; align-items: center; gap: 10px; }
.dt-pager-count { min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.dt-filter .dt-pager-size { margin-left: auto; }
@media (max-width: 560px) { .dt-pager { justify-content: center; } .dt-pager-nav { justify-content: center; } }
@media (max-width: 640px) { table.dt td.dt-grow { max-width: none; width: auto; overflow: visible; } }
/* ===== /CRA-83 table standard ===== */
/* CRA-137: Admin Customers search row — the box and its Search button sit on
   one line and wrap on a phone. */
.cust-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* CRA-96: two-step sign-in with an authenticator app (Settings > Security). */
body.pg-settings .tfa-card { margin-bottom: 16px; }
body.pg-settings .tfa-card .x-sw-row { border-bottom: 0; padding: 4px 0; }
body.pg-settings .tfa-panel { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 14px; }
body.pg-settings .tfa-step { margin: 0 0 10px; color: var(--ink-2); }
body.pg-settings .tfa-qr { width: 184px; height: 184px; margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
body.pg-settings .tfa-qr svg { display: block; width: 100%; height: 100%; }
body.pg-settings .tfa-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--bg-soft); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; user-select: all; }
body.pg-settings .tfa-form { margin-top: 12px; }
body.pg-settings .tfa-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
body.pg-settings .tfa-form-row input { width: 9.5em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .08em; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
body.pg-settings .tfa-error { margin: 8px 0 0; color: var(--red); font-size: 13px; }
body.pg-settings .tfa-code-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; margin: 0 0 12px; padding: 12px 16px; list-style: none; background: var(--bg-soft); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .06em; user-select: all; }
body.pg-settings .tfa-more { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; }

/* CRA-99: address suggestions (Settings > Profile street, Business address). */
body.pg-settings .addr-wrap { position: relative; }
body.pg-settings .addr-list { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); box-sizing: border-box; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 280px; overflow-y: auto; }
body.pg-settings .addr-list[hidden] { display: none; }
body.pg-settings .addr-list li[role=option] { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.35; }
body.pg-settings .addr-list li[role=option] span { color: var(--muted); font-size: 13px; }
body.pg-settings .addr-list li[role=option]:hover, body.pg-settings .addr-list li[aria-selected=true] { background: var(--bg-soft); }
body.pg-settings .addr-list .addr-credit { padding: 4px 10px 2px; font-size: 11px; color: var(--muted); text-align: right; }
body.pg-settings .addr-row3 { display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px; gap: 12px; max-width: 520px; }
@media (max-width: 520px) { body.pg-settings .addr-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } body.pg-settings .addr-row3 > :first-child { grid-column: 1 / -1; } }