/* ============================================================
   Halky Web — Autenticação premium (escopo .auth / .page-auth)
   Multi-etapa: login · troca obrigatória · recuperação (OTP).
   Compõe a casca a partir dos tokens do design system (reage aos
   21 temas), premium no dark neon padrão.
   REGRA GPU: NUNCA transicionar box-shadow/filter/backdrop-filter.
   Animar apenas transform/opacity.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

.page-auth { min-height: 100vh; min-height: 100dvh; }

.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
  isolation: isolate;
  font-family: "Plus Jakarta Sans", var(--font-sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
/* Fonte premium de exibição para wordmark e títulos */
.auth__logo,
.auth-card__title,
.auth__badge-tx strong { font-family: "Sora", var(--font-sans, system-ui, sans-serif); }

/* ---------- Fundo: canvas neural + glows ---------- */
.auth__neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}

.auth__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.auth__glow--a {
  width: 46vw; height: 46vw;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 65%);
  animation: authFloatA 18s ease-in-out infinite;
}
.auth__glow--b {
  width: 40vw; height: 40vw;
  bottom: -16vw; right: -8vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 45%, transparent), transparent 65%);
  animation: authFloatB 22s ease-in-out infinite;
}
@keyframes authFloatA {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(4%,6%,0) scale(1.08); }
}
@keyframes authFloatB {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-5%,-4%,0) scale(1.1); }
}

/* ---------- Estrutura ---------- */
.auth__shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

/* ---------- Painel de marca ---------- */
.auth__aside {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-primary);
  overflow: hidden;
}
.auth__aside-inner { position: relative; z-index: 1; width: 100%; }

/* Logo + wordmark */
.auth__logo-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: var(--space-8, 3rem);
}
.auth__logo-mark {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  object-fit: contain;
  flex: 0 0 auto;
  padding: 6px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-primary) 16%, transparent),
    color-mix(in srgb, var(--color-secondary, var(--color-primary)) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Badge OPAS */
.auth__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-8);
  padding: 13px 26px;
  border-radius: 50px;
  width: fit-content;
  max-width: 100%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
}
.auth__badge-ic {
  display: inline-flex;
  color: var(--color-primary);
}
.auth__badge-ic svg { width: 24px; height: 24px; }
.auth__badge-tx {
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: 0.2px;
  line-height: 1.4;
}
.auth__badge-tx strong { font-weight: var(--fw-bold); color: var(--color-primary); }

/* Palco das bases científicas */
.auth__bases {
  position: relative;
  padding: 34px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-primary, #0a0a0f) 55%, transparent);
  border: 1px solid var(--border-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.auth__bases-title,
.auth__bases-grid { position: relative; z-index: 1; }
.auth__bases-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
  color: var(--text-primary);
}
.auth__bases-title svg { width: 22px; height: 22px; color: var(--color-primary); flex: 0 0 auto; }
.auth__bases-title span { flex: 0 1 auto; }
.auth__bases-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent);
}
.auth__bases-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.auth__base {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              background-color 0.3s ease, border-color 0.3s ease;
  animation: authBaseWave 7s ease-in-out infinite;
}
.auth__base:hover {
  transform: translateY(-6px) scale(1.06) !important;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  border-color: var(--color-primary) !important;
}
.auth__base img {
  max-height: 76px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(100%) brightness(1.6) contrast(1.1);
  transition: opacity 0.3s ease;
  animation: authBaseWaveImg 7s ease-in-out infinite;
}
.auth__base:hover img {
  opacity: 1 !important;
  filter: none !important;
}

