<user_query>
ola , esyou achando o precssso do wizzard meio quebrado em termos de visualizazavo , tive feefbacks nao posiotivos de ususuoiaos leiogos que acharam meo  confuso e que em, algum momentos nao sabiao o que fazer , netoa mudei a aboradgaem para an presentar um provesso com o miminmo de ineteracao do usuario ou quae nelhun alem do dados de processo e de negocios . vc sugere uma abordagem, diferente ? tem alguma sugestao ? que  me explicar ?
</user_query>


Roger, vou localizar o wizard no projeto e revisar como o fluxo está hoje para sugerir uma abordagem mais clara.

[REDACTED]

Shell

Check workspace root and contents


[REDACTED]


Roger, olá. Revisei o wizard do **Ligbox Onboard** (`ibytera-mail-portal`) e dá para entender bem o feedback negativo — e também por que a sua mudança para “quase zero interação” faz sentido.

## O que provavelmente confundiu os usuários leigos

Hoje o ecrã expõe **várias camadas de progresso ao mesmo tempo**:

1. Sidebar com 5 passos
2. `WizardProcessHub` (percentagem, relógios, macro-passos, operações do portal, infraestrutura)
3. Banner “Aguardando a sua acção”
4. Checklist lateral do passo
5. Card de infra (Traefik, cert, etc.)
6. Card Resumo

Para um utilizador leigo, isso parece **6 indicadores diferentes** a dizer coisas parecidas mas não iguais. Quando o percentual diz 72% mas o passo DNS ainda pede “Verificar zona”, a sensação é: *“já acabou ou não?”*

O passo **DNS** é o maior ponto de fricção: escolha portal vs externo, nameservers, verificar zona, criar apontamentos, continuar… são **muitas decisões técnicas** num fluxo que deveria ser “quero email corporativo”.

Termos como Traefik, MX/SPF/DMARC, VM112 e certificado LE aumentam a ansiedade, mesmo quando o sistema já tem `computeWizardAttention` a tentar guiar.

---

## A sua abordagem (mínima interação) está correta?

**Sim, na direção certa** — mas eu não iria para *zero* interação. Iria para **interação mínima e obrigatória**.

Há coisas que **não dá para automatizar** sem integração com o registrador (mudar nameservers no GoDaddy, Registro.br, etc.). O utilizador leigo precisa de **uma única tarefa externa clara**, não de um wizard técnico.

Modelo mental ideal:

> “Nós fazemos quase tudo. Só precisamos de 1 ou 2 coisas suas.”

---

## Abordagem que eu sugeriria (diferente do wizard clássico)

Em vez de wizard por passos, usar um **painel de estado único** — quase um “rastreamento de encomenda”:

### 1. Uma pergunta de negócio de cada vez

| Fase | O que o utilizador vê | Interação |
|------|------------------------|-----------|
| 1 | “Confirme o domínio da empresa” | Só domínio + alias (já pré-preenchido do portal) |
| 2 | “Estamos a preparar o DNS” | Nada — sistema cria zona |
| 3 | “Falta uma coisa sua no registrador” | Copiar NS + botão “Já alterei” |
| 4 | “A criar a sua conta de email” | Confirmar email admin (senha já veio do portal) |
| 5 | “A activar o servidor” | Nada — spinner + ETA estimado |

Sem escolher “portal vs externo” no início — **default inteligente**: DNS Ligbox/Cloudflare. Só mostrar caminho externo se detecção falhar ou utilizador avançado pedir.

### 2. Um único indicador de progresso

Substituir sidebar + ring % + checklist + colunas técnicas por:

```
[████████░░░░]  A preparar o email de exuberanti.com.br

Estado actual: A aguardar nameservers no registrador
Próxima acção: Copiar estes 2 endereços → colar no seu registrador
[ Copiar ]  [ Já fiz isto ]
```

Detalhes técnicos (Traefik, operações VM112) ficam em **“Ver detalhes técnicos”** colapsado — para suporte, não para o cliente.

### 3. Linguagem de negócio, não de infra

| Evitar | Preferir |
|--------|----------|
| Traefik + cert | A activar o webmail com segurança |
| Verificar zona Cloudflare | A confirmar que o domínio aponta para nós |
| Criar apontamentos MX/A/SPF | A configurar o email do domínio |
| Infraestrutura pendente | Quase pronto — falta 1 passo no registrador |

### 4. Uma acção primária por ecrã

Já existe lógica para isso em `computeWizardAttention` — o problema é que compete com sidebar, checklist, ProcessHub e botões secundários. A UI deveria mostrar **só o botão que `waitingAction` indica**, escondendo o resto até ser relevante.

### 5. Caminho “concierge” para quem trava

Se após X minutos o NS não propagar, ou se o domínio for DNS externo complexo:

> “Quer que a nossa equipa termine por si?” → abre ticket com contexto (já têm `InfraHelpModal` nessa linha).

---

## Comparativo rápido de abordagens

| Abordagem | Prós | Contras |
|-----------|------|---------|
| **Wizard clássico (actual)** | Controlo total, bom para técnicos | Confuso para leigos, muitas decisões |
| **Zero interação (só dados)** | Simples na teoria | Bloqueia em NS/registrador; utilizador não sabe o que fazer |
| **Status board + 1 acção** *(recomendado)* | Claro, escalável, reutiliza backend | Requer simplificar UI, não só lógica |
| **Concierge total** | Zero stress para leigo | Custo operacional de suporte |

---

## O que eu faria na prática (sem reescrever tudo)

1. **Manter** `WizardProcessHub` e checklist **só para modo suporte/admin**, não para cliente final.
2. **Modo cliente**: ecrã único com 3 blocos — *O que já fizemos* / *O que falta de si* / *Quando fica pronto*.
3. **Auto-avançar** passos quando API confirma (zona pronta → criar DNS automaticamente, sem botão “Criar apontamentos”).
4. **Pré-preencher tudo** do portal (domínio, email, senha via handoff Spec 016) — utilizador só confirma.
5. **Eliminar escolha DNS** no fluxo default; reservar para “Opções avançadas”.

---

## Conclusão

A sua intuição está certa: **menos wizard, mais processo automático**. Eu não mudaria para outra filosofia — mudaria a **forma de apresentar**:

- De: “5 passos + 6 painéis + decisões técnicas”
- Para: “1 fila de activação + no máximo 1 botão visível + linguagem de negócio”

O backend e o `waitingAction` já suportam isso; o ganho maior está na **camada visual**, não na arquitectura.

Se quiser, no próximo passo posso desenhar um wireframe concreto (texto ou componente React) do “modo leigo” reutilizando o que já existe no `App.jsx`, sem quebrar o fluxo técnico para suporte.

[REDACTED]


<user_query>
Vou segir sua linha mas com uma abordagem "quase" tradicional . uma tela  windows , next nest next finish  ..um card do lateral esquerdo com as fases passando e do lado direito corremdo em um backgraound tipco de Tecnologia , os icones correndo explincamdso as fazesem precxsoo ,m o lado de baixo na linha innferior debaido dos icones correndo  o corredo percentual ate a fimnalizacao . O que vc achaa , qual sua poniao , conmsegue criar algi do tipo > tem diuvidas ?
</user_query>


Roger, a direção faz sentido — vou mapear o frontend atual e montar um protótipo desse wizard clássico com painel lateral e animação à direita.

[REDACTED]


Vou montar o layout clássico (fases à esquerda, animação tech à direita, barra em baixo) e integrar no wizard existente.

[REDACTED]

Write

/** Percentual global do onboarding (portal + infra). */

export function computeWizardOverallPercent({
  step,
  completedSteps,
  loading,
  accountCreated,
  infraReady,
  infraStatus,
}) {
  const activationComplete = accountCreated && infraReady
  if (activationComplete) return 100

  const infraSteps = infraStatus?.steps || []
  const infraDone = infraSteps.filter((s) => s.ok).length
  const infraTotal = infraSteps.length
  const wizardDone = completedSteps.filter(Boolean).length

  let p = (Math.min(wizardDone, 4) / 4) * 50
  if (accountCreated) p += 10
  if (infraTotal > 0) p += (infraDone / infraTotal) * 40
  if (loading) p = Math.min(96, p + 6)
  else if (step > 0) p = Math.max(p, 8)
  if (accountCreated && !infraReady) p = Math.min(Math.round(p), 92)

  return Math.round(Math.min(99, p))
}

import { useMemo } from 'react'
import { motion } from 'framer-motion'
import {
  Globe,
  Network,
  UserRound,
  ShieldCheck,
  Mail,
  CheckCircle2,
  Loader2,
} from 'lucide-react'
import { BUSY_PHASES } from './busyPhases'

