/*
 * Telas de acesso do painel do seller na v2: login, recuperar e redefinir
 * senha, verificacao em 2 etapas no login, cadastro em etapas, cadastro por
 * convite e redefinir PIN de transacao.
 *
 * So' CSS por cima do markup da v1 (partials/auth-decoration.php,
 * components/form-input.php e assets/css/auth.css): o tema-v2-head.php poe
 * html.tki-layout.tki-auth no servidor (temaWebTelaAcesso) e esta folha vem
 * ANTES do assets/css/auth.css e dos <style> das paginas; por isso todo
 * seletor comeca por html.tki-layout.tki-auth (mais especifico). O convite
 * (registrar/anonimo.php) e o PIN (conta/reset_transaction_pin.php) tinham
 * HTML proprio: na v2 eles montam o mesmo .auth-shell das outras telas.
 *
 * Layout do tki.finance (scratchpad/tki/00-signin.png): coluna do formulario
 * a esquerda e painel da marca a direita (cor da whitelabel escurecida, texto
 * branco acima de 4.5:1 com qualquer cor); no celular so' o formulario, com
 * logo e titulo.
 */

html.tki-layout.tki-auth,
html.tki-layout.tki-auth body {
  height: auto;
  min-height: 100%;
}

html.tki-layout.tki-auth body {
  margin: 0;
  background: var(--tki-card) !important; /* RXPAY: <body style> preto na v1 */
  color: var(--tki-fg);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
}

/* ------------------------------------------------------------ estrutura */

html.tki-layout.tki-auth .auth-shell {
  --auth-escuro: #0b1020;
  --auth-marca-1: color-mix(in oklab, var(--tki-primary) 30%, var(--auth-escuro));
  --auth-marca-2: color-mix(in oklab, var(--tki-primary) 55%, var(--auth-escuro));
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background: var(--tki-card);
  color: var(--tki-fg);
}

html.tki-layout.tki-auth .auth-shell__form {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background: var(--tki-card);
  padding: 40px 20px;
}

html.tki-layout.tki-auth .auth-shell__form-inner {
  max-width: 28rem;
  padding-block: 0;
}

@media (min-width: 992px) {
  html.tki-layout.tki-auth .auth-shell__form {
    padding: 56px 48px;
  }
}

/* ------------------------------------------------------ painel da marca */

