/* ============================================================
   infographic-hero.css
   Search Engine Hub — Animated Hero Infographic
   Shared by ALL service pages. Each page's <script> handles
   its own data and screen logic.
   Light: red/maroon  |  Dark: purple/violet  — WCAG AA+
   ============================================================ */

/* ── CSS tokens — light mode ─────────────────────────────────── */
:root {
  --inf-bg:                #FDF8F5;
  --inf-bg-header:         #2A1214;
  --inf-bg-card:           #FFFFFF;
  --inf-bg-row-even:       #FAF5F3;
  --inf-bg-chip-trans:     #FDEAE8;
  --inf-bg-chip-info:      #EEF6FF;
  --inf-bg-chip-comm:      #FFF8EC;
  --inf-bg-chip-nav:       #EDFBF4;
  --inf-bg-step-active:    #FDEAE8;
  --inf-bg-step-done:      #F0FAF4;
  --inf-bg-step-pending:   #F5EDE8;
  --inf-bg-sparkline:      #FFF5F3;
  --inf-border:            rgba(42,18,20,.18);
  --inf-border-row:        rgba(42,18,20,.07);
  --inf-border-card:       rgba(42,18,20,.12);
  --inf-accent:            #D43B2A;
  --inf-accent-bar:        #D43B2A;
  --inf-accent-bar-low:    #166534;
  --inf-accent-bar-low-bg: #DCFCE7;
  --inf-text-head:         #FFFFFF;
  --inf-text-primary:      #2A1214;
  --inf-text-muted:        #5A5A5A;
  --inf-text-subtle:       #767676;
  --inf-text-chip-trans:   #7B1D1D;
  --inf-text-chip-info:    #1E40AF;
  --inf-text-chip-comm:    #92400E;
  --inf-text-chip-nav:     #065F46;
  --inf-text-step-active:  #7B1D1D;
  --inf-text-step-done:    #166534;
  --inf-text-step-pending: #5A5A5A;
  --inf-dot-filled:        #2A1214;
  --inf-dot-hard:          #D43B2A;
  --inf-dot-empty:         #D6C8C4;
  --inf-spark-stroke:      #D43B2A;
  --inf-spark-fill:        rgba(212,59,42,.08);
  --inf-grid-line:         rgba(42,18,20,.05);
  --inf-header-tag-bg:     rgba(255,255,255,.12);
  --inf-header-tag-color:  rgba(255,255,255,.85);
  --inf-pulse:             #22c55e;
}

/* ── CSS tokens — dark mode ──────────────────────────────────── */
[data-theme="dark"] {
  --inf-bg:                #111113;
  --inf-bg-header:         #13103B;
  --inf-bg-card:           #1C1C1F;
  --inf-bg-row-even:       #161619;
  --inf-bg-chip-trans:     rgba(167,139,250,.15);
  --inf-bg-chip-info:      rgba(96,165,250,.12);
  --inf-bg-chip-comm:      rgba(251,191,36,.1);
  --inf-bg-chip-nav:       rgba(52,211,153,.1);
  --inf-bg-step-active:    rgba(167,139,250,.12);
  --inf-bg-step-done:      rgba(74,222,128,.1);
  --inf-bg-step-pending:   rgba(255,255,255,.04);
  --inf-bg-sparkline:      rgba(124,58,237,.06);
  --inf-border:            rgba(167,139,250,.2);
  --inf-border-row:        rgba(255,255,255,.05);
  --inf-border-card:       rgba(255,255,255,.08);
  --inf-accent:            #A78BFA;
  --inf-accent-bar:        #7C3AED;
  --inf-accent-bar-low:    #4ADE80;
  --inf-accent-bar-low-bg: rgba(74,222,128,.1);
  --inf-text-head:         #F2F2F7;
  --inf-text-primary:      #F2F2F7;
  --inf-text-muted:        #98989F;
  --inf-text-subtle:       #636366;
  --inf-text-chip-trans:   #C4B5FD;
  --inf-text-chip-info:    #93C5FD;
  --inf-text-chip-comm:    #FCD34D;
  --inf-text-chip-nav:     #6EE7B7;
  --inf-text-step-active:  #C4B5FD;
  --inf-text-step-done:    #4ADE80;
  --inf-text-step-pending: #636366;
  --inf-dot-filled:        #C4B5FD;
  --inf-dot-hard:          #F87171;
  --inf-dot-empty:         #3A3A3F;
  --inf-spark-stroke:      #7C3AED;
  --inf-spark-fill:        rgba(124,58,237,.12);
  --inf-grid-line:         rgba(255,255,255,.04);
  --inf-header-tag-bg:     rgba(167,139,250,.18);
  --inf-header-tag-color:  #C4B5FD;
  --inf-pulse:             #4ADE80;
}

