/*
 * EcomVision — estilos das demonstrações.
 * Tudo prefixado com .ev-demo / ev-demo-*; nenhum seletor global, nenhum reset.
 * Sem animações CSS: o movimento vem do motion.js (transform/opacity), o que permite pausar,
 * exportar quadro a quadro e mostrar um quadro estático em prefers-reduced-motion.
 * Tokens copiados do app (tema escuro, conta 14, 07/10/2026).
 */
.ev-demo {
  --ev-demo-bg: #060a10;
  --ev-surface: #0f172a;
  --ev-surface-2: #162032;
  --ev-raised: #1a2540;
  --ev-card: linear-gradient(180deg, rgba(15, 28, 52, 0.96), rgba(10, 18, 36, 0.97));
  --ev-border: rgba(148, 163, 184, 0.14);
  --ev-border-strong: rgba(148, 163, 184, 0.28);
  --ev-text: #f1f5f9;
  --ev-muted: #94a3b8;
  --ev-subtle: #64748b;
  --ev-brand: #f39213;
  --ev-brand-hover: #e0840f;
  --ev-brand-sel-bg: #241b14;
  --ev-brand-sel-border: #4d3d2e;
  --ev-brand-sel-text: #e09f4d;
  --ev-amber: #fbbf24;
  --ev-good: #22c55e;
  --ev-bad: #ef4444;
  --ev-warn: #f59e0b;
  --ev-blue: #3b82f6;
  --ev-font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  display: block;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ev-demo--m { max-width: 600px; }
.ev-demo--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ev-demo-bg);
}

.ev-demo-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ev-demo-stage {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  perspective: 1900px;
  perspective-origin: 50% 40%;
  font-family: var(--ev-font);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ev-text);
  text-align: left;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.ev-demo--m .ev-demo-stage { font-size: 15px; perspective: 1200px; }
.ev-demo-stage *, .ev-demo-stage *::before, .ev-demo-stage *::after { box-sizing: border-box; }
.ev-demo-stage p, .ev-demo-stage h3, .ev-demo-stage ol, .ev-demo-stage ul { margin: 0; padding: 0; }
.ev-demo-stage li { list-style: none; }
.ev-demo-scene { position: absolute; inset: 0; transform-style: flat; }

/* luz ambiente: sem bordas, dissolve no fundo do site */
.ev-demo-amb {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 38% at 58% 52%, rgba(243, 146, 19, 0.09), transparent 70%),
    radial-gradient(40% 46% at 30% 40%, rgba(59, 130, 246, 0.07), transparent 72%);
}

/* botão de pausa: único elemento clicável, discreto, fora da área de leitura */
.ev-demo-ctl {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(10, 16, 28, 0.62);
  color: #e2e8f0;
  opacity: 0.6;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.ev-demo-ctl:hover, .ev-demo-ctl:focus-visible { opacity: 1; border-color: rgba(243, 146, 19, 0.7); }
.ev-demo-ctl:focus-visible { outline: 2px solid #f39213; outline-offset: 2px; }
.ev-demo-ctl svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- plano da interface: flutua, sem moldura, some na base ---------- */
.ev-demo-plane {
  position: absolute;
  border-radius: 22px;
  background: var(--ev-card);
  border: 1px solid var(--ev-border);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform-origin: 50% 55%;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 87%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 87%, rgba(0, 0, 0, 0) 100%);
  backface-visibility: hidden;
}
.ev-demo--d .ev-demo-plane { left: 120px; top: 108px; width: 1040px; height: 680px; }
.ev-demo--m .ev-demo-plane { left: 14px; top: 74px; width: 372px; height: 344px; border-radius: 16px; }

.ev-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 26px;
  border-bottom: 1px solid var(--ev-border);
}
.ev-demo--m .ev-demo-head { height: 46px; padding: 0 14px; gap: 8px; }
.ev-demo-crumb { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.ev-demo-crumb span { color: var(--ev-muted); font-weight: 600; }
.ev-demo--m .ev-demo-crumb { font-size: 14px; gap: 6px; }
.ev-demo--m .ev-demo-crumb span { display: none; }
.ev-demo-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.38);
  white-space: nowrap;
}
.ev-demo--m .ev-demo-badge { font-size: 12px; padding: 4px 9px; }

.ev-demo-body { position: relative; padding: 24px 26px; }
.ev-demo--m .ev-demo-body { padding: 14px; height: calc(100% - 46px); overflow: hidden; }
.ev-demo--m .ev-demo-only-d, .ev-demo--d .ev-demo-only-m { display: none; }

.ev-demo-card {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 28, 52, 0.94), rgba(10, 18, 36, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 18px 20px;
}
.ev-demo--m .ev-demo-card { padding: 11px 12px; border-radius: 12px; }
.ev-demo-label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ev-muted);
}
.ev-demo--m .ev-demo-label { font-size: 12px; }
.ev-demo-value { display: block; margin-top: 6px; font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.ev-demo--m .ev-demo-value { font-size: 25px; margin-top: 3px; }
.ev-demo-hint { display: block; margin-top: 6px; font-size: 15px; color: var(--ev-muted); }
.ev-demo--m .ev-demo-hint { font-size: 12.5px; margin-top: 3px; }
.ev-demo-est {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-brand-sel-text);
  background: var(--ev-brand-sel-bg);
  border: 1px solid var(--ev-brand-sel-border);
}
.ev-demo--m .ev-demo-est { font-size: 12px; margin-top: 6px; padding: 3px 8px; }

.ev-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--ev-brand);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
.ev-demo-btn--ghost { background: rgba(15, 23, 42, 0.5); border-color: var(--ev-border-strong); color: var(--ev-text); }
.ev-demo-btn--off { background: rgba(15, 23, 42, 0.35); border-color: var(--ev-border); color: var(--ev-subtle); }
.ev-demo--m .ev-demo-btn { height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 9px; }

.ev-demo-input {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid var(--ev-border-strong);
  background: rgba(2, 6, 15, 0.55);
  font-size: 18px;
  color: var(--ev-text);
}
.ev-demo--m .ev-demo-input { height: 38px; padding: 0 11px; font-size: 14px; gap: 8px; border-radius: 9px; }
.ev-demo-input svg { width: 20px; height: 20px; flex: none; stroke: var(--ev-muted); fill: none; stroke-width: 2; }
.ev-demo--m .ev-demo-input svg { width: 15px; height: 15px; }
.ev-demo-ph { color: var(--ev-subtle); }
.ev-demo-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--ev-brand); vertical-align: -0.15em; opacity: 0; }
.ev-demo-is-typing .ev-demo-caret { opacity: 1; }

.ev-demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--ev-border);
  background: rgba(15, 23, 42, 0.45);
  font-size: 15px;
  font-weight: 600;
  color: var(--ev-muted);
  white-space: nowrap;
}
.ev-demo-chip--on { color: var(--ev-text); background: var(--ev-brand-sel-bg); border-color: var(--ev-brand-sel-border); }
.ev-demo--m .ev-demo-chip { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }

