:root {
  --fundo: #09090b;
  --card: rgba(17, 17, 21, .9);
  --campo: #0d0d10;
  --linha: rgba(255, 255, 255, .08);
  --linha-hover: rgba(255, 255, 255, .14);
  --linha-foco: rgba(255, 255, 255, .32);
  --texto: #f0eff4;
  --texto-2: #a1a1aa;
  --texto-3: #71717a;
  --ok: #34d399;
  --erro: #fca5a5;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 var(--font, "Inter", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }

/* Luz de estúdio no topo */
.luz {
  position: fixed; z-index: -1; pointer-events: none;
  top: -220px; left: 50%; width: 760px; height: 560px; transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 45%, transparent 70%);
  filter: blur(40px);
}

.topo, .rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px clamp(16px, 5vw, 48px);
}
.topo { justify-content: flex-end; }
.marca { display: inline-block; margin-bottom: 26px; opacity: .95; transition: opacity .2s; }
.marca:hover { opacity: 1; }
.marca img { height: 30px; width: auto; display: block; }
.topo-link, .rodape {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
}
.topo-link { color: var(--texto-2); transition: color .2s; }
.topo-link:hover { color: #fff; }
.rodape { justify-content: center; padding-top: 16px; }

.centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }

.card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 6vw, 40px) clamp(22px, 6vw, 36px);
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: 18px;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, .85);
}
/* Brilho fino na borda superior */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}

.card-cabeca { text-align: center; margin-bottom: 8px; }
.card-cabeca .selo { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; margin-bottom: 18px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #d4d4d8;
}
.selo svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
h1 { margin: 0 0 8px; font-size: clamp(24px, 5vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
.sub { margin: 0 auto; max-width: 320px; font-size: 13.5px; line-height: 1.6; color: var(--texto-2); }

.campo { display: flex; flex-direction: column; gap: 7px; }
label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
input {
  width: 100%;
  padding: 13px 14px;
  font: inherit; font-size: 15px; color: var(--texto);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #52525b; }
input:hover { border-color: var(--linha-hover); }
input:focus { outline: none; border-color: var(--linha-foco); box-shadow: 0 0 0 1px var(--linha-foco); }
input:-webkit-autofill { -webkit-text-fill-color: var(--texto); -webkit-box-shadow: 0 0 0 40px var(--campo) inset; caret-color: var(--texto); }

.senha { position: relative; }
.senha input { padding-right: 46px; }
.ver-senha {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: none;
  color: var(--texto-3); cursor: pointer; display: grid; place-items: center;
  transition: color .15s;
}
.ver-senha:hover { color: #e4e4e7; }
.ver-senha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ver-senha .olho-fechado, .ver-senha[aria-pressed="true"] .olho { display: none; }
.ver-senha[aria-pressed="true"] .olho-fechado { display: block; }

.entrar {
  margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 0 18px;
  border: 0; border-radius: 12px;
  background: #fff; color: #09090b;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 255, 255, .12);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.entrar:hover { background: #f4f4f5; box-shadow: 0 0 26px rgba(255, 255, 255, .22); }
.entrar:active { transform: scale(.99); }
.entrar .seta { font-size: 17px; line-height: 1; transition: transform .2s; }
.entrar:hover .seta { transform: translateX(3px); }
.entrar .giro { display: none; width: 16px; height: 16px; border: 2px solid #09090b; border-top-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
.entrar:disabled { cursor: wait; opacity: .85; }
.entrar:disabled .giro { display: block; }
.entrar:disabled .seta { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

.aviso { margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.aviso[hidden] { display: none; }
.aviso.erro { color: var(--erro); background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25); }
.aviso.ok { color: var(--ok); background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .25); }

.ajuda { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 16px; text-align: center; }
.ajuda summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--texto-2); transition: color .15s; }
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda summary:hover, .ajuda[open] summary { color: #fff; }
.ajuda p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--texto-3); }

@media (max-width: 480px) {
  .topo { padding-top: 20px; padding-bottom: 8px; }
  .marca img { height: 26px; }
  .centro { align-items: flex-start; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .entrar .giro { animation-duration: 2s; } }