/**
 * EduFrame — تنسيقات صفحة الطالب «درجاتي» (1.12.0)
 *
 * أساس الواجهة الرسومية الأيقونية للطالب: درجات الآن، وواجبات وتقييمات
 * ورسائل لاحقًا. كل قسم بطاقة (.es-card) داخل شبكة (.es-grid).
 *
 * القواعد:
 * - بلا مكتبات خارجية وبلا خطوط بعيدة — كل شيء محلي.
 * - RTL أولًا، ومتجاوب حتى الجوال.
 * - الألوان والمقاسات عبر متغيرات :root لتسهيل التخصيص لاحقًا.
 * - تُحمَّل فقط في صفحة الطالب (من EduFrame_Router::render_student_page).
 *
 * @package EduFrame
 */

:root {
	/* (1.17.0) هوية الإضافة اللونية الملزمة — لا لون خارج هذه القائمة:
	   #3D7EB9 #0DA9A6 #07A869 #15445A #C1B48A #C2C1C1 + تدرجات rgba منها + الأبيض المحايد */
	--es-bg: rgba(194, 193, 193, 0.25);
	--es-surface: #ffffff;
	--es-border: rgba(194, 193, 193, 0.55);
	--es-text: #15445A;
	--es-text-muted: #456A7C; /* (1.30.2) كان #C2C1C1 (1.8:1)؛ (1.62.4) #5A7A8B كان 4.2:1 على الخلفيات المظلَّلة — الآن ≥4.9:1 */
	/* (1.62.4) «حبر» النص الصغير: درجات أغمق من ألوان الهوية نفسها (مزجها بالكحلي #15445A) —
	   الأصلية تبقى للأيقونات والحدود والأرقام الكبيرة؛ النص الصغير يحتاج 4.5:1 على الأقل. */
	--es-ink-primary: #316D9C; /* #3D7EB9 + 30% كحلي — 4.7:1 */
	--es-ink-teal: #126C78;    /* #0DA9A6 + 60% كحلي — 5.2:1 */
	--es-ink-green: #0E7662;   /* #07A869 + 50% كحلي — 4.7:1 */
	--es-primary: #3D7EB9;
	--es-primary-soft: rgba(61, 126, 185, 0.08);
	--es-accent-grades: #C1B48A;
	--es-accent-assignments: #0DA9A6;
	--es-accent-evaluations: #07A869;
	--es-accent-messages: #3D7EB9;
	--es-accent-points: #C1B48A;
	--es-accent-notes: #0DA9A6;
	--es-radius: 14px;
	--es-shadow: 0 1px 3px rgba(21, 68, 90, 0.08), 0 4px 14px rgba(21, 68, 90, 0.05);
	--es-font: Tahoma, "Segoe UI", Arial, sans-serif;

	/* (1.20.8) لوحة فاتحة صراحةً: بلا هذا التصريح يقلبها الوضع الداكن
	   القسري في Chrome/Android فيهبط التباين إلى حدّ غير مقروء. */
	color-scheme: light;
}

html {
	/* iOS Safari يكبّر أحجام الخطوط تلقائيًا عند تدوير الجهاز أفقيًا. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.eduframe-student-body {
	font-family: var(--es-font);
	background: var(--es-bg);
	color: var(--es-text);
	margin: 0;
	padding: 28px 14px 40px;

	/* (1.20.8) 100vh على متصفحات الجوال يحسب ارتفاعًا لا يوافق المرئي فعلًا،
	   فيقفز التخطيط مع ظهور شريط العنوان واختفائه. dvh يتبع المرئي الحقيقي،
	   و100vh يبقى احتياطيًا للمتصفحات الأقدم لأنه يسبقه في نفس الخاصية. */
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
}

/* ——— الهيكل العام ——— */

.es-shell {
	max-width: 860px;
	margin: 0 auto;
}

/* (1.19.0 ب5) قواعد .es-header أُزيلت مع اللافتة نفسها بأمر المالك. */

/* ——— شبكة البطاقات ——— */

.es-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 720px) {
	.es-grid.es-grid-multi {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ——— البطاقة ——— */

.es-card {
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
	overflow: hidden;
}

.es-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid var(--es-border);
	background: var(--es-primary-soft);
	color: var(--es-text);
}

.es-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--es-border);
	color: var(--es-ink-primary);
	flex-shrink: 0;
}

/* لون مميّز لكل قسم — جاهز للأقسام المستقبلية */
.es-card-grades .es-card-icon { color: var(--es-accent-grades); }
.es-card-assignments .es-card-icon { color: var(--es-accent-assignments); }
.es-card-evaluations .es-card-icon { color: var(--es-ink-green); }
.es-card-messages .es-card-icon { color: var(--es-accent-messages); }

.es-card-body {
	padding: 16px 18px 18px;
}

/* ——— جدول الدرجات ——— */

/* (1.20.12) تخطيط تلقائي يتكيّف مع أي مدخلات، لا نِسَب ثابتة.
   (1.20.13) عاد شريط التمرير الأفقي شبكةَ أمان: حين يضيق الإطار عن حدٍّ
   أدنى معقول للجدول، ينزلق بدل أن ينضغط انضغاطًا يقصّ المحتوى. على الجوال
   (≤560px) يتحوّل الجدول بطاقاتٍ فيُلغى التمرير والحدّ الأدنى معًا. */
