/* ==========================================================================
   Noel Plus — telas de entrada (login.html e cadastro.html)
   Só composição: os campos, botões e tokens vêm do design system.
   Celular: uma coluna. A partir de 960px: painel da marca + formulário.
   ========================================================================== */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg-page); font-family: var(--font-body); color: var(--color-text-primary); -webkit-text-size-adjust: 100%; }

.au-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr);
}

/* ---- painel da marca (só em tela larga) ---- */
.au-aside {
  display: none; position: relative; overflow: hidden;
  flex-direction: column; justify-content: space-between; gap: var(--space-9);
  padding: var(--space-10) clamp(var(--space-9), 5vw, var(--space-11));
  background: #050806;
  border-right: 1px solid var(--color-border);
  isolation: isolate; container-type: inline-size;
}
.au-aside > :not(.au-cosmos):not(.au-pings) { position: relative; z-index: 1; }
.au-aside-logo { height: 34px; width: auto; align-self: flex-start; }   /* na gestão a logo é filha direta do painel (no app ela fica dentro de um link) */

/* ---- o céu do painel: um sistema de criação (estrela da marca no centro, os formatos em órbita) ----
   O fundo (estrelas no canvas, nebulosas, a sombra do texto) fica em .au-cosmos, atrás de tudo; o sistema (.au-orrery) ocupa o lugar da ilustração.
   --px/--py (-1 a 1) vêm do ponteiro (auth-cosmos.js): cada camada se move um tanto, e a mais perto se move mais. */
.au-cosmos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.au-sky {
  position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); display: block;
  transform: translate3d(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -5px), 0);
}
.au-nebula {
  position: absolute; inset: -12%;
  background:
    radial-gradient(42% 34% at 22% 18%, color-mix(in srgb, var(--color-green-primary) 22%, transparent), transparent 70%),
    radial-gradient(30% 26% at 30% 30%, color-mix(in srgb, var(--color-green-neon) 9%, transparent), transparent 70%),
    radial-gradient(38% 30% at 86% 62%, color-mix(in srgb, var(--color-accent-music) 20%, transparent), transparent 72%),
    radial-gradient(34% 28% at 70% 92%, color-mix(in srgb, var(--color-accent-video) 22%, transparent), transparent 72%);
  transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -10px), 0);
  animation: au-nebula 48s ease-in-out infinite alternate;
}
@keyframes au-nebula { from { opacity: 0.85; scale: 1; } to { opacity: 1; scale: 1.06; } }
.au-cosmos::after {   /* o texto embaixo sempre legível sobre o céu */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top, #050806 0%, color-mix(in srgb, #050806 82%, transparent) 38%, transparent 100%);
}

