/**
 * Elite EB — Public Styles
 * Responsive, accessible and RTL-ready interface styles.
 *
 * @package EliteEB
 * @version 2.0.0
 */

/* ============================================================
 * 1. Design tokens & page foundation
 * ============================================================ */
html body :is(
	.elite-eb-evaluations-page,
	.elite-eb-project-page,
	.elite-eb-project-view-page,
	.elite-eb-submit-page,
	.elite-eb-details-page,
	.elite-eb-dashboard,
	.elite-eb-teacher-dashboard,
	.elite-eb-entry-ticket,
	.elite-eb-lecture-room
) {
	--elite-eb-bg: #221915;
	--elite-eb-surface: #2b211c;
	--elite-eb-surface-raised: #332720;
	--elite-eb-surface-soft: #261f1a;
	--elite-eb-text: #f8f5ec;
	--elite-eb-text-muted: #ceb7a2;
	--elite-eb-accent: #d26829;
	--elite-eb-accent-hover: #e07a3b;
	--elite-eb-gold: #cbb916;
	--elite-eb-border: #49372e;
	--elite-eb-border-strong: #855c4c;
	--elite-eb-danger: #ff8a75;
	--elite-eb-success: #8fc9a9;
	--elite-eb-focus: #f8f5ec;
	--elite-eb-radius-sm: 0.5rem;
	--elite-eb-radius-md: 0.875rem;
	--elite-eb-radius-lg: 1.25rem;
	--elite-eb-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.2);
	--elite-eb-page-gutter: clamp(1rem, 3vw, 2rem);
	--elite-eb-section-space: clamp(1.5rem, 4vw, 2.5rem);
	--elite-eb-transition: 180ms cubic-bezier(0.2, 0, 0, 1);

	width: 100% !important;
	max-width: 75rem !important;
	min-width: 0 !important;
	margin-inline: auto !important;
	padding: clamp(1.25rem, 4vw, 2.5rem) var(--elite-eb-page-gutter) !important;
	box-sizing: border-box !important;
	background-color: var(--elite-eb-bg) !important;
	color: var(--elite-eb-text-muted) !important;
	color-scheme: dark !important;
	font-family: "Tajawal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.7 !important;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

html body :is(
	.elite-eb-evaluations-page,
	.elite-eb-project-page,
	.elite-eb-project-view-page,
	.elite-eb-submit-page,
	.elite-eb-details-page,
	.elite-eb-dashboard,
	.elite-eb-teacher-dashboard,
	.elite-eb-entry-ticket,
	.elite-eb-lecture-room
) :where(*, *::before, *::after) {
	box-sizing: border-box !important;
}

html body :is(
	.elite-eb-evaluations-page,
	.elite-eb-project-page,
	.elite-eb-project-view-page,
	.elite-eb-submit-page,
	.elite-eb-details-page,
	.elite-eb-dashboard,
	.elite-eb-teacher-dashboard,
	.elite-eb-entry-ticket,
	.elite-eb-lecture-room
) :where(img, svg, video, canvas) {
	max-width: 100% !important;
	height: auto !important;
}

html body :is(
	.elite-eb-evaluations-page,
	.elite-eb-project-page,
	.elite-eb-project-view-page,
	.elite-eb-submit-page,
	.elite-eb-details-page,
	.elite-eb-dashboard,
	.elite-eb-teacher-dashboard,
	.elite-eb-entry-ticket,
	.elite-eb-lecture-room
) :where(p, h1, h2, h3, h4, h5, h6, a, button, label, td, th) {
	overflow-wrap: break-word !important;
}

html body :is(
	.elite-eb-evaluations-page,
	.elite-eb-project-page,
	.elite-eb-project-view-page,
	.elite-eb-submit-page,
	.elite-eb-details-page,
	.elite-eb-dashboard,
	.elite-eb-teacher-dashboard,
	.elite-eb-entry-ticket,
	.elite-eb-lecture-room
) ::selection {
	background: var(--elite-eb-gold) !important;
	color: var(--elite-eb-bg) !important;
}

/* ============================================================
 * 2. Page headers & content hierarchy
 * ============================================================ */
