/**
 * Shihab Glass UI v3 — محرّك السديم والأجواء (مدار + مجرّة)
 *
 * طبقات الخلفية: canvas → mesh → 4 بؤر منجرفة → حبيبات → تعتيم أطراف.
 * كلّها `pointer-events: none` وتحت المحتوى (z-index 0).
 *
 * ═══ قاعدة الأداء (لا تُخالَف) ═══
 * البؤر تُرسم بتدرّج شعاعي ذي نهايات ناعمة — **بلا `filter: blur()` وبلا
 * `mix-blend-mode`**. التدرّج الشعاعي ضبابيّ أصلاً، فالمرشِّح لا يضيف شيئاً
 * بصرياً ويكلّف إعادة رسم كل إطار. الحركة على `transform` فقط كي تبقى على
 * وحدة الرسوميات.
 *
 * ولذلك أيضاً `backdrop-filter` هنا محصور في المنبثقات فقط: خلفية الأسطح
 * الأخرى سديمٌ ناعم بلا تفاصيل، فتضبيبها بلا فائدة بصرية وبتكلفة عالية.
 *
 * الكحلي الأساسي (--aa-primary / --aa-secondary) ثابت — هذه طبقة ضوء محيطي.
 * يُحمَّل بعد كل CSS الصفحة، وقبل admin-ui-glass-components.css.
 *
 * Mirror: انسخ التغييرات إلى ShihabMajarra/assets/admin-ui-glass-atmosphere.css.
 *
 * @package ShihabMadar
 */

/* ═══════════════════════════════════════════════════════════
   1) حركات السديم — إزاحة وتحجيم فقط (مركّبة على GPU)
   ═══════════════════════════════════════════════════════════ */

@keyframes aa-neb-drift-a {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	25% {
		transform: translate3d(-9vw, 7vh, 0) scale(1.14);
	}
	50% {
		transform: translate3d(-4vw, 15vh, 0) scale(0.92);
	}
	75% {
		transform: translate3d(7vw, 9vh, 0) scale(1.08);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes aa-neb-drift-b {
	0% {
		transform: translate3d(0, 0, 0) scale(1.06);
	}
	30% {
		transform: translate3d(11vw, -6vh, 0) scale(0.9);
	}
	60% {
		transform: translate3d(5vw, 11vh, 0) scale(1.18);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1.06);
	}
}

@keyframes aa-neb-drift-c {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	33% {
		transform: translate3d(-12vw, -8vh, 0) scale(1.2);
	}
	66% {
		transform: translate3d(8vw, -13vh, 0) scale(0.88);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes aa-neb-drift-d {
	0% {
		transform: translate3d(0, 0, 0) scale(0.96);
	}
	40% {
		transform: translate3d(9vw, 10vh, 0) scale(1.16);
	}
	70% {
		transform: translate3d(-7vw, 4vh, 0) scale(1);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(0.96);
	}
}

@keyframes aa-glass-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ═══════════════════════════════════════════════════════════
   2) لوحة الصفحة — خلفية WordPress نفسها
   ═══════════════════════════════════════════════════════════ */

/**
 * body بلون مصمت فقط. التدرّج المثبّت كان على body بـ
 * background-attachment: fixed فيُجبر المتصفّح على إعادة رسم النافذة
 * كاملة في كل إطار تمرير (يختفي المحتوى ويبقى السديم). التدرّج انتقل
 * إلى .aa-ui-atmosphere أدناه — نفس المظهر، بلا تكلفة التمرير.
 */
body.wp-admin:has(.Shihab-madar-wrap),
body.wp-admin:has(.Shihab-majarra-wrap) {
	background-color: var(--aa-canvas-bg, #dfe7f4) !important;
	background-image: none !important;
}

body.wp-admin:has(.Shihab-madar-wrap) #wpcontent,
body.wp-admin:has(.Shihab-majarra-wrap) #wpcontent,
body.wp-admin:has(.Shihab-madar-wrap) #wpbody,
body.wp-admin:has(.Shihab-majarra-wrap) #wpbody,
body.wp-admin:has(.Shihab-madar-wrap) #wpbody-content,
body.wp-admin:has(.Shihab-majarra-wrap) #wpbody-content,
body.wp-admin:has(.Shihab-madar-wrap) #wpfooter,
body.wp-admin:has(.Shihab-majarra-wrap) #wpfooter {
	background: transparent !important;
}

body.wp-admin:has(.Shihab-madar-wrap) #wpcontent,
body.wp-admin:has(.Shihab-majarra-wrap) #wpcontent {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
}

body.wp-admin:has(.Shihab-madar-wrap) #wpbody,
body.wp-admin:has(.Shihab-majarra-wrap) #wpbody,
body.wp-admin:has(.Shihab-madar-wrap) #wpbody-content,
body.wp-admin:has(.Shihab-majarra-wrap) #wpbody-content {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* تنبيهات WordPress — سطح فقط، بلا شريط جانبي / شخطات */
body.wp-admin:has(.Shihab-madar-wrap) #wpbody-content > .notice,
body.wp-admin:has(.Shihab-majarra-wrap) #wpbody-content > .notice {
	position: relative;
	overflow: hidden;
	border-radius: var(--aa-radius-md);
	border: 0 !important;
	border-inline-start: 0 !important;
	border-left: 0 !important;
	background: var(--aa-glass-surface-strong);
	box-shadow: var(--aa-glass-shadow-xs);
}

