/* =====================================================================
   ChatPion - paginas publicas no padrao do sistema (roxo com vinho) [2026-10-04]
   assets/css/theme-login.css

   - Carregado so pelas views publicas novas (ui_brand_publico_head()):
     login, cadastro, esqueci a senha, redefinir senha e ativacao da conta.
   - Tudo dentro de .lp-page. O layout publico (subscription_theme.php) tambem
     serve o flow builder, a troca de senha e a instalacao: nada aqui vaza
     para eles (excecao: o botao do SweetAlert, que fica fora da pagina e so
     existe nestas telas).
   - Cores: SO variaveis. A marca vem do theme-tokens.css (--cp-*, --sb-*) e do
     <style id="cp-brand"> da linha 0 do ui_branding (padrao do sistema):
     trocou o padrao do sistema, estas paginas acompanham. Cores literais so
     nos dois blocos de tokens abaixo (claro e escuro).
   - Fonte Inter (--cp-font-sans), nenhuma letra abaixo de 12px, campos com
     16px (o iPhone nao da zoom ao tocar), foco visivel em tudo que recebe Tab.
   - Claro/escuro: html[data-lp-theme] (mesma chave lp-theme do login de antes).
   - Funcoes e nomes usados pelo JS (form-control, is-invalid, invalid-feedback,
     btn-progress, #recovery_form, .alert injetado) ficam; aqui so a aparencia.
   ===================================================================== */

/* ---------- tokens (claro) ---------- */
.lp-page {
  --lp-vinho:       var(--sb-bg);              /* fundo do menu do padrao do sistema */
  --lp-roxo:        var(--cp-primary-active);  /* principal + 22% de preto */
  --lp-bg:          var(--cp-gray-100);
  --lp-surface:     var(--cp-white);
  --lp-surface2:    var(--cp-gray-50);
  --lp-border:      var(--cp-gray-200);
  --lp-border2:     var(--cp-gray-300);
  --lp-ink:         var(--cp-gray-900);
  --lp-ink2:        var(--cp-gray-600);
  --lp-muted:       var(--cp-gray-500);
  --lp-accent:      var(--cp-primary);
  --lp-accent-dk:   var(--cp-primary-hover);
  --lp-on-accent:   var(--cp-on-primary);
  --lp-link:        var(--cp-primary-text);
  --lp-ring:        var(--cp-ring);
  --lp-focus:       var(--cp-primary);           /* contorno de foco do teclado (7,1:1 sobre o branco) */
  --lp-soft:        var(--cp-primary-soft);
  --lp-soft-bdr:    var(--cp-primary-border);
  --lp-danger:      var(--cp-danger);
  --lp-danger-bg:   var(--cp-danger-soft);
  --lp-danger-bdr:  var(--cp-danger-border);
  --lp-danger-tx:   var(--cp-danger-text);
  --lp-ok-bg:       var(--cp-success-soft);
  --lp-ok-bdr:      var(--cp-success-border);
  --lp-ok-tx:       var(--cp-success-text);
  --lp-info-bg:     var(--cp-info-soft);       /* [2026-10-10 conta aprovacao] aviso informativo e de atencao */
  --lp-info-bdr:    var(--cp-info-border);
  --lp-info-tx:     var(--cp-info-text);
  --lp-warn-bg:     var(--cp-warning-soft);
  --lp-warn-bdr:    var(--cp-warning-border);
  --lp-warn-tx:     var(--cp-warning-text);
  --lp-shadow:      0 1px 3px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.10);
  --lp-on-brand:    #ffffff;                   /* texto sobre o painel vinho -> roxo (9,7:1 no pior ponto) */
  --lp-on-brand-2:  rgba(255,255,255,.82);     /* texto de apoio no painel (6,7:1 no pior ponto) */
  --lp-brand-glow:  rgba(255,255,255,.10);
  --lp-brand-chip:  rgba(255,255,255,.14);
  --lp-brand-chip2: rgba(255,255,255,.24);
  --lp-brand-line:  rgba(255,255,255,.35);
  --lp-social-div:  rgba(255,255,255,.2);
}
/* ---------- tokens (escuro: botao da lua) ---------- */
html[data-lp-theme="dark"] .lp-page {
  --lp-bg:          #14070f;
  --lp-surface:     #1e0c18;
  --lp-surface2:    #2a1222;
  --lp-border:      rgba(255,255,255,.10);
  --lp-border2:     rgba(255,255,255,.18);
  --lp-ink:         #f8f1f6;
  --lp-ink2:        #e3d3dd;
  --lp-muted:       #b9a3b2;                   /* 7,9:1 sobre o cartao */
  --lp-link:        #c4b5fd;                   /* 10,1:1 */
  --lp-focus:       #c4b5fd;
  --lp-soft:        rgba(196,181,253,.12);
  --lp-soft-bdr:    rgba(196,181,253,.35);
  --lp-danger:      #f87171;
  --lp-danger-bg:   rgba(239,68,68,.12);
  --lp-danger-bdr:  rgba(239,68,68,.30);
  --lp-danger-tx:   #fca5a5;
  --lp-ok-bg:       rgba(34,197,94,.12);
  --lp-ok-bdr:      rgba(34,197,94,.30);
  --lp-ok-tx:       #86efac;
  --lp-info-bg:     rgba(34,211,238,.10);
  --lp-info-bdr:    rgba(34,211,238,.30);
  --lp-info-tx:     #a5f3fc;
  --lp-warn-bg:     rgba(245,158,11,.12);
  --lp-warn-bdr:    rgba(245,158,11,.32);
  --lp-warn-tx:     #fcd34d;
  --lp-shadow:      0 12px 32px rgba(0,0,0,.45);
}