html body .elite-eb-page-header {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 1rem 1.5rem !important;
	margin-block: 0 var(--elite-eb-section-space) !important;
	padding-block-end: clamp(1.25rem, 3vw, 2rem) !important;
	border-block-end: 1px solid var(--elite-eb-border) !important;
}

html body .elite-eb-page-header :is(h1, h2) {
	max-width: 24ch !important;
	margin: 0 !important;
	color: var(--elite-eb-text) !important;
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.025em !important;
}

html body .elite-eb-page-header p {
	flex: 1 1 100% !important;
	max-width: 65ch !important;
	margin: 0 !important;
	color: var(--elite-eb-text-muted) !important;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem) !important;
	line-height: 1.75 !important;
}

html body :is(
	.elite-eb-project-page,
	.elite-eb-project-view-page,
	.elite-eb-submit-page,
	.elite-eb-details-page,
	.elite-eb-dashboard,
	.elite-eb-teacher-dashboard,
	.elite-eb-entry-ticket,
	.elite-eb-lecture-room
) :where(h2, h3, h4) {
	color: var(--elite-eb-text) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

/* ============================================================
 * 3. Forms & fields
 * ============================================================ */
html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket form,
	.elite-eb-form-section
) {
	width: 100% !important;
	min-width: 0 !important;
	margin-block: 0 1.5rem !important;
	padding: clamp(1.125rem, 3vw, 2rem) !important;
	border: 1px solid var(--elite-eb-border) !important;
	border-radius: var(--elite-eb-radius-lg) !important;
	background: var(--elite-eb-surface) !important;
	box-shadow: 0 0.0625rem 0 rgb(248 245 236 / 0.03) inset !important;
	box-sizing: border-box !important;
}

html body .elite-eb-form-field {
	min-width: 0 !important;
	margin-block-end: 1.25rem !important;
}

html body .elite-eb-form-field:last-child {
	margin-block-end: 0 !important;
}

