:root{
  --bg:#000;
  --txt:#fff;
  --muted:rgba(255,255,255,.78);
  --ok:#00A857;
  --ok2:#006C3A;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  color: var(--txt);
  position: relative;
  transition: filter .45s ease-out, opacity .45s ease-out;
}

.blur-bg {
  position: fixed;
  width: 160%;
  height: 160%;
  top: -30%;
  left: -30%;
  background: radial-gradient(circle at 30% 20%, rgba(0,168,87,0.55), rgba(0,0,0,0.7));
  filter: blur(95px);
  animation: floatBG 14s ease-in-out infinite alternate;
  z-index: 0;
  transition: opacity .45s ease-out;
}
@keyframes floatBG {
  0% { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.18) translate(24px,-24px); }
}

body.blur-active .blur-bg { opacity: 0.35; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo {
  width: 160px;
  margin: 0 auto 24px auto;
  display: block;
  opacity: .95;
}

.face-slot {
  position: relative;
  width: 230px;
  height: 230px;
  margin: 0 auto 16px auto;
}

.face-frame {
  position: absolute;
  inset: 0;
  border-radius: 35%;
  border: 3px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  animation: glowPulse 3s ease-in-out infinite;
  transition: .35s ease-out;
  z-index: 1;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 12px rgba(0,255,133,0.18); }
  50% { box-shadow: 0 0 30px rgba(0,255,133,0.45); }
  100% { box-shadow: 0 0 12px rgba(0,255,133,0.18); }
}

.face-frame.success {
  border-color: #00ff9d;
  box-shadow: 0 0 26px rgba(0,255,153,0.45);
}

.face-frame.error {
  border-color: #ff3b3b;
  box-shadow: 0 0 26px rgba(255,60,60,0.45);
}

.loading-spinner {
  position: absolute;
  inset: 0;
  border-radius: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
  color: #00ff9d;
  opacity: 0;
  transition: opacity .25s ease-out;
  z-index: 3;
}
.loading-spinner.visible { opacity: 1; }

.success-check {
  position: absolute;
  inset: 0;
  border-radius: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .35s ease-out, transform .35s ease-out;
  z-index: 4;
}
.success-check::after {
  content: "✓";
  font-size: 110px;
  font-weight: 700;
  color: #00ff9d;
  text-shadow: 0 0 18px rgba(0,255,153,0.8);
}
.success-check.visible {
  opacity: 1;
  transform: scale(1);
}

h1 { margin-top: 12px; font-size: 1.7rem; }

.action-btn {
  width: 260px;
  height: 52px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,168,87,0.35);
  margin-top: 8px;
  transition: .2s;
}
.action-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }


/* ===== Index: topo fixo SEM pulo (tem que estar no PRIMEIRO CSS) ===== */

body.page-index .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 área: evita “logo descer/subir” quando userbar aparece */
  min-height: 110px;
}

/* evita shift enquanto a imagem carrega */
body.page-index .logo{
  height: 44px;   /* ajuste se quiser maior/menor */
  width: auto;
  margin: 0;
  display: block;
}

/* reserva espaço pro conteúdo nunca ficar por baixo do header */
body.page-index .app-main{
  padding-top: 150px; /* ajuste fino */
}

/* esconde userbar sem colapsar layout (sem pulo) */
body.page-index .userbar.is-hidden{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.page-index .userbar{
  width: 100%;
}