/* ============================================================================
   mvr.css - the .mvr-* result-panel component system (design system).
   Consolidated verbatim from dashboard.html's inline <style id="mv-qpr-css">
   (Quick Preview head/KPIs/keyword/insight/note/CTA/recent/skeleton + trend
   chart) and <style id="mv-calm-results"> (premium-depth frame layer that calms
   legacy renderer frames). Linked in place so cascade order is unchanged. This is
   the "change once" home for result-panel styling. Consumes tokens.css.
   ============================================================================ */

/* ===== Quick Preview + chart (mv-qpr-css) ===== */
/* MetricVault — modern result panel (Quick Preview; reusable across tools) */
.mvr{--mvr-surface:rgba(255,255,255,0.024);--mvr-line:rgba(255,255,255,0.09);font-family:'Inter','Inter Tight',system-ui,sans-serif;color:var(--text);margin-top:14px;}
[data-theme="light"] .mvr{--mvr-surface:#faf9ff;--mvr-line:rgba(26,20,48,0.10);}
.mvr *{box-sizing:border-box;}
.mvr-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:16px;}
.mvr-fav{width:40px;height:40px;border-radius:9px;background:#fff;border:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mvr-fav img{width:24px;height:24px;border-radius:4px;}
.mvr-id{flex:1;min-width:0;}
.mvr-domain{font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-0.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mvr-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.mvr-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0;}
.mvr-verified{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-weight:600;}
.mvr-verified svg{width:13px;height:13px;}
.mvr-ghost{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--text-2);border:1px solid var(--border-strong);padding:8px 13px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.mvr-ghost:hover{background:rgba(124,92,252,0.07);border-color:var(--purple);color:var(--text);}
.mvr-ghost svg{width:14px;height:14px;}
.mvr-ghost.is-pinned{color:var(--green);border-color:rgba(20,184,127,0.4);background:rgba(20,184,127,0.09);cursor:default;}
.mvr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.mvr-kpi{padding:15px 15px 14px;background:var(--mvr-surface);border:1px solid var(--mvr-line);border-radius:12px;}
.mvr-kpi-top{display:flex;align-items:center;gap:7px;color:var(--muted);}
.mvr-kpi-top svg{width:15px;height:15px;flex-shrink:0;}
.mvr-kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}
.mvr-kpi-val{font-family:'Inter Tight',Inter,sans-serif;font-size:27px;font-weight:800;letter-spacing:-0.02em;line-height:1.05;margin-top:9px;color:var(--text);font-variant-numeric:tabular-nums;}
.mvr-kpi-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.mvr-kw{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--mvr-surface);border:1px solid var(--mvr-line);border-radius:12px;margin-bottom:10px;}
.mvr-kw-rank{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 9px;border-radius:9px;font-family:'Inter Tight',sans-serif;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;}
.mvr-kw-body{flex:1;min-width:0;}
.mvr-kw-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--muted);}
.mvr-kw-term{font-size:14.5px;font-weight:600;color:var(--text);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mvr-kw-vol{text-align:right;flex-shrink:0;}
.mvr-kw-vol b{font-family:'Inter Tight',sans-serif;font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.mvr-kw-vol span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:0.4px;color:var(--muted);margin-top:2px;}
.mvr-insight{display:flex;gap:9px;padding:12px 15px;background:var(--mvr-surface);border:1px solid var(--mvr-line);border-radius:10px;font-size:13px;line-height:1.5;color:var(--text-2);margin-bottom:10px;}
.mvr-insight svg{width:16px;height:16px;flex-shrink:0;stroke:var(--purple);margin-top:1px;}
.mvr-insight b{color:var(--text);font-weight:700;}
.mvr-note{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.4;color:var(--muted);margin-bottom:14px;}
.mvr-note svg{width:14px;height:14px;stroke:var(--green);flex-shrink:0;}
.mvr-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--purple);color:#fff;border:0;padding:13px 20px;border-radius:11px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s;}
.mvr-cta:hover{background:#6b4ef0;box-shadow:0 4px 16px rgba(124,92,252,0.3);}
.mvr-cta:disabled{opacity:.7;cursor:default;box-shadow:none;}
.mvr-cta svg{width:17px;height:17px;}
.mvr-recent{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--mvr-line);font-size:12px;color:var(--muted);}
.mvr-chip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-strong);color:var(--text-2);padding:4px 10px;border-radius:999px;font:inherit;font-size:12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.mvr-chip:hover{border-color:var(--purple);background:rgba(124,92,252,0.06);color:var(--text);}
.mvr-chip img{width:13px;height:13px;border-radius:3px;}
.mvr-empty{display:flex;align-items:flex-start;gap:10px;padding:16px;background:var(--mvr-surface);border:1px solid var(--mvr-line);border-radius:12px;font-size:13px;line-height:1.5;color:var(--text-2);}
.mvr-empty svg{width:18px;height:18px;stroke:var(--gold);flex-shrink:0;margin-top:1px;}
.mvr-empty.is-error{border-color:rgba(245,101,101,0.35);}
.mvr-empty.is-error svg{stroke:var(--red);}
.mvr-skel-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:14px;}
.mvr-spin{width:14px;height:14px;border:2px solid var(--mvr-line);border-top-color:var(--purple);border-radius:50%;animation:mvrSpin .8s linear infinite;flex-shrink:0;}
.mvr-skel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.mvr-skel-tile{height:80px;border-radius:12px;background:var(--mvr-surface);border:1px solid var(--mvr-line);animation:mvrPulse 1.5s ease-in-out infinite;}
.mvr-skel-tile:nth-child(2){animation-delay:.18s;}
.mvr-skel-tile:nth-child(3){animation-delay:.36s;}
.mvr-skel-bar{height:64px;border-radius:12px;background:var(--mvr-surface);border:1px solid var(--mvr-line);animation:mvrPulse 1.5s ease-in-out infinite;animation-delay:.5s;}
@keyframes mvrSpin{to{transform:rotate(360deg);}}
@keyframes mvrPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
/* trend graph — reusable calm sparkline (.mvr-chart*) */
.mvr-chart{margin-top:12px;padding:13px 15px 11px;background:var(--mvr-surface);border:1px solid var(--mvr-line);border-radius:12px;}
.mvr-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;}
.mvr-chart-t{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}
.mvr-chart-t svg{width:14px;height:14px;flex-shrink:0;}
.mvr-chart-nowwrap{white-space:nowrap;}
.mvr-chart-now{font-family:'Inter Tight',Inter,sans-serif;font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.mvr-chart-delta{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:3px;}
.mvr-chart-delta.up{color:var(--green);}
.mvr-chart-delta.down{color:var(--red);}
.mvr-chart-delta.flat{color:var(--muted);}
.mvr-chart-plot{position:relative;width:100%;height:66px;overflow:visible;}
.mvr-chart-plot svg{display:block;width:100%;height:66px;overflow:visible;}
.mvr-chart-area{fill:var(--purple);opacity:0.12;stroke:none;}
.mvr-chart-line{fill:none;stroke:var(--purple);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.mvr-chart-dot2{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--purple);border:2px solid var(--panel);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--mvr-line);}
.mvr-chart-x{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.mvr-chart-empty{font-size:12.5px;color:var(--muted);line-height:1.5;}

/* ===== Premium-depth frame layer (mv-calm-results) ===== */
/* ============================================================
   Result frames — de-neon (batch 1) + PREMIUM DEPTH (v2).
   Calm color, but not flat: layered soft shadows, an inset top
   highlight, and a whisper hero gradient give dimensional,
   premium depth WITHOUT bringing back neon glow/gradient-text.
   Applies to every section's result frame at once. Interiors
   (inline neon + emoji) are migrated renderer-by-renderer next.
   Injected after all legacy CSS so it wins ties in the cascade.
   ============================================================ */
/* Result cards: lifted "glass" depth. Only box-shadow is set, so the
   card background and any semantic left-accent border are preserved. */
.section-view .glass-card{
  box-shadow: 0 1px 2px rgba(26,20,48,0.06), 0 14px 30px -18px rgba(26,20,48,0.20), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
.mvx[data-theme="dark"] .section-view .glass-card{
  box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 16px 34px -18px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
/* Featured (glow) cards: more presence via depth + a whisper brand hairline —
   a soft elevated card, not a neon glow ring. */
.mvx .glow-card{
  border-color: rgba(124,92,252,0.18) !important;
  box-shadow: 0 2px 4px rgba(26,20,48,0.07), 0 20px 44px -20px rgba(26,20,48,0.24), inset 0 1px 0 rgba(255,255,255,0.70) !important;
}
.mvx[data-theme="dark"] .glow-card{
  border-color: rgba(124,92,252,0.20) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45), 0 22px 48px -20px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Gradient-clip titles -> solid, legible text (no purple->magenta wash) */
.mvx .gradient-text{
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--text) !important;
}
/* Structured hero: premium calm banner — faint corner gradient + layered depth +
   inset highlight. id-scoped Manager heroes keep their own look (higher specificity). */
.mvx .mv-structured-hero{
  background: linear-gradient(135deg, rgba(124,92,252,0.05), rgba(124,92,252,0.00)), #ffffff !important;
  border: 1px solid rgba(26,20,48,0.10) !important;
  box-shadow: 0 1px 2px rgba(26,20,48,0.06), 0 14px 30px -20px rgba(26,20,48,0.22), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}
.mvx[data-theme="dark"] .mv-structured-hero{
  background: linear-gradient(135deg, rgba(124,92,252,0.07), rgba(255,255,255,0.012)), #13111F !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 16px 36px -20px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ============================================================================
   PREMIUM RESULT PRIMITIVES v1 (shared across every section via mv-results/mvx)
   Design rules that MUST hold here:
   - NO left-accent borders anywhere (reads as generic AI). State rides on a
     semantic icon-chip + a .mvr-tier badge, never a border-left stripe.
   - Semantic color only (green=good, red=bad, gold=warn, cyan=info, purple=
     brand/action). No rainbow metric numbers — values are var(--text).
   - Token-driven + theme-aware (consumes tokens.css). Tints use rgba literals
     of the token hex so they read on both grounds (same approach as .mvr-*).
   - Icons are inline SVG (mvIcon), never emoji.
   These are additive: existing .mvr-* is untouched, so parallel sessions and
   every page inherit these automatically.
   ============================================================================ */

/* entrance + fill motion — pure CSS, auto-plays when markup is injected */
@keyframes mvrIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes mvrGrowX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.mvr-anim{animation:mvrIn .5s cubic-bezier(.22,1,.36,1) both;}
.mvr-stagger>*{animation:mvrIn .5s cubic-bezier(.22,1,.36,1) both;}
.mvr-stagger>*:nth-child(2){animation-delay:.06s;}
.mvr-stagger>*:nth-child(3){animation-delay:.12s;}
.mvr-stagger>*:nth-child(4){animation-delay:.18s;}
.mvr-stagger>*:nth-child(5){animation-delay:.24s;}
.mvr-stagger>*:nth-child(6){animation-delay:.30s;}
.mvr-stagger>*:nth-child(n+7){animation-delay:.34s;}

/* calm section header — replaces repeated glass-card + serif h3 frames */
.mvr-section{display:flex;align-items:center;gap:10px;margin:20px 0 11px;}
.mvr-section svg{width:16px;height:16px;flex-shrink:0;stroke:var(--purple);}
.mvr-section-t{font-family:'Inter Tight',Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-2);}
.mvr-section-sub{font-size:12.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums;}

/* 4-up KPI grid modifier (base .mvr-kpis is 3-col) */
.mvr-kpis--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:560px){.mvr-kpis--4{grid-template-columns:repeat(2,1fr);}}

/* delta chip — semantic up/down/flat */
.mvr-delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;padding:2px 7px 2px 5px;border-radius:999px;font-variant-numeric:tabular-nums;}
.mvr-delta svg{width:12px;height:12px;}
.mvr-delta.up{color:var(--green);background:rgba(20,184,127,0.13);}
.mvr-delta.down{color:var(--red);background:rgba(245,101,101,0.13);}
.mvr-delta.flat{color:var(--muted);background:rgba(135,123,168,0.14);}

