/* ═══════════════════════════════════════════════════════
   VORTEX RP — Auth Screen
   v1.0.0 — Production
   ═══════════════════════════════════════════════════════ */

#auth-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; position: relative; padding: 16px;
  overflow: hidden;
}
.auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.auth-bg::before {
  content: 'VORTEX';
  font-family: 'Archivo Black', sans-serif; font-size: clamp(14vw,22vw,28vw);
  color: rgba(124,92,252,.03); position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  white-space: nowrap; line-height: 1; user-select: none;
}
.auth-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.auth-orb-1 { width: 500px; height: 500px; background: rgba(124,92,252,.12); top: -100px; right: -80px; }
.auth-orb-2 { width: 400px; height: 400px; background: rgba(252,92,124,.07); bottom: -80px; left: -80px; }

.auth-wrap { display: flex; position: relative; z-index: 1; width: 100%; max-width: 680px; animation: fadeUp .4s ease both; }

/* ── Brand panel ── */
.auth-brand {
  width: 300px; flex-shrink: 0; padding: 44px 32px;
  background: linear-gradient(160deg, rgba(124,92,252,.1), rgba(124,92,252,.02));
  border: 1px solid var(--border2); border-right: none;
  display: flex; flex-direction: column; justify-content: center;
}
.auth-logo { font-family: 'Archivo Black', sans-serif; font-size: 58px; line-height: 1; letter-spacing: 2px; }
.auth-logo span { color: var(--accent); }
.auth-tagline { font-size: 12px; color: var(--muted2); margin-top: 10px; letter-spacing: .5px; line-height: 1.7; }
.auth-features { margin-top: 32px; display: flex; flex-direction: column; gap: 11px; }
.auth-feat { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted2); }
.auth-feat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 8px var(--accent); }

/* ── Card ── */
.auth-card {
  flex: 1; background: var(--surface);
  border: 1px solid var(--border2); padding: 36px 32px;
}
.auth-title { font-family: 'Archivo Black', sans-serif; font-size: 22px; margin-bottom: 4px; }
.auth-sub   { font-size: 12px; color: var(--muted); margin-bottom: 22px; }

.auth-tabs { display: flex; background: var(--bg); border: 1px solid var(--border); padding: 3px; gap: 3px; margin-bottom: 22px; }
.auth-tab  { flex: 1; background: none; border: none; color: var(--muted); font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; padding: 9px; letter-spacing: 1px; text-transform: uppercase; transition: all .2s; cursor: pointer; }
.auth-tab.active { background: var(--accent); color: #fff; }

.auth-big-btn { width: 100%; padding: 13px; font-family: 'Archivo Black', sans-serif; font-size: 15px; letter-spacing: 1.5px; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: all .2s; margin-top: 4px; }
.auth-big-btn:hover { background: #9070ff; box-shadow: 0 6px 24px rgba(124,92,252,.4); }

.auth-hint { font-size: 10px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.7; }
.auth-hint b { color: var(--accent); }
.auth-hint b.cyan-hl { color: var(--cyan); }

/* ── Responsive auth ── */
@media (max-width: 700px) {
  .auth-brand { display: none; }
  .auth-card  { border: 1px solid var(--border2); }
  .auth-wrap  { max-width: 420px; }
}
@media (max-width: 440px) {
  .auth-card { padding: 24px 18px; }
}