/* ── Container ───────────────────────────────────────────────── */
#heroInfographic {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--inf-bg);
  border: 1.5px solid var(--inf-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* grid texture */
#heroInfographic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--inf-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--inf-grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ── Header bar ──────────────────────────────────────────────── */
.inf-header {
  background: var(--inf-bg-header);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background .35s ease;
}
.inf-header-left { display: flex; align-items: center; gap: 8px; }
.inf-header-dots { display: flex; gap: 5px; }
.inf-header-dots span {
  width: 10px; height: 10px; border-radius: 50%; display: block; opacity: .7;
}
.inf-header-dots span:nth-child(1) { background: #FF5F57; }
.inf-header-dots span:nth-child(2) { background: #FFBD2E; }
.inf-header-dots span:nth-child(3) { background: #28C840; }
.inf-header-title {
  font-family: var(--ff-body);
  font-size: 11px; font-weight: 600;
  color: var(--inf-text-head); opacity: .7;
  letter-spacing: .06em; text-transform: uppercase;
}
.inf-header-tag {
  font-family: var(--ff-body);
  font-size: 10px; font-weight: 700;
  background: var(--inf-header-tag-bg);
  color: var(--inf-header-tag-color);
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: .04em;
  transition: background .35s, color .35s;
}

/* ── Step progress ───────────────────────────────────────────── */
.inf-steps {
  display: flex;
  padding: 12px 14px 8px;
  position: relative; z-index: 2; flex-shrink: 0;
}
.inf-step {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  position: relative; cursor: default;
}
.inf-step:not(:last-child)::after {
  content: ''; position: absolute;
  top: 12px; left: 50%; width: 100%; height: 2px;
  background: var(--inf-dot-empty);
  transition: background .4s ease; z-index: 0;
}
.inf-step.done:not(:last-child)::after { background: var(--inf-accent-bar); }
[data-theme="dark"] .inf-step.done:not(:last-child)::after { background: var(--inf-accent); }
.inf-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--inf-bg-step-pending);
  border: 1.5px solid var(--inf-dot-empty);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-body); font-size: 10px; font-weight: 700;
  color: var(--inf-text-step-pending);
  position: relative; z-index: 1;
  transition: all .3s ease;
}
.inf-step.active .inf-step-num {
  background: var(--inf-bg-step-active);
  border-color: var(--inf-accent);
  color: var(--inf-text-step-active);
  box-shadow: 0 0 0 3px rgba(212,59,42,.15);
}
[data-theme="dark"] .inf-step.active .inf-step-num {
  box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.inf-step.done .inf-step-num {
  background: var(--inf-bg-step-done);
  border-color: var(--inf-accent-bar-low);
  color: var(--inf-text-step-done);
}
.inf-step-label {
  font-family: var(--ff-body); font-size: 9px; font-weight: 600;
  color: var(--inf-text-subtle); text-align: center;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.3;
  transition: color .3s; white-space: nowrap;
}
.inf-step.active .inf-step-label { color: var(--inf-text-step-active); }
.inf-step.done .inf-step-label   { color: var(--inf-text-step-done); }

/* ── Panel + screens ─────────────────────────────────────────── */
.inf-panel { flex: 1; position: relative; overflow: hidden; z-index: 1; }
.inf-screen {
  position: absolute; inset: 0;
  padding: 10px 14px 12px;
  display: flex; flex-direction: column; gap: 7px;
  opacity: 0; transform: translateX(28px);
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.inf-screen.active  { opacity: 1; transform: translateX(0); pointer-events: auto; }
.inf-screen.exit    { opacity: 0; transform: translateX(-28px); }

/* ── Shared screen elements ──────────────────────────────────── */
.inf-screen-title {
  font-family: var(--ff-body); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inf-text-muted); margin-bottom: 2px;
}

/* Discovery / source cards (used by keyword-research + audit) */
.inf-disc-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--inf-bg-chip-trans);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 3px; flex-shrink: 0;
  transition: background .35s;
}
.inf-disc-icon svg { width: 14px; height: 14px; stroke: var(--inf-accent); }
.inf-disc-label {
  font-family: var(--ff-body); font-size: 9px; font-weight: 700;
  color: var(--inf-text-muted); text-transform: uppercase; letter-spacing: .07em;
}
.inf-disc-val {
  font-family: var(--ff-display); font-size: 15px; font-weight: 900;
  color: var(--inf-text-primary); line-height: 1;
}
.inf-disc-sub { font-family: var(--ff-body); font-size: 9px; color: var(--inf-text-subtle); }

/* Intent chips */
.inf-intent-chip {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  padding: 2px 6px; border-radius: 20px;
  display: inline-block; letter-spacing: .02em; white-space: nowrap;
  transition: background .35s, color .35s;
}
.inf-intent-chip.trans { background: var(--inf-bg-chip-trans); color: var(--inf-text-chip-trans); }
.inf-intent-chip.info  { background: var(--inf-bg-chip-info);  color: var(--inf-text-chip-info); }
.inf-intent-chip.comm  { background: var(--inf-bg-chip-comm);  color: var(--inf-text-chip-comm); }
.inf-intent-chip.nav   { background: var(--inf-bg-chip-nav);   color: var(--inf-text-chip-nav); }

/* Volume bar */
.inf-vol-wrap { display: flex; align-items: center; gap: 4px; }
.inf-vol-bg { flex: 1; height: 4px; background: var(--inf-dot-empty); border-radius: 2px; overflow: hidden; }
.inf-vol-fill {
  height: 100%; border-radius: 2px; background: var(--inf-accent-bar); width: 0;
  transition: width .75s cubic-bezier(.4,0,.2,1);
}
.inf-vol-num { font-family: var(--ff-body); font-size: 8.5px; color: var(--inf-text-muted); min-width: 22px; text-align: right; }

/* Difficulty dots */
.inf-diff-dots { display: flex; gap: 2px; justify-content: flex-end; }
.inf-diff-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--inf-dot-empty); transition: background .35s; }
.inf-diff-dot.on      { background: var(--inf-dot-filled); }
.inf-diff-dot.on.hard { background: var(--inf-dot-hard); }

/* Tier dot */
.inf-tier-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* Keyword row */
.inf-kw-row {
  display: grid; grid-template-columns: 2fr 54px 80px 62px;
  gap: 4px; align-items: center; padding: 6px 10px;
  border-radius: 7px; border: 1px solid var(--inf-border-row);
  background: var(--inf-bg-card);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease, background .35s;
}
.inf-kw-row.show { opacity: 1; transform: translateX(0); }
.inf-kw-row:nth-child(odd) { background: var(--inf-bg-row-even); }
.inf-kw-name {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  color: var(--inf-text-primary); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 4px;
}

/* Competitor row */
.inf-comp-row {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 8px; display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 6px; align-items: center; padding: 7px 10px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, background .35s;
}
.inf-comp-row.show { opacity: 1; transform: translateY(0); }
.inf-comp-name { font-family: var(--ff-body); font-size: 10px; font-weight: 600; color: var(--inf-text-primary); display: flex; align-items: center; gap: 5px; }
.inf-comp-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.inf-comp-kws  { font-family: var(--ff-display); font-size: 12px; font-weight: 900; color: var(--inf-text-primary); text-align: right; }
.inf-comp-bar-wrap { display: flex; align-items: center; gap: 4px; }
.inf-comp-bar-bg { flex: 1; height: 4px; background: var(--inf-dot-empty); border-radius: 2px; overflow: hidden; }
.inf-comp-bar-fill { height: 100%; border-radius: 2px; width: 0; transition: width .9s cubic-bezier(.4,0,.2,1); }
.inf-comp-pct { font-family: var(--ff-body); font-size: 9px; color: var(--inf-text-muted); min-width: 22px; }

