/* ============================================
   Plenui Orbit — Telas de autenticação
   Mesmo sistema de identidade da landing page.
   ============================================ */
:root {
  --black:     #050505;
  --graphite:  #161616;
  --graphite-2:#1D1D1D;
  --border:    #292929;
  --white:     #FFFFFF;
  --purple:    #6D5EF5;
  --purple-d:  #5A4CE0;
  --orbit:     #9A8CFF;
  --gray-sub:  #B3B3B3;
  --gray-mut:  #7A7A7A;
  --green:     #34D399;
  --amber:     #FBBF24;
  --red:       #F87171;
}

body.auth-body {
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 20%, rgba(109,94,245,.16) 0%, rgba(5,5,5,0) 60%), var(--black);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--white);
}

.auth-container { width: 100%; max-width: 440px; }

.auth-card {
  background: var(--graphite);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
}

.auth-logo { text-align: center; margin-bottom: 1.75rem; }
.auth-logo .orbit-mark {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--orbit);
  position: relative;
  margin: 0 auto .9rem;
}
.auth-logo .orbit-mark::after {
  content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--purple); top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.auth-logo .orbit-mark.warn { border-color: var(--amber); }
.auth-logo .orbit-mark.warn::after { background: var(--amber); }
.auth-logo h2 { font-weight: 650; color: var(--white); font-size: 1.4rem; letter-spacing: -.01em; }
.auth-logo p { color: var(--gray-sub); font-size: .92rem; margin-top: .35rem; }

/* ── Formulário (sobrescreve Bootstrap) ─────────────── */
.auth-card .form-label { color: var(--gray-sub); font-size: .85rem; font-weight: 600; }
.auth-card .form-control,
.auth-card .input-group-text {
  background: var(--black);
  border: 1.5px solid var(--border);
  color: var(--white);
}
.auth-card .form-control::placeholder { color: var(--gray-mut); }
.auth-card .form-control:focus {
  background: var(--black);
  border-color: var(--orbit);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(154,140,255,.15);
}
.auth-card .input-group-text { color: var(--gray-mut); }
.auth-card .input-group .btn-outline-secondary {
  background: var(--black); border: 1.5px solid var(--border); color: var(--gray-mut);
}
.auth-card .input-group .btn-outline-secondary:hover { color: var(--white); border-color: var(--gray-sub); }
.auth-card .form-text { color: var(--gray-mut); font-size: .8rem; }
.auth-card hr { border-color: var(--border); opacity: 1; }

/* ── Botões ─────────────────────────────────────────── */
.auth-card .btn-primary {
  background: var(--purple); border-color: var(--purple);
  min-height: 48px; border-radius: 11px; font-weight: 650;
}
.auth-card .btn-primary:hover { background: var(--purple-d); border-color: var(--purple-d); }
.auth-card .btn-warning {
  background: var(--amber); border-color: var(--amber); color: #1a1400;
  min-height: 48px; border-radius: 11px; font-weight: 650;
}
.auth-card .btn-warning:hover { background: #E0A81E; border-color: #E0A81E; }

/* ── Alertas ────────────────────────────────────────── */
.auth-card .alert-danger {
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
  color: #FCA5A5; border-radius: 11px; font-size: .9rem;
}

/* ── Links ──────────────────────────────────────────── */
.auth-card p, .auth-card .text-muted { color: var(--gray-sub) !important; }
.auth-card a { color: var(--orbit); font-weight: 600; }
.auth-card a:hover { color: var(--white); }

/* ── Barra de força de senha ──────────────────────────── */
.auth-card .progress { background: var(--black); border: 1px solid var(--border); }

/* ── Plan cards (registro) ───────────────────────────── */
.plan-card {
  border: 1.5px solid var(--border);
  background: var(--black);
  border-radius: 12px;
  padding: .9rem;
  cursor: pointer;
  display: block;
  text-align: center;
  transition: all .18s;
}
.plan-card:hover { border-color: var(--gray-sub); }
.plan-card.selected { border-color: var(--purple); background: rgba(109,94,245,.1); }
.plan-name { font-weight: 650; font-size: .95rem; margin-bottom: .25rem; color: var(--white); }
.plan-price { font-size: 1.1rem; font-weight: 700; color: var(--orbit); margin-bottom: .25rem; }
.plan-card small { color: var(--gray-mut) !important; }

@media (max-width: 480px) {
  .auth-card { padding: 1.5rem; border-radius: 14px; }
}