/* ════════════════════════════════════════════════════════════════════════════
 * THEME OVERRIDES — fixes for pages that bypass the theme system
 * ────────────────────────────────────────────────────────────────────────────
 * Per-page overrides for legacy hardcoded styles.
 * Strategy: add per-theme overrides for CSS that does not
 * respect the --bg-*/--text-*/--line vars. Studio + ADB BYOC viewer overlay
 * are intentionally always-dark islands and are NOT touched.
 *
 * Tag: THEME_OVERRIDES_V1_20260523
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Shared aliases for legacy code using undefined vars (graceful fallback) ─ */
:root {
  --card-bg:      var(--bg-card);
  --text-strong:  var(--text);
  --text-soft:    var(--muted);
  --bord:         var(--line-2);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (1) Connect GPU — `.cg-*` was 100% hardcoded LIGHT
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-matte .cg-card,
body.theme-matte .cg-float-card,
body.theme-navy  .cg-card,
body.theme-navy  .cg-float-card {
  background: var(--bg-card) !important;
  border-color: var(--line-2) !important;
  color: var(--text);
}
body.theme-matte .cg-card-head,
body.theme-navy  .cg-card-head {
  border-bottom-color: var(--line) !important;
  color: var(--text);
}
body.theme-matte .cg-code-box,
body.theme-navy  .cg-code-box {
  background: linear-gradient(135deg, rgba(123,92,255,.10), rgba(45,59,255,.05)) !important;
  border-color: rgba(123,92,255,.4) !important;
}
body.theme-matte .cg-code,
body.theme-navy  .cg-code {
  color: #a5b4fc !important;
}
body.theme-matte .cg-code-ttl,
body.theme-matte .cg-status-row,
body.theme-matte .cg-step,
body.theme-matte .cg-float-sub,
body.theme-navy  .cg-code-ttl,
body.theme-navy  .cg-status-row,
body.theme-navy  .cg-step,
body.theme-navy  .cg-float-sub {
  color: var(--muted) !important;
}
body.theme-matte .cg-float-foot,
body.theme-navy  .cg-float-foot {
  color: var(--dim) !important;
}
body.theme-matte .cg-pair-foot,
body.theme-navy  .cg-pair-foot {
  border-top-color: var(--line) !important;
}
body.theme-matte .cg-cancel-mini,
body.theme-navy  .cg-cancel-mini {
  border-color: var(--line-2) !important;
  color: var(--muted) !important;
}
body.theme-matte .cg-pair-waiting,
body.theme-navy  .cg-pair-waiting {
  background: rgba(123,92,255,.08) !important;
  color: #c4b5fd !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (2) ADB Web HUB (the hub page BEFORE clicking Conectar)
 * Inline styles in renderAdbWebBYOC use #0b1220/#1f2937 — make them transparent
 * so the .st-card under them takes over. The viewer overlay (.adbx-root) is
 * NOT affected.
 * ──────────────────────────────────────────────────────────────────────── */
.st-shell [data-aw-card],
body.theme-light .st-shell .aw-device-card,
body.theme-matte .st-shell .aw-device-card,
body.theme-navy  .st-shell .aw-device-card {
  background: var(--bg-card) !important;
  border-color: var(--line-2) !important;
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (3) Tools page — `.tp-adv-*` / `.tp-rank-*` were hardcoded LIGHT
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-matte .tp-adv-wrap,
body.theme-matte .tp-adv-toggle,
body.theme-matte .tp-adv-card,
body.theme-navy  .tp-adv-wrap,
body.theme-navy  .tp-adv-toggle,
body.theme-navy  .tp-adv-card {
  background: var(--bg-card) !important;
  border-color: var(--line-2) !important;
  color: var(--text);
}
body.theme-matte .tp-adv-toggle:hover,
body.theme-navy  .tp-adv-toggle:hover {
  background: var(--bg-hover) !important;
}
body.theme-matte .tp-adv-name,
body.theme-matte .tp-rank-name,
body.theme-navy  .tp-adv-name,
body.theme-navy  .tp-rank-name {
  color: var(--text) !important;
}
body.theme-matte .tp-adv-cat-head,
body.theme-matte .tp-section-title,
body.theme-matte .tp-rank-desc,
body.theme-matte .tp-header p,
body.theme-navy  .tp-adv-cat-head,
body.theme-navy  .tp-section-title,
body.theme-navy  .tp-rank-desc,
body.theme-navy  .tp-header p {
  color: var(--muted) !important;
}
body.theme-matte .tp-adv-content,
body.theme-navy  .tp-adv-content {
  border-top-color: var(--line) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (4) Notepad — entire editor was hardcoded LIGHT
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-matte .np-side,
body.theme-matte .np-main,
body.theme-navy  .np-side,
body.theme-navy  .np-main {
  background: var(--bg-card) !important;
  color: var(--text);
}
body.theme-matte .np-shell h2,
body.theme-navy  .np-shell h2 {
  color: var(--text) !important;
}
body.theme-matte .np-list li:hover,
body.theme-navy  .np-list li:hover {
  background: var(--bg-hover) !important;
}
body.theme-matte .np-list li.is-active,
body.theme-navy  .np-list li.is-active {
  background: rgba(123,92,255,.12) !important;
  border-color: rgba(123,92,255,.4) !important;
}
body.theme-matte .np-title-input,
body.theme-navy  .np-title-input {
  color: var(--text) !important;
  background: transparent !important;
}
body.theme-matte .np-body,
body.theme-navy  .np-body {
  color: var(--text-2) !important;
  background: transparent !important;
}
body.theme-matte .np-footer,
body.theme-navy  .np-footer {
  color: var(--muted) !important;
}
body.theme-matte .np-overlay-toggle-row,
body.theme-navy  .np-overlay-toggle-row {
  background: linear-gradient(135deg, rgba(123,92,255,.08), rgba(99,102,241,.05)) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (5) Tracker — Ranking Público + Lojas (`.cc-*` / `.tracker-*` hardcoded white)
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-matte .tracker-empty,
body.theme-navy  .tracker-empty {
  background: var(--bg-soft) !important;
  border-color: var(--line-2) !important;
  color: var(--muted) !important;
}
body.theme-matte .tracker-subtabs,
body.theme-navy  .tracker-subtabs {
  background: var(--bg-soft) !important;
}
body.theme-matte .tracker-subtab,
body.theme-navy  .tracker-subtab {
  color: var(--muted) !important;
}
body.theme-matte .tracker-subtab.is-active,
body.theme-navy  .tracker-subtab.is-active {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
body.theme-matte .tracker-cc-toolbar label,
body.theme-navy  .tracker-cc-toolbar label {
  color: var(--text-2) !important;
}
body.theme-matte .tracker-cc-toolbar select,
body.theme-navy  .tracker-cc-toolbar select {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}
body.theme-matte .cc-ranking-list,
body.theme-navy  .cc-ranking-list {
  background: var(--bg-card) !important;
  border-color: var(--line-2) !important;
}
body.theme-matte .cc-row,
body.theme-navy  .cc-row {
  border-bottom-color: var(--line) !important;
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (6) Video Pipeline — `--vp-*` chain reacts to theme now
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-matte {
  --vp-bg:        var(--bg-app);
  --vp-elev:      var(--bg-card);
  --vp-sunk:      var(--bg-soft);
  --vp-border:    var(--line-2);
  --vp-border-st: var(--line-2);
  --vp-ink:       var(--text);
  --vp-mut:       var(--muted);
  --vp-soft:      var(--dim);
}
body.theme-navy {
  --vp-bg:        var(--bg-app);
  --vp-elev:      var(--bg-card);
  --vp-sunk:      var(--bg-soft);
  --vp-border:    var(--line-2);
  --vp-border-st: var(--line-2);
  --vp-ink:       var(--text);
  --vp-mut:       var(--muted);
  --vp-soft:      var(--dim);
}
/* On matte/navy, kill the body.tool-fullwidth force-light bg from Video
   Pipeline so the theme bg wins */
body.theme-matte.tool-fullwidth,
body.theme-navy.tool-fullwidth {
  background: var(--bg-app) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (7) Community detail — undefined --card-bg/--text-strong (now aliased above)
 *     Also explicit overrides for comm-card / comm-page
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-light .comm-card,
body.theme-matte .comm-card,
body.theme-navy  .comm-card {
  background: var(--bg-card) !important;
  border-color: var(--line-2) !important;
  color: var(--text);
}
body.theme-light .comm-card .comm-sub,
body.theme-matte .comm-card .comm-sub,
body.theme-navy  .comm-card .comm-sub {
  color: var(--muted) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * (8) Workflows history — inline cards using undefined vars now resolve.
 *     No extra rules needed since --card-bg/--bord are aliased above.
 * (handled by aliases at top)
 * ──────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
 * GENERIC FALLBACK — any page using inline style="color:#94a3b8" or similar
 * "muted slate" colors stays readable in light theme by lifting contrast.
 * Targeted at the renderTracker inline <h3 style="color:#94a3b8">.
 * ──────────────────────────────────────────────────────────────────────── */
body.theme-light h3[style*="color:#94a3b8"],
body.theme-light h3[style*="color: #94a3b8"] {
  color: var(--muted) !important;
}

/* End of theme-overrides.css */

/* ════════════════════════════════════════════════════════════════════════════
 * (9) Tools page — FEATURED HERO ROW (.tp-feat-*) — added 2026-05-24
 *     Per-theme polish: light = soft shadows, matte = pitch-black dramatic
 *     neon edge, navy = deep navy with vintage glow.
 *     Tag: THEME_OVERRIDES_V2_20260524_FEAT
 * ──────────────────────────────────────────────────────────────────────── */

/* ── LIGHT theme: cream/white card, refined border, soft brand shadow ── */
body.theme-light .tp-feat-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 0 0 0 transparent;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .4s;
}
body.theme-light .tp-feat-card:hover {
  border-color: color-mix(in srgb, var(--feat-c1) 45%, transparent) !important;
  box-shadow:
    0 8px 24px -8px color-mix(in srgb, var(--feat-c1) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--feat-c1) 22%, transparent);
}
body.theme-light .tp-feat-name { color: #0F172A !important; }
body.theme-light .tp-feat-desc { color: #64748B !important; }

/* ── MATTE BLACK theme: pitch black bg, neon brand edge, dramatic shadow ── */
body.theme-matte .tp-feat-card {
  background: linear-gradient(180deg, #0a0a0c 0%, #050507 100%) !important;
  border-color: #1f2937 !important;
  color: var(--text);
  box-shadow: 0 0 0 0 transparent;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .4s;
}
body.theme-matte .tp-feat-card:hover {
  border-color: color-mix(in srgb, var(--feat-c1) 65%, transparent) !important;
  box-shadow:
    0 14px 40px -10px color-mix(in srgb, var(--feat-c1) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--feat-c1) 50%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--feat-c1) 8%, transparent);
}
body.theme-matte .tp-feat-bg {
  opacity: .8 !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--feat-c1) 18%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--feat-c2) 12%, transparent) 0%, transparent 55%) !important;
}
body.theme-matte .tp-feat-card:hover .tp-feat-bg { opacity: 1 !important; }
body.theme-matte .tp-feat-name { color: #f1f5f9 !important; }
body.theme-matte .tp-feat-desc { color: #94a3b8 !important; }
body.theme-matte .tp-feat-icon {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--feat-c1) 65%, transparent))
          drop-shadow(0 0 4px color-mix(in srgb, var(--feat-c1) 80%, transparent));
}

/* ── NAVY theme: deep navy bg with vintage-glow accents ── */
body.theme-navy .tp-feat-card {
  background: linear-gradient(180deg, #0d1726 0%, #0a1322 100%) !important;
  border-color: #1e2a44 !important;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .4s;
}
body.theme-navy .tp-feat-card:hover {
  border-color: color-mix(in srgb, var(--feat-c1) 50%, transparent) !important;
  box-shadow:
    0 10px 32px -10px color-mix(in srgb, var(--feat-c1) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--feat-c1) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.05);
}
body.theme-navy .tp-feat-bg {
  opacity: .65 !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--feat-c1) 16%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--feat-c2) 11%, transparent) 0%, transparent 55%) !important;
}
body.theme-navy .tp-feat-name { color: #e8edf5 !important; }
body.theme-navy .tp-feat-desc { color: #8b97ad !important; }
body.theme-navy .tp-feat-icon {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--feat-c1) 55%, transparent));
}

