/* ============================================================================
   KRYPTA BRAND LAYER — v4.44 (Brand Guidelines v2.1)
   ----------------------------------------------------------------------------
   Carregada DEPOIS de app.css e dos componentes: re-tokeniza o sistema para
   o padrão visual da KRYPTA (dark = padrão, light = espelho fiel) e aplica
   os componentes de marca (tipografia Space Grotesk/Inter/JetBrains Mono,
   grade de fundo, topbar de vidro, gradiente cyan→violet, footer animado).

   EXCEÇÃO OFICIAL (regra do Fábio): a SIMULAÇÃO DO WHATSAPP não muda —
   nenhuma variável de chat (--bubble-*, --wa-*) é tocada aqui, e os verdes
   do WhatsApp (#00a884/#25d366) permanecem nos componentes de conversa.
   ============================================================================ */

/* ── TOKENS — DARK (padrão) ─────────────────────────────────────────────── */
:root {
  /* superfícies (rampa ancorada em #0D1418 · H202/S30 — guia v2.1) */
  --bg:        #0D1418;
  --bg-soft:   #151E23;
  --bg-elev:   #1A252B;
  --bg-elev-2: #1F2A30;
  --border:       #2D3A41;
  --border-soft:  #243038;
  --line-soft:    #243038;

  --text:      #FFFFFF;
  --text-soft: #CBD5E1;
  --text-mute: #94A3B8;

  /* marca */
  --k-cyan:    #00D1FF;
  --k-violet:  #A855F7;
  --k-blue:    #2563EB;
  --k-magenta: #EC4899;
  --k-gradient: linear-gradient(135deg, var(--k-cyan) 0%, var(--k-violet) 100%);
  --k-grid-line: rgba(0, 209, 255, 0.035);
  --k-shadow-soft: 0 8px 32px rgba(3, 8, 11, 0.55);
  --k-glow-cyan: 0 0 24px rgba(0, 209, 255, 0.15);
  --k-glass: rgba(13, 20, 24, 0.80);

  /* semânticos (usados nos templates via var — tema claro re-mapeia) */
  --ok:        #0e9f6e;
  --ok-bg:     #0e6b4f;
  --warn:      #d4a017;
  --warn-soft: #ffb547;
  --warn-bg:   #8a6d1a;
  --bad:       #e05252;
  --bad-bg:    #7c2d2d;
  --bad-soft:  #e0567b;
  --info:      #4ea8de;
  --on-info:   #08222e;
  --on-violet: #1c1233;
  --k-violet-ui: #a07eff;
  --chip:      #26333B;
  --chip-2:    #2E3B44;
  --chip-3:    #3B4A54;
}

/* ── TOKENS — LIGHT ─────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:        #FFFFFF;
  --bg-soft:   #F8FAFC;
  --bg-elev:   #F1F5F9;
  --bg-elev-2: #E9EEF4;
  --border:       #CBD5E1;
  --border-soft:  #E2E8F0;
  --line-soft:    #E2E8F0;

  --text:      #0F172A;
  --text-soft: #334155;
  --text-mute: #64748B;

  --k-cyan:    #00B8E6;
  --k-violet:  #9333EA;
  --k-blue:    #1D4ED8;
  --k-magenta: #DB2777;
  --k-gradient: linear-gradient(135deg, var(--k-cyan) 0%, var(--k-violet) 100%);
  --k-grid-line: rgba(0, 184, 230, 0.06);
  --k-shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
  --k-glow-cyan: 0 4px 24px rgba(0, 184, 230, 0.12);
  --k-glass: rgba(255, 255, 255, 0.85);

  --ok:        #059669;
  --ok-bg:     #D1FAE5;
  /* v4.45 — o marrom #B45309 morreu (pedido do Fábio); âmbar da paleta */
  --warn:      #D97706;
  --warn-soft: #F59E0B;
  --warn-bg:   #FEF3C7;
  --bad:       #DC2626;
  --bad-bg:    #FEE2E2;
  --bad-soft:  #E11D48;
  --info:      #0284C7;
  --on-info:   #063A52;
  --on-violet: #FFFFFF;
  --k-violet-ui: #7C3AED;
  --chip:      #E2E8F0;
  --chip-2:    #D8E0E8;
  --chip-3:    #CBD5E1;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
}