/* tier / status badge — replaces bespoke inline pills (NO left border) */
.mvr-tier{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em;line-height:1;white-space:nowrap;}
.mvr-tier svg{width:12px;height:12px;}
.mvr-tier.good{color:var(--green);background:rgba(20,184,127,0.14);}
.mvr-tier.warn{color:var(--gold);background:rgba(230,179,71,0.16);}
.mvr-tier.bad{color:var(--red);background:rgba(245,101,101,0.14);}
.mvr-tier.info{color:var(--cyan);background:rgba(6,214,245,0.14);}
.mvr-tier.brand{color:var(--purple);background:rgba(124,92,252,0.14);}
.mvr-tier.neutral{color:var(--text-3);background:rgba(135,123,168,0.15);}

/* meter — single labeled bar (replaces inline gradient meters + chart distributions) */
.mvr-meter{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:12px;padding:9px 0;}
.mvr-meter+.mvr-meter{border-top:1px solid var(--mvr-line);}
.mvr-meter-label{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mvr-meter-track{height:8px;border-radius:999px;background:var(--mvr-line);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,0.10);}
.mvr-meter-fill{display:block;height:100%;border-radius:999px;background:var(--purple);transform-origin:left;animation:mvrGrowX .9s cubic-bezier(.22,1,.36,1) both;}
.mvr-meter-fill.good{background:var(--green);}
.mvr-meter-fill.warn{background:var(--gold);}
.mvr-meter-fill.bad{background:var(--red);}
.mvr-meter-val{font-family:'Inter Tight',Inter,sans-serif;font-size:13.5px;font-weight:800;min-width:44px;text-align:right;color:var(--text);font-variant-numeric:tabular-nums;}