body.wp-admin:has(.Shihab-madar-wrap) #wpbody-content > .notice::before,
body.wp-admin:has(.Shihab-majarra-wrap) #wpbody-content > .notice::before {
	content: none !important;
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   3) طبقة السديم — markup من Shihab_madar_render_ui_atmosphere()
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap,
.Shihab-majarra-wrap {
	position: relative;
	isolation: isolate;
}

/**
 * الغلاف يدخل بحركة `aa-fade-in` التي تتضمّن translateY. أي transform على
 * الغلاف يجعله المرجع لأي `position: fixed` بداخله، فينحبس السديم داخل حدود
 * الغلاف بدل أن يملأ الشاشة. نستبدلها بحركة شفافية فقط — نفس الإحساس، بلا
 * containing block.
 */
@keyframes aa-glass-wrap-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

body.wp-admin .Shihab-madar-wrap,
body.wp-admin .Shihab-majarra-wrap {
	animation-name: aa-glass-wrap-in;
	/* يمنع أي transform لاحق من حبس position:fixed للسديم داخل الغلاف */
	transform: none;
}

.aa-ui-atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
	/* تدرّج اللوحة هنا بدل body — طبقة ثابتة تُرسم مرة ولا تُعاد مع التمرير */
	background-color: var(--aa-canvas-bg, #dfe7f4);
	background-image: var(--aa-canvas-gradient);
	background-repeat: no-repeat;
	background-size: cover;
}

/* — 3a) شبكة رفيعة تعطي إحساس «سطح» تحت الزجاج (ثابتة) — */
.aa-ui-atmosphere__mesh {
	position: absolute;
	inset: -10%;
	opacity: 0.5;
	background-image:
		linear-gradient(var(--aa-canvas-mesh) 1px, transparent 1px),
		linear-gradient(90deg, var(--aa-canvas-mesh) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 8%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 8%, transparent 76%);
}

/**
 * — 3b) بؤر السديم —
 * الألوان مكتوبة بقيمة «ما بعد المزج» مباشرة: أي الدرجة التي كان
 * `mix-blend-mode: multiply` سينتجها فوق لوحة فاتحة. هكذا نحصل على العمق
 * نفسه بلا تكلفة وضع مزج.
 */