const PHASES = [
  {
    label: 'Domínio',
    title: 'Domínio da empresa',
    detail: 'Identificamos o endereço do seu email corporativo.',
    Icon: Globe,
  },
  {
    label: 'DNS',
    title: 'Configuração de rede',
    detail: 'Preparamos os apontamentos para enviar e receber email.',
    Icon: Network,
  },
  {
    label: 'Conta admin',
    title: 'Administrador',
    detail: 'Definimos quem gere o email da empresa.',
    Icon: UserRound,
  },
  {
    label: 'Confirmação',
    title: 'Revisão final',
    detail: 'Confirmamos tudo antes de activar no servidor.',
    Icon: ShieldCheck,
  },
  {
    label: 'Concluído',
    title: 'Email activo',
    detail: 'O webmail fica pronto para usar.',
    Icon: Mail,
  },
]

function phaseState(index, step, completedSteps, accountCreated, infraReady) {
  if (index === 4) {
    if (accountCreated && infraReady) return 'done'
    if (accountCreated) return 'pending'
    if (index === step) return 'active'
    return 'pending'
  }
  if (completedSteps[index]) return 'done'
  if (index === step) return 'active'
  if (index < step) return 'done'
  return 'pending'
}

export default function WizardClassicLayout({
  steps = PHASES.map((p) => p.label),
  step,
  completedSteps,
  overallPercent,
  domain,
  companyName,
  loading,
  busyPhase,
  accountCreated = false,
  infraReady = false,
  children,
  footer,
}) {
  const activePhase = PHASES[Math.min(step, PHASES.length - 1)]
  const busyLabel = loading
    ? BUSY_PHASES[busyPhase]?.label || BUSY_PHASES.processing.label
    : null

  const phaseStates = useMemo(
    () =>
      PHASES.map((_, i) =>
        phaseState(i, step, completedSteps, accountCreated, infraReady)
      ),
    [step, completedSteps, accountCreated, infraReady]
  )

  const displayDomain = domain?.trim() || 'empresa.com.br'
  const displayCompany = companyName || 'sua empresa'

  return (

            Ligbox Onboard
            powered by Ibytera

            {steps.map((label, i) => {
              const state = phaseStates[i]
              const isActive = state === 'active'
              const isDone = state === 'done'
              const isPendingInfra = i === 4 && accountCreated && !infraReady

              return (
                <li
                  key={label}
                  className={`wcl__step wcl__step--${state}${isPendingInfra ? ' wcl__step--warn' : ''}`}
                  aria-current={isActive ? 'step' : undefined}
                >

                    {isDone ? (
                      <CheckCircle2 size={14} strokeWidth={2.5} />
                    ) : isPendingInfra ? (
                      '!'
                    ) : (
                      i + 1
                    )}

                  {label}

              )
            })}

{children}

          {footer && {footer}}

A activar email corporativo

{displayCompany}

{displayDomain}

              Fase actual
              {activePhase.title}

{busyLabel || activePhase.detail}

              <motion.div
                className="wcl__conveyor"
                animate={loading ? { x: ['0%', '-50%'] } : { x: '0%' }}
                transition={
                  loading
                    ? { duration: 14, repeat: Infinity, ease: 'linear' }
                    : { duration: 0.4 }
                }
              >
                {[...PHASES, ...PHASES].map((phase, i) => {
                  const realIndex = i % PHASES.length
                  const state = phaseStates[realIndex]
                  const Icon = phase.Icon
                  return (
                    <div
                      key={`${phase.label}-${i}`}
                      className={`wcl__icon-card wcl__icon-card--${state}`}
                    >

                        {state === 'active' && loading ? (
                          <Loader2 className="wcl-spin" size={28} strokeWidth={2} />
                        ) : (
                          <Icon size={28} strokeWidth={1.75} />
                        )}

                      {phase.label}

                  )
                })}
              </motion.div>

                Progresso geral
                {overallPercent}%

                <motion.div
                  className={`wcl__progress-fill${loading ? ' wcl__progress-fill--live' : ''}`}
                  animate={{ width: `${overallPercent}%` }}
                  transition={{ duration: 0.45, ease: 'easeOut' }}
                />

                {overallPercent >= 100
                  ? 'Processo concluído — webmail pronto.'
                  : loading
                    ? 'A processar no servidor… pode demorar alguns minutos.'
                    : 'Avance com «Próximo» quando estiver pronto.'}

  )
}


[REDACTED]

StrReplace

.pwd-reveal-auth__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.pwd-reveal-auth__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

/* —— Wizard clássico (Windows-style: fases + painel tech) —— */
.wizard-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

.wcl__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
  min-height: min(78vh, 720px);
}

.wcl__left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.1rem 1.15rem 1rem;
}

.wcl__brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 1rem;
}

.wcl__brand strong {
  color: var(--accent);
  font-size: 0.95rem;
}

.wcl__brand span {
  font-size: 0.65rem;
  color: var(--muted);
}

.wcl__steps {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wcl__step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  border: 1px solid transparent;
}

.wcl__step--active {
  color: var(--accent);
  font-weight: 700;
  background: rgba(92, 46, 46, 0.06);
  border-color: rgba(92, 46, 46, 0.14);
}

.wcl__step--done {
  color: var(--ok);
}

.wcl__step--warn {
  color: #b45309;
}

.wcl__step-badge {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: #ece6dc;
  color: #6b6560;
  flex-shrink: 0;
}

.wcl__step--active .wcl__step-badge {
  background: var(--accent);
  color: #fff;
}

.wcl__step--done .wcl__step-badge {
  background: var(--ok);
  color: #fff;
}

.wcl__step--warn .wcl__step-badge {
  background: #f59e0b;
  color: #fff;
}

.wcl__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.wcl__content h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.wcl__content .sub {
  margin-top: 0;
}

.wcl__footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.wcl__right {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.wcl__tech-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.18), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.2), transparent 45%),
    linear-gradient(145deg, #0b1224 0%, #111827 45%, #0f172a 100%);
}

.wcl__grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.25) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 95%);
}

.wcl__glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.35;
}

.wcl__glow--a {
  top: -40px;
  right: -20px;
  background: #38bdf8;
}

.wcl__glow--b {
  bottom: -60px;
  left: -10px;
  background: #818cf8;
}

.wcl__scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.015) 3px,
    rgba(255, 255, 255, 0.015) 4px
  );
  pointer-events: none;
}

.wcl__right-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.2rem 1.1rem;
  color: #e2e8f0;
}

.wcl__right-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.wcl__right-title {
  margin: 0.35rem 0 0;
  font-size: 1.45rem;
  color: #f8fafc;
}

