/* ==========================================================================
   TELA 10 — Sucesso em tela cheia (fora do split). Palco escuro com grid de
   pontos (mesmo tratamento visual da banda, estático) + card claro central
   com a animação de radar (Figma 642-16874) e o conteúdo da tela.
   O escopo escuro do palco (.success-stage-bg) vive em tokens.css, junto do
   da banda. O card NÃO herda o escuro: fica fora do escopo, em :root light.
   ========================================================================== */
.success-stage {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  overflow-y: auto; padding: 24px;
}
/* Fundo fixo (não rola com o card em telas baixas): cor + pontos + vinheta.
   Grid na mesma métrica do DotGrid da banda (dot 4px, gap 24px → célula 28). */
.success-stage-bg {
  position: fixed; inset: 0; pointer-events: none;
  background-color: var(--background);
  background-image: radial-gradient(circle, var(--dot-base) 2px, transparent 2.5px);
  background-size: 28px 28px;
  background-position: center;
}
.success-stage-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%,
    var(--background) 0 12%,
    color-mix(in oklch, var(--background) 55%, transparent) 28%,
    transparent 48%);
}

.success-card {
  position: relative; width: min(480px, 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); padding: 28px 32px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  text-align: center; outline: none;
  animation: it-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 639px) { .success-card { padding: 24px 20px; } }

/* Informativo da primeira coleta — a badge de status vem de app.css (mesmo
   componente do dashboard, mesma semântica). Texto volta à esquerda: é
   leitura corrida dentro do card centrado. */
.success-info {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); padding: 14px 16px; margin: 4px 0 20px;
  text-align: left;
}
.success-info-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.success-info-top b { display: block; font-size: 0.875rem; font-weight: 600; }
.success-info-when {
  display: block; margin-top: 2px;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.success-info-when .mono { font-size: 0.75rem; }
.success-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground);
}

/* ==========================================================================
   Radar — camadas do Figma (Anel interno/externo · Varredura · Massa · Nó
   solto · Bip 1/2). Ciclo único de 4,5 s: a varredura dá a volta completa
   (80°/s, a velocidade angular do Figma), o nó solto acende quando ela passa
   por ele (t=0) e dois bips expandem e desvanecem na sequência. O bloco
   prefers-reduced-motion global (app.css) congela tudo no estado de repouso.
   ========================================================================== */
.radar { position: relative; width: 220px; height: 220px; margin: 0 auto 8px; }

/* Halo difuso — pulso suave atrás do símbolo. */
.radar-glow {
  position: absolute; inset: 24px; border-radius: 999px;
  background: radial-gradient(closest-side,
    color-mix(in oklch, var(--brand-fill) 24%, transparent), transparent 72%);
  animation: radar-glow 4.5s ease-in-out infinite;
}
/* Varredura: cone difuso girando. O `from 46deg` deixa a borda quente sobre o
   nó solto (~134° do norte) em t=0 — é o "toque" que dispara nó e bips. */
.radar-sweep {
  position: absolute; inset: 47px; border-radius: 999px;
  background: conic-gradient(from 46deg,
    transparent 0deg,
    color-mix(in oklch, var(--brand-fill) 32%, transparent) 88deg,
    transparent 92deg);
  filter: blur(6px);
  animation: radar-sweep 4.5s linear infinite;
}
/* Anéis pontilhados concêntricos (proporções do Figma: 63/113px em 220). */
.radar-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-rings circle {
  stroke: color-mix(in oklch, var(--brand-fill) 45%, transparent);
  stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round;
}
.radar-rings circle:last-child {
  stroke: color-mix(in oklch, var(--brand-fill) 40%, transparent);
}

.radar-glyph { position: absolute; inset: 0; margin: auto; overflow: visible; }
/* Nó solto: aceso (scale 1.18, opacity 1) enquanto a varredura passa, decai
   ao repouso translúcido — frações do Figma remapeadas ao ciclo de 4,5 s. */
.radar-node {
  transform-box: fill-box; transform-origin: center;
  animation: radar-node 4.5s linear infinite;
}
/* Bips: eco do nó — anel fino que expande 2.4× e some. O segundo, defasado. */
.radar-bip {
  fill: none; stroke: var(--foreground); stroke-width: 0.75; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: radar-bip 4.5s linear infinite;
}
.radar-bip-2 { animation-delay: 0.14s; }

@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes radar-glow {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes radar-node {
  0%, 8% { opacity: 1; transform: scale(1.18); animation-timing-function: ease-out; }
  20%, 100% { opacity: 0.28; transform: scale(1); }
}
@keyframes radar-bip {
  0%, 8% { opacity: 0.55; transform: scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  25%, 100% { opacity: 0; transform: scale(2.4); }
}