/* ---------- casca ---------- */
.lp-page, .lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; }
.lp-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--cp-font-sans);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  text-align: left;
}
.lp-page p { line-height: 1.5; }
.lp-page .lp-brand-title { line-height: 1.25; }
.lp-page a:focus-visible,
.lp-page button:focus-visible,
.lp-page input[type="checkbox"]:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; }

/* painel/faixa da marca: vinho -> roxo (degradê so com variaveis) */
.lp-brand {
  background:
    radial-gradient(ellipse at 15% 10%, var(--lp-brand-glow) 0%, transparent 55%),
    linear-gradient(135deg, var(--lp-vinho) 0%, var(--lp-roxo) 100%);
  color: var(--lp-on-brand);
  padding: 24px 20px 84px;
}
.lp-brand-in { max-width: 460px; margin: 0 auto; padding-right: 48px; }  /* espaco do botao claro/escuro */
.lp-brand-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-on-brand-2); }
.lp-brand-title { margin: 0 0 6px; font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--lp-on-brand); letter-spacing: -.01em; }
.lp-brand-text { margin: 0; font-size: 14px; color: var(--lp-on-brand-2); }
.lp-brand-list { display: none; list-style: none; margin: 28px 0 0; padding: 0; }
.lp-brand-list li { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 15px; color: var(--lp-on-brand); }
.lp-brand-list i { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--lp-brand-chip); color: var(--lp-on-brand); font-size: 15px; }

.lp-main { display: flex; justify-content: center; align-items: flex-start; padding: 0 16px 32px; margin-top: -60px; min-width: 0; }

/* ---------- cartao ---------- */
.lp-card {
  width: 100%;
  max-width: 420px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  box-shadow: var(--lp-shadow);
  overflow: hidden;
  position: relative;
}
.lp-card.lp-card-largo { max-width: 520px; }
.lp-card-top { padding: 28px 24px 0; text-align: center; }
.lp-logo { display: inline-flex; margin-bottom: 16px; }
.lp-logo a { display: inline-flex; border-radius: 6px; }
.lp-logo img { height: 40px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.lp-title { margin: 0 0 4px; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--lp-ink); letter-spacing: -.01em; }
.lp-title-icon { color: var(--lp-accent); font-size: 18px; margin-right: 6px; }
.lp-subtitle { margin: 0; font-size: 14px; color: var(--lp-muted); }

/* ---------- alertas (mesma marcacao de antes: .lp-alert-danger / .lp-alert-success) ---------- */
.lp-alerts { padding: 0 24px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.lp-alerts:empty { display: none; }
.lp-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; border: 1px solid; text-align: left; }
.lp-alert i { margin-top: 3px; flex-shrink: 0; font-size: 14px; }
.lp-alert p { margin: 0; }
.lp-alert-danger { background: var(--lp-danger-bg); border-color: var(--lp-danger-bdr); color: var(--lp-danger-tx); }
.lp-alert-success { background: var(--lp-ok-bg); border-color: var(--lp-ok-bdr); color: var(--lp-ok-tx); }

