/* Tela de login Seenbio — coluna de formulário + mosaico inclinado de páginas reais */
:root {
  --a-bg: #0d0614;
  --a-text: #ffffff;
  --a-muted: #b9b4c4;
  --a-field: rgba(255, 255, 255, .06);
  --a-line: rgba(255, 255, 255, .28);
  --a-pink: #ff06ff;
  --a-purple: #6528f7;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.auth {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--a-bg); color: var(--a-text);
  font-family: 'Poppins', system-ui, sans-serif;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fundo ---------- */
.auth__bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.auth__wall {
  position: absolute; top: -30%; right: -12%; width: 78vw; min-width: 900px; height: 170%;
  display: flex; gap: 26px; transform: rotate(14deg); transform-origin: center;
}
.auth__col { flex: 1; display: flex; flex-direction: column; gap: 26px; animation: auth-up 70s linear infinite; }
.auth__col--1 { margin-top: 160px; animation-duration: 85s; }
.auth__col--2 { margin-top: 60px; animation-duration: 75s; }
.auth__col--3 { margin-top: 240px; animation-duration: 90s; }
@keyframes auth-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.auth__shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--a-bg) 0%, rgba(13, 6, 20, .97) 30%, rgba(13, 6, 20, .72) 50%, rgba(13, 6, 20, .25) 75%, rgba(13, 6, 20, .35) 100%);
}
.auth__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(40vw 40vw at 85% 20%, rgba(255, 6, 255, .35), transparent 60%),
    radial-gradient(45vw 45vw at 70% 85%, rgba(101, 40, 247, .45), transparent 60%),
    radial-gradient(30vw 30vw at 100% 60%, rgba(191, 0, 255, .3), transparent 60%);
}

/* Cartão de página (miniatura) — MESMO visual do cartão da home (public/embed/vitrine.js):
   foto ocupando o cartão, degradê para a cor de fundo da página, nome, @, ícones e seguidores por cima.
   Medidas em cqw (proporcionais à largura do cartão). */
.pcard {
  position: relative; aspect-ratio: 9 / 10; flex-shrink: 0; overflow: hidden; container-type: inline-size;
  border-radius: 24px; background: var(--sb-bg); box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.pcard__media { position: absolute; inset: 0; background: linear-gradient(135deg, var(--sb-band-1), var(--sb-band-2)); }
.pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pcard--wide .pcard__media { background: var(--sb-bg); }
.pcard--wide .pcard__media img { height: auto; } /* arte larga: inteira no topo, sem cortar */
.pcard__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 44%, color-mix(in srgb, var(--sb-bg) 78%, transparent) 60%, var(--sb-bg) 80%); } /* igual em todos: começa no nome e vai até o fim */
/* conteúdo SEMPRE a partir da mesma altura (o nome alinhado em todos os cartões); sobra espaço embaixo */
.pcard__body { position: absolute; left: 0; right: 0; top: 63cqw; padding: 0 5cqw; text-align: center; }
.pcard__name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 7.4cqw; line-height: 1.2; letter-spacing: -.01em; color: var(--sb-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .4cqw 3cqw var(--sb-bg); }
.pcard__handle { margin-top: .8cqw; font-size: 3.9cqw; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 2.2cqw; margin-top: 3.6cqw; }
.pcard__icons span {
  width: 10.5cqw; height: 10.5cqw; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--sb-accent); font-size: 5.2cqw; box-shadow: 0 .8cqw 2.4cqw rgba(0, 0, 0, .25);
}
.pcard__followers { margin-top: 3.8cqw; font-weight: 700; font-size: 4.4cqw; color: var(--sb-heading); }
.pcard__followers i { font-size: 3cqw; margin-left: .8cqw; }