html body .elite-eb-form-field label {
	display: inline-block !important;
	margin-block-end: 0.5rem !important;
	color: var(--elite-eb-text) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

html body .elite-eb-form-field label .required {
	margin-inline-start: 0.2em !important;
	color: var(--elite-eb-danger) !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
	select,
	textarea
) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 3.25rem !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.8125rem 1rem !important;
	border: 1px solid var(--elite-eb-border-strong) !important;
	border-radius: var(--elite-eb-radius-sm) !important;
	outline: 0 solid transparent !important;
	background: var(--elite-eb-surface-soft) !important;
	box-shadow: none !important;
	color: var(--elite-eb-text) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	caret-color: var(--elite-eb-accent) !important;
	transition: border-color var(--elite-eb-transition), box-shadow var(--elite-eb-transition), background-color var(--elite-eb-transition) !important;
	box-sizing: border-box !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(input, textarea)::placeholder {
	color: var(--elite-eb-text-muted) !important;
	opacity: 0.75 !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
	select,
	textarea
):hover {
	border-color: var(--elite-eb-text-muted) !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
	select,
	textarea
):focus-visible {
	border-color: var(--elite-eb-accent) !important;
	outline: 0.1875rem solid var(--elite-eb-focus) !important;
	outline-offset: 0.125rem !important;
	box-shadow: 0 0 0 0.3125rem rgb(210 104 41 / 0.2) !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(input, select, textarea):disabled {
	cursor: not-allowed !important;
	opacity: 0.6 !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--elite-eb-danger) !important;
}

html body :is(
	.elite-eb-project-form select,
	.elite-eb-answer-form select,
	.elite-eb-entry-ticket select,
	.elite-eb-teacher-dashboard select
) {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-inline-end: 2.75rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ceb7a2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	cursor: pointer !important;
}

html body :is([dir="rtl"], .rtl) :is(
	.elite-eb-project-form select,
	.elite-eb-answer-form select,
	.elite-eb-entry-ticket select,
	.elite-eb-teacher-dashboard select
) {
	background-position: left 1rem center !important;
}

html body :is(
	.elite-eb-project-form select option,
	.elite-eb-answer-form select option,
	.elite-eb-entry-ticket select option,
	.elite-eb-teacher-dashboard select option
) {
	background-color: var(--elite-eb-surface-soft) !important;
	color: var(--elite-eb-text) !important;
}

html body :is(
	.elite-eb-project-form textarea,
	.elite-eb-answer-form textarea,
	.elite-eb-entry-ticket textarea,
	.elite-eb-teacher-dashboard textarea
) {
	min-height: 9.5rem !important;
	max-height: 32rem !important;
	resize: vertical !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(input[type="checkbox"], input[type="radio"]) {
	width: 1.125rem !important;
	height: 1.125rem !important;
	margin: 0 !important;
	accent-color: var(--elite-eb-accent) !important;
	flex: 0 0 auto !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) :is(input[type="file"]) {
	padding: 0.625rem !important;
}

html body :is(
	.elite-eb-project-form,
	.elite-eb-answer-form,
	.elite-eb-entry-ticket,
	.elite-eb-teacher-dashboard
) input[type="file"]::file-selector-button {
	margin-inline-end: 0.75rem !important;
	padding: 0.5rem 0.75rem !important;
	border: 1px solid var(--elite-eb-border-strong) !important;
	border-radius: var(--elite-eb-radius-sm) !important;
	background: var(--elite-eb-surface-raised) !important;
	color: var(--elite-eb-text) !important;
	font-family: inherit !important;
	cursor: pointer !important;
}

/* ============================================================
 * 4. Subject cards
 * ============================================================ */
html body .elite-eb-subject-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important;
	gap: clamp(0.875rem, 2vw, 1.25rem) !important;
	width: 100% !important;
	margin-block: var(--elite-eb-section-space) 0 !important;
}

html body .elite-eb-subject-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 1.5rem !important;
	min-width: 0 !important;
	min-height: 11rem !important;
	height: 100% !important;
	padding: clamp(1.25rem, 3vw, 1.75rem) !important;
	border: 1px solid var(--elite-eb-border) !important;
	border-radius: var(--elite-eb-radius-md) !important;
	background: var(--elite-eb-surface) !important;
	box-shadow: none !important;
	color: var(--elite-eb-text) !important;
	text-align: start !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: transform var(--elite-eb-transition), border-color var(--elite-eb-transition), background-color var(--elite-eb-transition), box-shadow var(--elite-eb-transition) !important;
}

html body .elite-eb-subject-icon {
	margin: 0 !important;
	color: var(--elite-eb-gold) !important;
	font-size: clamp(2rem, 5vw, 2.75rem) !important;
	line-height: 1 !important;
}

html body .elite-eb-subject-name {
	margin: 0 !important;
	color: var(--elite-eb-text) !important;
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
}

/* ============================================================
 * 5. Project cards
 * ============================================================ */
html body .elite-eb-project-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;
	gap: clamp(0.875rem, 2vw, 1.25rem) !important;
	width: 100% !important;
	margin-block: 1.5rem 0 !important;
}

html body .elite-eb-project-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.875rem !important;
	min-width: 0 !important;
	min-height: 100% !important;
	padding: clamp(1.125rem, 2.5vw, 1.5rem) !important;
	border: 1px solid var(--elite-eb-border) !important;
	border-radius: var(--elite-eb-radius-md) !important;
	background: var(--elite-eb-surface) !important;
	box-shadow: none !important;
	color: var(--elite-eb-text-muted) !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: transform var(--elite-eb-transition), border-color var(--elite-eb-transition), background-color var(--elite-eb-transition), box-shadow var(--elite-eb-transition) !important;
}