/* stacked share bar + legend — replaces doughnut / pie charts */
.mvr-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--mvr-surface);}
.mvr-bar-seg{height:100%;transform-origin:left;animation:mvrGrowX .9s cubic-bezier(.22,1,.36,1) both;}
.mvr-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:13px;}
.mvr-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);}
.mvr-legend-item .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.mvr-legend-item b{font-family:'Inter Tight',Inter,sans-serif;color:var(--text);font-weight:800;margin-left:2px;font-variant-numeric:tabular-nums;}

/* status / severity row — icon chip + tier badge carry the state (NO left border) */
.mvr-status{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--mvr-surface);border:1px solid var(--mvr-line);border-radius:12px;}
.mvr-status-icn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mvr-status-icn svg{width:16px;height:16px;}
.mvr-status.pass .mvr-status-icn{color:var(--green);background:rgba(20,184,127,0.14);}
.mvr-status.warn .mvr-status-icn{color:var(--gold);background:rgba(230,179,71,0.16);}
.mvr-status.fail .mvr-status-icn{color:var(--red);background:rgba(245,101,101,0.14);}
.mvr-status-body{flex:1;min-width:0;}
.mvr-status-t{font-size:13.5px;font-weight:600;color:var(--text);}
.mvr-status-s{font-size:12px;color:var(--muted);margin-top:1px;}

