/* ─────────────────────────────────────────────────────────────
   Capraseo — health page (health.html)
   Domain overview cockpit. Reuses .card / .btn / .badge / .tbl
   from main.css + account.css; this file only adds page-specific
   scaffolding, chart wrappers, and animations.
   ───────────────────────────────────────────────────────────── */

/* Reduced motion — drop hover transforms; keep color/opacity transitions */
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .vital,
  .range-pill button, .toggle-pill button {
    transition: none;
  }
  .kpi-card:hover, .vital:hover { transform: none; }
  .range-pill button:active, .toggle-pill button:active { transform: none; }
}

/* Stage-top: title + range pill + export */
.stage-top .stage-title-row { display: flex; align-items: baseline; gap: 12px; }
.stage-top .domain-tag {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.stage-top .domain-tag::before {
  content: "·";
  margin: 0 8px;
  color: var(--muted-2);
}
.stage-top-right { display: flex; align-items: center; gap: 12px; }

/* Range pill (7d / 30d / 90d / 12m) */
.range-pill {
  display: inline-flex;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10)),
    rgba(22,22,25,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.range-pill button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 500 11.5px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    background 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.range-pill button:hover { color: var(--text); }
.range-pill button:active { transform: scale(0.98); transition-duration: 80ms; }
.range-pill button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.range-pill button.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.30);
}

/* Scroll area — same skeleton as account page.
   flex-shrink: 0 on children is critical: without it, every section
   collapses to fit the container height instead of triggering the
   intended overflow-y scroll. */
.center.center-scroll {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 36px 48px;
  overflow-y: auto;
  gap: 22px;
}
.center.center-scroll > * { flex-shrink: 0; }

/* ── Hero cockpit ─────────────────────────────────────────── */
.health-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.health-hero::before {
  /* drifting grid */
  content: "";
  position: absolute;
  inset: -20px;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.55;
  animation: drift 60s linear infinite;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
}
.health-hero::after {
  /* center radial glow */
  content: "";
  position: absolute;
  left: 35%;
  top: 50%;
  width: 700px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(99, 102, 241,0.07), transparent 70%);
  pointer-events: none;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(32px, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .health-hero::before { animation: none; }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 28px;
  padding: 28px;
  align-items: center;
}