html body .elite-eb-project-card-title {
	margin: 0 !important;
	color: var(--elite-eb-text) !important;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

html body .elite-eb-project-card-title a {
	border-block-end: 1px solid transparent !important;
	color: inherit !important;
	text-decoration: none !important;
	transition: color var(--elite-eb-transition), border-color var(--elite-eb-transition) !important;
}

html body .elite-eb-project-card-excerpt {
	display: -webkit-box !important;
	margin: 0 !important;
	overflow: hidden !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 4 !important;
	color: var(--elite-eb-text-muted) !important;
	font-size: 0.9375rem !important;
	line-height: 1.75 !important;
}

/* ============================================================
 * 6. Buttons & interactive states
 * ============================================================ */
html body .elite-eb-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 2.875rem !important;
	margin: 0 !important;
	padding: 0.75rem 1.375rem !important;
	border: 1px solid transparent !important;
	border-radius: 100px !important;
	outline: 0 solid transparent !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
	-webkit-tap-highlight-color: transparent !important;
	box-sizing: border-box !important;
	transition: transform var(--elite-eb-transition), background-color var(--elite-eb-transition), border-color var(--elite-eb-transition), color var(--elite-eb-transition), box-shadow var(--elite-eb-transition) !important;
}

html body .elite-eb-btn-primary {
	border-color: var(--elite-eb-accent) !important;
	background: var(--elite-eb-accent) !important;
	box-shadow: none !important;
	color: var(--elite-eb-bg) !important;
}

html body .elite-eb-btn-secondary {
	border-color: var(--elite-eb-accent) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--elite-eb-text) !important;
}

html body :is(.elite-eb-btn, .elite-eb-subject-card, .elite-eb-project-card, .elite-eb-project-card-title a):focus-visible {
	outline: 0.1875rem solid var(--elite-eb-focus) !important;
	outline-offset: 0.25rem !important;
}

html body .elite-eb-btn:disabled,
html body .elite-eb-btn[aria-disabled="true"] {
	cursor: not-allowed !important;
	opacity: 0.55 !important;
	transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
	html body .elite-eb-btn-primary:hover {
		border-color: var(--elite-eb-accent-hover) !important;
		background: var(--elite-eb-accent-hover) !important;
		box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.18) !important;
		transform: translateY(-0.125rem) !important;
	}

	html body .elite-eb-btn-secondary:hover {
		background: var(--elite-eb-accent) !important;
		color: var(--elite-eb-bg) !important;
		transform: translateY(-0.125rem) !important;
	}

	html body :is(.elite-eb-subject-card, .elite-eb-project-card):hover {
		border-color: var(--elite-eb-border-strong) !important;
		background: var(--elite-eb-surface-raised) !important;
		box-shadow: var(--elite-eb-shadow) !important;
		transform: translateY(-0.1875rem) !important;
	}

	html body .elite-eb-project-card-title a:hover {
		border-block-end-color: currentColor !important;
		color: var(--elite-eb-accent-hover) !important;
	}
}

html body :is(.elite-eb-btn, .elite-eb-subject-card, .elite-eb-project-card):active {
	transform: translateY(0) !important;
}

/* ============================================================
 * 7. Tables — readable on desktop, scrollable on small screens
 * ============================================================ */
html body .elite-eb-table {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-block: 1.5rem 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	border: 1px solid var(--elite-eb-border) !important;
	border-spacing: 0 !important;
	border-collapse: separate !important;
	border-radius: var(--elite-eb-radius-md) !important;
	background: var(--elite-eb-surface) !important;
	scrollbar-color: var(--elite-eb-border-strong) var(--elite-eb-surface-soft) !important;
	scrollbar-width: thin !important;
	-webkit-overflow-scrolling: touch !important;
}

html body .elite-eb-table thead th {
	min-width: 8rem !important;
	padding: 0.875rem 1rem !important;
	border-block-end: 1px solid var(--elite-eb-border-strong) !important;
	background: var(--elite-eb-surface-soft) !important;
	color: var(--elite-eb-text) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	text-align: start !important;
	vertical-align: bottom !important;
	white-space: nowrap !important;
}

html body .elite-eb-table tbody td {
	min-width: 8rem !important;
	padding: 0.9375rem 1rem !important;
	border-block-end: 1px solid var(--elite-eb-border) !important;
	color: var(--elite-eb-text-muted) !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	text-align: start !important;
	vertical-align: top !important;
}

html body .elite-eb-table tbody tr:last-child td {
	border-block-end: 0 !important;
}

@media (hover: hover) {
	html body .elite-eb-table tbody tr:hover td {
		background: var(--elite-eb-surface-raised) !important;
		color: var(--elite-eb-text) !important;
	}
}

