:root { --navy:#102a47; --blue:#0a7fc4; --bg:#eef4f9; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#e6f1fa,#f7fafc); font-family:'Tajawal',system-ui,sans-serif; color:var(--navy); padding:16px; }
.card { background:#fff; width:100%; max-width:380px; padding:32px 28px; border-radius:16px; box-shadow:0 10px 40px rgba(16,42,71,.12); text-align:center; }
.logo { height:64px; max-width:100%; object-fit:contain; margin-bottom:8px; }
h1 { font-size:20px; margin:8px 0 24px; }
form { display:grid; gap:16px; text-align:right; }
label { display:grid; gap:6px; font-size:14px; font-weight:500; }
input { font:inherit; padding:12px 14px; border:1px solid #cfdbe6; border-radius:10px; outline:none; direction:ltr; text-align:right; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,127,196,.15); }
button { font:inherit; font-weight:700; padding:12px; border:0; border-radius:10px; background:var(--navy); color:#fff; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
.error { margin:0; color:#b42318; background:#fef3f2; padding:10px 12px; border-radius:8px; font-size:14px; }