/*!
 * ================================================================
 *  ریفر ترک — لایهٔ حرکت (Motion Layer)  v1
 * ================================================================
 *  این فایل بعد از panel.css بارگذاری می‌شود و فقط «افزودنی» است:
 *  هیچ چیدمانی را عوض نمی‌کند، هیچ اندازه‌ای را دست نمی‌زند و همهٔ
 *  جلوه‌ها روی transform / opacity / filter / box-shadow اجرا می‌شوند
 *  تا مرورگر آن‌ها را روی لایهٔ گرافیکی ببرد و صفحه کند نشود.
 *
 *  ساختار:
 *    ۰) توکن‌ها          ۸) جدول‌ها
 *    ۱) آسمان پس‌زمینه   ۹) چیپ و نشان
 *    ۲) ورود صفحه       ۱۰) ریل و خط زمان
 *    ۳) ظهور با اسکرول  ۱۱) نمودار و میله
 *    ۴) کارت‌ها         ۱۲) پیام، توست، مدال
 *    ۵) کارت آمار      ۱۳) فرم‌ها
 *    ۶) دکمه‌ها         ۱۴) صفحات عمومی و ورود
 *    ۷) منو و نوار بالا ۱۵) موبایل / کم‌حرکت / چاپ
 * ================================================================
 */

/* ───────────────────────── ۰) توکن‌ها ───────────────────────── */
:root{
  --rx-1:.14s; --rx-2:.22s; --rx-3:.36s; --rx-4:.45s;
  --rx-e:cubic-bezier(.22,.90,.28,1);
  --rx-spring:cubic-bezier(.34,1.46,.64,1);
  --rx-soft:cubic-bezier(.4,0,.2,1);
  --rx-accent:var(--teal,#00D4B8);
  --rx-accent-2:var(--blue,#4DA3FF);
  --rx-accent-3:#8B7BFF;
  --rx-glow:0 0 0 1px rgba(0,212,184,.22), 0 18px 46px -22px rgba(0,212,184,.45);
  --rx-lift:0 22px 46px -26px rgba(0,0,0,.75);
  --rx-stagger:34ms;
}
html[data-theme="light"]{
  --rx-lift:0 20px 40px -24px rgba(19,44,66,.35);
  --rx-glow:0 0 0 1px rgba(0,150,132,.25), 0 16px 40px -22px rgba(0,150,132,.35);
}

/* پس‌زمینه: هیچ رنگی اینجا تحمیل نمی‌شود. اگر لازم باشد، motion.js
   فقط در همان حالتی که پس‌زمینهٔ body جلوی لایهٔ آسمان را می‌گیرد،
   آن را به ریشه منتقل می‌کند — تا در تم روشن هیچ‌چیز تیره نشود. */

/* ───────────────────── ۱) آسمان پس‌زمینه ───────────────────── */
.rx-sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  contain:strict; opacity:0; animation:rx-fade 1.2s var(--rx-soft) .1s forwards;
}
.rx-sky canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.85}

/* شفق‌های نرم — سه لکهٔ رنگی که خیلی آرام می‌چرخند */
.rx-orb{
  position:absolute; border-radius:50%;
  will-change:transform; opacity:.55;
}
.rx-orb.o1{width:46vw;height:46vw;min-width:340px;min-height:340px;
  background:radial-gradient(circle at 50% 50%, rgba(0,212,184,.22), rgba(0,212,184,.07) 38%, rgba(0,212,184,0) 70%);
  inset-inline-start:-8vw; top:-10vh; animation:rx-drift-a 34s ease-in-out infinite}
.rx-orb.o2{width:40vw;height:40vw;min-width:300px;min-height:300px;
  background:radial-gradient(circle at 50% 50%, rgba(77,163,255,.18), rgba(77,163,255,.06) 38%, rgba(77,163,255,0) 70%);
  inset-inline-end:-6vw; top:24vh; animation:rx-drift-b 41s ease-in-out infinite}
.rx-orb.o3{width:38vw;height:38vw;min-width:280px;min-height:280px;
  background:radial-gradient(circle at 50% 50%, rgba(139,123,255,.15), rgba(139,123,255,.05) 40%, rgba(139,123,255,0) 72%);
  inset-inline-start:26vw; bottom:-16vh; animation:rx-drift-c 47s ease-in-out infinite}
html[data-theme="light"] .rx-orb{opacity:.4}

/* شبکهٔ نقشه‌ای که آرام می‌لغزد */
.rx-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(140,160,188,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,160,188,.075) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
}

/* خطوط مسیر دریایی — نوارهای نوری که از یک لبه به لبهٔ دیگر می‌روند */
.rx-lane{
  position:absolute; height:1px; inset-inline-start:-30%; width:30%;
  background:linear-gradient(90deg, transparent, rgba(0,212,184,.55), transparent);
  animation:rx-lane 13s linear infinite;
}
.rx-lane.l2{top:38%; animation-duration:17s; animation-delay:3s;
  background:linear-gradient(90deg, transparent, rgba(77,163,255,.5), transparent)}
.rx-lane.l3{top:66%; animation-duration:21s; animation-delay:7s;
  background:linear-gradient(90deg, transparent, rgba(139,123,255,.45), transparent)}
.rx-lane.l1{top:17%}

@keyframes rx-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vw,7vh,0) scale(1.12)}
  66%{transform:translate3d(-3vw,12vh,0) scale(.94)}}
