:root{--teal:#3fa7a3;--teal-dark:#2d7f7c;--gold:#c9a34e;--cream:#fbf7f0;--ink:#343331;--muted:#736d66;--line:#eadac5;--error:#aa4943;--success:#277d68}
*{box-sizing:border-box}[hidden]{display:none!important}html{direction:rtl;min-height:100%;background:var(--cream)}
input::placeholder,textarea::placeholder{color:currentColor;opacity:.42;font-weight:400}
body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 9% 18%,rgba(63,167,163,.14),transparent 28%),radial-gradient(circle at 88% 80%,rgba(201,163,78,.13),transparent 31%),var(--cream);font-family:var(--font-primary,"Vazirmatn",Tahoma,sans-serif)}
button,input,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}
.login-header{position:sticky;z-index:10;top:0;min-height:88px;padding:12px clamp(20px,5vw,76px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;background:linear-gradient(100deg,var(--teal-dark),var(--teal));box-shadow:0 12px 35px rgba(32,101,98,.2)}
.login-brand{display:grid;justify-items:center;line-height:1}.login-brand span{color:var(--gold);font-size:1.125rem}.login-brand strong{margin-top:5px;font-size:1.875rem;font-weight:800}
.login-back{justify-self:start;padding:8px 16px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:0.8125rem}.login-back:hover{background:rgba(255,255,255,.12)}.login-header-note{justify-self:end;font-size:0.8125rem;opacity:.9}
.login-layout{width:min(1120px,calc(100% - 40px));min-height:calc(100vh - 162px);margin:0 auto;padding:54px 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:34px;align-items:center}
.login-intro{position:relative;padding:clamp(30px,5vw,68px);overflow:hidden;border:1px solid rgba(201,163,78,.3);border-radius:28px;background:linear-gradient(145deg,rgba(239,227,213,.86),rgba(255,253,249,.96));box-shadow:0 22px 65px rgba(88,68,48,.1)}
.login-intro:after{content:"✥";position:absolute;left:7%;bottom:-62px;color:rgba(201,163,78,.12);font-size:13.75rem;line-height:1}.login-intro>*{position:relative;z-index:1}.login-intro-mark{color:var(--gold);font-size:1.75rem}.login-intro>p{margin:8px 0 0;color:var(--gold);font-weight:800}.login-intro h1{margin:8px 0 22px;color:var(--teal-dark);font-size:clamp(1.8125rem,4vw,2.875rem);line-height:1.55}.login-intro ul{margin:0 0 28px;padding:0;list-style:none}.login-intro li{position:relative;margin:12px 0;padding-right:28px;color:#554f49}.login-intro li:before{content:"✓";position:absolute;right:0;color:var(--teal);font-weight:900}.login-intro a{color:var(--teal-dark);font-weight:800}
.login-card{padding:clamp(24px,4vw,42px);border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.95);box-shadow:0 24px 70px rgba(52,51,49,.12)}.login-card-heading{text-align:center}.login-card-heading>span{color:var(--gold);font-size:1.375rem}.login-card-heading h2{margin:2px 0;color:var(--teal-dark);font-size:1.8125rem}.login-card-heading p{margin:0 0 22px;color:var(--muted);font-size:0.8125rem}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:14px;background:#f0e7dc}.login-tabs button{min-height:48px;border:0;border-radius:11px;color:#655f59;background:transparent;font-weight:800}.login-tabs button.active{color:var(--teal-dark);background:#fff;box-shadow:0 7px 20px rgba(75,62,49,.09)}
.login-message{position:relative;margin:18px 0 0;padding:13px 44px 13px 15px;border:1px solid #efb7b2;border-radius:12px;color:#8d3f39;background:#fff0ee;font-size:0.8125rem;font-weight:700;line-height:1.8}.login-message:before{content:"!";position:absolute;top:12px;right:14px;display:grid;width:21px;height:21px;place-items:center;border-radius:50%;color:#fff;background:var(--error);font-weight:900}.login-message.success{border-color:#a8dacb;color:#246a58;background:#ebf8f3}.login-message.success:before{content:"✓";background:var(--success)}.login-message.info{border-color:#addbd8;color:var(--teal-dark);background:#ecf8f7}.login-message.info:before{content:"i";background:var(--teal)}
.login-form{margin-top:20px;display:grid;gap:16px}.login-form label{display:grid;gap:7px;color:#514c47;font-size:0.8125rem;font-weight:800}.login-form label small{color:var(--muted);font-weight:500}.login-form input{width:100%;height:54px;padding:0 15px;border:1px solid #ddcdb8;border-radius:11px;outline:0;color:var(--ink);background:#fffdfa;text-align:right}.login-form input[dir="ltr"]{direction:ltr;text-align:left}.login-form input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(63,167,163,.12)}.login-form-note{margin:-3px 0;padding:10px 12px;border-radius:9px;color:#786339;background:#fbf4e4;font-size:0.75rem}
.login-form input[name="email"]:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #fffdfa inset;caret-color:var(--ink)}.login-form input[name="email"]:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fffdfa inset,0 0 0 4px rgba(63,167,163,.12)}.login-form input[name="email"]:autofill{color:var(--ink);box-shadow:0 0 0 1000px #fffdfa inset}.login-form input[name="email"]:autofill:focus{border-color:var(--teal);box-shadow:0 0 0 1000px #fffdfa inset,0 0 0 4px rgba(63,167,163,.12)}
.login-submit{min-height:54px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--teal),#20a5a3);box-shadow:0 10px 24px rgba(32,154,152,.22);font-weight:900}.login-submit:hover{filter:brightness(.97);transform:translateY(-1px)}.login-submit:disabled{cursor:wait;opacity:.68}
.login-secondary-action{min-height:38px;margin-top:-7px;border:0;color:var(--teal-dark);background:transparent;font-size:.8125rem;font-weight:800}.login-secondary-action:hover,.login-secondary-action:focus-visible{border-radius:9px;background:rgba(63,167,163,.08)}
.password-field{position:relative;display:block}.password-field input{padding-left:50px}.password-toggle{position:absolute;top:50%;left:10px;width:34px;height:34px;padding:0;transform:translateY(-50%);border:0;border-radius:50%;color:var(--teal-dark);background:transparent}.password-toggle:hover{background:#e8f5f4}
.login-verification{margin-top:20px}.login-verification>div:first-child{text-align:center}.login-verification h3{margin:4px 0;color:var(--teal-dark)}.login-verification p{margin:0;color:var(--muted);font-size:0.8125rem}.verification-actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.verification-actions button{border:0;color:var(--teal-dark);background:transparent;font-size:0.75rem;font-weight:800}.verification-actions button:disabled{color:#aaa29a;cursor:not-allowed}
.verification-mobile{display:inline-block;direction:ltr;unicode-bidi:isolate}
.login-footer{min-height:74px;padding:18px clamp(20px,5vw,76px);display:flex;justify-content:space-between;align-items:center;color:#716a63;font-size:0.75rem}.login-footer a{color:var(--teal-dark);font-weight:800}
@media(max-width:840px){.login-header{min-height:72px;padding:9px 16px}.login-header-note{display:none}.login-brand strong{font-size:1.5625rem}.login-back{padding:7px 11px;font-size:0.6875rem}.login-layout{width:min(620px,calc(100% - 24px));min-height:auto;padding:24px 0 38px;grid-template-columns:1fr}.login-intro{display:none}.login-card{padding:22px 16px 26px;border-radius:20px}.login-card-heading h2{font-size:1.5rem}.login-footer{padding:18px 16px 28px}}
@media(max-width:420px){.login-header{grid-template-columns:1fr auto}.login-brand{justify-self:end}.login-back{grid-column:1;grid-row:1}.login-layout{width:calc(100% - 16px)}.login-card{border-radius:17px}.verification-actions{flex-direction:column;align-items:stretch}.verification-actions button{min-height:38px}.login-footer{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* PHASE 22-21-4-45: LOGIN AND OTP TYPOGRAPHY */
.login-page-body {
  font-size: 1rem;
}

.login-page-body .login-brand span {
  font-size: 1.125rem;
}

.login-page-body .login-brand strong {
  font-size: clamp(1.625rem, 2.6vw, 1.875rem);
}

.login-page-body .login-back,
.login-page-body .login-header-note {
  font-size: 0.875rem;
}

.login-page-body .login-intro::after {
  font-size: 13.75rem;
}

.login-page-body .login-intro-mark {
  font-size: 1.75rem;
}

.login-page-body .login-intro > p,
.login-page-body .login-intro li,
.login-page-body .login-intro a {
  font-size: 1rem;
}

.login-page-body .login-intro h1 {
  font-size: clamp(1.875rem, 4vw, 2.875rem);
}

.login-page-body .login-card-heading > span {
  font-size: 1.375rem;
}

.login-page-body .login-card-heading h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.8125rem);
}

.login-page-body .login-card-heading p,
.login-page-body .login-message,
.login-page-body .login-form label,
.login-page-body .login-verification p {
  font-size: 0.875rem;
}

.login-page-body .login-tabs button,
.login-page-body .login-form input,
.login-page-body .login-submit {
  font-size: 1rem;
}

.login-page-body .login-form label small,
.login-page-body .login-form-note,
.login-page-body .verification-actions button,
.login-page-body .login-footer {
  font-size: 0.8125rem;
}

.login-page-body .login-verification h3 {
  font-size: 1.25rem;
}

.login-page-body .password-toggle {
  font-size: 1.125rem;
}

@media (max-width: 840px) {
  .login-page-body .login-brand strong {
    font-size: clamp(1.5rem, 7vw, 1.6875rem);
  }

  .login-page-body .login-back {
    font-size: 0.75rem;
  }

  .login-page-body .login-card-heading h2 {
    font-size: clamp(1.5rem, 6vw, 1.6875rem);
  }
}

@media (max-width: 420px) {
  .login-page-body .login-form label,
  .login-page-body .login-card-heading p,
  .login-page-body .login-message {
    font-size: 0.8125rem;
  }
}