/* Hover automático em cascata: um "brilho" percorre cada card em sequência */
@keyframes authBaseWave {
  0%, 16%, 100% {
    transform: translateY(0) scale(1);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
  }
  6% {
    transform: translateY(-6px) scale(1.06);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: var(--color-primary);
  }
}
@keyframes authBaseWaveImg {
  0%, 16%, 100% { opacity: 0.55; filter: grayscale(100%) brightness(1.6) contrast(1.1); }
  6%           { opacity: 1; filter: none; }
}
.auth__base:nth-child(1),  .auth__base:nth-child(1) img  { animation-delay: 0s; }
.auth__base:nth-child(2),  .auth__base:nth-child(2) img  { animation-delay: 0.7s; }
.auth__base:nth-child(3),  .auth__base:nth-child(3) img  { animation-delay: 1.4s; }
.auth__base:nth-child(4),  .auth__base:nth-child(4) img  { animation-delay: 2.1s; }
.auth__base:nth-child(5),  .auth__base:nth-child(5) img  { animation-delay: 2.8s; }
.auth__base:nth-child(6),  .auth__base:nth-child(6) img  { animation-delay: 3.5s; }
.auth__base:nth-child(7),  .auth__base:nth-child(7) img  { animation-delay: 4.2s; }
.auth__base:nth-child(8),  .auth__base:nth-child(8) img  { animation-delay: 4.9s; }
.auth__base:nth-child(9),  .auth__base:nth-child(9) img  { animation-delay: 5.6s; }
.auth__base:nth-child(10), .auth__base:nth-child(10) img { animation-delay: 6.3s; }