/* ---------- Painel do formulário ---------- */
.auth__panel {
  position: relative; z-index: 1;
  width: min(500px, 100%); margin-left: clamp(0px, 8vw, 154px);
  /* cabe sempre na altura da tela (sem rolagem): medidas proporcionais à altura */
  height: 100vh; height: 100dvh; padding: clamp(14px, 4vh, 48px) 24px;
  display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto; scrollbar-width: none; /* só rola se uma tela maior (criar acesso) não couber */
}
.auth__panel::-webkit-scrollbar { display: none; }
.auth__panel > * { flex-shrink: 0; }
.auth__logo { display: inline-block; align-self: flex-start; margin-bottom: clamp(12px, 3.6vh, 34px); text-decoration: none; color: #fff; }
.auth__logo img { height: clamp(30px, 4.6vh, 42px); width: auto; display: block; }
.auth__logo span { font-size: 28px; font-weight: 600; }
.auth__logo span i { color: var(--a-pink); }
.auth h1 { font-size: clamp(38px, 7.2vh, 64px); font-weight: 700; margin: 0 0 clamp(8px, 2.2vh, 22px); letter-spacing: -.02em; line-height: 1; font-family: 'Poppins', sans-serif; }
.auth__lead { margin: 0; font-size: clamp(15px, 2.2vh, 19px); font-weight: 600; color: #e9e6ef; }
.auth__sub { margin: 4px 0 clamp(16px, 4.4vh, 40px); font-size: clamp(14px, 2.1vh, 18px); font-style: italic; color: var(--a-muted); }

.auth__notice { margin: calc(clamp(16px, 4.4vh, 40px) * -0.5) 0 clamp(10px, 2vh, 18px); padding: clamp(8px, 1.4vh, 12px) 16px; border-radius: 14px; background: rgba(255, 196, 0, .12); border: 1px solid rgba(255, 196, 0, .4); color: #ffd875; font-size: 14px; }
.auth__error { margin: -16px 0 18px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 70, 70, .12); border: 1px solid rgba(255, 70, 70, .45); color: #ff9c9c; font-size: 14px; }

.auth__form { display: flex; flex-direction: column; gap: clamp(9px, 1.8vh, 16px); }
.auth__input {
  width: 100%; height: clamp(44px, 7.2vh, 64px); padding: 0 28px; border-radius: 999px;
  background: var(--a-field); border: 1px solid var(--a-line); color: #fff;
  font: 400 clamp(15px, 2.1vh, 18px)/1 'Poppins', sans-serif; outline: none; transition: border-color .2s, background .2s;
}
.auth__input::placeholder { color: #a9a3b5; }
.auth__input:focus { border-color: var(--a-pink); background: rgba(255, 255, 255, .09); }
.auth__pass { position: relative; }
.auth__pass .auth__input { padding-right: 64px; }
.auth__eye { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #a9a3b5; font-size: 18px; cursor: pointer; padding: 8px; }
.auth__btn {
  height: clamp(44px, 7.2vh, 64px); border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(90deg, #bf00ff, #6600ff); color: #fff;
  font: 600 clamp(15px, 2.1vh, 18px)/1 'Poppins', sans-serif; transition: filter .2s, opacity .2s;
}
.auth__btn:hover { filter: brightness(1.1); }
.auth__btn:disabled { background: #8e8a96; color: #c9c6cf; cursor: not-allowed; filter: none; opacity: .75; }
.auth__forgot { align-self: flex-start; margin-left: 6px; color: #c9c6cf; font-size: clamp(13px, 1.8vh, 15px); }
.auth__forgot:hover { color: #fff; }

.auth__or { display: flex; align-items: center; gap: 22px; margin: clamp(12px, 3.6vh, 34px) 0; color: #c9c6cf; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .22); }

.auth__google {
  display: flex; align-items: center; justify-content: center; gap: 14px; position: relative;
  height: clamp(44px, 7.2vh, 64px); border-radius: 999px; background: #fff; color: #1f1f1f; text-decoration: none;
  font: 500 clamp(15px, 2.1vh, 18px)/1 'Poppins', sans-serif;
}
.auth__google svg { position: absolute; left: 24px; }
.auth__google:hover { background: #f1f1f1; }
.auth__signup { margin: clamp(12px, 3.6vh, 34px) 0 0; font-size: clamp(13px, 1.9vh, 16px); color: #e9e6ef; }
.auth__signup a { color: var(--a-pink); font-weight: 600; }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--a-pink); outline-offset: 3px; }

/* botão-link (mensagens) e telas com mais campos */
.auth__btn--link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.auth--compact h1 { font-size: clamp(30px, 5.4vh, 52px); }
.auth--compact .auth__sub { margin-bottom: clamp(12px, 3vh, 28px); }
.auth--compact .auth__or, .auth--compact .auth__signup { margin-top: clamp(10px, 2.4vh, 26px); }
.auth--compact .auth__or { margin-bottom: clamp(10px, 2.4vh, 26px); }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .auth__wall { right: -60%; width: 180vw; min-width: 0; opacity: .5; }
  .auth__shade { background: linear-gradient(180deg, rgba(13, 6, 20, .82), rgba(13, 6, 20, .95)); }
  .auth__panel { margin: 0 auto; padding: clamp(12px, 3vh, 40px) 20px; }
}
/* telas muito baixas (celular deitado): aí sim permite rolar, para nada ficar cortado */
@media (max-height: 520px) {
  body.auth { height: auto; overflow: auto; }
  .auth__panel { height: auto; min-height: 100vh; }
}
@media (prefers-reduced-motion: reduce) { .auth__col { animation: none; } }
.auth__legal { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #a69ec0; }
.auth__legal a { color: #d9c4ff; }
/* selo "Admin" no título do login do painel administrativo */
.auth__badge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 6px 14px; border-radius: 999px; font-size: .32em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(100deg, #ff00ff, #5b5bff); color: #fff; }
.auth__panel .mfa-form { display: flex; flex-direction: column; gap: 12px; }
.auth__field-label { font-size: 13px; color: var(--a-muted); margin: 0 0 -4px; }