/* ---------- [2026-10-10 conta aprovacao] criar conta, confirmar e-mail, esqueci e nova senha ----------
   Aviso informativo/atencao, erro embaixo de cada campo, estados (sucesso / link expirou) dentro do mesmo
   cartao, botao secundario de contorno e o campo antirrobo fora da tela. So variaveis, como o resto. */
.lp-page [hidden] { display: none !important; }
.lp-alert-info  { background: var(--lp-info-bg); border-color: var(--lp-info-bdr); color: var(--lp-info-tx); }
.lp-alert-aviso { background: var(--lp-warn-bg); border-color: var(--lp-warn-bdr); color: var(--lp-warn-tx); }
.lp-alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.lp-alert-texto { display: flex; flex-direction: column; gap: 4px; }
.lp-field-erro { font-size: 13px; line-height: 1.4; color: var(--lp-danger-tx); }
.lp-field-erro:empty { display: none; }
.lp-dica { font-size: 12px; line-height: 1.4; color: var(--lp-muted); }
.lp-page .lp-input.lp-invalido { border-color: var(--lp-danger); }
.lp-page .lp-input.lp-invalido:focus { box-shadow: 0 0 0 3px var(--lp-danger-bdr); }
.lp-check-row.lp-invalido .lp-check-input { outline: 2px solid var(--lp-danger); outline-offset: 2px; }
.lp-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.lp-estado { padding: 8px 24px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-estado-ico { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--lp-soft); color: var(--lp-accent); margin: 4px 0; }
.lp-estado-ico.lp-ok { background: var(--lp-ok-bg); color: var(--lp-ok-tx); }
.lp-estado-ico.lp-al { background: var(--lp-warn-bg); color: var(--lp-warn-tx); }
.lp-estado-titulo { margin: 0; font-family: inherit; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--lp-ink); letter-spacing: -.01em; }
.lp-estado-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--lp-ink2); max-width: 400px; overflow-wrap: anywhere; }
.lp-estado-texto b { color: var(--lp-ink); font-weight: 600; }
.lp-estado .lp-acoes, .lp-estado .lp-form-mini { width: 100%; margin-top: 8px; }
.lp-acoes { display: flex; flex-direction: column; gap: 10px; }
.lp-form-mini { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.lp-btn-sec {
  width: 100%; min-height: 46px; padding: 0 16px; margin: 0;
  border: 1px solid var(--lp-border2); border-radius: 10px;
  background: var(--lp-surface); color: var(--lp-link);
  font-family: inherit; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
}
.lp-btn-sec:hover { border-color: var(--lp-accent); background: var(--lp-soft); color: var(--lp-link); text-decoration: none; }
.lp-btn-sec[disabled] { opacity: .65; cursor: default; background: var(--lp-surface); border-color: var(--lp-border2); }
.lp-page .lp-btn-sec:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 2px; }
.lp-page a.lp-btn, .lp-page a.lp-btn:hover, .lp-page a.lp-btn:focus { text-decoration: none; color: var(--lp-on-accent); }
.lp-page .lp-btn[disabled] { opacity: .75; cursor: progress; }
.lp-link-btn { appearance: none; border: 0; background: none; margin: 0; padding: 6px 2px; min-height: 44px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--lp-link); text-decoration: underline; cursor: pointer; }
.lp-link-btn:hover { color: var(--lp-accent-dk); }
.lp-page .lp-link-btn:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; border-radius: 4px; }
.lp-sub-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lp-muted); text-align: center; }
.lp-sub-nota:empty { display: none; }
.lp-sep-fino { width: 100%; height: 1px; background: var(--lp-border); margin: 6px 0 2px; border: 0; }
.lp-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lp-gira .7s linear infinite; }
@keyframes lp-gira { to { transform: rotate(360deg); } }
@media (min-width: 576px) {
  .lp-estado { padding-left: 32px; padding-right: 32px; }
}

/* ---------- formulario ---------- */
.lp-form { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.lp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lp-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--lp-ink2); letter-spacing: 0; text-transform: none; }
.lp-required { color: var(--lp-danger-tx); margin-left: 2px; }
.lp-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-forgot { font-size: 13px; font-weight: 600; color: var(--lp-link); text-decoration: none; }
.lp-forgot:hover, .lp-forgot:focus { color: var(--lp-accent-dk); text-decoration: underline; }
.lp-input-wrap { position: relative; }
.lp-input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--lp-border2);
  border-radius: 10px;
  background: var(--lp-surface2);
  color: var(--lp-ink);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.lp-input::placeholder { color: var(--lp-muted); opacity: 1; }