.au-orrery {
  --S: min(780px, 86cqw, 64vh);   /* o plano das órbitas, antes da inclinação: acompanha a largura do painel (cqw) e a altura da tela */
  --tilt: 64deg;
  position: relative; width: 100%; height: calc(var(--S) * 0.62); margin: 0 auto;
  perspective: 1500px; perspective-origin: 50% 30%;
  transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px), 0);
}
.au-orrery-plane {
  position: absolute; left: 50%; top: 52%; width: var(--S); height: var(--S);
  margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2);
  transform-style: preserve-3d; transform: rotateX(var(--tilt));
}
/* a luz do núcleo sobre o plano: uma camada chata atrás de tudo (dentro do plano 3D ela cortaria a estrela ao meio) */
.au-orrery::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: calc(var(--S) * 0.96); height: calc(var(--S) * 0.96 * 0.44);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-green-primary) 30%, transparent) 0%, color-mix(in srgb, var(--color-green-primary) 9%, transparent) 46%, transparent 100%);
}
/* um cinturão de poeira entre as duas órbitas de fora (as partículas são desenhadas no canvas pelo auth-cosmos.js), girando bem devagar */
.au-belt { position: absolute; inset: 6%; width: 88%; height: 88%; animation: au-spin 300s linear infinite; }
.au-orbit { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); transform: translate(-50%, -50%); transform-style: preserve-3d; }
/* a órbita: o lado de trás (em cima, depois da inclinação) mais apagado */
.au-orbit-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(214, 255, 228, 0.17);
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), #000 72%); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), #000 72%);
}
/* a de fora: as marcas finas de um instrumento */
.au-orbit--dial .au-orbit-ring { border-color: rgba(214, 255, 228, 0.1); }
.au-orbit--dial .au-orbit-ring::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(214, 255, 228, 0.42) 0deg 0.32deg, transparent 0.32deg 3deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.au-orbit--dial .au-orbit-ring::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(214, 255, 228, 0.55) 0deg 0.5deg, transparent 0.5deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
}
.au-orbit-arm { position: absolute; inset: 0; transform-style: preserve-3d; animation: au-spin var(--t) linear infinite; animation-delay: var(--at); }
@keyframes au-spin { to { transform: rotate(360deg); } }
/* o rastro: um arco na cor do planeta, que some para trás (o planeta anda no sentido do relógio) */
.au-trail {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0deg 14deg, color-mix(in srgb, var(--c) 78%, white) 90deg, transparent 90.3deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  opacity: 0.9;
}
/* o planeta sempre de frente para quem olha (desfaz o giro do braço e a inclinação) */
.au-planet {
  position: absolute; left: 100%; top: 50%; width: var(--p); height: var(--p); margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2);
  animation: au-face var(--t) linear infinite; animation-delay: var(--at);
}
@keyframes au-face {
  from { transform: rotate(0deg) rotateX(calc(var(--tilt) * -1)); }
  to { transform: rotate(-360deg) rotateX(calc(var(--tilt) * -1)); }
}
.au-planet-body {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--c) 72%, white) 0%, var(--c) 46%, color-mix(in srgb, var(--c) 52%, black) 100%);
  box-shadow: 0 0 calc(var(--p) * 0.8) color-mix(in srgb, var(--c) 55%, transparent), 0 0 calc(var(--p) * 2.4) color-mix(in srgb, var(--c) 22%, transparent);
}
/* a fase: o lado aceso vira para o núcleo enquanto o planeta anda (gira junto com o braço) */
.au-planet-body::after {
  content: ''; position: absolute; inset: -0.5px; border-radius: 50%;
  background: radial-gradient(118% 118% at 0% 50%, transparent 46%, rgba(2, 5, 3, 0.62) 66%, rgba(2, 5, 3, 0.9) 84%);
  animation: au-spin var(--t) linear infinite; animation-delay: var(--at);
}
/* o anel (planeta da música): metade atrás do planeta, metade na frente */
.au-planet-ring {
  position: absolute; left: 50%; top: 50%; width: calc(var(--p) * 2.3); height: calc(var(--p) * 0.62);
  margin: calc(var(--p) * -0.31) 0 0 calc(var(--p) * -1.15); border-radius: 50%; transform: rotate(-16deg);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, white); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 50%, transparent);
  opacity: 0.85;
}
.au-planet-ring--front { z-index: 2; clip-path: inset(50% 0 0 0); }

/* o núcleo: a estrela da marca, que respira */
.au-sun {
  --z: calc(var(--S) * 0.155);
  position: absolute; left: 50%; top: 50%; width: var(--z); height: var(--z); margin: calc(var(--z) / -2) 0 0 calc(var(--z) / -2);
  transform: rotateX(calc(var(--tilt) * -1)); transform-style: preserve-3d;
}
.au-sun-corona {
  position: absolute; inset: -110%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-green-neon) 46%, transparent) 0%, color-mix(in srgb, var(--color-green-primary) 20%, transparent) 26%, color-mix(in srgb, var(--color-green-primary) 6%, transparent) 44%, transparent 64%);
  animation: au-breathe 6.5s var(--ease-standard) infinite;
}
/* raios finos de luz, que giram devagar e somem para fora */
.au-sun-corona::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: repeating-conic-gradient(from 4deg, rgba(200, 255, 220, 0.13) 0deg 1.2deg, transparent 1.2deg 13deg),
              repeating-conic-gradient(from 9deg, rgba(200, 255, 220, 0.08) 0deg 2.6deg, transparent 2.6deg 29deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 24%, transparent 58%); mask: radial-gradient(circle, transparent 18%, #000 24%, transparent 58%);
  filter: blur(1.5px);
  animation: au-spin 120s linear infinite reverse;
}
.au-sun-body {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #FBFFFC 0%, #DDFFE8 16%, #8CFFB4 36%, var(--color-green-neon) 56%, var(--color-green-primary) 78%, #1A9C48 100%);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--color-green-neon) 70%, transparent), 0 0 60px 12px color-mix(in srgb, var(--color-green-neon) 30%, transparent),
              0 0 140px 40px color-mix(in srgb, var(--color-green-primary) 14%, transparent);
}
/* a superfície viva: manchas de luz que giram devagar */
.au-sun-body::before {
  content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from 20deg, transparent 0deg, rgba(255, 255, 255, 0.28) 40deg, transparent 90deg, rgba(20, 140, 64, 0.38) 150deg, transparent 210deg, rgba(255, 255, 255, 0.2) 260deg, transparent 320deg);
  mix-blend-mode: soft-light; animation: au-spin 38s linear infinite;
}
.au-sun-body::after {   /* a borda mais clara (o limbo) */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 62%, rgba(255, 255, 255, 0.18) 86%, rgba(255, 255, 255, 0.32) 100%);
}
@keyframes au-breathe { 0%, 100% { scale: 1; opacity: 0.85; } 50% { scale: 1.09; opacity: 1; } }