.ev-demo-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ev-demo-st svg { width: 14px; height: 14px; }
.ev-demo-st--ok { color: #4ade80; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
.ev-demo-st--warn { color: #fbbf24; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); }
.ev-demo-st--wait { color: #93c5fd; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); }
.ev-demo-st--muted { color: var(--ev-muted); background: rgba(148, 163, 184, 0.08); border-color: var(--ev-border); }
.ev-demo--m .ev-demo-st { font-size: 12px; padding: 3px 7px; }

/* destaque de uma informação por vez (classe controlada pela timeline) */
.ev-demo-hl { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.75), 0 0 28px rgba(251, 191, 36, 0.22); border-color: rgba(251, 191, 36, 0.6) !important; }
.ev-demo-is-pressed { filter: brightness(1.22); }

/* ---------- dor e resolução ---------- */
.ev-demo-pain-intro {
  position: absolute;
  z-index: 6;
  left: 200px;
  top: 270px;
  width: 880px;
  text-align: center;
  transform-origin: 50% 50%;
}
.ev-demo-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-amber);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.32);
}
.ev-demo-pain-intro p { font-size: 44px; font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: #f8fafc; text-wrap: balance; }
.ev-demo--m .ev-demo-pain-intro { left: 22px; top: 140px; width: 356px; }
.ev-demo--m .ev-demo-eyebrow { font-size: 12px; margin-bottom: 12px; padding: 4px 10px; }
.ev-demo--m .ev-demo-pain-intro p { font-size: 25px; }

.ev-demo-pill {
  position: absolute;
  z-index: 5;
  left: 120px;
  top: 30px;
  max-width: 1040px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: rgba(10, 16, 28, 0.78);
  border: 1px solid var(--ev-border-strong);
  font-size: 19px;
  font-weight: 600;
  color: #e2e8f0;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.ev-demo-pill b {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ev-demo-pill b svg { width: 15px; height: 15px; }
.ev-demo-pill--pain b { color: var(--ev-amber); background: rgba(245, 158, 11, 0.14); }
.ev-demo-pill--ok { border-color: rgba(34, 197, 94, 0.45); color: #f8fafc; }
.ev-demo-pill--ok b { color: #4ade80; background: rgba(34, 197, 94, 0.14); }
.ev-demo--m .ev-demo-pill {
  left: 14px;
  right: 14px;
  top: 10px;
  max-width: none;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 11px 7px 7px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.3;
}
.ev-demo--m .ev-demo-pill b { font-size: 11px; padding: 4px 8px; }

/* ---------- balão explicativo ---------- */
.ev-demo-tip {
  position: absolute;
  z-index: 22;
  width: max-content;
  max-width: 400px;
  padding: 14px 18px 15px;
  border-radius: 14px;
  background: #fffaf2;
  border: 1px solid rgba(243, 146, 19, 0.55);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(243, 146, 19, 0.08);
  color: #1e293b;
  opacity: 0;
  visibility: hidden;
}
.ev-demo-tip b { display: block; font-size: 17px; font-weight: 800; color: #b45309; margin-bottom: 3px; }
.ev-demo-tip span { display: block; font-size: 17px; font-weight: 600; line-height: 1.38; color: #1e293b; }
.ev-demo-tip--ok b { color: #15803d; }
.ev-demo-tip--warn b { color: #b45309; }
.ev-demo-tip > i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fffaf2;
  border: 1px solid rgba(243, 146, 19, 0.55);
  transform: rotate(45deg);
}
.ev-demo-tip--top > i { bottom: -8px; left: calc(var(--ev-arrow, 50%) - 7px); border-top: 0; border-left: 0; }
.ev-demo-tip--bottom > i { top: -8px; left: calc(var(--ev-arrow, 50%) - 7px); border-bottom: 0; border-right: 0; }
.ev-demo-tip--right > i { left: -8px; top: calc(var(--ev-arrow, 50%) - 7px); border-top: 0; border-right: 0; }
.ev-demo-tip--left > i { right: -8px; top: calc(var(--ev-arrow, 50%) - 7px); border-bottom: 0; border-left: 0; }
.ev-demo-tip--dock {
  left: 14px;
  right: 14px;
  bottom: 12px;
  width: auto;
  max-width: none;
  min-height: 70px;
  padding: 10px 13px 11px;
  border-radius: 13px;
}
.ev-demo-tip--dock b { font-size: 13.5px; margin-bottom: 2px; }
.ev-demo-tip--dock span { font-size: 13.5px; line-height: 1.33; }

/* ---------- cursor simulado ---------- */
.ev-demo-cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 24;
  width: 32px;
  height: 32px;
  margin: -4px 0 0 -6px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}
.ev-demo-cursor svg { display: block; width: 100%; height: 100%; }
.ev-demo--m .ev-demo-cursor { width: 22px; height: 22px; margin: -3px 0 0 -4px; }
.ev-demo-ripple {
  position: absolute;
  left: 0; top: 0;
  z-index: 23;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 2px solid rgba(243, 146, 19, 0.9);
  background: rgba(243, 146, 19, 0.16);
  opacity: 0;
}
.ev-demo--m .ev-demo-ripple { width: 36px; height: 36px; margin: -18px 0 0 -18px; }

/* ícones de linha reutilizados */
.ev-demo-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }

/* =====================================================================
 * Vision Orbit em camadas (hero e cena Vision)
 * ===================================================================== */
.ev-demo-orb { position: absolute; }
.ev-demo-orb > * { position: absolute; }
.ev-demo-orb-layer { inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; transform-origin: 50% 50%; }
.ev-demo-orb-defs { z-index: 0; }
.ev-demo-orb-aura {
  inset: -6%;
  border-radius: 50%;
  z-index: 1;
  will-change: transform;
}
.ev-demo-orb-aura--a { background: radial-gradient(closest-side at 34% 40%, rgba(255, 179, 71, 0.26), rgba(255, 138, 0, 0.09) 52%, rgba(255, 138, 0, 0) 100%); }
.ev-demo-orb-aura--b { background: radial-gradient(closest-side at 66% 62%, rgba(255, 138, 0, 0.16), rgba(59, 130, 246, 0.06) 55%, rgba(59, 130, 246, 0) 100%); }
.ev-demo-orb-glow {
  inset: 1%;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(closest-side at 50% 48%, rgba(255, 179, 71, 0.55), rgba(255, 138, 0, 0.22) 38%, rgba(255, 138, 0, 0) 100%);
}
.ev-demo-orb [data-k$="RingSB"], .ev-demo-orb [data-k$="RingPB"] { z-index: 3; }
.ev-demo-orb-core { z-index: 6; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45)); }
.ev-demo-orb-iris { z-index: 7; }
.ev-demo-orb-lids { z-index: 8; }
.ev-demo-orb-lid { transform-box: fill-box; transform: scaleY(0); }
.ev-demo-orb-lid--top { transform-origin: 50% 100%; }
.ev-demo-orb-lid--bot { transform-origin: 50% 0%; }
.ev-demo-orb [data-k$="RingSF"], .ev-demo-orb [data-k$="RingPF"] { z-index: 9; }
/* brilho do anel frontal: drop-shadow CSS (o filtro SVG original gera artefato em camada de GPU) */
.ev-demo-orb-ringpf { filter: drop-shadow(0 0 var(--ev-orb-glow, 8px) rgba(255, 138, 0, 0.85)) drop-shadow(0 0 calc(var(--ev-orb-glow, 8px) * 0.35) rgba(255, 179, 71, 0.9)); }
.ev-demo-orb-glint {
  left: 0; top: 0;
  width: 4.6%;
  height: 4.6%;
  margin: -2.3% 0 0 -2.3%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0, #ffb347 30%, rgba(255, 138, 0, 0.35) 55%, rgba(255, 138, 0, 0) 72%);
  will-change: transform;
}
.ev-demo-orb-glint--s { width: 3.2%; height: 3.2%; margin: -1.6% 0 0 -1.6%; background: radial-gradient(circle, #ffd9a0 0, #ff8a00 34%, rgba(255, 138, 0, 0) 70%); opacity: 0.7; }
.ev-demo-orb [data-k$="GlintPB"], .ev-demo-orb [data-k$="GlintSB"] { z-index: 4; }
.ev-demo-orb [data-k$="GlintPF"], .ev-demo-orb [data-k$="GlintSF"] { z-index: 10; }
.ev-demo-orb-static { display: block; overflow: visible; }

/* ---------- Cena 01 · hero ---------- */
.ev-demo-s-hero-vision {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
}
.ev-demo-s-hero-vision .ev-demo-amb { display: none; }
.ev-demo-hero { position: absolute; inset: 0; }
.ev-demo-hero-node {
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 179, 71, 0.35);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  will-change: transform, opacity;
}
.ev-demo-hero-node .ev-demo-ico { width: 20px; height: 20px; color: #ffb347; }
.ev-demo--m .ev-demo-hero-node { font-size: 13px; gap: 6px; padding: 6px 11px 6px 8px; }
.ev-demo--m .ev-demo-hero-node .ev-demo-ico { width: 15px; height: 15px; }

/* ---------- Cena 02 · Garimpador ---------- */
.ev-demo-gar-scroll { position: relative; }
.ev-demo-gar-search { display: flex; gap: 12px; }
.ev-demo-gar-search .ev-demo-input { flex: 1; }
.ev-demo-gar-q { white-space: nowrap; }
.ev-demo-gar-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ev-demo-gar-limit { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-gar-grid { display: grid; grid-template-columns: 318px 1fr; gap: 16px; margin-top: 16px; }
.ev-demo-gar-left { display: grid; gap: 12px; align-content: start; }
.ev-demo-gar-left .ev-demo-card { padding: 13px 16px; }
.ev-demo-gar-left .ev-demo-value { font-size: 34px; }
.ev-demo-gar-left .ev-demo-value small { font-size: 17px; font-weight: 700; color: var(--ev-muted); margin-left: 4px; }
.ev-demo-gar-left .ev-demo-est { margin-top: 8px; }
.ev-demo-gar-prod b { display: block; margin-top: 6px; font-size: 18px; font-weight: 800; }
.ev-demo-gar-prod span { display: block; margin-top: 2px; font-size: 16px; color: var(--ev-muted); font-weight: 600; }
.ev-demo-gar-prod small { display: block; margin-top: 6px; font-size: 14px; color: var(--ev-brand-sel-text); font-weight: 600; }
.ev-demo-gar-rank { padding: 16px 18px 12px; }
.ev-demo-gar-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ev-demo-gar-sub { font-size: 14px; font-weight: 600; color: var(--ev-subtle); }
.ev-demo-gar-cols, .ev-demo-gar-row { display: grid; grid-template-columns: 28px 132px 1fr 52px 78px; align-items: center; gap: 12px; }
.ev-demo-gar-cols { padding: 0 10px 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ev-subtle); }
.ev-demo-gar-cols span:nth-child(4), .ev-demo-gar-cols span:nth-child(5) { text-align: right; }
.ev-demo-gar-row { height: 27px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; font-size: 15.5px; }
.ev-demo-gar-pos { color: var(--ev-subtle); font-weight: 700; }
.ev-demo-gar-name { font-weight: 700; white-space: nowrap; }
.ev-demo-gar-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(148, 163, 184, 0.12); overflow: hidden; }
.ev-demo-gar-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #f39213, #fbbf24); transform-origin: 0 50%; }
.ev-demo-gar-pct { text-align: right; font-weight: 800; }
.ev-demo-gar-uni { text-align: right; color: var(--ev-muted); font-weight: 600; }
.ev-demo-gar-row.ev-demo-hl { background: rgba(243, 146, 19, 0.08); }

.ev-demo--m .ev-demo-gar-search { gap: 8px; }
.ev-demo--m .ev-demo-gar-meta { margin-top: 8px; }
.ev-demo--m .ev-demo-gar-meta .ev-demo-chip { display: none; }
.ev-demo--m .ev-demo-gar-limit { margin-left: 0; font-size: 12.5px; }
.ev-demo--m .ev-demo-gar-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.ev-demo--m .ev-demo-gar-left { grid-template-columns: 1fr 1fr; gap: 8px; }
.ev-demo--m .ev-demo-gar-left .ev-demo-card { padding: 10px 11px; }
.ev-demo--m .ev-demo-gar-left .ev-demo-label { font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; }
.ev-demo--m .ev-demo-gar-left .ev-demo-value { font-size: 21px; white-space: nowrap; }
.ev-demo--m .ev-demo-gar-left .ev-demo-value small { font-size: 12px; }
.ev-demo--m .ev-demo-gar-left .ev-demo-est { font-size: 11.5px; padding: 3px 7px; }
.ev-demo--m .ev-demo-gar-rank { padding: 11px 11px 8px; }
.ev-demo--m .ev-demo-gar-rank-head { flex-direction: column; gap: 2px; margin-bottom: 6px; }
.ev-demo--m .ev-demo-gar-sub { font-size: 12px; }
.ev-demo--m .ev-demo-gar-cols, .ev-demo--m .ev-demo-gar-row { grid-template-columns: 16px 1fr 82px 40px; gap: 8px; }
.ev-demo--m .ev-demo-gar-cols { padding: 0 6px 4px; font-size: 11px; }
.ev-demo--m .ev-demo-gar-cols span:nth-child(5), .ev-demo--m .ev-demo-gar-uni { display: none; }
.ev-demo--m .ev-demo-gar-row { height: 26px; padding: 0 6px; font-size: 13.5px; }
.ev-demo--m .ev-demo-gar-row--rest { grid-template-columns: 16px 1fr 40px; color: var(--ev-muted); }

/* ---------- Cena 03 · Categorias ---------- */
.ev-demo-cat-top { display: flex; align-items: center; gap: 12px; }
.ev-demo-cat-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 11px; border: 1px solid var(--ev-border); background: rgba(2, 6, 15, 0.4); font-size: 15px; font-weight: 700; color: var(--ev-muted); }
.ev-demo-cat-seg > span { padding: 6px 14px; border-radius: 8px; }
.ev-demo-cat-seg-on { background: var(--ev-raised); color: var(--ev-text); }
.ev-demo-cat-hint { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--ev-muted); }
.ev-demo-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.ev-demo-cat-field { padding: 14px 14px 12px; border-radius: 13px; border: 1px solid rgba(148, 163, 184, 0.2); background: linear-gradient(180deg, rgba(15, 28, 52, 0.94), rgba(10, 18, 36, 0.98)); }
.ev-demo-cat-flabel { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: var(--ev-text); white-space: nowrap; }
.ev-demo-cat-flabel .ev-demo-ico { color: var(--ev-brand); width: 17px; height: 17px; }
.ev-demo-cat-fval { display: grid; margin-top: 10px; height: 40px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--ev-border-strong); background: rgba(2, 6, 15, 0.5); font-size: 15px; font-weight: 600; color: var(--ev-muted); align-items: center; overflow: hidden; }
.ev-demo-cat-fval > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-demo-cat-new { color: var(--ev-text); font-weight: 700; opacity: 0; }
.ev-demo-cat-actions { display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 2px; }
.ev-demo-cat-actions .ev-demo-ico { width: 18px; height: 18px; }
.ev-demo-cat-results { margin-top: 16px; opacity: 0; }
.ev-demo-cat-rlabel { display: block; font-size: 15px; font-weight: 700; color: var(--ev-muted); margin-bottom: 10px; }
.ev-demo-cat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ev-demo-cat-card { display: flex; gap: 14px; align-items: flex-start; padding: 15px; }
.ev-demo-cat-thumb { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 12px; background: var(--ev-brand-sel-bg); border: 1px solid var(--ev-brand-sel-border); color: var(--ev-brand); }
.ev-demo-cat-thumb .ev-demo-ico { width: 30px; height: 30px; }
.ev-demo-cat-card b { display: block; font-size: 17px; font-weight: 800; }
.ev-demo-cat-price { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--ev-text); }
.ev-demo-cat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-cat-meta .ev-demo-st { font-size: 13px; padding: 2px 8px; }