@keyframes rx-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-7vw,-6vh,0) scale(1.1)}
  70%{transform:translate3d(3vw,8vh,0) scale(.92)}}
@keyframes rx-drift-c{0%,100%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(8vw,-9vh,0) scale(.9)}}
@keyframes rx-grid-pan{to{background-position:64px 64px, 64px 64px}}
@keyframes rx-lane{0%{transform:translateX(0);opacity:0}
  8%{opacity:1} 92%{opacity:1} 100%{transform:translateX(440%);opacity:0}}

/* ───────────────────── ۲) ورود صفحه ───────────────────── */
html.rx-boot .shell > .topbar{animation:rx-drop .55s var(--rx-e) backwards}
html.rx-boot .side{animation:rx-side-in .6s var(--rx-e) backwards}
html.rx-boot .tabs{animation:rx-up-sm .5s var(--rx-e) .12s backwards}
html.rx-boot .wrap{animation:rx-fade .5s var(--rx-soft) backwards}
html.rx-boot .pubtop{animation:rx-drop .5s var(--rx-e) backwards}

@keyframes rx-drop{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
@keyframes rx-up-sm{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes rx-side-in{from{opacity:0;transform:translate3d(var(--rx-sx,-18px),0,0)}to{opacity:1;transform:none}}
html[dir="rtl"].rx-boot .side{--rx-sx:18px}

/* هنگام اسکرول هیچ انیمیشن تزئینی‌ای اجرا نمی‌شود؛ ۱۵۰ میلی‌ثانیه بعد از
   ایستادن، دوباره جان می‌گیرند. اسکرول باید همیشه اولویت اول باشد. */
html.rx-scrolling .rx-orb,
html.rx-scrolling .rx-lane,
html.rx-scrolling .rx-flake,
html.rx-scrolling .s-ic,
html.rx-scrolling .stat .ico,
html.rx-scrolling .livepill i,
html.rx-scrolling .dx-live i,
html.rx-scrolling .bell,
html.rx-scrolling .pip,
html.rx-scrolling .cnt,
html.rx-scrolling .dotr,
html.rx-scrolling .side-head .logo,
html.rx-scrolling .rail .node.now .dot,
html.rx-scrolling .chip i{animation-play-state:paused !important}
html.rx-scrolling .rx-cursor{opacity:0}

/* ─────────────────── ۳) ظهور با اسکرول ─────────────────── */
/* صفت data-rx فقط با جاوااسکریپت اضافه می‌شود؛ اگر اسکریپت نرسد،
   هیچ عنصری پنهان نمی‌ماند. */
[data-rx]{opacity:0}
[data-rx].rx-in{
  opacity:1;
  animation:rx-up var(--rx-4) var(--rx-e) backwards;
  animation-delay:calc(min(var(--rx-i,0), 8) * var(--rx-stagger));
}
[data-rx="fade"].rx-in{animation-name:rx-fade}
[data-rx="pop"].rx-in {animation-name:rx-pop}
[data-rx="row"].rx-in {animation-name:rx-row; animation-duration:.5s}
[data-rx="side"].rx-in{animation-name:rx-slide}
[data-rx="tile"].rx-in{animation-name:rx-tile}
[data-rx].rx-seen{opacity:1}

@keyframes rx-up   {from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes rx-fade {from{opacity:0}to{opacity:1}}
@keyframes rx-pop  {0%{opacity:0;transform:scale(.9) translate3d(0,14px,0)}
                    60%{opacity:1;transform:scale(1.02) translate3d(0,0,0)}
                    100%{opacity:1;transform:none}}
@keyframes rx-row  {from{opacity:0;transform:translate3d(0,10px,0) scale(.995)}to{opacity:1;transform:none}}
@keyframes rx-slide{from{opacity:0;transform:translate3d(var(--rx-dx,-22px),0,0)}to{opacity:1;transform:none}}
@keyframes rx-tile {0%{opacity:0;transform:perspective(900px) rotateX(9deg) translate3d(0,22px,0)}
                    100%{opacity:1;transform:perspective(900px) rotateX(0) translate3d(0,0,0)}}
html[dir="rtl"] [data-rx="side"]{--rx-dx:22px}

/* ───────────────────── ۴) کارت‌ها ───────────────────── */
.card,.dx-card,.op-panel,.rf-card,.nx-card,.mt-card,.mo-card,.in-card,.sh-card,
.chartcard,.box,.o-card,.scorebox,.sumbox{
  transition:transform var(--rx-3) var(--rx-e),
             box-shadow var(--rx-3) var(--rx-e),
             border-color var(--rx-3) var(--rx-e);
}
.card:hover,.dx-card:hover,.op-panel:hover,.rf-card:hover,.nx-card:hover,
.mt-card:hover,.in-card:hover,.sh-card:hover,.chartcard:hover,.o-card:hover{
  transform:translate3d(0,-3px,0);
  box-shadow:var(--rx-lift);
}
/* کارت‌های کلیک‌پذیر کمی بیشتر واکنش می‌دهند */
a.card:hover,button.card:hover,a.nx-card:hover,a.mt-card:hover,a.in-card:hover,
a.mo-card:hover,.crow:hover,.triprow:hover,.c-list a:hover{
  transform:translate3d(0,-4px,0) scale(1.006);
  box-shadow:var(--rx-lift), var(--rx-glow);
}
.card:active,a.card:active,button.card:active{transform:translate3d(0,-1px,0) scale(.997)}

/* هالهٔ نرمی که پشتِ محتوا نشانگر را دنبال می‌کند (هیچ عنصری را نمی‌پوشاند) */
.rx-cursor{
  position:fixed; top:0; inset-inline-start:0; width:520px; height:520px;
  z-index:-1; pointer-events:none; border-radius:50%; opacity:0;
  transition:opacity .6s var(--rx-soft);
  background:radial-gradient(circle, rgba(0,212,184,.14), rgba(0,212,184,.045) 42%, transparent 70%);
}
.rx-cursor.on{opacity:1}
html[data-theme="light"] .rx-cursor{
  background:radial-gradient(circle, rgba(0,150,132,.13), rgba(77,163,255,.05) 45%, transparent 70%);
}

/* ─────────────────── ۵) کارت‌های آمار ─────────────────── */
.dx-kpi,.stat,.kpi,.nx-stat,.op-stat,
.in-sum,.mo-sum,.mt-sum,.op-sum,.nx-sum,.dxm-stat{
  transition:transform var(--rx-2) var(--rx-spring),
             box-shadow var(--rx-2) var(--rx-e),
             border-color var(--rx-2) var(--rx-e);
}
.dx-kpi:hover,.stat:hover,.kpi:hover,.nx-stat:hover,.op-stat:hover,
.in-sum:hover,.mo-sum:hover,.mt-sum:hover{
  transform:translate3d(0,-4px,0);
  box-shadow:var(--rx-lift), var(--rx-glow);
}
.dx-kpi:active,.in-sum:active,.mo-sum:active,.mt-sum:active,.nx-stat:active{
  transform:translate3d(0,-1px,0) scale(.985);
}
/* آیکن کارت خلاصه: شناور، و روی هوور یک تکان کوچک */
.s-ic,.stat .ico,.mt-ic,.in-ic,.nx-ic,.p-ic,.f-ic,.r-ic{
  display:inline-block;
  animation:rx-float 5.5s var(--rx-soft) infinite;
  animation-delay:calc(var(--rx-i,0) * 240ms);
  transition:transform var(--rx-2) var(--rx-spring), filter var(--rx-2) var(--rx-e);
}
.in-sum:hover .s-ic,.mo-sum:hover .s-ic,.mt-sum:hover .s-ic,
.op-stat:hover .s-ic,.stat:hover .ico{
  transform:scale(1.18) rotate(-6deg);
  filter:drop-shadow(0 6px 14px rgba(0,212,184,.4));
}
/* عدد شمارنده هنگام تغییر */
.rx-tick{animation:rx-tick .45s var(--rx-spring)}
@keyframes rx-tick{0%{transform:translateY(0)}35%{transform:translateY(-4px) scale(1.06)}100%{transform:none}}
@keyframes rx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* کارت هشداردار: نبض ملایم */
.dx-kpi.t-bad,.nx-stat.t-bad,.in-sum.t-bad,.mo-sum.t-bad,.mt-sum.t-bad{
  animation:rx-pulse-bad 3.4s ease-in-out infinite;
}
@keyframes rx-pulse-bad{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  50%{box-shadow:0 0 0 4px rgba(239,68,68,.10)}
}

/* ───────────────────── ۶) دکمه‌ها ───────────────────── */
.btn,.rf-btn,.op-btn,.nx-btn,.mt-btn,.in-btn,.mo-btn,.dx-btn,.ghost,.tiny,.cbtn{
  position:relative;
  transition:transform var(--rx-1) var(--rx-spring),
             box-shadow var(--rx-2) var(--rx-e),
             filter var(--rx-2) var(--rx-e),
             border-color var(--rx-2) var(--rx-e);
}
.btn:hover,.rf-btn:hover,.op-btn:hover,.nx-btn:hover,.mt-btn:hover,
.in-btn:hover,.mo-btn:hover,.dx-btn:hover{
  transform:translate3d(0,-2px,0);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.7);
  filter:brightness(1.06);
}
.btn:active,.rf-btn:active,.op-btn:active,.nx-btn:active,.mt-btn:active,
.in-btn:active,.mo-btn:active,.dx-btn:active,.ghost:active,.cbtn:active{
  transform:translate3d(0,0,0) scale(.972);
}
.ghost:hover{transform:translate3d(0,-1px,0) scale(1.06)}
.btn.p:hover,.btn.primary:hover{box-shadow:0 14px 30px -14px rgba(0,212,184,.65)}

/* موج لمس — عنصرش را motion.js می‌سازد */
.rx-ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0); animation:rx-ripple .62s var(--rx-soft) forwards;
}
@keyframes rx-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* حالت «در حال ارسال» روی دکمهٔ فرم */
.rx-busy{pointer-events:none; opacity:.75}
.rx-busy::after{
  content:""; position:absolute; inset-inline-end:8px; top:50%;
  width:12px; height:12px; margin-top:-6px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:rx-spin .7s linear infinite;
}
@keyframes rx-spin{to{transform:rotate(360deg)}}