/* Section title polish — sharper mono label on dark themes */
body.theme-matte .tp-section-title,
body.theme-navy  .tp-section-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1.4px;
}
body.theme-matte .tp-section-title::after,
body.theme-navy  .tp-section-title::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--line-2) 80%, transparent), transparent) !important;
}

/* Polish existing rankings cards — same per-theme touch as featured */
body.theme-matte .tp-rank-card,
body.theme-navy  .tp-rank-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 92%, #000) 100%) !important;
}
body.theme-matte .tp-rank-card:hover {
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.6), 0 0 0 1px var(--line-2) !important;
}

/* Responsive safety — no horizontal scroll on tiny screens */
.tp-feat-grid, .tp-rank-grid { min-width: 0; }
.tp-feat-card, .tp-rank-card { min-width: 0; }

/* End of THEME_OVERRIDES_V2_20260524_FEAT */


/* ────────── Sentiment Radar v3 — dominant temperature panel ────────── */

/* Base dark panel — works on all themes; theme overrides below */
.rail-widget--radar .radar-card-v3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #1a1f2e;
  border: 1px solid rgba(148,163,184,0.10);
  overflow: hidden;
}

/* Top row keeps existing img + product layout — just no gauge anymore */
.rail-widget--radar .radar-card-v3 .radar-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rail-widget--radar .radar-card-v3 .radar-card-prod {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── DOMINANT temperature panel ── */
.radar-temperature-panel {
  position: relative;
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.10);
  transition: box-shadow .4s ease, border-color .4s ease;
  animation: radarTempPulse 2.6s ease-in-out infinite;
}
.radar-temperature-label {
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.radar-temperature-score {
  font: 800 34px/1 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px currentColor;
  margin-bottom: 4px;
}
.radar-temperature-tag {
  display: inline-block;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.radar-temperature-tag--positive {
  background: rgba(16,185,129,0.14);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.30);
}
.radar-temperature-tag--negative {
  background: rgba(239,68,68,0.14);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.30);
}
.radar-temperature-tag--neutral {
  background: rgba(148,163,184,0.14);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.28);
}

/* ── Temperature tiers — drive glow strength & colour ── */
.radar-temp-hot-pos {
  box-shadow: 0 0 32px rgba(16,185,129,0.60),
              inset 0 0 24px rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.35);
}
.radar-temp-warm-pos {
  box-shadow: 0 0 18px rgba(16,185,129,0.30),
              inset 0 0 14px rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.20);
}
.radar-temp-neutral {
  box-shadow: 0 0 10px rgba(148,163,184,0.10);
}
.radar-temp-warm-neg {
  box-shadow: 0 0 18px rgba(239,68,68,0.30),
              inset 0 0 14px rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.20);
}
.radar-temp-hot-neg {
  box-shadow: 0 0 32px rgba(239,68,68,0.60),
              inset 0 0 24px rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.35);
}