.wcl__right-domain {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: #7dd3fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wcl__phase-caption {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.wcl__phase-kicker {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}

.wcl__phase-caption strong {
  display: block;
  font-size: 1rem;
  color: #f1f5f9;
}

.wcl__phase-caption p {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.wcl__conveyor-wrap {
  margin-top: auto;
  overflow: hidden;
  padding: 1rem 0 0.35rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wcl__conveyor {
  display: flex;
  gap: 0.85rem;
  width: max-content;
}

.wcl__icon-card {
  width: 92px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.45;
  transform: scale(0.92);
  transition: opacity 0.25s, transform 0.25s;
}

.wcl__icon-card--active {
  opacity: 1;
  transform: scale(1);
}

.wcl__icon-card--done {
  opacity: 0.72;
}

.wcl__icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.wcl__icon-card--active .wcl__icon-ring {
  border-color: rgba(56, 189, 248, 0.65);
  color: #7dd3fc;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.35),
    0 0 24px rgba(56, 189, 248, 0.25);
}

.wcl__icon-card--done .wcl__icon-ring {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.wcl__icon-label {
  font-size: 0.72rem;
  text-align: center;
  color: #cbd5e1;
}

.wcl__progress-block {
  margin-top: 0.65rem;
}

.wcl__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}

.wcl__progress-meta strong {
  color: #f8fafc;
  font-size: 0.95rem;
}

.wcl__progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.wcl__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #818cf8 55%, #34d399);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

.wcl__progress-fill--live {
  position: relative;
}

.wcl__progress-fill--live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: wcl-shimmer 1.4s linear infinite;
}

@keyframes wcl-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.wcl__progress-hint {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.4;
}

.wcl-spin {
  animation: wph-spin 0.9s linear infinite;
}

.wizard-page__secondary {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.wizard-page__secondary.cols-2 {
  grid-template-columns: minmax(0, 1fr) 220px;
}

@media (max-width: 960px) {
  .wcl__shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .wcl__right {
    min-height: 320px;
  }

  .wizard-page__secondary.cols-2 {
    grid-template-columns: 1fr;
  }
}


Agora integro o layout clássico no `App.jsx`.

[REDACTED]

import { WizardProcessHub } from './WizardProcessHub'
import WizardAttentionBanner from './WizardAttentionBanner'

import WizardClassicLayout from './WizardClassicLayout'
import WizardAttentionBanner from './WizardAttentionBanner'
import { computeWizardOverallPercent } from './wizardProgress'

  const finishComplete = fullyActivated
  const waitingAction = useMemo(

  const finishComplete = fullyActivated
  const overallPercent = useMemo(
    () =>
      computeWizardOverallPercent({
        step,
        completedSteps,
        loading,
        accountCreated,
        infraReady,
        infraStatus,
      }),
    [step, completedSteps, loading, accountCreated, infraReady, infraStatus]
  )
  const waitingAction = useMemo(

return (

          Ligbox Onboard
          powered by Ibytera

          {STEPS.map((label, i) => (

                {completedSteps[i] ? (

                    ✓

                ) : i === 4 && accountCreated && !infraReady ? (

                    !

                ) : (
                  {i + 1}
                )}
                {label}

          ))}

        <WizardProcessHub
          step={step}
          completedSteps={completedSteps}
          loading={loading}
          busyPhase={busyPhase}
          busySince={busySince}
          infraStatus={infraStatus}
          domain={domain}
          pipelineOps={pipelineOps}
          sessionStartedAt={sessionStartedAt}
          waitingAction={waitingAction}
          accountCreated={accountCreated}
          infraReady={infraReady}
        />
        <div className={`workspace-cards ${cardsRowClass}`}>

{wizardTitle}

{wizardSub}

return (

      <WizardClassicLayout
        steps={STEPS}
        step={step}
        completedSteps={completedSteps}
        overallPercent={overallPercent}
        domain={domain}
        companyName={companyName}
        loading={loading}
        busyPhase={busyPhase}
        accountCreated={accountCreated}
        infraReady={infraReady}
        footer={
          step <= 3 && !showFinish ? (
            <WizardStepNav
              onBack={wizardGoBack}
              onCancel={cancelWizard}
              backDisabled={step === 0 || loading}
              cancelDisabled={loading}
            >
              {step === 0 && (
                <ActionDoneButton
                  done={actionsDone.continueDomain}
                  label="Próximo"
                  disabled={loading || !domain}
                  busy={loading && !actionsDone.continueDomain}
                  onClick={loadDnsStep}
                  attention={isAttention('continueDomain')}
                  attentionId="continueDomain"
                />
              )}
              {step === 1 && (
                <ActionDoneButton
                  done={actionsDone.continueFromDns}
                  label="Próximo"
                  disabled={
                    loading ||
                    actionsDone.continueFromDns ||
                    !dnsChoice ||
                    (dnsChoice === 'portal' && !portalDnsApplied && !verification?.ready) ||
                    (dnsChoice === 'external' && !actionsDone.verifyDns)
                  }
                  busy={loading && !actionsDone.continueFromDns}
                  onClick={continueFromDns}
                  attention={isAttention('continueFromDns')}
                  attentionId="continueFromDns"
                />
              )}
              {step === 2 && (
                <ActionDoneButton
                  done={actionsDone.reviewCreate}
                  label="Próximo"
                  disabled={
                    loading ||
                    actionsDone.reviewCreate ||
                    !isAdminPasswordValid(password) ||
                    !localPart?.trim()
                  }
                  busy={loading && !actionsDone.reviewCreate}
                  onClick={goToConfirmation}
                  attention={isAttention('reviewCreate')}
                  attentionId="reviewCreate"
                />
              )}
              {step === 3 && (
                <ActionDoneButton
                  done={actionsDone.createAccount}
                  label="Concluir"
                  disabled={loading || actionsDone.createAccount}
                  busy={loading && !actionsDone.createAccount}
                  onClick={createAccount}
                  attention={isAttention('createAccount')}
                  attentionId="createAccount"
                />
              )}
            </WizardStepNav>
          ) : null
        }
      >

{wizardTitle}

{wizardSub}


[REDACTED]

          )}

          {showFinish && (

          )}

          {step <= 3 && !showFinish && (
            <WizardStepNav
              onBack={wizardGoBack}
              onCancel={cancelWizard}
              backDisabled={step === 0 || loading}
              cancelDisabled={loading}
            >
              {step === 0 && (
                <ActionDoneButton
                  done={actionsDone.continueDomain}
                  label="Continuar"
                  disabled={loading || !domain}
                  busy={loading && !actionsDone.continueDomain}
                  onClick={loadDnsStep}
                  attention={isAttention('continueDomain')}
                  attentionId="continueDomain"
                />
              )}
              {step === 1 && (
                <ActionDoneButton
                  done={actionsDone.continueFromDns}
                  label="Continuar"
                  disabled={
                    loading ||
                    actionsDone.continueFromDns ||
                    !dnsChoice ||
                    (dnsChoice === 'portal' && !portalDnsApplied && !verification?.ready) ||
                    (dnsChoice === 'external' && !actionsDone.verifyDns)
                  }
                  busy={loading && !actionsDone.continueFromDns}
                  onClick={continueFromDns}
                  attention={isAttention('continueFromDns')}
                  attentionId="continueFromDns"
                />
              )}
              {step === 2 && (
                <ActionDoneButton
                  done={actionsDone.reviewCreate}
                  label="Continuar"
                  disabled={
                    loading ||
                    actionsDone.reviewCreate ||
                    !isAdminPasswordValid(password) ||
                    !localPart?.trim()
                  }
                  busy={loading && !actionsDone.reviewCreate}
                  onClick={goToConfirmation}
                  attention={isAttention('reviewCreate')}
                  attentionId="reviewCreate"
                />
              )}
              {step === 3 && (
                <ActionDoneButton
                  done={actionsDone.createAccount}
                  label="Continuar"
                  disabled={loading || actionsDone.createAccount}
                  disabled={loading || actionsDone.createAccount}
                  onClick={createAccount}
                  attention={isAttention('createAccount')}
                  attentionId="createAccount"
                />
              )}
            </WizardStepNav>
          )}

          {showFinish && (


[REDACTED]

          )}

          {showFinish && (
            <>
              {finish.needs_review ? (

          )}

          {step <= 3 && !showFinish && (
            <WizardStepNav
              onBack={wizardGoBack}
              onCancel={cancelWizard}
              backDisabled={step === 0 || loading}
              cancelDisabled={loading}
            >
              {step === 0 && (
                <ActionDoneButton
                  done={actionsDone.continueDomain}
                  label="Continuar"
                  disabled={loading || !domain}
                  busy={loading && !actionsDone.continueDomain}
                  onClick={loadDnsStep}
                  attention={isAttention('continueDomain')}
                  attentionId="continueDomain"
                />
              )}
              {step === 1 && (
                <ActionDoneButton
                  done={actionsDone.continueFromDns}
                  label="Continuar"
                  disabled={
                    loading ||
                    actionsDone.continueFromDns ||
                    !dnsChoice ||
                    (dnsChoice === 'portal' && !portalDnsApplied && !verification?.ready) ||
                    (dnsChoice === 'external' && !actionsDone.verifyDns)
                  }
                  busy={loading && !actionsDone.continueFromDns}
                  onClick={continueFromDns}
                  attention={isAttention('continueFromDns')}
                  attentionId="continueFromDns"
                />
              )}
              {step === 2 && (
                <ActionDoneButton
                  done={actionsDone.reviewCreate}
                  label="Continuar"
                  disabled={
                    loading ||
                    actionsDone.reviewCreate ||
                    !isAdminPasswordValid(password) ||
                    !localPart?.trim()
                  }
                  busy={loading && !actionsDone.reviewCreate}
                  onClick={goToConfirmation}
                  attention={isAttention('reviewCreate')}
                  attentionId="reviewCreate"
                />
              )}
              {step === 3 && (
                <ActionDoneButton
                  done={actionsDone.createAccount}
                  label="Continuar"
                  disabled={loading || actionsDone.createAccount}
                  busy={loading && !actionsDone.createAccount}
                  onClick={createAccount}
                  attention={isAttention('createAccount')}
                  attentionId="createAccount"
                />
              )}
            </WizardStepNav>
          )}

          {showFinish && (
            <>
              {finish.needs_review ? (

)}

      </WizardClassicLayout>

      <div className={`wizard-page__secondary ${showInfra ? 'cols-2' : ''}`}>
          {showInfra && (

Infraestrutura

              <InfraPipeline
                domain={domain}
                infraStatus={infraStatus}
                loading={loading}
                infraDone={actionsDone.infraProvision || infraStatus?.ready}
                refreshDone={actionsDone.infraRefresh}
                onRefresh={refreshInfra}
                onProvision={provisionInfra}
              />

          )}

        <WizardStepChecklist checklist={stepChecklist} />

)}

          {showInfra && (

Infraestrutura

              <InfraPipeline
                domain={domain}
                infraStatus={infraStatus}
                loading={loading}
                infraDone={actionsDone.infraProvision || infraStatus?.ready}
                refreshDone={actionsDone.infraRefresh}
                onRefresh={refreshInfra}
                onProvision={provisionInfra}
              />

          )}

        <WizardStepChecklist checklist={stepChecklist} />

        <SessionSupportBar sessionId={sessionId} />
          </aside>
      </div>

        <details className="card terminal-panel" open={step > 0}>

        <SessionSupportBar sessionId={sessionId} />
          </aside>
        </div>

        <details className="card terminal-panel" open={step > 0}>

          </div>
        </details>

      <InfraHelpModal

          </div>
        </details>
      </div>

      <InfraHelpModal


[REDACTED]

Shell

cd /root/workspace/projects/ibytera-mail-portal/frontend && npm run build 2>&1

Build frontend to verify JSX compiles


Roger, a sua ideia é **muito boa** — é o ponto certo entre familiaridade (wizard clássico) e modernidade (painel tech animado). Resumo da minha opinião e do que já montei.

## Minha opinião

**O que funciona bem na sua proposta:**

| Elemento | Por quê |
|----------|---------|
| Card esquerdo com fases | Padrão que todo mundo reconhece (instalador Windows) |
| Painel direito “tech” | Dá sensação de “algo a acontecer” sem expor jargão técnico |
| Ícones em movimento | Reduz ansiedade durante esperas longas (DNS, certificado) |
| Barra inferior única | Um só percentual — acaba com a confusão de 6 indicadores |

**Cuidados:**

1. **Não animar demais** — o conveyor só deve correr quando `loading`; parado, destaca a fase actual.
2. **Esquerda = acção, direita = status** — o utilizador olha à esquerda para fazer; à direita só para ver progresso.
3. **Manter um único botão primário** — “Próximo” / “Concluir”, não vários “Continuar” espalhados no meio do formulário.

---

## O que criei (protótipo integrado)

Implementei o layout clássico no wizard:

- `WizardClassicLayout.jsx` — layout 2 colunas
- `wizardProgress.js` — percentual unificado
- CSS em `styles.css`
- Integrado em `App.jsx` (build OK)

**Layout:**

```
┌─────────────────────────┬──────────────────────────┐
│  Fases (1→5)            │  Fundo tech (grid + glow) │
│  ─────────────────      │  Fase actual + descrição  │
│  Formulário do passo    │  [🌐][🔗][👤][✓][✉] →→→   │
│  ─────────────────      │  ████████░░░░  72%        │
│  [Anterior] [Próximo]   │                           │
└─────────────────────────┴──────────────────────────┘
        Infra + Resumo + Terminal (abaixo, secundário)
```

**Comportamento:**
- Esquerda: fases numeradas, conteúdo, **Anterior / Próximo / Concluir / Cancelar**
- Direita: fundo azul escuro, ícones das 5 fases em conveyor (animam durante processamento), barra de progresso com shimmer
- Removido o `WizardProcessHub` pesado do topo — progresso concentrado à direita

---

## Dúvidas para refinar (antes de polir)

1. **Paleta do painel direito** — azul/ciano tech está ok, ou prefere alinhar ao castanho/bege da Ligbox?
2. **Conveyor** — prefere loop contínuo ou ícones parados com só a fase actual a pulsar?
3. **Terminal VM112** — mantém em `<details>` abaixo (modo suporte) ou esconde totalmente para leigos?
4. **Card Resumo lateral** — mantém abaixo ou remove no fluxo cliente?
5. **Passo DNS** — mantém escolha “portal vs externo” ou default automático para portal?

---

## Próximo passo

Posso:
- Ajustar cores/velocidade da animação
- Esconder infra/terminal no modo leigo
- Simplificar o passo DNS para “copiar NS + Já fiz”

Quer ver isto no browser com `npm run dev`, ou prefere que eu faça primeiro os ajustes visuais (cores Ligbox, conveyor mais lento)?

[REDACTED]


<user_query>
pa;eta de azul ciano esta legal . asm pode ter um tom de bege da ligbox , pouca coisa , loopcontinuo  Terminal pode seguir com o nOme Ligbox Datacenter - Node VM001 manter card abaixxo  o passo DNS estou em duvida , vamtger que pesquisar no mercado para criar um de meljor apresentacao
</user_query>


Roger, vou aplicar o bege sutil da Ligbox, manter o loop contínuo e renomear o terminal para "Ligbox Datacenter - Node VM001".

[REDACTED]


[REDACTED]

StrReplace

const STEPS = ['Domínio', 'DNS', 'Conta admin', 'Confirmação', 'Concluído']
const DATACENTER_NODE_LABEL = 'Ligbox Datacenter — Node VM001'

const STEPS = ['Domínio', 'DNS', 'Conta admin', 'Confirmação', 'Concluído']

const hints = [
    'Introduza o domínio e clique Próximo — o datacenter regista cada passo em tempo real.',
    'Escolha DNS portal ou externo. Cada botão gera linhas aqui em tempo real.',
    'Preencha a conta (senha 8+) e avance. Depois confirme no passo seguinte.',
    'Revise os dados e clique Concluir.',
    'Processo concluído — verifique ✓ verdes e notificações.',
  ]
  return (
    <div className={`live-status-bar ${last?.level === 'error' ? 'has-error' : ''}`}>
      {loading ? (
        ⏳ A processar no {DATACENTER_NODE_LABEL}…

const hints = [
    'Introduza o domínio e clique Continuar — o terminal regista cada passo na VM112.',
    'Escolha DNS portal ou externo. Cada botão gera linhas aqui em tempo real.',
    'Preencha a conta (senha 8+) e clique «Rever e criar →». Depois «Criar conta agora» no passo seguinte.',
    'Revise os dados e clique «Criar conta agora».',
    'Processo concluído — verifique ✓ verdes e notificações.',
  ]
  return (
    <div className={`live-status-bar ${last?.level === 'error' ? 'has-error' : ''}`}>
      {loading ? (
        ⏳ A processar na VM112…

        <details className="card terminal-panel" open={step > 0}>
          <summary>
            {DATACENTER_NODE_LABEL}

        <details className="card terminal-panel" open={step > 0}>
          <summary>
            Terminal servidor (VM112)

            <div className="wcl__conveyor-wrap">
              <motion.div
                className="wcl__conveyor"
                animate={{ x: ['0%', '-50%'] }}
                transition={{ duration: 22, repeat: Infinity, ease: 'linear' }}
              >

            <div className="wcl__conveyor-wrap">
              <motion.div
                className="wcl__conveyor"
                animate={loading ? { x: ['0%', '-50%'] } : { x: '0%' }}
                transition={
                  loading
                    ? { duration: 14, repeat: Infinity, ease: 'linear' }
                    : { duration: 0.4 }
                }
              >

.wcl__right {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(224, 213, 200, 0.22);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(245, 240, 232, 0.06);
}

.wcl__tech-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 88%, rgba(201, 162, 39, 0.1), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(245, 240, 232, 0.07), transparent 42%),
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.18), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.2), transparent 45%),
    linear-gradient(145deg, #0f1528 0%, #121a2e 42%, #101827 100%);
}

.wcl__right {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.wcl__tech-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.18), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.2), transparent 45%),
    linear-gradient(145deg, #0b1224 0%, #111827 45%, #0f172a 100%);
}

.wcl__glow--b {
  bottom: -60px;
  left: -10px;
  background: #818cf8;
}

.wcl__glow--c {
  bottom: 20%;
  right: 15%;
  width: 180px;
  height: 180px;
  background: #c9a227;
  opacity: 0.18;
}

.wcl__scanline {

.wcl__glow--b {
  bottom: -60px;
  left: -10px;
  background: #818cf8;
}

.wcl__scanline {

.wcl__phase-caption {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(224, 213, 200, 0.16);
  box-shadow: inset 0 1px 0 rgba(245, 240, 232, 0.04);
}

.wcl__phase-caption {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.wcl__icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(224, 213, 200, 0.14);
  color: #cbd5e1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -8px 16px rgba(201, 162, 39, 0.04);
}

.wcl__icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.wcl__progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(224, 213, 200, 0.14);
  overflow: hidden;
}

.wcl__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a227 0%, #d4c4a8 8%, #38bdf8 32%, #818cf8 62%, #34d399 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.wcl__progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.wcl__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #818cf8 55%, #34d399);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}


[REDACTED]

.terminal-panel {
  padding: 1rem 1.25rem;
  flex-shrink: 0;
  max-height: min(44vh, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 3px solid rgba(92, 46, 46, 0.28);
}

.terminal-panel {
  padding: 1rem 1.25rem;
  flex-shrink: 0;
  max-height: min(44vh, 440px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


[REDACTED]

Shell

cd /root/workspace/projects/ibytera-mail-portal/frontend && npm run build 2>&1 | tail -8

Verify frontend build succeeds


Roger, apliquei tudo o que pediu. Resumo:

## Alterações feitas

**1. Paleta azul/ciano + toque bege Ligbox**
- Painel direito com gradientes quentes (`#f5f0e8`, `#c9a227`) misturados ao azul tech
- Bordas e caixas com tom bege (`#e0d5c8`)
- Barra de progresso começa em dourado/bege e termina em ciano/verde
- Glow extra âmbar no fundo

**2. Loop contínuo nos ícones**
- Conveyor corre sempre (22s por ciclo), não só durante `loading`
- Fase actual continua destacada enquanto os ícones passam

**3. Terminal renomeado**
- Título unificado: **Ligbox Datacenter — Node VM001**
- Aplica-se ao painel `<details>`, cabeçalho do terminal e card Resumo
- Mensagens de processamento também usam esse nome

**4. Card abaixo**
- Infra + Resumo mantidos na linha secundária, como estava

**5. Passo DNS**
- Sem alteração de fluxo — mantém portal vs externo
- Quando quiser, pesquisamos referências de mercado (Google Workspace, Microsoft 365, Zoho, Cloudflare onboarding) para redesenhar só essa fase

---

## Sobre o passo DNS (para quando pesquisarmos)

Padrões comuns no mercado:

| Produto | Abordagem |
|---------|-----------|
| Google Workspace | Detecta registrador → instruções específicas + verificação automática |
| Microsoft 365 | Wizard linear: “adicione estes registos” + botão Verificar |
| Cloudflare | Um registo TXT de verificação, resto automático |
| Zoho Mail | Copiar/colar MX + SPF num único ecrã |

Provável direção para Ligbox: **ecrã único “Configure o DNS”** com tabs só se necessário, em vez de escolha inicial portal/externo.

---

Build OK. Quer que eu faça deploy na VM112 ou prefere ver primeiro com `npm run dev`?

[REDACTED]


<user_query>
prefere ver primeiro com npm run dev?
</user_query>


Sim — vou subir o dev server para você ver o wizard antes de qualquer deploy.

[REDACTED]


[REDACTED]

cd /root/workspace/projects/ibytera-mail-portal/frontend && npm run dev -- --host 0.0.0.0

Start Vite dev server on all interfaces


O wizard não estava ligado ao dev server — vou adicionar a rota `/onboard` para preview local.

[REDACTED]

StrReplace

import LigboxHome from './ligbox/pages/Home'
import HomePremium from './ligbox-premium/pages/HomePremium'
import HomeSky from './ligbox-sky/pages/HomeSky'
import HomeV4 from './ligbox-v4/pages/HomeV4'
import LegalStub from './legal/LegalStub'
import Privacidade from './legal/Privacidade'
import Termos from './legal/Termos'
import DomainAdmin from './DomainAdmin'
import ForgotDomainPassword from './ForgotDomainPassword'
import App from './App'
import { buildOnboardUrl, readPlannedEmailFromCookie } from './lib/onboardUrl'

import LigboxHome from './ligbox/pages/Home'
import HomePremium from './ligbox-premium/pages/HomePremium'
import HomeSky from './ligbox-sky/pages/HomeSky'
import HomeV4 from './ligbox-v4/pages/HomeV4'
import LegalStub from './legal/LegalStub'
import Privacidade from './legal/Privacidade'
import Termos from './legal/Termos'
import DomainAdmin from './DomainAdmin'
import ForgotDomainPassword from './ForgotDomainPassword'
import { buildOnboardUrl, readPlannedEmailFromCookie } from './lib/onboardUrl'

  if (path === '/onboard' || path === '/wizard') {
    if (import.meta.env.DEV) return <App />
    const params = new URLSearchParams(window.location.search)
    const email = params.get('planned_email') || readPlannedEmailFromCookie() || (localStorage.getItem('ligbox_planned_email') || '').trim()
    window.location.href = buildOnboardUrl(email)
    return null
  }

  if (path === '/onboard') {
    const params = new URLSearchParams(window.location.search)
    const email = params.get('planned_email') || readPlannedEmailFromCookie() || (localStorage.getItem('ligbox_planned_email') || '').trim()
    window.location.href = buildOnboardUrl(email)
    return null
  }


[REDACTED]

Shell

curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:5173/wizard && echo && curl -s http://127.0.0.1:5173/wizard | head -5

Verify wizard route responds on dev server


Roger, sim — **sempre vale ver no dev antes do deploy**. Já subi o servidor e liguei o wizard para preview local.

## Dev server activo

| URL | Uso |
|-----|-----|
| `http://localhost:5173/wizard` | Preview do wizard (layout novo) |
| `http://localhost:5173/onboard` | Mesmo wizard em modo dev |
| `http://10.10.10.112:5173/wizard` | Acesso na rede (VM112) |

## O que verificar

1. **Esquerda** — fases + formulário + botões Anterior / Próximo / Concluir
2. **Direita** — fundo azul/ciano com toque bege, ícones em loop contínuo, barra de progresso
3. **Abaixo** — card Resumo + **Ligbox Datacenter — Node VM001**
4. **Passo DNS** — fluxo actual (sem mudanças ainda)

## Nota

Em dev, `/onboard` abre o wizard localmente (não redirecciona para `onboard.ligbox.com.br`). Em produção, o redirect continua igual.

Se a API (`8090`) não estiver a correr, a UI aparece mas os botões podem falhar ao chamar o backend — normal para avaliar só o visual.

Abra `http://localhost:5173/wizard` (ou o IP da VM112 se estiver noutra máquina) e diga o que quer ajustar antes do deploy.

[REDACTED]


<user_query>
hummmm ....
</user_query>


Parece hesitação — vou abrir o wizard no dev server e ver o que pode estar a causar isso.

[REDACTED]


[REDACTED]

curl -s http://127.0.0.1:5173/wizard 2>&1 | rg -i "error|wizard|wcl|Ligbox" | head -20

Check wizard page HTML for errors


<user_query>
espere,,,,estou analaisando ...
</user_query>


Roger, sem pressa — analise com calma.

Quando quiser, diga o que achou: o que gostou, o que estranhou ou o que não bateu com o que tinha em mente. Ajustamos a partir daí.

[REDACTED]


<user_query>
olha so , preocure por telas de windues 11 oiu 10 de ins;lacao e vc vai teb o meu conceito --gosteo mda sua ideia aqui , mas nao imaginava NADA do antiga versao do wizzard ,,, imaginei TODA a tena no Ciano entende ?
</user_query>


Entendi: wizard estilo instalador Windows 10/11, tema inteiro em ciano — sem resquícios do layout bege antigo. Vou redesenhar isso agora.

[REDACTED]


[REDACTED]

Write

import { useMemo } from 'react'
import { motion } from 'framer-motion'
import {
  Globe,
  Network,
  UserRound,
  ShieldCheck,
  Mail,
  CheckCircle2,
  Loader2,
} from 'lucide-react'
import { BUSY_PHASES } from './busyPhases'

const PHASES = [
  {
    label: 'Domínio',
    title: 'Domínio da empresa',
    detail: 'Identificamos o endereço do seu email corporativo.',
    Icon: Globe,
  },
  {
    label: 'DNS',
    title: 'Configuração de rede',
    detail: 'Preparamos os apontamentos para enviar e receber email.',
    Icon: Network,
  },
  {
    label: 'Conta admin',
    title: 'Administrador',
    detail: 'Definimos quem gere o email da empresa.',
    Icon: UserRound,
  },
  {
    label: 'Confirmação',
    title: 'Revisão final',
    detail: 'Confirmamos tudo antes de activar no servidor.',
    Icon: ShieldCheck,
  },
  {
    label: 'Concluído',
    title: 'Email activo',
    detail: 'O webmail fica pronto para usar.',
    Icon: Mail,
  },
]

function phaseState(index, step, completedSteps, accountCreated, infraReady) {
  if (index === 4) {
    if (accountCreated && infraReady) return 'done'
    if (accountCreated) return 'pending'
    if (index === step) return 'active'
    return 'pending'
  }
  if (completedSteps[index]) return 'done'
  if (index === step) return 'active'
  if (index < step) return 'done'
  return 'pending'
}

export default function WizardClassicLayout({
  steps = PHASES.map((p) => p.label),
  step,
  completedSteps,
  overallPercent,
  domain,
  companyName,
  loading,
  busyPhase,
  accountCreated = false,
  infraReady = false,
  children,
  footer,
}) {
  const activePhase = PHASES[Math.min(step, PHASES.length - 1)]
  const busyLabel = loading
    ? BUSY_PHASES[busyPhase]?.label || BUSY_PHASES.processing.label
    : null

  const phaseStates = useMemo(
    () =>
      PHASES.map((_, i) =>
        phaseState(i, step, completedSteps, accountCreated, infraReady)
      ),
    [step, completedSteps, accountCreated, infraReady]
  )

  const displayDomain = domain?.trim() || 'empresa.com.br'
  const displayCompany = companyName || 'sua empresa'
  const stepHuman = Math.min(step + 1, steps.length)

  return (

              L

              Ligbox Onboard
              {displayCompany}

            Passo {stepHuman} de {steps.length}

              {steps.map((label, i) => {
                const state = phaseStates[i]
                const isActive = state === 'active'
                const isDone = state === 'done'
                const isPendingInfra = i === 4 && accountCreated && !infraReady

                return (
                  <li
                    key={label}
                    className={`wcl__step wcl__step--${state}${isPendingInfra ? ' wcl__step--warn' : ''}`}
                    aria-current={isActive ? 'step' : undefined}
                  >

                        {isDone ? (
                          <CheckCircle2 size={13} strokeWidth={2.5} />
                        ) : isPendingInfra ? (
                          '!'
                        ) : (
                          i + 1
                        )}

                      {i < steps.length - 1 && }

                    {label}

                )
              })}

Fase actual · {activePhase.label}

{activePhase.title}

{busyLabel || activePhase.detail}

{displayDomain}

{children}

            <motion.div
              className="wcl__conveyor"
              animate={{ x: ['0%', '-50%'] }}
              transition={{ duration: 24, repeat: Infinity, ease: 'linear' }}
            >
              {[...PHASES, ...PHASES].map((phase, i) => {
                const realIndex = i % PHASES.length
                const state = phaseStates[realIndex]
                const Icon = phase.Icon
                return (
                  <div
                    key={`${phase.label}-${i}`}
                    className={`wcl__icon-card wcl__icon-card--${state}`}
                  >

                      {state === 'active' && loading ? (
                        <Loader2 className="wcl-spin" size={24} strokeWidth={2} />
                      ) : (
                        <Icon size={24} strokeWidth={1.75} />
                      )}

                    {phase.label}

                )
              })}
            </motion.div>

              A preparar o email corporativo
              {overallPercent}%

              <motion.div
                className={`wcl__progress-fill${loading ? ' wcl__progress-fill--live' : ''}`}
                animate={{ width: `${overallPercent}%` }}
                transition={{ duration: 0.45, ease: 'easeOut' }}
              />

        {footer && {footer}}

  )
}


[REDACTED]

StrReplace

export default function WizardStepNav({
  onBack,
  onCancel,
  backDisabled = false,
  cancelDisabled = false,
  children,
}) {
  return (

      <button
        type="button"
        className="wcl-btn wcl-btn--ghost"
        disabled={backDisabled}
        onClick={onBack}
      >
        Voltar
      </button>

        <button
          type="button"
          className="wcl-btn wcl-btn--ghost"
          disabled={cancelDisabled}
          onClick={onCancel}
        >
          Cancelar
        </button>
        {children}

  )
}

export default function WizardStepNav({
  onBack,
  onCancel,
  backDisabled = false,
  cancelDisabled = false,
  children,
}) {
  return (

        <button
          type="button"
          className="btn secondary"
          disabled={backDisabled}
          onClick={onBack}
        >
          Voltar
        </button>
        {children}

      <button
        type="button"
        className="btn btn-cancel"
        disabled={cancelDisabled}
        onClick={onCancel}
      >
        Cancelar processo
      </button>

  )
}

  return (
    <div className="wizard-page wizard-page--setup">

  return (
    <div className="wizard-page">


[REDACTED]

/* —— Wizard Windows 11 / setup — tela inteira ciano —— */
.wizard-page--setup {
  min-height: 100vh;
  padding: 0;
  max-width: none;
  background: #001525;
  color: #e8f7ff;
}

.wizard-page--setup .wizard-page__secondary {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.wizard-page--setup .wizard-page__secondary .card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.22);
  color: #e8f7ff;
  box-shadow: 0 8px 32px rgba(0, 20, 40, 0.35);
  backdrop-filter: blur(12px);
}

.wizard-page--setup .terminal-panel {
  border-left-color: rgba(0, 200, 248, 0.55);
}

.wizard-page--setup .terminal-panel summary {
  color: #7dd3fc;
}

.wizard-page--setup .wizard-attention {
  background: rgba(0, 200, 248, 0.12);
  border-color: rgba(125, 211, 252, 0.35);
  color: #e8f7ff;
}

.wizard-page--setup .wcl__content > h1,
.wizard-page--setup .wcl__content > p.sub:first-of-type {
  display: none;
}

.wizard-page--setup label {
  color: rgba(232, 247, 255, 0.92);
}

.wizard-page--setup input,
.wizard-page--setup select,
.wizard-page--setup textarea {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(125, 211, 252, 0.35);
  color: #fff;
  border-radius: 6px;
}

.wizard-page--setup input::placeholder {
  color: rgba(232, 247, 255, 0.45);
}

.wizard-page--setup input:focus,
.wizard-page--setup select:focus,
.wizard-page--setup textarea:focus {
  outline: none;
  border-color: #00c8f8;
  box-shadow: 0 0 0 2px rgba(0, 200, 248, 0.25);
}

.wizard-page--setup .message {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(125, 211, 252, 0.2);
  color: #e8f7ff !important;
}

.wizard-page--setup .message.error {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.35);
}

.wizard-page--setup .message.success {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35);
}

.wizard-page--setup .btn,
.wizard-page--setup .wcl-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.wizard-page--setup .btn:not(.secondary):not(.btn-cancel):not(.btn-danger),
.wizard-page--setup .wcl-btn--primary {
  background: #00c8f8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #001525;
}

.wizard-page--setup .btn:not(.secondary):not(.btn-cancel):not(.btn-danger):hover:not(:disabled),
.wizard-page--setup .wcl-btn--primary:hover:not(:disabled) {
  background: #33d4fa;
}

.wizard-page--setup .btn.secondary,
.wizard-page--setup .wcl-btn--ghost {
  background: transparent;
  border: 1px solid rgba(125, 211, 252, 0.35);
  color: #e8f7ff;
}

.wizard-page--setup .choice-grid .btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.28);
  color: #e8f7ff;
}

.wizard-page--setup .choice-grid .btn.secondary {
  background: rgba(0, 0, 0, 0.15);
}

.wizard-page--setup .action-complete {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #a7f3d0;
}

.wcl {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 1rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 200, 248, 0.35), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(0, 120, 212, 0.28), transparent 50%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(0, 180, 220, 0.22), transparent 45%),
    linear-gradient(165deg, #001a2e 0%, #003d5c 38%, #005f7a 72%, #007a99 100%);
}

.wcl__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.wcl__bloom {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.45;
}

.wcl__bloom--1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: 10%;
  background: #00c8f8;
}

.wcl__bloom--2 {
  width: 360px;
  height: 360px;
  bottom: -80px;
  right: 5%;
  background: #0078d4;
}

.wcl__bloom--3 {
  width: 280px;
  height: 280px;
  top: 40%;
  right: 25%;
  background: #22d3ee;
  opacity: 0.25;
}

.wcl__window {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  min-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(0, 28, 48, 0.72);
  backdrop-filter: blur(20px);
  box-shadow:
    0 24px 80px rgba(0, 10, 30, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.wcl__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.15);
  background: rgba(0, 0, 0, 0.18);
}

.wcl__titlebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.wcl__logo {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #001525;
  background: linear-gradient(135deg, #00c8f8, #7dd3fc);
}

.wcl__titlebar-brand strong {
  display: block;
  font-size: 0.92rem;
  color: #f0f9ff;
}

.wcl__titlebar-brand span {
  display: block;
  font-size: 0.72rem;
  color: rgba(186, 230, 253, 0.75);
}

.wcl__titlebar-step {
  font-size: 0.78rem;
  color: rgba(186, 230, 253, 0.85);
  white-space: nowrap;
}

.wcl__body {
  flex: 1;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 0;
}

.wcl__nav {
  padding: 1rem 0.75rem 1rem 1rem;
  border-right: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.wcl__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcl__step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  color: rgba(186, 230, 253, 0.55);
}

.wcl__step--active {
  color: #fff;
  font-weight: 600;
}

.wcl__step--done {
  color: rgba(110, 231, 183, 0.9);
}

.wcl__step--warn {
  color: #fcd34d;
}

.wcl__step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 1.35rem;
}

.wcl__step-dot {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.25);
  color: rgba(232, 247, 255, 0.7);
}

.wcl__step--active .wcl__step-dot {
  background: #00c8f8;
  border-color: #7dd3fc;
  color: #001525;
  box-shadow: 0 0 16px rgba(0, 200, 248, 0.45);
}

.wcl__step--done .wcl__step-dot {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.wcl__step-line {
  width: 2px;
  flex: 1;
  min-height: 0.65rem;
  margin: 0.2rem 0;
  background: rgba(125, 211, 252, 0.2);
  border-radius: 1px;
}

.wcl__step--done + .wcl__step .wcl__step-line,
.wcl__step--done .wcl__step-line {
  background: rgba(52, 211, 153, 0.45);
}

.wcl__step-label {
  padding-top: 0.15rem;
  line-height: 1.3;
}

.wcl__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 1.25rem 0.5rem;
}

.wcl__phase-head {
  margin-bottom: 0.85rem;
}

.wcl__phase-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.85);
}

.wcl__phase-title {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #f0f9ff;
  letter-spacing: -0.02em;
}

.wcl__phase-detail {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(186, 230, 253, 0.85);
}

.wcl__phase-domain {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #00c8f8;
}

.wcl__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}

.wcl__pipeline {
  padding: 0.65rem 1.25rem 0.85rem;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.wcl__conveyor-wrap {
  overflow: hidden;
  margin-bottom: 0.55rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wcl__conveyor {
  display: flex;
  gap: 0.75rem;
  width: max-content;
}

.wcl__icon-card {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.35;
  transform: scale(0.9);
  transition: opacity 0.25s, transform 0.25s;
}

.wcl__icon-card--active {
  opacity: 1;
  transform: scale(1);
}

.wcl__icon-card--done {
  opacity: 0.65;
}

.wcl__icon-ring {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.25);
  color: rgba(186, 230, 253, 0.9);
}

.wcl__icon-card--active .wcl__icon-ring {
  border-color: #00c8f8;
  color: #00c8f8;
  box-shadow: 0 0 20px rgba(0, 200, 248, 0.35);
  background: rgba(0, 200, 248, 0.1);
}

.wcl__icon-card--done .wcl__icon-ring {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.wcl__icon-label {
  font-size: 0.68rem;
  text-align: center;
  color: rgba(186, 230, 253, 0.8);
}

.wcl__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(186, 230, 253, 0.75);
  margin-bottom: 0.3rem;
}

.wcl__progress-meta strong {
  color: #f0f9ff;
  font-size: 0.88rem;
}

.wcl__progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(125, 211, 252, 0.2);
  overflow: hidden;
}

.wcl__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0078d4, #00c8f8 55%, #22d3ee);
  box-shadow: 0 0 12px rgba(0, 200, 248, 0.5);
}

.wcl__progress-fill--live {
  position: relative;
}

.wcl__progress-fill--live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: wcl-shimmer 1.4s linear infinite;
}

