/* =====================================================================
   AliEasy — سیستم طراحی مرکزی  (نسخه ۲)
   جهت: «کربن و کروم» — سطح‌های مشکی کربنی، خطوط مو‌ی نقره‌ای، و قرمز فقط
   برای اقدام (دکمه‌ها) و خطوط متحرک برند. همهٔ صفحه‌ها فقط از توکن‌های
   همین فایل استفاده می‌کنند؛ رنگ/فاصله/اندازه‌ی ثابت داخل صفحه‌ها نگذار.
   ===================================================================== */

/* ---------- ۱) توکن‌ها ---------- */
:root{
  /* رنگ — پایه */
  --c-bg:#050506;          /* کربن */
  --c-bg-2:#0A0A0D;
  --c-surface:#101013;     /* گرافیت */
  --c-surface-2:#17171B;   /* فولاد */
  --c-line:#26262E;
  --c-line-strong:#3A3A45;
  --c-text:#F4F4F6;
  --c-text-2:#A9A9B4;      /* کنتراست ≥ 7:1 روی همهٔ سطح‌ها */
  --c-silver:#E4E0DF;      /* کروم لوگو */
  --c-red:#DC1522;         /* اقدام */
  --c-red-hi:#FF4553;      /* متن/لینک قرمز روی مشکی (5.6:1) */
  --c-red-lo:#A50D19;
  --c-ok:#34D399; --c-warn:#FBBF24; --c-bad:#FF7A85;
  --c-on-accent:#fff;

  /* همان رنگ‌ها به‌صورت RGB برای شفافیت: rgb(var(--red-rgb) / .3) */
  --red-rgb:220 21 34; --red-hi-rgb:255 69 83; --white-rgb:255 255 255; --black-rgb:0 0 0;
  --bg-rgb:5 5 6; --surface-rgb:16 16 19; --surface-2-rgb:23 23 27; --line-rgb:38 38 46;
  --text-2-rgb:169 169 180; --ok-rgb:52 211 153; --warn-rgb:251 191 36; --bad-rgb:255 122 133;

  /* نام‌های قدیمی — برای سازگاری با صفحه‌هایی که هنوز از آن‌ها استفاده می‌کنند */
  --deep:var(--c-bg); --deep2:var(--c-bg-2); --surface:var(--c-surface); --surface2:var(--c-surface-2);
  --edge:var(--c-line); --edge2:var(--c-line-strong); --ink:var(--c-text); --muted:var(--c-text-2);
  --red:var(--c-red); --red-hi:var(--c-red-hi); --red-lo:var(--c-red-lo); --silver:var(--c-silver);
  --ok:var(--c-ok); --warn:var(--c-warn); --bad:var(--c-bad);

  /* تایپوگرافی — یک خانواده، مقیاس مشخص */
  --font:Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  --fs-xs:.8125rem;   /* 13 */
  --fs-sm:.9063rem;   /* 14.5 */
  --fs-base:1rem;     /* 16 */
  --fs-md:1.125rem;   /* 18 */
  --fs-lg:1.3125rem;  /* 21 */
  --fs-xl:1.625rem;   /* 26 */
  --fs-2xl:2rem;      /* 32 */
  --fs-3xl:clamp(2.125rem, 5.2vw, 3.625rem);  /* 34 → 58 */
  --lh-tight:1.35; --lh-body:1.9;
  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:800;

  /* فاصله — شبکهٔ ۴ پیکسلی */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:7rem;
  --gutter:clamp(1rem, 4vw, 2rem);
  --wrap:70rem;

  /* گوشه‌ها، سایه، حرکت، لایه‌ها */
  --r-sm:.625rem; --r-md:.875rem; --r-lg:1.25rem; --r-pill:999px;
  --sh-1:0 1px 0 rgb(var(--white-rgb) / .04) inset, 0 18px 40px -28px rgb(var(--black-rgb) / .9);
  --sh-red:0 10px 28px -12px rgb(var(--red-rgb) / .85);
  --ease:cubic-bezier(.22,.8,.3,1);
  --dur-1:.16s; --dur-2:.28s; --dur-3:.6s;
  --z-bg:-3; --z-header:30; --z-skip:100;
  --tap:2.75rem;   /* حداقل ناحیهٔ لمس ۴۴ پیکسل */

  color-scheme:dark;
}