.hero-score {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-score .score-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero-score .score-chart {
  width: 284px;
  height: 284px;
  position: relative;
  display: grid;
  place-items: center;
  /* breathing glow behind the gauge — no ring overlay, so nothing
     can visually disagree with where ApexCharts draws the arc */
  filter: drop-shadow(0 0 14px rgba(99, 102, 241,0.18));
  animation: scorePulse 3.2s ease-in-out infinite;
}
@keyframes scorePulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(99, 102, 241,0.18)); }
  50%      { filter: drop-shadow(0 0 26px rgba(99, 102, 241,0.32)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-score .score-chart { animation: none; }
}
.hero-score .score-verdict {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.hero-score .score-verdict strong {
  color: var(--positive);
  font-weight: 600;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.vital {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 55%),
    var(--panel-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.16);
  transition:
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.vital:hover {
  /* secondary surfaces stay flat — the hero score is the only glowing
     element on the page. Hover lifts with border + elevation, no glow. */
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0 18px 40px -28px rgba(0,0,0,0.9);
}
.vital .vital-chart { flex-shrink: 0; width: 88px; height: 88px; }
.vital .vital-meta { min-width: 0; }
.vital .vital-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vital .vital-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vital .vital-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
  margin-left: 2px;
}
.vital .vital-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* (i) info button + tooltip — explains what each vital actually measures.
   Pure CSS tooltip on hover / keyboard focus; no JS needed. */
.vital-info {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  opacity: 0.5;
  transition: opacity 160ms, color 160ms, border-color 160ms, background 160ms;
}
.vital-info:hover,
.vital-info:focus-visible {
  color: #f3f3f5;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  opacity: 1;
  outline: none;
}
.vital-info::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 260px;
  padding: 9px 11px;
  background: rgba(20,20,24,0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  color: #d4d4d8;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms, transform 160ms;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vital-info:hover::after,
.vital-info:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
/* .kpi-card clips its edge-to-edge sparkline with overflow:hidden, which
   would also clip the (i) tooltip dropping below the button. Lift the
   clip only while the (i) is being interacted with. */
.kpi-card:has(.vital-info:hover),
.kpi-card:has(.vital-info:focus-visible) {
  overflow: visible;
}

/* ── Paid keyword opportunities ────────────────────────────── */
.paid-kw-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  padding: 0 18px 18px;
}
.paid-kw-grid .tbl td.col-tight,
.paid-kw-grid .tbl th.col-tight {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Backlink portfolio worth ──────────────────────────────── */
.worth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 8px 22px 22px;
}
.worth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 180px;
  padding: 16px 20px;
  background: var(--accent);
  color: #0b1f12;
  font: 600 14px/1 'Inter', sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.worth-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 8px 22px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.worth-cta:active { transform: translateY(0) scale(0.99); transition-duration: 80ms; }
.worth-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.worth-cta svg { flex-shrink: 0; }
.worth-stat {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
}
.worth-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.worth-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.worth-stat-value--accent { color: var(--accent); }
.worth-stat--loss { border-left-color: var(--danger); }
.worth-stat-value--loss { color: var(--danger); }
.worth-stat-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Full-width gained-vs-lost value trend, sits above the footnote */
.worth-trend {
  padding: 6px 22px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.worth-trend-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 2px;
}
.worth-trend-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.worth-trend-sub {
  font-size: 12px;
  color: var(--muted);
}
.worth-trend-chart { width: 100%; }
.worth-footnote {
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .worth-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .worth-cta { grid-column: 1 / -1; width: 100%; }
}
.kpi-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.kpi-eyebrow strong {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 2px;
}
@media (max-width: 900px) {
  .paid-kw-grid { grid-template-columns: 1fr; }
}

/* ── Empty / unavailable states for live panels ────────────── */
td.empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 18px 8px;
}
.chart-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 60px 8px;
}

/* Panels with no live data source (fetch failed, or the upstream
   DataForSEO call doesn't return what this panel needs) render at
   30% opacity so the user can immediately see what's real vs what
   isn't. `.panel-unavailable.is-mocked` is the same effect for
   panels that are intentionally mocked (e.g. Marketplace) — kept as
   a distinct class so a later code change can style them differently. */
.panel-unavailable,
.panel-unavailable.is-mocked {
  opacity: 0.3;
  filter: saturate(0.4);
  transition: opacity 200ms ease, filter 200ms ease;
}
.panel-unavailable .btn { pointer-events: none; }

/* ── Pay-to-access locked panels ──────────────────────────────
   A locked panel hasn't been bought for the in-focus domain, so it
   has no usable data. We blur+dim whatever placeholder is underneath
   and float a small card with the feature name and the unlock action.
   The overlay is injected from JS into the panel's section element. */
.panel-locked {
  position: relative;
}
/* Locked = greyed out. A light dim + desaturate over whatever sits
   underneath, with one quiet pill naming the section — no buttons, no
   prices; the single load decision lives in the sticky page gate. */
.panel-locked > .panel-locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: inherit;
  background: rgba(12, 12, 14, 0.45);
  backdrop-filter: blur(4px) saturate(0.25);
  -webkit-backdrop-filter: blur(4px) saturate(0.25);
}
.panel-locked-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(18, 18, 21, 0.88);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* Icon / action / button bases below are kept for the marketplace item
   page (its in-section unlock card layers .mi-locked overrides on top). */
.panel-locked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.panel-locked-action { margin-top: 2px; }

.panel-unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, opacity 120ms ease;
}
.panel-unlock-btn:hover { border-color: var(--line-strong, rgba(255,255,255,0.22)); }
.panel-unlock-btn[disabled] { opacity: 0.6; cursor: default; }

