/* ==========================================================================
   TagSync: entrar e criar conta

   O CSS antigo dessas duas páginas fixava a paleta clara no código
   (#0f172a, #64748b, #f8fafc, gradiente claro no body) e depois remendava
   só o tema "dark". Nos outros oito temas do produto elas continuavam
   claras, e o placeholder escuro era um #64748b fixo que dava 3,37:1.

   Aqui tudo sai dos tokens, então as duas páginas acompanham qualquer tema,
   e a tipografia é a mesma da landing e do painel.

   Carregado DEPOIS de app.css. Escopado em .login-body.
   ========================================================================== */

.login-body {
  --ls-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ls-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ch-gtm: var(--brand);
  --ch-meta: #1877f2;
  --ch-tiktok: #fe2c55;

  --sig-live: var(--success);
  --sig-live-text: color-mix(in srgb, var(--sig-live) 65%, var(--text));
}

/* --------------------------------------------------------------------------
   1. Fundo
   -------------------------------------------------------------------------- */

/*
  O seletor de tema entra aqui só para empatar a especificidade com as regras
  [data-theme="dark"] .login-body do app.css, que fixavam um gradiente
  #070b14 servindo apenas ao tema "dark". Vindo depois, estas vencem, e o
  fundo passa a sair do --bg de qualquer um dos dez temas.
*/
[data-theme] .login-body,
.login-body {
  background: var(--bg);
}

/* A malha de instrumento da landing, para as três telas conversarem. */
[data-theme] .login-body .login-grid,
.login-body .login-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

[data-theme] .login-body .login-orb-a,
.login-body .login-orb-a {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
}

[data-theme] .login-body .login-orb-b,
.login-body .login-orb-b {
  background: color-mix(in srgb, var(--brand-2, var(--brand)) 16%, transparent);
}

/* --------------------------------------------------------------------------
   2. Coluna de texto
   -------------------------------------------------------------------------- */

.login-body .login-copy h1 {
  font-family: var(--ls-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--text);
  max-width: 18ch;
  text-wrap: balance;
}

.login-body .login-copy > p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  text-wrap: pretty;
}

/* Etiqueta de instrumento, igual à da landing e à do painel. */
.login-body .eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  margin-bottom: 14px;
  font-family: var(--ls-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-body .eyebrow::before {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--sig-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-live) 18%, transparent);
}

.login-body .login-badges span {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  font-size: .82rem;
  font-weight: 600;
}

.login-body .login-badges i {
  color: var(--brand);
}

.login-body .login-back-link {
  color: var(--muted);
}

.login-body .login-back-link:hover {
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   3. Painel de canais
   Substitui o gráfico falso com números inventados: aqui não há métrica
   nenhuma, só a legenda do que o produto monitora.
   -------------------------------------------------------------------------- */

.auth-channels {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin-top: 28px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-channels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.auth-channels-head span {
  font-family: var(--ls-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-channel {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.auth-channel-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  flex-shrink: 0;
  font-size: .95rem;
  color: var(--ch, var(--brand));
  background: color-mix(in srgb, var(--ch, var(--brand)) 12%, transparent);
}

.auth-channel-gtm { --ch: var(--ch-gtm); }
.auth-channel-meta { --ch: var(--ch-meta); }
.auth-channel-tiktok { --ch: var(--ch-tiktok); }

.auth-channel-copy {
  min-width: 0;
  line-height: 1.25;
}

.auth-channel-copy strong {
  display: block;
  font-size: .875rem;
  font-weight: 650;
  color: var(--text);
}

.auth-channel-copy small {
  display: block;
  font-family: var(--ls-mono);
  font-size: .68rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-channel-led {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--sig-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-live) 16%, transparent);
}

/* --------------------------------------------------------------------------
   4. Cartão do formulário
   -------------------------------------------------------------------------- */

.login-body .login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 28px 60px -32px rgba(0, 0, 0, .4);
}

.login-body .login-card-head h2 {
  font-family: var(--ls-display);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.login-body .login-card-head p {
  color: var(--muted);
}

.login-body .login-card-icon {
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}

.login-body .login-field .form-label {
  color: var(--text);
  font-size: .8rem;
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   5. Campos
   -------------------------------------------------------------------------- */

.login-body .input-with-icon .form-control {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  border-radius: 10px;
  min-height: 48px;
  padding-left: 42px;
  font-size: .92rem;
}

.login-body .input-with-icon .form-control:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--ring);
  color: var(--text);
}

.login-body .input-with-icon > i {
  color: var(--muted);
}

.login-body .input-with-icon:focus-within > i {
  color: var(--brand);
}

/*
  O placeholder era o problema relatado: no claro herdava o cinza translúcido
  do Bootstrap e no escuro um #64748b fixo, que dá só 3,37:1 sobre o campo.

  Só trocar por --muted resolveria o escuro mas deixaria o claro MAIS claro
  do que estava (4,55). Puxando um terço em direção ao --text, os dois lados
  ficam legíveis: ~6,6:1 no claro e ~9,5:1 no escuro, acompanhando o tema.
*/
.login-body .form-control::placeholder,
.login-body .input-with-icon .form-control::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
  opacity: 1;
}

/* Ao focar, o placeholder recua um pouco para não competir com o cursor. */
.login-body .form-control:focus::placeholder,
.login-body .input-with-icon .form-control:focus::placeholder {
  color: var(--muted);
}

/* Preenchimento automático do Chrome ignorava o tema e voltava a branco. */
.login-body .form-control:-webkit-autofill,
.login-body .form-control:-webkit-autofill:hover,
.login-body .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
}

.login-body .text-secondary {
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   6. Botão, alerta e rodapé do cartão
   -------------------------------------------------------------------------- */

.login-body .btn-login {
  border-radius: 11px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 8px 24px -8px rgba(var(--brand-rgb), .55);
}

.login-body .btn-login:hover,
.login-body .btn-login:focus-visible {
  box-shadow: 0 12px 30px -8px rgba(var(--brand-rgb), .62);
}

.login-body .login-alert {
  border-radius: 10px;
  background: color-mix(in srgb, var(--rose) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--border));
  color: color-mix(in srgb, var(--rose) 72%, var(--text));
}

.login-body .login-card-foot {
  border-top-color: var(--border);
}

.login-body .login-card-foot p {
  color: var(--muted);
}

.login-body .login-card-foot i {
  color: var(--muted);
}

.login-body .login-card-foot a {
  color: var(--brand);
  font-weight: 650;
}

/* Nota de confiança abaixo do botão, na voz da máquina. */
.auth-note {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--ls-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Piso de qualidade
   -------------------------------------------------------------------------- */

.login-body a:focus-visible,
.login-body button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .login-body * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 991px) {
  .auth-channels {
    max-width: none;
    margin-inline: auto;
  }

  .login-body .login-copy h1 {
    max-width: none;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .login-body {
    padding: 20px 14px;
  }

  .login-body .login-card {
    padding: 24px 20px;
  }

  .auth-channel-copy small {
    display: none;
  }
}