@import url('/login-assets/design/fonts/fonts.css');

:root { color-scheme: light; font-family: Vazirmatn,Tahoma,sans-serif; color:#0b2063; background:#d9edfe; }
* { box-sizing:border-box; }
body { margin:0; padding:18px 16px; }
a { color:#075cfa; text-decoration:none; }
a:focus-visible { outline:2px solid #065dec; outline-offset:4px; }
.login-page { max-width:1600px; margin:auto; overflow:hidden; border-radius:16px; background:#f2f9ff; }
.top { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:#fff; }
.brand { display:inline-flex; align-items:center; gap:10px; color:#08185d; }
.brand img { width:48px; height:48px; }
.brand b { font-size:30px; font-weight:900; line-height:1.2; }
.brand small { display:block; font-size:9px; font-weight:700; margin-top:4px; }
.back { display:flex; align-items:center; flex-direction:row-reverse; gap:9px; font-size:14px; font-weight:800; }
.back span { font-size:23px; line-height:1; }
.back-mobile { display:none; }
.scene {
 position:relative; min-height:calc(100vh - 114px); display:grid;
 grid-template-columns:minmax(0, .96fr) minmax(0, 1.04fr);
 align-items:start; gap:clamp(26px,4vw,64px); padding:clamp(38px,7vw,100px) clamp(22px,3vw,48px) 64px;
 background:linear-gradient(270deg,#f3faff 0%,#f3faffeb 37%,#f3faff08 62%),url('/login-assets/design/mountains.png') left center/cover;
}
.card {
 width:100%; max-width:535px; margin-inline-start:0; margin-inline-end:auto;
 padding:32px clamp(22px,3vw,36px) 45px; border-radius:16px;
 background:#fff; border:1px solid #e2edfc; box-shadow:0 12px 36px #1236600c;
}
.card-brand { display:flex; justify-content:center; margin-bottom:22px; }
.card-brand img { width:59px; height:59px; }
.card-brand b { font-size:39px; }
h1 { text-align:center; margin:0; font-size:clamp(25px,3vw,35px); line-height:1.4; font-weight:900; }
.subtitle { margin:12px 0 32px; text-align:center; color:#42598e; font-size:15px; }
.field { display:block; margin-bottom:22px; font-size:13px; font-weight:800; }
.field>span:first-child { display:block; margin-bottom:6px; }
.field.phone { border:1px solid #dfebfd; border-radius:9px; padding:9px 8px 7px; }
.control { min-height:53px; display:flex; align-items:center; gap:11px; border:1px solid #d5e3f7; border-radius:8px; padding:0 14px; background:#fbfdff; }
.control svg { flex:0 0 20px; height:20px; width:20px; color:#075cff; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.control .eye { color:#112e7b; }
.control input { flex:1; min-width:0; height:46px; border:0; background:transparent; color:#324e83; font:inherit; font-weight:500; opacity:1; }
.control input::placeholder { color:#7588ad; opacity:1; }
.prefix { border-right:1px solid #dae5f7; padding-right:12px; display:flex; align-items:center; gap:9px; flex:0 0 auto; color:#294a84; }
.flag { width:23px; height:15px; border-radius:3px; background:linear-gradient(#159643 33%,white 33% 66%,#dc2636 66%); border:1px solid #dfebf8; }
.options { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:750; }
.options label { display:flex; align-items:center; gap:6px; }
.options input { margin:0; width:18px; height:18px; }
.submit { margin-top:23px; width:100%; min-height:58px; border:0; border-radius:10px; background:#066bfa; color:#fff; font:inherit; font-size:16px; font-weight:850; box-shadow:0 8px 14px #066bfa18; opacity:1; }
.submit span { display:inline-block; margin-inline-start:7px; font-size:23px; line-height:1; vertical-align:middle; }
.security { display:flex; gap:14px; align-items:center; margin-top:24px; border-radius:10px; padding:15px; background:#edf5ff; font-size:12px; }
.security svg { width:25px; height:25px; flex:none; color:#0868ff; }
.security p { margin:5px 0 0; color:#405b8c; font-size:11px; }
.story { direction:rtl; text-align:left; justify-self:end; width:min(100%,555px); color:#fff; padding-top:32px; text-shadow:0 2px 8px #032950c7; }
.story h2 { margin:0 0 10px; font-weight:900; font-size:clamp(38px,5vw,63px); }
.story h3 { margin:0 0 14px; font-size:clamp(20px,2.1vw,30px); line-height:1.6; }
.story p { margin:0 0 18px; font-size:clamp(14px,1.45vw,19px); }
.story ul { list-style:none; padding:0; margin:0; display:grid; gap:5px; justify-items:end; }
.story li { display:flex; direction:ltr; align-items:center; gap:12px; width:min(100%,350px); padding:6px; border:1px solid #4b9edd45; border-radius:13px; background:#033553dc; box-shadow:0 6px 16px #001d372d; }
.story li div { direction:rtl; text-align:left; }
.story li b,.story li small { display:block; }
.story li small { margin-top:3px; color:#e3efff; font-size:12px; }
.story-icon { display:grid; place-items:center; background:#0755a2; width:57px; height:57px; flex:none; border-radius:50%; }
.story-icon svg { width:30px; height:30px; }
.laptop { width:min(100%,525px); display:block; margin:12px auto 0 0; }
@media (max-width:760px) {
 body { padding:0; background:#fff; }
 .login-page { border-radius:0; }
 .top { height:82px; justify-content:center; }
 .top .back,.story,.card-brand { display:none; }
 .top .brand img { width:43px;height:43px; }
 .top .brand b { font-size:28px; }
 .scene {
  display:block; min-height:calc(100svh - 82px); padding:clamp(122px,33vw,180px) 10px 82px;
  background:linear-gradient(180deg,transparent 32%,#eff8ff25 64%,transparent 90%),url('/login-assets/design/mountains.png') 22% center/cover;
 }
 .back-mobile { display:flex; position:absolute; top:12px; right:12px; flex-direction:row; padding:5px 12px; background:#f4f9ffe8; border-radius:25px; font-size:11px; }
 .back-mobile span { font-size:19px; }
 .card { max-width:460px; margin:auto; padding:24px 15px 25px; border-radius:14px; }
 h1 { font-size:27px; }
 .subtitle { margin:9px 0 25px; font-size:12px; }
 .field { margin-bottom:20px; font-size:12px; }
 .field.phone { padding:0;border:0; }
 .control { min-height:47px; gap:7px; padding:0 9px; }
 .control input { height:43px; }
 .prefix { gap:6px; padding-right:8px; }
 .options { font-size:11px; }
 .submit { min-height:49px; margin-top:17px; }
 .security { margin-top:17px; padding:12px 10px; }
}