/* Future Platform — Login page visual theme
   CSS-only enhancement. Preserves existing PHP, forms, translations and JavaScript. */
:root {
  --fp-ink:#17213d; --fp-muted:#69748d; --fp-primary:#5b5ce2;
  --fp-primary-dark:#4546c7; --fp-border:#e2e7f2;
}
html { min-height:100%; background:#eef2ff; }
body {
  box-sizing:border-box; min-height:100vh; height:auto!important;
  padding:28px 18px; overflow-x:hidden; position:relative; isolation:isolate;
  color:var(--fp-ink); font-family:"Tajawal","Segoe UI",Tahoma,sans-serif;
  background:
    radial-gradient(circle at 12% 18%,rgba(117,119,255,.22),transparent 30%),
    radial-gradient(circle at 88% 82%,rgba(33,190,210,.18),transparent 32%),
    linear-gradient(135deg,#111a3c 0%,#27356d 46%,#5260d9 100%)!important;
}
body::before,body::after {
  content:"";position:fixed;z-index:-1;border:1px solid rgba(255,255,255,.13);
  border-radius:50%;pointer-events:none;
}
body::before {
  width:390px;height:390px;top:-190px;inset-inline-start:-100px;
  box-shadow:0 0 0 36px rgba(255,255,255,.025),0 0 0 78px rgba(255,255,255,.02);
}
body::after {
  width:310px;height:310px;bottom:-170px;inset-inline-end:-80px;
  box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.02);
}
.container {
  box-sizing:border-box;width:min(100%,440px)!important;max-width:440px!important;
  padding:38px 36px 30px!important;margin:auto;position:relative;overflow:hidden;
  text-align:start!important;background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(255,255,255,.65);border-radius:24px!important;
  box-shadow:0 28px 75px rgba(5,12,43,.30),0 5px 16px rgba(5,12,43,.08)!important;
  animation:fp-login-enter .55s ease both;
}
.container::before {
  content:"";display:block;width:64px;height:5px;margin:0 auto 23px;
  border-radius:99px;background:linear-gradient(90deg,#6969f0,#22b8cf);
}
.container h1 {
  color:var(--fp-ink)!important;margin:0 0 25px!important;
  font-size:clamp(22px,4vw,27px)!important;line-height:1.45;
  font-weight:800;letter-spacing:-.35px;text-align:center;
}
.container form { margin:0; }
.container form+form { margin-top:3px; }
.container select,.container input[type="text"],.container input[type="password"] {
  box-sizing:border-box;display:block;width:100%!important;min-height:49px;
  margin:0 0 15px!important;padding:12px 15px!important;color:#202a46;
  background:#f8faff;border:1px solid var(--fp-border)!important;
  border-radius:12px!important;outline:none;font-family:inherit;
  font-size:15px!important;line-height:1.5;
  transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
}
.container select { cursor:pointer;margin-bottom:21px!important; }
.container input::placeholder { color:#8992a8;opacity:1; }
.container input:focus,.container select:focus {
  background:#fff;border-color:#7778ef!important;
  box-shadow:0 0 0 4px rgba(91,92,226,.12)!important;
}
.container button,#popup button {
  box-sizing:border-box;width:100%;min-height:50px;padding:12px 18px!important;
  border:0!important;border-radius:12px!important;color:#fff;
  background:linear-gradient(110deg,var(--fp-primary),#397fe5)!important;
  box-shadow:0 9px 20px rgba(83,91,218,.25);font-family:inherit;
  font-size:16px!important;font-weight:800;cursor:pointer;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.container button:hover,#popup button:hover {
  filter:brightness(1.04);transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(83,91,218,.32);
  background:linear-gradient(110deg,var(--fp-primary-dark),#2d6fce)!important;
}
.container button:active,#popup button:active { transform:translateY(0); }
.container p {
  margin:22px 0 0!important;color:var(--fp-muted)!important;
  font-size:14px;line-height:1.9;text-align:center;
}
.container a { color:var(--fp-primary)!important;font-weight:800;text-decoration:none;text-underline-offset:4px; }
.container a:hover { color:var(--fp-primary-dark)!important;text-decoration:underline; }
.error {
  margin:0 0 17px!important;padding:12px 14px!important;color:#a52c45!important;
  background:#fff1f3!important;border:1px solid #ffd4dc!important;
  border-radius:12px!important;font-size:14px!important;line-height:1.7;text-align:start;
}
#popupOverlay {
  padding:20px;box-sizing:border-box;background:rgba(9,16,42,.66)!important;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
#popup {
  box-sizing:border-box;width:min(100%,390px);padding:32px 28px 26px!important;
  border:1px solid rgba(255,255,255,.8);border-radius:22px!important;
  background:#fff!important;box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
}
#popup p { margin:0 0 16px!important;color:var(--fp-ink)!important;font-size:17px;font-weight:700;line-height:1.9; }
#popup button { width:auto;min-width:120px;min-height:44px;margin-top:8px!important; }
@keyframes fp-login-enter {
  from { opacity:0;transform:translateY(15px); }
  to { opacity:1;transform:translateY(0); }
}
@media(max-width:520px) {
  body { padding:18px 13px; }
  .container { padding:30px 22px 24px!important;border-radius:20px!important; }
  .container h1 { margin-bottom:21px!important; }
  .container select,.container input[type="text"],.container input[type="password"] { min-height:47px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
}