@keyframes radarTempPulse {
  0%, 100% { filter: brightness(1.00) saturate(1.00); }
  50%      { filter: brightness(1.12) saturate(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .radar-temperature-panel { animation: none; }
}

/* ── 6-tile metrics grid ── */
.radar-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  margin-top: 2px;
}
.radar-metric-tile {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: 8px;
  padding: 7px 6px 6px;
  text-align: center;
  min-width: 0;
}
.radar-metric-key {
  font: 600 8.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radar-metric-val {
  font: 700 15px/1.05 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
  margin-bottom: 2px;
}
.radar-metric-sub {
  font: 500 8.5px/1.15 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 360px) {
  .radar-metrics-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* ── THEME OVERRIDES ── */

/* Light theme: keep panel dark but slightly softer */
body.theme-light .rail-widget--radar .radar-card-v3 {
  background: #1a1f2e;
  border-color: rgba(255,255,255,0.06);
}
body.theme-light .radar-temperature-panel,
body.theme-light .radar-metric-tile {
  background: rgba(15,23,42,0.65);
}

/* Matte black: pure-black panel, dramatic glow */
body.theme-matte .rail-widget--radar .radar-card-v3 {
  background: #0a0a0a;
  border-color: rgba(255,255,255,0.05);
}
body.theme-matte .radar-temperature-panel,
body.theme-matte .radar-metric-tile {
  background: #050505;
  border-color: rgba(255,255,255,0.05);
}
body.theme-matte .radar-temp-hot-pos {
  box-shadow: 0 0 42px rgba(16,185,129,0.75),
              inset 0 0 28px rgba(16,185,129,0.20);
}
body.theme-matte .radar-temp-hot-neg {
  box-shadow: 0 0 42px rgba(239,68,68,0.75),
              inset 0 0 28px rgba(239,68,68,0.20);
}

/* Navy: deep-navy panel with cyan-tinged glow */
body.theme-navy .rail-widget--radar .radar-card-v3 {
  background: #0b1530;
  border-color: rgba(125,211,252,0.10);
}
body.theme-navy .radar-temperature-panel,
body.theme-navy .radar-metric-tile {
  background: rgba(7,15,36,0.85);
  border-color: rgba(125,211,252,0.10);
}
body.theme-navy .radar-temp-hot-pos {
  box-shadow: 0 0 32px rgba(16,185,129,0.55),
              0 0 18px rgba(125,211,252,0.25),
              inset 0 0 22px rgba(16,185,129,0.15);
}
body.theme-navy .radar-temp-warm-pos {
  box-shadow: 0 0 16px rgba(16,185,129,0.30),
              0 0 12px rgba(125,211,252,0.18);
}
body.theme-navy .radar-temp-neutral {
  box-shadow: 0 0 14px rgba(125,211,252,0.20);
}


/* Per-metric tile glow: subtle border tint always, glow scales with relative value.
   Colors: green=positive signal (buy/desires), red=warning (objections/complaints),
           amber=opportunity (questions), cyan=confidence (records). */

/* Border tint (always present when there's any glow color) */
.radar-metric-tile[data-glow-color="green"]  { border-color: rgba(16,185,129,0.30); }
.radar-metric-tile[data-glow-color="red"]    { border-color: rgba(239,68,68,0.30); }
.radar-metric-tile[data-glow-color="amber"]  { border-color: rgba(245,158,11,0.30); }
.radar-metric-tile[data-glow-color="cyan"]   { border-color: rgba(34,211,238,0.28); }
.radar-metric-tile[data-glow-color="none"]   { border-color: rgba(148,163,184,0.08); opacity: 0.78; }

/* Subtle glow (0.2-0.5 ratio) */
.radar-metric-tile[data-glow-level="subtle"][data-glow-color="green"]  { box-shadow: 0 0 12px rgba(16,185,129,0.25); }
.radar-metric-tile[data-glow-level="subtle"][data-glow-color="red"]    { box-shadow: 0 0 12px rgba(239,68,68,0.25); }
.radar-metric-tile[data-glow-level="subtle"][data-glow-color="amber"]  { box-shadow: 0 0 12px rgba(245,158,11,0.25); }
.radar-metric-tile[data-glow-level="subtle"][data-glow-color="cyan"]   { box-shadow: 0 0 10px rgba(34,211,238,0.22); }

/* Medium glow (0.5-0.8 ratio) */
.radar-metric-tile[data-glow-level="medium"][data-glow-color="green"]  { box-shadow: 0 0 20px rgba(16,185,129,0.40); }
.radar-metric-tile[data-glow-level="medium"][data-glow-color="red"]    { box-shadow: 0 0 20px rgba(239,68,68,0.40); }
.radar-metric-tile[data-glow-level="medium"][data-glow-color="amber"]  { box-shadow: 0 0 20px rgba(245,158,11,0.40); }

/* Strong glow (0.8-1.0 ratio) + slow pulse */
.radar-metric-tile[data-glow-level="strong"][data-glow-color="green"]  { box-shadow: 0 0 28px rgba(16,185,129,0.55); animation: radarTileGlowGreen 3s ease-in-out infinite; }
.radar-metric-tile[data-glow-level="strong"][data-glow-color="red"]    { box-shadow: 0 0 28px rgba(239,68,68,0.55); animation: radarTileGlowRed 3s ease-in-out infinite; }
.radar-metric-tile[data-glow-level="strong"][data-glow-color="amber"]  { box-shadow: 0 0 28px rgba(245,158,11,0.55); animation: radarTileGlowAmber 3s ease-in-out infinite; }

@keyframes radarTileGlowGreen {
  0%, 100% { box-shadow: 0 0 18px rgba(16,185,129,0.40); }
  50%      { box-shadow: 0 0 30px rgba(16,185,129,0.60); }
}
@keyframes radarTileGlowRed {
  0%, 100% { box-shadow: 0 0 18px rgba(239,68,68,0.40); }
  50%      { box-shadow: 0 0 30px rgba(239,68,68,0.60); }
}
@keyframes radarTileGlowAmber {
  0%, 100% { box-shadow: 0 0 18px rgba(245,158,11,0.40); }
  50%      { box-shadow: 0 0 30px rgba(245,158,11,0.60); }
}

/* Value color picks up the glow color when not "none" */
.radar-metric-tile[data-glow-color="green"]  .radar-metric-val { color: #34d399; }
.radar-metric-tile[data-glow-color="red"]    .radar-metric-val { color: #f87171; }
.radar-metric-tile[data-glow-color="amber"]  .radar-metric-val { color: #fbbf24; }
.radar-metric-tile[data-glow-color="cyan"]   .radar-metric-val { color: #67e8f9; }

/* Comment quote: left border picks up dominant signal color */
.radar-card-quote[data-dominant="green"] { border-left: 3px solid rgba(16,185,129,0.55); padding-left: 9px; }
.radar-card-quote[data-dominant="red"]   { border-left: 3px solid rgba(239,68,68,0.55);  padding-left: 9px; }
.radar-card-quote[data-dominant="amber"] { border-left: 3px solid rgba(245,158,11,0.55); padding-left: 9px; }
.radar-card-quote[data-dominant="cyan"]  { border-left: 3px solid rgba(34,211,238,0.35); padding-left: 9px; }

/* Light theme: dial down alpha for less aggressive glow */
body.theme-light .radar-metric-tile[data-glow-level="strong"][data-glow-color="green"]  { box-shadow: 0 0 22px rgba(16,185,129,0.35); }
body.theme-light .radar-metric-tile[data-glow-level="strong"][data-glow-color="red"]    { box-shadow: 0 0 22px rgba(239,68,68,0.35); }
body.theme-light .radar-metric-tile[data-glow-level="strong"][data-glow-color="amber"]  { box-shadow: 0 0 22px rgba(245,158,11,0.35); }
body.theme-light .radar-metric-tile[data-glow-level="medium"][data-glow-color="green"]  { box-shadow: 0 0 16px rgba(16,185,129,0.28); }
body.theme-light .radar-metric-tile[data-glow-level="medium"][data-glow-color="red"]    { box-shadow: 0 0 16px rgba(239,68,68,0.28); }
body.theme-light .radar-metric-tile[data-glow-level="medium"][data-glow-color="amber"]  { box-shadow: 0 0 16px rgba(245,158,11,0.28); }

/* Matte black: amp up glow drama */
body.theme-matte .radar-metric-tile[data-glow-level="strong"][data-glow-color="green"]  { box-shadow: 0 0 32px rgba(16,185,129,0.60); }
body.theme-matte .radar-metric-tile[data-glow-level="strong"][data-glow-color="red"]    { box-shadow: 0 0 32px rgba(239,68,68,0.60); }
body.theme-matte .radar-metric-tile[data-glow-level="strong"][data-glow-color="amber"]  { box-shadow: 0 0 32px rgba(245,158,11,0.60); }

/* Navy: blend with deep blue base — pull toward higher chroma */
body.theme-navy .radar-metric-tile[data-glow-color="cyan"]  { border-color: rgba(34,211,238,0.40); }

/* Reduced motion: kill all tile pulses */
@media (prefers-reduced-motion: reduce) {
  .radar-metric-tile[data-glow-level="strong"] { animation: none !important; }
}


/* ──────────────────────────────────────────────────────────────
   Sentiment Radar v4 — premium polish layer (additive over v3).
   Goals: multi-layer halos, conic-gradient sweeping border,
          breathing scale pulse, liquid tile borders, inner shimmer,
          spark on hot tiles, hover lift, quote glow-sweep,
          author underline-glow, likes heart pulse, card bevel,
          cross-fade on rotation. GPU-friendly (transform/opacity/filter only).
   ────────────────────────────────────────────────────────────── */

/* ── 1) CARD BEVEL — premium "extruded" feel on the outer radar-card ── */
.rail-widget--radar .radar-card-v3 {
  position: relative;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.06),   /* top-left highlight */
    inset -1px -1px 0 rgba(0,0,0,0.35);        /* bottom-right shade */
}
/* Soft cross-fade on rotation tick (toggled by JS via .radar-fade-in class).
   Pure opacity → cheap on the compositor. */
.rail-widget--radar .radar-card-v3.radar-fade-in {
  animation: radarCardFadeIn 220ms ease-out;
}
@keyframes radarCardFadeIn {
  from { opacity: 0.0; transform: translateZ(0) scale(0.985); }
  to   { opacity: 1.0; transform: translateZ(0) scale(1); }
}

/* ── 2) SENTIMENTO MEDIO panel — multi-layer halo + breathing pulse + conic sweep ── */

/* Override v3's simple animation: breathing scale instead of brightness flicker. */
.radar-temperature-panel {
  animation: radarTempBreath 4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
  isolation: isolate;       /* keeps ::before/::after layers contained */
}
.radar-temperature-panel::before,
.radar-temperature-panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
/* ::before = conic-gradient sweeping border (subtle 8s rotation) */
.radar-temperature-panel::before {
  padding: 1px;
  background: conic-gradient(
    from var(--radar-sweep-angle, 0deg),
    rgba(255,255,255,0.00) 0deg,
    rgba(255,255,255,0.00) 200deg,
    rgba(255,255,255,0.28) 270deg,
    rgba(255,255,255,0.00) 340deg,
    rgba(255,255,255,0.00) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: radarSweep 8s linear infinite;
  opacity: 0.85;
}
/* ::after = outer diffuse halo layer (color comes from tier-scoped vars below) */
.radar-temperature-panel::after {
  inset: -6px;
  border-radius: 16px;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    var(--radar-halo-color, rgba(148,163,184,0.18)) 0%,
    transparent 75%
  );
  opacity: 0.55;
  filter: blur(8px);
}

/* Score text inherits the breathing — light extra text-shadow stack */
.radar-temperature-score {
  text-shadow:
    0 0 1px currentColor,
    0 0 8px currentColor,
    0 0 24px rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
}
.radar-temperature-label,
.radar-temperature-tag { position: relative; z-index: 1; }

/* Multi-layer halo per tier — three nested shadows (crisp 1px / mid 8px / outer 24px). */
.radar-temp-hot-pos {
  --radar-halo-color: rgba(16,185,129,0.55);
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.55),
    0 0 8px  rgba(16,185,129,0.45),
    0 0 24px rgba(16,185,129,0.35),
    inset 0 0 22px rgba(16,185,129,0.12);
}
.radar-temp-warm-pos {
  --radar-halo-color: rgba(16,185,129,0.30);
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.30),
    0 0 8px  rgba(16,185,129,0.22),
    0 0 22px rgba(16,185,129,0.16),
    inset 0 0 14px rgba(16,185,129,0.06);
}
.radar-temp-neutral {
  --radar-halo-color: rgba(148,163,184,0.18);
  box-shadow:
    0 0 0 1px rgba(148,163,184,0.18),
    0 0 6px  rgba(148,163,184,0.10),
    0 0 18px rgba(148,163,184,0.06);
}
.radar-temp-warm-neg {
  --radar-halo-color: rgba(239,68,68,0.30);
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.30),
    0 0 8px  rgba(239,68,68,0.22),
    0 0 22px rgba(239,68,68,0.16),
    inset 0 0 14px rgba(239,68,68,0.06);
}
.radar-temp-hot-neg {
  --radar-halo-color: rgba(239,68,68,0.55);
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.55),
    0 0 8px  rgba(239,68,68,0.45),
    0 0 24px rgba(239,68,68,0.35),
    inset 0 0 22px rgba(239,68,68,0.12);
  /* Negative state — faster pulse + jitter at peak (transform-based, GPU-safe). */
  animation: radarTempBreathNeg 3s ease-in-out infinite;
}
.radar-temp-hot-neg .radar-temperature-score {
  animation: radarNegJitter 3s ease-in-out infinite;
}

@keyframes radarTempBreath {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.015); }
}
@keyframes radarTempBreathNeg {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.018); }
}
@keyframes radarNegJitter {
  0%, 40%, 60%, 100% { transform: translateX(0); }
  48%                { transform: translateX(-0.5px); }
  52%                { transform: translateX(0.5px); }
}
@keyframes radarSweep {
  to { --radar-sweep-angle: 360deg; }
}
/* Make --radar-sweep-angle animatable in browsers that need it registered. */
@property --radar-sweep-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── 3) METRIC TILES — liquid gradient border + inner shimmer + spark + hover ── */