/* Tema claro: brilho do card mantém logos escuros legíveis */
.is-light .auth__base img { animation-name: authBaseWaveImgLight; }
@keyframes authBaseWaveImgLight {
  0%, 16%, 100% { opacity: 0.7; filter: grayscale(100%) contrast(1.1); }
  6%           { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__base,
  .auth__base img { animation: none; }
}

/* Tema claro: logos escuros precisam de fundo/contraste diferente */
.is-light .auth__base img { filter: grayscale(100%) contrast(1.1); opacity: 0.7; }
.is-light .auth__bases { background: color-mix(in srgb, #000 6%, transparent); box-shadow: none; }

.auth__logo {
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.auth__logo-dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.06em;
  border-radius: 50%;
  vertical-align: baseline;
  background: var(--color-primary);
  box-shadow: 0 0 22px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.auth__aside-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.auth__aside-sub {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed, 1.6);
  color: var(--text-secondary);
  max-width: 38ch;
}

.auth__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.auth__features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.auth__features strong { font-weight: var(--fw-semibold); }
.auth__feature-ic {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ---------- Painel de cards ---------- */
.auth__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  padding: 44px 40px;
  border-radius: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.auth__brand--mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-6);
}
.auth__brand--mobile .auth__logo-mark { width: 58px; height: 58px; border-radius: 16px; padding: 7px; }
.auth__brand--mobile .auth__logo { font-size: clamp(2rem, 8vw, 2.6rem); }

.auth-card { display: none; }
.auth-card.is-active { display: block; animation: authCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes authCardIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.auth-card__head { margin-bottom: var(--space-6); }
.auth-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.auth-card__sub {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.auth-card__sub strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

.auth-card__badge {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.auth-card__badge--warn {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}
.auth-card__badge--ok {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}

/* ---------- Botão voltar ---------- */
.auth-back {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border-glass);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.auth-back:hover { transform: translateX(-2px); color: var(--text-primary); }

/* ---------- Formulário / campos ---------- */
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }

.auth-field { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-field__label {
  font-size: var(--fs-xs, 0.78rem);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.auth-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-field__ic {
  position: absolute;
  left: 14px;
  display: grid; place-items: center;
  color: var(--text-tertiary, var(--text-secondary));
  pointer-events: none;
}
.auth-input {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 44px;
  font-family: "Plus Jakarta Sans", var(--font-sans, system-ui, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text-primary) 6%, transparent),
    color-mix(in srgb, var(--text-primary) 3%, transparent));
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.auth-input::placeholder {
  font-family: "Plus Jakarta Sans", var(--font-sans, system-ui, sans-serif);
  font-size: 0.82rem;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
}
.auth-input:focus {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
              0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.auth-field__wrap:focus-within .auth-field__ic { color: var(--color-primary); }

.auth-eye {
  position: absolute;
  right: 8px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.auth-eye:hover { color: var(--text-primary); }

/* ---------- Medidor de força ---------- */
.auth-strength {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 16px;
}
.auth-strength i {
  display: block;
  height: 5px;
  width: 0%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.25s ease, background-color 0.25s ease;
}
.auth-strength::before {
  content: "";
  position: absolute;
}
.auth-strength {
  position: relative;
}
.auth-strength i {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 60%;
}
.auth-strength em {
  font-style: normal;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}
.auth-strength[data-level="0"] i { background: #ef4444; }
.auth-strength[data-level="1"] i { background: #f59e0b; }
.auth-strength[data-level="2"] i { background: #eab308; }
.auth-strength[data-level="3"] i { background: #22c55e; }
.auth-strength[data-level="4"] i { background: #10b981; }

/* faixa de trilho do medidor */
.auth-strength { padding-left: 0; }
.auth-strength > i { box-shadow: none; }

/* ---------- Botões ---------- */
.auth-btn {
  position: relative;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-md, 0.95rem);
  font-weight: var(--fw-semibold);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  overflow: hidden;
}
.auth-btn:active { transform: translateY(1px); }
.auth-btn[disabled] { cursor: default; }

.auth-btn--primary {
  margin-top: var(--space-2);
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary)));
}
.auth-btn--primary:hover { transform: translateY(-1px); }
.auth-btn__ic { transition: transform 0.2s ease; }
.auth-btn--primary:hover .auth-btn__ic { transform: translateX(3px); }

/* estado ocupado */
.auth-btn.is-busy { color: transparent; }
.auth-btn.is-busy::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: authSpin 0.7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---------- Rodapé / links ---------- */
.auth-card__foot {
  margin-top: var(--space-5);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.auth-muted { font-size: var(--fs-sm); color: var(--text-secondary); }
.auth-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.auth-link:hover { text-decoration: underline; }
.auth-link[disabled] { color: var(--text-tertiary, var(--text-secondary)); cursor: default; text-decoration: none; }

/* ---------- Tabs (método de recuperação) ---------- */
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid var(--border-glass);
}
.auth-tab {
  height: 38px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.auth-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary)));
}

/* ---------- OTP ---------- */
.auth-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.auth-otp__box {
  width: 100%;
  min-width: 0;
  padding: 0;
  height: 58px;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.auth-otp__box:focus {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  transform: translateY(-2px);
}

/* ---------- Alertas (server-rendered) ---------- */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
}
.auth-alert svg { flex: 0 0 auto; margin-top: 1px; }
.auth-alert--info {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 26%, transparent);
}
.auth-alert--error {
  color: #f87171;
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border-color: color-mix(in srgb, #ef4444 28%, transparent);
}

/* ---------- Loader pós-login (espelha o LoginSuccessFx do app) ---------- */
.auth-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
      color-mix(in srgb, var(--color-secondary, var(--color-primary)) 10%, transparent) 40%,
      transparent 72%),
    var(--theme-body-bg-gradient, #030305);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.auth-loader.is-show { opacity: 1; visibility: visible; }

.auth-loader__stage {
  position: relative;
  width: 280px;
  height: 280px;
  display: grid;
  place-items: center;
}
.auth-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
}
.auth-ring--halo   { animation: authRingSpin 9s linear infinite; }
.auth-ring--dashed { animation: authRingSpin 6s linear infinite reverse; }
.auth-ring--grad   { animation: authRingSpin 1.6s linear infinite; }
.auth-ring--mid    { animation: authRingSpin 2.6s linear infinite reverse; }
.auth-ring--inner  { animation: authRingSpin 2.2s linear infinite; }
@keyframes authRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Tema nos anéis: SVG presentation attributes não resolvem var()/color-mix();
   aqui a propriedade CSS (stop-color/stroke) SIM resolve e sobrepõe o atributo. */
#authHaloGrad stop:first-child { stop-color: var(--color-secondary, var(--color-primary)); }
#authHaloGrad stop:last-child  { stop-color: var(--color-primary); }
#authRingGrad stop:nth-child(1) { stop-color: var(--color-secondary, var(--color-primary)); }
#authRingGrad stop:nth-child(2),
#authRingGrad stop:nth-child(3) { stop-color: var(--color-primary); }
#authMidGrad stop:nth-child(1) { stop-color: var(--color-primary); }
#authMidGrad stop:nth-child(2) { stop-color: var(--color-secondary, var(--color-primary)); }
.auth-ring--dashed circle { stroke: color-mix(in srgb, var(--color-secondary, var(--color-primary)) 55%, transparent); }
.auth-ring--inner circle  { stroke: var(--color-secondary, var(--color-primary)); }

.auth-loader__logoGlow {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--color-primary) 34%, transparent) 0%,
    color-mix(in srgb, var(--color-secondary, var(--color-primary)) 16%, transparent) 45%,
    transparent 100%);
  animation: authLogoGlow 2s ease-in-out infinite alternate;
}
.auth-loader__logo {
  position: relative;
  width: 172px;
  height: 172px;
  object-fit: contain;
  animation: authLogoPulse 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--color-primary) 35%, transparent));
}
@keyframes authLogoPulse {
  from { transform: scale(0.97); }
  to   { transform: scale(1.05); }
}
@keyframes authLogoGlow {
  from { opacity: 0.42; transform: scale(0.92); }
  to   { opacity: 0.78; transform: scale(1.1); }
}

