/*
 * Exam Library — front end styles.
 *
 * صُمّم هذا الملف ليطابق مظهر ملفات DZexame بالضبط، مع إبقاء التحكم الكامل
 * عبر متغيرات --el-* التي تحقنها لوحة التصميم في الإدارة (الألوان، حجم الخط،
 * حجم البطاقات، الفراغ الداخلي، ارتفاع العارض... إلخ).
 */

.el {
	--el-accent: #2563eb;
	--el-accent-2: #7c4dff;
	--el-accent-grad: linear-gradient(135deg, #2563eb, #7c4dff);
	--el-accent-soft: #eff6ff;
	--el-accent-ink: #1d4ed8;
	--el-ok: #16a34a;
	--el-ok-soft: #f0fdf4;
	--el-danger: #dc2626;
	--el-danger-soft: #fef2f2;
	--el-surface: var(--el-card-bg, #ffffff);
	--el-card-bg: #ffffff;
	--el-page-bg: #f8f9fa;
	--el-line: #e2e8f0;
	--el-line-soft: #f1f5f9;
	--el-ink: #1e293b;
	--el-muted: #64748b;
	--el-radius: 10px;
	--el-radius-sm: 6px;
	--el-radius-lg: 12px;
	--el-scale: var(--el-scale-mobile, 1);
	--el-heading-scale: 1;
	--el-pad: 18px 14px;
	--el-row-pad: 14px;
	--el-viewer-h: 60vh;
	--el-card-min: 130px;
	--el-gap: 10px;

	/* Responsive text scale: phone value is the base, desktop overrides below. */
	--el-scale-mobile: 1;
	--el-scale-desktop: 1;

	/* Card controls (subject + section tiles). */
	--el-card-title-size: 0.92rem;        /* phone card title size  */
	--el-card-title-size-lg: 0.95rem;     /* desktop card title size */
	--el-card-count-size: 0.68rem;
	--el-card-icon: 46px;                 /* phone icon box (subject) */
	--el-card-icon-lg: 56px;              /* desktop icon box (subject) */
	--el-card-pad: 14px;                  /* phone card padding */
	--el-card-pad-lg: 20px 16px;          /* desktop card padding */
	--el-tile-default: var(--el-accent);  /* fallback card colour */

	font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: calc(1rem * var(--el-scale));
	color: var(--el-ink);
	line-height: 1.5;
}

.el,
.el * {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.el a {
	text-decoration: none;
	color: inherit;
}

.el img,
.el svg {
	max-width: 100%;
}

/* ===== Card ===== */

.el-hero,
.el-card,
.el-pdf,
.el-share,
.el-glass {
	background: var(--el-card-bg);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ===== Breadcrumbs / Back link ===== */

.el-breadcrumbs {
	margin-block-end: 12px;
	font-size: 0.85rem;
}

.el-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--el-muted);
	font-weight: 600;
}

.el-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.el-breadcrumbs__item + .el-breadcrumbs__item::before {
	content: "\203A";
	color: var(--el-muted);
	margin-inline-end: 2px;
}

.el-breadcrumbs a {
	color: var(--el-muted);
	transition: color 0.15s ease;
}

.el-breadcrumbs a:hover,
.el-breadcrumbs a:active {
	color: var(--el-accent);
}

.el-breadcrumbs [aria-current="page"] {
	color: var(--el-ink);
}

/* ===== Hero card ===== */

.el-hero {
	padding: var(--el-pad, 18px 14px);
	margin-bottom: 14px;
	position: relative;
}

.el-hero__inner {
	display: block;
}

.el-hero__icon {
	display: none;
}

.el-hero__badges {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.el-badge {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--el-accent-soft);
	color: var(--el-accent);
	border: 1px solid #bfdbfe;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1.6;
}

.el-badge svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.el-hero__title {
	font-size: calc(1.2rem * var(--el-heading-scale));
	font-weight: 800;
	color: var(--el-ink);
	margin: 0 0 6px;
	line-height: 1.4;
}

.el-hero__subtitle {
	font-size: 0.85rem;
	color: var(--el-muted);
	line-height: 1.6;
	margin: 0;
}

/* ===== Section title ===== */

.el-section-title,
.el-rule__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--el-ink);
	margin: 18px 0 14px;
}

.el-rule {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 14px;
}

.el-rule__title {
	margin: 0;
}

.el-rule__line {
	flex: 1;
	height: 1px;
	background: var(--el-line);
}

.el-rule__count {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--el-muted);
	background: var(--el-line-soft);
	padding: 2px 8px;
	border-radius: 4px;
}

