#auth-splash {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
  text-align: center;
  animation: fadeIn .55s ease-out;
}

.splash-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 42px rgba(0,0,0,.45);
}

.splash-title{
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  letter-spacing: .2px;
}

.splash-sub{
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  min-height: 1.4em;
}

.splash-spinner{
  margin: 14px auto 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(0,255,153,0.75);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#app {
  display: none;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
  text-align: center;
  animation: fadeIn .8s ease-out;
  transition: filter .45s ease-out;
}

.userbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 6px 0 14px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);

  /* ✅ evita “pulo” quando aparece */
  transition: opacity .2s ease-out;
}

/* ✅ esconde sem colapsar layout (nada de display:none) */
.userbar.is-hidden{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.userbar .usertext{
  text-align:left;
  font-size: .95rem;
  color: rgba(255,255,255,.88);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 280px;
}

.userbar .userhint{
  display:block;
  font-size: .82rem;
  color: rgba(255,255,255,.62);
  /* o rótulo fica ACIMA do nome: o respiro vai embaixo */
  margin-bottom: 2px;
}

/* (removido) .userbar button — o botão "Trocar conta" saiu do index.html:
   num step-up a identidade vem da operação, não é escolhida no momento. */

#qr-overlay {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .45s ease-out, transform .45s ease-out;
  z-index: 2;
}
#qr-overlay.visible {
  opacity: 1;
  transform: scale(1);
  display: flex;
}

#qr-img {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

#info-text {
  opacity: .85;
  min-height: 1.4em;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

#start-btn { background: var(--ok); color: #fff; }
#scan-btn  { background: var(--ok2); color: #fff; }

/* Header fixo no topo (logo + userbar) */
.top-header{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 48px));
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  /* ✅ reserva altura para a área do topo (evita “pulo”) */
  min-height: 110px;
}

/* Remove margens antigas do logo/userbar quando estão no topo */
.top-header .logo { margin: 0; }
.top-header .userbar { margin: 0; width: 100%; }

/* Empurra o conteúdo pra baixo pra não ficar por baixo do header */
.app-main{
  padding-top: 150px; /* ajuste fino: 130-180px conforme seu gosto */
}
/* ✅ animação sem transform (não quebra position:fixed dentro) */
@keyframes fadeInNoMove {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* sobrescreve a animação só dessas telas */
#auth-splash { animation: fadeInNoMove .55s ease-out; }
#app        { animation: fadeInNoMove .8s ease-out; }

/* ✅ Overlay: borra tudo sem causar "jitter" */
#blur-overlay{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;

  /* o blur de verdade */
  backdrop-filter: blur(14px) brightness(0.45);
  -webkit-backdrop-filter: blur(14px) brightness(0.45);

  /* leve “escurecida” extra (opcional, mas ajuda a dar o mesmo look) */
  background: rgba(0,0,0,0.12);

  /* fica acima de TUDO do app (inclusive header), mas não bloqueia clique */
  z-index: 999;

  transition: opacity .45s ease-out;
}

body.blur-active #blur-overlay{
  opacity: 1;
}