.aa-ui-atmosphere__spot {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

.aa-ui-atmosphere__spot--a {
	width: min(52rem, 110vw);
	height: min(52rem, 110vw);
	top: -20%;
	inset-inline-end: -14%;
	background: radial-gradient(
		circle at 50% 50%,
		var(--aa-neb-a) 0%,
		color-mix(in srgb, var(--aa-neb-a) 55%, transparent) 30%,
		color-mix(in srgb, var(--aa-neb-a) 18%, transparent) 52%,
		transparent 72%
	);
	animation: aa-neb-drift-a calc(38s / var(--aa-neb-speed, 1)) ease-in-out infinite;
}

.aa-ui-atmosphere__spot--b {
	width: min(46rem, 100vw);
	height: min(46rem, 100vw);
	top: 26%;
	inset-inline-start: -18%;
	background: radial-gradient(
		circle at 50% 50%,
		var(--aa-neb-b) 0%,
		color-mix(in srgb, var(--aa-neb-b) 52%, transparent) 32%,
		color-mix(in srgb, var(--aa-neb-b) 16%, transparent) 54%,
		transparent 74%
	);
	animation: aa-neb-drift-b calc(47s / var(--aa-neb-speed, 1)) ease-in-out infinite;
}

.aa-ui-atmosphere__spot--c {
	width: min(48rem, 104vw);
	height: min(48rem, 104vw);
	bottom: -26%;
	inset-inline-end: 10%;
	background: radial-gradient(
		circle at 50% 50%,
		var(--aa-neb-c) 0%,
		color-mix(in srgb, var(--aa-neb-c) 50%, transparent) 32%,
		color-mix(in srgb, var(--aa-neb-c) 15%, transparent) 55%,
		transparent 74%
	);
	animation: aa-neb-drift-c calc(56s / var(--aa-neb-speed, 1)) ease-in-out infinite;
}

/* بؤرة دافئة خافتة — تكسر برودة الكحلي دون تغيير الهوية */
.aa-ui-atmosphere__spot--d {
	width: min(34rem, 82vw);
	height: min(34rem, 82vw);
	bottom: 8%;
	inset-inline-start: 4%;
	background: radial-gradient(
		circle at 50% 50%,
		var(--aa-neb-e) 0%,
		color-mix(in srgb, var(--aa-neb-e) 42%, transparent) 34%,
		transparent 70%
	);
	animation: aa-neb-drift-d calc(64s / var(--aa-neb-speed, 1)) ease-in-out infinite;
}

/**
 * البؤرة الخامسة والشفق أُسقطا في v3.1: كانا أغلى طبقتين (conic بقياس
 * 150vmax مع blur 90px) وأقلّهما أثراً بصرياً. العنصران يبقيان في الـ markup
 * بلا أنماط — لا تُعِد إحياءهما بمرشِّحات.
 */
.aa-ui-atmosphere__spot--e,
.aa-ui-atmosphere__aurora {
	display: none;
}

/* — 3c) حبيبات دقيقة: تمنع تحزّم التدرّجات (banding). ثابتة وبلا وضع مزج — */
.aa-ui-atmosphere__grain {
	position: absolute;
	inset: 0;
	opacity: 0.16;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

/* — 3d) تعتيم الأطراف — يجمع النظر نحو المحتوى — */
.aa-ui-atmosphere__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 88% 74% at 50% 40%,
			transparent 42%,
			color-mix(in srgb, var(--aa-secondary) 12%, transparent) 100%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, #fff 26%, transparent) 0%,
			transparent 22%,
			transparent 78%,
			color-mix(in srgb, var(--aa-primary) 8%, transparent) 100%
		);
}

