:root {
    --primary: #2f73df;
    --primary-2: #1f5fc6;
    --primary-soft: #edf5ff;
    --ink: #183047;
    --muted: #75869a;
    --line: #e3edf7;
    --surface: #ffffff;
    --bg: #f4f8fc;
    --success: #11a36a;
    --danger: #e64d5d;
    --warning: #e59b22;
    --shadow: 0 28px 75px rgba(25, 61, 98, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    direction: rtl;
    color: var(--ink);
    background: var(--bg);
    font-family: 'Vazirmatn Fd', Tahoma, sans-serif;
    overflow-x: hidden;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; pointer-events: none; filter: blur(2px); opacity: .65; z-index: -1; }
.ambient-a { width: 460px; height: 460px; border-radius: 50%; right: -170px; top: 80px; background: radial-gradient(circle, rgba(55, 135, 238, .17), transparent 68%); }
.ambient-b { width: 520px; height: 520px; border-radius: 50%; left: -230px; bottom: -130px; background: radial-gradient(circle, rgba(29, 183, 145, .11), transparent 70%); }


.page-shell { width: min(1220px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding: 22px 0; display:flex; align-items:center; }
.login-card { width:100%; min-height: 80vh; background: var(--surface); border: 1px solid rgba(221,232,243,.9); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1.04fr; position: relative; }

.form-side { padding: 54px 58px; display: flex; flex-direction: column; justify-content: center; position: relative; min-width: 0; }
.back-home-btn { position:absolute; top:22px; right:22px; z-index:3; display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 16px; border-radius:16px; text-decoration:none; color:#47627c; background:rgba(255,255,255,.88); border:1px solid #e3edf7; box-shadow:0 14px 34px rgba(23,52,84,.10); backdrop-filter:blur(10px); transition:transform .22s, box-shadow .22s, color .22s; font-size:12px; font-weight:800; }
.back-home-btn i { width:28px; height:28px; border-radius:10px; display:grid; place-items:center; color:var(--primary); background:#eff5ff; }
.back-home-btn:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(23,52,84,.14); color:var(--primary); }
.stepper { display: flex; align-items: center; justify-content: center; margin-bottom: 38px; }
.stepper > i { width: 88px; height: 2px; background: #e8eff6; position: relative; overflow: hidden; }
.stepper > i::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--success), var(--primary)); transform: scaleX(0); transform-origin: right; transition: transform .45s ease; }
.stepper > i.active::after { transform: scaleX(1); }
.step { display: flex; align-items: center; gap: 8px; color: #9aa8b8; font-size: 11px; font-weight: 700; transition: .3s; }
.step span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #dae5ef; background: #fff; transition: .3s; }
.step.active { color: var(--primary); }
.step.active span { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 7px 16px rgba(47,115,223,.25); }
.step.done { color: var(--success); }
.step.done span { border-color: var(--success); background: var(--success); color:#fff; }

.panel-view { display: none; animation: panelIn .45s cubic-bezier(.22,.8,.22,1); }
.panel-view.active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.form-heading { text-align: center; margin-bottom: 32px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); background: var(--primary-soft); border: 1px solid #dcecff; border-radius: 999px; padding: 7px 12px; font-size: 11px; font-weight: 800; margin-bottom: 16px; }
.form-heading h1 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.45; letter-spacing: -.7px; margin-bottom: 10px; }
.form-heading p { color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 430px; margin: auto; }

.field-label { display:none; }
.smart-input { height:64px; border:1.5px solid var(--line); border-radius:22px; background:linear-gradient(180deg,#ffffff,#f8fbff); display:flex; align-items:center; position:relative; transition:border-color .28s, box-shadow .28s, transform .28s, background .28s; overflow:hidden; }
.smart-input::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, rgba(47,115,223,.055), transparent 35%, rgba(17,163,106,.035)); pointer-events:none; opacity:.8; }
.smart-input::after { content:""; position:absolute; right:22px; left:22px; bottom:-1px; height:2px; border-radius:999px; background:linear-gradient(90deg, transparent, var(--primary), #58b5ef, transparent); transform:scaleX(0); transform-origin:center; opacity:0; transition:transform .32s ease, opacity .32s ease; }
.smart-input:focus-within { border-color:#9fc4f4; background:#fff; box-shadow:0 0 0 4px rgba(47,115,223,.075), 0 16px 34px rgba(47,115,223,.09); transform:translateY(-1px); }
.smart-input:focus-within::after { transform:scaleX(1); opacity:1; }
.smart-input.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(230,77,93,.08); }
.mobile-box-input { padding:0 100px 0 174px; cursor:text; min-height:64px; height:64px; border-radius:22px; }
.mobile-inline-control { border-color:#d9e6f5; background:linear-gradient(180deg,#fff,#f8fbff); box-shadow:0 13px 30px rgba(35,79,132,.08); }
.mobile-inline-control::before { background:linear-gradient(120deg, rgba(47,115,223,.06), transparent 38%, rgba(17,163,106,.035)); }
.mobile-inline-control:focus-within { border-color:#8eb9f0; box-shadow:0 0 0 5px rgba(47,115,223,.075), 0 18px 38px rgba(47,115,223,.11); transform:translateY(-1px); }
.inline-submit-btn { position:absolute; left:7px; top:7px; bottom:7px; width:132px; border:0; border-radius:16px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:12px; font-weight:900; background:linear-gradient(135deg,#4f86e8 0%,#3474dc 52%,#2461c6 100%); box-shadow:0 9px 20px rgba(47,115,223,.24), inset 0 1px 0 rgba(255,255,255,.22); z-index:5; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, opacity .22s ease; }
.inline-submit-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 34%,transparent 64%,rgba(255,255,255,.08)); transform:translateX(18%); transition:transform .35s ease; pointer-events:none; }
.inline-submit-btn span,.inline-submit-btn i { position:relative; z-index:1; }
.inline-submit-btn i { width:28px; height:28px; border-radius:10px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:11px; }
.inline-submit-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 12px 25px rgba(47,115,223,.30), inset 0 1px 0 rgba(255,255,255,.24); filter:saturate(1.05); }
.inline-submit-btn:hover:not(:disabled)::before { transform:translateX(-8%); }
.inline-submit-btn:active:not(:disabled) { transform:translateY(0) scale(.99); }
.inline-submit-btn:disabled { opacity:.72; cursor:not-allowed; }
.inline-submit-btn.loading i { background:rgba(255,255,255,.12); }

.mobile-input-icon { position:absolute; right:13px; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:var(--primary); background:linear-gradient(145deg, #eef6ff, #e5f0ff); border:1px solid #dceaff; box-shadow:0 8px 18px rgba(47,115,223,.10); z-index:2; transition:transform .25s, box-shadow .25s, background .25s; }
.smart-input:focus-within .mobile-input-icon { transform:translateY(-50%) scale(1.04); background:linear-gradient(145deg, #e5f1ff, #f2f8ff); box-shadow:0 10px 22px rgba(47,115,223,.16); }
.mobile-input-icon i { font-size:18px; }
.mobile-box-input input { width:100%; height:100%; border:0; outline:0; background:transparent; direction:ltr; text-align:left; font-family:inherit; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:.7px; padding:16px 0 3px; position:relative; z-index:2; }
.mobile-box-input input::placeholder { color:#b9c6d4; font-size:13px; font-weight:500; letter-spacing:0; opacity:0; transform:translateX(4px); transition:opacity .22s, transform .22s; }
.mobile-box-input:focus-within input::placeholder { opacity:1; transform:translateX(0); }
.floating-label { position:absolute; right:66px; top:21px; color:#8194a8; font-size:13px; font-weight:700; padding:0 3px; transition:top .24s ease, font-size .24s ease, color .24s ease, transform .24s ease; pointer-events:none; z-index:3; }
.mobile-box-input:focus-within .floating-label,
.mobile-box-input.has-value .floating-label { top:7px; font-size:10px; color:var(--primary); transform:translateY(0); }
.input-status { position:absolute; right:62px; top:50%; transform:translateY(-50%) scale(.72); width:26px; height:26px; border-radius:10px; display:grid; place-items:center; color:transparent; background:transparent; font-size:11px; transition:.22s; z-index:4; }
.input-status.valid { color:#fff; background:var(--success); transform:translateY(-50%) scale(1); box-shadow:0 7px 16px rgba(17,163,106,.20); }
.field-hint { display:flex; align-items:center; gap:7px; color:#8a9bad; font-size:11px; margin: 11px 6px 20px; }
.field-hint i { color:#9bb6d1; }

.primary-btn { width:100%; height: 58px; border:0; border-radius:16px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; background: linear-gradient(135deg, #347ce7, #2464cb); box-shadow: 0 12px 24px rgba(47,115,223,.23); transition: transform .22s, box-shadow .22s, opacity .22s; font-weight:800; font-size:13px; }
.primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(47,115,223,.29); }
.primary-btn:active:not(:disabled) { transform: translateY(0); }
.primary-btn:disabled { opacity:.65; cursor:not-allowed; }
.primary-btn.success { background: linear-gradient(135deg, #18ad76, #0f9363); box-shadow: 0 12px 24px rgba(17,163,106,.22); }
.primary-btn.success:hover:not(:disabled) { box-shadow: 0 16px 30px rgba(17,163,106,.28); }
.role-preview { border-top:1px dashed #e1eaf3; margin-top:27px; padding-top:20px; text-align:center; }
.role-preview > span { color:#9aa9b9; font-size:10px; }
.preview-items { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.preview-items span { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:#f7faff; border:1px solid #eaf0f6; color:#6c8298; font-size:10px; }
.preview-items i { color:#5d8fd2; }

.tiny-back { border:0; background:transparent; color:#71869b; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-size:11px; margin-bottom:18px; padding:6px 2px; }
.tiny-back:hover { color:var(--primary); }
.otp-hero { text-align:center; }
.otp-shield { width:82px; height:82px; border-radius:26px; margin:0 auto 15px; display:grid; place-items:center; background: linear-gradient(145deg, #ecfff7, #dff8ee); color: var(--success); font-size:31px; position:relative; box-shadow: inset 0 0 0 1px rgba(17,163,106,.10); }
.otp-shield span { position:absolute; width:100%; height:100%; border-radius:inherit; border:1px solid rgba(17,163,106,.25); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform:scale(.85); opacity:.7; } 80%,100% { transform:scale(1.35); opacity:0; } }
.selected-role { display:inline-flex; align-items:center; gap:7px; background:#f4f8fc; color:#5d7791; padding:7px 11px; border-radius:999px; font-size:10px; font-weight:800; margin-bottom:13px; }
.otp-hero h2 { font-size:24px; margin-bottom:8px; }
.otp-hero p { color:var(--muted); font-size:12px; line-height:1.8; }
.otp-hero strong { direction:ltr; display:inline-block; color:var(--primary); background:#eff6ff; border-radius:8px; padding:2px 7px; font-size:13px; }
.otp-boxes { display:flex; gap:8px; justify-content:center; margin:28px 0 17px; }
.otp-digit { width:50px; height:60px; border-radius:14px; border:1.5px solid #dce7f1; background:#fbfdff; outline:0; text-align:center; font-size:23px; font-weight:900; color:var(--ink); transition:.22s; }
.otp-digit:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(47,115,223,.08); transform:translateY(-2px); }
.otp-digit.filled { border-color:#94d6bb; background:#f0fbf6; color:var(--success); }
.otp-digit.error { border-color:#f0a3ab; background:#fff5f6; animation: shake .25s 2; }
@keyframes shake { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
.otp-autofill { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.otp-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:10px; font-size:10px; color:#8799ab; }
.otp-meta b { color:var(--primary); font-size:12px; }
.otp-meta #countdownText.expired, .otp-meta #countdownText.expired b { color:var(--danger); }
.otp-meta button { border:0; background:transparent; color:var(--primary); cursor:pointer; font-size:10px; font-weight:800; }
.otp-meta button:disabled { color:#aebbc8; cursor:not-allowed; }


.visual-side { position:relative; overflow:hidden; color:#fff; background: linear-gradient(145deg, #2768d5 0%, #235cbe 52%, #174d9f 100%); min-width:0; isolation:isolate; }
.visual-side::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%; background:rgba(255,255,255,.055); right:-210px; top:-150px; }
.visual-side::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; border:1px solid rgba(255,255,255,.08); left:-170px; bottom:-120px; }
.visual-grid { position:absolute; inset:0; opacity:1; }
.visual-grid::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:34px 34px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 86%); }
.grid-glow { position:absolute; border-radius:50%; filter:blur(0); opacity:.55; }
.glow-a { width:280px; height:280px; right:-60px; top:64px; background: radial-gradient(circle, rgba(116,248,213,.28), transparent 70%); animation: glowDrift 7s ease-in-out infinite; }
.glow-b { width:250px; height:250px; left:-90px; bottom:40px; background: radial-gradient(circle, rgba(159,219,255,.18), transparent 72%); animation: glowDrift 9s ease-in-out infinite reverse; }
.grid-line { position:absolute; background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); height:1px; width:280px; opacity:.65; }
.line-a { top:148px; right:54px; transform:rotate(-12deg); animation: lineFloat 8s ease-in-out infinite; }
.line-b { bottom:132px; left:30px; transform:rotate(11deg); animation: lineFloat 9s ease-in-out infinite reverse; }
@keyframes glowDrift { 50% { transform: translateY(-14px) translateX(10px); } }
@keyframes lineFloat { 50% { transform: translateY(-7px) rotate(-10deg); } }
.visual-content { position:relative; z-index:2; height:100%; padding:42px 40px 34px; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.visual-content::before { content:""; position:absolute; inset:-4% -8%; background:url('park-network-bg.png') center center / 88% auto no-repeat; opacity:.08; filter:drop-shadow(0 0 28px rgba(175, 223, 255, .12)); pointer-events:none; z-index:0; transform-origin:center; animation: logoBgFloat 18s ease-in-out infinite; }
.visual-content > * { position:relative; z-index:1; }
@keyframes logoBgFloat { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(10px,-8px,0) scale(1.025); } }
.visual-brand { width:max-content; max-width:100%; padding:16px 18px; border-radius:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); box-shadow:0 18px 40px rgba(7,38,86,.18); margin-inline:auto; position:relative; overflow:hidden; isolation:isolate; }
.visual-brand::after { content:""; position:absolute; z-index:2; top:-38%; bottom:-38%; width:34%; left:-52%; transform:skewX(-18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.10) 20%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.14) 78%, transparent); filter:blur(1px); opacity:0; pointer-events:none; animation:logoShimmer 5s ease-in-out infinite; }
.visual-brand img { display:block; width:min(100%, 330px); height:auto; position:relative; z-index:1; }
@keyframes logoShimmer { 0% { left:-52%; opacity:0; } 3% { opacity:.88; } 16% { left:122%; opacity:.72; } 20%, 100% { left:122%; opacity:0; } }
.visual-kicker { display:flex; align-items:center; justify-content:center; gap:9px; font-size:10px; color:rgba(255,255,255,.78); font-weight:700; margin-top:16px; text-align:center; }
.visual-kicker span { width:18px; height:2px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(206,232,255,.86), rgba(255,255,255,.18)); box-shadow:none; }
.visual-content h2 { font-size:33px; line-height:1.45; margin-top:14px; letter-spacing:-.8px; }
.headline-main { display:block; }
.visual-content h2 em { font-style:normal; color:#8fd8ff; }
.visual-content > p { color:rgba(255,255,255,.74); font-size:12px; line-height:2; max-width:420px; margin-top:8px; }
.service-cloud { position:relative; margin-top:26px; height:280px; width:100%; }
.service-label { position:absolute; display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border-radius:999px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(14px); box-shadow:0 16px 36px rgba(7,38,86,.18); animation: floatLabel 7s ease-in-out infinite; white-space:nowrap; }
.service-label::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); pointer-events:none; }
.service-label i { position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); color:#d5efff; font-size:14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.service-label b { position:relative; z-index:1; font-size:12px; font-weight:800; letter-spacing:-.1px; }
@keyframes floatLabel { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-10px) rotate(.5deg); } }
.label-1 { top:12px; right:34px; animation-duration:6.8s; }
.label-2 { top:74px; left:18px; animation-duration:7.6s; animation-delay:-1.6s; }
.label-3 { top:126px; right:118px; animation-duration:6.3s; animation-delay:-.7s; }
.label-4 { top:184px; left:72px; animation-duration:8.2s; animation-delay:-2.1s; }
.label-5 { top:44px; right:246px; animation-duration:7.1s; animation-delay:-2.6s; }
.label-6 { top:210px; right:20px; animation-duration:7.8s; animation-delay:-1.1s; }
.label-2 i, .label-4 i { color:#a7ffdc; }
.label-3 i, .label-6 i { color:#9fdcff; }

.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; background:rgba(18,36,56,.48); backdrop-filter:blur(8px); z-index:1000; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:.25s; }
.modal-backdrop.open { opacity:1; visibility:visible; }
.modal-card { width:min(520px, 100%); border-radius:26px; background:#fff; box-shadow:0 30px 80px rgba(13,40,68,.25); padding:30px; position:relative; transform:translateY(16px) scale(.97); transition:.3s cubic-bezier(.22,.8,.22,1); text-align:center; }
.modal-backdrop.open .modal-card { transform:none; }
.modal-card.compact { max-width:420px; }
.modal-close { position:absolute; left:17px; top:17px; width:34px; height:34px; border-radius:11px; border:1px solid #e8eef4; background:#f8fafc; color:#8b9cad; cursor:pointer; }
.modal-icon { width:62px; height:62px; margin:0 auto 13px; border-radius:20px; display:grid; place-items:center; font-size:23px; }
.modal-icon.multi { color:var(--primary); background:#eef5ff; }
.modal-icon.danger { color:var(--danger); background:#fff0f2; }
.modal-card h3 { font-size:20px; margin-bottom:8px; }
.modal-card > p { color:var(--muted); font-size:11px; line-height:1.9; max-width:420px; margin:0 auto 18px; }
.role-list { display:grid; gap:10px; text-align:right; }
.role-option { width:100%; min-height:76px; border:1.5px solid #e3edf6; background:#fbfdff; border-radius:17px; padding:10px 12px; display:flex; align-items:center; gap:12px; cursor:pointer; color:var(--ink); transition:.22s; text-align:right; }
.role-option:hover:not(:disabled) { border-color:#a8c8ee; background:#f5f9ff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(42,91,145,.09); }
.role-option.disabled { opacity:.62; cursor:not-allowed; background:#fafafa; }
.role-option-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:#edf5ff; color:var(--primary); font-size:18px; flex:none; }
.role-user .role-option-icon { background:#effbf6; color:var(--success); }
.role-davar .role-option-icon { background:#fff6e9; color:#c9861a; }
.role-option-copy { flex:1; min-width:0; }
.role-option-copy b { display:block; font-size:12px; margin-bottom:2px; }
.role-option-copy small { display:block; color:#899bac; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-option-copy em { display:block; color:var(--danger); font-size:8px; font-style:normal; margin-top:2px; }
.role-status { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; }
.role-status.active { background:#edf5ff; color:var(--primary); }
.role-status.off { background:#fff0f2; color:var(--danger); }
.ghost-btn { margin-top:14px; border:0; background:transparent; color:#7f91a4; cursor:pointer; padding:9px 12px; font-size:10px; display:inline-flex; align-items:center; gap:6px; }
.modal-card.compact .primary-btn { margin-top:4px; height:52px; }

.toast-stack {
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:2000;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:min(410px, calc(100% - 48px));
    pointer-events:none;
}
.toast {
    --toast-accent:var(--primary);
    --toast-accent-rgb:47,115,223;
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    min-height:86px;
    padding:15px 16px 17px;
    overflow:hidden;
    border-radius:22px;
    border:1px solid #dce8f5;
    background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,251,255,.98));
    box-shadow:0 18px 46px rgba(25,61,98,.14),0 7px 20px rgba(47,115,223,.07);
    transform:translateY(14px) scale(.97);
    opacity:0;
    transition:transform .34s cubic-bezier(.22,.8,.22,1),opacity .26s ease;
    pointer-events:auto;
    direction:rtl;
    text-align:right;
    font-family:'Vazirmatn Fd',Tahoma,sans-serif;
    isolation:isolate;
}
.toast::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,rgba(var(--toast-accent-rgb),.075),transparent 42%);
    pointer-events:none;
    z-index:-1;
}
.toast::after {
    content:"";
    position:absolute;
    right:-42px;
    top:-54px;
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(var(--toast-accent-rgb),.12),transparent 70%);
    pointer-events:none;
    z-index:-1;
}
.toast.show { transform:translateY(0) scale(1); opacity:1; }
.toast.closing { transform:translateY(10px) scale(.98); opacity:0; }
.toast.success { --toast-accent:var(--success); --toast-accent-rgb:17,163,106; border-color:#d6eee5; }
.toast.error { --toast-accent:var(--danger); --toast-accent-rgb:230,77,93; border-color:#f3d8dd; }
.toast.warning { --toast-accent:var(--warning); --toast-accent-rgb:229,155,34; border-color:#f1e3c9; }
.toast.info { --toast-accent:var(--primary); --toast-accent-rgb:47,115,223; border-color:#d8e7fa; }
.toast-content {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    position:relative;
    z-index:1;
}
.toast-title {
    display:block;
    color:var(--ink);
    font-size:15px;
    font-weight:900;
    line-height:1.55;
    letter-spacing:-.2px;
}
.toast-message {
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    line-height:1.9;
    letter-spacing:-.05px;
}
.toast-icon {
    width:46px;
    height:46px;
    flex:none;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:var(--toast-accent);
    background:rgba(var(--toast-accent-rgb),.09);
    border:1px solid rgba(var(--toast-accent-rgb),.13);
    box-shadow:0 8px 18px rgba(var(--toast-accent-rgb),.08),inset 0 1px 0 rgba(255,255,255,.9);
    position:relative;
    z-index:1;
}
.toast-icon::before {
    content:"";
    position:absolute;
    inset:8px;
    border-radius:11px;
    background:rgba(var(--toast-accent-rgb),.07);
}
.toast-icon i {
    position:relative;
    z-index:1;
    font-size:17px;
}
/* Toast intentionally has no close/cross button. */
.toast-close { display:none!important; }
.toast-progress {
    position:absolute;
    right:16px;
    left:16px;
    bottom:8px;
    height:3px;
    border-radius:999px;
    overflow:hidden;
    background:#eaf0f6;
}
.toast-progress span {
    display:block;
    width:100%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,rgba(var(--toast-accent-rgb),.58),rgba(var(--toast-accent-rgb),1));
    box-shadow:0 0 10px rgba(var(--toast-accent-rgb),.22);
    transform-origin:right center;
    animation:toastProgress var(--toast-duration,4200ms) linear forwards;
}
@keyframes toastProgress { from { transform:scaleX(1); } to { transform:scaleX(0); } } to { transform:scaleX(0); } }

.page-loader { position:fixed; inset:0; z-index:3000; background:rgba(246,250,254,.86); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; gap:7px; opacity:0; visibility:hidden; transition:.25s; }
.page-loader.show { opacity:1; visibility:visible; }
.page-loader span { width:10px; height:10px; border-radius:50%; background:var(--primary); animation:loader .85s ease-in-out infinite alternate; }
.page-loader span:nth-child(2) { animation-delay:.15s; }
.page-loader span:nth-child(3) { animation-delay:.3s; }
@keyframes loader { to { transform:translateY(-10px); opacity:.45; } }

@media (max-width: 980px) {
    .page-shell { padding:18px 0; min-height:100svh; }
    .login-card { grid-template-columns:1fr; min-height:84svh; }
    .visual-side { order:-1; min-height:430px; }
    .visual-content { padding:34px 30px 28px; }
    .visual-brand img { width:min(100%, 290px); }
    .visual-content h2 { font-size:28px; }
    .visual-content > p { max-width:100%; }
    .service-cloud { height:250px; margin-top:22px; }
    .service-label { padding:12px 16px; }
    .service-label b { font-size:11px; }
    .label-1 { right:18px; }
    .label-2 { left:0; }
    .label-3 { right:96px; }
    .label-4 { left:48px; }
    .label-5 { right:186px; }
    .label-6 { right:10px; }
}
@media (max-width: 680px) {
    .page-shell { width:min(calc(100% - 36px), 520px); padding:18px 0; min-height:100svh; }
    .login-card { border-radius:22px; min-height:auto; }
    .visual-side { min-height:104px; }
    .visual-content { padding:10px 12px; justify-content:center; align-items:center; text-align:center; }
    .visual-content::before { inset:-10% -18%; background-size:120% auto; opacity:.10; }
    .visual-brand { width:100%; padding:6px 8px; margin:0; border-radius:16px; background:transparent; border-color:transparent; box-shadow:none; display:flex; justify-content:center; align-items:center; }
    .visual-brand img { width:min(100%, 130px); margin:0 auto; }
    .visual-content h2 { display:none; }
    .visual-content > p { display:none; }
    .visual-kicker { display:none; }
    .service-cloud { display:none; }
    .visual-grid::before { opacity:.85; }
    .glow-a { width:180px; height:180px; top:32px; right:-40px; }
    .glow-b { width:150px; height:150px; left:-60px; bottom:-10px; }
    .line-a { top:72px; right:10px; width:150px; }
    .line-b { bottom:48px; left:5px; width:130px; }
    .back-home-btn { top:auto; bottom:18px; left:50%; right:auto; transform:translateX(-50%); height:42px; padding:0 16px; border-radius:14px; }
    .back-home-btn:hover { transform:translateX(-50%) translateY(-2px); }
    .back-home-btn span { font-size:11px; }
    .form-side { padding:34px 24px 82px; min-height:auto; }
    .stepper { margin-bottom:27px; }
    .stepper > i { width:50px; }
    .form-heading { margin-bottom:25px; }
    .form-heading h1 { font-size:23px; }
    .mobile-box-input { height:60px; min-height:60px; padding:0 92px 0 146px; border-radius:20px; }
    .inline-submit-btn { left:6px; top:6px; bottom:6px; width:108px; border-radius:15px; font-size:11px; gap:7px; }
    .inline-submit-btn i { width:26px; height:26px; border-radius:9px; }
    .input-status { right:57px; width:23px; height:23px; }
    .mobile-input-icon { width:38px; height:38px; right:11px; border-radius:13px; }
    .mobile-box-input input { font-size:17px; }
    .floating-label { right:60px; }
    .otp-boxes { gap:5px; }
    .otp-digit { width:43px; height:55px; border-radius:12px; }
    .modal-card { padding:26px 18px 20px; border-radius:22px; }
    .toast-stack { left:12px; right:12px; bottom:12px; width:auto; gap:10px; }
    .toast { min-height:84px; padding:16px 16px 16px 14px; border-radius:22px; gap:12px; }
    .toast-title { font-size:16px; }
    .toast-message { font-size:13px; line-height:1.8; }
    .toast-icon { width:46px; height:46px; border-radius:16px; }
    .toast-icon i { font-size:18px; }
    .toast-progress { right:14px; left:14px; bottom:10px; }
}
@media (max-width: 420px) {
    .page-shell { width:calc(100% - 30px); padding:15px 0; }
    .visual-brand { margin:0; }
    .visual-content::before { background-position:center; }
    .grid-line { opacity:.4; }
    .mobile-box-input { height:58px; min-height:58px; padding:0 54px 0 104px; }
    .inline-submit-btn { left:5px; top:5px; bottom:5px; width:88px; border-radius:14px; font-size:10.5px; gap:5px; }
    .inline-submit-btn i { width:24px; height:24px; border-radius:8px; }
    .input-status { display:none; }
    .mobile-input-icon { width:36px; height:36px; right:10px; border-radius:12px; }
    .mobile-box-input input { font-size:16px; }
    .floating-label { right:56px; }
    .back-home-btn { gap:8px; padding:0 12px; bottom:14px; }
    .back-home-btn span { display:none; }
    .visual-side { min-height:92px; }
    .visual-brand img { width:min(100%, 112px); }
    .preview-items { gap:5px; }
    .preview-items span { padding:6px 8px; font-size:9px; }
    .otp-digit { width:39px; height:52px; font-size:20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* V2.8 — login-aligned light toast */
@media (max-width:680px){
    .toast-stack{left:12px;right:12px;bottom:12px;width:auto;gap:9px}
    .toast{min-height:78px;padding:13px 13px 15px;border-radius:19px;gap:11px}
    .toast-title{font-size:14px}
    .toast-message{font-size:11px;line-height:1.85}
    .toast-icon{width:42px;height:42px;border-radius:13px}
    .toast-icon i{font-size:16px}
    .toast-progress{right:13px;left:13px;bottom:7px}
}