/* ============================================================
   رقيم — css/auth.css
   شاشة تسجيل الدخول / إنشاء حساب
   ============================================================ */

#auth-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5);
  background: radial-gradient(circle at 30% 20%, var(--ac3), var(--bg0) 60%);
}

.auth-card {
  width: 100%; max-width: 380px;
  background: var(--bg1); border: 1px solid var(--b1);
  border-radius: var(--r4); padding: var(--s6) var(--s5);
  box-shadow: var(--sh3);
}

.auth-brand { text-align: center; margin-bottom: var(--s6); }
.auth-brand .brand-icon { width: 46px; height: 46px; margin: 0 auto var(--s3); color: var(--ac); }
.auth-brand h1 { font-size: 24px; color: var(--ac); font-weight: 800; }
.auth-brand p { font-size: 12.5px; color: var(--t3); margin-top: 4px; }

.auth-tabs { display: flex; background: var(--bg3); border-radius: var(--r2); padding: 4px; margin-bottom: var(--s5); }
.auth-tab { flex: 1; text-align: center; padding: 9px 0; border-radius: var(--r1); font-size: 13px; font-weight: 700; color: var(--t3); transition: all var(--tr); }
.auth-tab.active { background: var(--bg1); color: var(--ac); box-shadow: var(--sh1); }

.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeIn .2s ease; }

.auth-foot { text-align: center; margin-top: var(--s4); font-size: 12px; color: var(--t4); }

@media (min-width: 880px) {
  .auth-card { padding: var(--s7) var(--s6); }
}