.ev-demo-cat-modal {
  position: absolute;
  left: 22px; right: 22px; top: 80px; bottom: 40px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #0c1528;
  border: 1px solid var(--ev-border-strong);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.8);
  opacity: 0;
  overflow: hidden;
}
.ev-demo-cat-mhead { padding: 18px 22px 14px; border-bottom: 1px solid var(--ev-border); }
.ev-demo-cat-mhead b { display: block; font-size: 22px; font-weight: 800; }
.ev-demo-cat-mhead span { display: block; margin-top: 2px; font-size: 15px; color: var(--ev-muted); font-weight: 600; }
.ev-demo-cat-cols { flex: 1; display: grid; grid-template-columns: 300px 1fr 270px; min-height: 0; }
.ev-demo-cat-col { padding: 14px 14px; border-right: 1px solid var(--ev-border); overflow: hidden; }
.ev-demo-cat-col:last-child { border-right: 0; }
.ev-demo-cat-ctitle { display: block; margin: 0 6px 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ev-muted); }
.ev-demo-cat-ctitle em { font-style: normal; color: var(--ev-subtle); margin-left: 6px; }
.ev-demo-cat-count--on, .ev-demo-cat-count--on span { color: var(--ev-brand) !important; }
.ev-demo-cat-li { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border-radius: 9px; border: 1px solid transparent; font-size: 16px; font-weight: 600; color: #cbd5e1; }
.ev-demo-cat-li > .ev-demo-ico:first-child { width: 18px; height: 18px; color: #60a5fa; flex: none; }
.ev-demo-cat-li span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-demo-cat-plus { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--ev-border-strong); color: var(--ev-muted); }
.ev-demo-cat-plus .ev-demo-ico { width: 14px; height: 14px; }
.ev-demo-cat-chev { width: 16px; height: 16px; color: var(--ev-subtle); }
.ev-demo-cat-li--on { background: var(--ev-brand-sel-bg); border-color: var(--ev-brand-sel-border); color: var(--ev-text); }
.ev-demo-cat-li--on .ev-demo-cat-plus { border-color: var(--ev-brand); color: var(--ev-brand); }
.ev-demo-cat-selchip { display: inline-flex; align-items: center; gap: 8px; margin: 4px 6px; padding: 8px 12px; border-radius: 10px; background: var(--ev-brand-sel-bg); border: 1px solid var(--ev-brand-sel-border); color: var(--ev-text); font-size: 14.5px; font-weight: 700; opacity: 0; }
.ev-demo-cat-selchip .ev-demo-ico { width: 15px; height: 15px; color: #4ade80; }
.ev-demo-cat-mfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ev-border); }

