@font-face{font-family:Tajawal;src:url(fonts/tajawal-arabic-400.woff2);font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-arabic-700.woff2);font-weight:700;font-display:swap}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:28px 18px;background:#f4f4f2;color:#141f3f;font:17px/1.5 Tajawal,"Segoe UI",sans-serif}
main{width:min(100%,456px);background:white;border:1px solid #d8dce3;border-top:4px solid #20305c;border-radius:6px;box-shadow:0 14px 50px #1924470a;padding:34px clamp(22px,5vw,42px) 40px}
header{display:flex;align-items:center;gap:14px;border-bottom:1px solid #dee1e7;padding-bottom:22px}
header img{object-fit:contain}header strong,header span{display:block}header strong{font-size:26px}header span,p{color:#51596b}
h1{font-size:32px;line-height:1.35;margin:25px 0 20px}
form{display:grid}label{font-weight:700}input,button{font:inherit;width:100%;min-height:48px;border-radius:6px}
input{background:#fff;color:#141f3f;border:1px solid #a2aabc;padding:7px 12px;text-align:start;margin:5px 0 18px}
:focus-visible{outline:3px solid #475e98;outline-offset:3px}
button{display:flex;align-items:center;justify-content:space-between;margin-top:6px;background:#20305c;color:white;font-weight:700;border:0;padding:10px 16px;cursor:pointer}
button:hover{background:#141f3f}button:active{background:#101932}
.error{color:#85262b;background:#fff3f2;padding:10px 12px;border-inline-start:3px solid #a23539}
@media(max-width:480px){body{padding:18px 14px}main{padding:24px 22px 30px}header img{height:58px;width:55px}}

html{scrollbar-gutter:stable}