.panel-get-tokens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(230, 196, 122, 0.10);
  border: 1px solid rgba(230, 196, 122, 0.35);
  color: var(--gold, #e6c47a);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.panel-get-tokens:hover { background: rgba(230, 196, 122, 0.16); }

/* ── Page-level "load the report" gate ────────────────────
   Sticks to the top of the scroll area so the one load decision
   follows the user past the greyed-out sections. The background must
   stay opaque — it floats over content while stuck. */
.page-gate {
  position: sticky;
  top: 10px;
  z-index: 60;
  border: 1px solid rgba(230, 196, 122, 0.30);
  background:
    linear-gradient(180deg, rgba(230, 196, 122, 0.08), rgba(230, 196, 122, 0.04)),
    #131316;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.page-gate-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.page-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--gold);
  background: rgba(230, 196, 122, 0.10);
  border: 1px solid rgba(230, 196, 122, 0.28);
}
.page-gate-copy { flex: 1 1 auto; min-width: 0; }
.page-gate-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.page-gate-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.page-gate-balance { color: var(--muted); }
/* Live purchase progress — one chip per bundle group, lighting up green
   as the server commits each group's data (polled while the charge runs). */
.page-gate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.pg-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2, #777);
  animation: pg-chip-pulse 1.2s ease-in-out infinite;
}
.pg-chip.done {
  color: #9fdcf3;
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.08);
}
.pg-chip.done::before {
  background: var(--accent, #6366f1);
  animation: none;
}
@keyframes pg-chip-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.page-gate-balance-line {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}
.page-gate-shortfall {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold, #e6c47a);
}
/* In-progress variant: shown while a purchased async section is still
   being fetched upstream (and after a reload mid-fetch). */
.page-gate-pending {
  border-color: rgba(122, 196, 230, 0.30);
  background: linear-gradient(180deg, rgba(122, 196, 230, 0.08), rgba(122, 196, 230, 0.04));
}
/* Welcome auto-load variant: a brand-new account's first report is
   loading itself against the welcome grant ("on the house") — accent
   green and a spinner instead of the paywall gold + CTA. */
.page-gate-onhouse {
  border-color: rgba(99, 102, 241, 0.30);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.04));
}
.page-gate-onhouse .page-gate-spinner {
  border-color: rgba(99, 102, 241, 0.22);
  border-top-color: rgba(99, 102, 241, 0.85);
}
.page-gate-spinner {
  color: transparent;
  background: transparent;
  border: 3px solid rgba(122, 196, 230, 0.22);
  border-top-color: rgba(122, 196, 230, 0.85);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin: 6px;
  animation: page-gate-spin 0.9s linear infinite;
}
@keyframes page-gate-spin { to { transform: rotate(360deg); } }
.page-gate-action { flex: 0 0 auto; }
.page-gate-load {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #06141a;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 120ms ease, opacity 120ms ease;
}
.page-gate-load:hover { filter: brightness(1.06); }
.page-gate-load[disabled] { opacity: 0.6; cursor: default; }
.page-gate-get-tokens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(230, 196, 122, 0.12);
  border: 1px solid rgba(230, 196, 122, 0.38);
  color: var(--gold);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.page-gate-get-tokens:hover { background: rgba(230, 196, 122, 0.18); }
@media (max-width: 640px) {
  .page-gate-inner { flex-wrap: wrap; }
  .page-gate-action { width: 100%; }
  .page-gate-load, .page-gate-get-tokens { width: 100%; justify-content: center; }
}