/* ---------- ۲) پایه ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-color:var(--c-red-lo) var(--c-bg); -webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; overflow-x:hidden; background:var(--c-bg); color:var(--c-text);
  font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-body);
  font-kerning:normal; -webkit-font-smoothing:antialiased}
::selection{background:var(--c-red); color:var(--c-on-accent)}
img{max-width:100%; height:auto}
h1,h2,h3,h4{margin:0; line-height:var(--lh-tight); font-weight:var(--fw-bold); letter-spacing:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:var(--c-red-hi); text-decoration:none; transition:color var(--dur-1) var(--ease)}
a:hover{color:var(--c-text)}
:focus-visible{outline:2px solid var(--c-red-hi); outline-offset:3px; border-radius:var(--r-sm)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); position:relative}
.num{font-variant-numeric:tabular-nums}
main.wrap{min-height:60vh}

.skip{position:absolute; inset-inline-start:var(--s-3); top:-4rem; z-index:var(--z-skip); background:var(--c-red);
  color:var(--c-on-accent); padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); transition:top var(--dur-2)}
.skip:focus{top:var(--s-3); color:var(--c-on-accent)}

/* ---------- ۳) پس‌زمینهٔ متحرک: راه‌راه مشکی + خطوط قرمز عبوری ---------- */
.bg{position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none; overflow:hidden; background:var(--c-bg)}
.bg-stripes{position:absolute; inset:-30%;
  background:repeating-linear-gradient(112deg,#0B0B0E 0 60px,var(--c-bg) 60px 120px);
  animation:stripes 60s linear infinite}
@keyframes stripes{to{transform:translate3d(111.2px,45px,0)}}
.bg-glow{position:absolute; inset:0; animation:breathe 10s ease-in-out infinite alternate;
  background:
    radial-gradient(60vw 44vw at 90% -8%, rgb(var(--red-rgb) / .24), transparent 66%),
    radial-gradient(44vw 34vw at 2% 108%, rgb(var(--red-rgb) / .12), transparent 66%)}
@keyframes breathe{from{opacity:.72}to{opacity:1}}
.bg-lines{position:absolute; inset:-20%; transform:rotate(-14deg)}
.bg-lines i{position:absolute; top:var(--t); left:0; width:var(--w,20rem); height:var(--h,2px); border-radius:3px;
  will-change:transform; opacity:.8;
  background:linear-gradient(90deg,transparent,rgb(var(--red-rgb) / .8) 78%,#FF8A94);
  box-shadow:0 0 12px rgb(var(--red-hi-rgb) / .45);
  transform:translate3d(-60vw,0,0); animation:streak var(--d,10s) linear var(--dl,0s) infinite}
.bg-lines i.k{height:var(--h,16px); opacity:1; box-shadow:none;
  background:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
@keyframes streak{to{transform:translate3d(190vw,0,0)}}
.bg-vig{position:absolute; inset:0; background:radial-gradient(ellipse 90% 80% at 50% 40%,transparent 30%,rgb(var(--bg-rgb) / .9) 100%)}

/* ---------- ۴) سربرگ و ناوبری ---------- */
header.top{position:sticky; top:0; z-index:var(--z-header); background:rgb(var(--bg-rgb) / .84);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%)}
.hline{position:absolute; inset-inline:0; bottom:0; height:1px; overflow:hidden; background:var(--c-line)}
.hline::before{content:''; position:absolute; top:0; left:0; width:30%; height:100%;
  background:linear-gradient(90deg,transparent,var(--c-red-hi),transparent);
  transform:translate3d(-100%,0,0); animation:hsweep 6s var(--ease) infinite}
@keyframes hsweep{to{transform:translate3d(430%,0,0)}}
.bar{display:flex; align-items:center; gap:var(--s-4); min-height:4.25rem; position:relative}
.brand{display:inline-flex; align-items:center; gap:var(--s-3); min-height:var(--tap); font-weight:var(--fw-black);
  font-size:var(--fs-md); color:var(--c-text)}
.brand:hover{color:var(--c-text)}
.brand img{width:2.5rem; height:2.5rem; border-radius:var(--r-sm);
  box-shadow:0 0 0 1px rgb(var(--white-rgb) / .16), 0 0 22px rgb(var(--red-rgb) / .45)}
.brand span{font-size:1.2rem; font-style:italic; letter-spacing:.02em; display:inline-block; transform:skewX(-6deg); color:var(--c-silver)}
.brand b{color:var(--c-red-hi); font-weight:var(--fw-black)}
.bar nav{margin-inline-start:auto; display:flex; gap:var(--s-1); align-items:center; font-size:var(--fs-sm)}
.bar nav > a{display:inline-flex; align-items:center; min-height:var(--tap); padding-inline:var(--s-4);
  color:var(--c-text-2); border-radius:var(--r-sm); position:relative;
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease)}
.bar nav > a::after{content:''; position:absolute; bottom:.35rem; inset-inline:var(--s-4); height:2px; background:var(--c-red);
  border-radius:2px; transform:scaleX(0); transition:transform var(--dur-2) var(--ease)}
.bar nav > a:hover,.bar nav > a[aria-current="page"]{color:var(--c-text)}
.bar nav > a:hover::after,.bar nav > a[aria-current="page"]::after{transform:scaleX(1)}
.bar nav > a.btn{color:var(--c-on-accent); padding-inline:var(--s-5)}
.bar nav > a.btn::after{display:none}
.bar nav form{margin:0}

.menu-btn{display:none; margin-inline-start:auto; width:var(--tap); height:var(--tap); border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--c-line-strong); background:rgb(var(--surface-rgb) / .9); color:var(--c-text); align-items:center; justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block; width:1.25rem; height:2px; background:currentColor;
  border-radius:2px; transition:transform var(--dur-2) var(--ease), background var(--dur-1)}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:''; position:absolute; inset-inline-start:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- ۵) دکمه‌ها ---------- */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:var(--tap); padding:var(--s-2) var(--s-5); border:1px solid transparent; border-radius:var(--r-md);
  font:inherit; font-size:var(--fs-base); font-weight:var(--fw-bold); line-height:1.5; cursor:pointer; text-align:center;
  background:var(--c-red); color:var(--c-on-accent);
  box-shadow:inset 0 1px 0 rgb(var(--white-rgb) / .22), var(--sh-red);
  transition:transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1)}
