/* ============================================================
   Xtrim Animation Library
   استفاده: در المنتور → Advanced → CSS Classes کلاس را بنویسید.
   ============================================================ */

/* ---------- انیمیشن‌های پایه ---------- */
@keyframes xtrim-float{0%{transform:translateY(0px)}50%{transform:translateY(-15px)}100%{transform:translateY(0px)}}
.xtrim-animate-float{animation:xtrim-float 3s ease-in-out infinite}

@keyframes xtrim-float-horizontal{0%{transform:translateX(0px)}50%{transform:translateX(-15px)}100%{transform:translateX(0px)}}
.xtrim-animate-float-horizontal{animation:xtrim-float-horizontal 3s ease-in-out infinite}

@keyframes xtrim-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.xtrim-animate-shake{animation:xtrim-shake 0.5s ease-in-out infinite}

@keyframes xtrim-pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.xtrim-animate-pulse{animation:xtrim-pulse 2s ease-in-out infinite}

@keyframes xtrim-blink{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}
.xtrim-animate-blink{animation:xtrim-blink 1.5s ease-in-out infinite}

@keyframes xtrim-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.xtrim-animate-spin{animation:xtrim-spin 2s linear infinite}

@keyframes xtrim-spin-reverse{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
.xtrim-animate-spin-reverse{animation:xtrim-spin-reverse 2s linear infinite}

@keyframes xtrim-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.xtrim-animate-bounce{animation:xtrim-bounce 1s ease-in-out infinite}

@keyframes xtrim-fade-in{from{opacity:0}to{opacity:1}}
.xtrim-animate-fade-in{animation:xtrim-fade-in 1s ease forwards}

@keyframes xtrim-fade-out{from{opacity:1}to{opacity:0}}
.xtrim-animate-fade-out{animation:xtrim-fade-out 1s ease forwards}

@keyframes xtrim-slide-in-left{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
.xtrim-animate-slide-in-left{animation:xtrim-slide-in-left 0.6s ease-out forwards}

@keyframes xtrim-slide-in-right{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.xtrim-animate-slide-in-right{animation:xtrim-slide-in-right 0.6s ease-out forwards}

@keyframes xtrim-slide-in-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.xtrim-animate-slide-in-up{animation:xtrim-slide-in-up 0.6s ease-out forwards}

@keyframes xtrim-slide-in-down{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.xtrim-animate-slide-in-down{animation:xtrim-slide-in-down 0.6s ease-out forwards}

@keyframes xtrim-zoom-in{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}
.xtrim-animate-zoom-in{animation:xtrim-zoom-in 0.5s ease-out forwards}

@keyframes xtrim-zoom-out{from{transform:scale(1.2);opacity:0}to{transform:scale(1);opacity:1}}
.xtrim-animate-zoom-out{animation:xtrim-zoom-out 0.5s ease-out forwards}

@keyframes xtrim-swing{0%,100%{transform:rotate(0deg)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}
.xtrim-animate-swing{animation:xtrim-swing 0.8s ease-in-out infinite;transform-origin:top center}

@keyframes xtrim-wobble{0%,100%{transform:translateX(0%)}15%{transform:translateX(-25%)}30%{transform:translateX(20%)}45%{transform:translateX(-15%)}60%{transform:translateX(10%)}75%{transform:translateX(-5%)}}
.xtrim-animate-wobble{animation:xtrim-wobble 1s ease-in-out infinite}

@keyframes xtrim-color-cycle{0%{color:#4361ee}33%{color:#f12711}66%{color:#10b981}100%{color:#4361ee}}
.xtrim-animate-color-cycle{animation:xtrim-color-cycle 4s ease infinite}

@keyframes xtrim-glow{0%{box-shadow:0 0 0px 0px rgba(67,97,238,0.3)}50%{box-shadow:0 0 20px 8px rgba(67,97,238,0.5)}100%{box-shadow:0 0 0px 0px rgba(67,97,238,0.3)}}
.xtrim-animate-glow{animation:xtrim-glow 2s ease-in-out infinite}

/* ---------- کلاس‌های کمکی ---------- */
.xtrim-animate-pause-on-hover:hover{animation-play-state:paused}
.xtrim-animate-fast{animation-duration:0.5s !important}
.xtrim-animate-slow{animation-duration:4s !important}
.xtrim-animate-delay-1{animation-delay:0.5s !important}
.xtrim-animate-delay-2{animation-delay:1s !important}
.xtrim-animate-once{animation-iteration-count:1 !important}
.xtrim-animate-alternate{animation-direction:alternate !important}
.xtrim-animate-running{animation-play-state:running !important}
.xtrim-animate-paused{animation-play-state:paused !important}

/* ---------- فیلتر ---------- */
.xtrim-gray img{filter:grayscale(100%);transition:filter 0.4s cubic-bezier(0.2,0.9,0.4,1.1)}
.xtrim-gray img:hover{filter:grayscale(0%)}

/* ---------- بلور ---------- */
.xtrim-blure-40{backdrop-filter:blur(6.9px) !important;-webkit-backdrop-filter:blur(6.9px) !important}

body:not(.dark-mode){--xtrim-blur-bg:rgba(255,255,255,0.4)}
body.dark-mode{--xtrim-blur-bg:rgba(15,23,42,0.5)}

.xtrim-blur-10{background-color:var(--xtrim-blur-bg);backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important}
.xtrim-blur-20{background-color:var(--xtrim-blur-bg);backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important}
.xtrim-blur-30{background-color:var(--xtrim-blur-bg);backdrop-filter:blur(30px) !important;-webkit-backdrop-filter:blur(30px) !important}

/* ---------- ذرات محیطی (Ambient) ---------- */
body:not(.dark-mode){--xtrim-lib-p1:rgba(67,97,238,0.45);--xtrim-lib-p2:rgba(168,85,247,0.4)}
body.dark-mode{--xtrim-lib-p1:rgba(255,255,255,0.5);--xtrim-lib-p2:rgba(99,102,241,0.4)}

@keyframes xtrim-lib-move-1{0%,100%{transform:translateY(0) translateX(0);opacity:0.4}50%{transform:translateY(-40px) translateX(20px);opacity:0.9}}
@keyframes xtrim-lib-move-2{0%,100%{transform:translateY(0) translateX(0);opacity:0.8}50%{transform:translateY(35px) translateX(-25px);opacity:0.3}}

.xtrim-ambient{position:relative !important;overflow:hidden !important;isolation:isolate !important}
.xtrim-ambient::before,.xtrim-ambient::after{content:"" !important;position:absolute !important;pointer-events:none !important;z-index:-1 !important;will-change:transform,opacity}
.xtrim-ambient-particles::before,.xtrim-ambient-particles::after{width:6px !important;height:6px !important;border-radius:50% !important;filter:blur(0.5px) !important}
.xtrim-ambient-particles::before{
  top:10%;left:5%;background:var(--xtrim-lib-p1) !important;
  box-shadow:90px 60px 0 1px var(--xtrim-lib-p2),210px 140px 0 0px var(--xtrim-lib-p1),320px -20px 0 2px var(--xtrim-lib-p2),460px 90px 0 2.5px var(--xtrim-lib-p2),610px 220px 0 1px var(--xtrim-lib-p1),780px 50px 0 1.5px var(--xtrim-lib-p1);
  animation:xtrim-lib-move-1 15s ease-in-out infinite !important;
}
.xtrim-ambient-particles::after{
  bottom:10%;right:5%;background:var(--xtrim-lib-p2) !important;
  box-shadow:-80px -100px 0 2px var(--xtrim-lib-p1),-220px 50px 0 0px var(--xtrim-lib-p2),-410px 110px 0 1px var(--xtrim-lib-p2),-590px -70px 0 2px var(--xtrim-lib-p1),-740px 140px 0 1.5px var(--xtrim-lib-p2);
  animation:xtrim-lib-move-2 19s ease-in-out infinite !important;
}

/* Dust Particle Effect (اصلاح شده) */
.xtrim-particle-dust{position:relative;overflow:hidden !important;border-radius:33px;isolation:isolate;background-color:transparent}
.xtrim-particle-dust::before,.xtrim-particle-dust::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;will-change:transform}
.xtrim-particle-dust::before{background-image:radial-gradient(circle at 20% 30%,rgba(255,255,200,0.25) 1px,transparent 1px);background-size:35px 35px;background-repeat:repeat;animation:dustDrift 25s linear infinite}
.xtrim-particle-dust::after{background-image:radial-gradient(circle at 80% 70%,rgba(220,220,240,0.2) 1.2px,transparent 1.2px);background-size:50px 50px;background-repeat:repeat;animation:dustDriftReverse 30s linear infinite}
@keyframes dustDrift{0%{background-position:0 0}100%{background-position:350px 250px}}
@keyframes dustDriftReverse{0%{background-position:0 0}100%{background-position:-300px -200px}}

/* Circle and Square Particles */
.xtrim-particle-csq{position:relative;overflow:hidden;isolation:isolate;background-color:transparent}
.xtrim-particle-csq::before,.xtrim-particle-csq::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;will-change:transform}
.xtrim-particle-csq::before{
  background-image:radial-gradient(circle at 30% 50%,rgba(255,99,132,0.25) 1.5px,transparent 1.5px),radial-gradient(circle at 70% 20%,rgba(54,162,235,0.2) 2px,transparent 2px);
  background-size:70px 70px,100px 100px;background-repeat:no-repeat,repeat;background-position:10% 20%,0 0;
  animation:csqMove 16s infinite alternate;
}
.xtrim-particle-csq::after{
  background-image:repeating-linear-gradient(45deg,rgba(75,192,192,0.12) 0px,rgba(75,192,192,0.12) 2px,transparent 2px,transparent 8px);
  background-size:30px 30px;animation:csqMoveReverse 20s infinite alternate;
}
@keyframes csqMove{0%{background-position:0% 0%;transform:scale(1)}100%{background-position:100% 100%;transform:scale(1.05)}}
@keyframes csqMoveReverse{0%{background-position:0% 0%;transform:scale(1)}100%{background-position:-20% -20%;transform:scale(1.08)}}

/* ============================================================
   بک‌گراندهای جدید (۱۷ مورد) — همراه ۳ بک‌گراند ذره‌ای بالا = ۲۰ بک‌گراند
   - همه با حالت روشن/تاریک (dark-mode) سازگارند.
   - جز ۴ مورد رنگی (aurora / ocean / sunset / conic-spin) بقیه بدون رنگ پس‌زمینه‌اند
     و روی رنگ بک‌گراندِ خود کانتینر (تنظیم‌شده در المنتور) می‌نشینند.
   ============================================================ */
:root{
  --xtrim-bg-rgb:67,97,238;
  --xtrim-bg-rgb2:168,85,247;
  --xtrim-bg-text:#1a0636;
  --xtrim-bg-aurora:linear-gradient(120deg,#c7d2fe,#e9d5ff,#a7f3d0,#fecdd3,#c7d2fe);
  --xtrim-bg-ocean:linear-gradient(-45deg,#bae6fd,#bfdbfe,#a5f3fc,#c7d2fe);
  --xtrim-bg-sunset:linear-gradient(135deg,#fed7aa,#fbcfe8 55%,#ddd6fe);
  --xtrim-bg-conic:conic-gradient(from 0deg,#c7d2fe,#e9d5ff,#a7f3d0,#fecdd3,#c7d2fe);
  --xtrim-bg-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
html.dark-mode,body.dark-mode{
  --xtrim-bg-rgb:165,180,255;
  --xtrim-bg-rgb2:192,132,252;
  --xtrim-bg-text:#ffffff;
  --xtrim-bg-aurora:linear-gradient(120deg,#4361ee,#a855f7,#10b981,#f12711,#4361ee);
  --xtrim-bg-ocean:linear-gradient(-45deg,#0ea5e9,#2563eb,#06b6d4,#1e3a8a);
  --xtrim-bg-sunset:linear-gradient(135deg,#f97316,#ec4899 55%,#7c3aed);
  --xtrim-bg-conic:conic-gradient(from 0deg,#4361ee,#a855f7,#10b981,#f12711,#4361ee);
  --xtrim-bg-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ----- بدون رنگ پس‌زمینه (روی بک‌گراند کانتینر می‌نشینند) ----- */
.xtrim-bg-grid{background-image:linear-gradient(to right,rgba(var(--xtrim-bg-rgb),.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--xtrim-bg-rgb),.18) 1px,transparent 1px);background-size:28px 28px}
.xtrim-bg-dots{background-image:radial-gradient(rgba(var(--xtrim-bg-rgb),.4) 1.5px,transparent 1.5px);background-size:22px 22px}
.xtrim-bg-stripes{background-image:repeating-linear-gradient(45deg,rgba(var(--xtrim-bg-rgb),.16) 0 10px,transparent 10px 20px)}
.xtrim-bg-lines{background-image:repeating-linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.16) 0 2px,transparent 2px 18px)}
.xtrim-bg-rings{background-image:repeating-radial-gradient(circle at 50% 120%,rgba(var(--xtrim-bg-rgb),.22) 0 2px,transparent 2px 22px)}
.xtrim-bg-checker{background-image:conic-gradient(rgba(var(--xtrim-bg-rgb),.15) 25%,transparent 0 50%,rgba(var(--xtrim-bg-rgb),.15) 0 75%,transparent 0);background-size:32px 32px}
.xtrim-bg-zigzag{background:linear-gradient(135deg,rgba(var(--xtrim-bg-rgb),.18) 25%,transparent 25%) -14px 0/28px 28px,linear-gradient(225deg,rgba(var(--xtrim-bg-rgb),.18) 25%,transparent 25%) -14px 0/28px 28px,linear-gradient(315deg,rgba(var(--xtrim-bg-rgb),.18) 25%,transparent 25%) 0 0/28px 28px,linear-gradient(45deg,rgba(var(--xtrim-bg-rgb),.18) 25%,transparent 25%) 0 0/28px 28px}
.xtrim-bg-blueprint{background-image:linear-gradient(rgba(var(--xtrim-bg-rgb),.28) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.28) 1px,transparent 1px),linear-gradient(rgba(var(--xtrim-bg-rgb),.12) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.12) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.xtrim-bg-noise{background-image:var(--xtrim-bg-noise)}
.xtrim-bg-mesh{background-image:radial-gradient(at 20% 20%,rgba(var(--xtrim-bg-rgb),.4) 0,transparent 50%),radial-gradient(at 80% 10%,rgba(var(--xtrim-bg-rgb2),.35) 0,transparent 50%),radial-gradient(at 50% 90%,rgba(16,185,129,.3) 0,transparent 50%),radial-gradient(at 90% 80%,rgba(241,39,17,.22) 0,transparent 50%)}
.xtrim-bg-glass{background-image:linear-gradient(135deg,rgba(var(--xtrim-bg-rgb),.22),rgba(var(--xtrim-bg-rgb2),.16));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(var(--xtrim-bg-rgb),.28)}

@keyframes xtrim-bg-spot{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.xtrim-bg-spotlight{background-image:radial-gradient(circle at center,rgba(var(--xtrim-bg-rgb2),.4),transparent 38%);background-size:200% 200%;background-repeat:no-repeat;animation:xtrim-bg-spot 9s ease-in-out infinite alternate}

@keyframes xtrim-bg-drift{to{background-position:200px 200px}}
.xtrim-bg-stars{background-image:radial-gradient(1.5px 1.5px at 20px 30px,rgba(var(--xtrim-bg-rgb),.9),transparent),radial-gradient(1px 1px at 90px 80px,rgba(var(--xtrim-bg-rgb2),.9),transparent),radial-gradient(1.5px 1.5px at 160px 40px,rgba(var(--xtrim-bg-rgb2),.8),transparent),radial-gradient(1px 1px at 60px 140px,rgba(var(--xtrim-bg-rgb),.8),transparent),radial-gradient(1.5px 1.5px at 140px 170px,rgba(var(--xtrim-bg-rgb),.9),transparent);background-size:200px 200px;animation:xtrim-bg-drift 60s linear infinite}

/* ----- رنگی (روشن = پاستلی، تاریک = پررنگ) ----- */
@keyframes xtrim-bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.xtrim-bg-aurora{background-image:var(--xtrim-bg-aurora);background-size:400% 400%;animation:xtrim-bg-shift 12s ease infinite;color:var(--xtrim-bg-text)}
.xtrim-bg-ocean{background-image:var(--xtrim-bg-ocean);background-size:300% 300%;animation:xtrim-bg-shift 10s ease infinite;color:var(--xtrim-bg-text)}
.xtrim-bg-sunset{background-image:var(--xtrim-bg-sunset);color:var(--xtrim-bg-text)}
.xtrim-bg-conic-spin{position:relative;overflow:hidden;isolation:isolate;color:var(--xtrim-bg-text)}
.xtrim-bg-conic-spin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--xtrim-bg-conic);animation:xtrim-bg-hue 8s linear infinite}
@keyframes xtrim-bg-hue{to{filter:hue-rotate(360deg)}}

/* ===== Xtrim BG Pack 2 (الگوهای بیشتر / رنگی‌ها / متحرک‌ها) ===== */
/* --- الگوهای بدون رنگ (روی بک‌گراند کانتینر می‌نشینند) --- */
.xtrim-bg-grid-lg{background-image:linear-gradient(to right,rgba(var(--xtrim-bg-rgb),.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--xtrim-bg-rgb),.18) 1px,transparent 1px);background-size:60px 60px}
.xtrim-bg-grid-fine{background-image:linear-gradient(to right,rgba(var(--xtrim-bg-rgb),.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--xtrim-bg-rgb),.12) 1px,transparent 1px);background-size:12px 12px}
.xtrim-bg-graph-paper{background-image:linear-gradient(rgba(var(--xtrim-bg-rgb),.22) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.22) 1px,transparent 1px),linear-gradient(rgba(var(--xtrim-bg-rgb),.08) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.08) 1px,transparent 1px);background-size:50px 50px,50px 50px,10px 10px,10px 10px}
.xtrim-bg-dots-lg{background-image:radial-gradient(rgba(var(--xtrim-bg-rgb),.3) 3px,transparent 3px);background-size:40px 40px}
.xtrim-bg-dots-tiny{background-image:radial-gradient(rgba(var(--xtrim-bg-rgb),.4) 1px,transparent 1px);background-size:12px 12px}
.xtrim-bg-polka{background:radial-gradient(rgba(var(--xtrim-bg-rgb),.3) 2px,transparent 2px) 0 0/30px 30px,radial-gradient(rgba(var(--xtrim-bg-rgb2),.3) 2px,transparent 2px) 15px 15px/30px 30px}
.xtrim-bg-stripes-thick{background-image:repeating-linear-gradient(45deg,rgba(var(--xtrim-bg-rgb),.1) 0 24px,transparent 24px 48px)}
.xtrim-bg-stripes-duo{background-image:repeating-linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.14) 0 20px,rgba(var(--xtrim-bg-rgb2),.14) 20px 40px)}
.xtrim-bg-pinstripe{background-image:repeating-linear-gradient(135deg,rgba(var(--xtrim-bg-rgb),.2) 0 1px,transparent 1px 10px)}
.xtrim-bg-lines-h{background-image:repeating-linear-gradient(0deg,rgba(var(--xtrim-bg-rgb),.16) 0 2px,transparent 2px 18px)}
.xtrim-bg-crosshatch{background-image:repeating-linear-gradient(45deg,rgba(var(--xtrim-bg-rgb),.16) 0 1px,transparent 1px 20px),repeating-linear-gradient(-45deg,rgba(var(--xtrim-bg-rgb),.16) 0 1px,transparent 1px 20px)}
.xtrim-bg-crosshatch-fine{background-image:repeating-linear-gradient(45deg,rgba(var(--xtrim-bg-rgb),.16) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,rgba(var(--xtrim-bg-rgb),.16) 0 1px,transparent 1px 8px)}
.xtrim-bg-checker-lg{background-image:conic-gradient(rgba(var(--xtrim-bg-rgb),.13) 25%,transparent 0 50%,rgba(var(--xtrim-bg-rgb),.13) 0 75%,transparent 0);background-size:64px 64px}
.xtrim-bg-gingham{background-image:repeating-linear-gradient(0deg,rgba(var(--xtrim-bg-rgb),.1) 0 20px,transparent 20px 40px),repeating-linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.1) 0 20px,transparent 20px 40px)}
.xtrim-bg-plaid{background-image:repeating-linear-gradient(0deg,rgba(var(--xtrim-bg-rgb),.08) 0 30px,transparent 30px 60px),repeating-linear-gradient(90deg,rgba(var(--xtrim-bg-rgb2),.08) 0 30px,transparent 30px 60px),repeating-linear-gradient(0deg,rgba(var(--xtrim-bg-rgb),.25) 0 1px,transparent 1px 60px),repeating-linear-gradient(90deg,rgba(var(--xtrim-bg-rgb2),.25) 0 1px,transparent 1px 60px)}
.xtrim-bg-sunburst{background-image:repeating-conic-gradient(from 0deg at 50% 100%,rgba(var(--xtrim-bg-rgb),.14) 0 6deg,transparent 6deg 12deg)}
.xtrim-bg-rays{background-image:repeating-conic-gradient(from 0deg at 50% 0%,rgba(var(--xtrim-bg-rgb2),.14) 0 6deg,transparent 6deg 12deg)}
.xtrim-bg-vignette{background-image:radial-gradient(ellipse at center,transparent 55%,rgba(var(--xtrim-bg-rgb),.2) 100%)}
.xtrim-bg-glow-top{background-image:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(var(--xtrim-bg-rgb2),.32),transparent)}
.xtrim-bg-glow-bottom{background-image:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(var(--xtrim-bg-rgb),.32),transparent)}
.xtrim-bg-glow-corners{background-image:radial-gradient(circle at 0 0,rgba(var(--xtrim-bg-rgb),.3),transparent 45%),radial-gradient(circle at 100% 100%,rgba(var(--xtrim-bg-rgb2),.3),transparent 45%)}
.xtrim-bg-glow-center{background-image:radial-gradient(circle at center,rgba(var(--xtrim-bg-rgb2),.25),transparent 60%)}
.xtrim-bg-circles{background-image:radial-gradient(circle at center,transparent 0 9px,rgba(var(--xtrim-bg-rgb),.22) 9px 10px,transparent 10px);background-size:34px 34px}
.xtrim-bg-chevron{background:linear-gradient(135deg,rgba(var(--xtrim-bg-rgb),.16) 25%,transparent 25%) -20px 0/40px 40px,linear-gradient(225deg,rgba(var(--xtrim-bg-rgb),.16) 25%,transparent 25%) -20px 0/40px 40px}
/* --- الگوهای SVG (با mask، رنگ از تم می‌آید) --- */
.xtrim-bg-hex,.xtrim-bg-plus,.xtrim-bg-triangles,.xtrim-bg-waves{position:relative;isolation:isolate}
.xtrim-bg-hex::before,.xtrim-bg-plus::before,.xtrim-bg-triangles::before,.xtrim-bg-waves::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.xtrim-bg-hex::before{background:rgba(var(--xtrim-bg-rgb),0.28);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='49'%20viewBox='0%200%2028%2049'%3E%3Cpath%20d='M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='49'%20viewBox='0%200%2028%2049'%3E%3Cpath%20d='M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z'/%3E%3C/svg%3E");-webkit-mask-size:28px 49px;mask-size:28px 49px}
.xtrim-bg-plus::before{background:rgba(var(--xtrim-bg-rgb),0.35);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%3E%3Cpath%20d='M14%208h2v6h6v2h-6v6h-2v-6H8v-2h6z'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%3E%3Cpath%20d='M14%208h2v6h6v2h-6v6h-2v-6H8v-2h6z'/%3E%3C/svg%3E");-webkit-mask-size:30px 30px;mask-size:30px 30px}
.xtrim-bg-triangles::before{background:rgba(var(--xtrim-bg-rgb),0.3);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Cpath%20d='M20%204L37%2036H3z'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Cpath%20d='M20%204L37%2036H3z'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'/%3E%3C/svg%3E");-webkit-mask-size:40px 40px;mask-size:40px 40px}
.xtrim-bg-waves::before{background:rgba(var(--xtrim-bg-rgb),0.3);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='20'%3E%3Cpath%20d='M0%2010Q12.5%200%2025%2010T50%2010T75%2010T100%2010'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='20'%3E%3Cpath%20d='M0%2010Q12.5%200%2025%2010T50%2010T75%2010T100%2010'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E");-webkit-mask-size:100px 20px;mask-size:100px 20px}
/* --- رنگی جدید (روشن = پاستلی، تاریک = پررنگ) --- */
.xtrim-bg-forest{background-image:linear-gradient(135deg,#d1fae5,#bbf7d0,#ecfccb);color:#1a0636}
html.dark-mode .xtrim-bg-forest,body.dark-mode .xtrim-bg-forest{background-image:linear-gradient(135deg,#064e3b,#065f46,#14532d);color:#fff}
.xtrim-bg-candy{background-image:linear-gradient(135deg,#fbcfe8,#ddd6fe,#bfdbfe);color:#1a0636}
html.dark-mode .xtrim-bg-candy,body.dark-mode .xtrim-bg-candy{background-image:linear-gradient(135deg,#831843,#5b21b6,#1e40af);color:#fff}
.xtrim-bg-lava{background-image:linear-gradient(135deg,#fecaca,#fed7aa,#fef08a);color:#1a0636}
html.dark-mode .xtrim-bg-lava,body.dark-mode .xtrim-bg-lava{background-image:linear-gradient(135deg,#7f1d1d,#c2410c,#a16207);color:#fff}
.xtrim-bg-mint{background-image:linear-gradient(135deg,#ccfbf1,#cffafe,#e0f2fe);color:#1a0636}
html.dark-mode .xtrim-bg-mint,body.dark-mode .xtrim-bg-mint{background-image:linear-gradient(135deg,#134e4a,#155e75,#0c4a6e);color:#fff}
.xtrim-bg-royal{background-image:linear-gradient(135deg,#e0e7ff,#ede9fe,#fae8ff);color:#1a0636}
html.dark-mode .xtrim-bg-royal,body.dark-mode .xtrim-bg-royal{background-image:linear-gradient(135deg,#1e1b4b,#3b0764,#4c1d95);color:#fff}
.xtrim-bg-dusk{background-image:linear-gradient(180deg,#fef3c7,#fbcfe8,#c7d2fe);color:#1a0636}
html.dark-mode .xtrim-bg-dusk,body.dark-mode .xtrim-bg-dusk{background-image:linear-gradient(180deg,#1e1b4b,#581c87,#be185d);color:#fff}
.xtrim-bg-gradient-flow{background-image:linear-gradient(-45deg,#e0e7ff,#fae8ff,#ccfbf1,#fef3c7);background-size:400% 400%;animation:xtrim-bg-shift 14s ease infinite;color:#1a0636}
html.dark-mode .xtrim-bg-gradient-flow,body.dark-mode .xtrim-bg-gradient-flow{background-image:linear-gradient(-45deg,#312e81,#701a75,#134e4a,#78350f);color:#fff}
/* --- متحرک CSS خالص (بدون رنگ پایه) --- */
@keyframes xtrim-bg-slide-x{to{background-position:40px 0}}
@keyframes xtrim-bg-slide-xy{to{background-position:40px 40px}}
@keyframes xtrim-bg-slide-dots{to{background-position:24px 24px}}
@keyframes xtrim-bg-scan{to{background-position:0 4px}}
@keyframes xtrim-bg-sweep{0%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes xtrim-bg-snowfall{to{background-position:20px 120px,-30px 180px,40px 240px,-20px 300px}}
@keyframes xtrim-bg-rise{to{background-position:20px -120px,-30px -180px,40px -240px}}
.xtrim-bg-marching-stripes{background-image:linear-gradient(45deg,rgba(var(--xtrim-bg-rgb),.16) 25%,transparent 25% 50%,rgba(var(--xtrim-bg-rgb),.16) 50% 75%,transparent 75%);background-size:40px 40px;animation:xtrim-bg-slide-x 2s linear infinite}
.xtrim-bg-moving-grid{background-image:linear-gradient(to right,rgba(var(--xtrim-bg-rgb),.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--xtrim-bg-rgb),.18) 1px,transparent 1px);background-size:40px 40px;animation:xtrim-bg-slide-xy 4s linear infinite}
.xtrim-bg-drift-dots{background-image:radial-gradient(rgba(var(--xtrim-bg-rgb),.4) 1.5px,transparent 1.5px);background-size:24px 24px;animation:xtrim-bg-slide-dots 6s linear infinite}
.xtrim-bg-scanlines{background-image:repeating-linear-gradient(0deg,rgba(var(--xtrim-bg-rgb),.1) 0 1px,transparent 1px 4px);background-size:100% 4px;animation:xtrim-bg-scan .5s linear infinite}
.xtrim-bg-shimmer-sweep{background-image:linear-gradient(115deg,transparent 30%,rgba(var(--xtrim-bg-rgb2),.22) 50%,transparent 70%);background-size:300% 100%;background-repeat:no-repeat;animation:xtrim-bg-sweep 5s ease-in-out infinite}
.xtrim-bg-snow-css{background-image:radial-gradient(2px 2px at 30px 40px,rgba(var(--xtrim-bg-rgb2),.8),transparent),radial-gradient(3px 3px at 90px 100px,rgba(var(--xtrim-bg-rgb),.7),transparent),radial-gradient(2px 2px at 60px 20px,rgba(var(--xtrim-bg-rgb2),.7),transparent),radial-gradient(4px 4px at 150px 110px,rgba(var(--xtrim-bg-rgb),.6),transparent);background-size:100px 120px,180px 180px,120px 240px,220px 300px;animation:xtrim-bg-snowfall 14s linear infinite}
.xtrim-bg-bubbles-css{background-image:radial-gradient(circle at 40px 60px,transparent 0 9px,rgba(var(--xtrim-bg-rgb),.35) 9px 10px,transparent 10px),radial-gradient(circle at 110px 130px,transparent 0 14px,rgba(var(--xtrim-bg-rgb2),.3) 14px 15px,transparent 15px),radial-gradient(circle at 70px 60px,transparent 0 5px,rgba(var(--xtrim-bg-rgb),.35) 5px 6px,transparent 6px);background-size:120px 120px,180px 180px,240px 240px;animation:xtrim-bg-rise 16s linear infinite}
/* --- متحرک با شبه‌عنصر (کانتینر relative + overflow hidden می‌شود) --- */
.xtrim-bg-twinkle,.xtrim-bg-shooting-stars,.xtrim-bg-pulse-rings,.xtrim-bg-breathing-glow,.xtrim-bg-orbs,.xtrim-bg-aurora-veil{position:relative;overflow:hidden;isolation:isolate}
.xtrim-bg-twinkle::before,.xtrim-bg-twinkle::after,.xtrim-bg-shooting-stars::before,.xtrim-bg-shooting-stars::after,.xtrim-bg-pulse-rings::before,.xtrim-bg-pulse-rings::after,.xtrim-bg-breathing-glow::before,.xtrim-bg-orbs::before,.xtrim-bg-orbs::after,.xtrim-bg-aurora-veil::before{content:"";position:absolute;pointer-events:none;z-index:-1}
@keyframes xtrim-bg-blinkop{from{opacity:.2}to{opacity:1}}
.xtrim-bg-twinkle::before,.xtrim-bg-twinkle::after{inset:0;background-image:radial-gradient(1.5px 1.5px at 20px 30px,rgba(var(--xtrim-bg-rgb),.9),transparent),radial-gradient(1px 1px at 90px 80px,rgba(var(--xtrim-bg-rgb2),.9),transparent),radial-gradient(1.5px 1.5px at 160px 40px,rgba(var(--xtrim-bg-rgb2),.8),transparent),radial-gradient(1px 1px at 60px 140px,rgba(var(--xtrim-bg-rgb),.8),transparent);background-size:200px 200px;animation:xtrim-bg-blinkop 2.5s ease-in-out infinite alternate}
.xtrim-bg-twinkle::after{background-size:150px 150px;background-position:40px 60px;animation-duration:3.7s;animation-delay:-1.2s}
@keyframes xtrim-bg-shoot{0%{transform:translate(0,0) rotate(-35deg);opacity:0}8%{opacity:1}30%,100%{transform:translate(-90vw,63vw) rotate(-35deg);opacity:0}}
.xtrim-bg-shooting-stars::before,.xtrim-bg-shooting-stars::after{top:-5%;right:5%;width:120px;height:2px;background:linear-gradient(90deg,rgba(var(--xtrim-bg-rgb),.9),transparent);border-radius:2px;animation:xtrim-bg-shoot 7s ease-in infinite}
.xtrim-bg-shooting-stars::after{right:40%;top:-8%;animation-delay:3.5s;background:linear-gradient(90deg,rgba(var(--xtrim-bg-rgb2),.9),transparent)}
@keyframes xtrim-bg-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.xtrim-bg-pulse-rings::before,.xtrim-bg-pulse-rings::after{left:50%;top:50%;width:70%;aspect-ratio:1;margin:-35% 0 0 -35%;border-radius:50%;border:2px solid rgba(var(--xtrim-bg-rgb),.4);animation:xtrim-bg-ring 4s ease-out infinite}
.xtrim-bg-pulse-rings::after{border-color:rgba(var(--xtrim-bg-rgb2),.4);animation-delay:2s}
@keyframes xtrim-bg-breathe{from{transform:scale(.8);opacity:.5}to{transform:scale(1.2);opacity:1}}
.xtrim-bg-breathing-glow::before{left:50%;top:50%;width:70%;aspect-ratio:1;margin:-35% 0 0 -35%;border-radius:50%;background:radial-gradient(circle,rgba(var(--xtrim-bg-rgb2),.4),transparent 65%);animation:xtrim-bg-breathe 5s ease-in-out infinite alternate}
@keyframes xtrim-bg-orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(35%,25%) scale(1.2)}}
@keyframes xtrim-bg-orb2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-40%,-20%) scale(.9)}}
.xtrim-bg-orbs::before,.xtrim-bg-orbs::after{width:45%;height:60%;border-radius:50%;filter:blur(60px)}
.xtrim-bg-orbs::before{top:-10%;left:-5%;background:rgba(var(--xtrim-bg-rgb),.4);animation:xtrim-bg-orb1 14s ease-in-out infinite}
.xtrim-bg-orbs::after{bottom:-15%;right:-5%;background:rgba(var(--xtrim-bg-rgb2),.4);animation:xtrim-bg-orb2 18s ease-in-out infinite}
@keyframes xtrim-bg-veil{0%,100%{transform:translateX(-25%)}50%{transform:translateX(25%)}}
.xtrim-bg-aurora-veil::before{left:-25%;right:-25%;top:5%;height:45%;background:linear-gradient(90deg,transparent,rgba(var(--xtrim-bg-rgb2),.4),rgba(var(--xtrim-bg-rgb),.4),transparent);filter:blur(40px);animation:xtrim-bg-veil 12s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){[class*="xtrim-bg-"],[class*="xtrim-bg-"]::before,[class*="xtrim-bg-"]::after{animation:none !important}}