/* ---- os avisos que aparecem no céu (auth-cosmos.js): pushes de vidro, cada um saindo do planeta do seu formato num feixe de luz ----
   Só ilustração do que acontece no Noel Plus: nada aqui é de verdade nem é lido por leitor de tela. */
.au-pings {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 13px), 0);
}
.au-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.au-beam { fill: none; stroke-width: 1.3; stroke-linecap: round; }
.au-beam-ripple { fill: none; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: au-ripple 900ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes au-ripple { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(2.6); } }

.au-ping {
  position: absolute; left: 0; top: 0; width: var(--w, 312px); display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 11px;
  border-radius: 18px; color: var(--color-text-primary); font-family: var(--font-body); text-align: left;
  background: linear-gradient(180deg, rgba(34, 41, 36, 0.62), rgba(14, 18, 15, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.8), 0 2px 8px -2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07),
              0 0 0 1px color-mix(in srgb, var(--c, var(--color-green-primary)) 0%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0; visibility: hidden;
}
.au-ping.is-in { visibility: visible; animation: au-ping-in 760ms cubic-bezier(0.18, 0.9, 0.24, 1.12) forwards; }
.au-ping.is-out { visibility: visible; animation: au-ping-out 640ms cubic-bezier(0.4, 0, 0.7, 0.4) forwards; }
.au-ping.is-still { visibility: visible; opacity: 1; }
@keyframes au-ping-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.93); } to { opacity: 1; transform: none; } }
@keyframes au-ping-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.96); } }
/* o brilho de chegada: uma borda na cor do aviso que acende e apaga */
.au-ping::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--color-green-primary)) 70%, transparent), 0 0 24px -2px color-mix(in srgb, var(--c, var(--color-green-primary)) 45%, transparent);
  opacity: 0;
}
.au-ping.is-in::after { animation: au-ping-glow 1600ms ease-out 120ms; }
@keyframes au-ping-glow { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

.au-ping-icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.au-ping-icon > img:not(.au-ping-badge) { width: 38px; height: 38px; border-radius: 10px; display: block; }
.au-ping-icon--tile { background: linear-gradient(145deg, color-mix(in srgb, var(--c) 92%, white), color-mix(in srgb, var(--c) 70%, black)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.au-ping-icon--avatar {
  border-radius: 50%; font: 700 13.5px/1 var(--font-display); letter-spacing: 0.01em; color: #08100B;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 55%, white), var(--c));
}
.au-ping-badge { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 5px; box-shadow: 0 0 0 2px #121713; }
.au-ping-text { min-width: 0; flex: 1; }
.au-ping-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary); }
.au-ping-meta b { color: var(--color-text-secondary); font-weight: 700; }
.au-ping-title { font-size: 13.5px; font-weight: 700; line-height: 1.28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-ping-body { font-size: 12.5px; line-height: 1.32; color: var(--color-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.au-ping-swap.au-ping-title > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-ping-swap.au-ping-body { display: grid; }
.au-ping-thumb { position: relative; flex: none; width: 40px; height: 40px; }
.au-ping-thumb img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* o remix: a original atrás, inclinada, e a versão nova na frente */
.au-ping-thumb--remix img:first-child { position: absolute; inset: 0; transform: rotate(-9deg) translate(-7px, 1px) scale(0.9); filter: saturate(0.6) brightness(0.75); }
.au-ping-thumb--remix img:last-child { position: relative; transform: rotate(4deg) translateX(3px); }
.au-ping-play { position: absolute; inset: 0; display: grid; place-items: center; }
.au-ping-play::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: rgba(5, 8, 6, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.au-ping-play::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -2px; border-left: 7px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
/* o coração que pula sobre a miniatura (curtida) */
.au-ping-heart { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; color: #FF5C7A; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); animation: au-heart 900ms cubic-bezier(0.3, 1.6, 0.5, 1) 380ms both; }
@keyframes au-heart { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* a música: barras que tocam */
.au-ping-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.au-ping-eq i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: 50% 100%; animation: au-eq 900ms ease-in-out infinite alternate; }
.au-ping-eq i:nth-child(2) { animation-delay: -300ms; animation-duration: 700ms; }
.au-ping-eq i:nth-child(3) { animation-delay: -550ms; animation-duration: 1000ms; }
.au-ping-eq i:nth-child(4) { animation-delay: -150ms; animation-duration: 800ms; }
@keyframes au-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
/* a geração: o anel que enche e vira um "pronto" */
.au-ping-ring { position: absolute; inset: 0; width: 38px; height: 38px; transform: rotate(-90deg); }
.au-ping-ring circle { fill: none; stroke-width: 3; }
.au-ping-ring .bg { stroke: rgba(255, 255, 255, 0.1); }
.au-ping-ring .fg { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset 2400ms cubic-bezier(0.45, 0.05, 0.35, 1); }
.au-ping.is-done .au-ping-ring { opacity: 0; transition: opacity 260ms; }
.au-ping-check { position: absolute; inset: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--color-green-primary); color: #06200F; transform: scale(0); transition: transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.au-ping.is-done .au-ping-check { transform: scale(1); }
.au-ping-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.au-ping-swap { display: grid; }
.au-ping-swap > * { grid-area: 1 / 1; transition: opacity 320ms, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.au-ping-swap > :last-child { opacity: 0; transform: translateY(5px); }
.au-ping.is-done .au-ping-swap > :first-child { opacity: 0; transform: translateY(-5px); }
.au-ping.is-done .au-ping-swap > :last-child { opacity: 1; transform: none; }
.au-ping-thumb--later { transform: scale(0.6); opacity: 0; transition: transform 520ms cubic-bezier(0.3, 1.5, 0.5, 1), opacity 300ms; }
.au-ping.is-done .au-ping-thumb--later { transform: none; opacity: 1; }
.au-eyebrow { color: var(--color-green-neon); margin-bottom: var(--space-4); }
.au-headline {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(32px, 3.2vw, 46px); margin: 0 0 var(--space-6); max-width: 15ch;
}
.au-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
.au-points li { display: flex; gap: var(--space-4); align-items: flex-start; color: var(--color-text-secondary); font-size: var(--text-body-lg-size); line-height: 1.45; }
.au-points .np-icon { color: var(--color-green-primary); margin-top: 2px; flex-shrink: 0; }
.au-coin-pill {
  display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-7);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-accent-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-gold) 35%, transparent);
  border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-body-md-size);
}
.au-coin-pill[hidden] { display: none; }
.au-coin-pill span:last-child { color: var(--color-text-secondary); font-weight: 600; }

/* ---- coluna do formulário ---- */
.au-main {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: var(--space-8) var(--space-6);
  padding-top: max(var(--space-8), env(safe-area-inset-top));
  padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--color-green-primary) 10%, transparent), transparent 75%);
}
.au-card { width: 100%; max-width: 420px; }
.au-brand-mobile { display: inline-block; margin-bottom: var(--space-8); }
.au-brand-mobile img { height: 32px; width: auto; display: block; }

.au-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(28px, 6vw, 34px); margin: 0 0 var(--space-3); }
.au-title:focus { outline: none; }
.au-lead { margin: 0 0 var(--space-7); color: var(--color-text-secondary); font-size: var(--text-body-lg-size); line-height: 1.5; }

