*{box-sizing:border-box}html,body{margin:0;font-family:Arial,sans-serif;background:#f7f9fb;color:#17263a}body{direction:rtl}
.topbar{height:60px;background:#fff;border-bottom:1px solid #dfe6ec;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.mini-logo{height:38px;width:auto}.menu-btn{border:0;background:none;font-size:27px;color:#0b2748;cursor:pointer}
.side-menu{position:fixed;top:0;right:-280px;width:280px;height:100vh;background:#fff;border-left:1px solid #dfe6ec;z-index:50;padding:78px 24px;transition:.2s;box-shadow:-8px 0 25px rgba(0,0,0,.05)}
.side-menu.open{right:0}.side-menu a{display:block;padding:13px 4px;border-bottom:1px solid #edf1f4;font-size:15px}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:40}.overlay.show{display:block}
.contact-small{margin-top:28px;font-size:12px;line-height:1.8;color:#6b7785}
.hero{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.hero-logo{width:min(420px,80vw)}.hero h1{font-size:20px;color:#0b2748;margin:16px 0 7px}.hero p,.contact{font-size:13px;color:#6b7785;line-height:1.8}
.card,.form{width:min(720px,92vw);margin:48px auto;background:#fff;border:1px solid #dfe6ec;border-radius:14px;padding:28px}
.card h1,.form h1{font-size:22px;color:#0b2748}.card p{font-size:14px;line-height:1.85;color:#354558}
label{display:block;font-size:13px;margin:12px 0 6px}input{width:100%;padding:11px;border:1px solid #ccd6df;border-radius:8px;font-size:15px}
button{margin-top:18px;width:100%;padding:11px;border:0;border-radius:8px;background:#0b2748;color:#fff;font-weight:700}
.error{background:#fff1f1;color:#8b2222;padding:10px;border-radius:8px}.note{font-size:12px;color:#6b7785}
.appbar{height:52px;background:#fff;border-bottom:1px solid #dfe6ec;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:13px}
.appframe{width:100%;height:calc(100vh - 52px);border:0;background:#fff}