/* المحتوى دائماً فوق السديم */
.Shihab-madar-wrap > :not(.aa-ui-atmosphere),
.Shihab-majarra-wrap > :not(.aa-ui-atmosphere) {
	position: relative;
	z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   4) الصدفة — الحاوية الزجاجية الكبرى
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap .aa-shell,
.Shihab-majarra-wrap .aa-shell {
	position: relative;
	border: 1px solid var(--aa-glass-border);
	background: linear-gradient(
		168deg,
		color-mix(in srgb, #fff 62%, transparent) 0%,
		color-mix(in srgb, #fff 44%, transparent) 100%
	);
	box-shadow: var(--aa-glass-shadow-float);
	animation: aa-glass-rise 0.5s var(--aa-ease-out, ease) both;
}

/* خيط ضوئي على الحافة العليا — علامة الزجاج المميّزة */
.Shihab-madar-wrap .aa-shell::before,
.Shihab-majarra-wrap .aa-shell::before {
	content: "";
	position: absolute;
	inset-inline: 8%;
	top: 0;
	z-index: 3;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, #fff 96%, transparent) 50%,
		transparent
	);
}

.Shihab-madar-wrap .aa-shell__nav,
.Shihab-majarra-wrap .aa-shell__nav {
	border-bottom: 1px solid var(--aa-glass-border-soft);
	background: var(--aa-glass-surface-muted);
}

/**
 * جسم الصدفة يبقى شفافاً: كل سطح أبيض إضافي هنا يُطفئ السديم خلف اللوحات.
 * التعتيم مسؤولية اللوحات نفسها، لا الحاوية.
 */
.Shihab-madar-wrap .aa-shell__body,
.Shihab-majarra-wrap .aa-shell__body {
	background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   5) مقدّمة التبويب
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap .aa-feature-intro,
.Shihab-majarra-wrap .aa-feature-intro {
	position: relative;
	overflow: visible;
	border: 1px solid var(--aa-glass-border);
	background: var(--aa-glass-surface);
	box-shadow: var(--aa-glass-shadow);
}

.Shihab-madar-wrap .aa-feature-intro::after,
.Shihab-majarra-wrap .aa-feature-intro::after {
	content: "";
	position: absolute;
	inset-inline-end: -18%;
	top: -120%;
	z-index: 0;
	width: 60%;
	height: 340%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--aa-accent) 16%, transparent),
		transparent 68%
	);
}

.Shihab-madar-wrap .aa-feature-intro > *,
.Shihab-majarra-wrap .aa-feature-intro > * {
	position: relative;
	z-index: 1;
}

.Shihab-madar-wrap .aa-feature-intro__icon,
.Shihab-majarra-wrap .aa-feature-intro__icon {
	box-shadow:
		0 6px 18px color-mix(in srgb, var(--aa-primary) 34%, transparent),
		inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   6) لوحات المحتوى والبطاقات
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap .aa-ui-panel,
.Shihab-majarra-wrap .aa-ui-panel,
.Shihab-madar-wrap .aa-card,
.Shihab-majarra-wrap .aa-card {
	position: relative;
	overflow: hidden;
	overflow-clip-margin: var(--aa-frame-clip-margin, 8px);
	border: 1px solid var(--aa-glass-border);
	background-color: transparent;
	background-image: var(--aa-glass-surface);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: var(--aa-glass-shadow);
	transition:
		box-shadow 0.28s ease,
		border-color 0.22s ease;
}

.Shihab-madar-wrap .aa-ui-panel::after,
.Shihab-majarra-wrap .aa-ui-panel::after,
.Shihab-madar-wrap .aa-card::after,
.Shihab-majarra-wrap .aa-card::after {
	content: "";
	position: absolute;
	inset-inline: 10%;
	top: 0;
	z-index: 1;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, #fff 96%, transparent),
		transparent
	);
}

.Shihab-madar-wrap .aa-ui-panel:not(.aa-ui-panel--table-scroll):hover,
.Shihab-majarra-wrap .aa-ui-panel:not(.aa-ui-panel--table-scroll):hover,
.Shihab-madar-wrap .aa-card:hover,
.Shihab-majarra-wrap .aa-card:hover {
	border-color: var(--aa-glass-border-hover);
	box-shadow: var(--aa-glass-shadow-hover);
}