/* Gap banner */
.inf-gap-banner {
  background: var(--inf-accent-bar-low-bg); border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .35s, border-color .35s;
}
[data-theme="dark"] .inf-gap-banner { border-color: rgba(74,222,128,.2); }
.inf-gap-banner svg { width: 12px; height: 12px; stroke: var(--inf-accent-bar-low); flex-shrink: 0; }
.inf-gap-banner span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent-bar-low); }

/* Priority tier rows */
.inf-tier-section { display: flex; flex-direction: column; gap: 5px; }
.inf-tier-label {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 0 2px 2px; border-bottom: 1.5px solid var(--inf-border-row); margin-bottom: 2px;
}
.inf-tier-label.quick { color: var(--inf-accent-bar-low); }
.inf-tier-label.mid   { color: var(--inf-accent); }
.inf-tier-label.long  { color: var(--inf-text-muted); }
.inf-tier-kw {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: var(--inf-bg-card);
  border: 1px solid var(--inf-border-row); border-radius: 6px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s ease, background .35s;
}
.inf-tier-kw.show { opacity: 1; transform: translateX(0); }
.inf-tier-kw-name { font-family: var(--ff-body); font-size: 9px; font-weight: 600; color: var(--inf-text-primary); }
.inf-tier-vol { font-family: var(--ff-body); font-size: 8.5px; color: var(--inf-text-subtle); min-width: 28px; text-align: right; }
.inf-tier-badge {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; flex-shrink: 0;
  transition: background .35s, color .35s;
}
.inf-tier-badge.quick { background: var(--inf-accent-bar-low-bg); color: var(--inf-accent-bar-low); }
.inf-tier-badge.mid   { background: var(--inf-bg-chip-trans); color: var(--inf-text-chip-trans); }
.inf-tier-badge.long  { background: var(--inf-bg-step-pending); color: var(--inf-text-muted); }

/* Delivery stats */
.inf-delivery-row { display: flex; gap: 6px; }
.inf-delivery-stat {
  flex: 1; background: var(--inf-bg-card);
  border: 1px solid var(--inf-border-card); border-radius: 10px;
  padding: 10px 10px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  transition: background .35s, border-color .35s;
}
.inf-delivery-stat-num {
  font-family: var(--ff-display); font-size: 18px; font-weight: 900;
  color: var(--inf-text-primary); line-height: 1;
}
.inf-delivery-stat-num span { font-size: 13px; color: var(--inf-accent); }
.inf-delivery-stat-label {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--inf-text-muted); text-align: center;
}

/* Sparkline */
.inf-sparkline-wrap {
  flex: 1; background: var(--inf-bg-sparkline);
  border: 1px solid var(--inf-border-card); border-radius: 10px;
  padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  transition: background .35s, border-color .35s;
}
.inf-sparkline-title {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--inf-text-muted);
}
.inf-sparkline-svg { width: 100%; flex: 1; min-height: 36px; }
.inf-spark-area { fill: var(--inf-spark-fill); transition: fill .35s; }
.inf-spark-line {
  fill: none; stroke: var(--inf-spark-stroke); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .3s, stroke .35s;
}
.inf-spark-line.drawn { stroke-dashoffset: 0; }

/* Deliverable checklist */
.inf-deliverable-list { display: flex; flex-direction: column; gap: 5px; }
.inf-deliv-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; background: var(--inf-bg-card);
  border: 1px solid var(--inf-border-row); border-radius: 7px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, background .35s;
}
.inf-deliv-item.show { opacity: 1; transform: translateY(0); }
.inf-deliv-check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--inf-accent-bar-low-bg);
  border: 1px solid var(--inf-accent-bar-low);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .35s, border-color .35s;
}
.inf-deliv-check svg { width: 9px; height: 9px; stroke: var(--inf-accent-bar-low); }
.inf-deliv-text { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-text-primary); }

/* Seed bar (keyword research) */
.inf-seed-bar {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 9px 11px;
  display: flex; align-items: center; gap: 8px; grid-column: 1/-1;
  transition: background .35s, border-color .35s;
}
.inf-seed-bar svg { width: 14px; height: 14px; stroke: var(--inf-accent); flex-shrink: 0; }
.inf-seed-text { font-family: var(--ff-body); font-size: 11px; color: var(--inf-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; }
.inf-seed-cursor {
  display: inline-block; width: 1.5px; height: 12px;
  background: var(--inf-accent); vertical-align: text-bottom;
  animation: infBlink 1s step-end infinite;
}
@keyframes infBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Discovery grid (keyword research screen 1) */
.inf-discovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; }
.inf-disc-card {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 10px 11px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .35s, border-color .35s;
}

/* Column labels (keyword map) */
.inf-col-labels { display: grid; grid-template-columns: 2fr 54px 80px 62px; gap: 4px; padding: 0 10px 4px; }
.inf-col-lbl { font-family: var(--ff-body); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--inf-text-subtle); }
.inf-col-lbl.right { text-align: right; }

/* Competitor column labels */
.inf-comp-header { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; padding: 5px 10px; }
.inf-comp-col-lbl { font-family: var(--ff-body); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--inf-text-subtle); }
.inf-comp-col-lbl.right { text-align: right; }

/* ── Footer ──────────────────────────────────────────────────── */
.inf-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; border-top: 1px solid var(--inf-border-row);
  flex-shrink: 0; position: relative; z-index: 2;
  background: var(--inf-bg);
  transition: background .35s, border-color .35s;
}
.inf-footer-left { display: flex; align-items: center; gap: 5px; font-family: var(--ff-body); font-size: 9px; color: var(--inf-text-muted); font-weight: 600; }
.inf-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--inf-pulse);
  animation: infPulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes infPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.65)} }
.inf-footer-right { display: flex; gap: 4px; }
.inf-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--inf-dot-empty); transition: background .3s, transform .3s; }
.inf-nav-dot.active { background: var(--inf-accent); transform: scale(1.35); }