.radar-metric-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
  will-change: transform;
}
/* Liquid gradient border that flows around the perimeter.
   Implemented as a rotating conic-gradient masked to a 1px ring. */
.radar-metric-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--tile-sweep-angle, 0deg),
    var(--tile-glow, rgba(148,163,184,0.0)) 0deg,
    transparent 60deg,
    transparent 180deg,
    var(--tile-glow, rgba(148,163,184,0.0)) 240deg,
    transparent 300deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  animation: radarTileSweep 7s linear infinite;
}
.radar-metric-tile[data-glow-color="green"]  { --tile-glow: rgba(16,185,129,0.65);  }
.radar-metric-tile[data-glow-color="red"]    { --tile-glow: rgba(239,68,68,0.65);   }
.radar-metric-tile[data-glow-color="amber"]  { --tile-glow: rgba(245,158,11,0.65);  }
.radar-metric-tile[data-glow-color="cyan"]   { --tile-glow: rgba(34,211,238,0.55);  }
/* Activate liquid border only when there's a real glow level (subtle+). */
.radar-metric-tile[data-glow-level="subtle"]::before { opacity: 0.45; }
.radar-metric-tile[data-glow-level="medium"]::before { opacity: 0.75; }
.radar-metric-tile[data-glow-level="strong"]::before { opacity: 1.0; }

/* Inner shimmer — radial-gradient sweep across the tile every 6s.
   Pure translateX(opacity) — no layout. */
.radar-metric-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120px 60px at 0% 50%,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.0) 60%
  );
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.radar-metric-tile[data-glow-level="subtle"]::after,
.radar-metric-tile[data-glow-level="medium"]::after,
.radar-metric-tile[data-glow-level="strong"]::after {
  animation: radarTileShimmer 6s ease-in-out infinite;
}
.radar-metric-tile[data-glow-level="medium"]::after { animation-duration: 5s; }
.radar-metric-tile[data-glow-level="strong"]::after { animation-duration: 4s; }

/* Keep content above ::before/::after */
.radar-metric-tile > * { position: relative; z-index: 1; }

/* Spark dot on HOT tiles — pure box-shadow keyframe, no extra HTML. */
.radar-metric-tile[data-glow-level="strong"] .radar-metric-val::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  margin-left: 5px;
  vertical-align: 4px;
  box-shadow: 0 0 4px currentColor;
  animation: radarSpark 1.8s ease-in-out infinite;
}

/* Hover: 2px lift + glow doubled + saturation boost */
.radar-metric-tile:hover {
  transform: translateY(-2px);
  filter: saturate(1.18) brightness(1.06);
}
.radar-metric-tile[data-glow-level="strong"][data-glow-color="green"]:hover { box-shadow: 0 0 48px rgba(16,185,129,0.80); }
.radar-metric-tile[data-glow-level="strong"][data-glow-color="red"]:hover   { box-shadow: 0 0 48px rgba(239,68,68,0.80); }
.radar-metric-tile[data-glow-level="strong"][data-glow-color="amber"]:hover { box-shadow: 0 0 48px rgba(245,158,11,0.80); }
.radar-metric-tile[data-glow-level="medium"][data-glow-color="green"]:hover { box-shadow: 0 0 36px rgba(16,185,129,0.65); }
.radar-metric-tile[data-glow-level="medium"][data-glow-color="red"]:hover   { box-shadow: 0 0 36px rgba(239,68,68,0.65); }
.radar-metric-tile[data-glow-level="medium"][data-glow-color="amber"]:hover { box-shadow: 0 0 36px rgba(245,158,11,0.65); }

@keyframes radarTileSweep {
  to { --tile-sweep-angle: 360deg; }
}
@property --tile-sweep-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes radarTileShimmer {
  0%   { transform: translateX(-120%); opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(120%);  opacity: 0; }
}
@keyframes radarSpark {
  0%, 100% { opacity: 0.40; transform: scale(0.85); }
  50%      { opacity: 1.00; transform: scale(1.20); }
}

/* ── 4) COMMENT QUOTE — radial bg + drop-shadow + glow-sweep on hot ── */

