:root{
  --ink:#0f1e2e; --muted:#68788c; --line:#dce3ec;
  --bg:#eceff4; --surface:#ffffff; --accent:#1f6f8b;
  --ok:#0f6b4f; --ok-soft:#e6f3ee; --err:#a02334; --err-soft:#fbeaec;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 20px; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  font-size:15px; line-height:1.75; direction:rtl;
}
.card{
  width:100%; max-width:440px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:36px 32px 32px;
}
.rail{display:flex; gap:6px; margin:0 0 28px}
.rail span{flex:1; height:3px; border-radius:2px; background:var(--line)}
.rail span.on{background:var(--accent)}
.eyebrow{margin:0 0 6px; font-size:12px; letter-spacing:.08em; color:var(--muted)}
h1{margin:0 0 10px; font-size:22px; font-weight:600; letter-spacing:-.01em}
.lead{margin:0 0 26px; color:var(--muted); font-size:14px}
label{display:block; margin:0 0 8px; font-size:13px; font-weight:600}
input[type=text],input[type=email],input[type=password]{
  width:100%; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:#fbfcfd; border:1px solid var(--line); border-radius:8px; margin:0 0 18px;
}
input:focus{outline:2px solid var(--accent); outline-offset:1px; background:#fff}
button{
  width:100%; padding:13px 16px; font:inherit; font-size:15px; font-weight:600;
  color:#fff; background:var(--accent); border:0; border-radius:8px; cursor:pointer;
}
button:hover{background:#175a72}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.note{margin:20px 0 0; font-size:13px; color:var(--muted)}
.note a{color:var(--accent)}
.msg{padding:14px 16px; border-radius:8px; font-size:14px; margin:0 0 22px}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.msg.err{background:var(--err-soft); color:var(--err)}
.hint{display:block; margin:-12px 0 18px; font-size:12px; color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .card{animation:rise .25s ease-out}
  @keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
}