/* =========================================================
   شیشه‌گر - Core Styles
   ========================================================= */

.shg-bg-wrapper {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
	pointer-events: none;
}

/* در حالت پیش‌نمایش داخل پنل مدیریت، پس‌زمینه باید نسبی باشد نه ثابت */
.shg-static-preview {
	position: relative;
	width: 100%;
	height: 140px;
	border-radius: 12px;
	overflow: hidden;
	z-index: 0;
}
.shg-static-preview .shg-bg-wrapper {
	position: absolute;
}

/* =========================================================
   1) Aurora Glass
   ========================================================= */
.shg-tpl-aurora {
	background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
}
.shg-tpl-aurora .aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.65;
	mix-blend-mode: screen;
}
.shg-tpl-aurora .b1 {
	width: 480px; height: 480px;
	background: #7f5aff;
	top: -120px; left: -100px;
	animation: shgAurora1 18s ease-in-out infinite alternate;
}
.shg-tpl-aurora .b2 {
	width: 420px; height: 420px;
	background: #00e5ff;
	bottom: -120px; right: -90px;
	animation: shgAurora2 22s ease-in-out infinite alternate;
}
.shg-tpl-aurora .b3 {
	width: 380px; height: 380px;
	background: #ff5aa8;
	top: 30%; left: 40%;
	animation: shgAurora3 16s ease-in-out infinite alternate;
}
.shg-tpl-aurora::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(40px) saturate(130%);
	-webkit-backdrop-filter: blur(40px) saturate(130%);
	background: rgba(255,255,255,0.03);
}
@keyframes shgAurora1 { from { transform: translate(0,0) scale(1);} to { transform: translate(60px,40px) scale(1.15);} }
@keyframes shgAurora2 { from { transform: translate(0,0) scale(1);} to { transform: translate(-50px,-30px) scale(1.1);} }
@keyframes shgAurora3 { from { transform: translate(0,0) scale(1);} to { transform: translate(-40px,50px) scale(0.9);} }

/* =========================================================
   2) Floating Bubbles
   ========================================================= */