.radar-card-quote {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: filter 200ms ease;
}
.radar-card-quote[data-dominant="green"] {
  background: radial-gradient(120% 80% at 0% 50%, rgba(16,185,129,0.07), transparent 70%);
  filter: drop-shadow(0 1px 2px rgba(16,185,129,0.15));
}
.radar-card-quote[data-dominant="red"] {
  background: radial-gradient(120% 80% at 0% 50%, rgba(239,68,68,0.07), transparent 70%);
  filter: drop-shadow(0 1px 2px rgba(239,68,68,0.15));
}
.radar-card-quote[data-dominant="amber"] {
  background: radial-gradient(120% 80% at 0% 50%, rgba(245,158,11,0.07), transparent 70%);
  filter: drop-shadow(0 1px 2px rgba(245,158,11,0.15));
}
.radar-card-quote[data-dominant="cyan"] {
  background: radial-gradient(120% 80% at 0% 50%, rgba(34,211,238,0.05), transparent 70%);
  filter: drop-shadow(0 1px 2px rgba(34,211,238,0.12));
}
/* Glow-sweep: vertical light streak crossing left-to-right over 8s, only when HOT. */
.radar-card-quote[data-hot="pos"]::after,
.radar-card-quote[data-hot="neg"]::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  transform: translateX(-150%);
  animation: radarQuoteSweep 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.radar-card-quote[data-hot="neg"]::after {
  background: linear-gradient(90deg, transparent, rgba(248,113,113,0.18), transparent);
}
.radar-card-quote[data-hot="pos"]::after {
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.18), transparent);
}
.radar-card-quote > *,
.radar-card-quote { /* keep text above the streak */ }
@keyframes radarQuoteSweep {
  0%   { transform: translateX(-150%); }
  60%  { transform: translateX(420%); }
  100% { transform: translateX(420%); }
}

/* ── 5) FOOTER — author underline-glow + likes heart for >100k ── */

.radar-handle {
  position: relative;
  cursor: default;
  transition: color 200ms ease, text-shadow 200ms ease;
}
.radar-handle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 200ms ease, transform 220ms ease;
  box-shadow: 0 0 6px currentColor;
}
.radar-handle:hover {
  text-shadow: 0 0 6px currentColor;
}
.radar-handle:hover::after {
  opacity: 0.75;
  transform: scaleX(1);
}

/* Likes heart — only when value contains "M" or starts with 3+ digits followed by K
   (CSS-only proxy for ">100k"). Render a pulsing ❤ before the count. */
.radar-card-likes[data-mega="1"]::before {
  content: "♥";
  display: inline-block;
  margin-right: 4px;
  color: #f87171;
  text-shadow: 0 0 6px rgba(248,113,113,0.55);
  animation: radarHeartPulse 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes radarHeartPulse {
  0%, 100% { transform: scale(1.00); opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1.00; }
}

/* ── REDUCED MOTION — kill all v4 animations ── */
@media (prefers-reduced-motion: reduce) {
  .rail-widget--radar .radar-card-v3.radar-fade-in,
  .radar-temperature-panel,
  .radar-temperature-panel::before,
  .radar-temp-hot-neg,
  .radar-temp-hot-neg .radar-temperature-score,
  .radar-metric-tile::before,
  .radar-metric-tile::after,
  .radar-metric-tile[data-glow-level="strong"] .radar-metric-val::after,
  .radar-card-quote[data-hot="pos"]::after,
  .radar-card-quote[data-hot="neg"]::after,
  .radar-card-likes[data-mega="1"]::before {
    animation: none !important;
    transform: none !important;
  }
  .radar-metric-tile:hover { transform: none !important; }
}

/* ── THEME tweaks for v4 layers ── */

/* Light theme — slightly softer bevel & halo */
body.theme-light .rail-widget--radar .radar-card-v3 {
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.05),
    inset -1px -1px 0 rgba(0,0,0,0.40);
}

/* Matte black — crank the conic sweep brightness for drama */
body.theme-matte .radar-temperature-panel::before { opacity: 1.0; }
body.theme-matte .radar-metric-tile[data-glow-level="strong"]::before { opacity: 1.0; }

/* Navy — tint the bevel cyan-ward */
body.theme-navy .rail-widget--radar .radar-card-v3 {
  box-shadow:
    inset 1px 1px 0 rgba(125,211,252,0.08),
    inset -1px -1px 0 rgba(0,0,0,0.45);
}


/* Firefox — thin overlay-style */
.left-rail,
.right-rail,
.notif-list,
.tk-modal-body,
.mkt-modal-body,
.comm-modal-body,
.np-body,
.copy-output {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.18) transparent;
}

/* WebKit (Chrome/Edge/Safari) — overlay-style auto-fade */
.left-rail::-webkit-scrollbar,
.right-rail::-webkit-scrollbar,
.notif-list::-webkit-scrollbar,
.tk-modal-body::-webkit-scrollbar,
.mkt-modal-body::-webkit-scrollbar,
.comm-modal-body::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
.left-rail::-webkit-scrollbar-track,
.right-rail::-webkit-scrollbar-track,
.notif-list::-webkit-scrollbar-track,
.tk-modal-body::-webkit-scrollbar-track,
.mkt-modal-body::-webkit-scrollbar-track,
.comm-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.left-rail::-webkit-scrollbar-thumb,
.right-rail::-webkit-scrollbar-thumb,
.notif-list::-webkit-scrollbar-thumb,
.tk-modal-body::-webkit-scrollbar-thumb,
.mkt-modal-body::-webkit-scrollbar-thumb,
.comm-modal-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 6px;
  transition: background .2s ease;
}
/* Visible only on hover (auto-fade behavior) */
.left-rail:hover::-webkit-scrollbar-thumb,
.right-rail:hover::-webkit-scrollbar-thumb,
.notif-list:hover::-webkit-scrollbar-thumb,
.tk-modal-body:hover::-webkit-scrollbar-thumb,
.mkt-modal-body:hover::-webkit-scrollbar-thumb,
.comm-modal-body:hover::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.28);
}
.left-rail::-webkit-scrollbar-thumb:hover,
.right-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,.55) !important;
}
.left-rail::-webkit-scrollbar-corner,
.right-rail::-webkit-scrollbar-corner {
  background: transparent;
}

/* Light theme tweak — darker thumb for contrast on light bg */
body.theme-light .left-rail:hover::-webkit-scrollbar-thumb,
body.theme-light .right-rail:hover::-webkit-scrollbar-thumb,
body.theme-light .notif-list:hover::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.18);
}
body.theme-light .left-rail::-webkit-scrollbar-thumb:hover,
body.theme-light .right-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(15,23,42,.40) !important;
}

/* Mate-black — extra subtle */
body.theme-matte .left-rail::-webkit-scrollbar-thumb,
body.theme-matte .right-rail::-webkit-scrollbar-thumb {
  background: transparent;
}
body.theme-matte .left-rail:hover::-webkit-scrollbar-thumb,
body.theme-matte .right-rail:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
}

/* Page body scroll — keep native (don't override main scrollbar) */


/* ════════════════════════════════════════════════════════════════════════════
 * THEME_OVERRIDES_TOOLS_V2_20260525
 * Make haon-studio, adb-web, studio-marketplace respect ALL themes
 * ──────────────────────────────────────────────────────────────────────── */

/* ── <code> inside .st-howto / .st-shell (was unreadable in light theme) ──── */
.st-shell code,
.st-howto code {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line-2) !important;
  font-size: 0.85em !important;
  word-break: break-all;
}
/* Stronger contrast for the code block in light mode (pale violet tint) */
body.theme-light .st-shell code,
body.theme-light .st-howto code {
  background: rgba(123,92,255,0.08) !important;
  color: #4c1d95 !important;
  border-color: rgba(123,92,255,0.22) !important;
}

/* ── Studio shell privacy callout text contrast ──────────────────────────── */
body.theme-light .st-shell .st-privacy,
body.theme-light .st-shell .st-howto ol li {
  color: var(--text-2) !important;
}
body.theme-light .st-shell .st-section-head span {
  color: var(--muted) !important;
}