/* prioritized action row — rank chip + text (NO left border) */
.mvr-action{display:flex;gap:11px;padding:9px 0;font-size:13.5px;line-height:1.5;align-items:flex-start;}
.mvr-action+.mvr-action{border-top:1px solid var(--mvr-line);}
.mvr-action-ix{width:22px;height:22px;border-radius:50%;background:rgba(124,92,252,0.13);color:var(--purple);font-family:'Inter Tight',Inter,sans-serif;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums;}
.mvr-action-t{color:var(--text-2);}
.mvr-action-from{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:2px;}

@media (prefers-reduced-motion: reduce){
  .mvr-anim,.mvr-stagger>*,.mvr-meter-fill,.mvr-bar-seg{animation:none !important;}
}

/* ============================================================================
   PREMIUM TABLE + card polish v2 (change-once: EVERY data table gets a clean,
   consistent, token-driven look). Overrides legacy .kw-table/.data-table since
   mvr.css loads after legacy-mvx.css. Rounded surface, quiet uppercase header,
   hairline row rules, calm hover, tabular figures, first-column emphasis.
   ============================================================================ */
.mvx .kw-table, .mvx .data-table, .mvx .mvr-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--mvr-surface, rgba(255,255,255,0.024)); border:1px solid var(--mvr-line, rgba(255,255,255,0.09));
  border-radius:12px; overflow:hidden; margin-top:12px;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.mvx .kw-table thead th, .mvx .data-table thead th, .mvx .mvr-table thead th{
  text-align:left; padding:11px 14px; position:sticky; top:0;
  font-family:'Inter Tight',Inter,sans-serif; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:0.6px; color:var(--muted);
  background:rgba(124,92,252,0.05); border-bottom:1px solid var(--mvr-line, rgba(255,255,255,0.09));
}
.mvx .kw-table tbody td, .mvx .data-table tbody td, .mvx .mvr-table tbody td{
  padding:11px 14px; color:var(--text-2); border-bottom:1px solid var(--mvr-line, rgba(255,255,255,0.06));
  font-variant-numeric:tabular-nums; vertical-align:middle;
}
.mvx .kw-table tbody tr:last-child td, .mvx .data-table tbody tr:last-child td, .mvx .mvr-table tbody tr:last-child td{ border-bottom:0; }
.mvx .kw-table tbody tr:hover td, .mvx .data-table tbody tr:hover td, .mvx .mvr-table tbody tr:hover td{ background:rgba(124,92,252,0.055); }
.mvx .kw-table tbody td:first-child, .mvx .data-table tbody td:first-child, .mvx .mvr-table tbody td:first-child{ color:var(--text); font-weight:600; }
/* right-align a numeric column when the renderer opts in */
.mvx .kw-table td.num, .mvx .kw-table th.num, .mvx .mvr-table td.num, .mvx .mvr-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* card / row polish — subtle interactive lift (no layout shift risk) */
.mvr-kw{transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;}
.mvr-kw:hover{border-color:var(--border-strong); transform:translateY(-1px); box-shadow:0 6px 18px -10px rgba(0,0,0,0.45);}
[data-theme="light"] .mvr-kw:hover{box-shadow:0 6px 18px -10px rgba(26,20,48,0.22);}
.mvr-kpi{transition:border-color .15s ease;}
.mvr-kpi:hover{border-color:var(--border-strong);}
/* calm the legacy rainbow intent pills to token tints (categorical, not neon) */
.mvx .intent-Informational{ background:rgba(6,214,245,0.14) !important; color:var(--cyan) !important; }
.mvx .intent-Commercial{ background:rgba(124,92,252,0.14) !important; color:var(--purple) !important; }
.mvx .intent-Transactional{ background:rgba(20,184,127,0.14) !important; color:var(--green) !important; }
.mvx .intent-Navigational{ background:rgba(230,179,71,0.16) !important; color:var(--gold) !important; }