/* ────────────────── ۷) منو و نوار بالا ────────────────── */
.nav-item{transition:transform var(--rx-2) var(--rx-e), background-color var(--rx-2) var(--rx-e),
                     box-shadow var(--rx-2) var(--rx-e), color var(--rx-2) var(--rx-e)}
.nav-item:hover{transform:translateX(var(--rx-nx,4px))}
html[dir="rtl"] .nav-item:hover{--rx-nx:-4px}
.nav-item .ic{display:inline-block; transition:transform var(--rx-2) var(--rx-spring)}
.nav-item:hover .ic{transform:scale(1.22) rotate(-8deg)}
.nav-item.on{box-shadow:inset 0 0 0 1px rgba(0,212,184,.16)}
.nav-item.on .ic{animation:rx-bob 3.6s ease-in-out infinite}
@keyframes rx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) scale(1.06)}}

html.rx-boot .side-scroll .nav-item{animation:rx-nav-in .45s var(--rx-e) backwards;
  animation-delay:calc(var(--rx-i,0) * 26ms + 120ms)}
@keyframes rx-nav-in{from{opacity:0;transform:translate3d(var(--rx-dx,-10px),0,0)}to{opacity:1;transform:none}}
html[dir="rtl"].rx-boot .side-scroll .nav-item{--rx-dx:10px}