.auth-loader__bar {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: authAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auth-loader__status {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  margin: 0 0 12px;
  min-height: 18px;
}
.auth-loader__track {
  width: 250px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  overflow: hidden;
}
.auth-loader__fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--color-secondary, var(--color-primary)) 0%,
    var(--color-primary) 100%);
  transition: width 0.12s linear;
}
.auth-loader__pct {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--fw-medium);
  margin: 10px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .auth-ring,
  .auth-loader__logo,
  .auth-loader__logoGlow { animation: none; }
}

/* ---------- SweetAlert2: tema Halky (escopo da tela de auth) ---------- */
.swal2-container { z-index: 100000; }
.swal2-popup {
  background: color-mix(in srgb, var(--color-bg, #0a0713) 92%, #1a1030) !important;
  color: var(--text-primary, #f4f0ff) !important;
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(217, 70, 239, 0.12) !important;
}
.swal2-title { color: var(--text-primary, #f4f0ff) !important; font-weight: 700 !important; }
.swal2-html-container { color: var(--text-secondary, #cfc6e6) !important; }
.swal2-actions .swal2-confirm.auth-swal__confirm {
  background: linear-gradient(90deg, #d946ef 0%, #a855f7 55%, #60a5fa 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0.68em 1.6em !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 26px rgba(217, 70, 239, 0.3) !important;
}
.swal2-actions .swal2-cancel.auth-swal__cancel {
  background: var(--glass-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--text-secondary, #cfc6e6) !important;
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}
.swal2-toast {
  background: color-mix(in srgb, var(--color-bg, #0a0713) 90%, #1a1030) !important;
  color: var(--text-primary, #f4f0ff) !important;
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12)) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
}
.swal2-toast .swal2-title { color: var(--text-primary, #f4f0ff) !important; font-size: 0.95rem !important; }

/* ---------- Entrada ---------- */
.appear { animation: authAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.auth__panel.appear { animation-delay: 0.06s; }
@keyframes authAppear {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .auth__shell { grid-template-columns: 1fr; max-width: 460px; }
  .auth__aside { display: none; }
  .auth__brand--mobile { display: block; text-align: center; }
  .auth__panel { min-height: auto; padding: var(--space-7) var(--space-6); }
}
@media (max-width: 420px) {
  .auth { padding: var(--space-4); }
  .auth-otp { gap: 6px; }
  .auth-otp__box { height: 50px; font-size: var(--fs-lg); }
}

/* ---------- Acessibilidade: reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .auth__glow--a, .auth__glow--b,
  .auth-card.is-active, .appear { animation: none; }
  .auth-btn--primary:hover { transform: none; }
  .auth-btn--primary:hover .auth-btn__ic { transform: none; }
}

/* ============================================================
   Referência premium (login pixel-identical): tabs Entrar/Assinar,
   link "esqueceu", linha "7 dias grátis", divisor e lojas de app.
   Headers dos cards centralizados; método de recuperação com ícone.
   REGRA GPU mantida: transicionar apenas transform/opacity.
   ============================================================ */

/* Cabeçalho dos cards centralizado (recuperação / troca / reset) */
.auth-card__head { text-align: center; }
.auth-card__badge { margin-left: auto; margin-right: auto; }

/* Tabs Entrar na IA / Assinar Planos */
.auth-plantabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: var(--space-6);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
}
.auth-plantab {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.auth-plantab:not(.is-active):hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.auth-plantab.is-active {
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-secondary, var(--color-primary)) 88%, #fff),
    var(--color-primary) 55%,
    color-mix(in srgb, var(--color-primary) 74%, #000));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

/* Link "Esqueceu sua senha?" alinhado à direita, dentro do form */
.auth-forgot {
  align-self: flex-end;
  margin: -6px 0 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 0.25s ease;
}
.auth-forgot:hover { color: var(--color-primary); }

/* Linha "Ainda não conhece? 7 Dias Grátis" */
.auth-trial {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.auth-trial a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.auth-trial a:hover { text-decoration: underline; }

/* Divisores "ou" / "Novo no Halky?" (paridade mobile) */
.auth-or,
.auth-newhere {
  display: flex;
  align-items: center;
  margin: var(--space-5) 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-xs, 0.72rem);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.auth-or::before,
.auth-or::after,
.auth-newhere::before,
.auth-newhere::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}
.auth-or span,
.auth-newhere span { padding: 0 14px; }

/* Botão "Continuar com a Apple" (paridade mobile) */
.auth-apple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 16px;
  background: #fff;
  color: #000;
  font-family: "Plus Jakarta Sans", var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-md, 0.98rem);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.auth-apple:hover { transform: translateY(-2px); background: #f1f1f4; }
.auth-apple__ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* Botão "Assinar o Halky Platinum" → loja.halky.ai */
.auth-platinum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 16px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  font-family: "Sora", var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-md, 0.98rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.auth-platinum:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-color: var(--color-primary);
}
.auth-platinum__badge { width: 20px; height: 20px; color: var(--color-primary); flex: 0 0 auto; }
.auth-platinum__arrow { width: 18px; height: 18px; flex: 0 0 auto; }

/* Divisor "Acesso Rápido App" */
.auth-appdivider {
  display: flex;
  align-items: center;
  margin: var(--space-6) 0;
  color: var(--text-secondary);
  font-size: var(--fs-xs, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.auth-appdivider::before,
.auth-appdivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-glass);
}
.auth-appdivider span { padding: 0 15px; }

/* Botões de loja (Play Store / App Store) */
.auth-stores { display: flex; gap: 12px; }
.auth-store {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.auth-store:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.auth-store__ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* Tabs de método de recuperação com ícone + label */
.auth-tab { display: flex; align-items: center; justify-content: center; gap: 8px; }
.auth-tab svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Responsivo: some o painel de marca, exibe brand mobile ---------- */
@media (max-width: 900px) {
  .auth__shell { grid-template-columns: 1fr; max-width: 460px; }
  .auth__aside { display: none; }
  .auth__panel { justify-self: center; max-width: 460px; }
  .auth__brand--mobile { display: flex; }
}

/* ============================================================
   Slide-to-access — botão "arraste para entrar" (paridade mobile).
   Sem JS ele degrada para um botão normal (o <button type=submit>
   é o próprio thumb). GPU: só transform/opacity animados.
   ============================================================ */
.auth-slide {
  position: relative;
  height: 62px;
  margin-top: var(--space-2, 6px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 8%, rgba(0, 0, 0, 0.28));
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.auth-slide__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 62px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-secondary, var(--color-primary)) 90%, #fff),
    var(--color-primary) 52%,
    color-mix(in srgb, var(--color-primary) 72%, #000));
  z-index: 1;
}
.auth-slide__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 44px;
  z-index: 2;
  font-family: "Sora", var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-md, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.auth-slide__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%,
    color-mix(in srgb, var(--color-primary) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: authSlideShine 2.8s ease-in-out infinite;
}
@keyframes authSlideShine {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.auth-slide__thumb {
  position: absolute;
  left: 4px; top: 4px;
  width: 54px; height: 54px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: grab;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, #fff 16%, var(--color-secondary, var(--color-primary))),
    var(--color-primary) 58%,
    color-mix(in srgb, var(--color-primary) 68%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 45%, transparent);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.auth-slide.is-dragging .auth-slide__thumb { transition: none; cursor: grabbing; }
.auth-slide__thumb:active { cursor: grabbing; }
.auth-slide__thumb svg { width: 24px; height: 24px; }
.auth-slide__thumb .auth-slide__spin { display: none; }
.auth-slide.is-confirmed .auth-slide__thumb .auth-arrow { display: none; }
.auth-slide.is-confirmed .auth-slide__thumb .auth-slide__spin {
  display: block;
  animation: authSpin 0.7s linear infinite;
}
.auth-slide.is-confirmed .auth-slide__label { opacity: 0; }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* Reduz movimento: sem brilho contínuo */
@media (prefers-reduced-motion: reduce) {
  .auth-slide__shine { animation: none; opacity: 0; }
}