@keyframes wcl-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.wcl-spin {
  animation: wph-spin 0.9s linear infinite;
}

.wcl__footer {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.wizard-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.wizard-step-nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.wizard-page__secondary {
  margin-top: 0;
  display: grid;
  gap: 1rem;
}

.wizard-page__secondary.cols-2 {
  grid-template-columns: minmax(0, 1fr) 220px;
}

@media (max-width: 960px) {
  .wcl__body {
    grid-template-columns: 1fr;
  }

  .wcl__nav {
    border-right: none;
    border-bottom: 1px solid rgba(125, 211, 252, 0.12);
    padding-bottom: 0.75rem;
  }

  .wcl__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .wcl__step-rail .wcl__step-line {
    display: none;
  }

  .wizard-page__secondary.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* —— Wizard clássico (Windows-style: fases + painel tech) —— */
.wizard-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

.wcl__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
  min-height: min(78vh, 720px);
}

.wcl__left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.1rem 1.15rem 1rem;
}

.wcl__brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 1rem;
}

.wcl__brand strong {
  color: var(--accent);
  font-size: 0.95rem;
}

.wcl__brand span {
  font-size: 0.65rem;
  color: var(--muted);
}

.wcl__steps {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wcl__step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
  border: 1px solid transparent;
}

.wcl__step--active {
  color: var(--accent);
  font-weight: 700;
  background: rgba(92, 46, 46, 0.06);
  border-color: rgba(92, 46, 46, 0.14);
}