.ev-demo--m .ev-demo-cat-top { gap: 8px; }
.ev-demo--m .ev-demo-cat-seg { font-size: 12px; padding: 3px; }
.ev-demo--m .ev-demo-cat-seg > span { padding: 4px 8px; }
.ev-demo--m .ev-demo-cat-hint { display: none; }
.ev-demo--m .ev-demo-cat-grid { grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.ev-demo--m .ev-demo-cat-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 10px; }
.ev-demo--m .ev-demo-cat-flabel { font-size: 12.5px; gap: 5px; }
.ev-demo--m .ev-demo-cat-flabel .ev-demo-ico { width: 13px; height: 13px; }
.ev-demo--m .ev-demo-cat-fval { margin-top: 0; height: 28px; width: 168px; padding: 0 8px; font-size: 12.5px; border-radius: 7px; }
.ev-demo--m .ev-demo-cat-actions { margin-top: 2px; }
.ev-demo--m .ev-demo-cat-actions .ev-demo-ico { width: 14px; height: 14px; }
.ev-demo--m .ev-demo-cat-results { margin-top: 12px; }
.ev-demo--m .ev-demo-cat-rlabel { font-size: 12px; margin-bottom: 6px; }
.ev-demo--m .ev-demo-cat-cards { grid-template-columns: 1fr; gap: 6px; }
.ev-demo--m .ev-demo-cat-card { gap: 9px; padding: 8px 10px; align-items: center; }
.ev-demo--m .ev-demo-cat-thumb { width: 38px; height: 38px; border-radius: 9px; }
.ev-demo--m .ev-demo-cat-thumb .ev-demo-ico { width: 19px; height: 19px; }
.ev-demo--m .ev-demo-cat-card b { font-size: 13.5px; }
.ev-demo--m .ev-demo-cat-price { display: inline; font-size: 13.5px; margin: 0 6px 0 0; }
.ev-demo--m .ev-demo-cat-meta { display: inline-flex; font-size: 12px; gap: 2px 7px; margin-top: 2px; }
.ev-demo--m .ev-demo-cat-meta .ev-demo-st { font-size: 11px; padding: 1px 6px; }
.ev-demo--m .ev-demo-cat-modal { left: 8px; right: 8px; top: 52px; bottom: 8px; border-radius: 13px; }
.ev-demo--m .ev-demo-cat-mhead { padding: 10px 12px 8px; }
.ev-demo--m .ev-demo-cat-mhead b { font-size: 15px; }
.ev-demo--m .ev-demo-cat-mhead span { font-size: 12px; }
.ev-demo--m .ev-demo-cat-cols { grid-template-columns: 354px 354px; width: 708px; }
.ev-demo--m .ev-demo-cat-sel { display: none; }
.ev-demo--m .ev-demo-cat-col { padding: 8px 8px; border-right: 0; }
.ev-demo--m .ev-demo-cat-ctitle { font-size: 11px; margin-bottom: 4px; }
.ev-demo--m .ev-demo-cat-li { height: 26px; font-size: 12.5px; gap: 7px; padding: 0 6px; }
.ev-demo--m .ev-demo-cat-li > .ev-demo-ico:first-child { width: 14px; height: 14px; }
.ev-demo--m .ev-demo-cat-plus { width: 20px; height: 20px; }
.ev-demo--m .ev-demo-cat-mfoot { padding: 7px 8px; gap: 6px; }