.es-table-wrap {
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.es-table {
	width: 100%;
	min-width: 30em; /* دون هذا ينضغط الجدول ويقصّ المحتوى بدل أن ينزلق. */
	border-collapse: collapse;
	font-size: 14px;
	table-layout: auto;
}

.es-table th,
.es-table td {
	border: 1px solid var(--es-border);
	padding: 9px 11px;
	text-align: start;
	vertical-align: top;
}

.es-table th {
	background: rgba(194, 193, 193, 0.18);
	font-weight: 700;
	color: var(--es-text);
}

.es-table tbody tr:nth-child(even) {
	background: rgba(61, 126, 185, 0.05);
}

/* أعمدة النص (النشاط/الإجابة/التقييم): تلتف عند المسافات طبيعيًّا. النص
   المتّصل بلا مسافات (رابط) يُكسر بالقوة عبر anywhere — لا break-word:
   الأخيرة لا تكسر إن وجدت للمتصفح مخرجًا بتوسيع العمود، فكان الرابط الطويل
   يوسّع عموده و«يجوّع» عمود التاريخ حتى يفيض محتواه (nowrap) خارج الإطار. */
.es-table .es-cell-text,
.es-table td:first-child {
	overflow-wrap: anywhere;
	word-break: normal;
}

.es-table .es-cell-text {
	min-width: 6em; /* عرض معقول قبل الالتفاف، دون خنق التاريخ. */
}

.es-table .time {
	/* (1.20.13) تاريخ رقميّ «12/08/2026»: قصيرٌ فلا يُكسر (nowrap) والعمود
	   ضيق ثابت، فتقصر القائمة كلها عند تعدّد الأنشطة. الخلية تبقى بالاتجاه
	   الموروث (rtl) كي لا تنقلب محاذاتها ولا عنوان بطاقتها على الجوال. */
	white-space: nowrap;
	color: var(--es-text-muted);
	font-size: 13px;
}

/* النطاق ltr على الرقم وحده: أجزاؤه (يوم/شهر/سنة) تُقرأ بترتيبها الصحيح. */
.es-date-num {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ——— قصّ النص الطويل (1.20.8) ——— */

.es-cell-text {
	overflow-wrap: break-word;
}

.es-more summary {
	cursor: pointer;
	list-style: none;
}

.es-more summary::-webkit-details-marker {
	display: none;
}

.es-more-hint {
	color: var(--es-ink-primary);
	font-size: 12px;
	white-space: nowrap;
}

.es-more[open] summary {
	display: none;
}

.es-more-full {
	white-space: pre-wrap;
}

/* ——— الحالة الفارغة ——— */

.es-empty {
	color: var(--es-text-muted);
	text-align: center;
	padding: 26px 0;
	margin: 0;
	font-size: 15px;
}

/* ——— جوال: الجدول يتكدّس بطاقات (1.20.12) ———
   تحت 560px تتزاحم خمسة أعمدة فيصير التاريخ سطرًا رأسيًّا حرفًا حرفًا مهما
   فعلنا. الحل الأمتن عبر المتصفحات: كل صف بطاقة، وكل خلية سطر «عنوان: قيمة»
   يُبنى العنوان من data-label. لا تمرير أفقي ولا أعمدة مضغوطة. */
@media (max-width: 560px) {
	/* (1.20.13) في وضع البطاقات يُلغى الحدّ الأدنى والتمرير: لا جدول ينزلق. */
	.es-table-wrap {
		overflow-x: visible;
	}

	.es-table {
		border: 0;
		min-width: 0;
	}

	.es-table thead {
		/* clip لا display:none: يبقى العنوان متاحًا لقارئات الشاشة. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.es-table,
	.es-table tbody,
	.es-table tr,
	.es-table td {
		display: block;
		width: auto;
	}

	.es-table tr {
		border: 1px solid var(--es-border);
		border-radius: 10px;
		margin-bottom: 12px;
		padding: 6px 12px;
		background: var(--es-surface);
	}

	.es-table tbody tr:nth-child(even) {
		background: var(--es-surface);
	}

	.es-table td {
		border: 0;
		border-bottom: 1px solid var(--es-border);
		padding: 8px 0;
		display: flex;
		gap: 10px;
		align-items: baseline;
	}

	.es-table td:last-child {
		border-bottom: 0;
	}

	.es-table td::before {
		content: attr(data-label);
		flex: 0 0 5.5em;
		font-weight: 700;
		font-size: 12px;
		color: var(--es-text);
	}

	/* في وضع البطاقات التاريخ يلتف طبيعيًّا — لا نطاق ضيق يخنقه. */
	.es-table .time {
		white-space: normal;
	}

	.es-table .es-cell-text {
		min-width: 0;
	}
}

/* ——— جوال ضيق جدًّا ——— */

@media (max-width: 360px) {
	.es-table td::before {
		flex-basis: 4.5em;
	}
}

/* (1.15.0) ترويسة الترحيب — اسم الطالب + ترحيب حسب الوقت + عبارة تشجيعية */
.es-greet {
	background: linear-gradient(135deg, #3D7EB9, #0DA9A6);
	color: #fff;
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
	padding: 18px 22px;
	margin-bottom: 18px;
}
.es-greet .es-greet-hi {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}
.es-greet .es-greet-hi strong {
	font-weight: 800;
}
.es-greet .es-greet-cheer {
	margin: 6px 0 0;
	font-size: 14px;
	opacity: 0.92;
	line-height: 1.8;
}

/* (1.17.0) شريط إنجاز الأنشطة داخل الترويسة — خفيف وشفاف فوق التدرج */
.es-progress {
	margin-top: 12px;
}
.es-progress .es-progress-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
	opacity: 0.95;
}
.es-progress .es-progress-track {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	overflow: hidden;
}
.es-progress .es-progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #fff;
	transition: width 0.6s ease;
}

/* (1.17.0) بطاقة «نقاطي» — قراءة سريعة: المجموع بإشارته + إيجابي/سلبي برموز */
.es-card-points .es-card-icon { color: var(--es-accent-points); }
.es-points {
	text-align: center;
}
.es-points .es-points-total {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 26px;
	border-radius: 999px;
	background: var(--es-primary-soft);
	margin-bottom: 14px;
}
.es-points .es-points-num {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	direction: ltr;
}
.es-points .es-points-total.es-pts-pos .es-points-num { color: #07A869; }
.es-points .es-points-total.es-pts-neg .es-points-num { color: #15445A; }
.es-points .es-points-total.es-pts-zero .es-points-num { color: #C2C1C1; }
.es-points .es-points-cap {
	font-size: 14px;
	font-weight: 700;
	color: var(--es-text);
}
.es-points .es-points-row {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}
.es-points .es-points-pos { color: var(--es-ink-green); } /* (1.62.4) */
.es-points .es-points-neg { color: #15445A; }

/* (1.20.0) بطاقة «ملاحظاتي» — العامة لمرحلته + الخاصة به؛ مجموعتان بتسمية واضحة */
.es-card-notes .es-card-icon { color: var(--es-accent-notes); }
.es-notes-group {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--es-ink-teal); /* (1.62.4) */
}
.es-notes-list + .es-notes-group {
	margin-top: 14px;
}
.es-notes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.es-note {
	background: rgba(13, 169, 166, 0.07);
	border: 1px solid rgba(13, 169, 166, 0.28);
	border-inline-start: 4px solid var(--es-accent-notes);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--es-text);
}
.es-note .es-note-date {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--es-text-muted);
	direction: ltr;
	text-align: left;
}

/* بطاقة «بياناتي» — الرقم المميّز (1.25.8) */
.es-mynum {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.es-mynum-label {
	font-weight: 700;
	color: var(--es-text);
}

.es-mynum-code {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--es-ink-primary);
	background: var(--es-bg);
	padding: 6px 16px;
	border-radius: 10px;
	direction: ltr;
}

.es-mynum-hint {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--es-text-muted);
}

/* النتيجة المختصرة في جدول الدرجات (1.25.8) */
.es-result-brief {
	font-weight: 700;
	color: var(--es-ink-primary);
	text-align: start; /* (1.33.2) بمحاذاة بقية الأعمدة (يمينًا في RTL) — كانت ltr+center فتبدو شاذّة */
	unicode-bidi: isolate;
}
.es-result-brief > * { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* الرقم نفسه «85/100» يُقرأ يسارًا لليمين */

/* ═══ (1.25.17) دفعة تحسينات الطالب الأولى ═══ */

/* مطلوب منك */
.es-card-pending { --es-card-accent: var(--es-accent-assignments); }
.es-pending-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.es-pending { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--es-border); border-radius: 10px; background: var(--es-surface); }
.es-pending.is-soon { border-color: var(--es-accent-evaluations); background: var(--es-primary-soft); }
.es-pending-title { font-weight: 700; color: var(--es-ink-primary); text-decoration: none; }
.es-pending-title:hover { text-decoration: underline; }
.es-pending-close { font-size: 12.5px; color: var(--es-text); white-space: nowrap; }
.es-pending.is-soon .es-pending-close { font-weight: 700; color: var(--es-ink-green); }
.es-pending-open { font-size: 12px; color: var(--es-text-muted); }

/* رابط النشاط في جدول الدرجات */
.es-act-link { color: var(--es-ink-primary); text-decoration: none; font-weight: 600; }
.es-act-link:hover { text-decoration: underline; }
/* (1.64.3) أهداف لمس 44 بكسل على الأقل (كانت 16–19). */
.es-pending-title, .es-act-link { display: inline-flex; align-items: center; min-height: 44px; }

/* التاريخ النسبي بجانب الرقمي */

/* سبب النقاط */
.es-points-recent { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--es-border); display: grid; gap: 6px; }
.es-points-recent li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.es-rp-emoji { font-size: 16px; }
.es-rp-group { font-size: 12px; color: var(--ef-ink-60, #666); background: var(--ef-ink-08, #eef3f7); border-radius: 10px; padding: 1px 7px; } /* (1.90.0) علامة المجموعة */
.es-rp-delta { font-weight: 800; }
.es-points-recent li.is-pos .es-rp-delta { color: var(--es-ink-green); }
.es-points-recent li.is-neg .es-rp-delta { color: var(--es-text); opacity: .75; }
.es-rp-when { font-size: 11.5px; color: var(--es-text-muted); }

/* ═══ (1.25.18) دفعة الطالب الثانية: جديد + قرأتها + المحاولات ═══ */
.es-new { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; color: var(--es-surface); background: var(--es-accent-evaluations); border-radius: 999px; padding: 1px 8px; vertical-align: middle; margin-inline-start: 4px; }
.es-attempts { display: block; font-size: 11.5px; color: var(--es-text-muted); font-weight: 400; margin-top: 2px; }
.es-note-ack-form { display: inline; margin: 0; }
.es-note-ack { font: inherit; font-size: 12px; font-weight: 700; color: var(--es-ink-primary); background: var(--es-primary-soft); border: 1px solid var(--es-border); border-radius: 999px; padding: 3px 10px; cursor: pointer; margin-inline-start: 6px; }
.es-note-ack:hover { background: var(--es-surface); }
.es-note-ack.is-done { color: var(--es-ink-green); background: transparent; border-color: transparent; cursor: default; }
.es-note.is-read { background: transparent; border-inline-start-color: var(--es-border); } /* (1.62.4) كانت شفافية .8 تُسقط تواريخها إلى 3.5:1 — المقروءة الآن بلا تظليل، و«✓ قرأتها» تكفي */

/* ═══ (1.25.19) دفعة الطالب الثالثة: الاتجاه + الشارات + احفظ صفحتك ═══ */
.es-trend { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--es-primary-soft); font-weight: 700; color: var(--es-text); }
.es-trend-delta { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.es-trend.is-up .es-trend-delta { color: var(--es-ink-green); }
.es-trend.is-down .es-trend-delta { color: var(--es-text); opacity: .8; }
.es-trend.is-flat .es-trend-delta { color: var(--es-text-muted); }

.es-card-badges { --es-card-accent: var(--es-accent-points); }
.es-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.es-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 88px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--es-border); background: var(--es-surface); text-align: center; }
.es-badge-emoji { font-size: 26px; line-height: 1; }
.es-badge-label { font-size: 12px; font-weight: 700; color: var(--es-text); }
.es-badge.is-earned { border-color: var(--es-accent-points); box-shadow: var(--es-shadow); }
.es-badge.is-next { border-style: dashed; } /* (1.62.4) بلا شفافية على النص (كان 4.2:1) — الإطار المتقطّع والرمز الرمادي يكفيان */
.es-badge.is-next .es-badge-emoji { filter: grayscale(1); opacity: .6; }
.es-badge-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--es-border); overflow: hidden; }
.es-badge-bar i { display: block; height: 100%; background: var(--es-accent-evaluations); }
.es-badge small { font-size: 10.5px; color: var(--es-text-muted); }