.btn:hover{color:var(--c-on-accent); background:#EC2130; transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent; border-color:var(--c-line-strong); color:var(--c-text); font-weight:var(--fw-medium); box-shadow:none}
.btn-ghost:hover{background:rgb(var(--white-rgb) / .05); border-color:var(--c-silver); color:var(--c-text)}
.btn-sm{min-height:var(--tap); padding:var(--s-1) var(--s-4); font-size:var(--fs-sm)}
.btn-block{display:flex; width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn[aria-busy="true"]{cursor:progress; opacity:.8}
.btn[aria-busy="true"]::after{content:''; width:1em; height:1em; margin-inline-start:var(--s-2); border-radius:50%;
  border:2px solid rgb(var(--white-rgb) / .35); border-top-color:var(--c-on-accent); animation:spin .7s linear infinite}
.ripple{position:absolute; border-radius:50%; background:rgb(var(--white-rgb) / .35);
  transform:scale(0); animation:rip .6s var(--ease) forwards; pointer-events:none}
@keyframes rip{to{transform:scale(3.4); opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ۶) پنل/کارت ---------- */
.card{position:relative; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--sh-1); transition:border-color var(--dur-2) var(--ease)}

/* ---------- ۷) فرم‌ها ---------- */
.field{margin-bottom:var(--s-4)}
.field label{display:block; font-size:var(--fs-sm); color:var(--c-text-2); margin-bottom:var(--s-2)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]),textarea,select){width:100%; min-height:3rem; padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  border:1px solid var(--c-line-strong); background:rgb(var(--bg-rgb) / .9); color:var(--c-text); font:inherit;
  outline:2px solid transparent; outline-offset:2px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease)}