.nav-grp .nav-lbl{transition:letter-spacing var(--rx-3) var(--rx-e)}
.nav-grp:hover .nav-lbl{letter-spacing:.14em}

/* شمارنده‌های کنار منو */
.pip,.cnt,.dotr{transition:transform var(--rx-2) var(--rx-spring)}
.nav-item:hover .pip{transform:scale(1.12)}
.pip:not(.q),.cnt,.dotr{animation:rx-pip 2.6s ease-in-out infinite}
@keyframes rx-pip{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}
  55%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}

/* لوگو — یخِ نفس‌کش */
.side-head .logo,.pubtop .logo,.login-mark{
  display:inline-block; animation:rx-frost 6s ease-in-out infinite;
  transition:transform var(--rx-3) var(--rx-spring);
}
.side-head:hover .logo,.pubtop:hover .logo{transform:rotate(120deg) scale(1.1)}
@keyframes rx-frost{
  0%,100%{transform:rotate(0) scale(1); filter:drop-shadow(0 0 0 rgba(0,212,184,0))}
  50%{transform:rotate(12deg) scale(1.06); filter:drop-shadow(0 0 10px rgba(0,212,184,.55))}
}

/* نوار بالا: هنگام اسکرول کمی جمع و شیشه‌ای‌تر می‌شود */
.topbar{transition:box-shadow var(--rx-3) var(--rx-e), backdrop-filter var(--rx-3) var(--rx-e)}
html.rx-scrolled .topbar{box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.ptitle h1{transition:transform var(--rx-3) var(--rx-e)}
html.rx-boot .ptitle h1{animation:rx-slide .5s var(--rx-e) .08s backwards}
html.rx-boot .ptitle p{animation:rx-slide .5s var(--rx-e) .16s backwards}

/* نقطهٔ زندهٔ تاریخ / وضعیت */
.livepill i,.dx-live i,.nx-live i,.lane-live i{animation:rx-beat 2.2s ease-in-out infinite}
@keyframes rx-beat{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,212,184,.6)}
  50%{transform:scale(1.25);box-shadow:0 0 0 5px rgba(0,212,184,0)}
}

/* زنگ اعلان وقتی خوانده‌نشده دارد */
.bell:has(.cnt:not([hidden])){animation:rx-bell 5s ease-in-out infinite}
@keyframes rx-bell{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(13deg)} 90%{transform:rotate(-11deg)}
  92%{transform:rotate(8deg)}  94%{transform:rotate(-6deg)} 96%{transform:rotate(3deg)}
}
.notifpop:not([hidden]){animation:rx-pop-menu .28s var(--rx-spring) backwards; transform-origin:top center}
@keyframes rx-pop-menu{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}

/* منوی موبایل و پردهٔ پشتش */
.scrim{transition:opacity var(--rx-3) var(--rx-soft)}
.tabs a{transition:transform var(--rx-2) var(--rx-spring), color var(--rx-2) var(--rx-e)}
.tabs a:active{transform:scale(.9)}
.tabs a.on .ic{animation:rx-bob 3.2s ease-in-out infinite}

/* ───────────────────── ۸) جدول‌ها ───────────────────── */
.tbl tbody tr,.op-table tbody tr,.rf-table tbody tr,.dx-table tbody tr,
.mt-table tbody tr,.in-table tbody tr,.mo-table tbody tr,.nx-row,.op-row,
.crow,.triprow,.d-row,.a-row,.gf-row,.v-row,.r-row,.exc-row{
  transition:transform var(--rx-2) var(--rx-e), background-color var(--rx-2) var(--rx-e),
             box-shadow var(--rx-2) var(--rx-e);
}
.tbl tbody tr:hover,.op-table tbody tr:hover,.rf-table tbody tr:hover,
.dx-table tbody tr:hover,.mt-table tbody tr:hover,.in-table tbody tr:hover,
.mo-table tbody tr:hover{
  transform:translateX(var(--rx-tx,3px));
  box-shadow:inset 3px 0 0 0 var(--rx-accent);
}
html[dir="rtl"] .tbl tbody tr:hover,html[dir="rtl"] .op-table tbody tr:hover,
html[dir="rtl"] .rf-table tbody tr:hover,html[dir="rtl"] .dx-table tbody tr:hover,
html[dir="rtl"] .mt-table tbody tr:hover,html[dir="rtl"] .in-table tbody tr:hover,
html[dir="rtl"] .mo-table tbody tr:hover{
  --rx-tx:-3px; box-shadow:inset -3px 0 0 0 var(--rx-accent);
}
.nx-row:hover,.op-row:hover,.crow:hover,.triprow:hover{transform:translateX(var(--rx-tx,3px))}
html[dir="rtl"] .nx-row:hover,html[dir="rtl"] .op-row:hover,
html[dir="rtl"] .crow:hover,html[dir="rtl"] .triprow:hover{--rx-tx:-3px}