/* ── Studio Marketplace (stm-*) — Studio publishing/buying UI ────────────── */
body.theme-light .stm-shell,
body.theme-light .stm-card,
body.theme-light .stm-overlay-card,
body.theme-light .stm-mode-tile {
  background: var(--bg-card) !important;
  color: var(--text);
  border-color: var(--line-2) !important;
}
body.theme-light .stm-sub,
body.theme-light .stm-hint,
body.theme-light .stm-eyebrow,
body.theme-light .stm-card-desc {
  color: var(--muted) !important;
}
body.theme-light .stm-h1,
body.theme-light .stm-card-price {
  color: var(--text) !important;
}
body.theme-light .stm-input,
body.theme-light .stm-field input,
body.theme-light .stm-field textarea,
body.theme-light .stm-field select {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}
body.theme-light .stm-chip,
body.theme-light .stm-cat-pill {
  background: var(--bg-soft) !important;
  color: var(--text-2) !important;
  border-color: var(--line-2) !important;
}

/* ── ADB BYOC docs modal (byoc-*) — "Aprenda a configurar" ───────────────── */
body.theme-light .byoc-card,
body.theme-light .byoc-head,
body.theme-light .byoc-body {
  background: var(--bg-card) !important;
  color: var(--text);
  border-color: var(--line-2) !important;
}
body.theme-light .byoc-title { color: var(--text) !important; }
body.theme-light .byoc-warn  {
  background: rgba(245,158,11,0.08) !important;
  color: #78350F !important;
  border-color: rgba(245,158,11,0.30) !important;
}

/* ── ADB BYOC push panel (bp-*) — file upload to device ──────────────────── */
body.theme-light .bp-head,
body.theme-light .bp-list,
body.theme-light .bp-foot,
body.theme-light .bp-drop,
body.theme-light .bp-dest {
  background: var(--bg-card) !important;
  color: var(--text);
  border-color: var(--line-2) !important;
}
body.theme-light .bp-dest-input {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}
body.theme-light .bp-name { color: var(--text) !important; }
body.theme-light .bp-size,
body.theme-light .bp-stats,
body.theme-light .bp-status { color: var(--muted) !important; }

/* ── ADB Web Onda A/B/C HUB controls (NOT the viewer overlay) ────────────── */
body.theme-light .aw3-btn,
body.theme-light .aw3-input,
body.theme-light .aw3-select {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}
body.theme-light .aw3-logs-tab {
  background: var(--bg-soft) !important;
  color: var(--muted) !important;
  border-color: var(--line-2) !important;
}
body.theme-light .aw3-logs-tab.active {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* ── matte (pure black) — slight elevation difference, otherwise inherit ─── */
body.theme-matte .st-shell code,
body.theme-matte .st-howto code {
  background: rgba(255,255,255,0.06) !important;
  color: #d4d4d8 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Studio link buttons / anchors that were force-#34D399 in light ─────── */
body.theme-light .st-howto a,
body.theme-light .st-shell a:not(.st-btn) {
  color: var(--brand-1) !important;
}
body.theme-light .st-howto a:hover,
body.theme-light .st-shell a:not(.st-btn):hover {
  color: var(--brand-2) !important;
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════════════
 * HANDOFF_CHAIN_V1_20260525 — TikTok → Copywriting → VPv2
 * ──────────────────────────────────────────────────────────────────────── */

/* TikTok: secondary "Continuar no Copywriting" CTA */
.tp-mat-next-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FF9900, #FF0050);
  color: #fff !important;
  font-weight: 700; font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 80, 100, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease;
  opacity: 0; transform: translateY(4px);
}
.tp-mat-next-cta.is-shown {
  opacity: 1; transform: translateY(0);
}
.tp-mat-next-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 22px rgba(255, 80, 100, 0.35);
}
.tp-mat-brief-btn.is-copied {
  background: linear-gradient(135deg, #10B981, #34D399) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Copywriting: handoff banner + label tags */
.copy-handoff-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,0,80,.10), rgba(255,153,0,.08));
  border: 1px solid rgba(255,0,80,.28);
  color: var(--text);
  font-size: 0.86rem;
}
.copy-handoff-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF0050;
  box-shadow: 0 0 10px rgba(255,0,80,.6);
  animation: copyHandoffPulse 2s ease-in-out infinite;
}
@keyframes copyHandoffPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .7; }
}
.copy-handoff-x {
  margin-left: auto;
  background: none; border: 0; color: var(--muted);
  font-size: 1.2rem; cursor: pointer; padding: 0 4px;
  line-height: 1;
}
.copy-label-tag {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(123,92,255,.12);
  color: var(--brand-1, #7B5CFF);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.copy-label-tag-required {
  background: rgba(245,158,11,.18);
  color: #B45309;
}
body.theme-matte .copy-label-tag-required,
body.theme-navy  .copy-label-tag-required {
  color: #FBBF24;
}
.copy-label-brief {
  /* highlight when handoff is active */
}

/* Copywriting: "Ir pro Video Pipeline" CTA inside output */
.copy-next-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7B5CFF, #00D4FF);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(123,92,255,.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: copyNextSlideIn 0.45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes copyNextSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.copy-next-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(123,92,255,.42);
}
.copy-next-cta svg { color: currentColor; }

/* The copy-output-head needs to be flex with gap for the new CTA */
.copy-output-head {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════════════
 * VSL_MASSIVO_V1_20260525 — Escala Massiva tab styling
 * ──────────────────────────────────────────────────────────────────────── */

/* Tab indicator */
.copy-tab-massivo {
  position: relative;
}
.cp-massivo-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #FF9900, #FF0050);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(255, 80, 100, 0.5);
  animation: cpMassivoPulse 2.2s ease-in-out infinite;
}
@keyframes cpMassivoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}

/* Hero card at top of form */
.massivo-hero {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px; padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,153,0,.10), rgba(255,0,80,.06));
  border: 1px solid rgba(255,153,0,.28);
}
.massivo-hero-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF9900, #FF0050);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(255, 80, 100, 0.32);
}
.massivo-hero-icon svg { width: 26px; height: 26px; }
.massivo-hero-title {
  font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.massivo-hero-sub {
  font-size: 0.85rem; color: var(--muted); line-height: 1.45;
}
.massivo-hero-sub b { color: var(--text); }

/* Distribution grid (4 sliders) */
.massivo-dist-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 14px 0 6px;
}
@media (max-width: 640px) {
  .massivo-dist-grid { grid-template-columns: 1fr; }
}
.massivo-dist-cell {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
}
.massivo-dist-cell label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.86rem; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.massivo-cell-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem; font-weight: 800;
  padding: 2px 10px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,153,0,.15), rgba(255,0,80,.10));
  color: #B45309;
}
body.theme-matte .massivo-cell-val,
body.theme-navy  .massivo-cell-val { color: #FBBF24; }
.massivo-dist-cell input[type=range] {
  width: 100%; accent-color: #FF6B35;
}
.massivo-cell-meta {
  font-size: 0.72rem; color: var(--dim); margin-top: 6px;
}

/* Extras details */
.massivo-extras-details {
  margin-top: 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-soft);
  padding: 0 14px;
}
.massivo-extras-details summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.86rem; font-weight: 700; color: var(--text);
}
.massivo-extras-details[open] summary { padding-bottom: 6px; }