:where(input,textarea)::placeholder{color:var(--c-text-2); opacity:.75}
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]),textarea,select):hover{border-color:var(--c-text-2)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]),textarea,select):focus{border-color:var(--c-red-hi); box-shadow:0 0 0 4px rgb(var(--red-hi-rgb) / .2); background:var(--c-bg)}
input[type=file]{width:100%; min-height:3rem; padding:var(--s-2) var(--s-3); border:1px dashed var(--c-line-strong); border-radius:var(--r-md);
  background:rgb(var(--surface-rgb) / .6); color:var(--c-text-2); font:inherit; font-size:var(--fs-sm)}
input[type=file]::file-selector-button{margin-inline-end:var(--s-3); min-height:2.25rem; padding:0 var(--s-4); border:1px solid var(--c-line-strong); border-radius:var(--r-sm);
  background:var(--c-surface-2); color:var(--c-text); font:inherit; font-size:var(--fs-sm); cursor:pointer}
input[readonly]{color:var(--c-text-2)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"],.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--c-bad)}
.field .err{display:flex; gap:var(--s-2); color:var(--c-bad); font-size:var(--fs-sm); margin-top:var(--s-2)}
.hint{color:var(--c-text-2); font-size:var(--fs-sm)}
textarea{min-height:7rem; resize:vertical}
select:where(:not([multiple])){appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--c-text-2) 50%),linear-gradient(135deg,var(--c-text-2) 50%,transparent 50%);
  background-position:1.25rem 55%,1.6rem 55%; background-size:.4rem .4rem; background-repeat:no-repeat; padding-inline-end:2.5rem}
input[type="checkbox"],input[type="radio"]{accent-color:var(--c-red)}

.choices{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.choices label{position:relative; display:flex; align-items:center; justify-content:center; min-height:var(--tap); border:1px solid var(--c-line-strong);
  border-radius:var(--r-md); padding:var(--s-3); cursor:pointer; text-align:center; transition:all var(--dur-2) var(--ease)}
.choices label:hover{border-color:var(--c-text-2); background:rgb(var(--white-rgb) / .03)}
.choices input{position:absolute; inset-block-start:0; inset-inline-start:0; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none}
.choices label:has(input:focus-visible){outline:2px solid var(--c-red-hi); outline-offset:2px}
.choices label:has(input:checked){border-color:var(--c-red-hi); background:rgb(var(--red-rgb) / .14); box-shadow:0 0 0 3px rgb(var(--red-hi-rgb) / .14)}
.choices input:checked + span{color:var(--c-text); font-weight:var(--fw-bold)}

.auth{max-width:27.5rem; margin:var(--s-8) auto}
.auth h1{font-size:var(--fs-xl); margin-bottom:var(--s-2)}
.auth .sub{color:var(--c-text-2); margin:0 0 var(--s-6); font-size:var(--fs-sm)}

/* ---------- ۸) پیام‌ها ---------- */
.alert{border-radius:var(--r-md); padding:var(--s-4) var(--s-5); margin:var(--s-5) 0; font-size:var(--fs-sm);
  border:1px solid; border-inline-start-width:3px; animation:slideIn .45s var(--ease)}
.alert-ok{background:rgb(var(--ok-rgb) / .1); border-color:rgb(var(--ok-rgb) / .34); color:#B6F5DA}
.alert-bad{background:rgb(var(--bad-rgb) / .1); border-color:rgb(var(--bad-rgb) / .34); color:#FFD6DA}
@keyframes slideIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}

/* «.rv» قبلاً هر بخش را با محو/لغزش نشان می‌داد. حالا محتوا همیشه دیده می‌شود
   (بهتر برای سئو، LCP و کاربر بدون جاوااسکریپت)؛ کلاس فقط برای سازگاری مانده. */
.rv{opacity:1; transform:none}

/* ---------- ۹) فوتر ---------- */
footer.foot{position:relative; border-top:1px solid var(--c-line); margin-top:var(--s-9); padding:var(--s-7) 0 var(--s-5);
  color:var(--c-text-2); font-size:var(--fs-sm); background:linear-gradient(180deg,transparent,rgb(var(--bg-rgb) / .92) 40%)}
footer.foot::before{content:''; position:absolute; top:-1px; inset-inline-start:0; width:10rem; height:2px;
  background:linear-gradient(90deg,var(--c-red),transparent)}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s-6)}