.es-card-save { --es-card-accent: var(--es-accent-messages); }
.es-save-hint { margin: 0 0 8px; font-size: 13.5px; color: var(--es-text); }
.es-save-link input { width: 100%; font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--es-border); border-radius: 8px; background: var(--es-primary-soft); color: var(--es-text); }
.es-save-note { margin: 6px 0 0; font-size: 12px; color: var(--es-text-muted); }

/* ═══ (1.25.19) الوضع الليلي — لوحة داكنة من الهوية نفسها ═══
   الكحلي #15445A أرضيةً، والسطوح بتدرّجه، والنصّ رمادي الهوية #C2C1C1،
   والتشديدات (#3D7EB9 #0DA9A6 #07A869 #C1B48A) كما هي — لا لون جديد. */
/* (1.33.2) الوضع الليلي بثلاث حالات (الإعدادات): تلقائي = يتبع الهاتف ما لم يُطفأ
   (.es-light)؛ مفعَّل دائمًا = .es-dark. التوكنات والقواعد واحدة في الحالين. */
@media (prefers-color-scheme: dark) {
	body:not(.es-light) {
		--es-bg: #15445A;
		--es-surface: rgba(255, 255, 255, 0.06);
		--es-border: rgba(194, 193, 193, 0.22);
		--es-text: #ffffff;
		--es-text-muted: #DADADA; /* (1.62.4) كان rgba(194,193,193,.75) ≈ 3.1:1 على السطوح — الآن ≥4.7:1 */
		--es-ink-primary: #D8E5F1; /* (1.62.4) الأزرق فاتحًا — كان #3D7EB9 على الكحلي 1.7:1 */
		--es-ink-teal: #B6E5E4;
		--es-ink-green: #B5E5D2;
		--es-primary: #3D7EB9;
		--es-primary-soft: rgba(61, 126, 185, 0.18);
		--es-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
	}
	body:not(.es-light) .es-card { background: rgba(255, 255, 255, 0.06); }
	body:not(.es-light) .es-badge, body:not(.es-light) .es-pending { background: rgba(255, 255, 255, 0.05); }
	body:not(.es-light) .es-new { color: #15445A; }
	body:not(.es-light) .es-points .es-points-neg, body:not(.es-light) .es-points .es-points-total.es-pts-neg .es-points-num { color: var(--es-text-muted); }
	body:not(.es-light) .es-note-ack.is-done { color: var(--es-ink-green); }
}
	body.es-dark {
		--es-bg: #15445A;
		--es-surface: rgba(255, 255, 255, 0.06);
		--es-border: rgba(194, 193, 193, 0.22);
		--es-text: #ffffff;
		--es-text-muted: #DADADA; /* (1.62.4) كان rgba(194,193,193,.75) ≈ 3.1:1 على السطوح — الآن ≥4.7:1 */
		--es-ink-primary: #D8E5F1; /* (1.62.4) الأزرق فاتحًا — كان #3D7EB9 على الكحلي 1.7:1 */
		--es-ink-teal: #B6E5E4;
		--es-ink-green: #B5E5D2;
		--es-primary: #3D7EB9;
		--es-primary-soft: rgba(61, 126, 185, 0.18);
		--es-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
	}
	body.es-dark .es-card { background: rgba(255, 255, 255, 0.06); }
	body.es-dark .es-badge, body.es-dark .es-pending { background: rgba(255, 255, 255, 0.05); }
	body.es-dark .es-new { color: #15445A; }
	body.es-dark .es-points .es-points-neg, body.es-dark .es-points .es-points-total.es-pts-neg .es-points-num { color: var(--es-text-muted); }
	body.es-dark .es-note-ack.is-done { color: var(--es-ink-green); }


/* ═══ (1.25.21) تذييل صفحة الطالب: روابط الرئيسية وتواصل معنا ═══ */
.es-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--es-border); }
.es-footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.es-footer-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--es-ink-primary); text-decoration: none; padding: 8px 16px; border: 1px solid var(--es-border); border-radius: 999px; background: var(--es-surface); }
.es-footer-link:hover { background: var(--es-primary-soft); }

