/* ════════════════════════════════════════════════════════════════════════════
   ASSESS CORE STYLES — design tokens, nav, the scan box, the loading steps, the
   verification modal and the whole report.

   Shared by /assess and every sector landing page, for the same reason
   assess-core.js is: the report is ~2,000 lines of markup produced by one
   renderer, and a second copy of its CSS would drift from the first the moment
   anyone touched either. A sector page links this, then adds only the CSS for
   its own landing sections.
   ════════════════════════════════════════════════════════════════════════════ */

  :root {
    --bg: #09090b; --surface-1: #111113; --surface-2: #18181b;
    --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
    --text: #fafafa; --muted: #a1a1aa; --faint: #52525b;
    --brand: #6366f1; --brand-dim: rgba(99,102,241,0.12); --brand-glow: rgba(99,102,241,0.4);
    --good: #34d399; --good-dim: rgba(52,211,153,0.12);
    --warn: #fbbf24; --warn-dim: rgba(251,191,36,0.12);
    --bad: #f87171; --bad-dim: rgba(248,113,113,0.12);
    --radius: 16px;
    --font: "Inter", ui-sans-serif, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  html,body { margin:0; }
  body { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }

  .bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .bg-glow::before { content:""; position:absolute; inset:0;
    background: radial-gradient(ellipse 80vw 60vh at 50% 0%, rgba(99,102,241,0.13), transparent 65%),
                radial-gradient(ellipse 50vw 40vh at 85% 60%, rgba(139,92,246,0.06), transparent 60%); }

  nav { position: fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; height:58px; background: var(--nav-bg); backdrop-filter: blur(20px); border-bottom:1px solid var(--border); }
  .brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; letter-spacing:-0.04em; }
  .logo-mark { width:26px; height:26px; border-radius:7px; background: linear-gradient(135deg,#6366f1,#818cf8);
    display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; box-shadow:0 0 16px rgba(99,102,241,0.45); }
  .brand-dot { color: var(--brand); }
  .nav-badge { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
    background:var(--brand-dim); border:1px solid rgba(99,102,241,0.3); padding:3px 8px; border-radius:5px; }
  .nav-right { display:flex; align-items:center; gap:14px; }
  .nav-link { font-size:13px; color:var(--muted); transition:color .15s; }
  .nav-link:hover { color:var(--text); }
  .btn-sm { font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; border-radius:8px; padding:7px 14px;
    border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text); transition:all .15s; }
  .btn-sm:hover { background:var(--surface-2); border-color:var(--brand); }

  /* Mobile nav. The bar is shared by every page on this stylesheet, so the
     burger lives here and assess-core.js injects the button — a page gets the
     collapse by using the standard nav/.nav-right markup, not by opting in.
     The panel is opaque (--surface-1, not the translucent --nav-bg) so links
     stay readable over whatever it covers. */
  .nav-burger { display:none; font-family:var(--font); background:var(--surface-1);
    border:1px solid var(--border-strong); color:var(--text); width:38px; height:38px;
    border-radius:9px; font-size:17px; line-height:1; cursor:pointer;
    align-items:center; justify-content:center; transition:border-color .15s; }
  .nav-burger:hover { border-color:var(--brand); }
  @media (max-width:820px){
    .nav-burger { display:inline-flex; }
    /* Fixed, so the open menu doesn't push the page or ride inside the 58px bar. */
    .nav-right { position:fixed; top:58px; left:0; right:0; flex-direction:column;
      align-items:stretch; gap:4px; background:var(--surface-1);
      border-bottom:1px solid var(--border); padding:10px 16px 16px;
      box-shadow:0 14px 30px rgba(2,6,23,.14); display:none; }
    .nav-right.open { display:flex; }
    .nav-link { padding:12px; border-radius:9px; font-size:15px; }
    .nav-link:hover { background:var(--surface-2); }
    .btn-sm { width:100%; margin-top:6px; padding:11px 14px; font-size:14px; }
  }

  main { position:relative; z-index:1; max-width:900px; margin:0 auto; padding:110px 24px 100px; }

  /* Hero / input */
  .hero { text-align:center; margin-bottom:8px; }
  .eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--brand);
    background:var(--brand-dim); border:1px solid rgba(99,102,241,0.3); padding:5px 12px; border-radius:100px; margin-bottom:20px; }
  .eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  h1 { font-size:clamp(30px,5vw,50px); font-weight:900; letter-spacing:-0.035em; line-height:1.08; margin:0 0 14px; }
  h1 .grad { background:linear-gradient(110deg,#818cf8,#c084fc 50%,#f472b6); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .lede { font-size:clamp(15px,2vw,18px); color:var(--muted); max-width:56ch; margin:0 auto 34px; line-height:1.55; }

  /* Wide enough that the field and both actions sit on one line on a desktop,
     and wraps cleanly below that rather than crushing the input. */
  .checker { display:flex; gap:10px; max-width:900px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
  .checker input { min-width:260px; }
  .checker input { flex:1; font-family:var(--font); font-size:15px; padding:15px 18px; border-radius:12px;
    border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text); outline:none; transition:border-color .15s, box-shadow .15s; }
  .checker input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-dim); }
  .btn-go { font-family:var(--font); font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; border:none;
    border-radius:12px; padding:15px 24px; color:#fff; background:linear-gradient(135deg,#6366f1,#818cf8);
    box-shadow:0 4px 20px rgba(99,102,241,0.4); transition:transform .12s, box-shadow .2s; }
  .btn-go:hover { transform:translateY(-1px); box-shadow:0 6px 26px rgba(99,102,241,0.55); }
  .btn-go:disabled { opacity:.6; cursor:default; transform:none; }
  /* Secondary on purpose: the scan is free and should stay the obvious first
     move. This is for the reader who already knows what is wrong and wants it
     handled rather than measured again. */
  .btn-fix { font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
    border-radius:12px; padding:15px 22px; text-decoration:none; display:inline-flex; align-items:center;
    border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text); transition:border-color .15s, background .15s; }
  .btn-fix:hover { border-color:var(--brand); background:var(--brand-dim); }
  .hint { font-size:12.5px; color:var(--faint); margin-top:14px; }
  .err-inline { color:var(--bad); font-size:13.5px; margin-top:14px; min-height:18px; }

  /* Quick / Detailed mode toggle */
  .mode-row { display:flex; justify-content:center; margin-top:14px; }
  .mode-toggle { display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--surface-1); border:1px solid var(--border); }
  .mode-opt { font-family:var(--font); cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted);
    border-radius:9px; padding:8px 16px; text-align:left; transition:all .15s; display:flex; flex-direction:column; gap:1px; }
  .mode-opt b { font-size:13.5px; font-weight:700; }
  .mode-opt small { font-size:11px; color:var(--faint); font-weight:500; }
  .mode-opt.active { background:var(--brand-dim); border-color:rgba(99,102,241,0.35); color:var(--text); }
  .mode-opt.active small { color:var(--brand); }

  /* Loading */
  .loading { max-width:520px; margin:48px auto 0; display:none; }
  .loading.show { display:block; }
  .lstep { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; margin-bottom:8px;
    background:var(--surface-1); border:1px solid var(--border); color:var(--muted); font-size:14px; opacity:.5; transition:all .3s; }
  .lstep.active { opacity:1; border-color:rgba(99,102,241,0.35); color:var(--text); }
  .lstep.done { opacity:1; color:var(--good); }
  .spin { width:16px; height:16px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--brand); animation:sp .7s linear infinite; }
  @keyframes sp { to { transform:rotate(360deg); } }
  .lstep .tick { width:16px; height:16px; }

  /* Report */
  .report { display:none; margin-top:48px; }
  .report.show { display:block; animation:rise .5s cubic-bezier(0.16,1,0.3,1); }
  @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

  .card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:26px; margin-bottom:18px; }
  .card-title { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 18px; }

  /* Scoreboard */
  .scoreboard { display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; }
  @media (max-width:620px){ .scoreboard { grid-template-columns:1fr; text-align:center; justify-items:center; } }
  .gauge { position:relative; width:180px; height:180px; }
  .gauge svg { transform:rotate(-90deg); }
  .gauge-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .gauge-num b { font-size:46px; font-weight:900; letter-spacing:-0.03em; line-height:1; }
  .gauge-num span { font-size:12px; color:var(--muted); margin-top:4px; }
  .sb-meta h2 { font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:0 0 4px; }
  .sb-meta .dom { font-family:var(--mono); font-size:13px; color:var(--brand); margin-bottom:14px; }
  .grade-pill { display:inline-block; font-size:13px; font-weight:700; padding:6px 14px; border-radius:100px; }
  .coverage-pill { display:inline-block; margin-left:8px; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:100px;
    background:var(--surface-2,var(--surface-1)); border:1px solid var(--border); color:var(--muted); cursor:default; }
  .coverage-pill.quick { color:var(--faint); }
  .sb-verdict { color:var(--muted); font-size:14.5px; line-height:1.55; margin-top:14px; max-width:46ch; }

  /* Visibility cards */
  .vis-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  @media (max-width:620px){ .vis-grid { grid-template-columns:1fr; } }
  .vis { border:1px solid var(--border); border-radius:12px; padding:18px; background:var(--surface-2); }
  .vis-head { display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; margin-bottom:12px; }
  .vis-ico { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; }
  .vis-status { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:5px 11px; border-radius:100px; margin-bottom:10px; }
  .vis-note { font-size:12.5px; color:var(--muted); line-height:1.5; }
  .st-yes { background:var(--good-dim); color:var(--good); }
  .st-no { background:var(--bad-dim); color:var(--bad); }
  .st-na { background:rgba(255,255,255,0.05); color:var(--faint); }
  .vis-query { font-size:11.5px; color:var(--faint); margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
    font-style:italic; line-height:1.4; }

  /* Category bars */
  .cat { margin-bottom:18px; }
  .cat:last-child { margin-bottom:0; }
  .cat-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .cat-name { font-size:14.5px; font-weight:600; }
  .cat-score { font-family:var(--mono); font-size:13px; color:var(--muted); }
  .bar { height:9px; border-radius:100px; background:rgba(255,255,255,0.06); overflow:hidden; }
  .bar > i { display:block; height:100%; border-radius:100px; width:0; transition:width 1s cubic-bezier(0.16,1,0.3,1); }
  .findings { margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; }
  @media (max-width:620px){ .findings { grid-template-columns:1fr; } }
  .finding { font-size:12.5px; color:var(--muted); display:flex; gap:7px; align-items:flex-start; line-height:1.4; }
  .finding.no { color:var(--faint); }
  .finding .m { font-weight:700; }
  .finding.yes .m { color:var(--good); }
  .finding.no .m { color:var(--bad); }

  /* Weakness / strength lists */
  .two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:720px){ .two-col { grid-template-columns:1fr; } }
  .list-item { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px; line-height:1.5; }
  .list-item:last-child { border-bottom:none; }
  .list-item .ic { flex-shrink:0; margin-top:1px; font-size:15px; }

  /* CTA */
  .cta { text-align:center; background:linear-gradient(135deg, rgba(99,102,241,0.14), rgba(139,92,246,0.08));
    border:1px solid rgba(99,102,241,0.3); border-radius:20px; padding:44px 30px; margin-top:26px; }
  .cta h3 { font-size:26px; font-weight:800; letter-spacing:-0.02em; margin:0 0 10px; }
  .cta p { color:var(--muted); font-size:15px; max-width:48ch; margin:0 auto 24px; line-height:1.55; }
  .btn-cta { display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:700; cursor:pointer;
    border:none; border-radius:12px; padding:16px 30px; color:#fff; background:linear-gradient(135deg,#6366f1,#818cf8);
    box-shadow:0 6px 28px rgba(99,102,241,0.5); transition:transform .12s, box-shadow .2s; }
  .btn-cta:hover { transform:translateY(-2px); box-shadow:0 10px 34px rgba(99,102,241,0.65); }
  .cta small { display:block; margin-top:16px; color:var(--faint); font-size:12.5px; }

  .disclaimer { text-align:center; font-size:12px; color:var(--faint); margin-top:20px; line-height:1.5; }

  /* Report toolbar — download PDF */
  .report-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
  .rt-label { font-size:13px; color:var(--muted); font-family:var(--mono); } .rt-label b { color:var(--text); }
  .btn-pdf { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:13.5px; font-weight:600; cursor:pointer;
    border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text); border-radius:10px; padding:9px 16px; transition:all .15s; }
  .btn-pdf:hover { border-color:var(--brand); background:var(--brand-dim); color:#fff; }
  .btn-pdf:disabled { opacity:.6; cursor:default; }

  /* Gate banner — the hard "AI literally can't read/reach you" warning */
  .gate { display:flex; gap:14px; align-items:flex-start; background:var(--bad-dim); border:1px solid rgba(248,113,113,0.35);
    border-radius:14px; padding:18px 20px; margin-bottom:18px; }
  .gate .g-ico { font-size:22px; line-height:1; flex-shrink:0; margin-top:1px; }
  .gate h4 { margin:0 0 6px; font-size:15px; font-weight:800; color:var(--bad); letter-spacing:-0.01em; }
  .gate ul { margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.55; }

  /* Two-number headline: readiness vs visibility */
  .headline-nums { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
  .hnum { flex:1; min-width:120px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
  .hnum b { display:block; font-size:26px; font-weight:900; letter-spacing:-0.03em; line-height:1; }
  .hnum b u { font-size:14px; font-weight:700; color:var(--faint); text-decoration:none; }
  .hnum span { display:block; font-size:11px; color:var(--muted); margin-top:5px; text-transform:uppercase; letter-spacing:.08em; }

  /* Evidence-tier badges */
  .tier { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:2px 6px; border-radius:5px; margin-left:7px; vertical-align:middle; }
  .tier-proven { background:rgba(52,211,153,0.16); color:var(--good); }
  .tier-strong { background:rgba(99,102,241,0.16); color:#a5b4fc; }
  .tier-moderate { background:rgba(251,191,36,0.14); color:var(--warn); }
  .tier-weak { background:rgba(255,255,255,0.06); color:var(--faint); }
  .gate-tag { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:2px 6px; border-radius:5px; margin-left:7px; background:var(--bad-dim); color:var(--bad); vertical-align:middle; }

  /* Crawler-access bot table */
  .bot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
  .bot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface-2); font-size:13px; }
  .bot.blocked { border-color:rgba(248,113,113,0.4); background:var(--bad-dim); }
  .bot .b-name { font-weight:600; }
  .bot .b-engine { font-size:11px; color:var(--faint); }
  .bot .b-state { font-size:11px; font-weight:700; padding:3px 8px; border-radius:100px; white-space:nowrap; }
  .bot .allow { background:var(--good-dim); color:var(--good); }
  .bot .block { background:var(--bad-dim); color:var(--bad); }
  .bot-group-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
    margin:16px 0 8px; }
  .bot-group-label:first-child { margin-top:0; }

  /* JS-render warning banner */
  .jsbanner { display:flex; gap:12px; align-items:flex-start; background:var(--warn-dim); border:1px solid rgba(251,191,36,0.32);
    border-radius:12px; padding:14px 16px; margin-top:14px; font-size:13px; color:var(--muted); line-height:1.5; }
  .jsbanner b { color:var(--warn); }

  /* Competitor tables inside visibility */
  .comp-table { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .comp-row { display:flex; gap:9px; align-items:flex-start; padding:6px 0; font-size:12.5px; line-height:1.4; }
  .comp-row .rank { flex-shrink:0; font-family:var(--mono); font-size:11px; color:var(--faint); min-width:20px; }
  .comp-row.you { color:var(--good); font-weight:600; }
  .comp-row .cn { font-weight:600; }
  .comp-row .why { color:var(--faint); font-size:11.5px; }
  .comp-star { color:var(--warn); font-size:11px; }
  .vis-rate { font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:8px; }
  .vis-excerpt { font-size:11.5px; color:var(--faint); margin-top:10px; padding:9px 11px; background:rgba(255,255,255,0.03);
    border-radius:8px; border-left:2px solid var(--border-strong); line-height:1.5; font-style:italic; }

  /* Off-site authority + GEO levers checklists */
  .lever-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
  @media (max-width:620px){ .lever-grid { grid-template-columns:1fr; } }
  .lever { display:flex; gap:9px; align-items:flex-start; font-size:13px; padding:8px 0; border-bottom:1px solid var(--border); line-height:1.45; }
  .lever .lm { font-weight:700; flex-shrink:0; margin-top:1px; }
  .lever.yes .lm { color:var(--good); }
  .lever.no .lm { color:var(--bad); }
  .lever .lwhy { display:block; color:var(--faint); font-size:11.5px; margin-top:2px; }

  /* Schema depth chips */
  .schema-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
  .chip { font-family:var(--mono); font-size:11.5px; padding:4px 10px; border-radius:7px; background:var(--brand-dim);
    border:1px solid rgba(99,102,241,0.25); color:#a5b4fc; }
  .chip.none { background:rgba(255,255,255,0.04); border-color:var(--border); color:var(--faint); }

  /* Prioritised issue list with tiers + why */
  .issue { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
  .issue:last-child { border-bottom:none; }
  .issue .i-ic { flex-shrink:0; font-size:16px; margin-top:1px; }
  .issue .i-body { flex:1; }
  .issue .i-title { font-size:14px; font-weight:600; margin-bottom:3px; }
  .issue .i-why { font-size:12.5px; color:var(--muted); line-height:1.5; }
  .issue .i-group { font-size:11px; color:var(--faint); margin-top:4px; }

  /* Methodology footer */
  .method { font-size:12.5px; color:var(--muted); line-height:1.6; }
  .method li { margin-bottom:7px; }
  .method-title { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; }
  /* Tri-state findings: ✓ machine-readable · ◐ on page not AI-readable · ✕ missing */
  .finding.part { color:var(--warn); }
  .finding.part .m { color:var(--warn); }
  .soft-tag { font-size:10px; color:var(--warn); background:var(--warn-dim); border-radius:5px; padding:1px 6px; margin-left:6px; white-space:nowrap; }
  .legend { display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--muted); margin:0 0 16px; }
  .legend b { font-weight:800; margin-right:3px; }
  .legend .lg-y b { color:var(--good); } .legend .lg-p b { color:var(--warn); } .legend .lg-n b { color:var(--bad); }
  .achv { margin-top:12px; font-size:12.5px; color:var(--warn); background:var(--warn-dim); border:1px solid var(--warn-dim); border-radius:9px; padding:8px 12px; }
  .achv b { font-size:15px; }
  .issue.partial { border-color:var(--warn-dim); }
  /* Head-to-head peer comparison */
  .peers { display:flex; flex-direction:column; gap:9px; }
  .peer { display:grid; grid-template-columns:minmax(120px,1.4fr) 3fr auto; align-items:center; gap:14px; padding:7px 10px; border-radius:9px; }
  .peer.you { background:var(--brand-dim); outline:1px solid var(--brand); }
  .p-name { font-size:13px; font-weight:600; display:flex; flex-direction:column; line-height:1.25; }
  .p-tag { display:inline-block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--brand,#6366f1); }
  .p-dom { font-size:11px; font-weight:400; color:var(--faint); }
  .p-bar { height:9px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
  .p-bar i { display:block; height:100%; border-radius:6px; transition:width 1s cubic-bezier(.16,1,.3,1); }
  .p-score { font-weight:800; font-size:17px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
  .p-score small { font-size:10px; font-weight:600; opacity:.85; }
  .peers-note { font-size:12px; color:var(--muted); margin-top:12px; }
  /* ── Perception sections — shared markup with the PDF, themed for the app ── */
  .perc h2 { font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px; }
  .perc .pnote { font-size:12.5px; color:var(--muted); margin:0 0 12px; }
  .perc .idtop { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
  .perc .pill { font-size:11px; font-weight:700; padding:2px 9px; border-radius:100px; }
  .perc .idmeta { font-size:12px; color:var(--muted); }
  .perc .idquote { font-style:italic; color:var(--muted); font-size:13px; border-left:3px solid var(--brand-dim); padding:4px 0 4px 12px; margin-bottom:10px; }
  .perc .idrow { font-size:12.5px; color:var(--muted); margin:5px 0; }
  .perc .idcols { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:14px; }
  .perc .idcol { border-radius:10px; padding:10px 12px; border:1px solid var(--border); background:var(--surface-2); }
  .perc .idcol.ok { border-color:var(--good-dim); } .perc .idcol.miss { border-color:var(--warn-dim); }
  .perc .idcol.bad { border-color:var(--bad-dim); } .perc .idcol.wh { border-color:var(--brand-dim); }
  .perc .idh { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; color:var(--faint); }
  .perc .idcol.ok .idh { color:var(--good); } .perc .idcol.miss .idh { color:var(--warn); }
  .perc .idcol.bad .idh { color:var(--bad); } .perc .idcol.wh .idh { color:var(--brand); }
  .perc .idli { font-size:12px; color:var(--muted); margin:4px 0; line-height:1.45; }
  .perc .mapwrap { text-align:center; margin:12px 0 6px; overflow-x:auto; }
  .perc .btbl { width:100%; border-collapse:collapse; margin-top:8px; }
  .perc .btbl th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); border-bottom:1px solid var(--border); padding:5px 8px; }
  .perc .btbl td { font-size:12.5px; padding:8px; border-bottom:1px solid var(--border); vertical-align:top; }
  .perc .btbl td.num, .perc .btbl th.num { text-align:right; white-space:nowrap; }
  .perc .btbl tr.you { background:var(--brand-dim); }
  .perc .btbl td.good { color:var(--good); font-weight:700; } .perc .btbl td.bad { color:var(--bad); font-weight:700; }
  .perc .btbl .attrs { color:var(--muted); }
  .perc .ytag { font-size:9.5px; font-weight:800; text-transform:uppercase; color:var(--brand); }
  .perc .qtxt { font-size:11px; color:var(--faint); margin-top:3px; line-height:1.4; }
  .perc .mini { display:inline-block; width:48px; height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden; vertical-align:middle; margin-right:6px; }
  .perc .mini i { display:block; height:100%; }
  .perc .srcgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:6px 14px; margin-top:10px; }
  .perc .srcrow { display:grid; grid-template-columns:1fr auto auto auto; gap:9px; align-items:center; font-size:12px; padding:5px 9px; border-radius:7px; background:var(--surface-2); }
  .perc .srcrow.mine { background:var(--brand-dim); font-weight:700; }
  .perc .sdom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .perc .skind { font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }
  .perc .scount { color:var(--faint); } .perc .spres { color:var(--brand); font-weight:700; }
  .perc .projq { font-size:13px; font-weight:700; color:var(--text); margin:8px 0 6px; }
  .perc .projdelta { font-size:13px; color:var(--muted); margin-bottom:10px; }
  .perc .projdelta .up { color:var(--good); font-weight:700; } .perc .projdelta .dn { color:var(--bad); font-weight:700; }
  .perc .projdelta .flat { color:var(--faint); font-weight:700; }
  .perc .projans { font-size:12.5px; color:var(--muted); line-height:1.6; background:var(--surface-2); border:1px solid var(--good-dim); border-radius:11px; padding:12px 14px; white-space:pre-wrap; }
  .perc .rmcols { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:12px; }
  .perc .rmh { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); border-bottom:2px solid var(--brand-dim); padding-bottom:5px; margin-bottom:9px; }
  .perc .rmitem { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
  .perc .rmtitle { font-size:12.5px; font-weight:700; color:var(--text); }
  .perc .rmdetail { font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.5; }
  .perc .rmmeta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
  .perc .rmeff { font-size:10px; color:var(--faint); }
  .perc .rmown { font-size:10px; font-weight:800; text-transform:uppercase; color:var(--muted); margin-left:auto; }
  .perc .rmown.ag { color:var(--brand); }
  .peer-insight { margin-top:12px; padding:11px 14px; background:var(--brand-dim); border:1px solid rgba(99,102,241,0.25); border-radius:10px; font-size:13px; color:var(--text); line-height:1.5; }
  /* visibility: queries + metric key */
  .vq { margin:2px 0 16px; font-size:12.5px; }
  .vq summary { cursor:pointer; color:var(--brand); font-weight:600; }
  .vq-list { margin:10px 0 0; padding-left:20px; color:var(--muted); display:flex; flex-direction:column; gap:5px; font-size:12.5px; line-height:1.45; }
  .vmn { margin-top:16px; padding:11px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; font-size:12px; color:var(--muted); line-height:1.6; }
  .vmn b { color:var(--text); }
  /* ── Email-verification modal ── */
  .vmodal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px;
    background:rgba(10,10,15,0.55); backdrop-filter:blur(3px); }
  .vmodal.show { display:flex; }
  .vcard { position:relative; width:100%; max-width:420px; background:var(--surface-1); border:1px solid var(--border);
    border-radius:18px; padding:30px 28px 24px; box-shadow:0 24px 60px rgba(0,0,0,0.35); animation:vpop .18s cubic-bezier(.16,1,.3,1); }
  @keyframes vpop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
  .vclose { position:absolute; top:12px; right:14px; background:none; border:none; font-size:24px; line-height:1; color:var(--faint); cursor:pointer; padding:4px 8px; }
  .vclose:hover { color:var(--text); }
  .vico { font-size:30px; margin-bottom:8px; }
  .vcard h3 { font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color:var(--text); }
  .vsub { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0 0 18px; }
  .vsub b { color:var(--text); }
  .vcard input { width:100%; padding:13px 15px; font-size:15px; border-radius:11px; border:1px solid var(--border-strong);
    background:var(--surface-2); color:var(--text); outline:none; transition:border-color .15s; }
  .vcard input:focus { border-color:var(--brand); }
  .vcode-in { text-align:center; letter-spacing:10px; font-size:24px; font-weight:700; font-family:var(--mono); }
  .vbtn { width:100%; margin-top:12px; padding:13px 16px; font-size:15px; font-weight:700; color:#fff; background:var(--brand);
    border:none; border-radius:11px; cursor:pointer; transition:filter .15s; }
  .vbtn:hover { filter:brightness(1.07); } .vbtn:disabled { opacity:.6; cursor:default; }
  .verr { color:var(--bad); font-size:13px; margin-top:10px; min-height:16px; line-height:1.4; }
  .vfine { font-size:11.5px; color:var(--faint); margin:14px 0 0; line-height:1.5; }
  .vfine a { color:var(--brand); text-decoration:none; } .vfine a:hover { text-decoration:underline; }