.fgrid p{margin:var(--s-3) 0 0; max-width:44ch}
.ft{color:var(--c-text); font-weight:var(--fw-bold); margin:0 0 var(--s-2); font-size:var(--fs-base)}
.fgrid nav a{display:flex; align-items:center; min-height:var(--tap); color:var(--c-text-2)}
.fgrid nav a:hover{color:var(--c-red-hi)}
.ig{display:inline-flex; align-items:center; gap:var(--s-2); margin-top:var(--s-4); min-height:var(--tap); padding:0 var(--s-4); border-radius:var(--r-pill);
  color:var(--c-text); border:1px solid var(--c-line-strong); background:rgb(var(--surface-rgb) / .8); font-size:var(--fs-sm);
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease)}
.ig:hover{color:var(--c-text); border-color:var(--c-silver); background:rgb(var(--white-rgb) / .05)}
.fcopy{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3);
  margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--c-line); font-size:var(--fs-xs)}
.calm-toggle{min-height:var(--tap); padding:0 var(--s-4); border-radius:var(--r-pill); border:1px solid var(--c-line-strong);
  background:transparent; color:var(--c-text-2); font:inherit; font-size:var(--fs-xs); cursor:pointer;
  transition:color var(--dur-1), border-color var(--dur-1)}
.calm-toggle:hover{color:var(--c-text); border-color:var(--c-silver)}

/* ---------- ۱۰) واکنش‌گرایی ---------- */
@media (max-width:820px){ .fgrid{grid-template-columns:1fr; gap:var(--s-5)} }
@media (max-width:760px){
  .bar{min-height:3.875rem}
  .menu-btn{display:inline-flex}
  .bar nav{position:absolute; top:100%; inset-inline:0; margin:0; display:none; flex-direction:column; align-items:stretch;
    gap:var(--s-1); padding:var(--s-3) var(--gutter) var(--s-5); font-size:var(--fs-base);
    background:var(--c-bg); border-bottom:1px solid var(--c-line-strong)}
  .bar nav.open{display:flex; animation:slideIn .28s var(--ease)}
  .bar nav > a{padding-inline:var(--s-4); color:var(--c-text)}
  .bar nav > a::after{display:none}
  .bar nav form{margin-top:var(--s-2)}
  .bar nav .btn{width:100%}
  .auth{margin:var(--s-6) auto}
  .bg-lines i:nth-child(n+8){display:none}
}

/* ---------- ۱۱) حرکت: احترام به تنظیم سیستم + کلید «توقف انیمیشن» ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rv{opacity:1; transform:none}
  .bg-lines i{transform:translate3d(30vw,0,0); opacity:.3}
  html{scroll-behavior:auto}
}
html.calm .bg *,html.calm .bg-stripes,html.calm .bg-glow,html.calm .hline::before,html.calm .cta-end::after{animation:none!important}
html.calm .bg-lines i{transform:translate3d(30vw,0,0); opacity:.3}