body {
    font-family:IRANSans,sans-serif;
    font-size:14px;
    direction:rtl;
    text-align:right;
    margin:0;
    color:#213c3b;
    background:radial-gradient(ellipse at 5% 8%,#d1e9ff 0,transparent 40%),radial-gradient(ellipse at 94% 90%,#cdece1 0,transparent 42%),radial-gradient(ellipse at 85% 0%,#ffe4df 0,transparent 35%),#f7faf8;
    min-height:100vh;
    min-height:100svh;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px}
a {
    text-decoration:none}
button,input {
    font:inherit}
.auth-shell {
    width:100%;
    max-width:1192px;
    min-width:0;
    min-height:min(740px, calc(100svh - 48px));
    margin:0;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    background:#fff;
    border:1px solid #e3ebe7;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 28px 90px #234d3b12}
.auth-story {
    background:radial-gradient(ellipse at 0 100%,#acd9c5 0,transparent 60%),linear-gradient(145deg,#edf8f0,#e1f2e7 55%,#d5eddf);
    padding:42px 44px 30px;
    position:relative;
    overflow:hidden}
.auth-brand {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:24px;
    font-weight:700}
.auth-brand img {
    object-fit:contain}
.auth-brand small {
    display:block;
    font-size:9px;
    letter-spacing:2px;
    margin-top:4px;
    color:#68867a}
.story-heading {
    margin-top:44px;
    position:relative;
    z-index:1}
.story-eyebrow {
    font-size:12px;
    color:#417a67}
.story-heading h2 {
    font-size:36px;
    font-weight:800;
    line-height:1.8;
    letter-spacing:-1.2px;
    margin:13px 0}
.story-heading p {
    font-size:13px;
    line-height:2.2;
    color:#617e70;
    max-width:350px}
.counter-art {
    height:290px;
    position:relative;
    margin:10px -10px}
.art-orbit {
    width:265px;
    height:265px;
    border:1px solid #badacb;
    border-radius:50%;
    position:absolute;
    right:80px;
    top:10px;
    box-shadow:0 0 0 27px #ffffff35,0 0 0 55px #ffffff25}
.art-terminal {
    position:absolute;
    width:258px;
    right:95px;
    top:45px;
    background:#fff;
    border:7px solid #254d44;
    border-radius:18px;
    transform:rotate(-7deg);
    box-shadow:12px 20px 35px #204f4220;
    padding:10px}
.terminal-top {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    border-bottom:1px solid #edf1ee;
    padding-bottom:9px}
.terminal-top img {
    width:23px;
    height:23px}
.terminal-top b {
    margin-right:auto;
    color:#9cb2a6}
.terminal-screen {
    padding:12px 4px 0}
.screen-menu {
    display:flex;
    gap:9px}
.screen-menu span {
    background:#e7f3ed;
    flex:1;
    text-align:center;
    padding:13px 0;
    border-radius:9px;
    color:#009b87;
    font-size:24px}
.screen-menu span:nth-child(2) {
    background:#fff0e8;
    color:#d8835f}
.screen-menu span:nth-child(3) {
    background:#eaf2ff;
    color:#2785d2}
.screen-lines {
    display:grid;
    gap:7px;
    margin:14px 0}
.screen-lines i {
    height:5px;
    background:#edf1ee;
    border-radius:5px;
    width:85%}
.screen-lines i:nth-child(2) {
    width:65%}
.screen-total {
    background:#009b87;
    color:white;
    padding:10px;
    border-radius:7px;
    font-size:10px;
    display:flex;
    justify-content:space-between}
.terminal-stand {
    position:absolute;
    width:70px;
    height:36px;
    background:#254d44;
    top:100%;
    right:90px;
    transform:perspective(70px) rotateX(20deg);
    border-radius:0 0 8px 8px}
.art-ticket,.art-note {
    position:absolute;
    z-index:2;
    background:#fff;
    border:1px solid #e6efe9;
    border-radius:13px;
    box-shadow:0 12px 30px #204f4210;
    display:flex;
    align-items:center;
    gap:10px}
.art-ticket {
    top:28px;
    right:2px;
    padding:13px;
    transform:rotate(5deg);
    font-size:11px}
.art-ticket i {
    color:#009b87;
    font-size:25px}
.art-ticket small {
    display:block;
    font-size:8px;
    color:#7c9186;
    margin-top:5px}
.art-note {
    bottom:6px;
    left:6px;
    padding:14px;
    font-size:11px;
    line-height:1.9;
    transform:rotate(5deg)}
.art-note i {
    font-size:26px;
    color:#ef846c}
.story-features {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #ccdfd3;
    padding-top:21px;
    color:#567565;
    font-size:10px}
.story-features i {
    font-size:16px;
    margin-left:5px}
.auth-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:55px 58px 25px}
.auth-form-wrap {
    width:100%;
    max-width:370px;
    margin:auto}
.login-intro img {
    display:none}
.form-eyebrow {
    font-size:11px;
    color:#009b87;
    font-weight:600}
.login-intro h1 {
    font-size:24px;
    line-height:1.8;
    font-weight:700;
    margin:12px 0 9px;
    letter-spacing:-.6px}
.login-intro p {
    color:#7a8984;
    font-size:12px;
    line-height:2;
    margin:0 0 30px}
.switch-logintype {
    background:#f2f5f3;
    border:1px solid #e9eeeb;
    border-radius:12px;
    padding:5px;
    margin-bottom:28px}
.switch-logintype a {
    display:block;
    padding:11px 4px;
    text-align:center;
    font-size:11px;
    color:#75847e;
    border-radius:8px;
    text-decoration:none}
.switch-logintype a.active {
    background:#fff;
    color:#007d6d;
    box-shadow:0 2px 7px #234c3b12;
    font-weight:600}
.form-input {
    position:relative;
    margin-bottom:19px!important}
.form-input label {
    display:block;
    font-size:12px;
    font-weight:500;
    margin-bottom:9px;
    color:#405c50}
.form-control {
    height:52px;
    border:1px solid #dce6df;
    background:#fbfcfb;
    border-radius:10px;
    font-size:13px;
    padding:12px 15px;
    color:#253e34}
.form-control::placeholder {
    color:#a1afa7;
    font-size:11px}
.form-control:focus {
    border-color:#009b87;
    box-shadow:0 0 0 3px #009b8715;
    background:#fff}
.password-field {
    position:relative}
.password-field input {
    padding-left:48px}
.password-toggle {
    position:absolute;
    left:8px;
    top:7px;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#7d9186;
    border-radius:7px}
.phone-input {
    direction:ltr;
    text-align:right}
.login-btn,.btn-success {
    height:52px;
    background:#009b87;
    color:#fff;
    border:1px solid #009b87;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    margin-top:8px;
    box-shadow:0 6px 15px #009b871c}
.login-btn:hover,.btn-success:hover {
    background:#007e6e;
    border-color:#007e6e;
    color:#fff}
.btn:focus,a:focus-visible,button:focus-visible {
    outline:3px solid #64b9a8;
    outline-offset:3px}
.separator-box {
    display:flex;
    align-items:center;
    gap:12px;
    color:#8c9b93;
    font-size:10px}
.separator-box:before,.separator-box:after {
    content:'';
    flex:1;
    height:1px;
    background:#e8eeea}
.auth-footer {
    text-align:center;
    font-size:10px;
    color:#93a198;
    padding-top:36px}
.auth-footer i {
    color:#009b87;
    margin-left:5px}
.DisableItems {
    pointer-events:none;
    opacity:.6;
    position:relative}
.DisableItems:after {
    content:'';
    position:absolute;
    inset:45% calc(50% - 12px) auto auto;
    width:24px;
    height:24px;
    border:3px solid #d4e5dc;
    border-top-color:#009b87;
    border-radius:50%;
    animation:auth-spin .7s linear infinite}
.code-container {
    display:flex;
    direction:ltr;
    justify-content:center;
    gap:12px}
.code-container input {
    width:54px;
    height:58px;
    border:1px solid #dce6df;
    border-radius:10px;
    text-align:center;
    background:#fbfcfb;
    font-size:23px}
.code-container input:focus {
    outline:2px solid #009b87}
.step-two>svg {
    display:block;
    margin:0 auto;
    width:75px;
    height:75px}
.step-two p {
    font-size:12px;
    line-height:2;
    text-align:center}
.resendcode {
    font-size:11px}
.resendcode a {
    color:#007e6e}
.resend {
    display:none}
.lottie-loading {
    display:none}
.help-block {
    color:#c04444;
    font-size:11px;
    margin-top:7px;
    display:block}
.has-error .form-control {
    border-color:#d86b6b}
@keyframes auth-spin {
    to {
    transform:rotate(360deg)}
}
@media(max-width:1100px) {
    .auth-shell {
    margin:0;
    min-height:min(700px, calc(100svh - 48px))}
.auth-story {
    padding:35px 28px}
.auth-content {
    padding:40px 32px 25px}
.story-heading h2 {
    font-size:30px}
.art-terminal {
    right:70px}
.art-orbit {
    right:45px}
.art-ticket {
    right:-4px}
}
@media(max-width:800px) {
    .auth-shell {
    grid-template-columns:1fr;
    max-width:500px;
    margin:0;
    min-height:0}
.auth-story {
    display:none}
.auth-content {
    padding:32px}
.login-intro img {
    display:block;
    margin-bottom:25px}
.auth-form-wrap {
    max-width:370px}
.auth-footer {
    padding-top:34px}
}
@media(max-width:540px) {
    body {
    background:#fff;
    padding:0}
.auth-shell {
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    min-height:100vh;
    min-height:100svh}
.auth-content {
    padding:32px 24px;
    min-height:100vh;
    min-height:100svh}
.login-intro h1 {
    font-size:23px}
.auth-form-wrap {
    margin:auto}
.auth-footer {
    padding-top:28px}
}
@media(prefers-reduced-motion:reduce) {
    .DisableItems:after {
    animation:none}
}

/* Brand motifs stay behind the content and never intercept input. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(#447e6a20 1px, transparent 1px);
    background-size: 25px 25px;
    mask-image: linear-gradient(130deg, #000, transparent 60%);
}
.auth-shell {
    position: relative;
}
.auth-story::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    top: -150px;
    left: -140px;
    border: 58px solid #ffffff45;
    border-radius: 90px;
    transform: rotate(35deg);
    pointer-events: none;
}
.auth-brand, .story-features {
    position: relative;
}
.auth-content {
    background: radial-gradient(ellipse at 0 0, #f2faf655, transparent 65%), #fff;
}
@media (max-width: 800px) {
    .auth-content {
        background: radial-gradient(ellipse at 100% 0, #dcf1e6, transparent 40%), radial-gradient(ellipse at 0 100%, #eaf2ff, transparent 35%), #fff;
    }
}

/* Fit laptop screens by reducing decoration spacing, keeping forms accessible. */
@media (min-width: 801px) and (max-height: 850px) {
    .auth-story { padding: 26px 32px; }
    .story-heading { margin-top: 20px; }
    .story-heading h2 { font-size: 28px; line-height: 1.6; margin: 10px 0; }
    .story-heading p { line-height: 1.9; margin-bottom: 0; }
    .counter-art { height: 230px; }
    .story-features { padding-top: 16px; }
    .auth-content { padding-top: 28px; padding-bottom: 24px; }
}
@media (min-width: 801px) and (max-height: 720px) {
    body { padding: 16px; }
    .auth-shell { min-height: calc(100svh - 32px); }
    .auth-story { padding: 20px 28px; }
    .story-heading { margin-top: 12px; }
    .story-heading h2 { font-size: 24px; }
    .counter-art { height: 190px; }
    .art-terminal { top: 10px; transform: scale(.82) rotate(-7deg); transform-origin: top center; }
    .art-orbit { width: 190px; height: 190px; }
    .art-ticket { top: 4px; }
    .auth-footer { padding-top: 16px; }
}
/* Gentle motion is isolated to the decorative right panel. */
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
    .auth-story .auth-brand {
        animation: story-enter 650ms ease-out both;
    }
    .auth-story .story-heading {
        animation: story-enter 750ms 100ms ease-out both;
    }
    .auth-story .story-features {
        animation: story-enter 750ms 250ms ease-out both;
    }
    .auth-story .art-ticket {
        animation: story-float 6s ease-in-out infinite;
    }
    .auth-story .art-note {
        animation: story-float 7s -3s ease-in-out infinite;
    }
    .auth-story .art-orbit {
        animation: story-glow 8s ease-in-out infinite;
    }
}
@keyframes story-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes story-float {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-7px) rotate(3deg); }
}
@keyframes story-glow {
    0%, 100% { opacity: .65; }
    50% { opacity: 1; }
}

/* Branch selection uses the full panel instead of the narrow login column. */
.auth-shell.auth-shell-branches { grid-template-columns: minmax(0, 1fr); max-width: 960px; min-height: 0; }
.auth-shell-branches .auth-story { display: none; }
.auth-shell-branches .auth-content { min-width: 0; padding: 40px 44px 24px; }
.auth-shell-branches .auth-form-wrap { max-width: none; }
.branch-heading { margin-bottom: 30px; }
.branch-heading img { display: block; margin-bottom: 20px; }
.branch-heading h1 { font-size: 25px; font-weight: 700; line-height: 1.8; margin: 10px 0; }
.branch-heading p { color: #71867a; font-size: 13px; line-height: 2; margin: 0; }
.branch-validation.validation-summary-valid { display: none; }
.branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.branch-grid form { min-width: 0; }
.branch-card { width: 100%; height: 100%; display: flex; gap: 14px; align-items: flex-start; padding: 22px 18px; text-align: right; color: #213c3b; border: 1px solid #dce8e0; background: #fbfdfb; border-radius: 16px; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.branch-card:hover { background: #eef8f2; border-color: #009b87; box-shadow: 0 5px 18px #009b8710; }
.branch-card:focus-visible { outline: 3px solid #64b9a8; outline-offset: 3px; }
.branch-icon { width: 42px; height: 42px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; color: #009b87; background: #e4f3eb; border-radius: 12px; font-size: 23px; }
.branch-details { min-width: 0; display: grid; gap: 9px; overflow-wrap: anywhere; }
.branch-details strong { font-size: 14px; line-height: 1.9; }
.branch-details small { color: #7b8f83; font-size: 11px; }
.branch-action { font-size: 11px; color: #008574; margin-top: 8px; }
.branch-action i { margin-right: 7px; }
@media (max-width: 1000px) { .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
    .auth-shell-branches .auth-content { padding: 28px 22px; }
    .branch-heading h1 { font-size: 22px; }
    .branch-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .branch-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .branch-card { transition: none; } }