.wcl__step--done {
  color: var(--ok);
}

.wcl__step--warn {
  color: #b45309;
}

.wcl__step-badge {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: #ece6dc;
  color: #6b6560;
  flex-shrink: 0;
}

.wcl__step--active .wcl__step-badge {
  background: var(--accent);
  color: #fff;
}

.wcl__step--done .wcl__step-badge {
  background: var(--ok);
  color: #fff;
}

.wcl__step--warn .wcl__step-badge {
  background: #f59e0b;
  color: #fff;
}

.wcl__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.wcl__content h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.wcl__content .sub {
  margin-top: 0;
}

.wcl__footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.wcl__right {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(224, 213, 200, 0.22);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(245, 240, 232, 0.06);
}

.wcl__tech-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 88%, rgba(201, 162, 39, 0.1), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(245, 240, 232, 0.07), transparent 42%),
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.18), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.2), transparent 45%),
    linear-gradient(145deg, #0f1528 0%, #121a2e 42%, #101827 100%);
}

.wcl__grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.25) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 95%);
}

.wcl__glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.35;
}

.wcl__glow--a {
  top: -40px;
  right: -20px;
  background: #38bdf8;
}

.wcl__glow--b {
  bottom: -60px;
  left: -10px;
  background: #818cf8;
}