/* ── KPI strip ────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kpi-card {
  position: relative;
  padding: 16px 16px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 55%),
    var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 12px 36px -16px rgba(0,0,0,0.55);
  overflow: hidden;
  transition:
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.kpi-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 18px 40px -22px rgba(0,0,0,0.7);
}
.kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.kpi-delta.up   { color: var(--positive); background: var(--positive-faint); border: 1px solid var(--positive-faint); }
.kpi-delta.down { color: #ffc4c4; background: rgba(255,122,122,0.08); border: 1px solid rgba(255,122,122,0.22); }
.kpi-delta.flat { color: var(--muted); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.kpi-spark {
  margin: 6px -16px 0;
  height: 48px;
}
.kpi-spark.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed rgba(255,255,255,0.06);
  margin: 10px 0 0;
  height: 38px;
}
.kpi-spark-empty-label {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted-2);
  letter-spacing: 0.06em;
}
.kpi-sub {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted-2);
  letter-spacing: 0.01em;
}
body[data-page="usage"] .kpi-card { padding: 16px; }

/* ── Section card (charts, tables) ───────────────────────── */
.section-card {
  /* inherits .card from account.css */
}
.section-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-card .card-head .head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Digg further" — pill link from a dashboard section to its full
   dedicated page. Accent-tinted, arrow nudges on hover. */
.dig-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.22);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 180ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dig-badge svg { transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1); }
.dig-badge:hover {
  background: rgba(99, 102, 241, 0.17);
  border-color: rgba(99, 102, 241, 0.42);
}
.dig-badge:hover svg { transform: translateX(2px); }
.dig-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "Ask AI" — sibling of .dig-badge but a filled accent pill, so the AI
   handoff reads as the primary action in the header. Hands the section's
   data to the chat with Project MCP on (see the ASK_AI_TOOLTIP warning). */
.ask-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition:
    filter 180ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ask-badge svg { opacity: 0.9; }
.ask-badge:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ask-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-badge[hidden] { display: none; }

/* Toggle pills (organic / paid / branded) — smaller cousin of range-pill */
.toggle-pill {
  display: inline-flex;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10)),
    rgba(22,22,25,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.toggle-pill button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 500 11px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    background 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.toggle-pill button:hover { color: var(--text); }
.toggle-pill button:active { transform: scale(0.98); transition-duration: 80ms; }
.toggle-pill button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-pill button.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.30);
}
.toggle-pill button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.toggle-pill button:disabled:hover { color: var(--muted); }

/* The (i) info button is absolutely positioned by default (sits at the
   top-right of a card). When dropped inline in a card-head action row,
   reset that so it flows next to the toggle pills. Bump the default
   opacity up so it's discoverable next to active toggle buttons rather
   than blending into the chrome. The tooltip drops down from the (i)
   as designed. */
.head-actions .vital-info {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Generic in-card chart wrapper — gives every chart the glow */
.chart-wrap {
  position: relative;
  padding: 14px 12px 8px;
}
.chart-wrap.tall { min-height: 280px; }

/* Two-column layout used by rankings, backlinks-profile */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
}
.split-grid > * + * { border-left: 1px solid var(--line); }

/* ── Index Health (the unique feature) ───────────────────── */
.index-health {
  /* Highlighted feature card: marked by an accent-tinted border, not a
     glow — the hero score remains the only glowing element. */
  border-color: var(--accent-faint);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 18px 40px -28px rgba(0,0,0,0.9);
}
.index-health .card-head h2 { color: #dcf2fb; }
.index-health .card-head h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(99, 102, 241,0.7);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .index-health .card-head h2::before { animation: none; opacity: 1; }
}