/* ═══════════════════════════════════════════════════════════
   7) بلاطات بنتو / إحصاءات / مجرّة hub
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap .aa-bento-card,
.Shihab-majarra-wrap .aa-bento-card,
.Shihab-madar-wrap .aa-stat-card,
.Shihab-majarra-wrap .aa-stat-card,
.Shihab-madar-wrap .aa-majarra-hub-tile,
.Shihab-majarra-wrap .aa-majarra-hub-tile {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--aa-glass-border);
	background: var(--aa-glass-surface);
	box-shadow: var(--aa-glass-shadow);
	transition:
		transform 0.26s var(--aa-ease-out),
		box-shadow 0.26s ease,
		border-color 0.2s ease;
}

/* توهّج زاويّ خفيف داخل البلاطة */
.Shihab-madar-wrap .aa-bento-card::before,
.Shihab-majarra-wrap .aa-bento-card::before,
.Shihab-madar-wrap .aa-stat-card::before,
.Shihab-majarra-wrap .aa-stat-card::before,
.Shihab-madar-wrap .aa-majarra-hub-tile::before,
.Shihab-majarra-wrap .aa-majarra-hub-tile::before {
	content: "";
	position: absolute;
	inset-inline-end: -30%;
	top: -70%;
	z-index: 0;
	width: 80%;
	height: 180%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--aa-accent) 13%, transparent),
		transparent 66%
	);
}

.Shihab-madar-wrap .aa-bento-card > *,
.Shihab-majarra-wrap .aa-bento-card > *,
.Shihab-madar-wrap .aa-stat-card > *,
.Shihab-majarra-wrap .aa-stat-card > *,
.Shihab-madar-wrap .aa-majarra-hub-tile > *,
.Shihab-majarra-wrap .aa-majarra-hub-tile > * {
	position: relative;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	.Shihab-madar-wrap .aa-bento-card:hover,
	.Shihab-majarra-wrap .aa-bento-card:hover,
	.Shihab-madar-wrap .aa-stat-card:hover,
	.Shihab-majarra-wrap .aa-stat-card:hover,
	.Shihab-madar-wrap .aa-majarra-hub-tile:hover,
	.Shihab-majarra-wrap .aa-majarra-hub-tile:hover {
		border-color: var(--aa-glass-border-hover);
		box-shadow: var(--aa-glass-shadow-hover);
		transform: translateY(calc(-1 * var(--aa-bento-card-hover-lift, 3px)));
	}
}

.Shihab-madar-wrap .aa-bento-card:active,
.Shihab-majarra-wrap .aa-bento-card:active,
.Shihab-madar-wrap .aa-stat-card:active,
.Shihab-majarra-wrap .aa-stat-card:active,
.Shihab-madar-wrap .aa-majarra-hub-tile:active,
.Shihab-majarra-wrap .aa-majarra-hub-tile:active {
	transform: scale(0.985);
}

/* ═══════════════════════════════════════════════════════════
   8) تنبيهات الصدفة
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap .aa-shell-alert,
.Shihab-majarra-wrap .aa-shell-alert {
	position: relative;
	overflow: hidden;
	border: 0;
	border-inline-start: 0;
	box-shadow: var(--aa-glass-shadow-xs);
}

.Shihab-madar-wrap .aa-shell-alert::before,
.Shihab-majarra-wrap .aa-shell-alert::before {
	content: none !important;
	display: none !important;
}

.Shihab-madar-wrap .aa-shell-alert--success,
.Shihab-majarra-wrap .aa-shell-alert--success {
	background: color-mix(in srgb, var(--aa-alert-success-surface) 92%, transparent);
	color: var(--aa-alert-success-text, var(--aa-success));
}

.Shihab-madar-wrap .aa-shell-alert--error,
.Shihab-majarra-wrap .aa-shell-alert--error {
	background: color-mix(in srgb, var(--aa-alert-error-surface) 92%, transparent);
	color: var(--aa-alert-error-text, var(--aa-danger));
}

.Shihab-madar-wrap .aa-shell-alert--warning,
.Shihab-majarra-wrap .aa-shell-alert--warning {
	background: color-mix(in srgb, var(--aa-alert-warning-surface) 92%, transparent);
	color: var(--aa-alert-warning-text, var(--aa-warning));
}

.Shihab-madar-wrap .aa-shell-alert--info,
.Shihab-majarra-wrap .aa-shell-alert--info {
	background: color-mix(in srgb, var(--aa-alert-info-surface) 92%, transparent);
	color: var(--aa-alert-info-text, var(--aa-info, var(--aa-primary)));
}

.Shihab-madar-wrap .aa-shell-alert--brand,
.Shihab-majarra-wrap .aa-shell-alert--brand {
	color: var(--aa-primary);
}

/* ═══════════════════════════════════════════════════════════
   9) منبثقات — الموضع الوحيد الذي يستحق backdrop-filter
   (خلفه محتوى صفحة حقيقي بتفاصيل، لا سديم ناعم)
   ═══════════════════════════════════════════════════════════ */

