:root{
  --bg:#0b2545; --bg2:#13315c; --card:#ffffff; --ink:#1c2430; --muted:#5b6470;
  --line:#d7dee8; --brand:#134e9c; --brand-ink:#ffffff; --err:#b3261e; --ok:#1b6b3a;
  --radius:14px; --shadow:0 10px 30px rgba(11,37,69,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg),var(--bg2));
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth{width:100%; max-width:420px}
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 26px;
}
.brand{text-align:center; margin-bottom:14px}
.brand img{max-height:52px; max-width:100%}
.brand h1{font-size:22px; margin:0; color:var(--bg)}
h2{margin:0 0 4px; font-size:20px; color:var(--bg)}
.lead{margin:0 0 16px; color:var(--muted); font-size:14px}
.field{display:block; margin:0 0 12px}
.field>span{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px}
input,select{
  width:100%; padding:11px 12px; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; outline:none;
}
input:focus,select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(19,78,156,.15)}
.btn{
  width:100%; margin-top:6px; padding:12px 14px; font-size:15px; font-weight:600;
  color:var(--brand-ink); background:var(--brand); border:0; border-radius:10px; cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}
a.btn{display:block; text-align:center; text-decoration:none; box-sizing:border-box}
.alert{background:#fdecec; border:1px solid #f3c2c0; color:var(--err);
  border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:13.5px}
.alert div+div{margin-top:2px}
.notice{background:#e9f6ee; border:1px solid #bfe3cd; color:var(--ok);
  border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:13.5px}
.fe{color:var(--err); font-size:12.5px; margin:-8px 0 10px}
.hint{color:var(--muted); font-size:12px; margin:-6px 0 12px}
.switch{margin-top:16px; text-align:center; font-size:13.5px; color:var(--muted)}
.switch a{color:var(--brand); text-decoration:none; font-weight:600}
.switch a:hover{text-decoration:underline}
.foot{margin:14px 0 0; text-align:center; color:#cfe0f5; font-size:12px}
/* honeypot: hidden from humans, visible to naive bots */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0}
@media (max-width:480px){ .card{padding:22px 18px} }

/* ---- language switcher ---- */
.langs{display:flex; gap:6px; justify-content:flex-end; margin:-6px 0 12px}
.langs a{
  font-size:12px; color:var(--muted); text-decoration:none; line-height:1.7;
  padding:2px 10px; border:1px solid var(--line); border-radius:999px;
}
.langs a:hover{border-color:var(--brand); color:var(--brand)}
.langs a.on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:600}

/* ---- logo above the form ---- */
.brand img.brand-logo{max-height:64px; max-width:72%; object-fit:contain}

/* ---- Arabic / RTL (system Arabic fonts; no web-font needed) ---- */
[dir="rtl"] body{font-family:"Segoe UI","Noto Sans Arabic",Tahoma,system-ui,-apple-system,Arial,sans-serif}
[dir="rtl"] .fe,[dir="rtl"] .hint{text-align:right}
[dir="rtl"] input,[dir="rtl"] select{text-align:right}
/* emails, phone numbers and passwords read left-to-right even on an RTL page */
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="password"]{
  text-align:left; direction:ltr;
}