.shg-tpl-bubbles {
	background: linear-gradient(160deg, #1e3c72, #2a5298);
}
.shg-bubble {
	position: absolute;
	bottom: -160px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 60%, rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.35);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: inset 0 0 20px rgba(255,255,255,.25), 0 0 20px rgba(255,255,255,.08);
	animation-name: shgRise;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes shgRise {
	0%   { transform: translate(0,0); opacity: 0; }
	10%  { opacity: .9; }
	50%  { transform: translate(24px,-60vh); }
	90%  { opacity: .8; }
	100% { transform: translate(-24px,-130vh); opacity: 0; }
}

/* =========================================================
   3) Frosted Mesh
   ========================================================= */
.shg-tpl-frosted {
	background:
		radial-gradient(at 15% 20%, #ffdde1 0px, transparent 55%),
		radial-gradient(at 80% 0%, #a1c4fd 0px, transparent 55%),
		radial-gradient(at 0% 85%, #c2e9fb 0px, transparent 55%),
		radial-gradient(at 85% 85%, #fbc2eb 0px, transparent 55%),
		#f5f7fa;
	animation: shgHue 30s linear infinite;
}
@keyframes shgHue {
	0%   { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}
.shg-tpl-frosted .frost-panel {
	position: absolute;
	width: 150%;
	height: 180px;
	left: -25%;
	background: rgba(255,255,255,.28);
	border-top: 1px solid rgba(255,255,255,.5);
	border-bottom: 1px solid rgba(255,255,255,.5);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transform: rotate(-8deg);
}
.shg-tpl-frosted .p1 { top: 8%;  transform: rotate(-8deg); }
.shg-tpl-frosted .p2 { top: 45%; transform: rotate(6deg); opacity: .8; }
.shg-tpl-frosted .p3 { top: 78%; transform: rotate(-4deg); opacity: .6; }

/* =========================================================
   4) Liquid Blobs
   ========================================================= */
.shg-tpl-liquid {
	background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}
.shg-tpl-liquid .liquid-blob {
	position: absolute;
	background: linear-gradient(135deg, rgba(120,80,255,.55), rgba(0,229,255,.35));
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border: 1px solid rgba(255,255,255,.15);
	animation: shgMorph 12s ease-in-out infinite, shgFloat 20s ease-in-out infinite;
}
.shg-tpl-liquid .l1 { width: 380px; height: 380px; top: 5%;  left: -60px; animation-delay: 0s, 0s; }
.shg-tpl-liquid .l2 { width: 300px; height: 300px; bottom: -40px; right: 5%; animation-delay: 2s, 3s; }
.shg-tpl-liquid .l3 { width: 260px; height: 260px; top: 40%; left: 45%; animation-delay: 4s, 6s; }
@keyframes shgMorph {
	0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
	33%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
	66%  { border-radius: 50% 60% 30% 60% / 40% 40% 60% 50%; }
	100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes shgFloat {
	0%, 100% { transform: translate(0,0); }
	50%      { transform: translate(30px,-25px); }
}

/* =========================================================
   5) Glass Particles
   ========================================================= */
.shg-tpl-particles {
	background: radial-gradient(ellipse at center, #10131a 0%, #04050a 100%);
}
.shg-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	box-shadow: 0 0 6px 2px rgba(255,255,255,.5);
	animation-name: shgParticleUp, shgTwinkle;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
}
@keyframes shgParticleUp {
	0%   { transform: translateY(10vh); }
	100% { transform: translateY(-110vh); }
}
@keyframes shgTwinkle {
	0%, 100% { opacity: .2; }
	50%      { opacity: 1; }
}

/* =========================================================
   6) Glass Waves
   ========================================================= */
.shg-tpl-waves {
	background: linear-gradient(180deg, #1f4068, #162447);
}
.shg-tpl-waves .shg-wave-layer {
	position: absolute;
	inset: -20% -20%;
	background: repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 40px, rgba(255,255,255,.03) 40px 90px);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: shgWaveShift linear infinite;
}
.shg-tpl-waves .w1 { animation-duration: 16s; opacity: .55; }
.shg-tpl-waves .w2 { animation-duration: 24s; opacity: .35; animation-direction: reverse; }
.shg-tpl-waves .w3 { animation-duration: 32s; opacity: .22; }
@keyframes shgWaveShift {
	0%   { background-position: 0 0; }
	100% { background-position: 400px 200px; }
}

/* =========================================================
   7) Glass Confetti
   ========================================================= */
.shg-tpl-confetti {
	background: linear-gradient(135deg, #fff1eb, #ace0f9, #ffd6e8);
}
.shg-confetti {
	position: absolute;
	top: -60px;
	border-radius: 4px;
	background: rgba(255,255,255,.55);
	border: 1px solid rgba(255,255,255,.7);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0 4px 10px rgba(0,0,0,.06);
	animation-name: shgConfettiFall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes shgConfettiFall {
	0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
	8%   { opacity: .9; }
	92%  { opacity: .85; }
	100% { transform: translateY(115vh) rotate(360deg); opacity: 0; }
}

/* =========================================================
   8) Orbit Rings
   ========================================================= */
.shg-tpl-orbit {
	background: radial-gradient(circle, #3a1c71, #1c1c3c);
}
.shg-tpl-orbit .orbit-core {
	position: absolute;
	top: 50%; left: 50%;
	width: 90px; height: 90px;
	margin: -45px 0 0 -45px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffd6ff 0%, #7f5aff 55%, transparent 75%);
	filter: blur(6px);
	opacity: .85;
	animation: shgPulse 4s ease-in-out infinite;
}
.shg-tpl-orbit .orbit-ring {
	position: absolute;
	top: 50%; left: 50%;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.35);
	background: rgba(255,255,255,.03);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.shg-tpl-orbit .r1 { width: 260px; height: 260px; margin: -130px 0 0 -130px; animation: shgSpin 20s linear infinite; }
.shg-tpl-orbit .r2 { width: 420px; height: 420px; margin: -210px 0 0 -210px; animation: shgSpin 34s linear infinite reverse; }
.shg-tpl-orbit .r3 { width: 600px; height: 600px; margin: -300px 0 0 -300px; animation: shgSpin 50s linear infinite; opacity: .6; }
@keyframes shgSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shgPulse { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.25); opacity: 1; } }

/* =========================================================
   9) Glass Rain
   ========================================================= */
.shg-tpl-rain {
	background: linear-gradient(180deg, #0f2740, #04101c);
}
.shg-raindrop {
	position: absolute;
	top: -120px;
	width: 2px;
	background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 60%, rgba(255,255,255,0));
	filter: blur(.3px);
	animation-name: shgRainFall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes shgRainFall {
	0%   { transform: translateY(0); opacity: 0; }
	10%  { opacity: .8; }
	90%  { opacity: .6; }
	100% { transform: translateY(120vh); opacity: 0; }
}

/* =========================================================
   10) Starfield Glass
   ========================================================= */
.shg-tpl-starfield {
	background: radial-gradient(circle, #0b0f2b 0%, #000 100%);
}
.shg-tpl-starfield::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.05), transparent 60%);
}
.shg-star {
	position: absolute;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 4px 1px rgba(255,255,255,.7);
	animation-name: shgTwinkle;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* =========================================================
   11) Ripple Rings
   ========================================================= */
.shg-tpl-ripple {
	background: radial-gradient(circle, #eef2f3, #cfd9df);
}
.shg-tpl-ripple .ripple-ring {
	position: absolute;
	top: 50%; left: 50%;
	width: 60px; height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.9);
	background: rgba(255,255,255,.15);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 0 20px rgba(255,255,255,.4);
	animation: shgRipple 6s ease-out infinite;
}
.shg-tpl-ripple .r2 { animation-delay: 1.5s; }
.shg-tpl-ripple .r3 { animation-delay: 3s; }
.shg-tpl-ripple .r4 { animation-delay: 4.5s; }
@keyframes shgRipple {
	0%   { transform: scale(1); opacity: .8; }
	100% { transform: scale(9); opacity: 0; }
}

/* =========================================================
   12) Pastel Blobs
   ========================================================= */
.shg-tpl-pastel {
	background: linear-gradient(135deg, #f9f6f2, #ffe0f0, #d9f2ff);
}
.shg-tpl-pastel .pastel-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .8;
}
.shg-tpl-pastel .p1 { width: 380px; height: 380px; background: #ffc4e1; top: -80px; left: -60px; animation: shgAurora1 20s ease-in-out infinite alternate; }
.shg-tpl-pastel .p2 { width: 340px; height: 340px; background: #c4e8ff; bottom: -80px; right: -60px; animation: shgAurora2 24s ease-in-out infinite alternate; }
.shg-tpl-pastel .p3 { width: 300px; height: 300px; background: #fff3c4; top: 35%; left: 40%; animation: shgAurora3 18s ease-in-out infinite alternate; }
.shg-tpl-pastel::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(30px) saturate(120%);
	-webkit-backdrop-filter: blur(30px) saturate(120%);
	background: rgba(255,255,255,.15);
}

/* =========================================================
   13) Minimal Dark Gradient  (شبیه سایت‌های مینیمال مدرن)
   ========================================================= */
.shg-tpl-minimal-dark {
	background: linear-gradient(160deg, #0b0e14, #12151f 55%, #0b0e14);
}
.shg-tpl-minimal-dark::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 75% 25%, rgba(90,120,255,.10), transparent 55%);
}
.shg-tpl-minimal-dark .shg-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	box-shadow: 0 0 8px 2px rgba(255,255,255,.25);
	animation-name: shgDriftFade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* =========================================================
   14) Minimal Light Gradient (شبیه سایت‌های مینیمال روشن)
   ========================================================= */
.shg-tpl-minimal-light {
	background: linear-gradient(160deg, #fff6ec, #ffe8d6 55%, #fff6ec);
}
.shg-tpl-minimal-light::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 25% 20%, rgba(255,180,120,.18), transparent 55%);
}
.shg-tpl-minimal-light .shg-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(150,105,70,.35);
	box-shadow: 0 0 8px 2px rgba(150,105,70,.18);
	animation-name: shgDriftFade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes shgDriftFade {
	0%, 100% { opacity: .18; transform: translate(0,0); }
	50%      { opacity: .65; transform: translate(10px,-14px); }
}

/* =========================================================
   15) Simple Glass - Dark  (ساده، بدون هیچ حرکت اضافه)
   ========================================================= */
.shg-tpl-simple-dark {
	background: linear-gradient(180deg, #111319, #0a0c10);
}
.shg-tpl-simple-dark .simple-glow {
	position: absolute;
	top: 50%; left: 50%;
	width: 640px; height: 640px;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(130,150,255,.09), transparent 70%);
	filter: blur(50px);
}
.shg-tpl-simple-dark::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	background: rgba(255,255,255,.015);
}

/* =========================================================
   16) Simple Glass - Light  (ساده، بدون هیچ حرکت اضافه)
   ========================================================= */
.shg-tpl-simple-light {
	background: linear-gradient(180deg, #fbfbfc, #f2f3f5);
}
.shg-tpl-simple-light .simple-glow {
	position: absolute;
	top: 50%; left: 50%;
	width: 640px; height: 640px;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0,0,0,.035), transparent 70%);
	filter: blur(50px);
}
.shg-tpl-simple-light::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	background: rgba(255,255,255,.35);
}

/* =========================================================
   17) Sunset Glow
   ========================================================= */
.shg-tpl-sunset {
	background: linear-gradient(180deg, #2b1055 0%, #ff7e5f 55%, #feb47b 100%);
}
.shg-tpl-sunset .sun-glow {
	position: absolute;
	bottom: -140px; left: 50%;
	transform: translateX(-50%);
	width: 440px; height: 440px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,214,150,.9), rgba(255,140,90,.4) 45%, transparent 72%);
	filter: blur(25px);
	animation: shgPulse 7s ease-in-out infinite;
}

/* =========================================================
   18) Deep Ocean
   ========================================================= */
.shg-tpl-ocean {
	background: linear-gradient(180deg, #003049, #0a4a63 60%, #003049);
}
.shg-tpl-ocean .shg-wave-layer {
	background: repeating-linear-gradient(115deg, rgba(150,220,255,.14) 0 40px, rgba(150,220,255,.03) 40px 95px);
}
.shg-tpl-ocean .w1 { animation-duration: 22s; opacity: .5; }
.shg-tpl-ocean .w2 { animation-duration: 30s; opacity: .32; animation-direction: reverse; }
.shg-tpl-ocean .w3 { animation-duration: 40s; opacity: .2; }

/* =========================================================
   19) Midnight Forest (fireflies)
   ========================================================= */
.shg-tpl-forest {
	background: linear-gradient(160deg, #0b1f14, #132a1c 60%, #0b1f14);
}
.shg-tpl-forest .shg-dot {
	background: rgba(200,255,150,.85);
	box-shadow: 0 0 10px 3px rgba(190,255,140,.5);
}

/* =========================================================
   20) Neon City
   ========================================================= */
.shg-tpl-neon {
	background: linear-gradient(160deg, #120024, #1a0b3d 65%, #120024);
}
.shg-tpl-neon .neon-grid {
	position: absolute;
	inset: -10% -10%;
	background-image:
		linear-gradient(rgba(255,60,190,.25) 1px, transparent 1px),
		linear-gradient(90deg, rgba(90,200,255,.2) 1px, transparent 1px);
	background-size: 60px 60px;
	transform: perspective(400px) rotateX(55deg);
	transform-origin: bottom;
	opacity: .55;
}
.shg-tpl-neon .neon-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .55;
	animation: shgPulse 5s ease-in-out infinite;
}
.shg-tpl-neon .g1 { width: 320px; height: 320px; background: #ff2fd0; top: 10%; right: 10%; }
.shg-tpl-neon .g2 { width: 300px; height: 300px; background: #2fdcff; bottom: 5%; left: 8%; animation-delay: 1.5s; }

/* =========================================================
   21) Cosmic Nebula
   ========================================================= */
.shg-tpl-nebula {
	background: radial-gradient(circle, #2d0b4e, #0a0118 75%);
}
.shg-tpl-nebula .aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: .6;
	mix-blend-mode: screen;
}
.shg-tpl-nebula .b1 { width: 420px; height: 420px; background: #a24bff; top: -80px; left: -60px; animation: shgAurora1 24s ease-in-out infinite alternate; }
.shg-tpl-nebula .b2 { width: 380px; height: 380px; background: #ff4bd8; bottom: -60px; right: -40px; animation: shgAurora2 28s ease-in-out infinite alternate; }
.shg-tpl-nebula .b3 { width: 340px; height: 340px; background: #4b7bff; top: 35%; left: 45%; animation: shgAurora3 20s ease-in-out infinite alternate; }
.shg-tpl-nebula .shg-star {
	box-shadow: 0 0 5px 1px rgba(255,255,255,.8);
}

/* =========================================================
   22) Morning Sunrise
   ========================================================= */
.shg-tpl-sunrise {
	background: linear-gradient(180deg, #fef3c7 0%, #fbc2eb 55%, #a6c1ee 100%);
}
.shg-tpl-sunrise::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(25px) saturate(115%);
	-webkit-backdrop-filter: blur(25px) saturate(115%);
	background: rgba(255,255,255,.08);
}

/* =========================================================
   23) White Marble
   ========================================================= */
.shg-tpl-marble {
	background:
		repeating-linear-gradient(115deg, rgba(150,140,125,.10) 0 3px, transparent 3px 60px),
		repeating-linear-gradient(25deg, rgba(150,140,125,.07) 0 2px, transparent 2px 90px),
		linear-gradient(135deg, #f5f3ef, #e8e4dc 50%, #f5f3ef);
}
.shg-tpl-marble .marble-glow {
	position: absolute;
	top: 20%; left: 60%;
	width: 500px; height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
	filter: blur(40px);
	animation: shgFloat 26s ease-in-out infinite;
}

/* =========================================================
   24) Metallic Silver
   ========================================================= */
.shg-tpl-metallic {
	background: linear-gradient(135deg, #3a3f47, #20242a 60%, #3a3f47);
}
.shg-tpl-metallic .metallic-sheen {
	position: absolute;
	inset: -50% -50%;
	background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
	animation: shgSheenMove 6s linear infinite;
}
@keyframes shgSheenMove {
	0%   { transform: translateX(-30%); }
	100% { transform: translateX(30%); }
}

/* =========================================================
   25) Glass Prism
   ========================================================= */
.shg-tpl-prism {
	background: linear-gradient(120deg, #fdfcfb, #e6f7ff 70%, #fdfcfb);
}
.shg-tpl-prism .prism-stripes {
	position: absolute;
	inset: -20%;
	background: repeating-linear-gradient(100deg,
		rgba(255,120,150,.10) 0 30px,
		rgba(255,210,120,.10) 30px 60px,
		rgba(140,255,190,.10) 60px 90px,
		rgba(120,190,255,.10) 90px 120px,
		rgba(190,140,255,.10) 120px 150px
	);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	animation: shgWaveShift 40s linear infinite;
	opacity: .8;
}

/* =========================================================
   26) Floating Geometry
   ========================================================= */
.shg-tpl-geometry {
	background: linear-gradient(160deg, #0d1321, #1d2739 60%, #0d1321);
}
.shg-tpl-geometry .geo-shape {
	position: absolute;
	background: linear-gradient(135deg, rgba(127,90,255,.35), rgba(0,229,255,.2));
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: shgFloat 18s ease-in-out infinite, shgSpin 40s linear infinite;
}
.shg-tpl-geometry .g1 {
	width: 180px; height: 180px; top: 15%; left: 10%;
	clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.shg-tpl-geometry .g2 {
	width: 140px; height: 140px; bottom: 12%; right: 15%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	animation-delay: 2s, 4s;
}
.shg-tpl-geometry .g3 {
	width: 110px; height: 110px; top: 45%; right: 30%;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	animation-delay: 4s, 8s;
}

/* =========================================================
   27) Winter Snow  (از موتور کانفتی با پالت و شکل متفاوت استفاده می‌کند)
   ========================================================= */
.shg-tpl-snow {
	background: linear-gradient(180deg, #e6f0fa, #c9dff2 70%, #e6f0fa);
}
.shg-tpl-snow .shg-confetti {
	border-radius: 50%;
	filter: blur(.5px);
	box-shadow: 0 0 6px rgba(255,255,255,.7);
}

/* =========================================================
   28) Autumn Leaves  (از موتور کانفتی با پالت پاییزی استفاده می‌کند)
   ========================================================= */
.shg-tpl-leaves {
	background: linear-gradient(135deg, #fff3e0, #ffd9a0 65%, #fff3e0);
}
.shg-tpl-leaves .shg-confetti {
	border-radius: 2px 10px 2px 10px;
}

/* =========================================================
   29) Glass Spotlight
   ========================================================= */
.shg-tpl-spotlight {
	background: linear-gradient(180deg, #0c0f16, #05070b);
}
.shg-tpl-spotlight .spot {
	position: absolute;
	top: -180px;
	width: 420px; height: 420px;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .5;
}
.shg-tpl-spotlight .s1 { left: 5%;  background: radial-gradient(circle, rgba(130,150,255,.7), transparent 70%); }
.shg-tpl-spotlight .s2 { right: 8%; background: radial-gradient(circle, rgba(255,150,220,.6), transparent 70%); animation: shgPulse 8s ease-in-out infinite; animation-delay: 2s; }

/* =========================================================
   30) Dynamic Mesh Gradient
   ========================================================= */
.shg-tpl-mesh {
	background: linear-gradient(120deg, #7f5aff, #00e5ff, #ff5aa8, #ffd15a, #7f5aff);
	background-size: 320% 320%;
	animation: shgMeshShift 18s ease-in-out infinite;
}
.shg-tpl-mesh::after {
	content: "";
	position: absolute; inset: 0;
	backdrop-filter: blur(60px) saturate(120%);
	-webkit-backdrop-filter: blur(60px) saturate(120%);
	background: rgba(10,8,20,.28);
}
@keyframes shgMeshShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* =========================================================
   Force text color helpers
   وقتی کاربر گزینه «سفید/مشکی کردن متن‌ها» را برای یک برگه فعال کند،
   این کلاس‌ها روی body همان برگه اضافه می‌شوند.
   ========================================================= */
body.shg-text-white,
body.shg-text-white * {
	color: #ffffff !important;
}
body.shg-text-black,
body.shg-text-black * {
	color: #000000 !important;
}