/* Remove the per-tool floating action-pill FAB clusters (Export / Schedule /
   Set Alerts / Compare / Save …). They read as generic "AI-app" chrome, stack
   in the bottom-right, and duplicate in-page actions. Single source of truth:
   hide them all app-wide. KEEP #mvCpFab (Tracked Prompts) and single utilities
   (back-to-top / refresh). Product decision. */
#mvAuditFloatBar, #mvTrafficFloatBar, #mvTopPagesFloatBar, #mvBattleFloatBar,
#mvBrandHealthFab, #mvTechFab, #mvDomOvFab, #mvTopicFab, #mvMetaFab,
#mvAdResFab, #mvPpcFab, #mvCaFab, #mvHeadersFloatBar, #mvAdClarityFloatBar,
.mv-ppc-fab { display:none !important; }

/* ── Shared PREMIUM chart frame — the consistent surface every real chart
   (mvBarChart / mvHBarChart / mvAreaChart / mvDonutChart / mvScatterChart)
   sits inside. Rounded token surface + a fixed height so Chart.js can size
   its canvas responsively. Pair a <canvas> inside: */
.mvr-chartbox{ position:relative; height:260px; margin-top:12px;
  background:var(--mvr-surface, rgba(255,255,255,0.02));
  border:1px solid var(--mvr-line, rgba(255,255,255,0.08));
  border-radius:var(--radius-lg); padding:14px 16px; }
