/* =====================================================================
   login2.css — صفحة الدخول «فاتح عائم»: بطاقة زجاجية في الوسط وأشكال ملوّنة تطفو حولها.
   يُحمَّل بعد app.css في pages/login.php. احذف الرابط للرجوع للتصميم السابق.
   ====================================================================== */
#loginScreen{background:linear-gradient(135deg,#eef2ff,#fdf2f8 50%,#ecfeff)!important}
#snowCanvas{display:none}

/* الأشكال العائمة */
.lg-shape{position:absolute;z-index:1;opacity:.85;pointer-events:none;animation:lgFloat 9s ease-in-out infinite}
.lg-s1{width:180px;height:180px;top:10%;right:12%;border-radius:40% 60% 55% 45%;background:linear-gradient(135deg,#a5b4fc,#818cf8)}
.lg-s2{width:120px;height:120px;bottom:12%;right:20%;border-radius:50%;background:linear-gradient(135deg,#f9a8d4,#f472b6);animation-delay:-3s}
.lg-s3{width:150px;height:150px;top:18%;left:14%;border-radius:28px;background:linear-gradient(135deg,#67e8f9,#22d3ee);animation-delay:-5s}
.lg-s4{width:90px;height:90px;bottom:18%;left:18%;border-radius:24px;background:linear-gradient(135deg,#fde68a,#fbbf24);animation-delay:-1.5s}
@keyframes lgFloat{50%{transform:translateY(-26px) rotate(12deg)}}

/* البطاقة */
.login-card{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(26px)!important;-webkit-backdrop-filter:blur(26px)!important;border:1px solid #fff!important;
  border-radius:32px!important;padding:38px!important;box-shadow:0 40px 80px -30px rgba(99,102,241,.35)!important;animation:lgIn .7s cubic-bezier(.2,.8,.2,1) both}
.login-card.la-shake{animation:shake .4s}
.login-title{font-size:28px;font-weight:900;color:#1e1b4b;letter-spacing:-.4px}
.login-sub{color:#8b8fb0;font-size:14px;margin-bottom:26px}
.login-field label{color:#8b8fb0;font-size:13px;font-weight:800}
.login-field input{height:56px;padding:0 16px;border-radius:16px;background:#f5f6ff;border:1.5px solid transparent;color:#1e1b4b}
.login-field input::placeholder{color:#b4b7d6}
.login-field input:focus{background:#fff;border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.13)}
.login-btn{height:56px;padding:0;border-radius:16px;background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;box-shadow:0 14px 28px -10px #6366f1;position:relative;overflow:hidden}
.login-btn::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(120%);animation:lgShine 3s infinite}
.login-btn:hover{box-shadow:0 18px 34px -10px #6366f1}
.login-link{color:#6366f1}
.login-foot{color:#a5a9cc}

/* ظهور العناصر بالتدريج */
.login-card > *{animation:lgIn .7s cubic-bezier(.2,.8,.2,1) both}
.login-card > :nth-child(2){animation-delay:.08s}.login-card > :nth-child(3){animation-delay:.14s}
.login-card > :nth-child(n+4){animation-delay:.2s}
@keyframes lgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lgShine{60%,100%{transform:translateX(-120%)}}

@media (max-width:640px){.lg-s1{width:110px;height:110px}.lg-s3{width:90px;height:90px}.lg-s2,.lg-s4{width:70px;height:70px}.login-card{padding:28px 22px!important}}
@media (prefers-reduced-motion:reduce){.lg-shape,.login-card,.login-card > *,.login-btn::after{animation:none!important}}