/* ── Shared fade-in utility ──────────────────────────────────── */
.inf-fade-in { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.inf-fade-in.show { opacity: 1; transform: translateY(0); }

/* ── Float badges (below the card) ──────────────────────────── */
.svc-float-badge--below-left {
  position: absolute; bottom: -22px; left: 16px;
  animation: float-badge 4s ease-in-out infinite; z-index: 3;
}
.svc-float-badge--below-right {
  position: absolute; bottom: -22px; right: 16px;
  animation: float-badge 4s ease-in-out infinite;
  animation-delay: -2s; z-index: 3;
}
.svc-hero-img { padding-bottom: 52px !important; }

/* ── SEO Audit — crawl progress ──────────────────────────────── */
.inf-crawl-progress {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 10px 12px;
  transition: background .35s, border-color .35s;
}
.inf-crawl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.inf-crawl-label { font-family: var(--ff-body); font-size: 10px; font-weight: 600; color: var(--inf-text-muted); }
.inf-crawl-count { font-family: var(--ff-body); font-size: 10px; font-weight: 700; color: var(--inf-text-primary); }
.inf-crawl-track { height: 6px; background: var(--inf-dot-empty); border-radius: 3px; overflow: hidden; }
.inf-crawl-fill { height: 100%; border-radius: 3px; background: var(--inf-accent-bar); width: 0; transition: background .35s; }
[data-theme="dark"] .inf-crawl-fill { background: var(--inf-accent); }

/* ── SEO Audit — source cards ────────────────────────────────── */
.inf-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; }
.inf-source-card {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 3px;
  transition: background .35s, border-color .35s;
}