/* ردیف تازه‌رسیده / خوانده‌نشده */
.is-unread{animation:rx-fresh 2.8s ease-in-out infinite}
@keyframes rx-fresh{0%,100%{box-shadow:inset 2px 0 0 0 rgba(0,212,184,.55)}
  50%{box-shadow:inset 2px 0 0 0 rgba(0,212,184,.15)}}

/* ─────────────── ۹) چیپ، نشان، وضعیت ─────────────── */
.chip,.rf-pill,.pill,.badge,.rf-badge,.dx-badge,.nx-chip,.mt-kchip,
.in-chip,.mo-chip,.op-chip,.dx-fchip,.dxm-chip{
  transition:transform var(--rx-2) var(--rx-spring), box-shadow var(--rx-2) var(--rx-e);
}
.chip:hover,.rf-pill:hover,.pill:hover,.rf-badge:hover,.nx-chip:hover,
.in-chip:hover,.mo-chip:hover,.op-chip:hover{transform:translateY(-1px) scale(1.05)}

/* نقطهٔ داخل چیپ وضعیت نبض دارد */
.chip i,.s-ok i,.s-sea i{animation:rx-beat 2.6s ease-in-out infinite}
.rf-pill.s-bad,.chip.c-bad,.pill.bad,.s-bad{animation:rx-warn 2.4s ease-in-out infinite}
@keyframes rx-warn{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}

/* نشان کشور: پرچم روی هوور تکان می‌خورد */
.rf-badge .fl{display:inline-block; transition:transform var(--rx-2) var(--rx-spring)}
.rf-badge:hover .fl{transform:scale(1.25) rotate(-8deg)}
.rf-badge.is-sea .fl{animation:rx-wave 3.4s ease-in-out infinite}
@keyframes rx-wave{0%,100%{transform:translateY(0) rotate(0)}
  33%{transform:translateY(-2px) rotate(-7deg)} 66%{transform:translateY(1px) rotate(6deg)}}

/* ─────────────── ۱۰) ریل و خط زمان ─────────────── */
.rail .node .dot{transition:transform var(--rx-2) var(--rx-spring), box-shadow var(--rx-2) var(--rx-e)}
.rail .node:hover .dot{transform:scale(1.35)}
.rail .node.now .dot{animation:rx-node 2.4s ease-in-out infinite}
@keyframes rx-node{
  0%,100%{box-shadow:0 0 0 0 rgba(0,212,184,.55); transform:scale(1)}
  55%{box-shadow:0 0 0 9px rgba(0,212,184,0); transform:scale(1.12)}
}
.rail .node.done .dot{animation:rx-in-dot .5s var(--rx-spring) backwards;
  animation-delay:calc(var(--rx-i,0) * 70ms)}
@keyframes rx-in-dot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.rail .node .lb,.rail .node .dt{transition:color var(--rx-2) var(--rx-e)}
.rail .node.now .lb{animation:rx-glow-tx 3s ease-in-out infinite}
@keyframes rx-glow-tx{0%,100%{text-shadow:none}50%{text-shadow:0 0 12px rgba(0,212,184,.6)}}

/* راهروی داشبورد و گره‌هایش */
.dx-node,.dx-road,.corridor .node{transition:transform var(--rx-2) var(--rx-e)}
.dx-node:hover{transform:translateY(-3px) scale(1.02)}
.boat,.dx-corridor .boat{animation:rx-sail 6.5s ease-in-out infinite}
@keyframes rx-sail{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}

/* ─────────────── ۱۱) نمودارها و میله‌ها ─────────────── */
/* رشد میله‌ها: فقط مقیاس افقی، پس عرض واقعی دست‌نخورده می‌ماند */
.rx-grow{transform-origin:var(--rx-o,left center); animation:rx-grow .85s var(--rx-e) backwards;
  animation-delay:calc(min(var(--rx-i,0), 12) * 60ms)}
html[dir="rtl"] .rx-grow{--rx-o:right center}
@keyframes rx-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.rx-grow-y{transform-origin:bottom center; animation:rx-grow-y .8s var(--rx-e) backwards;
  animation-delay:calc(var(--rx-i,0) * 55ms)}
@keyframes rx-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* دونات و حلقه‌ها: قلم با تأخیر کشیده می‌شود (طول را js می‌دهد) */
.rx-draw{animation:rx-draw 1.15s var(--rx-e) backwards;
  animation-delay:calc(var(--rx-i,0) * 90ms)}
@keyframes rx-draw{from{stroke-dashoffset:var(--rx-d0)}to{stroke-dashoffset:var(--rx-d1)}}

