/* ============================================================
   Login screen - animated background + glass card
============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
  direction: rtl;
}

.login-bg {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1f1d2b 0%, #2c2a3f 40%, #4f3cb8 100%);
  overflow: hidden;
}

/* Floating animated blobs */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55;
  animation: float 14s ease-in-out infinite;
}
.blob.b1 { width: 320px; height: 320px; background: #4f8cff; top: -80px; right: -80px; animation-delay: 0s; }
.blob.b2 { width: 380px; height: 380px; background: #a855f7; bottom: -100px; left: -60px; animation-delay: 2s; }
.blob.b3 { width: 220px; height: 220px; background: #14b8a6; top: 40%; left: 30%; animation-delay: 4s; }
.blob.b4 { width: 260px; height: 260px; background: #f59e0b; bottom: 10%; right: 25%; animation-delay: 6s; }

@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-40px) scale(1.05); }
  66%     { transform: translate(-30px,20px) scale(.95); }
}

/* Bubbles */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles span {
  position: absolute; bottom: -100px;
  width: 10px; height: 10px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}

/* Center wrapper */
.login-wrap {
  position: relative; z-index: 2;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

/* Glass card */
.login-card {
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: cardIn .7s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #4f8cff, #6a4cff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px;
  box-shadow: 0 8px 24px rgba(79,140,255,.4);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

.login-card h1 {
  text-align: center; font-size: 22px; font-weight: 700;
  color: #1f1d2b; margin: 0 0 6px;
}
.login-card .subtitle { text-align: center; color: #6b7280; font-size: 13px; margin-bottom: 26px; }

.form-group { margin-bottom: 16px; position: relative; }
.form-group label {
  display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px;
}
.input-wrap { position: relative; }
.input-wrap i {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  color: #9ca3af; font-size: 16px;
}
.form-group input {
  width: 100%; padding: 12px 42px 12px 14px;
  border: 1px solid #e5e7eb; border-radius: 10px;
  font-size: 14px; font-family: inherit;
  transition: all .25s ease;
  background: #f9fafb;
}
.form-group input:focus {
  outline: none; border-color: #4f8cff; background: #fff;
  box-shadow: 0 0 0 4px rgba(79,140,255,.12);
}

.remember-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 13px; }
.remember-row label { display: flex; align-items: center; gap: 6px; color: #4b5563; cursor: pointer; }
.remember-row a { color: #4f8cff; text-decoration: none; }

.btn-login {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #4f8cff, #6a4cff);
  color: #fff; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .25s ease;
  position: relative; overflow: hidden;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,140,255,.4); }
.btn-login:active { transform: translateY(0); }
.btn-login::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
  transition: transform .6s;
}
.btn-login:hover::before { transform: translateX(100%); }

.login-alert {
  background: #fde8e8; color: #c81e1e;
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 16px;
  border-right: 3px solid #c81e1e;
  animation: shake .4s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

.login-footer { text-align: center; margin-top: 24px; font-size: 12px; color: #9ca3af; }