/* ============================================================
 * 8. Student dashboard, progress & notices
 * ============================================================ */
html body .elite-eb-dashboard-heading {
	min-width: 0 !important;
}

html body .elite-eb-dashboard-section {
	min-width: 0 !important;
}

html body .elite-eb-dashboard-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)) !important;
	gap: 1px !important;
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden !important;
	border: 1px solid var(--elite-eb-border) !important;
	border-radius: var(--elite-eb-radius-md) !important;
	background: var(--elite-eb-border) !important;
}

html body .elite-eb-stat-card {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 0.375rem !important;
	min-width: 0 !important;
	min-height: 9rem !important;
	padding: clamp(1rem, 2.5vw, 1.5rem) !important;
	background: var(--elite-eb-surface) !important;
	color: var(--elite-eb-text) !important;
	text-align: start !important;
	box-sizing: border-box !important;
}

html body .elite-eb-stat-value {
	order: -1 !important;
	margin: 0 !important;
	color: var(--elite-eb-text) !important;
	font-family: "Inter", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) !important;
	font-variant-numeric: tabular-nums !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
}

html body .elite-eb-stat-label {
	margin: 0 !important;
	color: var(--elite-eb-text-muted) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

html body .elite-eb-stat-highlight {
	background: var(--elite-eb-gold) !important;
}

html body .elite-eb-stat-highlight :is(.elite-eb-stat-value, .elite-eb-stat-label) {
	color: var(--elite-eb-bg) !important;
}

html body .elite-eb-dashboard-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
	margin-block: 1.5rem 0 !important;
}

html body .elite-eb-dashboard-project {
	margin-block: var(--elite-eb-section-space) 0 !important;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--elite-eb-border) !important;
	border-radius: var(--elite-eb-radius-md) !important;
	background: var(--elite-eb-surface) !important;
}

html body .elite-eb-dashboard-project-header {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 0.75rem 1.5rem !important;
	margin-block-end: 0.75rem !important;
}

html body .elite-eb-dashboard-project-header h3 {
	margin: 0 !important;
	color: var(--elite-eb-text) !important;
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem) !important;
}

html body .elite-eb-dashboard-project > p {
	margin: 0 0 1rem !important;
	color: var(--elite-eb-text-muted) !important;
}

html body .elite-eb-dashboard-project > p strong {
	color: var(--elite-eb-text) !important;
}

html body .elite-eb-dashboard-project-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem 1.5rem !important;
}

html body .elite-eb-project-count {
	flex: 1 1 16rem !important;
	margin: 0 !important;
	color: var(--elite-eb-text-muted) !important;
}

html body .elite-eb-project-count strong {
	color: var(--elite-eb-text) !important;
}

html body .elite-eb-progress-value {
	color: var(--elite-eb-gold) !important;
	font-family: "Inter", "Tajawal", sans-serif !important;
	font-size: 1.125rem !important;
	font-variant-numeric: tabular-nums !important;
}

html body .elite-eb-progress {
	display: block !important;
	width: 100% !important;
	height: 0.625rem !important;
	margin-block: 0 1rem !important;
	overflow: hidden !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--elite-eb-surface-soft) !important;
	color: var(--elite-eb-accent) !important;
	accent-color: var(--elite-eb-accent) !important;
}

html body .elite-eb-progress::-webkit-progress-bar {
	border-radius: 100px !important;
	background: var(--elite-eb-surface-soft) !important;
}

html body .elite-eb-progress::-webkit-progress-value {
	border-radius: 100px !important;
	background: var(--elite-eb-accent) !important;
}

html body .elite-eb-progress::-moz-progress-bar {
	border-radius: 100px !important;
	background: var(--elite-eb-accent) !important;
}

html body .elite-eb-link {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 2.75rem !important;
	border-block-end: 1px solid var(--elite-eb-border-strong) !important;
	color: var(--elite-eb-text) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: color var(--elite-eb-transition), border-color var(--elite-eb-transition) !important;
}

html body .elite-eb-link:hover {
	border-block-end-color: var(--elite-eb-accent) !important;
	color: var(--elite-eb-accent-hover) !important;
}