.rxd-donut svg,.dx-donut svg,.c-gauge svg,.mt-ring svg{animation:rx-ring-in .9s var(--rx-e) backwards}
@keyframes rx-ring-in{
  from{opacity:0; transform:rotate(-38deg) scale(.86)}
  to{opacity:1; transform:none}
}
.dx-donut{transition:transform var(--rx-3) var(--rx-spring), filter var(--rx-3) var(--rx-e)}
.dx-donut:hover{transform:scale(1.03); filter:drop-shadow(0 10px 24px rgba(0,212,184,.3))}
.dx-donut .arc{transition:opacity var(--rx-2) var(--rx-e), stroke-width var(--rx-2) var(--rx-e)}
.dx-donut:hover .arc{opacity:.55}
.dx-donut .arc:hover{opacity:1; stroke-width:5.4}
.dx-legend button{transition:transform var(--rx-2) var(--rx-e), background-color var(--rx-2) var(--rx-e)}
.dx-legend button:hover{transform:translateX(var(--rx-tx,3px))}
html[dir="rtl"] .dx-legend button:hover{--rx-tx:-3px}
.dx-legend i{transition:transform var(--rx-2) var(--rx-spring)}
.dx-legend button:hover i{transform:scale(1.5)}

/* گیج و ترمومتر */
.c-gauge,.mt-gauge,.thermo,.ring,.mt-ring{transition:transform var(--rx-3) var(--rx-spring)}
.c-gauge:hover,.mt-gauge:hover,.thermo:hover{transform:scale(1.04)}
.thermo .lines,.temp-chart .line{animation:rx-fade 1s var(--rx-soft) backwards}

/* ─────────── ۱۲) پیام، توست، مدال، خالی ─────────── */
.flash{animation:rx-flash .55s var(--rx-spring) backwards}
@keyframes rx-flash{from{opacity:0;transform:translate3d(0,-12px,0) scale(.98)}to{opacity:1;transform:none}}
.flash.ok{animation:rx-flash .55s var(--rx-spring) backwards, rx-ok-glow 2.4s ease-in-out 1}
@keyframes rx-ok-glow{0%,100%{box-shadow:0 0 0 0 rgba(0,212,184,0)}
  35%{box-shadow:0 0 0 3px rgba(0,212,184,.16)}}
.flash.bad{animation:rx-shake .5s var(--rx-soft) backwards}
@keyframes rx-shake{
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)} 60%{transform:translateX(3px)} 80%{transform:translateX(-1px)}
}

.toasts > *{animation:rx-toast .45s var(--rx-spring) backwards}
@keyframes rx-toast{from{opacity:0;transform:translate3d(0,20px,0) scale(.94)}to{opacity:1;transform:none}}

/* مدال‌ها — پرده و پنل */
.dxm-scrim,.in-lightbox,.rx-modal-scrim,.rf-scrim{animation:rx-fade .25s var(--rx-soft) backwards}
.dxm-panel,.dxm-inner,.in-panel,.mt-panel,.nx-pop,.mt-formwrap,.rf-modal{
  animation:rx-modal .38s var(--rx-spring) backwards;
}
@keyframes rx-modal{from{opacity:0;transform:translate3d(0,26px,0) scale(.965)}to{opacity:1;transform:none}}
.dxm-load,.rx-loading{animation:rx-pulse-soft 1.1s ease-in-out infinite}
@keyframes rx-pulse-soft{0%,100%{opacity:.45}50%{opacity:1}}

/* حالت خالی — آیکن آرام شناور است */
.empty .e,.dx-empty::before,.op-empty .e,.in-blank .e,.mt-blank .e,.mo-blank .e,.nx-blank .e{
  display:inline-block; animation:rx-float-lg 4.6s ease-in-out infinite;
}
@keyframes rx-float-lg{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-9px) rotate(4deg)}}

/* اسکلت بارگذاری */
.rx-skel{position:relative; overflow:hidden; border-radius:10px;
  background:linear-gradient(90deg, rgba(140,160,188,.08), rgba(140,160,188,.16), rgba(140,160,188,.08));
  background-size:200% 100%; animation:rx-skel 1.3s linear infinite}
@keyframes rx-skel{to{background-position:-200% 0}}

/* ───────────────────── ۱۳) فرم‌ها ───────────────────── */
input,select,textarea{transition:box-shadow var(--rx-2) var(--rx-e),
  border-color var(--rx-2) var(--rx-e), transform var(--rx-2) var(--rx-e)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(0,212,184,.16)}
.fld,.rf-field,.f-field,.op-field,.in-field,.mt-field,.mo-field,.nx-field{
  transition:transform var(--rx-2) var(--rx-e)}
.fld:focus-within,.rf-field:focus-within,.f-field:focus-within,.op-field:focus-within{
  transform:translateY(-1px)}
.fld label,.rf-field label,.f-field label{transition:color var(--rx-2) var(--rx-e),
  transform var(--rx-2) var(--rx-e)}
.fld:focus-within label,.rf-field:focus-within label,.f-field:focus-within label{
  color:var(--rx-accent); transform:translateX(var(--rx-lx,2px))}
html[dir="rtl"] .fld:focus-within label{--rx-lx:-2px}
.f-err,.invalid{animation:rx-shake .45s var(--rx-soft) backwards}
.switch,.mt-switch,.nx-switch,.mo-toggle,.mt-toggle{transition:transform var(--rx-2) var(--rx-spring)}
.switch:active,.mt-switch:active{transform:scale(.94)}
.searchbox input:focus,.op-search input:focus,.mt-search input:focus,
.in-search input:focus,.nx-search input:focus{box-shadow:0 0 0 3px rgba(0,212,184,.18)}

