/* Tela de login do JF Funnels (protótipo 04/11/2026). Mesmo padrão do tema
   "sistema": superfícies chapadas, fios de 1px, Inter em peso médio, o azul da
   JF só no que é ação ou foco. Escuro por padrão; claro com ?claro=1. */

:root {
  color-scheme: dark;
  --page: #0b0b0d; --surface: #131317; --surface-2: #18181d;
  --ink: #ececec; --ink-2: #b4b4be; --muted: #8a8a96;
  --ring: rgba(255, 255, 255, .09); --axis: rgba(255, 255, 255, .16); --campo: rgba(255, 255, 255, .14);
  --chip: rgba(255, 255, 255, .06); --wash: rgba(255, 255, 255, .03);
  --acento: #4d7cff; --acento-ink: #8fadff;
  --primario: #0039f3; --primario-hover: #1d50ff; --primario-ativo: #0030cc;
  --erro: #ff7a72; --erro-bg: rgba(255, 92, 82, .08); --erro-borda: rgba(255, 122, 114, .32);
  --ok: #3ecf8e; --aviso: #f5b84a;
  --g-bg: #131314; --g-borda: #8e918f; --g-ink: #e3e3e3;   /* botão oficial do Google, tema escuro */
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .8);
}
:root.claro {
  color-scheme: light;
  --page: #f4f5f7; --surface: #ffffff; --surface-2: #fafafa;
  --ink: #171a20; --ink-2: #5c5e62; --muted: #8e9096;
  --ring: #e6e6e8; --axis: #dcdcde; --campo: #d4d4d8;
  --chip: #f0f0f2; --wash: rgba(23, 26, 32, .03);
  --acento: #0039f3; --acento-ink: #0039f3;
  --primario: #0039f3; --primario-hover: #0030d6; --primario-ativo: #0029b8;
  --erro: #d92d20; --erro-bg: #fef3f2; --erro-borda: #fecdca;
  --ok: #12805c; --aviso: #b54708;
  --g-bg: #ffffff; --g-borda: #747775; --g-ink: #1f1f1f;   /* botão oficial do Google, tema claro */
  --sombra: 0 24px 60px -28px rgba(16, 24, 40, .25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--page); color: var(--ink);
  font: 400 14px/1.5 "Inter", system-ui, sans-serif; font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: minmax(0, 1fr);
}
.lado { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; position: relative; isolation: isolate; }
a { color: var(--acento-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- topo e rodapé ---- */
.topo { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.marca:hover { text-decoration: none; }
.marca img { height: 17px; width: auto; display: block; }
.marca .claro-so { display: none; }
:root.claro .marca .escuro-so { display: none; }
:root.claro .marca .claro-so { display: block; }
.marca i { width: 1px; height: 18px; background: var(--axis); }
.marca span { font: 500 16px Inter, sans-serif; letter-spacing: -0.01em; }
.icone-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icone-btn:hover { background: var(--chip); color: var(--ink); }
.rodape { display: flex; justify-content: center; gap: 18px; padding: 20px 28px 26px; color: var(--muted); font-size: 12.5px; }
.rodape a { color: var(--muted); }

/* ---- coluna central ---- */
.palco { display: grid; place-items: center; padding: 24px 24px 40px; }
.coluna { width: 100%; max-width: 360px; }
.coluna.larga { max-width: 600px; }
.cabeca { margin-bottom: 24px; }
.cabeca h1 { margin: 0; font: 500 22px/1.25 Inter, sans-serif; letter-spacing: -0.02em; outline: none; }
.cabeca p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.cabeca p b { color: var(--ink); font-weight: 500; }
.selo { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 10px; border: 1px solid var(--ring); background: var(--surface); color: var(--ink); }
.selo.erro { color: var(--erro); }
.selo.ok { color: var(--ok); }

/* ---- mensagens (aria-live) ---- */
.msg:empty { display: none; }
.msg { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--ring); background: var(--surface); color: var(--ink-2); }
.msg svg { flex: none; margin-top: 2px; }
.msg.erro { color: var(--ink); border-color: var(--erro-borda); background: var(--erro-bg); }
.msg.erro svg { color: var(--erro); }
.msg.info svg { color: var(--acento); }
.msg.ok svg { color: var(--ok); }

/* ---- campos ---- */
form { margin: 0; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.rotulo a { font-weight: 400; font-size: 13px; }
.entrada { position: relative; display: flex; }
input.in {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--campo); background: var(--surface);
  color: var(--ink); font: 400 14px Inter, sans-serif; outline: none; transition: border-color .12s, box-shadow .12s;
}
input.in::placeholder { color: var(--muted); }
input.in:hover { border-color: var(--axis); }
input.in:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
input.in[aria-invalid="true"] { border-color: var(--erro); }
input.in[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro) 20%, transparent); }
input.in:disabled, input.in[readonly] { color: var(--ink-2); background: var(--surface-2); cursor: default; }
input.in.com-olho { padding-right: 44px; }
.olho { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.olho:hover { color: var(--ink); background: var(--chip); }
.dica { font-size: 12.5px; color: var(--muted); }
.dica.aviso { color: var(--aviso); }
.fixo { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ring); background: var(--surface-2); color: var(--ink-2); }