html.tki-layout.tki-auth .auth-shell__decoration {
  color: #fff;
  background:
    radial-gradient(70% 50% at 90% 100%, color-mix(in oklab, var(--tki-primary) 55%, transparent), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(165deg, var(--auth-marca-1) 0%, var(--auth-marca-1) 45%, var(--auth-marca-2) 100%);
}

@media (min-width: 992px) {
  html.tki-layout.tki-auth .auth-shell__decoration {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    flex-shrink: 0;
  }
}

html.tki-layout.tki-auth .auth-shell__blob {
  display: none;
}

html.tki-layout.tki-auth .auth-shell__decoration-content {
  padding: 56px 48px 48px;
  gap: 32px;
}

html.tki-layout.tki-auth .auth-shell__decoration h2 {
  max-width: 34rem;
  margin: 0 0 14px;
  overflow-wrap: anywhere; /* título próprio do white-label: domínio ou palavra longa quebra em vez de sair do painel */
  color: #fff;
  font: 700 clamp(2.1rem, 3.1vw, 3rem) / 1.08 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.03em;
}

html.tki-layout.tki-auth .auth-shell__decoration p.auth-decoration-sub {
  max-width: 30rem;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  line-height: 1.55;
}

/* ------------------------------------------------------ cena do painel
   Cenas e opções escolhidas no adm (shared/Aparencia/AuthPainel.php). Regras:
   - só transform, opacity e o traço dos pulsos (stroke-dashoffset) se movem;
   - todo movimento fica dentro de prefers-reduced-motion: no-preference e fora de
     .auth-painel--parado (fora dele a cena é o mesmo desenho, parado);
   - cores saem da marca (--tki-primary), sem branco nem preto puros;
   - medidas em cqi: a cena acompanha a largura do painel. */

html.tki-layout.tki-auth .auth-shell__decoration {
  --auth-luz: color-mix(in oklab, var(--tki-primary) 22%, #f4f6ff);
  --auth-traco: color-mix(in oklab, var(--tki-primary) 40%, rgba(244, 246, 255, 0.34));
  --auth-brilho: color-mix(in oklab, var(--tki-primary) 75%, #f4f6ff);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background:
    radial-gradient(75% 55% at 88% 100%, color-mix(in oklab, var(--auth-brilho-base, var(--tki-primary)) 60%, transparent), transparent 72%),
    linear-gradient(165deg, var(--auth-marca-1) 0%, var(--auth-marca-1) 42%, var(--auth-marca-2) 100%);
}

/* Tom do fundo */
html.tki-layout.tki-auth .auth-painel-tom--noite {
  --auth-marca-1: color-mix(in oklab, var(--tki-primary) 16%, #06080f);
  --auth-marca-2: color-mix(in oklab, var(--tki-primary) 34%, #06080f);
}
html.tki-layout.tki-auth .auth-painel-tom--vivo {
  --auth-luz: color-mix(in oklab, var(--tki-primary) 12%, #fbfbff);
}
/* Vivo: a cor da marca inteira, mas nunca clara demais para o texto branco. Claridade (L) até 0,5
   mantém o subtítulo acima de 4.5:1 mesmo com marca amarela; marca já escura passa como está.
   Sem cor relativa no navegador, o vivo fica igual ao tom marca. */
@supports (color: oklch(from red l c h)) {
  html.tki-layout.tki-auth .auth-painel-tom--vivo {
    --auth-marca-1: oklch(from var(--tki-primary) min(l, 0.42) c h);
    --auth-marca-2: oklch(from var(--tki-primary) min(l, 0.5) c h);
    --auth-brilho-base: var(--auth-marca-2);
  }
}

/* Texto: topo (padrão), embaixo ou sem texto. A faixa de formas de pagamento fica sempre na base. */
html.tki-layout.tki-auth .auth-shell__decoration-content { z-index: 2; }
html.tki-layout.tki-auth .auth-painel-texto--base .auth-shell__decoration-content,
html.tki-layout.tki-auth .auth-painel-texto--oculto .auth-shell__decoration-content {
  justify-content: flex-end;
}
html.tki-layout.tki-auth .auth-painel-texto--base .auth-shell__decoration-content {
  background: linear-gradient(to top, color-mix(in oklab, var(--auth-marca-1) 92%, transparent) 18%, transparent 58%);
}
html.tki-layout.tki-auth .auth-painel-texto--oculto .auth-painel__texto { display: none; }
/* Véu atrás do texto: apaga os traços da cena (anéis, estrelas, fios, pontos) que cruzariam as letras.
   Tem a largura do texto (fit-content), não a do painel. No tom marca com o texto no topo tem a cor
   do próprio fundo e não aparece; embaixo, escurece de leve só a área do texto. */
html.tki-layout.tki-auth .auth-painel__texto { position: relative; isolation: isolate; width: fit-content; }
html.tki-layout.tki-auth .auth-painel__texto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px; pointer-events: none;
  background: color-mix(in oklab, var(--auth-marca-1) 78%, transparent);
  box-shadow: 0 0 48px 40px color-mix(in oklab, var(--auth-marca-1) 78%, transparent);
}

/* Posicionada para ser pintada depois do véu do texto (senão a sombra do véu a cobre no texto embaixo). */
html.tki-layout.tki-auth .auth-painel__formas { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
html.tki-layout.tki-auth .auth-painel__formas span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
  font: 500 13px/1 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: rgba(255, 255, 255, 0.92);
  background: color-mix(in oklab, var(--auth-marca-1) 94%, transparent); border: 1px solid rgba(244, 246, 255, 0.18);
}
html.tki-layout.tki-auth .auth-painel__formas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

html.tki-layout.tki-auth .auth-painel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
html.tki-layout.tki-auth .auth-painel > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

html.tki-layout.tki-auth .auth-painel__grao {
  position: absolute; inset: 0; opacity: 0.16; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- imagem enviada: ocupa o painel inteiro */
html.tki-layout.tki-auth .auth-shell__decoration--imagem { background: var(--auth-marca-1); }
html.tki-layout.tki-auth .auth-painel__imagem {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* --- Cartões */
html.tki-layout.tki-auth .auth-painel__pilha {
  position: absolute; left: 50%; top: 68%; width: 72cqi; aspect-ratio: 1.586;
  transform: translate(-42%, -50%) rotateX(56deg) rotateZ(-36deg); transform-style: preserve-3d;
}
html.tki-layout.tki-auth .auth-painel__cartao {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 5cqi; border-radius: 3.6cqi;
  border: 1px solid rgba(244, 246, 255, 0.22); color: #f6f5fb;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tki-primary) 70%, #f4f6ff), color-mix(in oklab, var(--tki-primary) 80%, #0b1020));
  box-shadow: 0 6cqi 10cqi -4cqi rgba(5, 6, 14, 0.55); transform: translateZ(var(--auth-z));
}
html.tki-layout.tki-auth .auth-painel__cartao:nth-child(1) { --auth-z: 0cqi; background: linear-gradient(135deg, color-mix(in oklab, var(--tki-primary) 30%, #0b1020), color-mix(in oklab, var(--tki-primary) 45%, #0b1020)); }
html.tki-layout.tki-auth .auth-painel__cartao:nth-child(2) { --auth-z: 5cqi; background: linear-gradient(135deg, color-mix(in oklab, var(--tki-primary) 45%, #0b1020), color-mix(in oklab, var(--tki-primary) 60%, #0b1020)); }
html.tki-layout.tki-auth .auth-painel__cartao:nth-child(3) { --auth-z: 10cqi; }
html.tki-layout.tki-auth .auth-painel__cartao:nth-child(4) { --auth-z: 15cqi; background: linear-gradient(135deg, color-mix(in oklab, var(--tki-primary) 40%, #f4f6ff), color-mix(in oklab, var(--tki-primary) 85%, #f4f6ff)); }
html.tki-layout.tki-auth .auth-painel__cartao:nth-child(5) { --auth-z: 20cqi; color: var(--auth-marca-1); background: linear-gradient(135deg, #f1eff7, color-mix(in oklab, var(--tki-primary) 18%, #f4f6ff)); }
html.tki-layout.tki-auth .auth-painel__cartao-topo { display: flex; justify-content: space-between; align-items: center; font: 700 3.4cqi/1 'DM Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }
html.tki-layout.tki-auth .auth-painel__aprox { width: 5.5cqi; height: 5.5cqi; fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.8; }
html.tki-layout.tki-auth .auth-painel__chip { width: 9cqi; height: 7cqi; border-radius: 1.4cqi; background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25)); }
html.tki-layout.tki-auth .auth-painel__digitos { align-self: end; display: flex; gap: 2cqi; font: 500 3.2cqi/1 'DM Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.2em; opacity: 0.8; }
html.tki-layout.tki-auth .auth-painel__digitos i { font-style: normal; }

/* --- Brasil */
html.tki-layout.tki-auth .auth-painel__mapa-ponto { fill: var(--auth-traco); }
html.tki-layout.tki-auth .auth-painel__centro { fill: var(--auth-brilho); }
html.tki-layout.tki-auth .auth-painel__onda { fill: none; stroke: var(--auth-brilho); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
html.tki-layout.tki-auth .auth-painel__arco { fill: none; stroke: rgba(244, 246, 255, 0.12); stroke-width: 1.2; }
html.tki-layout.tki-auth .auth-painel__corre { fill: none; stroke: var(--auth-luz); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 26 600; stroke-dashoffset: 626; }

/* --- Relevo */
html.tki-layout.tki-auth .auth-painel--relevo path { fill: none; stroke: color-mix(in oklab, var(--tki-primary) 45%, rgba(244, 246, 255, 0.6)); stroke-width: 1.3; }
html.tki-layout.tki-auth .auth-painel--relevo path.auth-painel__curva--forte { stroke: var(--auth-brilho); stroke-width: 1.6; }
html.tki-layout.tki-auth .auth-painel__relevo-giro { transform-box: view-box; transform-origin: 780px 820px; }

/* --- Órbita */
html.tki-layout.tki-auth .auth-painel__orbita-anel { fill: none; stroke: var(--auth-traco); stroke-width: 1.3; }
html.tki-layout.tki-auth .auth-painel__orbita-anel--pontilhado { stroke-dasharray: 2 14; stroke-linecap: round; }
html.tki-layout.tki-auth .auth-painel__giro { transform-box: view-box; transform-origin: 720px 780px; }
html.tki-layout.tki-auth .auth-painel__contra { transform-box: view-box; transform-origin: 0 0; }
html.tki-layout.tki-auth .auth-painel__astro { fill: color-mix(in oklab, var(--tki-primary) 45%, #f4f6ff); }
html.tki-layout.tki-auth .auth-painel__astro-icone { fill: none; stroke: var(--auth-marca-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.tki-layout.tki-auth .auth-painel__sol { fill: var(--auth-brilho); }
html.tki-layout.tki-auth .auth-painel__halo { fill: color-mix(in oklab, var(--tki-primary) 55%, transparent); opacity: 0.35; transform-box: fill-box; transform-origin: center; }
html.tki-layout.tki-auth .auth-painel__estrela { fill: #f6f5fb; }

/* --- Correntes */
html.tki-layout.tki-auth .auth-painel__fio { fill: none; stroke: color-mix(in oklab, var(--tki-primary) 50%, rgba(244, 246, 255, 0.55)); stroke-width: 1.5; }
html.tki-layout.tki-auth .auth-painel__pulso { fill: none; stroke: var(--auth-luz); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 140 1420; stroke-dashoffset: 1560; }

/* --- Blocos */
html.tki-layout.tki-auth .auth-painel__cubo { stroke: rgba(244, 246, 255, 0.08); stroke-width: 1; }
html.tki-layout.tki-auth .auth-painel__cubo-topo { fill: color-mix(in oklab, var(--tki-primary) 55%, #f4f6ff); }
html.tki-layout.tki-auth .auth-painel__cubo-esq { fill: color-mix(in oklab, var(--tki-primary) 65%, #0b1020); }
html.tki-layout.tki-auth .auth-painel__cubo-dir { fill: color-mix(in oklab, var(--tki-primary) 40%, #0b1020); }

/* --- Aurora */
html.tki-layout.tki-auth .auth-painel__faixa {
  position: absolute; left: -30%; width: 160%; height: 26%; border-radius: 50%; mix-blend-mode: screen; opacity: 0.55;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--tki-primary) 75%, #f4f6ff) 40%, color-mix(in oklab, var(--tki-primary) 40%, transparent) 70%, transparent 100%);
  transform: rotate(var(--auth-giro));
}
html.tki-layout.tki-auth .auth-painel__faixa:nth-child(1) { --auth-giro: -16deg; top: 48%; }
html.tki-layout.tki-auth .auth-painel__faixa:nth-child(2) { --auth-giro: -11deg; top: 60%; height: 18%; opacity: 0.4; }
html.tki-layout.tki-auth .auth-painel__faixa:nth-child(3) { --auth-giro: -20deg; top: 74%; height: 34%; opacity: 0.3; }
html.tki-layout.tki-auth .auth-painel__faixa:nth-child(4) { --auth-giro: -8deg; top: 34%; height: 12%; opacity: 0.18; }

/* --- Grade (na cena, dentro do container: cqi no próprio container cairia na largura da tela) */
html.tki-layout.tki-auth .auth-painel--grade {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 5cqi 5cqi,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 5cqi 5cqi;
}

@media (prefers-reduced-motion: no-preference) {
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__cartao { animation: auth-flutua 7s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__cartao:nth-child(2) { animation-delay: -1.2s; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__cartao:nth-child(3) { animation-delay: -2.4s; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__cartao:nth-child(4) { animation-delay: -3.6s; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__cartao:nth-child(5) { animation-delay: -4.8s; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__onda { animation: auth-onda 3.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__corre { animation: auth-traco 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__relevo-giro { animation: auth-gira 260s linear infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__giro--1 { animation: auth-gira 70s linear infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__giro--2 { animation: auth-gira 110s linear infinite reverse; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__giro--3 { animation: auth-gira 160s linear infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__contra--1 { animation: auth-gira 70s linear infinite reverse; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__contra--2 { animation: auth-gira 110s linear infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__contra--3 { animation: auth-gira 160s linear infinite reverse; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__halo { animation: auth-pulsa 6s ease-in-out infinite alternate; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__estrela--pisca { animation: auth-pisca 4s ease-in-out infinite alternate; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__pulso { animation: auth-traco 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__cubo--sobe { animation: auth-sobe 5s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__faixa { animation: auth-deriva 22s ease-in-out infinite alternate; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__faixa:nth-child(2) { animation-duration: 30s; animation-direction: alternate-reverse; }
  html.tki-layout.tki-auth :not(.auth-painel--parado) > .auth-painel .auth-painel__faixa:nth-child(3) { animation-duration: 26s; }
}

@keyframes auth-flutua { to { transform: translateZ(calc(var(--auth-z) + 3cqi)); } }
@keyframes auth-onda { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes auth-traco { to { stroke-dashoffset: 0; } }
@keyframes auth-gira { to { transform: rotate(360deg); } }
@keyframes auth-pulsa { from { transform: scale(0.92); } to { transform: scale(1.12); } }
@keyframes auth-pisca { from { opacity: 0.15; } to { opacity: 0.8; } }
@keyframes auth-sobe { to { transform: translateY(-14px); } }
@keyframes auth-deriva { from { transform: translate(-6%, 0) rotate(var(--auth-giro)); } to { transform: translate(6%, -3%) rotate(var(--auth-giro)); } }

/* ------------------------------------------------------------ cabecalho */

/* No celular tambem mostra titulo e subtitulo (a v1 so' mostrava o logo). */
html.tki-layout.tki-auth .auth-header-desktop {
  display: block;
  margin-bottom: 28px;
}

html.tki-layout.tki-auth .auth-header-mobile {
  display: none;
}

html.tki-layout.tki-auth .auth-logo {
  display: block;
  margin-bottom: 28px;
}

html.tki-layout.tki-auth .auth-logo img {
  display: block;
  max-width: 10rem;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  color: var(--tki-muted);
  font-size: 14px;
}

html.tki-layout.tki-auth .auth-title,
html.tki-layout.tki-auth .auth-shell h1 {
  margin: 0 0 6px;
  color: var(--tki-fg) !important;
  font: 700 30px / 1.15 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.025em;
}

html.tki-layout.tki-auth .auth-subtitle {
  margin: 0;
  color: var(--tki-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ campos */

html.tki-layout.tki-auth .auth-fields {
  gap: 18px;
}

html.tki-layout.tki-auth .auth-label {
  margin: 0 0 6px 2px;
  color: var(--tki-fg);
  font-size: 14px;
  font-weight: 500;
}

html.tki-layout.tki-auth .auth-shell .auth-input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--tki-input-border);
  border-radius: var(--tki-radius-control);
  background: var(--tki-input-bg);
  color: var(--tki-fg);
  font: 400 15px 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

html.tki-layout.tki-auth .auth-shell .auth-input--has-icon {
  padding-left: 44px;
}

html.tki-layout.tki-auth .auth-shell select.auth-input {
  padding-right: 36px;
}

html.tki-layout.tki-auth .auth-shell .auth-input::placeholder {
  color: var(--tki-placeholder);
  opacity: 1;
}

html.tki-layout.tki-auth .auth-shell .auth-input:hover {
  border-color: var(--tki-input-border-hover);
}

html.tki-layout.tki-auth .auth-shell .auth-input:focus,
html.tki-layout.tki-auth .auth-shell .auth-input:focus-visible,
html.tki-layout.tki-auth .auth-shell input:not([type='checkbox']):not([type='radio']):focus,
html.tki-layout.tki-auth .auth-shell select:focus {
  outline: 0;
  border-color: var(--tki-primary);
  box-shadow: var(--tki-ring);
}

html.tki-layout.tki-auth .auth-shell .auth-input.is-invalid,
html.tki-layout.tki-auth .auth-shell .auth-input.invalid {
  border-color: var(--tki-danger) !important;
}

html.tki-layout.tki-auth .auth-input-icon {
  left: 16px;
  color: var(--tki-muted);
  font-size: 14px;
}

html.tki-layout.tki-auth .auth-password-toggle,
html.tki-layout.tki-auth #toggleSenha,
html.tki-layout.tki-auth #toggleConfirma {
  right: 4px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--tki-muted);
  opacity: 1;
}

html.tki-layout.tki-auth #toggleSenha,
html.tki-layout.tki-auth #toggleConfirma {
  padding: 0 !important;
  transform: translateY(-50%) !important;
}

html.tki-layout.tki-auth #toggleSenha i,
html.tki-layout.tki-auth #toggleConfirma i {
  color: var(--tki-muted) !important;
}

html.tki-layout.tki-auth .auth-password-toggle:hover,
html.tki-layout.tki-auth #toggleSenha:hover,
html.tki-layout.tki-auth #toggleConfirma:hover {
  background: var(--tki-hover);
  color: var(--tki-fg);
}

html.tki-layout.tki-auth .auth-field-error {
  min-height: 0;
  margin: 6px 0 0 2px;
  color: var(--tki-danger-text);
  font-size: 13px;
}

html.tki-layout.tki-auth .auth-field-error:empty {
  display: none;
}

/* Lembrar de mim (quadrado com check, como o tki) + links */
html.tki-layout.tki-auth .auth-checkbox-row,
html.tki-layout.tki-auth .auth-checkbox-label {
  min-height: 40px;
}

html.tki-layout.tki-auth .auth-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--tki-input-border-hover);
  border-radius: 6px;
  background: var(--tki-input-bg);
}

html.tki-layout.tki-auth .auth-checkbox:checked {
  border-color: var(--tki-primary);
  background: var(--tki-primary);
}

html.tki-layout.tki-auth .auth-checkbox::before {
  width: 10px;
  height: 10px;
  background: #fff;
}

html.tki-layout.tki-auth .auth-checkbox:checked::before {
  transform: scale(1);
}

html.tki-layout.tki-auth .auth-checkbox-text {
  color: var(--tki-fg-2) !important; /* o cadastro poe cor fixa inline */
  font-size: 14px;
  line-height: 1.5;
}

html.tki-layout.tki-auth .auth-checkbox-text a,
html.tki-layout.tki-auth .auth-checkbox-text button {
  color: var(--tki-primary-text) !important;
  font-weight: 600;
}

html.tki-layout.tki-auth .auth-link,
html.tki-layout.tki-auth .auth-footer-text a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--tki-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

html.tki-layout.tki-auth .auth-link:hover,
html.tki-layout.tki-auth .auth-footer-text a:hover {
  color: var(--tki-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.tki-layout.tki-auth .auth-password-toggle:focus-visible,
html.tki-layout.tki-auth .auth-link:focus-visible,
html.tki-layout.tki-auth .auth-footer-text a:focus-visible,
html.tki-layout.tki-auth .auth-checkbox:focus-visible,
html.tki-layout.tki-auth .auth-shell a:focus-visible,
html.tki-layout.tki-auth .auth-shell button:focus-visible {
  outline: 2px solid var(--tki-primary);
  outline-offset: 2px;
}

html.tki-layout.tki-auth .auth-footer-text {
  margin-top: 20px;
  color: var(--tki-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------ botoes */

html.tki-layout.tki-auth .auth-submit,
html.tki-layout.tki-auth .btn-verify {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--tki-radius-control);
  background: var(--tki-primary);
  color: #fff;
  font: 600 15px 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--tki-primary) 70%, transparent);
  transition: filter 0.15s, box-shadow 0.15s;
}

html.tki-layout.tki-auth .auth-submit:hover,
html.tki-layout.tki-auth .btn-verify:hover:not(:disabled) {
  filter: brightness(0.94);
  transform: none;
  opacity: 1;
}

html.tki-layout.tki-auth .auth-submit:focus-visible,
html.tki-layout.tki-auth .btn-verify:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--tki-card), 0 0 0 5px var(--tki-primary);
}

html.tki-layout.tki-auth .auth-submit:disabled,
html.tki-layout.tki-auth .btn-verify:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}

html.tki-layout.tki-auth .auth-submit.loading {
  opacity: 0.8;
}

html.tki-layout.tki-auth .auth-submit--inline {
  width: auto;
  min-width: 140px;
  height: 48px;
  padding: 0 22px;
}

/* ------------------------------------------------ mensagens (erro/sucesso) */

html.tki-layout.tki-auth .auth-shell .alert,
html.tki-layout.tki-auth .auth-shell .notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid !important;
  border-radius: var(--tki-radius-control) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

html.tki-layout.tki-auth .auth-shell .alert i,
html.tki-layout.tki-auth .auth-shell .notice i {
  margin: 2px 0 0 !important;
}

html.tki-layout.tki-auth .auth-shell .alert-danger,
html.tki-layout.tki-auth .auth-shell .notice-error {
  border-color: var(--tki-soft-danger-bd) !important;
  background: var(--tki-soft-danger-bg);
  color: var(--tki-soft-danger-fg);
}

html.tki-layout.tki-auth .auth-shell .alert-warning {
  border-color: var(--tki-soft-warning-bd) !important;
  background: var(--tki-soft-warning-bg);
  color: var(--tki-soft-warning-fg);
}

html.tki-layout.tki-auth .auth-shell .alert-primary,
html.tki-layout.tki-auth .auth-shell .notice-success {
  border-color: var(--tki-soft-success-bd) !important;
  background: var(--tki-soft-success-bg);
  color: var(--tki-soft-success-fg);
}

html.tki-layout.tki-auth .auth-shell .notice-info {
  border-color: var(--tki-soft-info-bd) !important;
  background: var(--tki-soft-info-bg);
  color: var(--tki-soft-info-fg);
}

html.tki-layout.tki-auth .auth-shell .notice.mb-3 {
  margin-bottom: 18px !important;
}

/* ----------------------------------- verificacao em 2 etapas (login com 2FA) */

html.tki-layout.tki-auth .verify-wrapper {
  width: 100%;
  max-width: 28rem;
}

html.tki-layout.tki-auth .verify-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html.tki-layout.tki-auth .shield-icon {
  width: 56px;
  height: 56px;
  margin: 0 0 24px;
  border: 1px solid var(--tki-soft-primary-bd);
  border-radius: 16px;
  background: var(--tki-soft-primary-bg);
}

html.tki-layout.tki-auth .shield-icon i {
  color: var(--tki-primary-text);
  font-size: 24px;
}

html.tki-layout.tki-auth .verify-card h1,
html.tki-layout.tki-auth .verify-card > p {
  text-align: left !important;
}

html.tki-layout.tki-auth .verify-card > p {
  margin: 0;
  color: var(--tki-muted) !important;
  font-size: 15px !important;
  line-height: 1.5;
}

html.tki-layout.tki-auth .verify-card > p strong {
  color: var(--tki-fg);
}

html.tki-layout.tki-auth #digitGroup {
  justify-content: flex-start;
  margin: 28px 0 16px;
}

html.tki-layout.tki-auth .auth-otp-group {
  gap: 10px;
}

html.tki-layout.tki-auth .auth-otp-input {
  width: 52px;
  height: 60px;
  border: 1px solid var(--tki-input-border-hover);
  border-radius: var(--tki-radius-control);
  background: var(--tki-input-bg);
  color: var(--tki-fg);
  font: 700 24px 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html.tki-layout.tki-auth .auth-otp-input:focus {
  border-color: var(--tki-primary);
  box-shadow: var(--tki-ring);
}

html.tki-layout.tki-auth .auth-otp-input.filled {
  border-color: var(--tki-primary);
  background: var(--tki-soft-primary-bg);
}

html.tki-layout.tki-auth .auth-otp-input.error {
  border-color: var(--tki-danger);
  background: var(--tki-soft-danger-bg);
}

html.tki-layout.tki-auth .attempts-bar {
  justify-content: flex-start;
}

html.tki-layout.tki-auth .attempt-dot {
  background: var(--tki-soft-danger-bd);
}

html.tki-layout.tki-auth .attempt-dot.used {
  background: var(--tki-danger-text);
}

html.tki-layout.tki-auth .error-box {
  border-color: var(--tki-soft-danger-bd);
  border-radius: var(--tki-radius-control);
  background: var(--tki-soft-danger-bg);
  color: var(--tki-soft-danger-fg);
  font-size: 14px;
}

html.tki-layout.tki-auth .timer-box {
  text-align: left;
  color: var(--tki-muted);
  font-size: 14px;
}

html.tki-layout.tki-auth .timer-count {
  color: var(--tki-danger-text);
}

/* rodape "Abra o app" e "Cancelar e sair" */
html.tki-layout.tki-auth .verify-card > p.verify-note {
  margin-top: 14px !important;
  color: var(--tki-muted) !important;
  font-size: 13px !important;
}

html.tki-layout.tki-auth .verify-card > div.verify-footer {
  margin-top: 24px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--tki-border) !important;
  text-align: left !important;
}

html.tki-layout.tki-auth .verify-card > div.verify-footer a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 10px;
  margin-left: -10px;
  border-radius: 10px;
  color: var(--tki-muted) !important;
  font-size: 14px !important;
  font-weight: 500;
}

html.tki-layout.tki-auth .verify-card > div.verify-footer a:hover {
  background: var(--tki-soft-danger-bg);
  color: var(--tki-soft-danger-fg) !important;
}

/* ------------------------------------------------ cadastro em etapas (registrar) */

html.tki-layout.tki-auth #mount {
  width: 100%;
  max-width: 36rem;
  padding: 0 !important;
}

html.tki-layout.tki-auth #mount header .auth-logo {
  margin-bottom: 20px;
}

html.tki-layout.tki-auth #mount section {
  border-top: 0 !important;
  padding-top: 8px !important;
}

html.tki-layout.tki-auth #mount section h3 {
  margin: 0 0 4px !important;
  color: var(--tki-fg) !important;
  font: 700 26px / 1.2 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}

html.tki-layout.tki-auth #mount section h3 + p,
html.tki-layout.tki-auth #mount #legend {
  color: var(--tki-muted) !important;
  font-size: 15px !important;
}

html.tki-layout.tki-auth #mount .form-group {
  margin-bottom: 4px;
}

html.tki-layout.tki-auth #mount label.block {
  display: block;
  margin: 0 0 6px 2px !important;
  color: var(--tki-fg);
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Etapas: bolinhas ligadas por linha, no visual do v2Passos do kit */
html.tki-layout.tki-auth .auth-stepper-nav {
  gap: 0;
}

html.tki-layout.tki-auth .auth-step-node {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--tki-input-border-hover);
  background: var(--tki-card);
  color: var(--tki-muted);
  font-size: 12px;
}

html.tki-layout.tki-auth .auth-step-node--completed {
  border-color: var(--tki-primary);
  background: var(--tki-primary);
  color: #fff;
}

html.tki-layout.tki-auth .auth-step-node--current {
  border-color: var(--tki-primary);
  background: var(--tki-card);
  color: var(--tki-primary-text);
  box-shadow: var(--tki-ring);
}

html.tki-layout.tki-auth .auth-step-connector {
  height: 2px;
  margin: 0 4px;
  border-radius: 2px;
  background: var(--tki-border);
}

html.tki-layout.tki-auth .auth-step-connector--filled {
  background: var(--tki-primary);
}

html.tki-layout.tki-auth #stepLabel {
  margin: 10px 0 0 !important;
  color: var(--tki-muted) !important;
  font-size: 13px !important;
  font-weight: 600;
}

/* Tipo de cadastro (PF/PJ) */
html.tki-layout.tki-auth .auth-option-card {
  min-height: 72px;
  border: 1px solid var(--tki-input-border);
  border-radius: var(--tki-radius-card);
  background: var(--tki-card);
}

html.tki-layout.tki-auth .auth-option-card:hover {
  border-color: var(--tki-input-border-hover);
  background: var(--tki-hover);
}

html.tki-layout.tki-auth .auth-option-card--active,
html.tki-layout.tki-auth .auth-option-card--active:hover {
  border-color: var(--tki-primary);
  background: var(--tki-soft-primary-bg);
  box-shadow: var(--tki-ring);
}

html.tki-layout.tki-auth .auth-option-card__icon {
  background: var(--tki-hover);
  color: var(--tki-muted);
}

html.tki-layout.tki-auth .auth-option-card__text strong {
  color: var(--tki-fg);
}

html.tki-layout.tki-auth .auth-option-card__text span {
  color: var(--tki-muted);
}

/* Arquivos (documentos) */
html.tki-layout.tki-auth #mount input[type='file'] {
  width: 100%;
  padding: 8px !important;
  border: 1px dashed var(--tki-input-border-hover) !important;
  border-radius: var(--tki-radius-control) !important;
  background: var(--tki-surface-2);
  color: var(--tki-fg-2) !important;
  font-size: 14px;
}

html.tki-layout.tki-auth #mount input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 10px 16px;
  border: 1px solid var(--tki-input-border);
  border-radius: 10px;
  background: var(--tki-card);
  color: var(--tki-fg);
  font: 600 14px 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

html.tki-layout.tki-auth #mount input[type='file']::file-selector-button:hover {
  background: var(--tki-hover);
}

/* Acoes do assistente */
html.tki-layout.tki-auth #mount .border-line {
  border-color: var(--tki-border) !important;
}

html.tki-layout.tki-auth #prev {
  min-height: 48px;
  padding: 0 22px !important;
  border: 1px solid var(--tki-input-border) !important;
  border-radius: var(--tki-radius-control) !important;
  background: var(--tki-card) !important;
  color: var(--tki-fg) !important;
  font-weight: 600;
}

html.tki-layout.tki-auth #prev:hover:not(:disabled) {
  background: var(--tki-hover) !important;
}

html.tki-layout.tki-auth #prev:disabled {
  color: var(--tki-muted) !important;
  opacity: 0.7 !important;
}

html.tki-layout.tki-auth #mount .text-mute {
  color: var(--tki-muted) !important;
}

/* Toasts proprios do cadastro */
html.tki-layout.tki-auth .toast-item {
  border: 1px solid var(--tki-border);
  border-left-width: 4px;
  border-radius: var(--tki-radius-control);
  background: var(--tki-card);
  color: var(--tki-fg);
  box-shadow: var(--tki-shadow-pop);
}

html.tki-layout.tki-auth .toast-success { border-left-color: var(--tki-success); }
html.tki-layout.tki-auth .toast-error { border-left-color: var(--tki-danger); }
html.tki-layout.tki-auth .toast-blocked { border-left-color: var(--tki-warning); }
html.tki-layout.tki-auth .toast-pending { border-left-color: var(--tki-primary); }

/* Termos/politica (modal proprio do cadastro, com estilo inline) */
html.tki-layout.tki-auth #legalModal > div:nth-child(2) {
  border-radius: var(--tki-radius-card) !important;
  background: var(--tki-card) !important;
}

html.tki-layout.tki-auth #legalModalTitle {
  color: var(--tki-fg) !important;
}

html.tki-layout.tki-auth #legalModalBody {
  color: var(--tki-fg-2) !important;
}

/* ------------------------------------------ convite e PIN (markup da v2) */

/* retorno do convite: o script da v1 troca a classe para msg / msg error / msg success */
html.tki-layout.tki-auth #form-msg {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

html.tki-layout.tki-auth #form-msg:empty {
  display: none;
}

html.tki-layout.tki-auth #form-msg.error,
html.tki-layout.tki-auth #form-msg.success {
  padding: 12px 14px;
  border: 1px solid;
  border-radius: var(--tki-radius-control);
}

html.tki-layout.tki-auth #form-msg.error {
  border-color: var(--tki-soft-danger-bd);
  background: var(--tki-soft-danger-bg);
  color: var(--tki-soft-danger-fg);
}

html.tki-layout.tki-auth #form-msg.success {
  border-color: var(--tki-soft-success-bd);
  background: var(--tki-soft-success-bg);
  color: var(--tki-soft-success-fg);
}

html.tki-layout.tki-auth .auth-estado {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border: 1px solid var(--tki-soft-primary-bd);
  border-radius: 16px;
  background: var(--tki-soft-primary-bg);
  color: var(--tki-primary-text);
  font-size: 22px;
}

html.tki-layout.tki-auth .auth-estado.is-sucesso {
  border-color: var(--tki-soft-success-bd);
  background: var(--tki-soft-success-bg);
  color: var(--tki-success-text);
}

html.tki-layout.tki-auth .auth-estado.is-erro {
  border-color: var(--tki-soft-danger-bd);
  background: var(--tki-soft-danger-bg);
  color: var(--tki-danger-text);
}

html.tki-layout.tki-auth .auth-conta {
  margin: 0;
  color: var(--tki-muted);
  font-size: 14px;
}

html.tki-layout.tki-auth .auth-conta strong {
  color: var(--tki-fg);
}

html.tki-layout.tki-auth .auth-dica {
  margin-top: 8px;
  font-size: 13px;
}

html.tki-layout.tki-auth .auth-shell .auth-pin {
  letter-spacing: 0.35em;
  font-weight: 700;
}

html.tki-layout.tki-auth .auth-botao-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

html.tki-layout.tki-auth .auth-botao-link.is-secundario {
  border: 1px solid var(--tki-input-border);
  background: var(--tki-card);
  color: var(--tki-fg);
  box-shadow: none;
}

html.tki-layout.tki-auth .auth-botao-link.is-secundario:hover {
  background: var(--tki-hover);
  filter: none;
}

/* ------------------------------------------------------------------ escuro */

html.tki-layout.tki-auth[data-bs-theme='dark'] .auth-shell {
  --auth-escuro: #05070d;
}

html.tki-layout.tki-auth[data-bs-theme='dark'] .auth-shell .auth-input,
html.tki-layout.tki-auth[data-bs-theme='dark'] .auth-otp-input {
  box-shadow: none;
}

/* ----------------------------------------------------------------- celular */

@media (max-width: 991.98px) {
  html.tki-layout.tki-auth .auth-shell__form {
    align-items: flex-start;
    padding: 40px 16px 32px;
  }

  html.tki-layout.tki-auth .auth-logo {
    margin-bottom: 24px;
  }
}

@media (max-width: 575.98px) {
  html.tki-layout.tki-auth .auth-title,
  html.tki-layout.tki-auth .auth-shell h1 {
    font-size: 26px !important;
  }

  html.tki-layout.tki-auth #mount section h3 {
    font-size: 23px !important;
  }

  html.tki-layout.tki-auth .auth-otp-group {
    gap: 8px;
  }

  html.tki-layout.tki-auth .auth-otp-input {
    width: 46px;
    height: 54px;
    font-size: 22px;
  }

  /* inputs com 16px no celular: o iOS nao da' zoom ao focar */
  html.tki-layout.tki-auth .auth-shell .auth-input {
    font-size: 16px;
  }

  html.tki-layout.tki-auth #prev,
  html.tki-layout.tki-auth #next,
  html.tki-layout.tki-auth #submit {
    width: 100%;
  }
}

@media (max-width: 360px) {
  html.tki-layout.tki-auth .auth-otp-input {
    width: 40px;
    height: 50px;
  }
}

/* ------------------------------------ icones (Lucide; o icons.min.css saiu) */

html.tki-layout.tki-auth .auth-input-icon svg.lucide {
  display: block;
  width: 16px;
  height: 16px;
}

html.tki-layout.tki-auth .auth-password-toggle svg.lucide,
html.tki-layout.tki-auth #toggleSenha svg.lucide,
html.tki-layout.tki-auth #toggleConfirma svg.lucide {
  width: 16px;
  height: 16px;
}

html.tki-layout.tki-auth #toggleSenha svg.lucide,
html.tki-layout.tki-auth #toggleConfirma svg.lucide {
  color: var(--tki-muted) !important;
}

html.tki-layout.tki-auth .auth-shell .alert svg.lucide,
html.tki-layout.tki-auth .auth-shell .notice svg.lucide {
  width: 16px;
  height: 16px;
  margin: 2px 0 0 !important;
}

html.tki-layout.tki-auth .shield-icon svg.lucide {
  width: 24px;
  height: 24px;
  color: var(--tki-primary-text);
}

html.tki-layout.tki-auth .auth-estado svg.lucide {
  width: 22px;
  height: 22px;
}

html.tki-layout.tki-auth .auth-step-node svg.lucide {
  width: 14px;
  height: 14px;
}