.lp-input:focus { border-color: var(--lp-accent); box-shadow: 0 0 0 3px var(--lp-ring); background: var(--lp-surface); }
.lp-input[type="number"] { -moz-appearance: textfield; }
.lp-input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--lp-muted); font-size: 14px; pointer-events: none; }
.lp-input:focus ~ .lp-input-icon { color: var(--lp-accent); }
.lp-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--lp-muted); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.lp-pw-toggle:hover { color: var(--lp-accent); background: var(--lp-soft); }
.lp-page .lp-pw-toggle:focus-visible { outline-offset: -2px; }
.lp-pw-hint { font-size: 12px; color: var(--lp-muted); }
.lp-pw-hint:empty { display: none; }

/* captcha do cadastro: conta + resposta */
.lp-captcha-row { display: flex; align-items: stretch; }
.lp-captcha-badge {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px; min-height: 46px;
  background: var(--lp-soft);
  border: 1px solid var(--lp-soft-bdr);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  font-size: 16px; font-weight: 700;
  color: var(--lp-link);
  white-space: nowrap;
}
.lp-page .lp-captcha-input { flex: 1; min-width: 0; padding-right: 14px; border-radius: 0 10px 10px 0; }

/* aceite dos termos */
.lp-check-row { display: flex; align-items: flex-start; gap: 10px; }
.lp-check-input { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--lp-accent); cursor: pointer; }
.lp-check-label { margin: 0; font-size: 14px; color: var(--lp-ink2); line-height: 1.45; cursor: pointer; font-weight: 400; }
.lp-check-label a { color: var(--lp-link); font-weight: 600; text-decoration: underline; }

/* botao principal */
.lp-btn {
  width: 100%;
  height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background-color: var(--lp-accent);
  color: var(--lp-on-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--lp-ring);
  transition: background-color .15s, box-shadow .15s, transform .1s;
}
.lp-btn:hover { background-color: var(--lp-accent-dk); color: var(--lp-on-accent); }
.lp-btn:active { transform: translateY(1px); }
.lp-page .lp-btn:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 2px; }