/* ── TIPOGRAFIA DE MARCA ────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.page-title, .card-title, h1, h2, h3, h4, h5,
.modal-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.nav-section-label, .hero-eyebrow, .mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── GRADE DE FUNDO (assinatura da marca) ───────────────────────────────── */
.main > .content {
  position: relative;
}
/* v4.58.2 — a grade fica ATRÁS do conteúdo com z-index NEGATIVO. A versão
   anterior (grade em 0 + .app-shell em 1) criava um stacking context que
   prendia TODO modal do Bootstrap abaixo do .modal-backdrop (z-index 1050,
   filho do <body>): o modal aparecia "fosco" atrás do véu e os cliques
   morriam no backdrop (bug do "Novo usuário" que não clica). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--k-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--k-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: -1;
}
.app-shell { position: relative; }

/* ── SIDEBAR + MARCA ────────────────────────────────────────────────────── */
.sidebar {
  border-right: 1px solid var(--border-soft);
}
.sidebar .brand {
  /* v4.45 — logo oficial: o DIAMANTE KRYPTA (SVG inline no base.html);
     o quadrado gradiente com a letra "C" morreu. */
  /* v6.2 (decreto 13/08: 'a logo do sidebar... e SEM BORDA') — o
     diamante é a marca; moldura em volta dele é ruído. Fica só o brilho
     que o próprio traço projeta. */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, .45));
}
.sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(0, 209, 255, 0.14), rgba(168, 85, 247, 0.14));
  color: var(--text);
  border-left: 2px solid var(--k-cyan);
}
html[data-theme="light"] .sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(0, 184, 230, 0.12), rgba(147, 51, 234, 0.10));
}

/* v7.2 (pedido 14/08) — a topbar de vidro e o theme-toggle MORRERAM junto
   com a topbar (o seletor de Tema oficial vive em /preferencias).
   .page-title FICA: 20+ templates usam <h1 class="page-title"> DENTRO do
   content (configuracoes, perfil, perfis, fluxos…) — não é órfã da topbar. */
.page-title {
  font-weight: 700;
}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card-x {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-x:hover {
  border-color: var(--border);
  box-shadow: var(--k-shadow-soft);
}
html[data-theme="light"] .card-x {
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* ── BOTÕES ─────────────────────────────────────────────────────────────── */
.btn-brand {
  background: var(--k-gradient) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 9px;
  box-shadow: var(--k-glow-cyan);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
/* btn-outline-light do Bootstrap é branco-fixo → invisível no tema claro */
.btn-outline-light {
  --bs-btn-color: var(--text-soft);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--bg-elev);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: var(--bg-elev-2);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-border-color: var(--border);
}

/* ── TABELAS / ABAS / FORMULÁRIOS ───────────────────────────────────────── */
.table-dark-x {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-soft);
  --bs-table-border-color: var(--border-soft);
  color: var(--text-soft);
}
.table-dark-x thead tr { border-bottom: 1px solid var(--border); }
.table-dark-x td, .table-dark-x th { border-color: var(--border-soft); }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--border-soft);
  --bs-nav-tabs-link-active-bg: var(--bg-soft);
  --bs-nav-tabs-link-active-color: var(--text);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--bg-soft);
  --bs-nav-link-color: var(--text-mute);
  --bs-nav-link-hover-color: var(--k-cyan);
}
.nav-tabs .nav-link.active {
  border-top: 2px solid var(--k-cyan);
  font-weight: 600;
}

.form-control, .form-select {
  background-color: var(--bg-elev-2);
  border-color: var(--border-soft);
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-elev-2);
  border-color: var(--k-cyan);
  box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.12);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-mute); }
.form-label { color: var(--text-mute); }

/* ── BADGES/CHIPS: cantos de pílula + leitura nos DOIS temas ────────────── */
.badge {
  border-radius: 999px;
  font-weight: 600;
  color: var(--text);
}

/* ── MODAIS / DROPDOWNS / ALERTAS ───────────────────────────────────────── */
.modal-content {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  color: var(--text-soft);
}
.dropdown-menu {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
}
.dropdown-item { color: var(--text-soft); }
.dropdown-item:hover { background: var(--bg-elev); color: var(--text); }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-track { background: transparent; }