/* ---- botões ---- */
.btn {
  width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  font: 500 14px Inter, sans-serif; letter-spacing: 0; transition: opacity .12s, border-color .12s, background .12s;
}
.btn-primario { background: var(--primario); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .25); }
.btn-primario:hover:not([disabled]) { background: var(--primario-hover); }
.btn-primario:active:not([disabled]) { background: var(--primario-ativo); }
.btn-primario:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn-primario[aria-busy="true"] { background: var(--primario); opacity: .85; }
.btn-linha { background: transparent; color: var(--ink); border-color: var(--campo); }
.btn-linha:hover { border-color: var(--axis); background: var(--wash); }
.btn-texto { width: auto; height: auto; padding: 0; border: 0; background: none; color: var(--acento-ink); font: 400 13.5px Inter, sans-serif; cursor: pointer; }
.btn-texto:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-texto:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.btn[disabled], .btn[aria-busy="true"] { cursor: default; }
.btn[disabled]:not([aria-busy="true"]) { opacity: .45; }
.btn + .btn { margin-top: 10px; }
.btn svg { flex: none; }

/* botão do Google: padrão oficial (Roboto 500 14px, 40px, logo de 20px, fio de 1px) */
.btn-google {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px;
  border-radius: 4px; border: 1px solid var(--g-borda); background: var(--g-bg); color: var(--g-ink); cursor: pointer;
  font: 500 14px/20px "Roboto", Arial, sans-serif; letter-spacing: .25px; transition: background .12s;
}
.btn-google:hover { background: color-mix(in srgb, var(--g-ink) 8%, var(--g-bg)); }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.pilha { display: flex; flex-direction: column; gap: 10px; }

/* carregando */
.gira { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.grande .gira { width: 22px; height: 22px; }

/* ---- divisor e abas ---- */
.ou { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 12.5px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--ring); }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin-bottom: 18px; border-radius: 7px; border: 1px solid var(--ring); background: var(--wash); }
.abas button { height: 30px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 500 13px Inter, sans-serif; cursor: pointer; }
.abas button:hover { color: var(--ink); }
.abas button[aria-selected="true"] { background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ring); }

/* ---- caixa de seleção ---- */
.marcar { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; user-select: none; }
.marcar input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none; border-radius: 4px; border: 1px solid var(--axis); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.marcar input:checked { background: var(--acento); border-color: var(--acento); }
.marcar input:checked::after { content: ""; width: 8px; height: 4.5px; border: 1.6px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }

/* ---- código em 6 caixas ---- */
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 16px; border: 0; padding: 0; }
.otp legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.otp .meio { width: 0; }
.otp input {
  width: 100%; height: 48px; padding: 0; text-align: center; border-radius: 6px; border: 1px solid var(--campo); background: var(--surface);
  color: var(--ink); font: 500 20px Inter, sans-serif; font-feature-settings: "tnum" 1; outline: none; caret-color: var(--acento);
  transition: border-color .12s, box-shadow .12s;
}
.otp input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.otp input.cheio { border-color: var(--axis); }
.otp[aria-invalid="true"] input { border-color: var(--erro); }
.otp.treme { animation: treme .32s; }
@keyframes treme { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.linha-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.linha-acoes.centro { justify-content: center; }
.contador { font-feature-settings: "tnum" 1; }

/* ---- força da senha ---- */
.forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.forca i { height: 3px; border-radius: 2px; background: var(--ring); transition: background .15s; }
.forca[data-n="1"] i:nth-child(-n+1) { background: var(--erro); }
.forca[data-n="2"] i:nth-child(-n+2) { background: var(--aviso); }
.forca[data-n="3"] i:nth-child(-n+3) { background: var(--acento); }
.forca[data-n="4"] i { background: var(--ok); }
.forca-rot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.forca-rot b { font-weight: 500; color: var(--ink-2); }
.criterios { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.criterios li { display: flex; align-items: center; gap: 8px; }
.criterios li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid var(--axis); }
.criterios li.ok { color: var(--ink-2); }
.criterios li.ok::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.2l2 2 4-4.4'/%3E%3C/svg%3E") center/14px no-repeat; }
.criterios li.falha { color: var(--erro); }
.criterios li.falha::before { border-color: var(--erro); }

/* ---- prompt de chave de acesso (imita a folha do sistema) ---- */
.veu { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: aparece .18s ease-out; }
:root.claro .veu { background: rgba(16, 24, 40, .28); }
@keyframes aparece { from { opacity: 0; } }
.folha { width: 100%; max-width: 340px; padding: 28px 24px 20px; border-radius: 14px; border: 1px solid var(--ring); background: var(--surface); box-shadow: var(--sombra); text-align: center; animation: sobe .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes sobe { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.folha .dominio { font-size: 12.5px; color: var(--muted); }
.folha h2 { margin: 6px 0 4px; font: 500 16px/1.3 Inter, sans-serif; }
.folha p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.digital { width: 72px; height: 72px; margin: 22px auto 20px; display: grid; place-items: center; border-radius: 50%; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); position: relative; }
.digital::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); animation: pulsa 1.6s ease-out infinite; }
@keyframes pulsa { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.18); opacity: 0; } }
.folha .conta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 8px; border: 1px solid var(--ring); text-align: left; font-size: 13px; }
.folha .conta b { display: block; font-weight: 500; color: var(--ink); }
.folha .conta span { color: var(--muted); font-size: 12.5px; }
.av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--axis); font: 500 11.5px Inter, sans-serif; letter-spacing: .04em; color: var(--ink); }
.folha .btns { display: flex; gap: 8px; }
.folha .btns .btn { margin: 0; }

/* ---- reverificar: diálogo sobre a dash ---- */
.fundo-dash { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-columns: 240px 1fr; opacity: .5; filter: blur(1.5px); pointer-events: none; }
.fundo-dash .sb { border-right: 1px solid var(--ring); background: var(--surface-2); padding: 22px 16px; display: grid; align-content: start; gap: 10px; }
.fundo-dash .sb i, .fundo-dash .ct i { display: block; height: 10px; border-radius: 3px; background: var(--chip); }
.fundo-dash .ct { padding: 28px 36px; display: grid; align-content: start; gap: 16px; }
.fundo-dash .ct .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fundo-dash .ct .cards div { height: 92px; border-radius: 10px; border: 1px solid var(--ring); }
.fundo-dash .ct .graf { height: 280px; border-radius: 10px; border: 1px solid var(--ring); }
.dialogo { position: relative; z-index: 21; width: 100%; max-width: 400px; padding: 28px; border-radius: 12px; border: 1px solid var(--ring); background: var(--surface); box-shadow: var(--sombra); }
.dialogo .cabeca { margin-bottom: 20px; }
.acao-alvo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 18px; border-radius: 8px; border: 1px solid var(--ring); background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.acao-alvo svg { color: var(--muted); flex: none; }

/* ---- cadastro de chave / TOTP ---- */
.vantagens { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--ring); }
.vantagens li { display: flex; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--ring); font-size: 13.5px; color: var(--ink-2); }
.vantagens svg { color: var(--muted); flex: none; }
.qr-bloco { display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; margin-bottom: 20px; }
.qr { width: 148px; height: 148px; padding: 10px; border-radius: 8px; background: #fff; border: 1px solid var(--ring); }
.qr svg { display: block; width: 100%; height: 100%; }
.segredo small { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.segredo code { display: block; font: 500 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--ink); word-break: break-all; }
.segredo .btn-texto { margin-top: 8px; }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; padding: 6px 0; border-radius: 8px; border: 1px solid var(--ring); background: var(--surface-2); list-style: none; counter-reset: c; }
.codigos li { padding: 7px 16px; font: 500 14px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--ink); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.dupla .btn + .btn { margin-top: 0; }