/* ---------- login social: uma coluna (o slot vazio do Google nao ocupa lugar) ---------- */
.lp-social-box { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.lp-sep { display: flex; align-items: center; gap: 10px; color: var(--lp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lp-sep::before, .lp-sep::after { content: ''; flex: 1; height: 1px; background: var(--lp-border); }
.lp-social { display: flex; flex-direction: column; gap: 10px; }
.lp-social-wrap { display: contents; }
/* botoes gerados pelas bibliotecas (Fb_rx_login / Google_login): so aparencia; cor da propria rede */
.lp-page .lp-social .btn-social {
  width: 100% !important;
  height: 46px;
  margin: 0;
  padding: 0 16px 0 58px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 46px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.lp-page .lp-social .btn-social > :first-child { line-height: 46px !important; width: 46px; font-size: 18px; border-right: 1px solid var(--lp-social-div); }
.lp-page .lp-social .btn-social img { height: 20px; vertical-align: middle; }

/* ---------- rodape do cartao ---------- */
.lp-footer { padding: 16px 24px 22px; text-align: center; font-size: 14px; color: var(--lp-muted); border-top: 1px solid var(--lp-border); }
.lp-footer a { color: var(--lp-link); font-weight: 600; text-decoration: none; }
.lp-footer a:hover, .lp-footer a:focus { text-decoration: underline; color: var(--lp-link); }

/* ---------- botao claro/escuro ---------- */
.lp-theme-toggle {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--lp-brand-line);
  background: var(--lp-brand-chip);
  color: var(--lp-on-brand);
  font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.lp-theme-toggle:hover { background: var(--lp-brand-chip2); }
.lp-page .lp-theme-toggle:focus-visible { outline: 2px solid var(--lp-on-brand); outline-offset: 2px; }

/* ---------- tablet ---------- */
@media (min-width: 576px) {
  .lp-brand { padding: 40px 24px 96px; text-align: center; }
  .lp-brand-in { padding-right: 0; }
  .lp-brand-title { font-size: 26px; }
  .lp-main { margin-top: -72px; }
  .lp-card-top { padding: 32px 32px 0; }
  .lp-alerts, .lp-social-box { padding-left: 32px; padding-right: 32px; }
  .lp-form { padding: 20px 32px 24px; }
  .lp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- computador: 2 colunas ---------- */
@media (min-width: 992px) {
  .lp-page { grid-template-columns: minmax(380px, 44%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .lp-brand { display: flex; align-items: center; padding: 48px 56px; text-align: left; }
  .lp-brand-in { margin: 0; }
  .lp-brand-title { font-size: 32px; }
  .lp-brand-text { font-size: 16px; }
  .lp-brand-list { display: block; }
  .lp-main { margin-top: 0; align-items: center; padding: 40px 32px; }
  .lp-theme-toggle { position: fixed; top: 18px; right: 18px; border-color: var(--lp-border); background: var(--lp-surface); color: var(--lp-ink2); }
  .lp-theme-toggle:hover { background: var(--lp-soft); color: var(--lp-accent); }
  .lp-page .lp-theme-toggle:focus-visible { outline-color: var(--lp-focus); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-page *, .lp-page *::before, .lp-page *::after { transition: none !important; animation: none !important; }
}

/* ---------- popups do SweetAlert (esqueci/redefinir/ativacao; ficam fora da .lp-page) ---------- */
.swal-button:not(.swal-button--cancel) { background-color: var(--cp-primary); color: var(--cp-on-primary); }
.swal-button:not([disabled]):not(.swal-button--cancel):hover { background-color: var(--cp-primary-hover); }
.swal-button:focus { box-shadow: 0 0 0 1px var(--cp-white), 0 0 0 3px var(--cp-ring); }

/* ---------- paginas com Bootstrap/Stisla (esqueci, redefinir, ativacao) ----------
   O JS delas (assets/js/system/forgot_password.js e irmaos) usa form-control/is-invalid/invalid-feedback,
   btn-progress e troca o conteudo do #recovery_form por um .alert.alert-primary. */
.lp-page { --blue: var(--cp-primary); }               /* Stisla/Bootstrap usam var(--blue) */
.lp-page .lp-form-bs .form-group { margin-bottom: 0; }
.lp-page .form-control.lp-input { height: 46px; font-size: 16px; border-radius: 10px; border: 1px solid var(--lp-border2); background-color: var(--lp-surface2); color: var(--lp-ink); padding: 0 14px; box-shadow: none; }
.lp-page .form-control.lp-input:focus { border-color: var(--lp-accent); box-shadow: 0 0 0 3px var(--lp-ring); background-color: var(--lp-surface); }
.lp-page .form-control.lp-input.is-invalid { border-color: var(--lp-danger); background-image: none; padding-right: 14px; }
.lp-page .form-control.lp-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--lp-danger-bdr); }
.lp-page .invalid-feedback { font-size: 13px; color: var(--lp-danger-tx); margin-top: 6px; }
.lp-page .btn.lp-btn { background-color: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-on-accent); font-size: 15px; font-weight: 600; height: 48px; line-height: 48px; padding: 0 16px; border-radius: 10px; box-shadow: 0 2px 8px var(--lp-ring); letter-spacing: 0; }
/* o style.css do Stisla pinta hover/foco/ativo de #394eea com !important */
.lp-page .btn-primary.lp-btn:hover, .lp-page .btn-primary.lp-btn:focus, .lp-page .btn-primary.lp-btn:active { background-color: var(--lp-accent-dk) !important; border-color: var(--lp-accent-dk) !important; color: var(--lp-on-accent); }
.lp-page .btn.lp-btn.btn-progress { color: transparent !important; }
.lp-page #recovery_form .alert { margin: 20px 24px 24px; border-radius: 12px; background-color: var(--lp-soft); color: var(--lp-ink); border: 1px solid var(--lp-soft-bdr); font-size: 14px; text-align: left; }
.lp-page #recovery_form .alert .alert-title { font-weight: 700; font-size: 15px; color: var(--lp-link); }
.lp-page #recovery_form .alert .alert-icon { color: var(--lp-accent); }
.lp-page #recovery_form .alert a { color: var(--lp-link); font-weight: 700; text-decoration: underline; }
/* o style.css do Stisla vence por especificidade: .form-group label (12px, cor fixa) */
.lp-page .lp-label, .lp-page .form-group .lp-label { font-size: 13px; font-weight: 600; color: var(--lp-ink2); letter-spacing: 0; margin: 0; }