.ih-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
}
.ih-grid > * + * { border-left: 1px solid var(--line); }
.ih-counters {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  gap: 18px;
}
.ih-counter .ih-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ih-counter .ih-value {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #f3f3f5;
}
.ih-counter.alive    .ih-value { color: #cdeefb; }
.ih-counter.dropped  .ih-value { color: #ffd2d2; }
.ih-counter.recover  .ih-value { color: #f1d99a; }
.ih-counter .ih-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Backlink profile ────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.profile-grid > * + * { border-left: 1px solid var(--line); }

.dr-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dr-bar {
  position: relative;
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.dr-bar > span {
  position: absolute;
  inset: 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--accent), #7cc9ea);
  border-radius: 3px;
}
.dr-num {
  font-size: 11.5px;
  font-weight: 500;
  color: #d8d8de;
  min-width: 22px;
  text-align: right;
}

/* ── Reputation ──────────────────────────────────────────── */
.rep-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 0;
}
.rep-grid > * + * { border-left: 1px solid var(--line); }
.rep-grid > * { padding: 22px 24px; }

.rep-eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Overall rating column */
.rep-overall { display: flex; flex-direction: column; gap: 6px; }
.rep-stars { display: flex; align-items: center; }
.rep-stars .rep-star-row {
  display: inline-flex;
  gap: 3px;
  filter: drop-shadow(0 0 8px rgba(230,196,122,0.25));
}
.rep-stars .star {
  width: 22px;
  height: 22px;
  fill: var(--gold);
}
/* half-star uses a clip to fill only the left half */
.rep-stars .star.half {
  fill: url(#__halfStarMask) var(--gold);
  clip-path: inset(0 50% 0 0);
}
.rep-stars .rep-star-row > .star.half { position: relative; }
.rep-stars .rep-star-row > .star.half::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23393940'><path d='M12 2l2.39 5.84L20.5 8.6l-4.5 4 1.2 6.3L12 15.9 6.8 18.9 8 12.6l-4.5-4 6.11-.76L12 2z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  clip-path: inset(0 0 0 50%);
  pointer-events: none;
}
.rep-rating {
  font-size: 38px;
  font-weight: 500;
  color: #f3f3f5;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 4px;
}
.rep-rating::after { content: " / 5"; font-size: 16px; color: var(--muted-2); font-weight: 400; }
.rep-count {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #e8e8ea;
  font-variant-numeric: tabular-nums;
}
.rep-count-sub {
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
.rep-spark {
  margin-top: 14px;
  height: 44px;
}

/* Distribution bars */
.rep-distribution { display: flex; flex-direction: column; }
.rep-bar-row {
  display: grid;
  grid-template-columns: 14px 16px 1fr 38px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.rep-bar-row .rep-stars-label {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rep-bar-row .rb-icon {
  width: 12px;
  height: 12px;
  fill: var(--gold);
  opacity: 0.7;
}
.rep-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.rep-bar > span {
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--gold), #f1d99a);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(230,196,122,0.30);
}
.rep-bar-row[data-stars="2"] .rep-bar > span,
.rep-bar-row[data-stars="1"] .rep-bar > span {
  background: linear-gradient(90deg, var(--danger), #ff9b9b);
  box-shadow: 0 0 10px rgba(255,122,122,0.30);
}
.rep-bar-row[data-stars="3"] .rep-bar > span {
  background: linear-gradient(90deg, var(--muted), #b0b0b8);
  box-shadow: none;
}
.rep-pct {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Source breakdown */
.rep-sources { display: flex; flex-direction: column; gap: 8px; }
.rep-source {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(22,22,25,0.45);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.rep-source:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(28,28,32,0.55);
  transform: translateY(-1px);
}
.rep-source .rs-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #f3f3f5;
  flex-shrink: 0;
}
.rep-source .rs-logo.google    { background: linear-gradient(135deg, #4285F4, #34A853); }
.rep-source .rs-logo.trustpilot { background: linear-gradient(135deg, #00B67A, #007a52); }
.rep-source .rs-logo.yelp      { background: linear-gradient(135deg, #FF1A1A, #C41200); }
.rep-source .rs-name {
  font-size: 13px;
  font-weight: 500;
  color: #e8e8ea;
  letter-spacing: -0.005em;
}
.rep-source .rs-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.rep-source .rs-meta .rs-rating {
  color: var(--gold);
  font-weight: 500;
}
.rep-source .rs-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Technical health ────────────────────────────────────── */
.tech-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 0;
}
.tech-grid > * + * { border-left: 1px solid var(--line); }
.tech-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  gap: 8px;
}
.tech-score .tech-chart { width: 180px; height: 180px; }
.tech-score .tech-sub {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.issue-list { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ── "What's healthy" strip — the site-level checks that passed ── */
.tech-passing {
  padding: 12px 14px;
  background: var(--positive-faint);
  border: 1px solid var(--positive-faint);
  border-radius: 10px;
}
.tech-passing-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--positive);
  margin-bottom: 9px;
}
.tech-passing-head svg { flex: none; }
.tech-passing-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pass-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 12px; color: #cfeaf6;
  background: rgba(70,200,245,0.10);
  border: 1px solid rgba(70,200,245,0.22);
  cursor: default;
}
.pass-chip svg { flex: none; color: var(--positive); }

.issue-clean {
  padding: 22px 14px; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* ── Expandable issue rows ── */
.issue {
  background: rgba(22,22,25,0.45);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease;
  overflow: hidden;
  min-width: 0;
}
.issue:hover { border-color: rgba(255,255,255,0.12); background: rgba(28,28,32,0.55); }
.issue.open  { border-color: rgba(255,255,255,0.14); background: rgba(28,28,32,0.6); }
.issue-head {
  display: grid;
  grid-template-columns: 22px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: none; border: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.issue .sev {
  width: 8px; height: 8px; border-radius: 50%;
  margin-left: 6px; box-shadow: 0 0 10px currentColor;
}
.issue.error    .sev { color: var(--danger); background: var(--danger); }
.issue.warning  .sev { color: var(--gold);   background: var(--gold); }
.issue.notice   .sev { color: var(--muted);  background: var(--muted); }
.issue .issue-main { min-width: 0; }
.issue .issue-title { font-size: 13px; color: #e8e8ea; font-weight: 500; }
.issue .issue-meta  { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; text-transform: capitalize; }
.issue .issue-count {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
  font-size: 14px; font-weight: 600; color: #e8e8ea;
  font-variant-numeric: tabular-nums;
}
.issue .issue-count-u { font-size: 10px; font-weight: 500; color: var(--muted); text-transform: none; }
.issue-caret { display: inline-flex; color: var(--muted); transition: transform 0.18s ease; }
.issue.open .issue-caret { transform: rotate(180deg); }

.issue-detail {
  padding: 4px 14px 14px 40px;
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
}
.idl-row { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: baseline; }
.idl-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted-2); padding-top: 1px;
}
.idl-v { font-size: 12.5px; color: #d3d3d7; line-height: 1.5; }
.issue-ask {
  align-self: flex-start; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--positive);
  background: rgba(70,200,245,0.10);
  border: 1px solid rgba(70,200,245,0.28);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.issue-ask:hover { background: rgba(70,200,245,0.18); border-color: rgba(70,200,245,0.45); }
.issue-ask svg { flex: none; }

/* ── Drill-down: the actual offending URLs for an issue ── */
.issue-examples { margin-top: 2px; }
.issue-examples-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--muted);
  transition: color 0.15s ease;
}
.issue-examples-toggle:hover { color: #d3d3d7; }
.issue-examples-toggle .issue-caret { color: var(--muted); }
.issue-examples-toggle.open .issue-caret { transform: rotate(180deg); }
.issue-examples-list {
  margin-top: 6px; min-width: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(0,0,0,0.22); overflow: hidden;
}
.ex-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; min-width: 0;
  font-size: 12px; line-height: 1.3;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.ex-row:first-child { border-top: 0; }
.ex-url {
  flex: 0 1 auto; min-width: 0;
  color: #8fd3ee; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-url:hover { text-decoration: underline; }
.ex-arrow { color: var(--muted); flex: none; }
.ex-status {
  flex: none; margin-left: auto;
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 5px;
  color: var(--danger); background: rgba(224,75,74,0.12);
}
.ex-note {
  flex: none; color: var(--muted-2); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch;
}
.ex-more { padding: 7px 11px; font-size: 11.5px; color: var(--muted); border-top: 1px solid rgba(255,255,255,0.04); }
@media (max-width: 560px) {
  .idl-row { grid-template-columns: 1fr; gap: 2px; }
  .issue-detail { padding-left: 14px; }
}

/* ── Technical: on-demand intro / "Run audit" CTA ──────────── */
/* .tech-grid sets display:grid, which would beat the UA [hidden] rule, so
   the two faces need explicit hide rules. */
.tech-grid[hidden], .tech-intro[hidden] { display: none; }
.tech-intro { padding: 30px 22px 34px; }
.tech-intro-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tech-intro-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.28);
  margin-bottom: 14px;
}
.tech-intro-title {
  font-size: 17px;
  font-weight: 600;
  color: #e8e8ea;
  letter-spacing: -0.01em;
}
.tech-intro-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.tech-intro-points {
  margin: 16px 0 4px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 430px;
}
.tech-intro-points li {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  color: #cfcfd4;
}
.tech-intro-points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tech-intro-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #04210f;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.16s ease;
}
.tech-intro-btn:hover { filter: brightness(1.06); }
.tech-intro-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted-2);
}
.tech-intro-note.is-error { color: var(--gold); }
.tech-intro-inner.is-running { padding: 12px 0; }
.tech-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: techSpin 0.8s linear infinite;
  margin-bottom: 14px;
}
@keyframes techSpin { to { transform: rotate(360deg); } }

/* ── Competitors ─────────────────────────────────────────── */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.comp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(180deg, rgba(28,28,32,0.55), rgba(18,18,21,0.55));
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.comp-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.8);
}
.comp-card .comp-chart { width: 90px; height: 90px; }
.comp-card .comp-domain {
  font-size: 13px;
  font-weight: 500;
  color: #e8e8ea;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.comp-source-pill.user {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.12);
  color: #5fcdf0;
}
.comp-card .comp-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comp-card .comp-stats span strong {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #d8d8de;
  text-transform: none;
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}

/* ── Movers/losers mini-table ────────────────────────────── */
/* ── Position bar — band colours: green = winning,
   gold = striking distance, grey = far back. */
.s-top3   { background: var(--accent); }
.s-4-10   { background: #7cc9ea; }
.s-11-20  { background: var(--gold); }
.s-21-50  { background: var(--muted); }
.s-51-100 { background: var(--muted-2); }

.kw-distrib { padding: 16px 20px; display: flex; flex-direction: column; }
.kw-distrib-head {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.kw-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.kw-seg { display: block; min-width: 2px; }
.kw-seg + .kw-seg { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35); }
.kw-bands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.kw-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.kw-band.is-zero { opacity: 0.4; }
.kw-b-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.kw-b-n {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kw-b-l { font-size: 11.5px; color: var(--muted); }
.kw-distrib-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.kw-distrib-foot strong { color: var(--text); font-weight: 600; }

/* ── Your biggest keywords — concrete, always meaningful from
   one snapshot. Rank pill colour mirrors the position bands. */
.kw-top { padding: 16px 20px; }
.kw-top-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.kw-top-head strong { font-size: 14px; color: var(--text); font-weight: 600; }
.kw-top-head span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.kw-top-list { list-style: none; margin: 0; padding: 0; }
.kw-top-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.kw-top-list li:last-child { border-bottom: 0; }
.kt-kw {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt-pos {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
}
.kt-pos.g { color: var(--accent); background: rgba(99, 102, 241, 0.12); }
.kt-pos.o { color: var(--gold);   background: rgba(230, 196, 122, 0.14); }
.kt-pos.m { color: var(--muted);  background: rgba(255, 255, 255, 0.05); }
.kt-vol {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kt-vol em { font-style: normal; color: var(--muted-2); font-size: 11px; }

/* ── Striking distance — keywords at 11–20, one push from page 1.
   Gold = opportunity (not won yet, not a problem). */
.striking { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.striking-head { display: flex; align-items: center; gap: 18px; }
.striking-n {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.striking-cap { display: flex; flex-direction: column; gap: 4px; }
.striking-cap strong { font-size: 14px; color: var(--text); font-weight: 600; }
.striking-cap span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.striking-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 28px;
}
.striking-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.striking-list .sk-kw {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.striking-list .sk-pos {
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.striking-list .sk-vol {
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.striking-empty,
.striking-loading {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  padding: 2px;
}

.movers {
  padding: 6px 6px 10px;
  display: flex;
  flex-direction: column;
}
.mover {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.mover:last-child { border-bottom: 0; }
.mover .mv-kw {
  font-size: 13px;
  color: #e8e8ea;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mover .mv-kw .mv-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted-2);
}
.mover .mv-pos {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.mover .mv-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  justify-content: flex-end;
}
.mover .mv-delta.up   { color: var(--positive); }
.mover .mv-delta.down { color: #ffc4c4; }

/* ── Section reveal — always visible, JS adds .in for the
   subtle rise animation. The fallback (no JS) shows everything. */
.reveal { opacity: 1; transform: none; }
.reveal.will-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.will-rise.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal.will-rise { opacity: 1; transform: none; transition: none; }
}

/* ── ApexCharts global tweaks (force glass tooltip) ──────── */
.apexcharts-tooltip.apexcharts-theme-dark {
  background: linear-gradient(180deg, rgba(28,28,32,0.95), rgba(18,18,21,0.95)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: rgba(28,28,32,0.95) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
}
.apexcharts-legend-text { color: var(--muted) !important; font-family: 'Inter', sans-serif !important; }
.apexcharts-text { font-family: 'Inter', sans-serif !important; }

/* ── Last-updated indicator + Fetch-fresh badge ───────────── */
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}
.last-updated .lu-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241,0.18);
}
.last-updated.is-stale .lu-dot { background: #e6c47a; box-shadow: 0 0 0 3px rgba(230,196,122,0.18); }
.last-updated.is-loading .lu-dot { background: #8a8a92; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); animation: lu-pulse 1.1s ease-in-out infinite; }
@keyframes lu-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes lu-spin { to { transform: rotate(360deg); } }

.btn-fetch-fresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #b8e6f5;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(99, 102, 241,0.10);
  border: 1px solid rgba(99, 102, 241,0.30);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, opacity 120ms;
}
.btn-fetch-fresh:hover { background: rgba(99, 102, 241,0.16); border-color: rgba(99, 102, 241,0.45); }
.btn-fetch-fresh:disabled { opacity: 0.55; cursor: progress; }
.btn-fetch-fresh.is-loading svg { animation: lu-spin 0.9s linear infinite; }
/* Gated (locked / out of tokens) — distinct from the loading :disabled state. */
.btn-fetch-fresh.is-gated,
.btn-fetch-fresh.is-gated:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(99, 102, 241,0.06);
  border-color: rgba(99, 102, 241,0.20);
}
.last-updated.is-empty .lu-dot { background: #8a8a92; box-shadow: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stack the score gauge above the vitals here, not at 900px. The two-up
     layout needs ~807px of card width (280px gauge + ~443px min-content
     vitals + gap/padding); with the sidebar taking ~260px the content
     column drops below that around a 1155px viewport — so between 900 and
     ~1155px the vitals grid overflowed and .health-hero's overflow:hidden
     clipped the right half of the tiles. */
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .split-grid, .ih-grid, .profile-grid, .tech-grid, .rep-grid { grid-template-columns: 1fr; }
  .split-grid > * + *, .ih-grid > * + *, .profile-grid > * + *, .tech-grid > * + *, .rep-grid > * + * {
    border-left: 0; border-top: 1px solid var(--line);
  }
}
@media (max-width: 720px) {
  .center.center-scroll { padding: 0 16px 28px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitals-grid { grid-template-columns: 1fr; }
  /* Keep the left gap so the page title clears the floating hamburger
     (defined in main.css for ≤768px). */
  .stage-top { padding: 14px 16px; padding-left: 60px; flex-wrap: wrap; gap: 12px; }
}
/* Phone: drop every multi-up grid to a single column and shrink the fixed
   gauges so they fit a ~345px usable width without overflowing. */
@media (max-width: 600px) {
  .kpi-grid,
  .comp-grid,
  .worth-grid { grid-template-columns: 1fr; }
  .hero-score .score-chart { width: 200px; height: 200px; }
  .tech-score .tech-chart { width: 150px; height: 150px; }
  /* Charts should fill, never force horizontal overflow. */
  .chart-wrap { max-width: 100%; }
}