.au-form { display: flex; flex-direction: column; gap: var(--space-5); }
.au-form .np-field { gap: var(--space-3); }
/* 16px evita o zoom automático do Safari no iPhone ao focar o campo */
.au-card .np-input { width: 100%; font-size: 16px; }
.au-card .np-field-label { font-size: 13px; }
.au-card .np-field-hint { font-size: 13px; line-height: 1.4; min-height: 0; }
.au-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }

.au-prefix { position: relative; }
.au-prefix > span { position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; font-size: 16px; }
.au-prefix > .np-input { padding-left: calc(var(--space-5) + 14px); }

.au-pw { position: relative; }
.au-pw > .np-input { padding-right: 52px; }
.au-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard);
}
.au-pw-toggle:hover { color: var(--color-text-primary); }
.au-pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-green-bg); color: var(--color-green-primary); }

.au-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--color-green-primary); text-decoration: none; border-radius: var(--radius-xs);
}
.au-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-green-bg); }
.au-field-head .au-link { font-size: 13px; }

.au-check { display: flex; gap: var(--space-4); align-items: flex-start; min-height: 24px; cursor: pointer; color: var(--color-text-secondary); font-size: 14px; line-height: 1.45; }
.au-check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 1px 0 0; width: 20px; height: 20px;
  display: grid; place-content: center; cursor: pointer;
  background: var(--color-surface-1); border: 1.5px solid var(--color-border); border-radius: var(--radius-cut-tiny-md);
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.au-check input::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--color-text-on-green); border-bottom: 2px solid var(--color-text-on-green);
  transform: rotate(-45deg) scale(0); transition: transform var(--duration-fast) var(--ease-spring);
}
.au-check input:checked { background: var(--color-green-primary); border-color: var(--color-green-primary); }
.au-check input:checked::after { transform: rotate(-45deg) scale(1); }
.au-check input:focus-visible { outline: none; border-color: var(--color-green-base); box-shadow: 0 0 0 3px var(--color-green-bg); }
.au-check input[aria-invalid="true"] { border-color: var(--color-danger); }
.au-check-wrap { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- força da senha ---- */
.au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-1); }
.au-meter i { height: 4px; border-radius: var(--radius-pill); background: var(--color-surface-2); transition: background-color var(--duration-base) var(--ease-standard); }
.au-meter[data-score="1"] i:nth-child(-n+1) { background: var(--color-danger); }
.au-meter[data-score="2"] i:nth-child(-n+2) { background: var(--color-accent-gold); }
.au-meter[data-score="3"] i:nth-child(-n+3) { background: var(--color-green-base); }
.au-meter[data-score="4"] i:nth-child(-n+4) { background: var(--color-green-primary); }
.au-pw-meta { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.au-pw-rules { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.au-pw-rules li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text-tertiary); transition: color var(--duration-base) var(--ease-standard); }
.au-pw-rules li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.au-pw-rules li.is-ok { color: var(--color-green-primary); }
.au-pw-strength { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); }