/* ===== Grid (subjects / sections) ===== */

.el-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--el-card-min), 1fr));
	gap: var(--el-gap);
	margin-bottom: 14px;
}

.el-card--subject,
.el-card--section {
	padding: 16px 12px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: inherit;
	touch-action: manipulation;
}

.el-card--subject:active,
.el-card--section:active {
	transform: scale(0.97);
	background: var(--el-line-soft);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.el-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	color: var(--el-tile, var(--el-accent));
}

.el-card__icon::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.1;
	background: currentColor;
}

.el-card__icon svg {
	width: 24px;
	height: 24px;
	position: relative;
	z-index: 1;
}

.el-card__title {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--el-ink);
}

.el-card__count {
	font-size: 0.65rem;
	color: var(--el-muted);
	background: var(--el-line-soft);
	padding: 2px 8px;
	border-radius: 4px;
}

/* ===== Topics list (rows) ===== */

.el-rows,
.el-section__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	background: var(--el-card-bg);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius);
	overflow: hidden;
}

.el-row {
	border-bottom: 1px solid var(--el-line-soft);
}

.el-row:last-child {
	border-bottom: none;
}

.el-row__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--el-row-pad, 14px);
	cursor: pointer;
	transition: background 0.15s ease;
	gap: 10px;
	color: inherit;
	touch-action: manipulation;
}

.el-row__inner:active {
	background: #f8fafc;
}

.el-row.is-current .el-row__inner {
	background: var(--el-accent-soft);
	cursor: default;
}

.el-row__title {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.el-row__pdf {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, #fee2e2, #fecaca);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--el-danger);
}

.el-row__pdf svg {
	width: 20px;
	height: 20px;
}

.el-row__name {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--el-ink);
	line-height: 1.4;
	white-space: normal;
	word-wrap: break-word;
	min-width: 0;
}

.el-row__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

.el-year-badge {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--el-muted);
	background: var(--el-line-soft);
	padding: 3px 7px;
	border-radius: 4px;
	border: none;
}

.el-year-badge svg {
	width: 12px;
	height: 12px;
}

.el-solution-badge {
	font-size: 0.7rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: transparent;
	border: none;
	padding: 0;
}

.el-solution-badge.is-yes {
	color: var(--el-ok);
}

.el-solution-badge.is-no {
	color: var(--el-danger);
}

.el-solution-badge svg,
.el-badge__ico {
	width: 16px;
	height: 16px;
}

.el-row__view {
	display: none;
}

/* ===== Facts row (single page) ===== */

.el-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.el-fact {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--el-muted);
	background: var(--el-card-bg);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-sm);
	padding: 5px 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.el-fact__ico {
	width: 14px;
	height: 14px;
}

/* ===== Solution banner ===== */

.el-solution {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--el-radius);
	margin-bottom: 14px;
	border: 1px solid var(--el-line);
}

.el-solution--yes {
	background: var(--el-ok-soft);
	border-color: #bbf7d0;
}

.el-solution--no {
	background: var(--el-danger-soft);
	border-color: #fecaca;
}

.el-solution__mark {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	flex-shrink: 0;
	color: #fff;
}

.el-solution--yes .el-solution__mark {
	background: var(--el-ok);
}

.el-solution--no .el-solution__mark {
	background: var(--el-danger);
}

.el-solution__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.el-solution__title {
	font-size: 0.85rem;
	font-weight: 700;
}

.el-solution--yes .el-solution__title {
	color: #166534;
}

.el-solution--no .el-solution__title {
	color: #991b1b;
}

.el-solution__note {
	font-size: 0.72rem;
	color: var(--el-muted);
	margin-top: 2px;
}

/* ===== Single content (post body) ===== */

.el-single__content {
	background: var(--el-card-bg);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius);
	padding: 14px;
	margin-bottom: 14px;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--el-ink);
}

.el-single__content :is(h2, h3) {
	margin: 0.6em 0 0.3em;
}

/* ===== PDF Viewer & Actions ===== */

.el-pdf {
	padding: 12px;
	margin-bottom: 14px;
}

.el-viewer {
	margin-bottom: 12px;
}

.el-viewer__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}

.el-viewer__frame {
	width: 100%;
	height: var(--el-viewer-h);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-sm);
	background: var(--el-page-bg);
	display: block;
}

.el-actions {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
}