/* Chart.js (responsive + maintainAspectRatio:false) sizes the canvas to this
   dedicated relative box — do NOT set width/height on the canvas or it breaks. */
.mvr-chartbox > canvas{ display:block; }
.mvr-chartbox--sm{ height:200px; }
.mvr-chartbox--lg{ height:340px; }
/* donut: [ ring | rich always-visible legend ] — fills the card width, keeps a
   definite square for the ring (Chart.js measures it immediately). The legend
   (built by mvDonutChart) shows colour · label · value · % so key info reads at
   a glance with no hover. */
/* Any box mvDonutChart restructures gets .mvr-donut-box — bind the flex layout
   (and height:auto, so the injected legend can't overflow a fixed-height box and
   spill onto the next section) to that class, not just the --donut modifier. */
.mvr-chartbox--donut, .mvr-chartbox.mvr-donut-box{ height:auto; min-height:250px; max-width:none; margin:12px 0 0;
  display:flex; align-items:center; gap:28px; padding:18px 22px; }
.mvr-donut-c{ position:relative; width:230px; height:230px; flex-shrink:0; aspect-ratio:1/1; }
.mvr-donut-c canvas{ display:block; }
/* Re-used renderers (e.g. On-Page SEO) can mount a .mvr donut inside a legacy
   .mvx panel, whose canvas[id*="Donut"] rule (max 360px + margin auto) enlarges
   the ring. Keep it bound to its fixed 230px square wrapper so every donut is
   the same size. */
.mvx .mvr-donut-c > canvas{ max-width:100% !important; max-height:100% !important; margin:0 !important; }
.mvr-donut-legend{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mvr-dl-row{ display:flex; align-items:center; gap:11px; padding:8px 2px;
  border-bottom:1px solid var(--mvr-line, rgba(255,255,255,0.07)); }
.mvr-dl-row:last-child{ border-bottom:0; }
.mvr-dl-sw{ width:11px; height:11px; border-radius:var(--radius-pill); flex-shrink:0; }
.mvr-dl-label{ flex:1; min-width:0; font-size:13px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mvr-dl-val{ font-family:'Inter Tight',Inter,sans-serif; font-weight:800; font-size:14px;
  color:var(--text); font-variant-numeric:tabular-nums; }
.mvr-dl-pct{ font-size:12px; color:var(--muted); min-width:40px; text-align:right;
  font-variant-numeric:tabular-nums; }
@media (max-width:600px){
  .mvr-chartbox--donut, .mvr-chartbox.mvr-donut-box{ flex-direction:column; gap:14px; }
  .mvr-donut-legend{ width:100%; }
}
.mvr-chartbox--bare{ background:transparent; border:0; padding:0; }
/* header row above a chart (title + optional caption/legend chips) */
.mvr-chart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:2px; }
.mvr-chart-title{ font-family:'Inter Tight',Inter,sans-serif; font-size:14px; font-weight:800; color:var(--text); letter-spacing:-0.01em; }
.mvr-chart-cap{ font-size:11.5px; color:var(--muted); }

/* ── Overview KPI richness: trend delta chip + inline sparkline ─────────────
   Color-token only (no hex): the sparkline inherits currentColor, set by the
   .up/.down/.flat trend class. Hosts collapse when empty (no data yet). */
.kpi .top{ gap:8px; }
.kpi-delta{ display:none; align-items:center; gap:3px; font-size:11px; font-weight:800; letter-spacing:.01em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kpi-delta.is-on{ display:inline-flex; }
.kpi-delta svg{ width:10px; height:10px; }
.kpi-delta.up{ color:var(--green); }
.kpi-delta.down{ color:var(--red); }
.kpi-delta.flat{ color:var(--muted); }
.kpi-spark{ margin:6px 0 2px; color:var(--muted); }
.kpi-spark:empty{ display:none; }
.kpi-spark.up{ color:var(--green); }
.kpi-spark.down{ color:var(--red); }
.kpi-spark.flat{ color:var(--muted); }
.kpi-spark-svg{ display:block; width:100%; height:26px; }
.kpi-spark-line{ stroke:currentColor; }
.kpi-spark-fill{ fill:currentColor; opacity:.12; }

/* Overview "Opportunities This Week" — structured list (vs a joined sentence) */
.card.opp .opp-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.card.opp .opp-list li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--text-2); }
.card.opp .opp-list li svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; stroke:var(--green); }