/* Total bar */
.massivo-total-bar {
  margin: 14px 0 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,153,0,.08), rgba(255,0,80,.06));
  border: 1px solid rgba(255,153,0,.22);
  font-size: 0.85rem; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.massivo-total-bar b { color: #B45309; font-weight: 800; }
body.theme-matte .massivo-total-bar b,
body.theme-navy  .massivo-total-bar b { color: #FBBF24; }
.massivo-total-bar.is-empty { opacity: 0.55; }
.massivo-total-bar.is-warn { background: linear-gradient(90deg, rgba(244,63,94,.12), rgba(244,63,94,.06)); border-color: rgba(244,63,94,.32); }

/* Generate button — bigger, distinct color */
.copy-generate-btn-massivo {
  background: linear-gradient(135deg, #FF9900 0%, #FF6B35 50%, #FF0050 100%) !important;
  box-shadow: 0 10px 28px rgba(255, 80, 100, 0.32) !important;
}
.copy-generate-btn-massivo:hover {
  box-shadow: 0 14px 36px rgba(255, 80, 100, 0.45) !important;
  transform: translateY(-2px);
}

/* Progress bar (3 steps) */
.massivo-progress {
  display: flex; gap: 10px;
  margin-top: 14px; padding: 14px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
}
.massivo-progress-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0.45;
  transition: opacity 0.3s;
}
.massivo-progress-step.is-active { opacity: 1; }
.massivo-progress-step.is-done { opacity: 0.85; }
.massivo-progress-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--line-2);
  transition: all 0.3s;
}
.massivo-progress-step.is-active .massivo-progress-dot {
  background: linear-gradient(135deg, #FF9900, #FF0050);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(255,80,100,.18);
  animation: massivoProgressPulse 1.4s ease-in-out infinite;
}
@keyframes massivoProgressPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.massivo-progress-step.is-done .massivo-progress-dot {
  background: linear-gradient(135deg, #10B981, #34D399);
  border-color: transparent;
}
.massivo-progress-label {
  font-size: 0.72rem; color: var(--muted); text-align: center;
}
.massivo-progress-step.is-active .massivo-progress-label,
.massivo-progress-step.is-done   .massivo-progress-label { color: var(--text); }

/* JSON block + extras output */
.massivo-json-block, .massivo-extras-block {
  margin-top: 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-soft);
}
.massivo-json-block summary, .massivo-extras-sub summary {
  cursor: pointer; padding: 12px 16px;
  font-size: 0.86rem; font-weight: 700; color: var(--text);
}
.massivo-json-pre {
  margin: 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--line-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; color: var(--text-2);
  max-height: 360px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
}
.massivo-json-copy {
  margin: 8px 16px 14px;
}
.massivo-extras-sub {
  border-top: 1px solid var(--line);
}
.massivo-extras-sub:first-child { border-top: 0; }
.massivo-extras-sub ol {
  padding: 0 20px 14px 36px;
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.6;
}
.massivo-extras-sub ol li { margin: 4px 0; }


/* ════════════════════════════════════════════════════════════════════════════
 * BYOC_HINT_V1 — warn user about BYOC 4KB cap when selecting Minha GPU
 * ──────────────────────────────────────────────────────────────────────── */
.copy-byoc-hint {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}
.copy-byoc-hint b { color: #B45309; font-weight: 700; }
body.theme-matte .copy-byoc-hint b,
body.theme-navy  .copy-byoc-hint b { color: #FBBF24; }


/* ════════════════════════════════════════════════════════════════════════════
 * HAON_FLASH_BTN_V1_20260525 — floating glowing button to launch HaonFlash
 * ──────────────────────────────────────────────────────────────────────── */
.haon-flash-host {
  display: flex; justify-content: flex-end;
  margin: 10px 0 6px;
}
.haon-flash-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7B5CFF 0%, #00D4FF 50%, #FF6B35 100%);
  background-size: 200% 200%;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(123,92,255,0.36), 0 4px 14px rgba(255,107,53,0.22);
  transition: transform .2s, box-shadow .2s;
  animation: haonFlashShift 5s ease-in-out infinite, haonFlashBreath 2.4s ease-in-out infinite;
  overflow: hidden;
}
@keyframes haonFlashShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes haonFlashBreath {
  0%, 100% { box-shadow: 0 10px 28px rgba(123,92,255,0.36), 0 4px 14px rgba(255,107,53,0.22); }
  50% { box-shadow: 0 14px 38px rgba(123,92,255,0.52), 0 6px 22px rgba(255,107,53,0.36), 0 0 0 4px rgba(255,255,255,0.06); }
}
.haon-flash-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 46px rgba(123,92,255,0.60), 0 8px 24px rgba(255,107,53,0.42);
}
.haon-flash-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: haonFlashSweep 3.2s linear infinite;
  pointer-events: none;
}
@keyframes haonFlashSweep {
  from { background-position: 200% 0; }
  to { background-position: -100% 0; }
}
.haon-flash-btn-logo {
  width: 30px; height: 30px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.haon-flash-btn-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
  position: relative; z-index: 1;
}
.haon-flash-btn-text b {
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}
.haon-flash-btn-text span {
  font-size: 0.72rem;
  opacity: 0.92;
  font-weight: 500;
}
.haon-flash-btn-arrow {
  position: relative; z-index: 1;
  margin-left: 4px;
  transition: transform .2s;
}
.haon-flash-btn:hover .haon-flash-btn-arrow {
  transform: translateX(3px);
}

/* Mobile: full-width + smaller */
@media (max-width: 640px) {
  .haon-flash-host {
    justify-content: stretch;
  }
  .haon-flash-btn {
    width: 100%;
    justify-content: space-between;
  }
  .haon-flash-btn-text b { font-size: 0.88rem; }
  .haon-flash-btn-text span { font-size: 0.68rem; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .haon-flash-btn, .haon-flash-btn::before { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * HAON_FLASH_BTN_POLISH_V1_20260525 — border + halo per theme
 * ──────────────────────────────────────────────────────────────────────── */

/* Base: visible outline always */
.haon-flash-btn {
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
}

/* Light theme: dark stroke to separate from light bg */
body.theme-light .haon-flash-btn {
  border-color: rgba(0, 0, 0, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 10px 28px rgba(123, 92, 255, 0.50),
    0 4px 14px rgba(255, 107, 53, 0.30) !important;
}
body.theme-light .haon-flash-btn:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 18px 46px rgba(123, 92, 255, 0.65),
    0 8px 24px rgba(255, 107, 53, 0.45) !important;
}

/* Dark themes (navy / matte): white frosted halo */
body.theme-navy .haon-flash-btn,
body.theme-matte .haon-flash-btn {
  border-color: rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 28px rgba(123, 92, 255, 0.42),
    0 4px 14px rgba(0, 212, 255, 0.28) !important;
}
body.theme-matte .haon-flash-btn:hover,
body.theme-navy  .haon-flash-btn:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 18px 50px rgba(123, 92, 255, 0.62),
    0 8px 24px rgba(0, 212, 255, 0.42) !important;
}

/* In .haon-flash-host within copy-hero, prevent collapse on mobile */
.copy-hero .haon-flash-host { margin: 10px 0 0; }


/* ════════════════════════════════════════════════════════════════════════════
 * HAON_FLASH_BTN_V6_20260525 — light text BLACK + per-context tweaks
 * ──────────────────────────────────────────────────────────────────────── */

/* Light theme: text becomes BLACK on the gradient bg (with subtle white shadow
   so it stays legible on the brighter spots). User requested this explicitly. */
body.theme-light .haon-flash-btn {
  color: #0f172a !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}
body.theme-light .haon-flash-btn-text b {
  color: #0a0a0a !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.62);
  font-weight: 800;
}
body.theme-light .haon-flash-btn-text span {
  color: rgba(15, 23, 42, 0.88) !important;
}
body.theme-light .haon-flash-btn-logo path:first-child {
  fill: #0f172a;
}
body.theme-light .haon-flash-btn-logo path:nth-child(2) {
  fill: #FFFFFF;
}
body.theme-light .haon-flash-btn-arrow {
  color: #0f172a;
}

/* VPv2: detach from topbar + slightly smaller button */
#vpv2-root .haon-flash-host {
  margin: 32px auto 14px !important;
}
#vpv2-root .haon-flash-btn {
  padding: 8px 16px 8px 12px !important;
  border-radius: 10px !important;
}
#vpv2-root .haon-flash-btn-logo {
  width: 26px !important;
  height: 26px !important;
}
#vpv2-root .haon-flash-btn-text b {
  font-size: 0.86rem !important;
}
#vpv2-root .haon-flash-btn-text span {
  font-size: 0.68rem !important;
}

/* Floating effect: gentle hover lift only (no breathing pulse on VPv2 to avoid
   distracting from the wizard work) */
#vpv2-root .haon-flash-btn {
  animation: haonFlashShift 5s ease-in-out infinite !important;
}
#vpv2-root .haon-flash-btn::before { display: none !important; }

/* HANDOFF_BANNER_HIDDEN_FIX_V1 — display:flex was overriding [hidden] attribute */
.copy-handoff-banner[hidden],
#copy-handoff-banner[hidden],
#massivo-handoff-banner[hidden] {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
 * HAON_FLASH_BTN_PRO_V1_20260525 — professional / subdued polish
 * Removes the carnival shimmer + breathing loop for a corporate feel.
 * ──────────────────────────────────────────────────────────────────────── */