.el-btn {
	flex: 1;
	min-width: 0;
	padding: 10px 8px;
	border-radius: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.15s;
	font-family: inherit;
	touch-action: manipulation;
	white-space: nowrap;
	color: var(--el-ink);
	background: #fff;
	text-decoration: none;
}

.el-btn:active {
	transform: scale(0.96);
}

.el-btn__ico {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.el-btn--download {
	background: var(--el-accent);
	color: #fff;
	border-color: transparent;
}

.el-btn--download:active {
	background: var(--el-accent-ink);
}

.el-btn--print {
	background: #fff;
	color: var(--el-ink);
	border-color: var(--el-line);
}

.el-btn--print:active {
	background: var(--el-line-soft);
}

.el-btn--report {
	background: #fff;
	color: var(--el-danger);
	border-color: #fecaca;
}

.el-btn--report:active {
	background: var(--el-danger-soft);
}

.el-btn--ghost {
	background: var(--el-accent-soft);
	color: var(--el-accent);
	border-color: #bfdbfe;
	flex: 0 1 auto;
	padding: 12px 20px;
}

.el-btn--wide {
	width: 100%;
	margin-top: 4px;
	background: var(--el-accent-soft);
	color: var(--el-accent-ink);
	border-color: #bfdbfe;
}

/* ===== Share Section ===== */

.el-share {
	padding: 12px 14px;
	text-align: center;
	margin-bottom: 14px;
}

.el-share__title {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--el-ink);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.el-share__title svg {
	width: 16px;
	height: 16px;
	color: var(--el-accent);
}

.el-share__buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.el-share__btn {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: all 0.15s;
	flex-shrink: 0;
	border: none;
	cursor: pointer;
}

.el-share__glyph {
	width: 20px;
	height: 20px;
	display: inline-flex;
}

.el-share__glyph svg {
	width: 100%;
	height: 100%;
}

.el-share__btn:active {
	opacity: 0.7;
	transform: scale(0.95);
}

.el-share__btn--facebook { background: #1877f2; }
.el-share__btn--messenger { background: #a855f7; }
.el-share__btn--whatsapp { background: #25d366; }
.el-share__btn--telegram { background: #0088cc; }
.el-share__btn--email { background: #ea4335; }
.el-share__btn--copy { background: #64748b; }

/* Some glyphs are drawn via mask in the original; force solid fill here. */
.el-share__btn .el-share__glyph {
	background: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	color: #fff;
}

/* ===== Pagination ===== */

.el-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0;
}

.el-pagination a,
.el-pagination span {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--el-radius-sm);
	border: 1px solid var(--el-line);
	background: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--el-ink);
}

.el-pagination .is-current,
.el-pagination [aria-current="page"] {
	background: var(--el-accent);
	color: #fff;
	border-color: var(--el-accent);
}

/* ===== Empty state ===== */

.el-empty {
	background: var(--el-card-bg);
	border: 1px dashed var(--el-line);
	border-radius: var(--el-radius);
	padding: 30px 16px;
	text-align: center;
	color: var(--el-muted);
	font-size: 0.9rem;
	margin-bottom: 14px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ===== Desktop ===== */

@media (min-width: 768px) {
	.el { --el-scale: var(--el-scale-desktop, 1); }

	.el-hero { padding: 24px; }
	.el-hero__title { font-size: calc(1.4rem * var(--el-heading-scale)); }

	.el-grid { gap: calc(var(--el-gap) + 4px); }
	.el-card--subject,
	.el-card--section { padding: var(--el-card-pad-lg, 20px 16px); }
	.el-card__icon { width: var(--el-card-icon-lg, 56px); height: var(--el-card-icon-lg, 56px); }
	.el-card__icon svg { width: 28px; height: 28px; }
	.el-card__title { font-size: calc(var(--el-card-title-size-lg, 0.95rem) * var(--el-scale)); }

	.el-row__inner { padding: 16px 20px; }
	.el-row__pdf { width: 48px; height: 48px; }
	.el-row__pdf svg { width: 24px; height: 24px; }
	.el-row__name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.9rem;
	}
	.el-row__meta { flex-direction: row; align-items: center; gap: 14px; }

	.el-row__view {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 0.78rem;
		font-weight: 700;
		color: var(--el-accent);
	}
	.el-row__view-ico { width: 14px; height: 14px; }

	.el-actions { gap: 12px; }
	.el-btn { flex: 0 1 auto; min-width: 120px; padding: 12px 20px; font-size: 0.85rem; }
	.el-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
	.el-btn:active { transform: none; }

	.el-share { padding: 18px; }
	.el-share__title { font-size: 0.9rem; margin-bottom: 14px; }
	.el-share__buttons { gap: 16px; }
	.el-share__btn { width: 48px; height: 48px; }
	.el-share__btn:hover { opacity: 0.9; transform: translateY(-3px); }
	.el-share__btn:active { transform: none; }
}

/* ===== Print ===== */

@media print {
	.el-breadcrumbs,
	.el-actions,
	.el-share,
	.el-siblings,
	.el-facts { display: none !important; }
}

/* ============================================================ */
/* ===== تخصيصات التصميم المدمجة (Custom redesign) ===== */
/* ============================================================ */
/*
 * Exam Library — تخصيصات التصميم (Custom overrides)
 * ------------------------------------------------------------------
 * ضعه بعد ملف frontend.css الأصلي حتى تُطبَّق هذه القواعد.
 * يعتمد على متغيرات --el-* نفسها ليبقى متناسقاً مع لوحة التصميم.
 */

/* ===================== 1) بطاقات الهيرو المنفصلة ===================== */

.el .el-hero-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.el .el-hero-card {
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-lg);
	box-shadow: 0 1px 6px rgba(15, 23, 42, .03);
}

/* بطاقة المستوى */
.el .el-hero-card--level {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 15px;
	background: color-mix(in srgb, var(--el-accent) 10%, var(--el-card-bg, #ffffff));
	border-color: color-mix(in srgb, var(--el-accent) 20%, transparent);
}

.el .el-hero-card__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--el-accent-grad);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

.el .el-hero-card__icon svg,
.el .el-hero-card__icon i {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.el .el-hero-card__title {
	font-size: calc(1.15rem * var(--el-heading-scale));
	font-weight: 800;
	color: color-mix(in srgb, var(--el-accent) 80%, #000000);
	margin: 0;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* بطاقة السطر (دروس، فروض واختبارات) */
.el .el-hero-card--tagline {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
}

.el .el-hero-card__bar {
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--el-accent-grad);
	flex-shrink: 0;
}

.el .el-hero-card__tagline {
	font-size: calc(.9rem * var(--el-scale));
	font-weight: 700;
	color: var(--el-accent);
}

/* بطاقة الوصف */
.el .el-hero-card--desc {
	padding: 12px 13px;
}

.el .el-hero-card__desc {
	font-size: calc(.82rem * var(--el-scale));
	color: var(--el-muted);
	line-height: 1.7;
	margin: 0;
}

/* ===================== 2) شبكة المواد ===================== */
/* عمودان على الهاتف، وأربعة على الشاشات الأكبر */

.el .el-grid--subjects {
	display: grid;
	grid-template-columns: repeat(var(--el-subjects-cols, 2), minmax(0, 1fr)) !important;
	gap: 14px;
	margin-top: 4px;
}

@media (min-width: 900px) {
	.el .el-grid--subjects {
		grid-template-columns: repeat(var(--el-subjects-cols-lg, 4), minmax(0, 1fr)) !important;
		gap: 16px;
	}
}

/* ===================== 3) بطاقة المادة (تخطيط أفقي) ===================== */

.el .el-card--subject {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-align: start;
	padding: var(--el-card-pad, 14px);
	background: color-mix(in srgb, var(--el-tile, var(--el-tile-default, var(--el-accent))) 9%, var(--el-card-bg, #ffffff));
	border: 1px solid color-mix(in srgb, var(--el-tile, var(--el-tile-default, var(--el-accent))) 18%, transparent);
	border-radius: var(--el-radius-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.el .el-card--subject:hover,
.el .el-card--subject:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--el-tile, var(--el-accent)) 22%, transparent);
	border-color: color-mix(in srgb, var(--el-tile, var(--el-accent)) 45%, transparent);
}

.el .el-card--subject .el-card__icon {
	flex-shrink: 0;
	width: var(--el-card-icon, 46px);
	height: var(--el-card-icon, 46px);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background: var(--el-tile, var(--el-tile-default, var(--el-accent)));
	color: #ffffff;
}

.el .el-card--subject .el-card__icon svg,
.el .el-card--subject .el-card__icon i {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	font-size: 24px;
}

.el .el-card--subject .el-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.el .el-card--subject .el-card__title {
	font-size: calc(var(--el-card-title-size, .92rem) * var(--el-scale));
	font-weight: 700;
	color: color-mix(in srgb, var(--el-tile, var(--el-tile-default, var(--el-accent))) 78%, #000000);
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere;
}

.el .el-card--subject .el-card__count {
	font-size: calc(var(--el-card-count-size, .68rem) * var(--el-scale));
	color: color-mix(in srgb, var(--el-tile, var(--el-tile-default, var(--el-accent))) 70%, #000000);
	background: color-mix(in srgb, var(--el-tile, var(--el-tile-default, var(--el-accent))) 16%, var(--el-card-bg, #ffffff));
	padding: 2px 8px;
	border-radius: 5px;
	align-self: flex-start;
}

/* ===================== 4) سطر السياق داخل بطاقة الهيرو ===================== */
/* (يظهر في صفحتي المادة والصنف: الاسم الرئيسي + سطر صغير تحته) */

.el .el-hero-card__heads {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.el .el-hero-card__context {
	font-size: calc(.78rem * var(--el-scale));
	font-weight: 600;
	color: var(--el-muted);
	line-height: 1.3;
}

.el .el-hero-card--level .el-hero-card__title {
	line-height: 1.25;
}

/* ===================== 5) شبكة الأصناف ===================== */
/* عمود واحد على الهاتف، وثلاثة على الشاشات الأكبر */

.el .el-grid--sections {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: var(--el-gap, 8px);
}

@media (min-width: 768px) {
	.el .el-grid--sections {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: var(--el-gap, 10px);
	}
}

/* ===================== 6) بطاقة الصنف (سطر أفقي) ===================== */

.el .el-card--section {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 11px;
	text-align: start;
	padding: 11px 13px;
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.el .el-card--section:hover,
.el .el-card--section:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
	border-color: color-mix(in srgb, var(--el-tile, var(--el-accent)) 40%, var(--el-line));
}

.el .el-card--section .el-card__icon {
	flex-shrink: 0;
	width: calc(var(--el-card-icon, 46px) - 6px);
	height: calc(var(--el-card-icon, 46px) - 6px);
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	color: var(--el-tile, var(--el-accent));
}

.el .el-card--section .el-card__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: .12;
}

.el .el-card--section .el-card__icon svg,
.el .el-card--section .el-card__icon i {
	position: relative;
	z-index: 1;
	width: 21px;
	height: 21px;
	font-size: 21px;
}

.el .el-card--section .el-card__title {
	flex: 1;
	min-width: 0;
	font-size: calc(var(--el-card-title-size, .92rem) * var(--el-scale));
	font-weight: 700;
	color: var(--el-ink);
	line-height: 1.35;
}

.el .el-card--section .el-card__count {
	flex-shrink: 0;
	font-size: calc(var(--el-card-count-size, .68rem) * var(--el-scale));
	color: var(--el-muted);
	background: var(--el-line-soft);
	padding: 3px 9px;
	border-radius: 20px;
	white-space: nowrap;
}

/* على الشاشات الكبيرة: توسيط عمودي لطيف للبطاقة الثلاثية */
@media (min-width: 768px) {
	.el .el-card--section {
		padding: 13px 14px;
	}
}

/* ===================== 7) فلتر السنوات ===================== */

.el .el-years {
	margin: 4px 0 10px;
}

.el .el-years__list {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin: 0;
	list-style: none;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.el .el-years__item {
	flex-shrink: 0;
	margin: 0;
}

.el .el-years__link {
	display: inline-block;
	font-size: calc(.75rem * var(--el-scale));
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	color: #475569;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.el .el-years__link:hover {
	border-color: var(--el-accent);
	color: var(--el-accent);
}

.el .el-years__link.is-active {
	background: var(--el-accent);
	border-color: var(--el-accent);
	color: #fff;
	font-weight: 700;
}

/* ===================== 8) عدّاد المواضيع ===================== */

.el .el-count {
	font-size: calc(.72rem * var(--el-scale));
	color: #94a3b8;
	font-weight: 600;
	margin: 0 2px 8px;
}

/* ===================== 9) صف الموضوع (سطر واحد) ===================== */

.el .el-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.el .el-row {
	margin: 0;
}

.el .el-row__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	border-radius: 11px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.el .el-row__inner:hover,
.el .el-row__inner:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
	border-color: color-mix(in srgb, var(--el-accent) 35%, var(--el-line));
}

/* رقم الموضوع (يمين) */
.el .el-row__num {
	flex-shrink: 0;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 8px;
	background: var(--el-accent-soft);
	color: var(--el-accent);
	font-size: calc(.72rem * var(--el-scale));
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* عنوان الموضوع — يتمدّد ويُقصّ بنقاط */
.el .el-row__name {
	flex: 1;
	min-width: 0;
	font-size: calc(.8rem * var(--el-scale));
	font-weight: 600;
	color: var(--el-ink);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* الحل ✅/❌ */
.el .el-row__sol {
	flex-shrink: 0;
	font-size: calc(.85rem * var(--el-scale));
	line-height: 1;
}

/* السنة (يسار) */
.el .el-row__year {
	flex-shrink: 0;
	font-size: calc(.68rem * var(--el-scale));
	font-weight: 700;
	color: var(--el-muted);
	background: var(--el-line-soft);
	padding: 2px 7px;
	border-radius: 6px;
	white-space: nowrap;
}

/* ===================== 10) هيرو صفحة الموضوع ===================== */

.el .el-hero-card--single {
	align-items: flex-start;
	gap: 11px;
	padding: 12px 13px;
}

.el .el-single-head__icon {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.el .el-single-head__num {
	font-size: calc(.62rem * var(--el-scale));
	font-weight: 800;
	color: var(--el-accent);
	background: var(--el-accent-soft);
	padding: 1px 7px;
	border-radius: 6px;
	white-space: nowrap;
}

.el .el-single-head__text {
	min-width: 0;
	padding-top: 2px;
}

.el .el-hero-card--single .el-hero-card__title {
	font-size: calc(1.02rem * var(--el-heading-scale));
	margin: 0 0 3px;
	line-height: 1.35;
}

@media (min-width: 768px) {
	.el .el-hero-card--single .el-hero-card__title {
		font-size: calc(1.2rem * var(--el-heading-scale));
	}
}

/* ===================== 11) بانر الحل المصغّر ===================== */

.el .el-solution--compact {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 7px 11px;
	border-radius: 10px;
	margin-bottom: 8px;
}

.el .el-solution--compact.el-solution--yes {
	background: var(--el-ok-soft);
	border: 1px solid #bbf7d0;
}

.el .el-solution--compact.el-solution--no {
	background: var(--el-danger-soft);
	border: 1px solid #fecaca;
}

.el .el-solution--compact .el-solution__mark {
	font-size: calc(.9rem * var(--el-scale));
	line-height: 1;
}

.el .el-solution--compact .el-solution__title {
	font-size: calc(.8rem * var(--el-scale));
}

.el .el-solution--compact.el-solution--yes .el-solution__title { color: #15803d; }
.el .el-solution--compact.el-solution--no  .el-solution__title { color: var(--el-danger); }

.el .el-solution--compact .el-solution__note {
	font-size: calc(.72rem * var(--el-scale));
	color: var(--el-muted);
}

/* ===================== 12) صف الأزرار الموحّد ===================== */

.el .el-actions--grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 10px;
}

.el .el-act {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 9px 4px;
	border-radius: 10px;
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	color: #334155;
	font-size: calc(.72rem * var(--el-scale));
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.el .el-act:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
	border-color: color-mix(in srgb, var(--el-accent) 35%, var(--el-line));
}

.el .el-act__ico {
	width: 19px;
	height: 19px;
	font-size: 19px;
}

.el .el-act--download {
	background: var(--el-accent-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, .22);
}

.el .el-act--download:hover {
	color: #fff;
	border-color: transparent;
}

@media (min-width: 768px) {
	.el .el-act {
		flex-direction: row;
		gap: 7px;
		padding: 12px;
		font-size: calc(.88rem * var(--el-scale));
	}
	.el .el-act__ico { width: 18px; height: 18px; font-size: 18px; }
}

/* ===================== 13) نافذة المشاركة المنبثقة ===================== */

.el .el-sharesheet {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.el .el-sharesheet[hidden] { display: none; }

.el .el-sharesheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .5);
	animation: elFade .15s ease;
}

.el .el-sharesheet__panel {
	position: relative;
	width: 100%;
	max-width: 520px;
	background: var(--el-surface);
	border-radius: 18px 18px 0 0;
	padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
	animation: elSlideUp .2s ease;
}

@media (min-width: 640px) {
	.el .el-sharesheet { align-items: center; }
	.el .el-sharesheet__panel { border-radius: 18px; margin: 0 16px; }
}

.el .el-sharesheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.el .el-sharesheet__title {
	font-size: calc(.92rem * var(--el-scale));
	font-weight: 800;
	color: var(--el-ink);
}

.el .el-sharesheet__close {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: none;
	background: var(--el-line-soft);
	color: var(--el-muted);
	font-size: 1rem;
	cursor: pointer;
	line-height: 1;
}

.el .el-sharesheet__grid {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	flex-wrap: wrap;
}

.el .el-sharesheet__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	flex: 1;
	min-width: 56px;
}

.el .el-sharesheet__glyph {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.el .el-sharesheet__glyph svg,
.el .el-sharesheet__glyph i { width: 22px; height: 22px; font-size: 22px; }

.el .el-sharesheet__item--facebook  .el-sharesheet__glyph { background: #1877f2; }
.el .el-sharesheet__item--messenger .el-sharesheet__glyph { background: #0084ff; }
.el .el-sharesheet__item--whatsapp  .el-sharesheet__glyph { background: #25d366; }
.el .el-sharesheet__item--telegram  .el-sharesheet__glyph { background: #0088cc; }
.el .el-sharesheet__item--email     .el-sharesheet__glyph { background: #64748b; }

.el .el-sharesheet__name {
	font-size: calc(.62rem * var(--el-scale));
	color: var(--el-muted);
}

@keyframes elFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes elSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================ */
/* ===== إصلاحات لاحقة (Fixes) ===== */
/* ============================================================ */

/* --- 1) مسار التنقل كبطاقة بيضاء منفصلة --- */
.el .el-breadcrumbs {
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-lg);
	padding: 8px 12px;
	margin-bottom: 8px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .03);
	font-size: calc(.8rem * var(--el-scale));
}

.el .el-breadcrumbs__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.el .el-breadcrumbs__list::-webkit-scrollbar {
	display: none;
}

.el .el-breadcrumbs__item {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 600;
	color: var(--el-muted);
}

.el .el-breadcrumbs__item + .el-breadcrumbs__item::before {
	content: "‹";
	color: #cbd5e1;
	font-size: 1em;
	margin: 0;
}

.el .el-breadcrumbs a { color: var(--el-muted); }
.el .el-breadcrumbs a:hover { color: var(--el-accent); }
.el .el-breadcrumbs [aria-current="page"] { color: var(--el-accent); font-weight: 700; }

/* --- 2) صفحة الموضوع: هيرو أفقي (الأيقونة يمين) --- */
.el .el-hero-card--single {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 11px;
	padding: 12px 13px;
}

/* --- 3) فلتر السنوات: محاذاة لليمين لا الوسط --- */
.el .el-years__list {
	justify-content: flex-start;
}

/* --- 4) بانر الحل: رمز الحل بدون خلفية دائرية، سطر واحد --- */
.el .el-solution--compact .el-solution__mark {
	width: auto;
	height: auto;
	background: none !important;
	border-radius: 0;
	font-size: calc(1rem * var(--el-scale));
	line-height: 1;
	display: inline;
	padding: 0;
	color: inherit;
}

/* --- 5) أيقونات البطاقات: الدائرة الملوّنة بحجم المربّع تماماً --- */
.el .el-card--subject .el-card__icon,
.el .el-card--section .el-card__icon {
	overflow: hidden;
}
.el .el-card--subject .el-card__icon::before,
.el .el-card--section .el-card__icon::before {
	border-radius: inherit;
}

/* --- 6) صف الأزرار: ثلاثة أعمدة (بعد إزالة التبليغ) --- */
.el .el-actions--grid {
	grid-template-columns: repeat(3, 1fr);
}

/* ============================================================ */
/* ===== زر تحميل المزيد + تلوين المستندات ===== */
/* ============================================================ */

/* متغيّر لون مربّع رقم المستند (قابل للتخصيص لاحقاً من لوحة التصميم) */
.el {
	--el-doc-num-bg: var(--el-accent-soft);
	--el-doc-num-fg: var(--el-accent);
	--el-doc-current-bg: #fff7ed;
	--el-doc-current-border: #fdba74;
}

/* لون مربّع الرقم يتبع المتغيّر */
.el .el-row__num {
	background: var(--el-doc-num-bg);
	color: var(--el-doc-num-fg);
	min-width: var(--el-doc-num-size, 28px);
	height: var(--el-doc-num-size, 28px);
}

/* المستند الحالي في قائمة "مواضيع أخرى" */
.el .el-row.is-current .el-row__inner {
	background: var(--el-doc-current-bg);
	border-color: var(--el-doc-current-border);
	box-shadow: 0 2px 8px rgba(249, 115, 22, .12);
}

.el .el-row.is-current .el-row__num {
	background: #f97316;
	color: #fff;
}

.el .el-row.is-current .el-row__name {
	color: #9a3412;
	font-weight: 800;
}

/* زر تحميل المزيد */
.el .el-loadmore {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 12px;
	padding: 12px 16px;
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-lg);
	background: var(--el-surface);
	color: var(--el-accent);
	font-family: inherit;
	font-size: calc(.88rem * var(--el-scale));
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.el .el-loadmore:hover {
	background: var(--el-accent-soft);
	border-color: var(--el-accent);
	transform: translateY(-1px);
}

.el .el-loadmore.is-loading {
	opacity: .6;
	pointer-events: none;
}

.el .el-loadmore.is-loading .el-loadmore__label::after {
	content: "…";
}

.el .el-loadmore__count {
	color: var(--el-muted);
	font-weight: 700;
}

/* ============================================================ */
/* ===== المواد في عمود واحد: العدد إلى أقصى اليسار ===== */
/* ============================================================ */
/* عندما يختار المدير "مادة واحدة في الصف"، يصبح الاسم والعدد على
   نفس السطر، والعدد يُدفع لأقصى اليسار. */

@media (max-width: 599.98px) {
	.el .el-grid--subjects.is-single .el-card--subject .el-card__body {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		flex: 1;
		min-width: 0;
	}

	.el .el-grid--subjects.is-single .el-card--subject .el-card__title {
		flex: 1;
		min-width: 0;
	}

	.el .el-grid--subjects.is-single .el-card--subject .el-card__count {
		margin-inline-start: auto;
		align-self: center;
	}
}

/* ============================================================ */
/* ===== الأسئلة الشائعة (FAQ) — تصميم أنيق ===== */
/* ============================================================ */

.el .el-faq {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.el .el-faq__title {
	font-size: calc(1.05rem * var(--el-heading-scale));
	font-weight: 800;
	color: var(--el-ink);
	margin: 4px 2px 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.el .el-faq__title::before {
	content: "";
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--el-accent-grad);
}

.el .el-faq__item {
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-lg);
	box-shadow: 0 1px 4px rgba(15, 23, 42, .03);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.el .el-faq__item[open] {
	border-color: color-mix(in srgb, var(--el-accent) 35%, var(--el-line));
	box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.el .el-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 13px 15px;
	font-size: calc(.9rem * var(--el-scale));
	font-weight: 700;
	color: var(--el-ink);
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.el .el-faq__q::-webkit-details-marker { display: none; }

/* علامة + / − */
.el .el-faq__q::before {
	content: "+";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--el-accent-soft);
	color: var(--el-accent);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background .2s ease;
}

.el .el-faq__item[open] .el-faq__q::before {
	content: "\2212"; /* − */
	background: var(--el-accent);
	color: #fff;
}

.el .el-faq__q:hover {
	color: var(--el-accent);
}

.el .el-faq__a {
	padding: 0 15px 14px 49px;
	font-size: calc(.85rem * var(--el-scale));
	color: var(--el-muted);
	line-height: 1.8;
}

/* ===== حجم عناوين الأقسام (قابل للتحكّم) ===== */
.el .el-section-title {
	font-size: calc(1rem * var(--el-title-scale, 1) * var(--el-heading-scale, 1));
	margin: 18px 0 12px;
	text-align: center;
	background: var(--el-surface);
	border: 1px solid var(--el-line);
	border-radius: var(--el-radius-lg);
	box-shadow: 0 1px 4px rgba(15, 23, 42, .03);
	padding: 11px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.el .el-section-title::before,
.el .el-section-title::after {
	content: "";
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--el-accent-grad);
	flex-shrink: 0;
}

/* ============================================================ */
/* ===== تخصيص بطاقات المواضيع (ألوان/تباعد/حجم الخط) ===== */
/* ============================================================ */

/* التباعد بين صفوف المواضيع */
.el .el-rows {
	gap: var(--el-row-gap, 6px);
}

/* خلفية الصف */
.el .el-row__inner {
	background: var(--el-row-bg, var(--el-surface));
}

/* اسم الموضوع: اللون + حجم الخط (هاتف افتراضياً) */
.el .el-row__name {
	color: var(--el-row-name-color, var(--el-ink));
	font-size: calc(var(--el-row-name-size, .8rem) * var(--el-scale));
}

/* السنة: اللون والخلفية */
.el .el-row__year {
	color: var(--el-row-year-color, var(--el-muted));
	background: var(--el-row-year-bg, var(--el-line-soft));
}

/* حجم خط اسم الموضوع على الكمبيوتر */
@media (min-width: 768px) {
	.el .el-row__name {
		font-size: calc(var(--el-row-name-size-lg, .9rem) * var(--el-scale));
	}
}