/* ── FOOTER KRYPTA (fonte única — _partials/footer_krypta.html) ─────────── */
.krypta-footer {
  background: transparent;
  color: var(--text-mute);
  font-size: 0.75rem;
  line-height: 1.6;
  border-top: 1px solid var(--border-soft);
  padding: 16px 12px;
  margin-top: 32px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.krypta-footer--flush { border-top: 0; margin-top: 0; padding: 18px 12px 24px; }
.krypta-footer__credit {
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: center;
}
.krypta-footer__link, .krypta-footer__link:visited {
  text-decoration: none; border-bottom: 0; line-height: 1;
  display: inline-flex; border-radius: 4px; transition: filter 0.15s ease;
}
.krypta-footer__link:hover { filter: brightness(1.12); }
.krypta-footer__link:focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 3px; }
.krypta-footer .kbrand-word { font-size: 0.8125rem; letter-spacing: 0.1em; }

.kbrand-word {
  display: inline-flex;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1;
  -webkit-text-fill-color: currentColor;
  background: none;
}
.kbrand-word > span {
  display: inline-block;
  color: #22D3EE;
  -webkit-text-fill-color: currentColor;
  animation: kbrand-letter 5.5s linear infinite;
  animation-fill-mode: backwards;
  will-change: color, text-shadow;
}
.kbrand-word > span:nth-child(1) { animation-delay: 0.00s; }
.kbrand-word > span:nth-child(2) { animation-delay: 0.16s; }
.kbrand-word > span:nth-child(3) { animation-delay: 0.32s; }
.kbrand-word > span:nth-child(4) { animation-delay: 0.48s; }
.kbrand-word > span:nth-child(5) { animation-delay: 0.64s; }
.kbrand-word > span:nth-child(6) { animation-delay: 0.80s; }
@keyframes kbrand-letter {
  0%   { color: #22D3EE; text-shadow: 0 0 10px rgba(34,211,238,0.45); }
  25%  { color: #3B82F6; text-shadow: 0 0 10px rgba(59,130,246,0.45); }
  50%  { color: #A855F7; text-shadow: 0 0 12px rgba(168,85,247,0.50); }
  75%  { color: #EC4899; text-shadow: 0 0 12px rgba(236,72,153,0.45); }
  100% { color: #22D3EE; text-shadow: 0 0 10px rgba(34,211,238,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .kbrand-word > span { animation: none !important; color: #3B82F6; }
}

/* ── LIGHT: acabamentos que o app.css antigo não cobria ─────────────────── */
html[data-theme="light"] body::after { opacity: 0.9; }
html[data-theme="light"] .alert { --bs-alert-border-color: var(--border-soft); }

/* ============================================================================
   v5.8 — PORTA DE ENTRADA (decreto 12/08): login no padrão da marca.
   Moldura com borda em gradiente cyan→violet, manifesto em 3 linhas, campos
   com ícone e o botão gradiente. Vale para TODA a família anônima (login,
   esqueci, resetar, 1º acesso) — o frame é o mesmo; só o login traz o
   manifesto. Mobile: a moldura ocupa 70% da tela (decreto), com piso de
   largura para o campo nunca ficar impraticável.
   ========================================================================== */
.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(59,130,246,.20), transparent 70%),
    radial-gradient(45% 35% at 8% 22%, rgba(0,209,255,.12), transparent 70%),
    radial-gradient(45% 40% at 95% 82%, rgba(168,85,247,.16), transparent 70%),
    #05070C;
}
/* a moldura: borda viva feita com gradiente (padding-box + border-box) */
.login-card {
  position: relative;
  width: 100%; max-width: 460px;
  padding: 40px 34px 34px;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, #0A0F17 0%, #070B12 55%, #0A0713 100%) padding-box,
    linear-gradient(150deg, #22D3EE 0%, #3B82F6 32%, #7C3AED 66%, #22D3EE 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 0 44px rgba(59,130,246,.20),
    0 30px 90px rgba(0,0,0,.75);
}
html[data-theme="light"] .login-shell { background:
    radial-gradient(60% 45% at 50% -5%, rgba(59,130,246,.14), transparent 70%),
    radial-gradient(45% 40% at 95% 82%, rgba(168,85,247,.12), transparent 70%),
    #0B0F16; }

/* v7.2 (pedido 14/08) — MONITOR BAIXO: o card cabe em ≤92vh com scroll
   interno — o botão Entrar NUNCA sai da tela. 'safe center' impede o flex
   de esconder o TOPO do card quando ele é maior que a viewport (navegador
   sem suporte mantém o center anterior; o scroll interno já resolve). */
.login-card { max-height: 92vh; overflow-y: auto; }
.login-shell { align-items: safe center; }
@media (max-height: 800px) {
  .login-card { padding: 24px 30px 22px; }
  .login-card .brand-mark { margin-bottom: 8px; }
  .login-card .brand-mark img { width: 56px; height: 52px; }
  .kl-word { font-size: 20px; margin-bottom: 10px; }
  .kl-rule { margin-bottom: 14px; }
  .login-card h1.kl-manifesto { font-size: 20px; margin-bottom: 10px; }
  .kl-lead { font-size: 12.5px; margin-bottom: 16px; }
  .login-card .kl-field .form-control,
  .login-card .kl-entrar { height: 46px; }
  .kl-ajuda { margin-top: 12px; }
}

/* --- topo: diamante + palavra KRYPTA -------------------------------------- */
.login-card .brand-mark {
  width: auto; height: auto; border: 0; box-shadow: none; background: none;
  margin: 0 auto 14px; display: flex; justify-content: center;
  filter: drop-shadow(0 0 18px rgba(59,130,246,.55));
}
.kl-word {
  text-align: center; color: #FFFFFF;
  font-family: 'Space Grotesk', var(--font-sans, sans-serif);
  font-size: 27px; font-weight: 600; letter-spacing: .34em;
  text-indent: .34em;                      /* compensa o tracking à direita */
  margin: 0 0 18px;
}
.kl-rule {
  height: 1px; margin: 0 auto 26px; max-width: 190px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.75), transparent);
}

/* --- manifesto ------------------------------------------------------------ */
/* especificidade acima de '.login-card h1' do app.css (que fixa 22px) */
.login-card h1.kl-manifesto {
  text-align: center; margin: 0 0 16px;
  font-family: 'Space Grotesk', var(--font-sans, sans-serif);
  font-size: 27px; line-height: 1.28; font-weight: 700;
  letter-spacing: -.02em; color: #FFFFFF; text-wrap: balance;
}
.login-card h1.kl-manifesto span {
  background: linear-gradient(96deg, #3B82F6 0%, #6366F1 50%, #A855F7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kl-lead {
  text-align: center; color: #93A3BC; font-size: 14px; line-height: 1.62;
  margin: 0 0 28px;
}
.kl-lead b { color: #3B82F6; font-weight: 600; }

/* --- campos --------------------------------------------------------------- */
.kl-field { position: relative; margin-bottom: 14px; }
.kl-field .kl-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: #64748B; font-size: 16px; line-height: 1; pointer-events: none;
}
.login-card .kl-field .form-control {
  height: 54px; padding: 0 46px 0 46px;
  background: rgba(12,17,26,.85);
  border: 1px solid #1E2A3D; border-radius: 14px;
  color: #E8EEF7; font-size: 15px;
}
.login-card .kl-field .form-control::placeholder { color: #5A6A82; }
.login-card .kl-field .form-control:focus {
  background: rgba(12,17,26,.95);
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.kl-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center;
  justify-content: center; background: none; border: 0; border-radius: 10px;
  color: #64748B; cursor: pointer; font-size: 17px;
}
.kl-eye:hover { color: #93A3BC; }
.kl-eye:focus-visible { outline: 2px solid #3B82F6; outline-offset: 1px; }

/* --- botão ---------------------------------------------------------------- */
.login-card .kl-entrar {
  width: 100%; height: 54px; margin-top: 8px;
  border: 0; border-radius: 14px;
  background: linear-gradient(96deg, #2563EB 0%, #6D28D9 55%, #9333EA 100%);
  color: #FFFFFF; font-size: 16px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(76,29,149,.45);
  transition: filter .15s ease, transform .15s ease;
}
.login-card .kl-entrar:hover { filter: brightness(1.08); }
.login-card .kl-entrar:active { transform: translateY(1px); }
.login-card .kl-entrar:focus-visible { outline: 2px solid #A855F7; outline-offset: 3px; }

/* --- rodapé (recuperação de senha) ---------------------------------------- */
.kl-ajuda { text-align: center; margin-top: 20px; font-size: 13px; line-height: 1.5; }
.kl-ajuda a { color: #8FA3C0; text-decoration: none; }
.kl-ajuda a:hover { color: #22D3EE; text-decoration: underline; }

/* --- MOBILE: 70% da tela (decreto 12/08) ---------------------------------- */
@media (max-width: 768px) {
  .login-shell { padding: 18px 0; }
  .login-card {
    width: 70%;
    min-width: 296px;            /* piso: campo de e-mail continua digitável */
    max-width: 94vw;
    padding: 30px 16px 26px;
    border-radius: 22px;
  }
  /* ícone mais perto da borda: sobra mais espaço para digitar no celular */
  .login-card .kl-field .form-control { padding: 0 42px; }
  .login-card .kl-field .kl-ico { left: 13px; }
  .login-card h1.kl-manifesto { font-size: 22px; }
  .kl-word { font-size: 22px; }
  .kl-lead { font-size: 13px; margin-bottom: 22px; }
  .login-card .kl-field .form-control,
  .login-card .kl-entrar { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-card .kl-entrar { transition: none; }
}

/* --- a MESMA linguagem para a família anônima (esqueci, resetar, 1º acesso):
       a moldura já é comum; aqui os campos e o botão principal também. ------ */
.login-card .form-control,
.login-card .form-select {
  min-height: 50px;
  background: rgba(12,17,26,.85);
  border: 1px solid #1E2A3D;
  border-radius: 14px;
  color: #E8EEF7;
}
.login-card .form-control::placeholder { color: #5A6A82; }
.login-card .form-control:focus,
.login-card .form-select:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.login-card .form-label { color: #93A3BC; font-size: 13px; }
.login-card h1 { color: #FFFFFF; }
.login-card .subtitle { color: #93A3BC; }
.login-card .btn.btn-brand {
  /* o .btn-brand global usa !important (cyan→violet); a porta de entrada
     fala a mesma língua do botão Entrar: azul→roxo. */
  min-height: 50px; border: 0 !important; border-radius: 14px; font-weight: 600;
  background: linear-gradient(96deg, #2563EB 0%, #6D28D9 55%, #9333EA 100%) !important;
  color: #FFFFFF !important; box-shadow: 0 10px 30px rgba(76,29,149,.40);
}
.login-card .btn.btn-brand:hover { filter: brightness(1.08); }
.login-card a { color: #8FA3C0; }
.login-card a:hover { color: #22D3EE; }

/* v7.2 (pedido 14/08) — os flash-toasts de /conversas ancoravam a 70px do
   topo "abaixo da topbar (56px)"; sem topbar, sobem para o respiro padrão.
   (Override aqui — o krypta-brand carrega por último — para não mexer no
   flash-toast.css, que é de outro dono.) */
.flash-toast-container { top: 12px; }

/* v7.2 (pedido 14/08) — AUTOFILL DO CHROME: o "amarelo #726C00" do print é
   o UA stylesheet (input:-webkit-autofill), não existe no código. O login
   USA autofill de propósito (autocomplete=username/current-password), então
   a COR precisa de override. A moldura da porta de entrada é escura fixa: */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0C111A inset;
  box-shadow: 0 0 0 1000px #0C111A inset;
  -webkit-text-fill-color: #E8EEF7;
  caret-color: #E8EEF7;
  transition: background-color 9999s ease-out 0s; /* mata o flash amarelo */
}

/* ── AUTOFILL GLOBAL (app logado) — por TOKEN: acompanha dark/light sozinho,
     porque o krypta-brand re-tokeniza --bg-elev-2/--text por tema. ───────── */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev-2) inset;
  box-shadow: 0 0 0 1000px var(--bg-elev-2) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}