.haon-flash-btn {
  animation: none !important;
  background: linear-gradient(135deg, #5B3FCF 0%, #00B8E0 100%) !important;
  background-size: 100% 100% !important;
  box-shadow:
    0 4px 14px rgba(91, 63, 207, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.haon-flash-btn::before { display: none !important; }
.haon-flash-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(91, 63, 207, 0.36),
    0 2px 6px rgba(0, 0, 0, 0.14) !important;
}

/* Light theme: keep border dark for contrast (was already there but reinforce) */
body.theme-light .haon-flash-btn {
  border-color: rgba(15, 23, 42, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.36),
    0 6px 16px rgba(91, 63, 207, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
body.theme-light .haon-flash-btn:hover {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.62),
    0 10px 26px rgba(91, 63, 207, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

/* In VPv2 wizard: tone down further (subtle, doesn't compete with content) */
#vpv2-root .haon-flash-btn {
  animation: none !important;
  box-shadow:
    0 3px 10px rgba(91, 63, 207, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.08) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
 * HAONFLASH_V2_20260526 — glassmorphism oracle (overrides V1 acima)
 * Multi-theme: light (default light glass) / navy / matte
 * Interactive: pointermove → radial light segue o cursor (JS wireado)
 * ──────────────────────────────────────────────────────────────────────── */

.haon-flash-btn {
  --a: #6d5dfc;            /* primary */
  --b: #22d3ee;            /* secondary */
  --c: #a855f7;            /* tertiary */
  --d: #0f172a;            /* base dark */
  --glass: rgba(255,255,255,.54);

  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 66px !important;
  padding: 13px 18px 13px 14px !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  color: #07111f !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.42)),
    linear-gradient(135deg, var(--a), var(--b)) !important;
  background-size: auto !important;
  box-shadow:
    0 20px 45px rgba(15,23,42,.12),
    0 10px 24px rgba(99,102,241,.18),
    inset 0 1px 1px rgba(255,255,255,.85) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
  animation: none !important;   /* mata animation antigo do V1 */
  font-weight: 700;
}

.haon-flash-btn::before {
  content: "" !important;
  position: absolute;
  inset: -60%;
  z-index: -2;
  background:
    radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--b) 80%, transparent), transparent 24%),
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c) 70%, transparent), transparent 26%),
    radial-gradient(circle at 45% 75%, color-mix(in srgb, var(--a) 80%, transparent), transparent 28%);
  filter: blur(18px);
  opacity: .85;
  animation: haonFlashPlasma 8s ease-in-out infinite alternate !important;
  background-size: auto !important;
  pointer-events: none;
}

.haon-flash-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 21px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.74), rgba(255,255,255,.30) 48%, rgba(255,255,255,.58)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.82), transparent 35%),
    rgba(255,255,255,.25);
  pointer-events: none;
}

.haon-flash-btn:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: rgba(255,255,255,.95) !important;
  box-shadow:
    0 24px 50px rgba(15,23,42,.16),
    0 14px 28px color-mix(in srgb, var(--a) 28%, transparent),
    inset 0 1px 1px rgba(255,255,255,.95) !important;
}

.haon-flash-btn:active { transform: translateY(0) scale(.99); }

/* Orb (replaces .haon-flash-btn-logo SVG container) */
.haon-flash-btn .haon-flash-btn-logo {
  position: relative;
  width: 39px !important;
  height: 39px !important;
  flex: 0 0 39px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 25%, #fff 0 8%, rgba(255,255,255,.65) 9% 18%, transparent 19%),
    radial-gradient(circle at 65% 70%, var(--b), transparent 32%),
    linear-gradient(145deg, var(--a), var(--c)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.62),
    0 0 22px color-mix(in srgb, var(--b) 55%, transparent),
    inset -8px -10px 18px rgba(15,23,42,.20),
    inset 8px 8px 16px rgba(255,255,255,.42) !important;
  animation: haonFlashOrbFloat 3.6s ease-in-out infinite !important;
  padding: 0 !important;
  filter: none !important;
}

.haon-flash-btn .haon-flash-btn-logo::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--b) 55%, transparent);
  opacity: .72;
  animation: haonFlashPulse 2.4s ease-out infinite;
  pointer-events: none;
}

/* Esconde o SVG interno do logo — o orb gradient assume o visual */
.haon-flash-btn .haon-flash-btn-logo svg,
.haon-flash-btn .haon-flash-btn-logo path { display: none !important; }

.haon-flash-btn .haon-flash-btn-logo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  box-shadow: 0 0 12px rgba(255,255,255,.75);
}

/* Content (.haon-flash-btn-text) */
.haon-flash-btn .haon-flash-btn-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.05 !important;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.haon-flash-btn .haon-flash-btn-text b {
  font: 800 16px/1.05 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #06111f !important;
}

.haon-flash-btn .haon-flash-btn-text span {
  margin-top: 5px;
  font: 650 12.5px/1.15 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: rgba(15,23,42,.68) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1 !important;
}

/* Arrow */
.haon-flash-btn .haon-flash-btn-arrow {
  margin-left: auto !important;
  width: 33px;
  height: 33px;
  display: grid !important;
  place-items: center;
  border-radius: 999px;
  color: #07111f !important;
  background: rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.68),
    0 8px 18px rgba(15,23,42,.08);
  transition: transform 180ms ease, background 180ms ease;
  position: relative;
  z-index: 1;
}

.haon-flash-btn:hover .haon-flash-btn-arrow {
  transform: translateX(3px);
  background: rgba(255,255,255,.62);
}

/* ═══ THEME VARIANTS ═══════════════════════════════════════════ */

/* NAVY — deep blue oracle, cyan accents */
body.theme-navy .haon-flash-btn {
  --a: #2563eb;
  --b: #67e8f9;
  --c: #7c3aed;
  color: #fff !important;
  border: 1px solid rgba(99,102,241,.40) !important;
  background:
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(8,12,24,.78)),
    linear-gradient(135deg, var(--a), var(--b)) !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,.5),
    0 10px 24px rgba(37,99,235,.30),
    inset 0 1px 1px rgba(255,255,255,.10) !important;
}
body.theme-navy .haon-flash-btn::after {
  background:
    linear-gradient(135deg, rgba(15,23,42,.86), rgba(15,23,42,.46)),
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.18), transparent 32%);
}
body.theme-navy .haon-flash-btn .haon-flash-btn-text b { color: #f8fafc !important; }
body.theme-navy .haon-flash-btn .haon-flash-btn-text span { color: rgba(248,250,252,.66) !important; }
body.theme-navy .haon-flash-btn .haon-flash-btn-arrow {
  color: #f8fafc !important;
  background: rgba(99,102,241,.22);
}
body.theme-navy .haon-flash-btn:hover .haon-flash-btn-arrow { background: rgba(99,102,241,.42); }

/* MATTE — deep indigo + cyan/violet glow */
body.theme-matte .haon-flash-btn {
  --a: #1e1b4b;
  --b: #7dd3fc;
  --c: #c084fc;
  color: #fff !important;
  border: 1px solid rgba(124,58,237,.30) !important;
  background:
    linear-gradient(135deg, rgba(11,11,15,.94), rgba(20,15,40,.84)),
    linear-gradient(135deg, var(--a), var(--c)) !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,.7),
    0 10px 24px rgba(124,58,237,.28),
    inset 0 1px 1px rgba(255,255,255,.08) !important;
}
body.theme-matte .haon-flash-btn::after {
  background:
    radial-gradient(circle at 18% 50%, rgba(192,132,252,.30), transparent 38%),
    linear-gradient(135deg, rgba(20,15,40,.84), rgba(11,11,15,.66));
}
body.theme-matte .haon-flash-btn .haon-flash-btn-text b { color: #fafafa !important; }
body.theme-matte .haon-flash-btn .haon-flash-btn-text span { color: rgba(250,250,250,.62) !important; }
body.theme-matte .haon-flash-btn .haon-flash-btn-arrow {
  color: #fafafa !important;
  background: rgba(124,58,237,.22);
}
body.theme-matte .haon-flash-btn:hover .haon-flash-btn-arrow { background: rgba(124,58,237,.45); }

/* ═══ ANIMATIONS ════════════════════════════════════════════════ */

@keyframes haonFlashPlasma {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.04); }
  100% { transform: translate3d(-1%, 3%, 0) rotate(-6deg) scale(1.02); }
}

@keyframes haonFlashOrbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@keyframes haonFlashPulse {
  0%   { transform: scale(0.88); opacity: .72; }
  100% { transform: scale(1.36); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .haon-flash-btn,
  .haon-flash-btn::before,
  .haon-flash-btn .haon-flash-btn-logo,
  .haon-flash-btn .haon-flash-btn-logo::before {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 480px) {
  .haon-flash-btn {
    min-height: 62px !important;
    padding: 12px 14px !important;
    width: 100%;
    justify-content: space-between;
  }
  .haon-flash-btn .haon-flash-btn-text span { font-size: 12px !important; }
}

/* END HAONFLASH_V2 */