/* ---------- Cena 04 · Avaliações ---------- */
.ev-demo-av-auto { display: grid; grid-template-columns: 52px 1fr auto auto auto; align-items: center; gap: 20px; padding: 18px 22px; }
.ev-demo-av-bot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--ev-brand-sel-bg); border: 1px solid var(--ev-brand-sel-border); color: var(--ev-brand); }
.ev-demo-av-bot .ev-demo-ico { width: 24px; height: 24px; }
.ev-demo-av-desc b { display: block; font-size: 19px; font-weight: 800; }
.ev-demo-av-desc span { display: block; margin-top: 3px; font-size: 15px; color: var(--ev-muted); font-weight: 600; max-width: 280px; }
.ev-demo-av-on { display: grid; justify-items: center; gap: 8px; }
.ev-demo-av-toggle { display: block; width: 46px; height: 26px; border-radius: 13px; background: var(--ev-good); position: relative; }
.ev-demo-av-toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.ev-demo-av-rule { padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; }
.ev-demo-av-rule b { display: block; margin-top: 4px; font-size: 21px; font-weight: 800; }
.ev-demo-av-rule small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--ev-brand-sel-text); }
.ev-demo-av-checks { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: #cbd5e1; }
.ev-demo-av-checks li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ev-demo-av-checks .ev-demo-ico { color: #4ade80; width: 16px; height: 16px; }
.ev-demo-av-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.ev-demo-av-kpi { padding: 14px 16px; }
.ev-demo-av-klabel { display: block; font-size: 15px; font-weight: 700; color: #cbd5e1; }
.ev-demo-av-kval { display: block; margin-top: 2px; font-size: 34px; font-weight: 800; line-height: 1.1; }
.ev-demo-av-khint { display: block; margin-top: 2px; font-size: 14px; color: var(--ev-muted); font-weight: 600; }
.ev-demo-av-total { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-av-total b { color: var(--ev-text); font-weight: 800; }
.ev-demo-av-total--on b { color: #fde68a; }
.ev-demo-av-tabs { display: flex; gap: 22px; margin-top: 14px; border-bottom: 1px solid var(--ev-border); font-size: 15.5px; font-weight: 700; color: var(--ev-muted); }
.ev-demo-av-tab { padding: 0 2px 10px; border-bottom: 2px solid transparent; white-space: nowrap; }
.ev-demo-av-tab--on { color: var(--ev-brand-sel-text); border-bottom-color: var(--ev-brand); }
.ev-demo-av-row { display: grid; grid-template-columns: 240px 1fr 220px; align-items: center; gap: 20px; margin-top: 12px; padding: 16px 20px; }
.ev-demo-av-order b { display: block; font-size: 17px; font-weight: 800; color: #93c5fd; }
.ev-demo-av-order span { display: block; margin-top: 3px; font-size: 15px; color: var(--ev-muted); font-weight: 600; }
.ev-demo-av-track { position: relative; height: 8px; border-radius: 4px; background: rgba(148, 163, 184, 0.16); }
.ev-demo-av-fill { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, #3b82f6, #f39213); transform-origin: 0 50%; transform: scaleX(0); }
.ev-demo-av-mk { position: absolute; left: -9px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--ev-brand); box-shadow: 0 0 0 5px rgba(243, 146, 19, 0.18); }
.ev-demo-av-ticks { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-av-day b { color: var(--ev-text); font-weight: 800; }
.ev-demo-av-ff { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); opacity: 0; }
.ev-demo-av-ff .ev-demo-ico { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.ev-demo-av-status { display: grid; justify-items: end; }
.ev-demo-av-status > span { grid-area: 1 / 1; }
.ev-demo-av-status .ev-demo-st { font-size: 16px; padding: 7px 13px; }
.ev-demo-av-status .ev-demo-st svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ev-demo-av-status [data-k="stEnv"] { opacity: 0; }

.ev-demo--m .ev-demo-av-auto { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 9px 11px; }
.ev-demo--m .ev-demo-av-bot, .ev-demo--m .ev-demo-av-desc, .ev-demo--m .ev-demo-av-checks { display: none; }
.ev-demo--m .ev-demo-av-on { order: 2; gap: 5px; }
.ev-demo--m .ev-demo-av-toggle { width: 36px; height: 20px; }
.ev-demo--m .ev-demo-av-toggle::after { width: 14px; height: 14px; }
.ev-demo--m .ev-demo-av-rule { padding: 2px 4px; }
.ev-demo--m .ev-demo-av-rule b { font-size: 16px; margin-top: 1px; }
.ev-demo--m .ev-demo-av-rule small { font-size: 11.5px; }
.ev-demo--m .ev-demo-av-kpis { grid-template-columns: 1fr 1.12fr 1.12fr 0.86fr; gap: 5px; margin-top: 8px; }
.ev-demo--m .ev-demo-av-kpi { padding: 6px 7px; border-radius: 10px; }
.ev-demo--m .ev-demo-av-klabel { font-size: 11px; white-space: nowrap; }
.ev-demo--m .ev-demo-av-kval { font-size: 19px; }
.ev-demo--m .ev-demo-av-khint, .ev-demo--m .ev-demo-av-tabs { display: none; }
.ev-demo--m .ev-demo-av-total { margin-top: 6px; font-size: 11.5px; line-height: 1.3; }
.ev-demo--m .ev-demo-av-row { grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; padding: 9px 11px; }
.ev-demo--m .ev-demo-av-order { grid-column: 1; grid-row: 1; align-self: center; }
.ev-demo--m .ev-demo-av-order b { font-size: 13.5px; white-space: nowrap; }
.ev-demo--m .ev-demo-av-order span { display: none; }
.ev-demo--m .ev-demo-av-status { grid-column: 2; grid-row: 1; }
.ev-demo--m .ev-demo-av-time { grid-column: 1 / span 2; grid-row: 2; }
.ev-demo--m .ev-demo-av-time { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.ev-demo--m .ev-demo-av-track { grid-column: 1; }
.ev-demo--m .ev-demo-av-ticks { grid-column: 1; margin-top: 8px; font-size: 11.5px; }
.ev-demo--m .ev-demo-av-ff { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 11px; padding: 3px 7px; white-space: normal; line-height: 1.2; }
.ev-demo--m .ev-demo-av-mk { width: 16px; height: 16px; top: -5px; left: -8px; border-width: 3px; }
.ev-demo--m .ev-demo-av-status { justify-items: start; }
.ev-demo--m .ev-demo-av-status .ev-demo-st { font-size: 12.5px; padding: 4px 9px; }
.ev-demo--m .ev-demo-av-status .ev-demo-st svg { width: 13px; height: 13px; }

/* ---------- troca de valor (antes → depois), usada por várias cenas ---------- */
.ev-demo-swap { display: inline-grid; align-items: center; }
.ev-demo-swap > span { grid-area: 1 / 1; white-space: nowrap; }
.ev-demo-swap-new { opacity: 0; }
.ev-demo-swap--end { justify-items: start; }

/* ---------- Cena 05 · Conciliação ---------- */
.ev-demo-cc-scroll { display: flex; flex-direction: column; gap: 12px; }
.ev-demo-cc-top { display: grid; grid-template-columns: 1.8fr 1fr; gap: 14px; }
.ev-demo-cc-ct { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ev-demo-cc-ct .ev-demo-chip { height: 30px; font-size: 14px; }
.ev-demo-cc-all { font-size: 14px; font-weight: 600; color: var(--ev-subtle); }
.ev-demo-cc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ev-demo-cc-k > span { display: block; font-size: 15px; font-weight: 700; color: #cbd5e1; }
.ev-demo-cc-k > b { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.ev-demo-cc-k > small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-cc-est { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ev-border); font-size: 13.5px; font-weight: 600; color: var(--ev-brand-sel-text); }
.ev-demo-cc-bank { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-content: start; }
.ev-demo-cc-bank .ev-demo-cc-ct { grid-column: 1 / -1; }
.ev-demo-cc-bank--on { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.55), 0 0 26px rgba(96, 165, 250, 0.18); }
.ev-demo-cc-warn .ev-demo-swap-new, .ev-demo-cc-warn.ev-demo-swap .ev-demo-swap-new { color: #fbbf24; }
.ev-demo-cc-up { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ev-demo-cc-upleft { flex: 1; display: grid; align-items: center; justify-items: start; min-width: 0; }
.ev-demo-cc-upleft > span { grid-area: 1 / 1; }
.ev-demo-cc-uptext { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: #cbd5e1; min-width: 0; }
.ev-demo-cc-uptext .ev-demo-ico { width: 22px; height: 22px; color: #60a5fa; flex: none; }
.ev-demo-cc-up .ev-demo-btn { height: 44px; padding: 0 16px; font-size: 15px; }
.ev-demo-cc-up .ev-demo-btn .ev-demo-ico { width: 17px; height: 17px; }
.ev-demo-cc-upbtn { border-color: rgba(243, 146, 19, 0.5); color: var(--ev-brand-sel-text); }
.ev-demo-cc-upbtn--on { background: var(--ev-brand-sel-bg); border-color: var(--ev-brand); }
.ev-demo-cc-file { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.35); font-size: 14.5px; font-weight: 700; color: #bfdbfe; white-space: nowrap; opacity: 0; }
.ev-demo-cc-file .ev-demo-ico { width: 17px; height: 17px; }
.ev-demo-cc-file em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-cc-table { padding: 14px 18px 12px; }
.ev-demo-cc-check { height: 38px !important; padding: 0 14px !important; font-size: 14px !important; opacity: 0; }
.ev-demo-cc-thead, .ev-demo-cc-tr { display: grid; grid-template-columns: 96px 84px 1fr 1fr 0.8fr 150px; align-items: center; gap: 12px; }
.ev-demo-cc-thead { padding: 0 12px 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ev-subtle); }
.ev-demo-cc-tr { height: 50px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; font-size: 16px; font-weight: 600; color: #cbd5e1; }
.ev-demo-cc-tr b { color: var(--ev-text); font-weight: 800; }
.ev-demo-cc-tr + .ev-demo-cc-tr { margin-top: 4px; }
.ev-demo-cc-tr--scan { background: rgba(59, 130, 246, 0.09); border-color: rgba(96, 165, 250, 0.35); }
.ev-demo-cc-tr .ev-demo-swap-new { color: var(--ev-text); font-weight: 700; }
.ev-demo-cc-tr .ev-demo-cc-warn .ev-demo-swap-new { color: #fbbf24; }
.ev-demo-cc-tr .ev-demo-st .ev-demo-ico { width: 14px; height: 14px; }

.ev-demo--m .ev-demo-cc-scroll { gap: 8px; }
.ev-demo--m .ev-demo-cc-top { display: contents; }
.ev-demo--m .ev-demo-cc-sum { order: 1; }
.ev-demo--m .ev-demo-cc-up { order: 2; }
.ev-demo--m .ev-demo-cc-bank { order: 3; }
.ev-demo--m .ev-demo-cc-table { order: 4; }
.ev-demo--m .ev-demo-cc-ct { margin-bottom: 6px; }
.ev-demo--m .ev-demo-cc-ct .ev-demo-chip { height: 22px; font-size: 11px; }
.ev-demo--m .ev-demo-cc-all { font-size: 11px; }
.ev-demo--m .ev-demo-cc-kpis { grid-template-columns: 1fr; gap: 3px; }
.ev-demo--m .ev-demo-cc-k { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ev-demo--m .ev-demo-cc-k > span { font-size: 12.5px; }
.ev-demo--m .ev-demo-cc-k > b { font-size: 15px; margin-top: 0; }
.ev-demo--m .ev-demo-cc-k > small { display: none; }
.ev-demo--m .ev-demo-cc-est { margin-top: 6px; padding-top: 5px; font-size: 11px; }
.ev-demo--m .ev-demo-cc-bank { grid-template-columns: 1fr; row-gap: 3px; }
.ev-demo--m .ev-demo-cc-up { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.ev-demo--m .ev-demo-cc-upleft { flex-basis: 100%; }
.ev-demo--m .ev-demo-cc-uptext { font-size: 12.5px; gap: 6px; }
.ev-demo--m .ev-demo-cc-uptext .ev-demo-ico { width: 16px; height: 16px; }
.ev-demo--m .ev-demo-cc-up .ev-demo-btn { height: 32px; padding: 0 10px; font-size: 12px; }
.ev-demo--m .ev-demo-cc-up .ev-demo-btn .ev-demo-ico { width: 13px; height: 13px; }
.ev-demo--m .ev-demo-cc-file { font-size: 12px; padding: 4px 8px; gap: 5px; }
.ev-demo--m .ev-demo-cc-file em { font-size: 11px; }
.ev-demo--m .ev-demo-cc-table { padding: 9px 10px 8px; }
.ev-demo--m .ev-demo-cc-check { height: 28px !important; padding: 0 9px !important; font-size: 11.5px !important; }
.ev-demo--m .ev-demo-cc-tr { display: block; height: auto; padding: 7px 8px; font-size: 12.5px; }
.ev-demo--m .ev-demo-cc-trtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ev-demo--m .ev-demo-cc-trtop b { font-size: 13.5px; }
.ev-demo--m .ev-demo-cc-trtop .ev-demo-st { font-size: 11.5px; padding: 2px 7px; }
.ev-demo--m .ev-demo-cc-trvals { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; color: var(--ev-muted); }
.ev-demo--m .ev-demo-cc-trvals b { color: var(--ev-text); font-size: 12.5px; }

/* ---------- Cena 06 · Voz do Cliente ---------- */
.ev-demo-vc-prod { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 18px; }
.ev-demo-vc-thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--ev-brand-sel-bg); border: 1px solid var(--ev-brand-sel-border); color: var(--ev-brand); }
.ev-demo-vc-thumb .ev-demo-ico { width: 26px; height: 26px; }
.ev-demo-vc-chips { display: flex; gap: 8px; }
.ev-demo-vc-chips .ev-demo-chip { height: 28px; font-size: 13px; padding: 0 10px; }
.ev-demo-vc-chips .ev-demo-st { font-size: 13px; padding: 3px 9px; }
.ev-demo-vc-pinfo b { display: block; margin-top: 6px; font-size: 18px; font-weight: 800; }
.ev-demo-vc-count { font-size: 15px; font-weight: 600; color: var(--ev-muted); white-space: nowrap; }
.ev-demo-vc-count b { font-size: 22px; font-weight: 800; color: var(--ev-text); margin-right: 3px; }
.ev-demo-vc-open { height: 42px !important; font-size: 15px !important; }
.ev-demo-vc-open--on { background: var(--ev-brand-sel-bg) !important; border-color: var(--ev-brand) !important; color: var(--ev-brand-sel-text) !important; }
.ev-demo-vc-an { height: 332px; margin-top: 12px; padding: 0 18px 16px; border-radius: 14px; border: 1px solid var(--ev-border); background: rgba(8, 14, 28, 0.55); opacity: 0; }
.ev-demo-vc-tabs { display: flex; gap: 24px; padding-top: 12px; border-bottom: 1px solid var(--ev-border); font-size: 15px; font-weight: 700; color: var(--ev-muted); }
.ev-demo-vc-tab { padding-bottom: 10px; border-bottom: 2px solid transparent; }
.ev-demo-vc-tab--on { color: var(--ev-brand-sel-text); border-bottom-color: var(--ev-brand); }
.ev-demo-vc-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 12px; }
.ev-demo-vc-col { padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; }
.ev-demo-vc-h { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ev-muted); }
.ev-demo-vc-h--pos { color: #4ade80; }
.ev-demo-vc-h--neg { color: #f87171; }
.ev-demo-vc-sentin { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ev-demo-vc-donut { width: 104px; height: 104px; flex: none; transform-origin: 50% 50%; overflow: visible; }
.ev-demo-vc-legend { display: grid; gap: 10px; }
.ev-demo-vc-legend li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: 15px; font-weight: 600; color: #cbd5e1; }
.ev-demo-vc-legend b { color: var(--ev-text); font-weight: 800; }
.ev-demo-vc-legend small { flex-basis: 100%; padding-left: 16px; font-size: 13px; color: var(--ev-muted); }
.ev-demo-vc-dot { width: 10px; height: 10px; border-radius: 50%; }
.ev-demo-vc-dot--pos { background: #22c55e; }
.ev-demo-vc-dot--neg { background: #ef4444; }
.ev-demo-vc-col ul { margin-top: 8px; display: grid; gap: 2px; }
.ev-demo-vc-th { display: grid; grid-template-columns: 16px 1fr 34px 36px 40px; align-items: center; gap: 7px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid transparent; font-size: 14.5px; font-weight: 600; color: #cbd5e1; }
.ev-demo-vc-th .ev-demo-ico { width: 15px; height: 15px; }
.ev-demo-vc-thn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-demo-vc-th b { text-align: right; color: var(--ev-text); font-weight: 800; }
.ev-demo-vc-th small { text-align: right; font-size: 12.5px; color: var(--ev-muted); white-space: nowrap; }
.ev-demo-vc-thbar { position: relative; height: 7px; border-radius: 4px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.ev-demo-vc-thbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transform-origin: 0 50%; }
.ev-demo-vc [data-k="praise"] .ev-demo-ico { color: #4ade80; }
.ev-demo-vc [data-k="praise"] .ev-demo-vc-thbar i { background: #22c55e; }
.ev-demo-vc [data-k="probs"] .ev-demo-ico { color: #f87171; }
.ev-demo-vc [data-k="probs"] .ev-demo-vc-thbar i { background: #ef4444; }
.ev-demo-vc-th.ev-demo-hl { background: rgba(239, 68, 68, 0.08); }
.ev-demo-vc-base { display: block; margin-top: 8px; padding-left: 6px; font-size: 13px; font-weight: 600; color: var(--ev-subtle); }
.ev-demo-vc-action { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; padding: 13px 16px; border-radius: 13px; border: 1px solid rgba(96, 165, 250, 0.35); background: rgba(59, 130, 246, 0.07); }
.ev-demo-vc-bulb { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.ev-demo-vc-bulb .ev-demo-ico { width: 22px; height: 22px; }
.ev-demo-vc-action b { display: block; margin-top: 3px; font-size: 18px; font-weight: 800; }
.ev-demo-vc-action small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-vc-prod--small { margin-top: 12px; padding: 10px 18px; }
.ev-demo-vc-prod--small .ev-demo-vc-thumb { width: 42px; height: 42px; }
.ev-demo-vc-prod--small .ev-demo-vc-pinfo b { margin-top: 0; font-size: 16px; color: #cbd5e1; }
.ev-demo-vc-prod--small .ev-demo-vc-count b { font-size: 17px; }
.ev-demo-vc-prod--small .ev-demo-st .ev-demo-ico { width: 14px; height: 14px; }

.ev-demo--m .ev-demo-vc-prod { grid-template-columns: 38px 1fr auto; gap: 9px; padding: 8px 10px; }
.ev-demo--m .ev-demo-vc-thumb { width: 38px; height: 38px; border-radius: 9px; }
.ev-demo--m .ev-demo-vc-thumb .ev-demo-ico { width: 18px; height: 18px; }
.ev-demo--m .ev-demo-vc-chips { display: none; }
.ev-demo--m .ev-demo-vc-pinfo b { margin-top: 0; font-size: 13.5px; }
.ev-demo--m .ev-demo-vc-prod > .ev-demo-vc-count { display: none; }
.ev-demo--m .ev-demo-vc-open { height: 30px !important; padding: 0 9px !important; font-size: 12px !important; }
.ev-demo--m .ev-demo-vc-an { height: auto; margin-top: 8px; padding: 0 9px 9px; border-radius: 12px; }
.ev-demo--m .ev-demo-vc-tabs { gap: 14px; padding-top: 8px; font-size: 12px; }
.ev-demo--m .ev-demo-vc-tab { padding-bottom: 6px; }
.ev-demo--m .ev-demo-vc-cols { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.ev-demo--m .ev-demo-vc-col { padding: 6px 7px; }
.ev-demo--m .ev-demo-vc-h { font-size: 11.5px; }
.ev-demo--m .ev-demo-vc-sentin { margin-top: 6px; gap: 12px; }
.ev-demo--m .ev-demo-vc-donut { width: 70px; height: 70px; }
.ev-demo--m .ev-demo-vc-legend { gap: 5px; }
.ev-demo--m .ev-demo-vc-legend li { font-size: 13px; }
.ev-demo--m .ev-demo-vc-legend small { font-size: 11.5px; }
.ev-demo--m .ev-demo-vc-col ul { margin-top: 5px; }
.ev-demo--m .ev-demo-vc-th { grid-template-columns: 14px 1fr 70px 34px 40px; height: 24px; font-size: 12.5px; padding: 0 4px; }
.ev-demo--m .ev-demo-vc-th .ev-demo-ico { width: 13px; height: 13px; }
.ev-demo--m .ev-demo-vc-th small { font-size: 11px; }
.ev-demo--m .ev-demo-vc-base { margin-top: 4px; font-size: 11px; }
.ev-demo--m .ev-demo-vc-action { gap: 9px; margin-top: 6px; padding: 8px 9px; border-radius: 10px; }
.ev-demo--m .ev-demo-vc-bulb { width: 30px; height: 30px; border-radius: 8px; }
.ev-demo--m .ev-demo-vc-bulb .ev-demo-ico { width: 16px; height: 16px; }
.ev-demo--m .ev-demo-vc-action b { font-size: 13.5px; }
.ev-demo--m .ev-demo-vc-action small { font-size: 11.5px; }
.ev-demo--m .ev-demo-vc-prod--small { grid-template-columns: 30px 1fr; margin-top: 8px; padding: 7px 10px; row-gap: 4px; }
.ev-demo--m .ev-demo-vc-prod--small .ev-demo-vc-thumb { width: 30px; height: 30px; grid-row: span 2; }
.ev-demo--m .ev-demo-vc-prod--small .ev-demo-vc-pinfo b { font-size: 12.5px; }
.ev-demo--m .ev-demo-vc-prod--small .ev-demo-vc-count { display: none; }
.ev-demo--m .ev-demo-vc-prod--small .ev-demo-st { font-size: 11px; padding: 2px 7px; justify-self: start; }

/* ---------- Cena 07 · Vision ---------- */
.ev-demo--d .ev-demo-s-vision-chat .ev-demo-plane { left: 486px; width: 674px; height: 664px; }
.ev-demo-s-vision-chat .ev-demo-plane {
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.97), rgba(17, 27, 48, 0.97));
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 93%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 93%, rgba(0, 0, 0, 0) 100%);
}
.ev-demo-vx { display: flex; flex-direction: column; }
.ev-demo-vx-orb { z-index: 0; }
.ev-demo-vx-head { flex: none; }
.ev-demo-vx-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ev-demo-vx-id b { display: block; font-size: 19px; font-weight: 800; }
.ev-demo-vx-id span { display: block; font-size: 14px; font-weight: 600; color: var(--ev-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-demo-vx-mini { width: 42px; height: 42px; flex: none; }
.ev-demo-vx-msgs { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 20px 24px 0; }
.ev-demo-vx-feed { position: relative; }
.ev-demo-vx-bubble { width: fit-content; max-width: 70%; margin-left: auto; padding: 12px 18px; border-radius: 18px 18px 5px 18px; background: rgba(243, 146, 19, 0.16); border: 1px solid rgba(243, 146, 19, 0.42); font-size: 18px; font-weight: 700; opacity: 0; }
.ev-demo-vx-replyslot { display: grid; margin-top: 14px; }
.ev-demo-vx-replyslot > * { grid-area: 1 / 1; align-self: start; }
.ev-demo-vx-status { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ev-muted); opacity: 0; }
.ev-demo-vx-status i { font-style: normal; font-weight: 800; color: var(--ev-brand); }
.ev-demo-vx-tiny { width: 28px; height: 28px; margin-right: 2px; }
.ev-demo-vx-answer { padding: 13px 16px; border-radius: 5px 18px 18px 18px; background: rgba(10, 18, 36, 0.7); border: 1px solid var(--ev-border-strong); opacity: 0; }
.ev-demo-vx-who { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ev-brand-sel-text); }
.ev-demo-vx-answer p { margin-top: 3px; font-size: 17px; line-height: 1.45; font-weight: 600; color: #e2e8f0; }
.ev-demo-vx-prios { display: grid; gap: 8px; margin-top: 12px; padding: 5px; border-radius: 15px; border: 1px solid transparent; }
.ev-demo-vx-prio { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(8, 14, 28, 0.7); border: 1px solid var(--ev-border-strong); opacity: 0; }
.ev-demo-vx-prio .ev-demo-vx-n { display: grid; margin: 0; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ev-brand); color: #fff; font-size: 15px; font-weight: 800; }
.ev-demo-vx-prio b { display: block; font-size: 17px; font-weight: 800; }
.ev-demo-vx-prio div span { display: block; margin-top: 1px; font-size: 15px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-vx-prio .ev-demo-vx-link { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ev-brand-sel-text); white-space: nowrap; }
.ev-demo-vx-link .ev-demo-ico { width: 15px; height: 15px; }
.ev-demo-vx-action { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.35); opacity: 0; }
.ev-demo-vx-atag { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #4ade80; }
.ev-demo-vx-atag .ev-demo-ico { width: 16px; height: 16px; }
.ev-demo-vx-action > b { display: block; margin-top: 6px; font-size: 17px; font-weight: 800; line-height: 1.35; }
.ev-demo-vx-abtns { display: flex; gap: 10px; margin-top: 12px; }
.ev-demo-vx-abtns .ev-demo-btn { height: 42px; font-size: 15px; padding: 0 18px; }
.ev-demo-vx-abtns .ev-demo-ico { width: 17px; height: 17px; }
.ev-demo-vx-rev--on { background: var(--ev-brand-sel-bg) !important; border-color: var(--ev-brand) !important; color: var(--ev-brand-sel-text) !important; }
.ev-demo-vx-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; opacity: 0; }
.ev-demo-vx-review .ev-demo-st { font-size: 13.5px; }
.ev-demo-vx-review small { flex-basis: 100%; font-size: 13.5px; font-weight: 600; color: var(--ev-muted); }
.ev-demo-vx-inputbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 24px 6px; }
.ev-demo-vx-input { flex: 1; border-radius: 26px; padding: 0 20px; }
.ev-demo-vx-send { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ev-brand); color: #fff; }
.ev-demo-vx-send .ev-demo-ico { width: 21px; height: 21px; }
.ev-demo-vx-foot { flex: none; padding: 4px 0 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ev-subtle); }

.ev-demo--m .ev-demo-s-vision-chat .ev-demo-plane {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 95%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 95%, rgba(0, 0, 0, 0) 100%);
}
.ev-demo--m .ev-demo-vx-id { gap: 8px; }
.ev-demo--m .ev-demo-vx-mini { width: 28px; height: 28px; }
.ev-demo--m .ev-demo-vx-id b { font-size: 14px; }
.ev-demo--m .ev-demo-vx-id span { font-size: 11px; max-width: 150px; }
.ev-demo--m .ev-demo-vx-msgs { padding: 10px 12px 0; }
.ev-demo--m .ev-demo-vx-bubble { font-size: 14px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; }
.ev-demo--m .ev-demo-vx-replyslot { margin-top: 8px; }
.ev-demo--m .ev-demo-vx-status { font-size: 13px; gap: 6px; }
.ev-demo--m .ev-demo-vx-tiny { width: 20px; height: 20px; }
.ev-demo--m .ev-demo-vx-answer { padding: 8px 11px; border-radius: 4px 14px 14px 14px; }
.ev-demo--m .ev-demo-vx-who { font-size: 11px; }
.ev-demo--m .ev-demo-vx-answer p { font-size: 13.5px; line-height: 1.38; }
.ev-demo--m .ev-demo-vx-prios { gap: 5px; margin-top: 8px; padding: 3px; }
.ev-demo--m .ev-demo-vx-prio { grid-template-columns: 24px 1fr; gap: 8px; padding: 7px 9px; row-gap: 2px; }
.ev-demo--m .ev-demo-vx-prio .ev-demo-vx-n { width: 22px; height: 22px; font-size: 12px; }
.ev-demo--m .ev-demo-vx-prio b { font-size: 13.5px; }
.ev-demo--m .ev-demo-vx-prio div span { font-size: 12px; }
.ev-demo--m .ev-demo-vx-prio .ev-demo-vx-link { grid-column: 2; font-size: 12px; }
.ev-demo--m .ev-demo-vx-link .ev-demo-ico { width: 12px; height: 12px; }
.ev-demo--m .ev-demo-vx-action { margin-top: 8px; padding: 9px 11px; border-radius: 12px; }
.ev-demo--m .ev-demo-vx-atag { font-size: 11px; gap: 5px; }
.ev-demo--m .ev-demo-vx-atag .ev-demo-ico { width: 13px; height: 13px; }
.ev-demo--m .ev-demo-vx-action > b { font-size: 13.5px; margin-top: 4px; }
.ev-demo--m .ev-demo-vx-abtns { gap: 6px; margin-top: 8px; }
.ev-demo--m .ev-demo-vx-abtns .ev-demo-btn { height: 30px; font-size: 12px; padding: 0 10px; }
.ev-demo--m .ev-demo-vx-abtns .ev-demo-ico { width: 13px; height: 13px; }
.ev-demo--m .ev-demo-vx-review { gap: 5px; margin-top: 7px; }
.ev-demo--m .ev-demo-vx-review .ev-demo-st { font-size: 11px; padding: 2px 7px; }
.ev-demo--m .ev-demo-vx-review small { font-size: 11.5px; }
.ev-demo--m .ev-demo-vx-inputbar { padding: 7px 12px 9px; gap: 7px; }
.ev-demo--m .ev-demo-vx-input { border-radius: 20px; padding: 0 14px; }
.ev-demo--m .ev-demo-vx-send { width: 38px; height: 38px; }
.ev-demo--m .ev-demo-vx-send .ev-demo-ico { width: 16px; height: 16px; }
.ev-demo--m .ev-demo-vx-foot { display: none; }

/* Instructional demos fit the available height; the live scene is reused in the viewer. */
.ev-presentation-button,.ev-presentation-controls button{border:1px solid #334155;border-radius:8px;background:#101827;color:#e2e8f0;padding:10px 14px;cursor:pointer;font:inherit}
.ev-presentation-button:focus-visible,.ev-presentation-controls button:focus-visible{outline:2px solid #ffae28;outline-offset:3px}
.ev-presentation{box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:20px;background:#060a10;color:#e2e8f0;overflow:hidden}
.ev-presentation::backdrop{background:#060a10}
.ev-presentation .ev-scene-slot{margin:16px auto 0;max-height:none}
.ev-presentation-controls{display:flex;justify-content:flex-end;gap:12px;height:44px}
.ev-feature-demo .ev-scene-slot{margin-inline:auto}