/* ═══════════════════════════════════════════════════════════════════════════
   Topic Research renderer — these component classes were emitted by the
   renderer but had ZERO CSS anywhere, so buttons/cards fell back to raw
   browser defaults. Token-only, theme-aware via .mvr scope (with fallbacks).
   ═══════════════════════════════════════════════════════════════════════════ */
.mv-topic-section-card{ background:var(--mvr-surface, rgba(255,255,255,0.03)); border:1px solid var(--mvr-line, var(--border-strong)); border-radius:16px; padding:18px 20px; }
.mv-topic-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:start; }
@media (max-width:900px){ .mv-topic-grid-2{ grid-template-columns:1fr; } }

/* Cluster cards */
.mv-topic-cluster-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.mv-topic-cluster-card{ background:var(--mvr-surface, rgba(255,255,255,0.03)); border:1px solid var(--mvr-line, var(--border-strong)); border-radius:12px; padding:14px 15px; cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; }
.mv-topic-cluster-card:hover{ border-color:var(--purple); transform:translateY(-2px); box-shadow:0 8px 22px -12px rgba(0,0,0,0.5); }
.tc-name{ font-weight:700; font-size:14px; color:var(--text); margin-bottom:10px; line-height:1.3; }
.tc-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.tc-pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; color:var(--text-2); background:rgba(124,92,252,0.10); padding:3px 9px; border-radius:999px; }
.tc-opp{ font-family:'Inter Tight',Inter,sans-serif; font-size:24px; font-weight:800; color:var(--purple); line-height:1; }
.tc-opp-lbl{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.tc-subs{ margin-top:10px; padding-top:10px; border-top:1px solid var(--mvr-line, var(--border-strong)); font-size:12px; color:var(--text-2); line-height:1.7; }

/* Questions People Ask */
.mv-topic-q-grid{ display:flex; flex-direction:column; gap:10px; }
.mv-topic-question-card{ background:var(--mvr-surface, rgba(255,255,255,0.03)); border:1px solid var(--mvr-line, var(--border-strong)); border-radius:12px; padding:12px 14px; transition:border-color .15s; }
.mv-topic-question-card:hover{ border-color:var(--border-strong); }
.qc-text{ display:flex; align-items:flex-start; font-size:13.5px; font-weight:600; color:var(--text); line-height:1.45; margin-bottom:10px; }
.qc-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* Related Terms */
.mv-topic-related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.mv-topic-related-card{ background:var(--mvr-surface, rgba(255,255,255,0.03)); border:1px solid var(--mvr-line, var(--border-strong)); border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s; }
.mv-topic-related-card:hover{ border-color:var(--purple); transform:translateY(-1px); }
.rc-term{ display:flex; align-items:flex-start; font-size:13.5px; font-weight:600; color:var(--text); line-height:1.4; }
.rc-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.rc-pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; color:var(--text-2); background:rgba(124,92,252,0.10); padding:3px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }
.rc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }

/* Shared action buttons (the cramped-default eyesore) — pill outline + filled primary */
.mv-topic-qa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--border-strong); background:transparent; color:var(--text-2); padding:7px 13px; border-radius:999px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s, color .15s, transform .1s; }
.mv-topic-qa-btn:hover{ border-color:var(--purple); color:var(--text); background:rgba(124,92,252,0.08); }
.mv-topic-qa-btn:active{ transform:translateY(1px); }
.mv-topic-qa-btn svg{ width:14px; height:14px; flex-shrink:0; }
.mv-topic-qa-btn.primary{ border-color:transparent; background:var(--purple); color:rgba(255,255,255,0.96); }
.mv-topic-qa-btn.primary:hover{ background:var(--purple-bright, var(--purple)); color:rgba(255,255,255,1); filter:brightness(1.06); }

/* Publisher rows (kw-table already styled; add a hover tint) */
.mv-topic-pub-row{ transition:background .12s; }
.mv-topic-pub-row:hover{ background:rgba(124,92,252,0.05); }

/* Strategic Insights + Action Plan banner */
.mv-topic-insights-banner{ background:linear-gradient(180deg, rgba(124,92,252,0.06), rgba(217,70,168,0.03)); border:1px solid var(--mvr-line, var(--border-strong)); border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.mv-topic-action-step{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; }
.mv-topic-action-step + .mv-topic-action-step{ border-top:1px dashed rgba(124,92,252,0.18); }
.as-num{ flex-shrink:0; width:24px; height:24px; border-radius:999px; background:rgba(124,92,252,0.16); color:var(--purple); font-weight:800; font-size:12.5px; display:inline-flex; align-items:center; justify-content:center; }
.as-text{ flex:1; font-size:13.5px; color:var(--text); line-height:1.5; padding-top:2px; }
.as-cta{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; background:var(--purple); color:rgba(255,255,255,0.96); padding:7px 13px; border-radius:999px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:filter .15s; }
.as-cta:hover{ filter:brightness(1.08); }
.as-cta svg{ width:14px; height:14px; }

/* Redundant floating FAB — its actions already live in the hero (FAB-removal directive) */
.mv-topic-fab{ display:none !important; }

/* ── Card scroll-reveal (driven by js/mv-reveal.js). Only active when the
   controller adds html.mv-rv (IntersectionObserver present + motion allowed) —
   otherwise cards keep their normal always-visible behavior, never stuck hidden.
   Target cards start hidden; JS adds .mv-rv-in when they enter the viewport. */
html.mv-rv .mvr-anim, html.mv-rv .glass-card{ opacity:0 !important; transform:translateY(16px) !important; }
/* JS owns the entrance now — suppress the load-time animations it replaces */
html.mv-rv .mvr-anim{ animation:none !important; }
html.mv-rv .mv-results > *{ animation:none !important; }
html.mv-rv .mvr-anim.mv-rv-in, html.mv-rv .glass-card.mv-rv-in{
  opacity:1 !important; transform:none !important;
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  html.mv-rv .mvr-anim, html.mv-rv .glass-card{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   Search / tool result panels — no pinned-black shell.
   Result containers are class="mvx" with a pinned data-theme: the six
   static workflow panels (#wf…Results) AND every per-tool result wrapper,
   which gets class="mvx"+data-theme set dynamically at render time
   (dashboard.html: res.classList.add("mvx"); res.setAttribute("data-theme",…)).
   In dark, .mvx defines its own --bg as pure black, which children inherit
   via background:var(--bg) — so results render inside a black box. Override
   --bg to transparent on ALL .mvx result wrappers so every black backdrop
   goes transparent and results sit on the app's system background. Cards keep
   their own --surface, so only the black shells go transparent. Inner legacy
   wrappers that hardcode a solid black in dark are cleared too. mvr.css is
   loaded only by dashboard.html, so this is dashboard-scoped by nature.
   ============================================================ */
.mvx[data-theme]{ --bg:transparent !important; background:transparent !important; }
.mvx[data-theme] .container,
.mvx[data-theme] .dashboard-content,
.mvx[data-theme] .main-content,
.mvx[data-theme] .app-shell,
.mvx[data-theme] .ov-shell,
.mvx[data-theme] .section-view{ background:transparent !important; background-image:none !important; }