@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500&display=swap');
*{box-sizing:border-box}body{margin:0;padding:36px 18px;color:#eaf2ff;background:radial-gradient(ellipse at 85% 10%,#24446b,transparent 50%),radial-gradient(ellipse at 15% 75%,#302b57,transparent 55%),#101b30;min-height:100svh;font-family:Cairo,Tahoma,Arial,sans-serif;line-height:1.8;color-scheme:dark}.login-card{width:100%;max-width:390px;padding:28px;margin:auto;background:#26354eaa;border:1px solid #ffffff22;border-radius:16px;backdrop-filter:blur(20px);box-shadow:0 12px 35px #080e1a25}.logo{display:block;margin:0 auto 10px;width:75px;height:75px;object-fit:contain;border-radius:50%;animation:logo-float 5.5s ease-in-out infinite}h1{text-align:center;font-size:21px;font-weight:500;margin:0}h2{text-align:center;font-size:18px;font-weight:500;margin:24px 0 20px}.university{text-align:center;color:#bed0e5;font-size:12px;margin:3px 0}label{display:block;font-size:13px;margin:16px 0 7px}input{display:block;width:100%;min-width:0;min-height:46px;padding:9px 12px;border:1px solid #ffffff2c;border-radius:8px;font:inherit;font-size:16px;color:#f0f6ff;background:#0d192766}input:focus-visible,button:focus-visible{outline:2px solid #b4d3fc;outline-offset:3px}button{width:100%;min-height:46px;padding:10px 15px;border:1px solid #71a2d644;border-radius:8px;color:#fff;background:linear-gradient(120deg,#2d6fa6,#30598f);font:inherit;font-size:13px;margin-top:23px;cursor:pointer}button:hover{filter:brightness(1.1)}button:disabled{opacity:.65;cursor:wait}.link-button{background:transparent;border:0;color:#c9e2ff;margin-top:12px;min-height:40px}.status{font-size:12px;color:#c9e2ff;overflow-wrap:anywhere;margin:10px 0}.status:empty{display:none}.status.error{color:#ffd0ca}.recovery-info,.hint{font-size:12px;color:#bed0e5;overflow-wrap:anywhere}.recovery-info bdi{color:#eaf2ff}.hint{font-size:11px;margin:12px 0 0}footer{text-align:center;font-size:11px;color:#bed0e5;margin:22px 0 0}[hidden]{display:none!important}@keyframes logo-float{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-2px) rotate(.7deg)}}@media(max-width:380px){.login-card{padding:22px}body{padding:24px 14px}}@media(prefers-reduced-motion:reduce){.logo{animation:none}}

/* أنيميشن وانتقالات لطيفة لصفحة الدخول */
.login-card {
  animation: login-card-in .5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: box-shadow .35s ease, transform .35s ease;
}
.login-card:hover {
  box-shadow: 0 16px 40px rgba(8, 14, 26, 0.35);
}
@keyframes login-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.logo {
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover {
  animation-play-state: paused;
  transform: scale(1.1) rotate(3deg);
}

input {
  transition: background .25s ease, border-color .25s ease, box-shadow .3s ease, transform .2s ease;
}
input:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(180, 211, 252, 0.25);
  border-color: #8ab4e8;
}

button {
  transition: filter .25s ease, transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s ease;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45, 111, 166, 0.35);
}
button:active {
  transform: translateY(0) scale(0.98);
}

.link-button {
  transition: color .25s ease, transform .2s ease;
}
.link-button:hover {
  color: #eaf2ff;
  transform: translateX(-2px);
}

.status {
  animation: status-in .35s ease both;
}
@keyframes status-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card, .logo, input, button, .link-button, .status {
    animation: none !important;
    transition: none !important;
  }
}