/* ═══ (1.25.22) موقعي: الموقع من المتوسط + الترتيب ═══ */
.es-card-rank { --es-card-accent: var(--es-accent-evaluations); }
.es-rank-avgs { display: flex; gap: 14px; margin-bottom: 10px; }
.es-rank-avg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; background: var(--es-primary-soft); }
.es-rank-avg strong { font-size: 28px; color: var(--es-text); line-height: 1; }
.es-rank-avg small { font-size: 12px; color: var(--es-text-muted); }
.es-rank-class { background: var(--es-bg); }
.es-rank-msg { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.6; }
.es-rank.is-high .es-rank-msg { color: var(--es-ink-green); }
.es-rank.is-mid .es-rank-msg { color: var(--es-ink-primary); }
.es-rank.is-low .es-rank-msg { color: var(--es-text); }
.es-rank-explicit { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--es-border); font-size: 13px; font-weight: 700; color: var(--es-text-muted); text-align: center; }

/* ═══ (1.25.23) درس اليوم من Google Sheets ═══ */
.es-card-lesson { --es-card-accent: var(--es-accent-assignments); }
.es-lesson { padding: 12px 14px; border: 1px solid var(--es-border); border-radius: 12px; background: var(--es-surface); margin-bottom: 10px; }
.es-lesson.is-today { border-color: var(--es-accent-assignments); background: var(--es-primary-soft); }
.es-lesson-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.es-lesson-day { font-weight: 800; font-size: 15px; color: var(--es-text); }
.es-lesson.is-today .es-lesson-day::before { content: '📅 '; }
.es-lesson-dates { font-size: 12px; color: var(--es-text-muted); }
.es-lesson p { margin: 6px 0; font-size: 13.5px; line-height: 1.7; color: var(--es-text); }
.es-lesson-subject strong, .es-lesson-objectives strong, .es-lesson-notes strong { color: var(--es-ink-primary); }
.es-lesson-homework { padding: 8px 12px; border-radius: 10px; background: var(--es-surface); border-inline-start: 3px solid var(--es-accent-evaluations); }
.es-lesson-homework strong { color: var(--es-ink-green); }
.es-lesson-next-note { margin: 0 0 8px; font-size: 12.5px; color: var(--es-text-muted); }
.es-lessons-upcoming { margin-top: 6px; }
.es-lessons-upcoming summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--es-ink-primary); padding: 8px 0; list-style: none; }
.es-lessons-upcoming summary::before { content: '▸ '; }
.es-lessons-upcoming[open] summary::before { content: '▾ '; }
.es-lessons-upcoming .es-lesson { opacity: .9; }