.au-status-ok { color: var(--color-green-primary); }

/* ---- código de 6 dígitos (cadastro, entrar e "Esqueci minha senha") ---- */
.au-sentto { padding: var(--space-4) var(--space-5); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: center; font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.au-sentto strong { color: var(--color-text-primary); font-weight: 700; }
.np-input.au-code { height: 60px; text-align: center; font-family: var(--font-mono); font-size: 28px; font-weight: 600; letter-spacing: 0.5em; padding: 0 var(--space-5) 0 calc(var(--space-5) + 0.5em); }
.np-input.au-code::placeholder { letter-spacing: 0.5em; opacity: 0.35; }
.au-resend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0; font-size: 14px; color: var(--color-text-secondary); }
.au-resend .au-link[disabled] { color: var(--color-text-secondary); cursor: default; font-weight: 600; }
.au-info { margin: 0; text-align: center; font-size: 14px; color: var(--color-green-primary); }

/* ---- avisos ---- */
.au-alert, .au-notice {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-cut-studio); font-size: 14px; line-height: 1.45; margin-bottom: var(--space-5);
}
.au-alert { background: var(--color-danger-bg); border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent); color: var(--color-text-primary); }
.au-alert .np-icon { color: var(--color-danger); flex-shrink: 0; margin-top: 1px; }
.au-alert { flex-wrap: wrap; }
.au-alert #formErrorText { flex: 1 1 0; min-width: 0; }
.au-alert .au-link { flex: 0 0 100%; text-align: left; padding-left: calc(var(--icon-size-sm) + var(--space-4)); }   /* ação (ex.: Reenviar e-mail) numa linha própria, alinhada ao texto */
.au-alert[hidden], .au-notice[hidden] { display: none; }
.au-notice { background: var(--color-green-bg); border: 1px solid var(--color-green-border); flex-direction: column; }
.au-notice-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.au-notice .np-icon { color: var(--color-green-primary); flex-shrink: 0; margin-top: 1px; }
.au-notice-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-left: calc(var(--icon-size-md) + var(--space-4)); }
.au-shake { animation: au-shake 360ms var(--ease-standard); }
@keyframes au-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.au-submit { width: 100%; margin-top: var(--space-2); }
.au-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--color-text-tertiary); font-size: 13px; }
.au-divider::before, .au-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.au-switch { margin: var(--space-7) 0 0; text-align: center; color: var(--color-text-secondary); font-size: 14px; }
.au-footnote { margin: var(--space-7) 0 0; text-align: center; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }
.au-back { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); font-size: 14px; }
.au-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.au-done-badge { width: 56px; height: 56px; border-radius: var(--radius-cut-hero); display: grid; place-items: center; background: var(--color-green-bg); border: 1px solid var(--color-green-border); color: var(--color-green-primary); }
.au-done-badge .np-icon { width: 28px; height: 28px; }