/* تب‌ها */
.op-tab,.mt-tab,.in-tab,.mo-tab,.nx-tab,.dxm-tab,.notiftabs button,.seg,.sw{
  transition:transform var(--rx-2) var(--rx-spring), color var(--rx-2) var(--rx-e),
             background-color var(--rx-2) var(--rx-e)}
.op-tab:hover,.mt-tab:hover,.in-tab:hover,.mo-tab:hover,.nx-tab:hover{transform:translateY(-2px)}
.op-tab.is-on,.mt-tab.is-on,.in-tab.is-on,.mo-tab.is-on,.nx-tab.is-on,.notiftabs button.on{
  animation:rx-pop-tab .32s var(--rx-spring)}
@keyframes rx-pop-tab{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}

/* ─────────── ۱۴) صفحات عمومی و ورود ─────────── */
.login-wrap{position:relative}
.login-card{animation:rx-login .8s var(--rx-spring) backwards; position:relative}
@keyframes rx-login{from{opacity:0;transform:translate3d(0,34px,0) scale(.95)}to{opacity:1;transform:none}}
.login-card .fld{animation:rx-up .55s var(--rx-e) backwards;
  animation-delay:calc(var(--rx-i,0) * 90ms + .18s)}
.login-card h1{animation:rx-up .6s var(--rx-e) .1s backwards}
.login-card .lead{animation:rx-up .6s var(--rx-e) .18s backwards}
.login-card .btn{animation:rx-up .6s var(--rx-e) .42s backwards}
.login-card .foot{animation:rx-fade .8s var(--rx-soft) .6s backwards}
.login-mark{font-size:1em; animation:rx-mark 7s ease-in-out infinite}
@keyframes rx-mark{
  0%,100%{transform:rotate(0) scale(1); filter:drop-shadow(0 0 8px rgba(0,212,184,.35))}
  50%{transform:rotate(180deg) scale(1.12); filter:drop-shadow(0 0 22px rgba(0,212,184,.75))}
}
.pubtop{position:relative}
.pub .card{animation:rx-up .6s var(--rx-e) backwards}
.card.rise{animation:rx-pop .7s var(--rx-spring) backwards}

/* ─────────── ۱۵) ابزارهای شناور (ساختهٔ js) ─────────── */
/* نوار پیشرفت بالای صفحه */
.rx-bar{position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0;
  z-index:99999; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,var(--rx-accent),var(--rx-accent-2),var(--rx-accent-3));
  box-shadow:0 0 14px rgba(0,212,184,.7); transition:width .25s var(--rx-soft), opacity .3s}
.rx-bar.on{opacity:1}

/* نوار درصد اسکرول */
.rx-scroll{position:fixed; inset-block-start:0; inset-inline-start:0; height:2px; width:100%;
  z-index:99998; pointer-events:none; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(0,212,184,.85), rgba(77,163,255,.85));
  opacity:0; transition:opacity .3s; will-change:transform}
html[dir="rtl"] .rx-scroll{transform-origin:right center}
html.rx-scrolled .rx-scroll{opacity:1}

/* دکمهٔ بازگشت به بالا */
.rx-fab{position:fixed; inset-block-end:calc(18px + env(safe-area-inset-bottom));
  inset-inline-end:18px; z-index:60; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:17px; line-height:1;
  color:var(--tx,#E6EDF7); border:1px solid var(--line,#1E2A3D);
  background:var(--card,#101A2B);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8);
  opacity:0; transform:translateY(16px) scale(.85); pointer-events:none;
  transition:opacity var(--rx-3) var(--rx-e), transform var(--rx-3) var(--rx-spring),
             box-shadow var(--rx-2) var(--rx-e)}
.rx-fab.on{opacity:1; transform:none; pointer-events:auto}
.rx-fab:hover{transform:translateY(-3px) scale(1.06); box-shadow:var(--rx-glow), 0 16px 34px -18px rgba(0,0,0,.9)}
.rx-fab:active{transform:scale(.92)}
.rx-fab span{display:block; animation:rx-bob 2.6s ease-in-out infinite}

/* پردهٔ گذار بین صفحه‌ها */
.rx-veil{position:fixed; inset:0; z-index:99990; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,212,184,.07), transparent 62%);
  transition:opacity .3s var(--rx-soft)}
.rx-veil.on{opacity:1}

/* دانه‌های برفِ صفحات عمومی (سبک‌تر از بوم) */
.rx-flake{position:fixed; top:-14px; z-index:-1; pointer-events:none; color:rgba(255,255,255,.5);
  animation:rx-fall linear infinite; font-size:12px}
html[data-theme="light"] .rx-flake{color:rgba(0,120,140,.35)}
@keyframes rx-fall{
  0%{transform:translate3d(0,-5vh,0) rotate(0); opacity:0}
  10%{opacity:1} 90%{opacity:.9}
  100%{transform:translate3d(var(--rx-drift,20px),105vh,0) rotate(360deg); opacity:0}
}