html body .elite-eb-link:focus-visible {
	outline: 0.1875rem solid var(--elite-eb-focus) !important;
	outline-offset: 0.25rem !important;
}

html body .elite-eb-notice {
	width: 100% !important;
	padding: clamp(1.125rem, 3vw, 1.5rem) !important;
	border: 1px solid var(--elite-eb-border-strong) !important;
	border-radius: var(--elite-eb-radius-md) !important;
	background: var(--elite-eb-surface) !important;
	color: var(--elite-eb-text) !important;
	box-sizing: border-box !important;
}

html body .elite-eb-notice p {
	margin: 0 !important;
	color: inherit !important;
}

html body .elite-eb-notice .elite-eb-notice-actions {
	margin-block-start: 1rem !important;
}

html body .elite-eb-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ============================================================
 * 9. Responsive refinements
 * ============================================================ */
@media (max-width: 48rem) {
	html body :is(
		.elite-eb-evaluations-page,
		.elite-eb-project-page,
		.elite-eb-project-view-page,
		.elite-eb-submit-page,
		.elite-eb-details-page,
		.elite-eb-dashboard,
		.elite-eb-teacher-dashboard,
		.elite-eb-entry-ticket,
		.elite-eb-lecture-room
	) {
		--elite-eb-page-gutter: 1rem;
		--elite-eb-section-space: 1.5rem;
	}

	html body .elite-eb-page-header {
		align-items: flex-start !important;
		gap: 0.75rem !important;
		padding-block-end: 1.25rem !important;
	}

	html body .elite-eb-project-grid,
	html body .elite-eb-subject-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)) !important;
		gap: 0.875rem !important;
	}

	/* Full-width mobile stat cards instead of cramped columns. */
	html body .elite-eb-dashboard-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0.75rem !important;
		overflow: visible !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	html body .elite-eb-stat-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas: "label value" !important;
		align-items: center !important;
		gap: 1rem !important;
		min-height: 0 !important;
		padding: 1rem 1.125rem !important;
		border: 1px solid var(--elite-eb-border) !important;
		border-radius: var(--elite-eb-radius-md) !important;
	}

	html body .elite-eb-stat-highlight {
		border-color: var(--elite-eb-gold) !important;
	}

	html body .elite-eb-stat-value {
		grid-area: value !important;
		min-width: 3ch !important;
		font-size: 1.625rem !important;
		text-align: end !important;
	}

	html body .elite-eb-stat-label {
		grid-area: label !important;
		max-width: none !important;
		text-align: start !important;
	}

	html body .elite-eb-dashboard-actions {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0.625rem !important;
		margin-block-start: 1.25rem !important;
	}

	html body .elite-eb-dashboard-actions .elite-eb-btn {
		width: 100% !important;
	}

	html body .elite-eb-dashboard-project {
		padding: 1.125rem !important;
	}

	html body .elite-eb-dashboard-project-meta {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.625rem !important;
	}

	html body .elite-eb-project-count {
		flex-basis: auto !important;
	}

	html body .elite-eb-dashboard-project-meta .elite-eb-link {
		justify-content: center !important;
		width: 100% !important;
		min-height: 2.75rem !important;
	}

	/* Consistent mobile rhythm for grouped and direct form controls. */
	html body :is(
		.elite-eb-project-form,
		.elite-eb-answer-form,
		.elite-eb-entry-ticket form,
		.elite-eb-form-section
	) {
		margin-block-end: 1rem !important;
		padding: 1rem !important;
		border-radius: var(--elite-eb-radius-md) !important;
	}

	html body .elite-eb-form-field {
		margin-block-end: 1rem !important;
	}

	html body .elite-eb-form-field + .elite-eb-form-field {
		margin-block-start: 0 !important;
	}

	html body .elite-eb-form-field label {
		margin-block-end: 0.375rem !important;
	}

	html body :is(
		.elite-eb-project-form,
		.elite-eb-answer-form,
		.elite-eb-entry-ticket,
		.elite-eb-teacher-dashboard
	) :is(input, select, textarea) {
		margin-block: 0 !important;
	}

	html body :is(
		.elite-eb-project-form,
		.elite-eb-answer-form,
		.elite-eb-entry-ticket,
		.elite-eb-teacher-dashboard
	) :is(input, select, textarea) + :is(input, select, textarea) {
		margin-block-start: 1rem !important;
	}

	html body :is(
		.elite-eb-project-form,
		.elite-eb-answer-form,
		.elite-eb-entry-ticket,
		.elite-eb-teacher-dashboard
	) > label:not(:first-child) {
		margin-block-start: 1rem !important;
	}

	html body :is(
		.elite-eb-project-form textarea,
		.elite-eb-answer-form textarea,
		.elite-eb-entry-ticket textarea,
		.elite-eb-teacher-dashboard textarea
	) {
		min-height: 8rem !important;
	}
}