/* ── SEO Audit — issue rows ──────────────────────────────────── */
.inf-issue-row {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 4px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease, background .35s;
}
.inf-issue-row.show { opacity: 1; transform: translateX(0); }
.inf-issue-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.inf-issue-name { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-text-primary); flex: 1; padding-right: 6px; }
.inf-issue-sev { font-family: var(--ff-body); font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; transition: background .35s, color .35s; }
.inf-issue-sev--crit { background: #FDEAE8; color: #7B1D1D; }
.inf-issue-sev--warn { background: #FFF8EC; color: #92400E; }
.inf-issue-sev--info { background: #EEF6FF; color: #1E40AF; }
[data-theme="dark"] .inf-issue-sev--crit { background: rgba(248,113,113,.12); color: #FCA5A5; }
[data-theme="dark"] .inf-issue-sev--warn { background: rgba(252,211,77,.1);   color: #FDE68A; }
[data-theme="dark"] .inf-issue-sev--info { background: rgba(147,197,253,.1);  color: #BFDBFE; }
.inf-issue-bar-wrap { display: flex; align-items: center; gap: 5px; }
.inf-issue-bar-bg { flex: 1; height: 4px; background: var(--inf-dot-empty); border-radius: 2px; overflow: hidden; }
.inf-issue-bar-fill { height: 100%; border-radius: 2px; width: 0; transition: width .8s cubic-bezier(.4,0,.2,1); }
.inf-issue-bar-fill--crit { background: #D43B2A; }
.inf-issue-bar-fill--warn { background: #D97706; }
.inf-issue-bar-fill--info { background: #2563EB; }
[data-theme="dark"] .inf-issue-bar-fill--crit { background: #F87171; }
[data-theme="dark"] .inf-issue-bar-fill--warn { background: #FCD34D; }
[data-theme="dark"] .inf-issue-bar-fill--info { background: #93C5FD; }
.inf-issue-count { font-family: var(--ff-body); font-size: 9px; font-weight: 700; color: var(--inf-text-muted); min-width: 14px; text-align: right; }
.inf-issue-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--inf-bg-step-active);
  border: 1px solid var(--inf-border-card); border-radius: 8px;
  transition: background .35s, border-color .35s;
}
.inf-issue-total-label { font-family: var(--ff-body); font-size: 9px; font-weight: 600; color: var(--inf-text-step-active); }
.inf-issue-total-num  { font-family: var(--ff-display); font-size: 13px; font-weight: 900; color: var(--inf-accent); }

/* ── SEO Audit — health gauge ────────────────────────────────── */
.inf-health-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.inf-gauge-wrap  { display: flex; justify-content: center; }
.inf-gauge-svg   { width: 140px; height: 82px; }
.inf-gauge-track { stroke: var(--inf-dot-empty); transition: stroke .35s; }
.inf-gauge-fill  { stroke: var(--inf-accent-bar); transition: stroke .35s; }
[data-theme="dark"] .inf-gauge-fill { stroke: var(--inf-accent); }
.inf-gauge-num {
  font-family: var(--ff-display); font-size: 20px; font-weight: 900;
  fill: var(--inf-text-primary); dominant-baseline: auto;
}
.inf-gauge-label-svg {
  font-family: var(--ff-body); font-size: 7px; font-weight: 600;
  fill: var(--inf-text-muted); letter-spacing: .07em; text-transform: uppercase;
}
.inf-health-bars { display: flex; flex-direction: column; gap: 5px; }
.inf-hbar-row { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 6px; }
.inf-hbar-label { font-family: var(--ff-body); font-size: 9px; font-weight: 600; color: var(--inf-text-muted); }
.inf-hbar-bg { height: 5px; background: var(--inf-dot-empty); border-radius: 3px; overflow: hidden; }
.inf-hbar-fill { height: 100%; border-radius: 3px; width: 0; transition: width .9s cubic-bezier(.4,0,.2,1); }
.inf-hbar-fill--crit { background: #D43B2A; }
.inf-hbar-fill--warn { background: #D97706; }
.inf-hbar-fill--ok   { background: #166534; }
[data-theme="dark"] .inf-hbar-fill--crit { background: #F87171; }
[data-theme="dark"] .inf-hbar-fill--warn { background: #FCD34D; }
[data-theme="dark"] .inf-hbar-fill--ok   { background: #4ADE80; }
.inf-hbar-val { font-family: var(--ff-body); font-size: 8.5px; font-weight: 700; color: var(--inf-text-muted); text-align: right; }

/* ── Local SEO — GBP completeness bar ───────────────────────────── */
.inf-gbp-score-row {
  display: flex; justify-content: space-between; align-items: center;
}
.inf-gbp-score-label {
  font-family: var(--ff-body); font-size: 10px; font-weight: 600;
  color: var(--inf-text-muted);
}
.inf-gbp-score-val {
  font-family: var(--ff-display); font-size: 13px; font-weight: 900;
  color: var(--inf-accent);
}
.inf-gbp-track {
  height: 6px; background: var(--inf-dot-empty); border-radius: 3px; overflow: hidden;
}
.inf-gbp-fill {
  height: 100%; border-radius: 3px;
  background: var(--inf-accent-bar);
  width: 0; transition: width .6s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .inf-gbp-fill { background: var(--inf-accent); }

/* ── Local SEO — GBP signal checklist ───────────────────────────── */
.inf-gbp-signals {
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.inf-gbp-signal {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 7px;
  transition: background .35s, border-color .35s;
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  color: var(--inf-text-primary);
}
.inf-gbp-sig-icon {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
}
.inf-gbp-sig-icon svg { width: 9px; height: 9px; }
.inf-gbp-sig-icon.pending {
  background: var(--inf-bg-step-pending);
  border: 1.5px solid var(--inf-dot-empty);
}
.inf-gbp-sig-icon.pending svg { stroke: var(--inf-text-subtle); }
.inf-gbp-sig-icon.done {
  background: var(--inf-accent-bar-low-bg);
  border: 1.5px solid var(--inf-accent-bar-low);
}
.inf-gbp-sig-icon.done svg { stroke: var(--inf-accent-bar-low); }

/* ── Local SEO — Local Pack ──────────────────────────────────────── */
.inf-pack-query {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 8px 11px;
  display: flex; align-items: center; gap: 7px;
  transition: background .35s, border-color .35s;
}
.inf-pack-query svg { width: 13px; height: 13px; stroke: var(--inf-text-muted); flex-shrink: 0; }
.inf-pack-query span { font-family: var(--ff-body); font-size: 10px; font-weight: 600; color: var(--inf-text-primary); }

.inf-pack-results { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.inf-pack-result {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, background .35s, border-color .35s;
}
.inf-pack-result.you { border-color: var(--inf-accent); background: var(--inf-bg-step-active); }
[data-theme="dark"] .inf-pack-result.you { border-color: var(--inf-accent); }
.inf-pack-result.show { opacity: 1; transform: translateY(0); }

.inf-pack-pos {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.inf-pack-pos svg { width: 14px; height: 14px; }
.inf-pack-pos.you { background: var(--inf-accent); }
.inf-pack-pos.you svg { stroke: #fff; }
.inf-pack-pos.comp { background: var(--inf-dot-empty); }
.inf-pack-pos.comp svg { stroke: var(--inf-text-muted); }

.inf-pack-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inf-pack-name { font-family: var(--ff-body); font-size: 10px; font-weight: 700; color: var(--inf-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inf-pack-stars { font-size: 9px; color: var(--inf-text-muted); }
.inf-pack-rating { font-weight: 700; color: var(--inf-text-primary); }
.inf-pack-count  { color: var(--inf-text-subtle); }
.inf-pack-tag { font-family: var(--ff-body); font-size: 8px; font-weight: 700; display: inline-block; }
.you-tag { color: var(--inf-accent); }

.inf-pack-rank-badge {
  font-family: var(--ff-display); font-size: 12px; font-weight: 900;
  color: var(--inf-text-muted); flex-shrink: 0; min-width: 20px; text-align: right;
}
.you-badge { color: var(--inf-accent); }

.inf-pack-banner {
  background: var(--inf-accent-bar-low-bg); border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .35s, border-color .35s;
}
[data-theme="dark"] .inf-pack-banner { border-color: rgba(74,222,128,.2); }
.inf-pack-banner svg  { width: 12px; height: 12px; stroke: var(--inf-accent-bar-low); flex-shrink: 0; }
.inf-pack-banner span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent-bar-low); }

/* ── Local SEO — Citation screen ─────────────────────────────────── */
.inf-cite-summary {
  display: flex; gap: 6px;
}
.inf-cite-stat {
  flex: 1; background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 8px 8px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .35s, border-color .35s;
}
.inf-cite-num {
  font-family: var(--ff-display); font-size: 17px; font-weight: 900;
  color: var(--inf-text-primary); line-height: 1;
}
.inf-cite-num.green { color: var(--inf-accent-bar-low); }
[data-theme="dark"] .inf-cite-num.green { color: var(--inf-accent-bar-low); }
.inf-cite-label {
  font-family: var(--ff-body); font-size: 8px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--inf-text-muted); text-align: center;
}
.inf-cite-rows { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.inf-cite-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 7px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .3s ease, transform .3s ease, background .35s;
}
.inf-cite-row.show { opacity: 1; transform: translateX(0); }
.inf-cite-row-name {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  color: var(--inf-text-primary);
}
.inf-cite-row-status {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; flex-shrink: 0;
  transition: background .35s, color .35s;
}
.inf-cite-row-status--ok  { background: var(--inf-accent-bar-low-bg); color: var(--inf-accent-bar-low); }
.inf-cite-row-status--fix { background: var(--inf-bg-chip-trans); color: var(--inf-text-chip-trans); }
[data-theme="dark"] .inf-cite-row-status--ok  { background: rgba(74,222,128,.1);  color: #4ADE80; }
[data-theme="dark"] .inf-cite-row-status--fix { background: rgba(167,139,250,.15); color: #C4B5FD; }

/* ── On-Page SEO — audit score header ───────────────────────────── */
.inf-score-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 10px; padding: 8px 12px;
  transition: background .35s, border-color .35s;
}
.inf-score-url {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  color: var(--inf-text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1;
}
.inf-score-badge {
  font-family: var(--ff-display); font-size: 14px; font-weight: 900;
  min-width: 28px; text-align: right; transition: color .35s;
  color: var(--inf-text-muted);
}
.inf-score-badge.ok   { color: var(--inf-accent-bar-low); }
.inf-score-badge.warn { color: var(--inf-accent); }

/* ── On-Page SEO — audit checklist ──────────────────────────────── */
.inf-audit-checks { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.inf-audit-check {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 7px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease, background .35s;
  font-family: var(--ff-body); font-size: 9.5px;
}
.inf-audit-check.show { opacity: 1; transform: translateX(0); }
.inf-audit-chk-icon {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
}
.inf-audit-chk-icon svg { width: 9px; height: 9px; }
.inf-audit-chk-icon.pending {
  background: var(--inf-bg-step-pending);
  border: 1.5px solid var(--inf-dot-empty);
}
.inf-audit-chk-icon.pending svg { stroke: var(--inf-text-subtle); }
.inf-audit-chk-icon.done {
  background: var(--inf-accent-bar-low-bg);
  border: 1.5px solid var(--inf-accent-bar-low);
}
.inf-audit-chk-icon.done svg { stroke: var(--inf-accent-bar-low); }
.inf-audit-chk-icon.warn {
  background: var(--inf-bg-chip-trans);
  border: 1.5px solid var(--inf-accent);
}
.inf-audit-chk-icon.warn svg { stroke: var(--inf-accent); }
.inf-audit-chk-label { flex: 1; font-weight: 600; color: var(--inf-text-primary); }
.inf-audit-chk-status {
  font-size: 8.5px; font-weight: 700; color: var(--inf-text-subtle);
  min-width: 44px; text-align: right;
}

/* ── On-Page SEO — before / after blocks ────────────────────────── */
.inf-ba-block {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 9px; padding: 7px 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease, background .35s, border-color .35s;
}
.inf-ba-block.show { opacity: 1; transform: translateY(0); }
.inf-ba-label {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px;
}
.inf-ba-label.warn { color: var(--inf-accent); }
.inf-ba-label.ok   { color: var(--inf-accent-bar-low); }
.inf-ba-text {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  line-height: 1.45; color: var(--inf-text-primary);
}
.inf-ba-before { color: var(--inf-text-muted); text-decoration: line-through; }
.inf-ba-meta   { font-size: 8.5px; font-weight: 400; line-height: 1.5; }
.inf-ba-arrow {
  display: flex; justify-content: center; padding: 1px 0;
}
.inf-ba-arrow svg { width: 14px; height: 14px; stroke: var(--inf-accent-bar-low); }
.inf-ba-ctr {
  background: var(--inf-accent-bar-low-bg); border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px; padding: 5px 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .35s, border-color .35s;
}
[data-theme="dark"] .inf-ba-ctr { border-color: rgba(74,222,128,.2); }
.inf-ba-ctr svg  { width: 11px; height: 11px; stroke: var(--inf-accent-bar-low); flex-shrink: 0; }
.inf-ba-ctr span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent-bar-low); }

/* ── On-Page SEO — keyword map rows ─────────────────────────────── */
.inf-map-row {
  display: grid; grid-template-columns: 2.2fr 52px 1fr;
  gap: 4px; align-items: center; padding: 6px 10px;
  border-radius: 7px; border: 1px solid var(--inf-border-row);
  background: var(--inf-bg-card);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease, background .35s;
}
.inf-map-row:nth-child(odd) { background: var(--inf-bg-row-even); }
.inf-map-row.show { opacity: 1; transform: translateX(0); }
.inf-map-page {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 600;
  color: var(--inf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inf-map-kw {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 600;
  color: var(--inf-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Technical SEO — crawl stats row ────────────────────────────── */
.inf-crawl-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 5px;
}
.inf-crawl-stat {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 8px; padding: 7px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .35s, border-color .35s;
}
.inf-crawl-stat-num {
  font-family: var(--ff-display); font-size: 15px; font-weight: 900; line-height: 1;
}
.inf-crawl-stat-num.ok   { color: var(--inf-accent-bar-low); }
.inf-crawl-stat-num.warn { color: #D97706; }
.inf-crawl-stat-num.crit { color: var(--inf-accent); }
.inf-crawl-stat-num.info { color: var(--inf-text-muted); }
[data-theme="dark"] .inf-crawl-stat-num.warn { color: #FCD34D; }
[data-theme="dark"] .inf-crawl-stat-num.crit { color: #F87171; }
.inf-crawl-stat-label {
  font-family: var(--ff-body); font-size: 7.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--inf-text-subtle);
  text-align: center;
}

/* ── Technical SEO — crawl log ───────────────────────────────────── */
.inf-crawl-log {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.inf-log-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 6px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .3s ease, transform .3s ease, background .35s;
  font-family: var(--ff-body);
}
.inf-log-row.show { opacity: 1; transform: translateX(0); }
.inf-log-code {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0; font-family: monospace;
}
.inf-log-code.ok   { background: var(--inf-accent-bar-low-bg); color: var(--inf-accent-bar-low); }
.inf-log-code.warn { background: #FFF8EC; color: #92400E; }
.inf-log-code.crit { background: var(--inf-bg-chip-trans); color: var(--inf-text-chip-trans); }
[data-theme="dark"] .inf-log-code.ok   { background: rgba(74,222,128,.1);   color: #4ADE80; }
[data-theme="dark"] .inf-log-code.warn { background: rgba(252,211,77,.1);   color: #FDE68A; }
[data-theme="dark"] .inf-log-code.crit { background: rgba(248,113,113,.12); color: #FCA5A5; }
.inf-log-url {
  font-size: 9px; font-weight: 500; color: var(--inf-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Technical SEO — Core Web Vitals grid ────────────────────────── */
.inf-cwv-grid {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.inf-cwv-card {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 9px; padding: 8px 11px;
  display: grid; grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 4px; align-items: center;
  transition: background .35s, border-color .4s;
}
.inf-cwv-card.passing { border-color: rgba(22,101,52,.3); }
[data-theme="dark"] .inf-cwv-card.passing { border-color: rgba(74,222,128,.25); }
.inf-cwv-metric {
  font-family: monospace; font-size: 11px; font-weight: 700;
  color: var(--inf-text-primary); grid-row: 1;
}
.inf-cwv-full {
  font-family: var(--ff-body); font-size: 8.5px; color: var(--inf-text-muted);
  grid-column: 2; grid-row: 1;
}
.inf-cwv-before-after {
  grid-column: 3; grid-row: 1;
  display: flex; align-items: center; gap: 5px;
}
.inf-cwv-before-after svg { width: 10px; height: 10px; stroke: var(--inf-text-subtle); flex-shrink: 0; }
.inf-cwv-val {
  font-family: var(--ff-display); font-size: 12px; font-weight: 900;
  transition: opacity .5s ease;
}
.inf-cwv-val.ok   { color: var(--inf-accent-bar-low); }
.inf-cwv-val.crit { color: var(--inf-accent); }
.inf-cwv-val.warn { color: #D97706; }
[data-theme="dark"] .inf-cwv-val.warn { color: #FCD34D; }
[data-theme="dark"] .inf-cwv-val.crit { color: #F87171; }
.inf-cwv-bar-wrap {
  grid-column: 1 / -1; grid-row: 2;
}
.inf-cwv-bar-bg {
  height: 4px; background: var(--inf-dot-empty); border-radius: 2px; overflow: hidden;
}
.inf-cwv-bar-fill {
  height: 100%; border-radius: 2px; width: 0;
  transition: width .9s cubic-bezier(.4,0,.2,1), background .6s ease;
}
.inf-cwv-bar-fill.ok   { background: #166534; }
.inf-cwv-bar-fill.warn { background: #D97706; }
.inf-cwv-bar-fill.crit { background: var(--inf-accent); }
[data-theme="dark"] .inf-cwv-bar-fill.ok   { background: #4ADE80; }
[data-theme="dark"] .inf-cwv-bar-fill.warn { background: #FCD34D; }
[data-theme="dark"] .inf-cwv-bar-fill.crit { background: #F87171; }
.inf-cwv-badge {
  grid-column: 3; grid-row: 2; text-align: right;
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  transition: color .5s ease;
}
.inf-cwv-badge.ok   { color: var(--inf-accent-bar-low); }
.inf-cwv-badge.warn { color: #D97706; }
.inf-cwv-badge.crit { color: var(--inf-accent); }
[data-theme="dark"] .inf-cwv-badge.warn { color: #FCD34D; }
[data-theme="dark"] .inf-cwv-badge.crit { color: #F87171; }

.inf-cwv-banner {
  background: var(--inf-accent-bar-low-bg); border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease, background .35s, border-color .35s;
}
.inf-cwv-banner.show { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .inf-cwv-banner { border-color: rgba(74,222,128,.2); }
.inf-cwv-banner svg  { width: 12px; height: 12px; stroke: var(--inf-accent-bar-low); flex-shrink: 0; }
.inf-cwv-banner span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent-bar-low); }

/* ── Link Building — backlink profile summary ───────────────────── */
.inf-bl-summary {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 5px;
}
.inf-bl-stat {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 8px; padding: 7px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .35s, border-color .35s;
}
.inf-bl-stat-num {
  font-family: var(--ff-display); font-size: 15px; font-weight: 900; line-height: 1;
  color: var(--inf-text-primary);
}
.inf-bl-stat-num.green { color: var(--inf-accent-bar-low); }
.inf-bl-stat-num.warn  { color: var(--inf-accent); }
.inf-bl-stat-label {
  font-family: var(--ff-body); font-size: 7.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--inf-text-subtle); text-align: center;
}

/* ── Link Building — backlink profile rows ───────────────────────── */
.inf-bl-profile-rows { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.inf-bl-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px; align-items: center;
  padding: 5px 10px;
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 7px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .32s ease, transform .32s ease, background .35s;
}
.inf-bl-row.show { opacity: 1; transform: translateX(0); }
.inf-bl-domain {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  color: var(--inf-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inf-bl-dr {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 700;
  color: var(--inf-text-muted); white-space: nowrap;
}
.inf-bl-qual {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; flex-shrink: 0;
  transition: background .35s, color .35s;
}
.inf-bl-qual--good  { background: var(--inf-accent-bar-low-bg); color: var(--inf-accent-bar-low); }
.inf-bl-qual--toxic { background: var(--inf-bg-chip-trans);     color: var(--inf-text-chip-trans); }
[data-theme="dark"] .inf-bl-qual--good  { background: rgba(74,222,128,.1);   color: #4ADE80; }
[data-theme="dark"] .inf-bl-qual--toxic { background: rgba(248,113,113,.12); color: #FCA5A5; }

/* ── Link Building — disavow warning banner ──────────────────────── */
.inf-bl-disavow {
  background: var(--inf-bg-chip-trans); border: 1px solid rgba(212,59,42,.2);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .35s, border-color .35s;
}
[data-theme="dark"] .inf-bl-disavow { border-color: rgba(248,113,113,.2); background: rgba(248,113,113,.08); }
.inf-bl-disavow svg  { width: 12px; height: 12px; stroke: var(--inf-accent); flex-shrink: 0; }
.inf-bl-disavow span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent); }

/* ── Link Building — prospect rows ──────────────────────────────── */
.inf-prospect-row {
  display: grid; grid-template-columns: 2fr 38px 1fr;
  gap: 4px; align-items: center; padding: 6px 10px;
  border-radius: 7px; border: 1px solid var(--inf-border-row);
  background: var(--inf-bg-card);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .32s ease, transform .32s ease, background .35s;
}
.inf-prospect-row.show { opacity: 1; transform: translateX(0); }
.inf-prospect-dr {
  font-family: var(--ff-display); font-size: 12px; font-weight: 900;
  color: var(--inf-text-primary); text-align: center;
}
.inf-prospect-status {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; text-align: center;
  transition: background .35s, color .35s;
}
.inf-prospect-status--ok   { background: var(--inf-accent-bar-low-bg); color: var(--inf-accent-bar-low); }
.inf-prospect-status--warn { background: var(--inf-bg-chip-comm);      color: var(--inf-text-chip-comm); }
[data-theme="dark"] .inf-prospect-status--ok   { background: rgba(74,222,128,.1);  color: #4ADE80; }
[data-theme="dark"] .inf-prospect-status--warn { background: rgba(251,191,36,.1);  color: #FCD34D; }

.inf-prospect-banner {
  background: var(--inf-accent-bar-low-bg); border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .35s, border-color .35s;
}
[data-theme="dark"] .inf-prospect-banner { border-color: rgba(74,222,128,.2); }
.inf-prospect-banner svg  { width: 12px; height: 12px; stroke: var(--inf-accent-bar-low); flex-shrink: 0; }
.inf-prospect-banner span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent-bar-low); }

/* ── Link Building — earned link rows ───────────────────────────── */
.inf-link-row {
  display: grid; grid-template-columns: 2fr 32px 1fr;
  gap: 4px; align-items: center; padding: 6px 10px;
  border-radius: 7px; border: 1px solid var(--inf-border-row);
  background: var(--inf-bg-card);
  opacity: 0; transform: translateY(7px);
  transition: opacity .32s ease, transform .32s ease, background .35s;
}
.inf-link-row:nth-child(odd) { background: var(--inf-bg-row-even); }
.inf-link-row.show { opacity: 1; transform: translateY(0); }
.inf-link-domain {
  font-family: var(--ff-body); font-size: 9.5px; font-weight: 600;
  color: var(--inf-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inf-link-dr {
  font-family: var(--ff-display); font-size: 12px; font-weight: 900;
  color: var(--inf-accent-bar-low); text-align: center;
}
[data-theme="dark"] .inf-link-dr { color: var(--inf-accent-bar-low); }
.inf-link-anchor {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 500;
  color: var(--inf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic;
}

/* ── Link Building — links total banner ─────────────────────────── */
.inf-links-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  background: var(--inf-bg-step-active); border: 1px solid var(--inf-border-card);
  border-radius: 8px;
  transition: background .35s, border-color .35s;
}
.inf-links-total-label { font-family: var(--ff-body); font-size: 9px; font-weight: 600; color: var(--inf-text-step-active); }
.inf-links-total-num   { font-family: var(--ff-display); font-size: 13px; font-weight: 900; color: var(--inf-accent); }

/* ── Content Optimization — scan summary ────────────────────────── */
.inf-scan-summary {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 5px;
}
.inf-scan-stat {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-card);
  border-radius: 8px; padding: 7px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .35s, border-color .35s;
}
.inf-scan-num {
  font-family: var(--ff-display); font-size: 17px; font-weight: 900; line-height: 1;
  color: var(--inf-text-primary);
}
.inf-scan-num.accent { color: var(--inf-accent); }
.inf-scan-num.green  { color: var(--inf-accent-bar-low); }
.inf-scan-label {
  font-family: var(--ff-body); font-size: 7.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--inf-text-subtle); text-align: center;
}

/* ── Content Optimization — scan rows ───────────────────────────── */
.inf-scan-row {
  display: grid; grid-template-columns: 2fr 40px 54px;
  gap: 4px; align-items: center; padding: 5px 10px;
  border-radius: 7px; border: 1px solid var(--inf-border-row);
  background: var(--inf-bg-card);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .32s ease, transform .32s ease, background .35s;
}
.inf-scan-row.show { opacity: 1; transform: translateX(0); }
.inf-scan-page {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 600;
  color: var(--inf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inf-scan-pos {
  font-family: var(--ff-display); font-size: 13px; font-weight: 900;
  text-align: center;
}
.inf-scan-pos--ok   { color: var(--inf-accent-bar-low); }
.inf-scan-pos--warn { color: #D97706; }
.inf-scan-pos--crit { color: var(--inf-accent); }
[data-theme="dark"] .inf-scan-pos--warn { color: #FCD34D; }
[data-theme="dark"] .inf-scan-pos--crit { color: #F87171; }
.inf-scan-priority {
  font-family: var(--ff-body); font-size: 8px; font-weight: 700;
  padding: 2px 5px; border-radius: 20px; text-align: center;
  transition: background .35s, color .35s;
}
.inf-scan-priority--ok   { background: var(--inf-accent-bar-low-bg); color: var(--inf-accent-bar-low); }
.inf-scan-priority--warn { background: var(--inf-bg-chip-comm);      color: var(--inf-text-chip-comm); }
.inf-scan-priority--info { background: var(--inf-bg-chip-info);      color: var(--inf-text-chip-info); }
[data-theme="dark"] .inf-scan-priority--ok   { background: rgba(74,222,128,.1);  color: #4ADE80; }
[data-theme="dark"] .inf-scan-priority--warn { background: rgba(251,191,36,.1);  color: #FCD34D; }
[data-theme="dark"] .inf-scan-priority--info { background: rgba(147,197,253,.1); color: #93C5FD; }

/* ── Content Optimization — gap rows ────────────────────────────── */
.inf-gap-row {
  background: var(--inf-bg-card); border: 1px solid var(--inf-border-row);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 4px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .33s ease, transform .33s ease, background .35s;
}
.inf-gap-row.show { opacity: 1; transform: translateX(0); }
.inf-gap-row-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;
}
.inf-gap-page {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 600;
  color: var(--inf-text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; padding-right: 6px;
}
.inf-gap-text {
  font-family: var(--ff-body); font-size: 9px; font-weight: 500;
  color: var(--inf-text-primary); line-height: 1.4;
}

/* ── Content Optimization — ranking movement rows ────────────────── */
.inf-rank-move-row {
  display: grid; grid-template-columns: 2fr 44px 44px 44px;
  gap: 4px; align-items: center; padding: 6px 10px;
  border-radius: 7px; border: 1px solid var(--inf-border-row);
  background: var(--inf-bg-card);
  opacity: 0; transform: translateY(7px);
  transition: opacity .32s ease, transform .32s ease, background .35s;
  margin-bottom: 4px;
}
.inf-rank-move-row.show { opacity: 1; transform: translateY(0); }
.inf-rank-move-page {
  font-family: var(--ff-body); font-size: 8.5px; font-weight: 600;
  color: var(--inf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inf-rank-move-val {
  font-family: var(--ff-display); font-size: 13px; font-weight: 900;
  text-align: center;
}
.inf-rank-move-val.muted { color: var(--inf-text-subtle); text-decoration: line-through; }
.inf-rank-move-val.green { color: var(--inf-accent-bar-low); }
.inf-rank-move-delta {
  font-family: var(--ff-body); font-size: 9px; font-weight: 700;
  color: var(--inf-accent-bar-low); text-align: right;
}

/* ── Content Optimization — rank banner ─────────────────────────── */
.inf-rank-banner {
  background: var(--inf-accent-bar-low-bg); border: 1px solid rgba(22,101,52,.2);
  border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .35s, border-color .35s;
}
[data-theme="dark"] .inf-rank-banner { border-color: rgba(74,222,128,.2); }
.inf-rank-banner svg  { width: 12px; height: 12px; stroke: var(--inf-accent-bar-low); flex-shrink: 0; }
.inf-rank-banner span { font-family: var(--ff-body); font-size: 9.5px; font-weight: 600; color: var(--inf-accent-bar-low); }