@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{
--ink:#16213c;--muted:#8790a8;--line:#e7ebf3;--purple:#6b5be7;--cyan:#28c7d9}
*{
box-sizing:border-box}
body{
margin:0;min-height:100vh;font-family:Vazirmatn,Tahoma,sans-serif;color:var(--ink);background:#f7f8fc;overflow-x:hidden}
.background-glow{
position:fixed;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none}
.glow-a{
width:430px;height:430px;background:#e4dcff;top:-170px;right:-80px}
.glow-b{
width:400px;height:400px;background:#d8f6fa;bottom:-200px;left:-90px}
.shell{
width:min(1120px,calc(100% - 40px));min-height:720px;margin:34px auto;display:grid;grid-template-columns:42% 58%;direction:ltr;position:relative;z-index:1;box-shadow:0 24px 70px #39436b18;border-radius:28px;overflow:hidden}
.brand-panel{
direction:rtl;background:linear-gradient(145deg,#242c55 0%,#3c356d 55%,#5649a2 100%);color:white;padding:45px 48px;display:flex;flex-direction:column}
.brand{
display:flex;align-items:center;gap:12px;font-size:25px}
.brand-mark{
display:flex;align-items:center;gap:3px;height:29px;transform:skew(-18deg)}
.brand-mark span{
display:block;width:6px;border-radius:8px;background:linear-gradient(#53e0e0,#9a88ff)}
.brand-mark span:nth-child(1){
height:16px}
.brand-mark span:nth-child(2){
height:29px}
.brand-mark span:nth-child(3){
height:21px}
.brand-copy{
margin-top:132px}
.eyebrow{
font-size:11px;letter-spacing:2px;color:#a8e9ea}
.brand-copy h1{
font-size:42px;line-height:1.45;margin:17px 0 15px;font-weight:700}
.brand-copy em{
font-style:normal;color:#68e0e0}
.brand-copy p{
color:#d1d2eb;line-height:2;font-size:14px;max-width:300px}
.quote{
margin-top:auto;padding:17px 20px;border-right:2px solid #6be0e0;background:#ffffff0a}
.quote span{
font-size:30px;color:#6be0e0}
.quote p{
display:inline;font-size:13px}
.brand-footer{
margin-top:35px;color:#abb0d2;font-size:11px}
.status-dot{
display:inline-block;width:7px;height:7px;background:#67e1b5;border-radius:50%;margin-left:6px}
.auth-card{
direction:rtl;background:#fff;padding:45px 70px 25px;position:relative}
.tabs{
display:flex;gap:27px;border-bottom:1px solid var(--line);margin-bottom:33px}
.tab{
border:0;background:none;padding:0 0 15px;font:600 14px inherit;color:#9ca3b6;cursor:pointer;position:relative}
.tab.active{
color:var(--ink)}
.tab.active:after{
content:'';position:absolute;bottom:-1px;right:0;left:0;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--purple),var(--cyan))}
.heading h2{
font-size:24px;margin:0 0 8px}
.heading p{
color:var(--muted);font-size:13px;margin:0 0 25px}
label{
display:block;font-size:12px;font-weight:600;margin:14px 0;color:#39415a}
input[type=text],input[type=password],input[type=tel]{
width:100%;height:45px;margin-top:7px;border:1px solid var(--line);border-radius:10px;padding:0 14px;outline:0;font:13px Vazirmatn;background:#fff;transition:.2s}
input:focus{
border-color:#8d82ed;box-shadow:0 0 0 3px #6b5be715}
.password-wrap{
position:relative}
.password-wrap input{
padding-left:40px}
.eye{
position:absolute;left:10px;top:18px;border:0;background:none;color:#9ca4b9;cursor:pointer}
.form-meta{
display:flex;justify-content:space-between;align-items:center;margin:17px 0 25px;font-size:11px}
.form-meta a,.link-btn,.terms a{
color:var(--purple);text-decoration:none}
.check{
display:flex;align-items:center;gap:7px;font-weight:400!important;margin:0!important}
.check input{
display:none}
.check span{
width:15px;height:15px;border:1px solid #cbd1df;border-radius:4px}
.check input:checked+span{
background:var(--purple);box-shadow:inset 0 0 0 3px white}
.primary{
border:0;width:100%;height:48px;border-radius:11px;background:linear-gradient(100deg,#6656df,#3cbfd1);color:white;font:600 13px Vazirmatn;cursor:pointer;box-shadow:0 8px 18px #6656df2c}
.primary b{
font-size:19px;margin-right:9px}
.switch-text{
text-align:center;color:var(--muted);font-size:12px;margin:20px 0}
.link-btn{
border:0;background:none;font:600 12px Vazirmatn;cursor:pointer}
.form-view{
display:none}
.form-view.active{
display:block}
.alert{
display:none;padding:10px;border-radius:8px;background:#fff0f0;color:#d34e61;font-size:11px;margin:-15px 0 15px}
.alert.show{
display:block}
.role-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:17px}
.role{
border:1px solid var(--line);border-radius:11px;text-align:center;padding:10px 3px;margin:0;cursor:pointer;transition:.2s}
.role input{
display:none}
.role:has(input:checked){
border-color:#7a6cea;background:#f5f3ff;box-shadow:0 4px 12px #6b5be718}
.role-icon{
display:block;font-size:21px;color:var(--purple);margin-bottom:4px}
.role b,.role small{
display:block;font-size:10px}
.role small{
color:var(--muted);font-weight:400;margin-top:3px}
.two-col{
display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{
font-size:9px;color:#a1a8b8;font-weight:400;margin-right:5px}
.strength{
display:flex;align-items:center;gap:8px;margin-top:5px}
.strength-bar{
height:4px;background:#edf0f5;border-radius:5px;flex:1}
.strength-bar i{
display:block;height:100%;width:20%;background:#e56977;border-radius:5px;transition:.3s}
.strength span{
font-size:9px;color:#e56977;white-space:nowrap}
.terms{
margin:18px 0!important}
.security-note{
text-align:center;color:#a9afbd;font-size:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:21px}
.mobile-brand{
display:none}

@media(max-width:800px){
.shell{
grid-template-columns:1fr;margin:15px auto;min-height:auto}
.brand-panel{
display:none}
.auth-card{
padding:28px 25px 20px}
.mobile-brand{
display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:25px}
.brand-copy h1{
font-size:34px}
.role-grid{
grid-template-columns:repeat(2,1fr)}
}
/* ── تبلت عمودی (۴۸۱-۸۰۰px): کارت وسط، حاشیه‌ی مناسب ── */
@media(max-width:800px) and (min-width:481px){
.shell{
width:min(560px,calc(100% - 32px));margin:24px auto}
.auth-card{
padding:34px 34px 24px}
.heading h2{
font-size:26px}
input[type=text],input[type=password],input[type=tel]{
height:50px;font-size:14px}
.primary{
height:52px;font-size:14px}
}
/* ── موبایل (تا ۴۸۰px) ── */
@media(max-width:480px){
.shell{
width:100%;margin:0;border-radius:0;min-height:100vh}
.auth-card{
padding:25px 18px;min-height:100vh}
.two-col{
grid-template-columns:1fr;gap:0}
.tabs{
margin-bottom:25px}
.captcha-options{
grid-template-columns:repeat(3,1fr)}
.security-code{
font-size:17px;letter-spacing:4px;padding:7px 14px}
}
/* ── موبایل کوچک (تا ۳۶۰px) ── */
@media(max-width:360px){
.tabs{
gap:16px}
.role-grid{
grid-template-columns:repeat(2,1fr)}
.security-code{
font-size:15px;letter-spacing:3px}
.mobile-brand{
font-size:19px}
}
/* ── نمایشگر بزرگ (۱۴۴۰px+) ── */
@media(min-width:1440px){
.shell{
width:min(1240px,calc(100% - 60px));min-height:780px}
.brand-copy h1{
font-size:52px}
.auth-card{
padding:50px 84px 30px}
}
/* ── لمس: فوکوس به‌جای هوور ── */
@media(hover:none){
.primary:hover{
transform:none;box-shadow:0 8px 18px #6656df2c}
.role:hover{
transform:none}
.tab:hover{
transform:none}
input[type=text]:hover,input[type=password]:hover,input[type=tel]:hover{
border-color:var(--line);background:#171920}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.logo-img{
width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 5px 8px #2616a855)}
.mobile-brand .logo-img{
width:36px;height:36px}

/* پس‌زمینه اصلی مطابق درخواست: مشکی */
body{
background:#050507;color:#f5f7ff}
.glow-a{
background:#24166e;opacity:.35}
.glow-b{
background:#083d58;opacity:.3}
.auth-card{
background:#101116;color:#f5f7ff;box-shadow:0 24px 70px #00000080}
.tabs{
border-color:#292b38}
.tab{
color:#85899d}
.tab.active{
color:#fff}
input[type=text],input[type=password],input[type=tel]{
background:#171920;border-color:#303342;color:#fff}
.heading p,.switch-text{
color:#9da2b5}
.security-note{
border-color:#292b38;color:#85899d}
.role{
border-color:#303342;background:#15161d}
.role:has(input:checked){
background:#211d43;border-color:#8375ef}
.check span{
border-color:#555a70}
.form-meta a,.link-btn,.terms a{
color:#9b8cff}
.hint{
color:#85899d}

/* انیمیشن‌ها و حالت‌های تعاملی */
*,*::before,*::after{
font-family:inherit}
.shell{
animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.brand-panel{
animation:fadeIn .8s .1s both}
.auth-card{
animation:fadeIn .8s .18s both}
.brand-mark,.logo-img{
transition:transform .35s ease,filter .35s ease}
.brand:hover .logo-img,.mobile-brand:hover .logo-img{
transform:rotate(-6deg) scale(1.1);filter:drop-shadow(0 0 13px #4bd9ff)}
.tab{
transition:color .25s ease,transform .25s ease}
.tab:hover{
color:#b3aaff;transform:translateY(-2px)}
input[type=text],input[type=password],input[type=tel]{
transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
input[type=text]:hover,input[type=password]:hover,input[type=tel]:hover{
border-color:#6257b5;background:#1d1f29}
input[type=text]:focus,input[type=password]:focus,input[type=tel]:focus{
transform:translateY(-1px);border-color:#8e7cff;box-shadow:0 0 0 3px #7568ed25,0 7px 18px #0003}
.role{
transition:transform .25s ease,box-shadow .25s ease,border-color .25s,background .25s}
.role:hover{
transform:translateY(-4px);border-color:#7165dc;box-shadow:0 9px 20px #0004}
.role-icon{
transition:transform .3s}
.role:hover .role-icon{
transform:scale(1.18) rotate(8deg)}
.primary{
position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,filter .25s}
.primary::after{
content:'';position:absolute;top:0;bottom:0;width:45%;right:-60%;background:linear-gradient(105deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);transition:right .55s}
.primary:hover{
transform:translateY(-3px);box-shadow:0 12px 25px #5f51dd55;filter:saturate(1.18)}
.primary:hover::after{
right:120%}
.primary:active{
transform:translateY(0)}
.link-btn:hover,.form-meta a:hover,.terms a:hover{
text-decoration:underline}
.background-glow{
animation:float 9s ease-in-out infinite}
.glow-b{
animation-delay:-4s}
@keyframes rise{
from{
opacity:0;transform:translateY(22px) scale(.985)}
to{
opacity:1;transform:none}
}
@keyframes fadeIn{
from{
opacity:0}
to{
opacity:1}
}
@keyframes float{
0%,100%{
transform:translate(0,0)}
50%{
transform:translate(18px,-14px)}
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation:none!important;transition:none!important}
}

/* آیکن چشم واضح و پیش‌فرض */
.eye{
font-size:0;width:28px;height:28px;top:15px;left:7px;display:grid;place-items:center}
.eye::before{
content:'';display:block;width:16px;height:10px;border:1.8px solid #aeb5cf;border-radius:80% 15%;transform:rotate(-45deg);transition:.25s}
.eye::after{
content:'';position:absolute;width:5px;height:5px;background:#aeb5cf;border-radius:50%;transition:.25s}
.eye:hover::before{
border-color:#b5a9ff;transform:rotate(-45deg) scale(1.12)}
.eye:hover::after{
background:#b5a9ff}

/* خوانایی بیشتر انتخاب نقش‌ها */
.role-grid{
gap:12px}
.role{
min-height:90px;padding:12px 5px;background:#1a1c26;border-color:#3b3e50;color:#f7f7ff}
.role b{
font-size:11px;color:#fff;margin-top:2px}
.role small{
font-size:10px;color:#b0b5ca}
.role-icon{
font-size:25px;color:#73e0eb;text-shadow:0 0 12px #55dce866}
.role:hover{
background:#23243a;border-color:#8c7bff;box-shadow:0 0 0 1px #8c7bff55,0 10px 22px #0006}
.role:has(input:checked){
background:linear-gradient(145deg,#282052,#202c4b);border-color:#65d9e4;box-shadow:0 0 0 2px #65d9e433,0 8px 22px #0006}
.role:has(input:checked) .role-icon{
color:#79f0ed}
.role:has(input:checked) small{
color:#d2d6eb}
.role.soon{
opacity:.28;cursor:not-allowed;pointer-events:none;position:relative;overflow:hidden}
.role.soon .role-icon{
color:#6b6f85}
.soon-badge{
position:absolute;top:0;left:0;right:0;padding:3px 0;font-size:9px;font-weight:700;color:#1a1510;text-align:center;background:linear-gradient(90deg,#f0c040,#ffe08a,#f0c040);letter-spacing:1px;box-shadow:0 2px 8px #f0c04066}

/* آیکن‌های مستقل برای دو حالت نمایش رمز */
.eye{
font-size:0}
.eye::before,.eye::after{
display:none!important}
.eye svg{
width:20px;height:20px;display:block;stroke:#aeb5cf;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.eye:hover svg{
stroke:#b5a9ff;transform:scale(1.08)}

/* اندازه کوچک‌تر دکمه چشم */
.eye{
width:24px;height:24px;left:6px;top:17px;padding:2px}
.eye svg{
width:15px;height:15px}

/* تنظیم نهایی اندازه آیکن چشم */
.eye{
width:27px;height:27px;left:6px;top:16px;padding:2px}
.eye svg{
width:18px;height:18px}

/* انتقال نرم بین صفحه‌های ورود و ثبت‌نام */
.form-view.active{
animation:pageIn .48s cubic-bezier(.22,.75,.25,1) both}
.form-view.active .heading{
animation:contentIn .42s .06s both}
.form-view.active label,.form-view.active .role-grid,.form-view.active .form-meta,.form-view.active .primary,.form-view.active .switch-text{
animation:contentIn .4s both}
.form-view.active label:nth-of-type(1){
animation-delay:.08s}
.form-view.active label:nth-of-type(2){
animation-delay:.13s}
.form-view.active label:nth-of-type(3){
animation-delay:.18s}
.form-view.active label:nth-of-type(4){
animation-delay:.23s}
.form-view.active .role-grid{
animation-delay:.1s}
.form-view.active .primary{
animation-delay:.28s}
@keyframes pageIn{
from{
opacity:0;transform:translateX(22px)}
to{
opacity:1;transform:translateX(0)}
}
@keyframes contentIn{
from{
opacity:0;transform:translateY(10px)}
to{
opacity:1;transform:translateY(0)}
}

.modal-backdrop{
position:fixed;inset:0;background:#020208b8;backdrop-filter:blur(8px);z-index:20;display:none;align-items:center;justify-content:center;padding:18px}
.modal-backdrop.open{
display:flex;animation:fadeIn .25s ease}
.rules-modal{
position:relative;width:min(570px,100%);max-height:min(720px,92vh);background:#14151d;border:1px solid #393d55;border-radius:20px;padding:26px;box-shadow:0 25px 80px #000b;animation:modalUp .35s ease;color:#f7f7ff}
.modal-close{
position:absolute;left:16px;top:12px;border:0;background:none;color:#aeb5cf;font-size:27px;cursor:pointer}
.modal-close:hover{
color:#fff;transform:rotate(90deg)}
.modal-symbol{
color:#72e2ed;font-size:24px}
.rules-modal h2{
margin:4px 0 5px;font-size:20px}
.modal-intro{
font-size:11px;color:#aeb5cf;margin:0 0 17px}
.rules-scroll{
max-height:470px;overflow:auto;padding-left:8px}
.rules-scroll h3{
color:#9e91ff;font-size:13px;margin:17px 0 5px}
.rules-scroll p{
font-size:11px;line-height:2;color:#d0d3e1;margin:0}
.modal-ok{
margin-top:18px}
.modal-backdrop .primary{
height:43px}
@keyframes modalUp{
from{
opacity:0;transform:translateY(25px) scale(.97)}
to{
opacity:1;transform:none}
}
@media(max-width:480px){
.rules-modal{
padding:22px 18px}
.rules-scroll{
max-height:55vh}
}

/* اصلاح بیرون‌زدگی متن پنجره قوانین */
.rules-modal,.rules-modal *{
box-sizing:border-box;max-width:100%}
.rules-scroll{
overflow-x:hidden;overflow-y:auto;overflow-wrap:anywhere;word-break:normal}
.rules-scroll p,.rules-scroll h3{
overflow-wrap:anywhere}
.rules-modal strong{
color:#80e4eb}

/* ارتقای پنل معرفی به سبک ویژه آکسون */
.brand-panel{
position:relative;overflow:hidden;background:radial-gradient(circle at 15% 12%,#6256c855 0 2px,transparent 3px),radial-gradient(circle at 80% 38%,#62e1eb33 0 2px,transparent 3px),linear-gradient(145deg,#0b1020 0%,#171944 45%,#30206b 100%)}
.brand-panel::before{
content:'';position:absolute;width:360px;height:360px;border:1px solid #7b70ff38;border-radius:50%;left:-180px;top:220px;box-shadow:0 0 0 35px #7b70ff0d,0 0 0 70px #7b70ff08}
.brand-panel::after{
content:'';position:absolute;width:180px;height:180px;border:1px solid #6fe5ec55;transform:rotate(45deg);right:-105px;bottom:90px;box-shadow:0 0 0 18px #6fe5ec0c}
.brand-panel>*{
position:relative;z-index:1}
.brand-copy{
margin-top:116px}
.brand-copy .eyebrow{
display:inline-block;padding:7px 12px;border:1px solid #79e7e855;border-radius:30px;background:#6be1eb0c;letter-spacing:1.5px}
.brand-copy h1{
font-size:46px;line-height:1.5;letter-spacing:-1px;text-shadow:0 8px 28px #05051c88}
.brand-copy em{
background:linear-gradient(90deg,#6de5eb,#9f87ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-copy p{
font-size:14px;line-height:2.2;color:#e0e1f2;max-width:315px;border-right:2px solid #63dfe7;padding-right:15px}
.quote{
background:linear-gradient(100deg,#ffffff0b,#6de3ed0c);border:1px solid #ffffff16;border-right:2px solid #70e5ea;border-radius:0 12px 12px 0;backdrop-filter:blur(4px)}
.quote p{
color:#f0f1ff}
.brand-footer{
letter-spacing:.3px}

/* جلوگیری قطعی از بیرون‌زدگی آخرین بخش قوانین */
.rules-modal{
overflow:hidden;display:flex;flex-direction:column}
.rules-scroll{
min-height:0;max-width:100%;padding-right:4px}
.rules-scroll p{
white-space:normal;overflow-wrap:break-word;word-break:break-word}
.modal-ok{
flex:0 0 auto}

/* چک‌باکس سفارشی و زیبا برای پذیرش قوانین */
.terms{
position:relative;padding:11px 13px;border:1px solid #303342;border-radius:12px;background:linear-gradient(100deg,#1a1b25,#171a27);cursor:pointer;transition:.25s;color:#d9dced!important}
.terms:hover{
border-color:#7468e5;background:#211f37;transform:translateY(-1px)}
.terms a{
font-weight:600}
.terms span{
position:relative;width:20px;height:20px;flex:0 0 20px;border:1.5px solid #68708b;border-radius:6px;background:#101117;transition:.25s}
.terms input:checked+span{
border-color:#62dce4;background:linear-gradient(135deg,#6c5be7,#29c8d8);box-shadow:0 0 0 3px #5ddfe422}
.terms input:checked+span::after{
content:'';position:absolute;width:9px;height:5px;right:4px;top:5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* انتخاب نقش سفارشی بر پایه select استاندارد HTML */
.role-select-label{
margin-top:4px}
.select-wrap{
position:relative;margin-top:8px}
.role-select{
appearance:none;-webkit-appearance:none;width:100%;height:52px;padding:0 17px 0 45px;border:1px solid #3b3e50;border-radius:13px;background:linear-gradient(105deg,#1b1d28,#20213b);color:#dfe2f2;font:500 13px Vazirmatn,Tahoma,sans-serif;outline:none;cursor:pointer;transition:.25s}
.role-select:hover{
border-color:#7468e5;box-shadow:0 7px 20px #0004}
.role-select:focus{
border-color:#6de2e5;box-shadow:0 0 0 3px #63dfe522,0 8px 22px #0004}
.role-select option{
background:#171923;color:#fff;padding:12px}
.select-arrow{
position:absolute;left:16px;top:13px;color:#71e0e8;font-size:22px;line-height:20px;pointer-events:none;transition:.25s}
.select-wrap:focus-within .select-arrow{
transform:rotate(180deg);color:#a293ff}
.role-select:valid{
border-color:#5261a0}

/* اعلان‌های Toast برای خطا و پیام‌های فرم */
.alert{
position:fixed;z-index:30;top:24px;right:24px;width:min(360px,calc(100% - 32px));margin:0;padding:15px 18px 15px 42px;border:1px solid #664b62;border-radius:15px;background:linear-gradient(135deg,#251a2a,#171a29);box-shadow:0 14px 35px #0009;color:#ffdce2;font-size:12px;line-height:1.8;overflow:hidden;animation:toastIn .45s cubic-bezier(.2,.8,.2,1) both}
.alert::before{
content:'!';position:absolute;left:14px;top:13px;width:22px;height:22px;border:1px solid #ff7f9a;border-radius:50%;color:#ff8da4;text-align:center;line-height:21px;font-weight:800}
.alert::after{
content:'';position:absolute;bottom:0;right:0;height:3px;width:100%;background:linear-gradient(90deg,#ff6d98,#9b74ff);animation:toastTimer 4s linear both}
.alert.show{
display:block}
.alert.success{
border-color:#367b7c;color:#c9fff7}
.alert.success::before{
content:'✓';border-color:#63e0d4;color:#63e0d4}
@keyframes toastIn{
from{
opacity:0;transform:translateY(-16px) scale(.96)}
to{
opacity:1;transform:none}
}
@keyframes toastTimer{
from{
width:100%}
to{
width:0}
}
@media(max-width:480px){
.alert{
top:14px;right:16px}
}

/* Toast سراسری با انیمیشن ورود و خروج */
.alert{
top:50%;right:50%;transform:translate(50%,-50%);width:min(390px,calc(100% - 32px));animation:toastInCenter .45s cubic-bezier(.2,.85,.2,1) both}
.alert.toast-out{
display:block;animation:toastOutCenter .35s ease both}
.alert::after{
animation:toastTimer 4.2s linear both}
@keyframes toastInCenter{
from{
opacity:0;transform:translate(50%,-42%) scale(.82)}
to{
opacity:1;transform:translate(50%,-50%) scale(1)}
}
@keyframes toastOutCenter{
from{
opacity:1;transform:translate(50%,-50%) scale(1)}
to{
opacity:0;transform:translate(50%,-58%) scale(.9)}
}

/* جایگاه نهایی Toast: ثابت در بالای صفحه */
.alert{
top:24px;right:24px;left:auto;transform:none;width:min(390px,calc(100% - 48px));animation:toastInTop .45s cubic-bezier(.2,.85,.2,1) both}
.alert.toast-out{
animation:toastOutTop .35s ease both}
@keyframes toastInTop{
from{
opacity:0;transform:translateY(-18px) scale(.94)}
to{
opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastOutTop{
from{
opacity:1;transform:translateY(0) scale(1)}
to{
opacity:0;transform:translateY(-15px) scale(.94)}
}
@media(max-width:480px){
.alert{
top:15px;right:16px;width:calc(100% - 32px)}
}

/* Toast به پنجره دید مرورگر متصل است، نه به محتوای صفحه */
.alert{
position:fixed!important;inset-block-start:24px!important;inset-inline-end:24px!important;inset-inline-start:auto!important;z-index:9999!important}

@media(max-width:480px){
.alert{
inset-block-start:15px!important;inset-inline-end:16px!important}
}

/* Toast در بالای محتوای صفحه و به‌صورت کاملاً وسط‌چین */
.alert{
position:absolute!important;top:24px!important;right:50%!important;left:auto!important;transform:translateX(50%)!important;width:min(390px,calc(100% - 32px));z-index:9999!important;animation:toastInCentered .45s cubic-bezier(.2,.85,.2,1) both}
.alert.toast-out{
animation:toastOutCentered .35s ease both}
@keyframes toastInCentered{
from{
opacity:0;transform:translate(50%,-18px) scale(.94)!important}
to{
opacity:1;transform:translate(50%,0) scale(1)!important}
}
@keyframes toastOutCentered{
from{
opacity:1;transform:translate(50%,0) scale(1)!important}
to{
opacity:0;transform:translate(50%,-15px) scale(.94)!important}
}
@media(max-width:480px){
.alert{
top:15px!important;width:calc(100% - 32px)}
}

/* مرکزچین واقعی مستقل از جهت راست‌به‌چپ */
.alert{
right:auto!important;left:50%!important;transform:translateX(-50%)!important}

@keyframes toastInCentered{
from{
opacity:0;transform:translate(-50%,-18px) scale(.94)!important}
to{
opacity:1;transform:translate(-50%,0) scale(1)!important}
}
@keyframes toastOutCentered{
from{
opacity:1;transform:translate(-50%,0) scale(1)!important}
to{
opacity:0;transform:translate(-50%,-15px) scale(.94)!important}
}

.captcha{
display:flex;align-items:center;gap:8px;margin:12px 0;color:#bfc4d9;font-size:11px}
.captcha input{
width:70px!important;height:36px!important;margin:0!important;text-align:center}

/* CAPTCHA زیباتر و خواناتر */
.captcha{
justify-content:space-between;padding:9px 11px;border:1px solid #34384d;border-radius:12px;background:linear-gradient(105deg,#191b28,#222044);box-shadow:inset 0 1px #ffffff0a}
.captcha span{
color:#d7daf0;font-weight:600;letter-spacing:.2px}
.captcha span::first-letter{
color:#72e0e8}
.captcha input{
background:#101117!important;border-color:#505679!important;color:#fff;text-align:center;font-weight:700!important}

/* CAPTCHA انتخاب کد امنیتی */
.captcha{
display:block!important;padding:13px!important;margin:14px 0!important}
.captcha-title{
font-size:11px;color:#e3e5f5;font-weight:700}
.captcha-title small{
display:block;color:#8f96b0;font-size:9px;font-weight:400;margin-top:3px}
.security-code{
width:max-content;margin:11px auto 12px;padding:8px 18px;border:1px dashed #69dfe5;border-radius:9px;color:#91eff0;background:#0d1722;font:800 20px monospace;letter-spacing:5px;text-shadow:0 0 12px #65e4e566;user-select:none;-webkit-user-select:none;pointer-events:none;transform:rotate(-2deg)}
.captcha-options{
display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.captcha-options label{
margin:0;cursor:pointer}
.captcha-options input{
display:none}
.captcha-options span{
display:block;text-align:center;padding:8px 3px;border:1px solid #3b3e50;border-radius:8px;color:#bec4da;background:#10121a;font:700 11px monospace;letter-spacing:1px;user-select:none;transition:.2s}
.captcha-options label:hover span{
border-color:#8375ef;color:#fff;transform:translateY(-2px)}
.captcha-options input:checked+span{
border-color:#67e0e6;background:linear-gradient(135deg,#272052,#123545);color:#8df1ef;box-shadow:0 0 0 2px #67e0e622}

/* گزینه‌های CAPTCHA بدون افکت Hover؛ فقط حالت انتخاب‌شده تغییر می‌کند */
.captcha-options label:hover span{
border-color:#3b3e50;color:#bec4da;transform:none;background:#10121a;box-shadow:none}
.captcha-options input:checked+span{
transform:none}

.security-code,.captcha-options span{
user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}
.security-code{
cursor:default}
.captcha-options span{
cursor:pointer}

/* بازگشت پیام خطا به سبک قبلی داخل فرم */
.alert{
position:relative!important;top:auto!important;right:auto!important;left:auto!important;transform:none!important;width:100%!important;margin:-15px 0 15px!important;padding:10px!important;border:0!important;border-radius:8px!important;background:#2a1824!important;box-shadow:none!important;color:#ffbdc8!important;font-size:11px!important;line-height:1.8!important;animation:alertIn .3s ease both!important}
.alert::before,.alert::after{
display:none!important}
.alert.toast-out{
animation:alertOut .25s ease both!important}
@keyframes alertIn{
from{
opacity:0;transform:translateY(-5px)!important}
to{
opacity:1;transform:none!important}
}
@keyframes alertOut{
from{
opacity:1}
to{
opacity:0}
}

/* نمایش پایدار CAPTCHA حتی بدون فونت آنلاین */
.security-code,.captcha-options span{
font-family:'Vazirmatn','Courier New',Consolas,monospace!important;font-variant-numeric:tabular-nums;white-space:nowrap}

/* کادر مشخص برای پیام خطا */
.alert{
border:1px solid #e66b86!important;outline:2px solid #e66b8622!important;outline-offset:2px!important;background:linear-gradient(100deg,#2b1825,#211a2d)!important}

/* صفحه بارگذاری امن */
.axon-loader{position:fixed;inset:0;z-index:100;background:#070810;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;transition:opacity .45s,visibility .45s}
.axon-loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.axon-loader img{width:72px;filter:drop-shadow(0 0 20px #6b5be7);animation:loaderPulse 1.4s ease-in-out infinite}
.axon-loader p{color:#aab1c8;font-size:12px}
.loader-ring{width:28px;height:28px;border:2px solid #30364d;border-top-color:#71e3e9;border-left-color:#8979fa;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes loaderPulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.05)}}
50%{
transform:scale(1.05)}
}

.alert{
transition:opacity .25s ease}

.alert.success{
border-color:#55d8ca!important;outline-color:#55d8ca33!important;background:linear-gradient(100deg,#122b2d,#172235)!important;color:#cafff5!important}
.alert.success::before{
display:none!important}

/* پیام موفقیت روشن و سبز */
.alert.success{
background:linear-gradient(100deg,#103a37,#17322e)!important;border-color:#4de0c5!important;outline:2px solid #4de0c522!important;color:#cffff3!important}
.alert.success::before{
content:'✓';display:block!important;border-color:#62e5d0;color:#6ff0dc}

/* اعلان‌های فرم با ظاهر ویژه و حرفه‌ای */
.alert{
position:relative!important;display:none;align-items:center;min-height:54px!important;padding:13px 48px 13px 16px!important;border-radius:14px!important;overflow:hidden;letter-spacing:-.1px;box-shadow:0 8px 22px #0004!important}
.alert.show{
display:flex!important}
.alert::before{
display:flex!important;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;font:800 14px Arial;color:#ff9caf;border:1px solid #ff718e;background:#ff718e18}
.alert::after{
content:'';display:block!important;position:absolute;right:0;top:0;bottom:0;width:3px;background:linear-gradient(#ff6c91,#a77dff);animation:none!important}
.alert:not(.success)::before{
content:'!';}
.alert:not(.success){
border-color:#e66b86!important;background:linear-gradient(110deg,#2b1825,#211a2d)!important;color:#ffc8d1!important}
.alert.success{
border-color:#50dfc5!important;background:linear-gradient(110deg,#103a37,#172c35)!important;color:#cffff4!important}
.alert.success::before{
content:'✓';color:#77f4dd;border-color:#5ce3ce;background:#5ce3ce18}
.alert.success::after{
background:linear-gradient(#4de0c5,#6e8cff)}