.wcl__glow--c {
  bottom: 20%;
  right: 15%;
  width: 180px;
  height: 180px;
  background: #c9a227;
  opacity: 0.18;
}

.wcl__scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.015) 3px,
    rgba(255, 255, 255, 0.015) 4px
  );
  pointer-events: none;
}

.wcl__right-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.2rem 1.1rem;
  color: #e2e8f0;
}

.wcl__right-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.wcl__right-title {
  margin: 0.35rem 0 0;
  font-size: 1.45rem;
  color: #f8fafc;
}

.wcl__right-domain {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: #7dd3fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wcl__phase-caption {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(224, 213, 200, 0.16);
  box-shadow: inset 0 1px 0 rgba(245, 240, 252, 0.04);
}

.wcl__phase-kicker {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}

.wcl__phase-caption strong {
  display: block;
  font-size: 1rem;
  color: #f1f5f9;
}

.wcl__phase-caption p {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.wcl__conveyor-wrap {
  margin-top: auto;
  overflow: hidden;
  padding: 1rem 0 0.35rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wcl__conveyor {
  display: flex;
  gap: 0.85rem;
  width: max-content;
}

.wcl__icon-card {
  width: 92px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.45;
  transform: scale(0.92);
  transition: opacity 0.25s, transform 0.25s;
}

.wcl__icon-card--active {
  opacity: 1;
  transform: scale(1);
}

.wcl__icon-card--done {
  opacity: 0.72;
}

.wcl__icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(224, 213, 200, 0.14);
  color: #cbd5e1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -8px 16px rgba(201, 162, 39, 0.04);
}

.wcl__icon-card--active .wcl__icon-ring {
  border-color: rgba(56, 189, 248, 0.65);
  color: #7dd3fc;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.35),
    0 0 24px rgba(56, 189, 248, 0.25);
}

.wcl__icon-card--done .wcl__icon-ring {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.wcl__icon-label {
  font-size: 0.72rem;
  text-align: center;
  color: #cbd5e1;
}

.wcl__progress-block {
  margin-top: 0.65rem;
}

.wcl__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}

.wcl__progress-meta strong {
  color: #f8fafc;
  font-size: 0.95rem;
}

.wcl__progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(224, 213, 200, 0.14);
  overflow: hidden;
}