/* ─────────── ۱۶) موبایل، کم‌حرکت، چاپ ─────────── */
@media (max-width: 780px){
  :root{--rx-stagger:30ms}
  .rx-orb{opacity:.4}
  .rx-orb.o3{display:none}
  .rx-lane.l3{display:none}
  .rx-cursor{display:none}
  .rx-grid{background-size:48px 48px}
  .rx-fab{inset-block-end:calc(74px + env(safe-area-inset-bottom)); width:40px; height:40px}
  /* روی لمس، هوورِ چسبنده مزاحم است */
  .card:hover,.dx-card:hover,.op-panel:hover,.rf-card:hover,.nx-card:hover,
  .mt-card:hover,.in-card:hover,.dx-kpi:hover,.stat:hover,.in-sum:hover,
  .mo-sum:hover,.mt-sum:hover,.nx-stat:hover{transform:none; box-shadow:none}
  .tbl tbody tr:hover,.op-table tbody tr:hover,.rf-table tbody tr:hover,
  .dx-table tbody tr:hover,.mt-table tbody tr:hover,.in-table tbody tr:hover{transform:none}
  [data-rx].rx-in{animation-duration:.42s}
}
@media (hover: none){
  .rx-glow{display:none}
}
@media (prefers-reduced-motion: reduce){
  .rx-sky,.rx-flake{display:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-rx]{opacity:1 !important}
}
@media print{
  .rx-sky,.rx-fab,.rx-bar,.rx-scroll,.rx-veil,.rx-flake{display:none !important}
  *,*::before,*::after{animation:none !important; transition:none !important}
  [data-rx]{opacity:1 !important; transform:none !important}
}

/* ─────────── ۱۷) براقی‌های ریز، در همهٔ صفحه‌ها ─────────── */
/* خط کنار عنوان بخش‌ها از صفر باز می‌شود */
.sec .ln{transform-origin:var(--rx-o,left center); animation:rx-grow 1s var(--rx-e) .12s backwards}
html[dir="rtl"] .sec .ln{--rx-o:right center}

/* بازشدن جعبه‌های تاشو (فیلترها، فرم‌های پنهان) */
.dx-filterwrap:not([hidden]),.rf-filters:not([hidden]),.mt-formwrap:not([hidden]),
.op-tools:not([hidden]),.nx-prefs:not([hidden]),.in-controls:not([hidden]){
  animation:rx-fold .34s var(--rx-e) backwards;
}
@keyframes rx-fold{from{opacity:0;transform:translate3d(0,-10px,0) scale(.99)}to{opacity:1;transform:none}}

/* ردیف کلید-مقدار: هوور آرام */
.kv,.set-kv,.rf-kv,.d-hd,.mo-row,.sp-row{transition:background-color var(--rx-2) var(--rx-e),
  transform var(--rx-2) var(--rx-e)}
.kv:hover,.set-kv:hover,.rf-kv:hover{transform:translateX(var(--rx-kx,2px))}
html[dir="rtl"] .kv:hover,html[dir="rtl"] .set-kv:hover,html[dir="rtl"] .rf-kv:hover{--rx-kx:-2px}

/* پیکان‌ها و پیوندهای «برو» */
.go,.arrow,.next,.prev,.back,.dx-link,.op-link,.nx-link,.mt-link,.in-link,.dxm-link{
  transition:transform var(--rx-2) var(--rx-spring), opacity var(--rx-2) var(--rx-e)}
.go:hover,.arrow:hover,.dx-link:hover,.op-link:hover,.nx-link:hover,
.mt-link:hover,.in-link:hover,.back:hover{transform:translateX(var(--rx-ax,4px))}
html[dir="rtl"] .go:hover,html[dir="rtl"] .arrow:hover,html[dir="rtl"] .dx-link:hover,
html[dir="rtl"] .op-link:hover,html[dir="rtl"] .nx-link:hover,
html[dir="rtl"] .mt-link:hover,html[dir="rtl"] .in-link:hover,
html[dir="rtl"] .back:hover{--rx-ax:-4px}

/* آواتار کاربر */
.av,.mo-av{transition:transform var(--rx-2) var(--rx-spring), box-shadow var(--rx-2) var(--rx-e)}
.ucard:hover .av{transform:scale(1.09) rotate(-5deg); box-shadow:0 0 0 3px rgba(0,212,184,.18)}

/* صفحه‌بندی */
.rf-pager a,.op-pager a,.nx-pager a,.mt-pager a,.in-pager a,.rt a{
  transition:transform var(--rx-2) var(--rx-spring)}
.rf-pager a:hover,.op-pager a:hover,.nx-pager a:hover,.mt-pager a:hover,
.mt-pager a:hover,.in-pager a:hover,.rt a:hover{transform:translateY(-2px) scale(1.05)}

/* گام‌های جاری در فرم‌ها و فرایندها */
.step.now,.rf-step.now,.mo-step.now,.node.now{animation:rx-now 2.6s ease-in-out infinite}
@keyframes rx-now{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}

/* نقشه: جعبه‌های روی نقشه نرم می‌آیند */
.mapbar,.maplayers,.mapfilters,.mapsearch,.mapwarn{animation:rx-fold .4s var(--rx-e) backwards}

/* هرچیزی که تازه ذخیره شده */
.rx-flash-new{animation:rx-newrow 1.6s var(--rx-soft) 1}
@keyframes rx-newrow{0%{background-color:rgba(0,212,184,.18)}100%{background-color:transparent}}