.Shihab-madar-wrap .aa-tk-modal__overlay,
.Shihab-majarra-wrap .aa-tk-modal__overlay,
.Shihab-madar-wrap .aa-modal-overlay,
.Shihab-majarra-wrap .aa-modal-overlay,
body.wp-admin .aa-tk-modal-overlay,
body.wp-admin .aa-shell-prompt-backdrop,
body.wp-admin .aa-majarra-edit-sheet-backdrop,
body.wp-admin #Shihab-majarra-notif-overlay,
body.wp-admin #aatk-onboard-root .aatk-onboard-backdrop {
	background: color-mix(in srgb, var(--aa-secondary) 42%, transparent);
	backdrop-filter: blur(var(--aa-glass-blur-strong));
	-webkit-backdrop-filter: blur(var(--aa-glass-blur-strong));
}

.Shihab-madar-wrap .aa-tk-modal__panel,
.Shihab-majarra-wrap .aa-tk-modal__panel,
.Shihab-madar-wrap .aa-modal-panel,
.Shihab-majarra-wrap .aa-modal-panel,
body.wp-admin .aa-shell-prompt-panel,
body.wp-admin .aa-majarra-edit-sheet,
body.wp-admin #Shihab-majarra-notif-overlay .aa-tk-modal__panel,
body.wp-admin #aatk-onboard-root .aatk-onboard-panel {
	border: 1px solid var(--aa-glass-border);
	background: var(--aa-glass-surface-strong);
	box-shadow: var(--aa-glass-shadow-float);
}

/* ═══════════════════════════════════════════════════════════
   10) إتاحة وأداء
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.aa-ui-atmosphere__spot {
		animation: none !important;
	}

	.Shihab-madar-wrap .aa-shell,
	.Shihab-majarra-wrap .aa-shell,
	.Shihab-madar-wrap .aa-ui-panel,
	.Shihab-majarra-wrap .aa-ui-panel,
	.Shihab-madar-wrap .aa-card,
	.Shihab-majarra-wrap .aa-card,
	.Shihab-madar-wrap .aa-bento-card,
	.Shihab-majarra-wrap .aa-bento-card,
	.Shihab-madar-wrap .aa-stat-card,
	.Shihab-majarra-wrap .aa-stat-card {
		animation: none;
		transition: none;
	}
}

/* الشاشات الصغيرة — طبقات أقل */
@media (max-width: 960px) {
	.aa-ui-atmosphere__spot--c,
	.aa-ui-atmosphere__spot--d {
		display: none;
	}

	.aa-ui-atmosphere__mesh {
		opacity: 0.24;
	}

	.aa-ui-atmosphere__grain {
		opacity: 0.1;
	}
}

/* وضع اللمس (782) — تجميد السديم بالكامل أثناء التمرير */
@media (max-width: 782px) {
	.aa-ui-atmosphere__spot {
		animation: none !important;
		will-change: auto;
	}

	.aa-ui-atmosphere__spot--b,
	.aa-ui-atmosphere__spot--c,
	.aa-ui-atmosphere__spot--d {
		display: none;
	}

	.aa-ui-atmosphere__grain {
		display: none;
	}

	.aa-ui-atmosphere__mesh {
		opacity: 0.16;
	}
}