.au-view[hidden], .au-done[hidden] { display: none; }

@media (min-width: 960px) {
  .au-page { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .au-aside { display: flex; }
  .au-brand-mobile { display: none; }
  /* alinhado ao topo (com folga) e não centralizado: as mensagens de erro não empurram o formulário */
  .au-main { padding: clamp(var(--space-9), 11vh, 120px) var(--space-9) var(--space-10); background: none; }
}
@media (max-height: 640px) and (min-width: 960px) { .au-orrery { display: none; } }
@media (max-width: 380px) {
  .au-main { padding-left: var(--space-5); padding-right: var(--space-5); }
  .au-pw-rules { gap: var(--space-2) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .au-shake, .au-nebula, .au-sun-corona { animation: none; }
  /* parado, mas cada planeta no seu lugar da órbita (o atraso negativo guarda a posição) */
  .au-orbit-arm, .au-planet, .au-planet-body::after, .au-sun-body::before, .au-sun-corona::before, .au-belt { animation-play-state: paused; }
  .au-ping-eq i, .au-ping-heart { animation: none; }
  .au-check input::after, .au-meter i { transition: none; }
}

/* ---- conta suspensa / banida (conta-suspensa.html, conta-banida.html) ---- */
.au-page [hidden] { display: none !important; }   /* os botões do design system definem display e vencem o atributo hidden */
.au-page--solo { grid-template-columns: minmax(0, 1fr); }
.au-page--solo .au-brand-mobile { display: inline-block; }
.st-card { max-width: 480px; }
.st-badge { width: 64px; height: 64px; margin-bottom: var(--space-6); border-radius: var(--radius-cut-hero); display: grid; place-items: center; border: 1px solid; }
.st-badge .np-icon { width: 32px; height: 32px; }
.st-badge--warn { color: var(--color-accent-gold); background: color-mix(in srgb, var(--color-accent-gold) 13%, transparent); border-color: color-mix(in srgb, var(--color-accent-gold) 40%, transparent); }
.st-badge--danger { color: var(--color-danger); background: var(--color-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 50%, transparent); }
.st-badge--ok { color: var(--color-green-primary); background: var(--color-green-bg); border-color: var(--color-green-border); }
.st-card .au-lead strong { color: var(--color-text-primary); }
.st-panel { margin: 0 0 var(--space-5); padding: var(--space-5); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-cut-studio); }
.st-panel[hidden] { display: none; }
.st-panel-title { margin: 0 0 var(--space-4); color: var(--color-text-secondary); font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); letter-spacing: var(--text-caption-tracking); text-transform: uppercase; }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.st-list li { display: flex; gap: var(--space-4); align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--color-text-primary); }
.st-list .np-icon { flex-shrink: 0; margin-top: 1px; }
.st-list .is-no .np-icon { color: var(--color-danger); }
.st-list .is-ok .np-icon { color: var(--color-green-primary); }
.st-list .is-ok { color: var(--color-text-secondary); }
.st-notice { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-primary); white-space: pre-line; overflow-wrap: anywhere; }
.st-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.st-actions .np-button { width: 100%; text-decoration: none; }
.st-actions a.np-button { display: inline-flex; }
.st-appeal { margin-top: var(--space-5); }
.st-appeal[hidden] { display: none; }
.st-appeal .np-textarea { width: 100%; font-size: 16px; min-height: 120px; }
.st-appeal-foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); font-size: 13px; color: var(--color-text-secondary); }
.st-appeal-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.st-appeal-actions .np-button { flex: 1; padding: 0 var(--space-4); white-space: nowrap; }
.st-sent { display: flex; gap: var(--space-4); align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--color-text-primary); }
.st-sent .np-icon { color: var(--color-green-primary); flex-shrink: 0; margin-top: 1px; }
.st-sent small { display: block; margin-top: var(--space-2); color: var(--color-text-secondary); font-size: 13px; }