@media (max-width: 30rem) {
	html body .elite-eb-subject-grid,
	html body .elite-eb-project-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	html body .elite-eb-subject-card {
		gap: 1rem !important;
		min-height: 8rem !important;
		padding: 1.125rem !important;
	}

	html body .elite-eb-project-card {
		gap: 0.75rem !important;
		padding: 1.125rem !important;
	}

	html body .elite-eb-btn {
		width: 100% !important;
	}

	html body .elite-eb-page-header .elite-eb-btn {
		margin-block-start: 0.25rem !important;
	}

	html body .elite-eb-table thead th,
	html body .elite-eb-table tbody td {
		min-width: 7.5rem !important;
		padding-inline: 0.875rem !important;
	}
}

/* ============================================================
 * 10. Accessibility, user preferences & print
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html body :is(
		.elite-eb-evaluations-page,
		.elite-eb-project-page,
		.elite-eb-project-view-page,
		.elite-eb-submit-page,
		.elite-eb-details-page,
		.elite-eb-dashboard,
		.elite-eb-teacher-dashboard,
		.elite-eb-entry-ticket,
		.elite-eb-lecture-room
	) :where(*, *::before, *::after) {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (prefers-contrast: more) {
	html body :is(
		.elite-eb-project-card,
		.elite-eb-subject-card,
		.elite-eb-project-form,
		.elite-eb-answer-form,
		.elite-eb-entry-ticket form,
		.elite-eb-form-section,
		.elite-eb-table
	) {
		border-color: var(--elite-eb-text-muted) !important;
	}
}

@media (forced-colors: active) {
	html body :is(.elite-eb-btn, .elite-eb-subject-card, .elite-eb-project-card) {
		border: 1px solid ButtonText !important;
	}

	html body :is(.elite-eb-btn, .elite-eb-subject-card, .elite-eb-project-card, .elite-eb-project-card-title a):focus-visible {
		outline: 0.1875rem solid Highlight !important;
	}
}

@media print {
	html body :is(
		.elite-eb-evaluations-page,
		.elite-eb-project-page,
		.elite-eb-project-view-page,
		.elite-eb-submit-page,
		.elite-eb-details-page,
		.elite-eb-dashboard,
		.elite-eb-teacher-dashboard,
		.elite-eb-entry-ticket,
		.elite-eb-lecture-room
	) {
		max-width: none !important;
		padding: 0 !important;
		background: #fff !important;
		color: #261f1a !important;
		color-scheme: light !important;
	}

	html body :is(
		.elite-eb-project-form,
		.elite-eb-answer-form,
		.elite-eb-entry-ticket form,
		.elite-eb-form-section,
		.elite-eb-subject-card,
		.elite-eb-project-card,
		.elite-eb-table
	) {
		break-inside: avoid !important;
		border-color: #855c4c !important;
		background: #fff !important;
		box-shadow: none !important;
	}

	html body :is(
		.elite-eb-page-header h1,
		.elite-eb-page-header p,
		.elite-eb-subject-name,
		.elite-eb-project-card-title,
		.elite-eb-project-card-excerpt,
		.elite-eb-table thead th,
		.elite-eb-table tbody td
	) {
		color: #261f1a !important;
	}

	html body .elite-eb-btn {
		border-color: #855c4c !important;
		background: transparent !important;
		box-shadow: none !important;
		color: #261f1a !important;
	}
}