.wcl__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a227 0%, #d4c4a8 8%, #38bdf8 32%, #818cf8 62%, #34d399 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.wcl__progress-fill--live {
  position: relative;
}

.wcl__progress-fill--live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: wcl-shimmer 1.4s linear infinite;
}

@keyframes wcl-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.wcl__progress-hint {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.4;
}

.wcl-spin {
  animation: wph-spin 0.9s linear infinite;
}

.wizard-page__secondary {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

.wizard-page__secondary.cols-2 {
  grid-template-columns: minmax(0, 1fr) 220px;
}

@media (max-width: 960px) {
  .wcl__shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .wcl__right {
    min-height: 320px;
  }

  .wizard-page__secondary.cols-2 {
    grid-template-columns: 1fr;
  }
}


[REDACTED]


Vou isolar o tema ciano num CSS dedicado — mais limpo do que substituir 400 linhas de uma vez.

[REDACTED]

Write

/* Wizard estilo Windows 11 — tela inteira ciano (sem tema bege antigo) */

.wizard-page--setup {
  min-height: 100vh;
  padding: 0;
  max-width: none;
  background: #001525;
  color: #e8f7ff;
}

.wizard-page--setup .wizard-page__secondary {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.wizard-page--setup .wizard-page__secondary .card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.22);
  color: #e8f7ff;
  box-shadow: 0 8px 32px rgba(0, 20, 40, 0.35);
  backdrop-filter: blur(12px);
}

.wizard-page--setup .terminal-panel {
  border-left-color: rgba(0, 200, 248, 0.55);
}

.wizard-page--setup .terminal-panel summary {
  color: #7dd3fc;
}

.wizard-page--setup .wizard-attention {
  background: rgba(0, 200, 248, 0.12);
  border-color: rgba(125, 211, 252, 0.35);
  color: #e8f7ff;
}

.wizard-page--setup .wcl__content > h1,
.wizard-page--setup .wcl__content > p.sub:first-of-type {
  display: none;
}

.wizard-page--setup label {
  color: rgba(232, 247, 255, 0.92);
}

.wizard-page--setup input,
.wizard-page--setup select,
.wizard-page--setup textarea {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(125, 211, 252, 0.35);
  color: #fff;
  border-radius: 6px;
}

.wizard-page--setup input::placeholder {
  color: rgba(232, 247, 255, 0.45);
}

.wizard-page--setup input:focus,
.wizard-page--setup select:focus,
.wizard-page--setup textarea:focus {
  outline: none;
  border-color: #00c8f8;
  box-shadow: 0 0 0 2px rgba(0, 200, 248, 0.25);
}

.wizard-page--setup .message {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(125, 211, 252, 0.2);
  color: #e8f7ff !important;
}

.wizard-page--setup .message.error {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.35);
}

.wizard-page--setup .message.success {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35);
}

.wizard-page--setup .btn,
.wizard-page--setup .wcl-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.wizard-page--setup .btn:not(.secondary):not(.btn-cancel):not(.btn-danger),
.wizard-page--setup .wcl-btn--primary {
  background: #00c8f8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #001525;
}

.wizard-page--setup .btn:not(.secondary):not(.btn-cancel):not(.btn-danger):hover:not(:disabled),
.wizard-page--setup .wcl-btn--primary:hover:not(:disabled) {
  background: #33d4fa;
}

