:root {
  --glass: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.14);
  --text: #f3f1f8;
  --muted: #9b96ad;
  --accent: #ff6fa5;
  --accent2: #5BCEFA;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: #0a0a12;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px),
    radial-gradient(60% 50% at 18% 12%, rgba(255,111,165,.20), transparent),
    radial-gradient(55% 45% at 88% 85%, rgba(91,206,250,.18), transparent);
  font-family: Inter, system-ui, sans-serif; color: var(--text); padding:24px;
}
.authwrap { width:100%; max-width:420px; }
.authbox {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 30px 26px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
h1 { font:800 24px Poppins, sans-serif; margin:0 0 6px; letter-spacing:-.01em;
  background: linear-gradient(90deg, #fff, #ffd5e6); -webkit-background-clip: text; background-clip:text; color:transparent; }
.sub { color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.5; }
label { display:block; font-size:11px; font-weight:600; color:var(--muted); margin:16px 0 6px; text-transform:uppercase; letter-spacing:.07em; }
input[type=email], input[type=password] {
  width:100%; padding:14px 16px; border:1px solid var(--glass-brd); border-radius:14px;
  font:15px Inter, sans-serif; color:var(--text); background: rgba(255,255,255,.045);
  transition: border-color .15s, background .15s;
}
input[type=email]::placeholder, input[type=password]::placeholder { color: #6b6680; }
input[type=email]:focus, input[type=password]:focus {
  outline:none; border-color: rgba(255,111,165,.55); background: rgba(255,255,255,.07);
}
.btn {
  width:100%; margin-top:22px; padding:15px; border:0; border-radius:14px; cursor:pointer;
  background: linear-gradient(135deg, var(--accent), #c23e75);
  color:#fff; font:700 15px Poppins, sans-serif; letter-spacing:.01em;
  box-shadow: 0 10px 26px rgba(255,111,165,.3);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(255,111,165,.4); }
.btn:active { transform: translateY(0); opacity:.92; }
.err { background: rgba(255,90,110,.12); border:1px solid rgba(255,90,110,.3); color:#ff9aa8;
  padding:11px 14px; border-radius:12px; font-size:13px; margin:0 0 6px; }
.ok { background: rgba(80,220,160,.12); border:1px solid rgba(80,220,160,.3); color:#7defc0;
  padding:11px 14px; border-radius:12px; font-size:13px; margin:0 0 6px; }
.hint { color:var(--muted); font-size:12px; margin-top:18px; line-height:1.5; text-align:center; }
@media (max-width:480px){ .authbox{ padding:26px 20px; border-radius:18px; } h1{ font-size:21px; } }

/* ---------- Fundo de círculos orbitando (estúdio de criação) ---------- */
.orbit-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.orbit-layer { position:relative; width:var(--orbit-size); height:var(--orbit-size); max-width:92vw; max-height:92vw; will-change:transform; }
.orbit-ring { position:absolute; inset:0; border:1px dashed rgba(255,255,255,.14); border-radius:50%; animation:orbit-spin 70s linear infinite; }
.orbit-ring-in { inset:17%; animation-duration:46s; animation-direction:reverse; }
.orbit-ring-out { inset:0; }
.orbit-icon { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center;
  transform:rotate(calc(360deg / var(--n) * var(--i))); }
.orbit-icon-spin { width:46px; height:46px; margin-top:-23px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, #e9e9ee 60%, #d7d7e2); color:#2a2733;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.35);
  animation:orbit-spin-rev 70s linear infinite; }
.orbit-ring-in .orbit-icon-spin { width:40px; height:40px; margin-top:-20px; animation-duration:46s; animation-direction:normal; }
.orbit-center { position:absolute; top:50%; left:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, var(--accent), var(--accentD) 70%); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(255,111,165,.35); }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes orbit-spin-rev { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
.orbit-ring-in .orbit-icon-spin { animation-name:orbit-spin; }
@media (prefers-reduced-motion: reduce) { .orbit-ring, .orbit-icon-spin { animation:none; } }
.authwrap { position:relative; z-index:1; }

/* Em telas largas, a caixa de login fica mais à esquerda e o efeito animado
   aparece mais à direita, para o círculo não ficar escondido atrás do cartão. */
@media (min-width:900px) {
  .orbit-bg { justify-content:flex-end; padding-right:clamp(20px, 5vw, 110px); }
  .authwrap { margin-right:clamp(70px, 13vw, 220px); }
}
@media (min-width:900px) and (max-width:1140px) {
  /* telas médias (laptop comum): desloca bem menos, para o cartão não ficar
     colado na borda nem o círculo sair cortado */
  .orbit-bg { padding-right:16px; }
  .authwrap { margin-right:50px; }
}