/* ---- dispositivos ---- */
.secao { margin-bottom: 30px; }
.secao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ring); }
.secao-topo h2 { margin: 0; font: 500 15px Inter, sans-serif; letter-spacing: -0.01em; }
.secao-topo .btn { width: auto; height: 32px; padding: 0 12px; font-size: 13px; }
.item { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--ring); }
.item .ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--ring); color: var(--ink-2); }
.item b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; font-size: 13.5px; }
.item span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.etiqueta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 11.5px Inter, sans-serif; border: 1px solid var(--ring); color: var(--ink-2); }
.etiqueta.azul { color: var(--acento-ink); border-color: color-mix(in srgb, var(--acento) 40%, transparent); background: color-mix(in srgb, var(--acento) 10%, transparent); }
.item .btn-texto { white-space: nowrap; }
.item .btn-texto.perigo { color: var(--erro); }
.sair-todos { width: auto; margin-top: 14px; padding: 0 14px; color: var(--erro); border-color: var(--erro-borda); }
.sair-todos:hover { background: var(--erro-bg); border-color: var(--erro); }
.voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 13.5px; color: var(--muted); }
.voltar:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 560px) {
  .topo { padding: 0 18px; height: 56px; }
  .palco { place-items: start center; padding: 28px 20px 32px; }
  .otp { gap: 6px; }
  .otp input { height: 46px; font-size: 19px; }
  .qr-bloco { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fundo-dash { grid-template-columns: 1fr; }
  .fundo-dash .sb { display: none; }
  .fundo-dash .ct .cards { grid-template-columns: 1fr 1fr; }
  .dialogo { padding: 22px 20px; }
  .item { grid-template-columns: 32px 1fr; }
  .item > :last-child { grid-column: 2; justify-self: start; }
  .rodape { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- reverificar: a coluna vira diálogo sobre a dash ---- */
body.modo-dialogo .topo, body.modo-dialogo .rodape { visibility: hidden; }
body.modo-dialogo .palco { position: fixed; inset: 0; z-index: 20; place-items: center; padding: 24px; background: rgba(0, 0, 0, .5); }
:root.claro body.modo-dialogo .palco { background: rgba(16, 24, 40, .22); }
body.modo-dialogo .coluna { max-width: 400px; padding: 28px; border-radius: 12px; border: 1px solid var(--ring); background: var(--surface); box-shadow: var(--sombra); animation: sobe .22s cubic-bezier(.2, .8, .2, 1); }
body.modo-dialogo .cabeca { margin-bottom: 18px; }



/* =====================================================================
   Layout dividido (04/11, pedido do Eggon): painel da marca à esquerda,
   formulário à direita. No mobile, só o formulário com a faixa da marca.
   ===================================================================== */
.pm { display: none; }
.topo .marca { visibility: visible; }

@media (min-width: 1024px) {
  body { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  body.sem-painel { grid-template-columns: minmax(0, 1fr); }
  body.sem-painel .pm { display: none; }
  body:not(.sem-painel) .topo .marca { visibility: hidden; }

  .pm {
    position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; isolation: isolate;
    display: grid; grid-template-rows: auto 1fr auto; padding: 36px 48px 32px; color: #fff;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .20), transparent 52%),
      radial-gradient(90% 70% at 100% 100%, rgba(4, 10, 70, .55), transparent 60%),
      linear-gradient(158deg, #4a30c2 0%, #3b34d8 38%, #0039f3 74%, #0a2fca 100%);
  }
  /* grade fina que some nas bordas */
  .pm::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px);
    background-size: 44px 44px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 55% 45%, #000 15%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 65% at 55% 45%, #000 15%, transparent 78%);
  }
  /* grão */
  .pm::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* brilho que respira devagar atrás da prévia */
  .pm-luz { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -12%; top: 30%; border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 170, 255, .45), transparent 65%); filter: blur(30px); animation: respira 9s ease-in-out infinite alternate; }
  @keyframes respira { to { transform: translate(-6%, -4%) scale(1.08); opacity: .8; } }

  .pm-logo { display: flex; align-items: center; gap: 12px; color: #fff; width: max-content; }
  .pm-logo:hover { text-decoration: none; }
  .pm-logo img { height: 17px; display: block; }
  .pm-logo i { width: 1px; height: 18px; background: rgba(255, 255, 255, .35); }
  .pm-logo span { font: 500 16px Inter, sans-serif; letter-spacing: -0.01em; }
  .pm-meio { align-self: center; display: grid; gap: 44px; max-width: 560px; }
  .pm-frase { margin: 0; font: 500 clamp(32px, 2.9vw, 44px)/1.08 Inter, sans-serif; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
  .pm-pe { font-size: 12.5px; color: rgba(255, 255, 255, .6); }

  /* prévia abstrata do produto */
  .pv { position: relative; padding-bottom: 54px; }
  .pv-janela, .pv-funil {
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
    backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 30px 60px -30px rgba(5, 10, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
  }
  .pv-janela { padding: 12px 14px 16px; }
  .pv-barra { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .pv-barra span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
  .pv-barra em { width: 46px; height: 16px; border-radius: 5px; background: rgba(255, 255, 255, .08); margin-left: 6px; }
  .pv-barra em + em { margin-left: 0; }
  .pv-barra em.on { background: rgba(255, 255, 255, .22); }
  .pv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
  .pv-tile { padding: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); display: grid; gap: 8px; }
  .pv-rot { display: block; width: 52%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .32); }
  .pv-val { display: block; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .9); }
  .pv-tile svg { width: 100%; height: 26px; overflow: visible; }
  .pv-tile path { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  .pv-graf { position: relative; padding: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
  .pv-graf-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .pv-leg { display: flex; gap: 6px; }
  .pv-leg i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
  .pv-leg i + i { background: rgba(255, 255, 255, .35); }
  .pv-graf svg { display: block; width: 100%; height: 150px; overflow: visible; }
  .pv-grade path { stroke: rgba(255, 255, 255, .1); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
  .pv-area { fill: url(#pv-area); }
  .pv-linha { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round;
    stroke-dasharray: 900; stroke-dashoffset: 900; animation: traca 1.6s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
  .pv-linha2 { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
  @keyframes traca { to { stroke-dashoffset: 0; } }
  .pv-guia { stroke: rgba(255, 255, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .pv-halo { fill: rgba(255, 255, 255, .18); }
  .pv-ponto { fill: #fff; stroke: #2f3fe6; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .pv-dica { position: absolute; right: 22%; top: 22px; display: grid; gap: 6px; padding: 8px 10px; border-radius: 7px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 24px -10px rgba(0, 0, 40, .6); }
  .pv-dica i { width: 44px; height: 5px; border-radius: 3px; background: rgba(23, 26, 32, .25); }
  .pv-dica b { width: 64px; height: 9px; border-radius: 3px; background: #0039f3; }
  .pv-funil { position: absolute; right: -22px; bottom: 0; width: 46%; padding: 14px; display: grid; gap: 8px; }
  .pv-etapa { height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
  .pv-etapa b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)); }

  /* lado do formulário */
  .lado .topo { padding: 0 32px; }
  .palco { padding: 24px 48px 40px; }
  .coluna { max-width: 380px; }
  .cabeca h1 { font-size: 26px; letter-spacing: -0.025em; }
  .cabeca { margin-bottom: 28px; }
}

/* fundo do lado do formulário: um brilho da marca bem sutil no canto */
.lado::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 45% at 100% 0%, color-mix(in srgb, var(--primario) 10%, transparent), transparent 70%); }
:root.claro .lado::before { background: radial-gradient(60% 45% at 100% 0%, rgba(0, 57, 243, .06), transparent 70%); }

/* mobile e tablet: só o formulário, com a faixa da marca no topo */
@media (max-width: 1023px) {
  body::before { content: ""; position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #4a30c2, #0039f3 60%, #4d7cff); }
  .lado::before { background: radial-gradient(110% 38% at 50% 0%, color-mix(in srgb, #4a30c2 22%, transparent), transparent 70%); }
  :root.claro .lado::before { background: radial-gradient(110% 38% at 50% 0%, rgba(74, 48, 194, .09), transparent 70%); }
  .topo { padding-top: 3px; }
}

/* opções de 2º fator (escolher e cadastrar) */
.opcoes { display: grid; gap: 10px; margin-bottom: 18px; }
.opcao {
  width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px; text-align: left;
  border-radius: 8px; border: 1px solid var(--campo); background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; transition: border-color .12s, background .12s, box-shadow .12s;
}
.opcao:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--campo)); background: color-mix(in srgb, var(--acento) 5%, var(--surface)); }
.opcao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcao .oi { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; color: var(--acento-ink);
  background: color-mix(in srgb, var(--acento) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 25%, transparent); }
.opcao b { display: block; font-weight: 500; font-size: 14px; }
.opcao span.od { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.opcao .os { color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.opcao:hover .os { color: var(--ink); }
.opcao.feito { cursor: default; border-color: var(--ring); }
.opcao.feito:hover { background: var(--surface); border-color: var(--ring); }
.opcao.feito .os { color: var(--ok); }
.opcao .rec { font-size: 11.5px; }

/* a coluna como diálogo e a tela de dispositivos não usam o painel */
body.modo-dialogo .pm { display: none; }
body.modo-dialogo { grid-template-columns: minmax(0, 1fr); }

/* diálogo de reverificação aberto num iframe por cima da dash */
html.embutido, html.embutido body { background: transparent !important; color-scheme: dark; }
html.embutido.claro, html.embutido.claro body { color-scheme: light; }
html.embutido .pm, html.embutido .topo, html.embutido .rodape { display: none !important; }
html.embutido .lado::before, html.embutido body::before { display: none !important; }