/* ═══ (1.26.1) الدرجات: أحدث ٥ + «أظهر المزيد» بلا JS (checkbox hack) ═══ */
.es-more-check { display: none; }
/* الإخفاء فقط حين غير مُعلَّم — عند التعليم لا نفرض display (فتأخذ الصفوف
   قواعدها الأصلية: table-row على المكتب، block-بطاقة على الهاتف). */
.es-more-check:not(:checked) ~ .es-table-wrap .es-row-more,
.es-more-check:not(:checked) ~ table .es-row-more { display: none; }
.es-more-toggle { display: block; text-align: center; margin: 10px 0 0; padding: 9px 14px; border: 1px dashed var(--es-border); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--es-ink-primary); cursor: pointer; user-select: none; }
.es-more-toggle:hover { background: var(--es-primary-soft); }
.es-more-close { display: none; }
.es-more-check:checked ~ .es-more-toggle .es-more-open { display: none; }
.es-more-check:checked ~ .es-more-toggle .es-more-close { display: inline; }

/* (1.26.1) رابط مرفق بالملاحظة */
.es-note-link { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 2px; padding: 5px 12px; border-radius: 999px; background: var(--es-surface); border: 1px solid var(--es-accent-notes); color: var(--es-ink-teal); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.es-note-link:hover { background: var(--es-accent-notes); color: var(--es-surface); }

/* (1.27.0) الحضور في نقاطي */
.es-attendance { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.es-att-chip { font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--es-border); color: var(--es-text); background: var(--es-surface); }
.es-att-chip.is-absent { border-color: var(--es-text); }
.es-att-chip.is-late { border-color: var(--es-accent-points); }
.es-att-perfect { margin: 10px 0 4px; text-align: center; font-weight: 700; color: var(--es-ink-green); }

/* (1.28.4) بياناتي: تعريف + تحذير السرّية */
.es-me { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 10px; align-items: center; }
.es-me dt { font-weight: 700; color: var(--es-text-muted); font-size: 13px; }
.es-me dd { margin: 0; font-weight: 700; color: var(--es-text); }
.es-me-link { width: 100%; font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid var(--es-border); border-radius: 8px; background: var(--es-surface); color: var(--es-text); direction: ltr; }
.es-me-warn { margin: 8px 0 6px; padding: 8px 12px; border-radius: 10px; background: var(--es-surface); border: 1px solid var(--es-accent-points); color: var(--es-text); font-size: 13px; font-weight: 700; line-height: 1.7; }

/* (1.29.2) معنى الشارة مرئيًّا */
.es-badge-hint { display: block; font-size: 10.5px; color: var(--es-text-muted); font-weight: 400; line-height: 1.4; margin-top: 2px; }

/* (1.30.0) وسم المواد */
.es-subjects { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 0 4px; }
.es-subject { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; color: #ffffff; background: var(--es-primary); } /* (1.33.2) أبيض صريح — كان var(--es-surface) الشفاف في الليلي فيبهت */
.es-subject-1 { background: var(--es-accent-notes); }
.es-subject-2 { background: var(--es-accent-evaluations); }
.es-subject-3 { background: var(--es-accent-points); color: var(--es-text); }

/* (1.31.0) الأوسمة اليدوية — ميداليات كالمرجع */
.es-badges-title { margin: 4px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--es-text-muted); }
.es-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 14px; }
.es-award { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 16px; border: 1px solid var(--es-border); background: var(--es-surface); text-align: center; box-shadow: 0 1px 2px rgba(21,68,90,.06); }
.es-award .ef-medal { filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.es-award-label { font-size: 13px; font-weight: 800; color: var(--es-text); line-height: 1.3; }
.es-award-note { font-size: 10.5px; color: var(--es-text-muted); line-height: 1.4; }
.es-award-date { font-size: 10px; color: var(--es-text-muted); }

/* (1.36.0) الخطة الفردية */
.es-plan-intro { margin: 0 0 10px; font-weight: 800; color: var(--es-ink-green); font-size: 14px; }

/* (1.37.0) البطاقة التعليمية القابلة للقلب */
.es-flashcard { perspective: 1200px; }
.es-flip { display: grid; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-align: inherit; position: relative; } /* (1.44.10) grid: الحاوي بارتفاع الأطول من الوجهين */
.es-flip-face { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 180px; border-radius: 16px; padding: 18px 18px 14px; color: var(--es-text, #15445A); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box; border: 1.5px solid var(--es-border, rgba(194,193,193,.55)); } /* (1.44.11) خلفية فاتحة ليبرز لون السؤال/الجواب */
.es-flip-front { background: var(--es-surface, #fff); }
.es-flip { transform-style: preserve-3d; transition: transform .5s; }
.es-flashcard.is-flipped .es-flip { transform: rotateY(180deg); }
.es-flip-back { transform: rotateY(180deg); background: var(--es-surface, #fff); } /* (1.44.10) بلا absolute — يساهم في ارتفاع الحاوي فلا يُقصّ */
.es-flip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.es-flip-label { font-size: 13px; font-weight: 700; color: var(--es-text-muted, #5A7A8B); }
.es-flip-text { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.6; font-weight: 700; }
.es-flip-q { font-size: 20px; color: #8B1E3F; } /* (1.44.11) عنابيّ */
.es-flip-a { font-size: 20px; color: var(--es-ink-green); } /* (1.44.11) بحجم السؤال، أخضر */
.es-flip-note { font-size: 14.5px; color: var(--es-text, #15445A); opacity: .9; text-align: center; margin-top: 8px; line-height: 1.65; font-weight: 400; }
.es-flip-hint { font-size: 12.5px; color: var(--es-text-muted, #5A7A8B); text-align: center; margin-top: 10px; }
.es-flash-nav { text-align: center; margin-top: 12px; }
.es-flash-next { font: inherit; font-size: 14px; font-weight: 700; color: var(--es-text); background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 999px; padding: 7px 20px; cursor: pointer; }
.es-flash-next:hover { border-color: var(--es-primary); }

/* (1.40.0) «آخر درس» — شرائح أفقية بالسحب + ألسنة المواد (بدل النقاط). Zero-JS:
   روابط #id + scroll-snap؛ النقر على لسان يقفز لأوّل شريحة في مادته. يعمل في كل
   المتصفّحات (بلا حاجة لأي جدول تمرير هشّ). تُخفى الألسنة إن كانت مادة واحدة. */
.es-deck-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.es-deck-tab {
	font: inherit; cursor: pointer; font-size: 13px; font-weight: 800; text-decoration: none;
	padding: 5px 16px; border-radius: 999px;
	color: var(--es-text-muted); background: var(--es-surface); border: 1px solid var(--es-border);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.es-deck-tab:hover { color: var(--es-text); }
/* اللسان النشط: يتلوّن بلون مادته. الافتراضيّ (الأول) عبر .is-active؛ وعند القفز
   لشريحة، اللسان الموافق يُبرَز عبر :has(:target) (مدعوم في المتصفّحات الحالية). */
.es-deck-tab.es-subject-0 { --es-tab-bg: var(--es-accent-notes, #3D7EB9); }
.es-deck-tab.es-subject-1 { --es-tab-bg: var(--es-accent-evaluations, #07A869); }
.es-deck-tab.es-subject-2 { --es-tab-bg: var(--es-accent-points, #0DA9A6); }
.es-deck-tab.es-subject-3 { --es-tab-bg: #C1B48A; }
.es-deck-tab.is-plan-tab  { --es-tab-bg: var(--es-accent-evaluations, #07A869); }
.es-deck-tab.is-active { background: var(--es-tab-bg, var(--es-primary)); color: #fff; border-color: transparent; }
.es-deck-tab.es-subject-3.is-active { color: var(--es-ink-primary); }



.es-lessons-deck { position: relative; }
.es-deck-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.es-deck-track::-webkit-scrollbar { display: none; }
.es-deck-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; box-sizing: border-box; padding: 2px; }
.es-deck-slide.is-plan .es-lesson { border-inline-start: 4px solid var(--es-accent-evaluations, #07A869); }
/* (1.44.11) ألوان السؤال/الجواب في الوضع الليلي: عنابيّ أفتح ليقرأ على الداكن */
@media (prefers-color-scheme: dark) {
	body:not(.es-light) .es-flip-q { color: #E8A0B4; }
	body:not(.es-light) .es-flip-a { color: #4FD3A0; }
}
body.es-dark .es-flip-q { color: #E8A0B4; }
body.es-dark .es-flip-a { color: #4FD3A0; }
/* (1.48.0) صفحة دخول الطالب [eduframe_login] */
.ef-login { max-width: 420px; margin: 24px auto; padding: 28px 24px; border-radius: 18px; background: var(--es-surface, #fff); border: 1.5px solid var(--es-border, rgba(194,193,193,.55)); box-shadow: 0 8px 28px rgba(21,68,90,.08); text-align: center; font-family: inherit; }
.ef-login-title { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--es-primary, #15445A); }
.ef-login-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(194,69,45,.1); color: #C2452D; font-weight: 700; font-size: 14px; }
.ef-login-label { display: block; margin: 8px 0 8px; font-weight: 700; color: var(--es-text, #15445A); }
.ef-login-row { display: flex; gap: 8px; align-items: stretch; }
.ef-login-input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; font-size: 24px; letter-spacing: .35em; text-align: center; padding: 12px 10px; border: 2px solid var(--es-border, #ccd); border-radius: 12px; font-weight: 800; text-transform: uppercase; }
.ef-login-input:focus { outline: none; border-color: var(--es-accent-notes, #3D7EB9); box-shadow: 0 0 0 3px rgba(61,126,185,.18); }
.ef-login-eye { flex: 0 0 48px; border: 2px solid var(--es-border, #ccd); background: var(--es-surface, #fff); border-radius: 12px; font-size: 20px; cursor: pointer; }
.ef-login-submit { display: block; width: 100%; margin-top: 14px; padding: 13px; border: 0; border-radius: 12px; background: var(--es-accent-notes, #3D7EB9); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; }
.ef-login-submit:hover { filter: brightness(1.06); }
.ef-login-warn { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(193,180,138,.22); border: 1px solid #C1B48A; color: #15445A; font-size: 14px; font-weight: 700; line-height: 1.7; }
.ef-login-warn[hidden] { display: none; }
.ef-login-hint { margin: 12px 0 0; font-size: 13px; color: var(--es-text-muted, #5A7A8B); }

/* (1.62.3) آخر تحديث للصفحة وعمر الخطة */
.es-updated { margin: 8px 0 0; font-size: 13px; opacity: .92; }
.es-updated.is-stale { font-weight: 700; }
.es-lesson-fresh { margin: 10px 0 0; font-size: 13px; color: var(--es-text-muted, #4A6572); }

/* (1.65.0) وسم النشاط التدريبي. */
.es-practice { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(193, 180, 138, 0.25); color: var(--es-ink-primary); }

/* (1.70.0) «سلّمتَ ✓» في «مطلوب منك» + قسم «أعمالي» */
.es-pending-submitted { font-size: 12.5px; font-weight: 700; color: var(--es-accent-evaluations, #07A869); white-space: nowrap; }
.es-works { display: grid; gap: 8px; }
.es-work { padding: 0; border: 1px solid var(--es-border); border-inline-start: 4px solid #3D7EB9; border-radius: 10px; background: var(--es-surface); }
.es-work.is-graded { border-inline-start-color: #07A869; }
.es-work.is-locked { border-inline-start-color: #C2C1C1; }
.es-work.is-returned { border-inline-start-color: #C1B48A; }
.es-work-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 44px; box-sizing: border-box; }
.es-work-head::-webkit-details-marker { display: none; }
.es-work-head::before { content: '▾'; font-size: 18px; line-height: 1; color: #3D7EB9; margin-inline-end: 6px; transform: rotate(90deg); transition: transform .15s; } /* (1.74.3) سهم أوضح: مطويّ يشير إلى اليسار (نحو المحتوى في RTL)، مفتوح إلى الأسفل. */
[dir="ltr"] .es-work-head::before { transform: rotate(-90deg); }
.es-work[open] > .es-work-head::before { transform: rotate(0deg); }
.es-work-title { flex: 1 1 auto; font-weight: 800; color: var(--es-ink-primary); }
.es-work-state { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.es-work-body-wrap { padding: 0 14px 12px; border-top: 1px dashed var(--es-border); }
.es-work-body { margin: 8px 0 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.es-work-link { display: inline-block; margin-top: 6px; font-weight: 700; color: #3D7EB9; direction: ltr; word-break: break-all; }
.es-work-meta { margin: 6px 0 0; font-size: 12px; opacity: .75; }
.es-work-note { margin: 8px 0 0; padding: 8px 12px; border-inline-start: 3px solid #07A869; background: rgba(7,168,105,.08); border-radius: 8px; font-size: 13.5px; line-height: 1.7; }
.es-work-open { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 16px; border-radius: 10px; background: #3D7EB9; color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none; }
.es-work-open:hover { background: #15445A; color: #fff; }
.es-work-more { display: block; width: 100%; min-height: 44px; border: 1px dashed var(--es-border); border-radius: 10px; background: transparent; color: #3D7EB9; font: inherit; font-weight: 800; cursor: pointer; }
.es-work-more:hover { background: var(--es-primary-soft); }
.es-work-thumb { display: inline-block; margin-top: 10px; border: 1px solid var(--es-border); border-radius: 8px; overflow: hidden; background: #fff; max-width: 260px; }
.es-work-thumb img { display: block; max-width: 100%; height: auto; }
.es-work-pdf { display: inline-block; margin-top: 10px; font-weight: 800; color: #3D7EB9; }
.es-work-audio { display: block; margin-top: 10px; }
.es-work-audio audio { width: 100%; max-width: 420px; vertical-align: middle; }
/* (1.74.2) «درجاتي» بطاقات كـ«أعمالي»: النتيجة في الرأس، والبند والتاريخ في سطر واحد داخلها. */
.es-grades-list .es-work-head .es-result-brief { font-size: 14px; }
.es-grade-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.es-grade-cat + .es-grade-facts { margin-top: 4px; opacity: .85; } /* (1.87.1) السطر الثاني أخف */

/* (1.77.0) «أيقونتي» أعلى «بياناتي»: دائرة 72px بلون بطاقته، وشبكة اختيار بأزرار 44px. */
.es-av { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--es-border); border-radius: 14px; background: var(--es-primary-soft); }
.es-av-circle { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 800; line-height: 1; flex-shrink: 0; box-shadow: 0 2px 6px rgba(21,68,90,.18); }
.es-av-circle.has-emoji { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif; font-size: 40px; font-weight: 400; }
.es-av-txt b { display: block; color: var(--es-text); font-size: 15px; }
.es-av-txt small { color: var(--es-text-muted); font-size: 12.5px; }
.es-av-pick { margin: 0 0 14px; }
.es-av-pick > summary { list-style: none; }
.es-av-pick > summary::-webkit-details-marker { display: none; }
.es-av-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--es-primary); border-radius: 999px; background: var(--es-surface); color: var(--es-primary); font-weight: 700; font-size: 14px; cursor: pointer; }
.es-av-btn:focus-visible, .es-av-opt:focus-visible, .es-av-reset:focus-visible { outline: 3px solid var(--es-primary); outline-offset: 2px; }
.es-av-pick[open] > .es-av-btn { background: var(--es-primary); color: #fff; }
.es-av-form { margin-top: 10px; padding: 10px; border: 1px solid var(--es-border); border-radius: 14px; background: var(--es-surface); }
.es-av-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.es-av-group legend { grid-column: 1 / -1; padding: 0; margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--es-text-muted); }
.es-av-opt { height: 44px; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 10px; background: rgba(21,68,90,.05); font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif; font-size: 24px; line-height: 1; cursor: pointer; }
.es-av-opt.is-on { border-color: var(--es-primary); background: var(--es-primary-soft); box-shadow: inset 0 0 0 1px var(--es-primary); }
.es-av-opt:disabled { opacity: .4; cursor: not-allowed; }
.es-av-left { margin: 4px 0 0; text-align: center; font-size: 12.5px; color: var(--es-text-muted); }
.es-av-reset { font: inherit; font-weight: 700; color: var(--es-primary); background: none; border: 0; padding: 6px 4px; min-height: 32px; cursor: pointer; }
.es-av-msg { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #FDF3E3; color: #8a5a00; font-weight: 700; font-size: 13px; }
.es-av-msg.is-ok { background: #E6F6EF; color: #05774a; }
@media (max-width: 360px) { .es-av-group { grid-template-columns: repeat(5, 1fr); } }

/* (1.78.0) مرفق الملاحظة: صورة مصغّرة، مشغّل صوت، زرّ ملف. */
.es-note-att { display: block; margin: 8px 0; }
.es-note-att-img { max-width: 260px; }
.es-note-att-img img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--es-border); }
.es-note-att-audio { width: 100%; max-width: 360px; height: 40px; }
.es-note-att-file { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--es-primary); border-radius: 999px; color: var(--es-primary); font-weight: 700; text-decoration: none; }

/* (1.89.0) شريط المستوى (XP) في «نقاطي» */
.es-xp-card { margin: 12px 0 6px; padding: 12px 14px; border-radius: 12px; background: rgba(61, 126, 185, 0.06); border: 1px solid rgba(194, 193, 193, 0.6); }
.es-xp-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.es-xp-badge { font-weight: 800; font-size: 14px; color: #15445A; }
.es-xp-next { font-size: 12.5px; color: #5A7A8B; font-weight: 600; }
.es-xp-next.is-max { color: #07A869; font-weight: 800; }
.es-xp-track { display: block; width: 100%; height: 10px; background: rgba(21, 68, 90, 0.12); border-radius: 999px; overflow: hidden; }
.es-xp-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0DA9A6, #07A869); transition: width .6s ease; }
.es-xp-tier-5 .es-xp-fill, .es-xp-tier-6 .es-xp-fill { background: linear-gradient(90deg, #3D7EB9, #15445A); }
@media (prefers-color-scheme: dark) { body:not(.ef-light) .es-xp-card { background: rgba(255,255,255,.06); } body:not(.ef-light) .es-xp-badge { color: #fff; } body:not(.ef-light) .es-xp-next { color: #C2C1C1; } }
body.ef-dark .es-xp-card { background: rgba(255,255,255,.06); } body.ef-dark .es-xp-badge { color: #fff; } body.ef-dark .es-xp-next { color: #C2C1C1; }