
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vazirmatn-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vazirmatn-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vazirmatn-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vazirmatn-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vazirmatn-4.ttf) format('truetype');
}


:root{color-scheme:dark;--bg:#0b141b;--text:#eff7f5;--muted:#9aafbb;--green:#a9f2cc}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Vazirmatn',Tahoma,sans-serif}body{background:radial-gradient(ellipse at 20% 10%,#204b444a,transparent 52%),radial-gradient(ellipse at 90% 100%,#1d355f3d,transparent 55%),var(--bg);color:var(--text)}main{min-height:100dvh;display:grid;place-items:center;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));overflow:hidden}.login-card{position:relative;isolation:isolate;width:min(100%,400px);padding:40px 30px 32px;border:1px solid #a9f2cc1c;border-radius:30px;background:linear-gradient(145deg,#1c303bd9,#101d29e8);box-shadow:0 32px 100px #0005;animation:login-enter .9s cubic-bezier(.22,1,.36,1) both}.login-card:before{content:'';position:absolute;z-index:-1;inset:-80px;background:radial-gradient(ellipse,#a9f2cc0b,transparent 65%);animation:breathe 6s ease-in-out infinite;pointer-events:none}.login-mark{width:64px;height:64px;display:grid;place-items:center;background:#a9f2cc10;color:var(--green);border-radius:23px;margin:0 auto 36px;animation:mark-enter 1s cubic-bezier(.22,1,.36,1) both}.login-mark svg{width:31px;height:31px}form{display:grid;gap:22px}.field{display:grid;gap:10px;animation:login-enter .8s .1s both}.field:nth-child(2){animation-delay:.18s}label{font-size:15px;color:#c5d5dc}input{font:16px 'Vazirmatn',Tahoma,sans-serif;direction:ltr;width:100%;height:54px;border:1px solid #ffffff18;border-radius:15px;background:#0c1820b3;color:var(--text);padding:12px 16px;outline:none;transition:border-color .25s,box-shadow .25s}input:focus{border-color:#a9f2cc8c;box-shadow:0 0 0 4px #a9f2cc09}button{position:relative;font:500 15px 'Vazirmatn',Tahoma,sans-serif;border:0;width:100%;min-height:54px;border-radius:15px;background:var(--green);color:#12382b;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 35px #a9f2cc13;animation:login-enter .8s .25s both}button:active{transform:scale(.98)}button:hover{box-shadow:0 8px 35px #a9f2cc28}button:focus-visible{outline:2px solid var(--green);outline-offset:5px}button.loading{color:transparent;cursor:wait}button.loading:after{content:'';position:absolute;width:19px;height:19px;left:calc(50% - 10px);top:calc(50% - 10px);border:2px solid #14382e33;border-top-color:#14382e;border-radius:50%;animation:spin .65s linear infinite}.error{color:#ffb3b3;font-size:13px;line-height:1.9;text-align:center;margin:0}.error:empty{display:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes login-enter{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes mark-enter{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes breathe{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}@media(max-width:400px){.login-card{padding:34px 24px 28px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