.wizard-page--setup .btn.secondary,
.wizard-page--setup .wcl-btn--ghost {
  background: transparent;
  border: 1px solid rgba(125, 211, 252, 0.35);
  color: #e8f7ff;
}

.wizard-page--setup .choice-grid .btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.28);
  color: #e8f7ff;
}

.wizard-page--setup .choice-grid .btn.secondary {
  background: rgba(0, 0, 0, 0.15);
}

.wizard-page--setup .action-complete {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #a7f3d0;
}

.wizard-page--setup .wizard-checklist {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(125, 211, 252, 0.2);
}

.wizard-page--setup .wizard-checklist__title,
.wizard-page--setup .wizard-checklist__label {
  color: #e8f7ff;
}

.wcl {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 0.75rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 200, 248, 0.35), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(0, 120, 212, 0.28), transparent 50%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(0, 180, 220, 0.22), transparent 45%),
    linear-gradient(165deg, #001a2e 0%, #003d5c 38%, #005f7a 72%, #007a99 100%);
}

.wcl__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.wcl__bloom {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.45;
}

.wcl__bloom--1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: 10%;
  background: #00c8f8;
}

.wcl__bloom--2 {
  width: 360px;
  height: 360px;
  bottom: -80px;
  right: 5%;
  background: #0078d4;
}

.wcl__bloom--3 {
  width: 280px;
  height: 280px;
  top: 40%;
  right: 25%;
  background: #22d3ee;
  opacity: 0.25;
}

.wcl__window {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  min-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(0, 28, 48, 0.72);
  backdrop-filter: blur(20px);
  box-shadow:
    0 24px 80px rgba(0, 10, 30, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.wcl__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.15);
  background: rgba(0, 0, 0, 0.18);
}

.wcl__titlebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.wcl__logo {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #001525;
  background: linear-gradient(135deg, #00c8f8, #7dd3fc);
}

.wcl__titlebar-brand strong {
  display: block;
  font-size: 0.92rem;
  color: #f0f9ff;
}

.wcl__titlebar-brand span {
  display: block;
  font-size: 0.72rem;
  color: rgba(186, 230, 253, 0.75);
}

.wcl__titlebar-step {
  font-size: 0.78rem;
  color: rgba(186, 230, 253, 0.85);
  white-space: nowrap;
}

.wcl__body {
  flex: 1;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 0;
}

.wcl__nav {
  padding: 1rem 0.75rem 1rem 1rem;
  border-right: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.wcl__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcl__step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  color: rgba(186, 230, 253, 0.55);
}

.wcl__step--active {
  color: #fff;
  font-weight: 600;
}

.wcl__step--done {
  color: rgba(110, 231, 183, 0.9);
}

.wcl__step--warn {
  color: #fcd34d;
}

.wcl__step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 1.35rem;
}

.wcl__step-dot {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.25);
  color: rgba(232, 247, 255, 0.7);
}

.wcl__step--active .wcl__step-dot {
  background: #00c8f8;
  border-color: #7dd3fc;
  color: #001525;
  box-shadow: 0 0 16px rgba(0, 200, 248, 0.45);
}

.wcl__step--done .wcl__step-dot {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.wcl__step-line {
  width: 2px;
  flex: 1;
  min-height: 0.65rem;
  margin: 0.2rem 0;
  background: rgba(125, 211, 252, 0.2);
  border-radius: 1px;
}

.wcl__step--done .wcl__step-line {
  background: rgba(52, 211, 153, 0.45);
}

.wcl__step-label {
  padding-top: 0.15rem;
  line-height: 1.3;
}

.wcl__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 1.25rem 0.5rem;
}

.wcl__phase-head {
  margin-bottom: 0.85rem;
}

.wcl__phase-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.85);
}

.wcl__phase-title {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #f0f9ff;
  letter-spacing: -0.02em;
}

.wcl__phase-detail {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(186, 230, 253, 0.85);
}

.wcl__phase-domain {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #00c8f8;
}

.wcl__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}

.wcl__pipeline {
  padding: 0.65rem 1.25rem 0.85rem;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.wcl__conveyor-wrap {
  overflow: hidden;
  margin-bottom: 0.55rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wcl__conveyor {
  display: flex;
  gap: 0.75rem;
  width: max-content;
}

.wcl__icon-card {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.35;
  transform: scale(0.9);
  transition: opacity 0.25s, transform 0.25s;
}

.wcl__icon-card--active {
  opacity: 1;
  transform: scale(1);
}

.wcl__icon-card--done {
  opacity: 0.65;
}

.wcl__icon-ring {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.25);
  color: rgba(186, 230, 253, 0.9);
}

.wcl__icon-card--active .wcl__icon-ring {
  border-color: #00c8f8;
  color: #00c8f8;
  box-shadow: 0 0 20px rgba(0, 200, 248, 0.35);
  background: rgba(0, 200, 248, 0.1);
}

.wcl__icon-card--done .wcl__icon-ring {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

.wcl__icon-label {
  font-size: 0.68rem;
  text-align: center;
  color: rgba(186, 230, 253, 0.8);
}

.wcl__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(186, 230, 253, 0.75);
  margin-bottom: 0.3rem;
}

.wcl__progress-meta strong {
  color: #f0f9ff;
  font-size: 0.88rem;
}

.wcl__progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(125, 211, 252, 0.2);
  overflow: hidden;
}

.wcl__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0078d4, #00c8f8 55%, #22d3ee);
  box-shadow: 0 0 12px rgba(0, 200, 248, 0.5);
}

.wcl__progress-fill--live {
  position: relative;
}

.wcl__progress-fill--live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: wcl-shimmer 1.4s linear infinite;
}

@keyframes wcl-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.wcl-spin {
  animation: wph-spin 0.9s linear infinite;
}

.wcl__footer {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.wizard-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.wizard-step-nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.wizard-page--setup .wizard-page__secondary {
  margin-top: 0;
  display: grid;
  gap: 1rem;
}

.wizard-page--setup .wizard-page__secondary.cols-2 {
  grid-template-columns: minmax(0, 1fr) 220px;
}

@media (max-width: 960px) {
  .wcl__body {
    grid-template-columns: 1fr;
  }

  .wcl__nav {
    border-right: none;
    border-bottom: 1px solid rgba(125, 211, 252, 0.12);
    padding-bottom: 0.75rem;
  }

  .wcl__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .wcl__step-rail .wcl__step-line {
    display: none;
  }

  .wizard-page--setup .wizard-page__secondary.cols-2 {
    grid-template-columns: 1fr;
  }
}

StrReplace

import RouterApp from './RouterApp'
import './styles.css'
import './wizard-setup.css'

import RouterApp from './RouterApp'
import './styles.css'

Shell

cd /root/workspace/projects/ibytera-mail-portal/frontend && npm run build 2>&1 | tail -6

Verify build after cyan wizard redesign


Roger, agora entendi perfeitamente — e faz sentido.

O problema era que eu tinha **misturado** o layout novo com o **tema bege antigo** (card castanho, inputs claros, sidebar velha). Não era o seu conceito.

## O que mudou agora

Redesenhei para **instalador Windows 11, tela inteira ciano**:

| Antes (errado) | Agora (seu conceito) |
|----------------|----------------------|
| Esquerda bege + direita escura | **Tudo ciano** — gradiente full screen |
| Card `.card` castanho | Janela glass escura sobre fundo azul/ciano |
| Dois painéis separados | **Uma janela** estilo setup Windows |
| Título duplicado bege | Título só no topo da janela (fase actual) |
| Botões castanhos | **Próximo** ciano `#00c8f8`, estilo Windows |

**Estrutura (como Windows Setup):**
```
┌─ Ligbox Onboard ─────────────── Passo 2 de 5 ─┐
│ [fases]  │  Título da fase + formulário        │
│ vertical │                                     │
├──────────┴─────────────────────────────────────┤
│  🌐 → 🔗 → 👤 → ✓ → ✉  (loop contínuo)         │
│  ████████████░░░░░░  45%                       │
├────────────────────────────────────────────────┤
│  [Voltar]              [Cancelar]  [Próximo]   │
└────────────────────────────────────────────────┘
     fundo ciano em TODA a tela
```

Cards abaixo (Resumo + Datacenter) também passaram para **glass ciano**, não bege.

---

**Refresh** em `http://localhost:5173/wizard` (Ctrl+Shift+R) e veja se está mais perto do que imaginou.

Se ainda faltar algo, diga — por exemplo:
- janela **mais larga / full screen** (como OOBE real do Windows)
- **só ciano claro** (menos escuro)
- **remover** checklist/banner amarelo que ainda parecem “velho wizard”

[REDACTED]


<user_query>
gostei  fivcou meljhr mas aimnda nao s patraece com ainstalavco do windows , gsoteo muoto dos icones correndo no lado de baioxo coma  fases em wauatao iliminada ... o que maos vc pode melhorar paa ficar mais pertio do modelo windos de instacao ?
</user_query>


Roger, vou aproximar do instalador Windows: barra inferior fixa (ícones + progresso + botões), janela quase fullscreen e tipografia mais limpa.

[REDACTED]