/**
 * Manhaj LMS — public base stylesheet.
 *
 * Design tokens + the shared component vocabulary used by every front-end
 * template. Theme friendly: everything is namespaced under `mj-` and driven
 * by custom properties, so a theme can re-skin the LMS by overriding tokens.
 *
 * @package Manhaj\LMS
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	--mj-brand: #1d6feb;
	--mj-brand-600: #175cd1;
	--mj-brand-700: #1249a8;
	--mj-brand-50: #eef4ff;
	--mj-accent: #f59e0b;
	--mj-accent-50: #fff7e6;
	--mj-success: #12a150;
	--mj-success-50: #e8f8ef;
	--mj-warning: #e08700;
	--mj-warning-50: #fff4e5;
	--mj-danger: #dc2626;
	--mj-danger-50: #fdeceb;
	--mj-info: #0e7490;
	--mj-info-50: #e6f6fa;

	--mj-ink: #0f172a;
	--mj-ink-2: #334155;
	--mj-muted: #64748b;
	--mj-line: #e2e8f0;
	--mj-line-2: #eef2f7;
	--mj-surface: #ffffff;
	--mj-canvas: #f6f8fb;
	--mj-invert: #0b1220;

	--mj-r-sm: 8px;
	--mj-r: 12px;
	--mj-r-lg: 18px;
	--mj-r-pill: 999px;

	--mj-s1: 4px;
	--mj-s2: 8px;
	--mj-s3: 12px;
	--mj-s4: 16px;
	--mj-s5: 20px;
	--mj-s6: 24px;
	--mj-s7: 32px;
	--mj-s8: 48px;
	--mj-s9: 64px;

	--mj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mj-font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;

	--mj-fs-sm: 13px;
	--mj-fs-md: 15px;
	--mj-fs-lg: 17px;
	--mj-fs-h3: clamp(1.05rem, 1.4vw, 1.2rem);
	--mj-fs-h2: clamp(1.2rem, 1.9vw, 1.5rem);
	--mj-fs-h1: clamp(1.55rem, 3vw, 2.2rem);

	--mj-sh-1: 0 1px 2px rgba(15, 23, 42, .06);
	--mj-sh-2: 0 6px 20px rgba(15, 23, 42, .08);
	--mj-sh-3: 0 18px 44px rgba(15, 23, 42, .16);

	--mj-ease: cubic-bezier(.22, .61, .36, 1);
	--mj-w-narrow: 720px;
	--mj-w: 1140px;
}
@font-face { font-family:"Cairo"; src:url("../../fonts/Cairo-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Cairo"; src:url("../../fonts/Cairo-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
.mj-ui[dir="rtl"], .mj-ui[dir="rtl"] * { font-family:"Cairo",Tahoma,sans-serif; }

/* -------------------------------------------------------------------------
 * 2. Layout
 * ---------------------------------------------------------------------- */

.mj-main {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--mj-w);
	margin: 0 auto;
	padding: var(--mj-s7) var(--mj-s4) var(--mj-s9);
	color: var(--mj-ink);
	font-family: var(--mj-font);
	font-size: var(--mj-fs-md);
	line-height: 1.6;
}

.mj-main *,
.mj-main *::before,
.mj-main *::after {
	box-sizing: border-box;
}

.mj-main--player {
	max-width: 1400px;
	padding-top: var(--mj-s5);
}

html[lang^="ar"] .mj-main {
	font-family: var(--mj-font-ar);
}

.mj-grid {
	display: grid;
	gap: var(--mj-s5);
}

.mj-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mj-grid--sidebar {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	align-items: start;
}

.mj-archive__head,
.mj-catalog {
	margin-bottom: var(--mj-s6);
}

/* -------------------------------------------------------------------------
 * 3. Typography helpers
 * ---------------------------------------------------------------------- */

.mj-section__title {
	margin: 0 0 var(--mj-s4);
	font-size: var(--mj-fs-h2);
	font-weight: 700;
	line-height: 1.25;
	color: var(--mj-ink);
}

.mj-subheading {
	margin: var(--mj-s5) 0 var(--mj-s3);
	font-size: var(--mj-fs-h3);
	font-weight: 650;
}

.mj-archive__title {
	margin: 0 0 var(--mj-s3);
	font-size: var(--mj-fs-h1);
	font-weight: 750;
	letter-spacing: -.01em;
}

.mj-muted {
	color: var(--mj-muted);
	font-size: var(--mj-fs-sm);
}

.mj-strong {
	font-weight: 650;
	color: var(--mj-ink);
}

.mj-code {
	display: inline-block;
	padding: 2px 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
	background: var(--mj-brand-50);
	border-radius: var(--mj-r-sm);
	color: var(--mj-brand-700);
}

.mj-prose > * + * {
	margin-top: var(--mj-s3);
}

.mj-prose img,
.mj-prose iframe,
.mj-prose video {
	max-width: 100%;
	height: auto;
	border-radius: var(--mj-r);
}

.mj-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * 4. Buttons
 * ---------------------------------------------------------------------- */

.mj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mj-s2);
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--mj-r-pill);
	background: var(--mj-line-2);
	color: var(--mj-ink);
	font-family: inherit;
	font-size: var(--mj-fs-md);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s var(--mj-ease), color .18s var(--mj-ease), border-color .18s var(--mj-ease), transform .18s var(--mj-ease);
}

.mj-btn:hover {
	transform: translateY(-1px);
}

.mj-btn:active {
	transform: translateY(0);
}

.mj-btn--primary {
	background: var(--mj-brand);
	color: #fff;
}

.mj-btn--primary:hover {
	background: var(--mj-brand-600);
	color: #fff;
}

.mj-btn--ghost {
	background: transparent;
	border-color: var(--mj-line);
	color: var(--mj-ink);
}

.mj-btn--ghost:hover {
	background: var(--mj-line-2);
}

.mj-btn--subtle {
	background: transparent;
	color: var(--mj-brand-600);
	padding-inline: 10px;
}

.mj-btn--danger {
	background: var(--mj-danger);
	color: #fff;
}

.mj-btn--sm {
	min-height: 36px;
	padding: 6px 14px;
	font-size: var(--mj-fs-sm);
}

.mj-btn--block {
	width: 100%;
}

.mj-btn[disabled],
.mj-btn[aria-disabled="true"] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

.mj-main :focus-visible,
.mj-toast:focus-visible {
	outline: 3px solid var(--mj-brand);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 5. Badges, notices, stats
 * ---------------------------------------------------------------------- */

.mj-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--mj-r-pill);
	background: var(--mj-line-2);
	color: var(--mj-ink-2);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.6;
	white-space: nowrap;
}

.mj-badge--success { background: var(--mj-success-50); color: var(--mj-success); }
.mj-badge--warning { background: var(--mj-warning-50); color: var(--mj-warning); }
.mj-badge--danger  { background: var(--mj-danger-50);  color: var(--mj-danger); }
.mj-badge--info    { background: var(--mj-info-50);    color: var(--mj-info); }
.mj-badge--brand   { background: var(--mj-brand-50);   color: var(--mj-brand-600); }

.mj-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--mj-s3);
	margin: var(--mj-s4) 0;
	padding: var(--mj-s4);
	border: 1px solid var(--mj-line);
	border-inline-start: 4px solid var(--mj-brand);
	border-radius: var(--mj-r);
	background: var(--mj-surface);
	box-shadow: var(--mj-sh-1);
}

.mj-notice p { margin: 0; }
.mj-notice--info    { border-inline-start-color: var(--mj-info);    background: var(--mj-info-50); }
.mj-notice--success { border-inline-start-color: var(--mj-success); background: var(--mj-success-50); }
.mj-notice--warning { border-inline-start-color: var(--mj-warning); background: var(--mj-warning-50); }
.mj-notice--danger  { border-inline-start-color: var(--mj-danger);  background: var(--mj-danger-50); }

.mj-stat-grid,
.mj-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--mj-s4);
	margin-bottom: var(--mj-s6);
}

.mj-stat {
	display: grid;
	gap: 6px;
	padding: var(--mj-s4) var(--mj-s5);
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r);
	box-shadow: var(--mj-sh-1);
}

.mj-stat__icon { color: var(--mj-brand); }
.mj-stat__label { color: var(--mj-muted); font-size: var(--mj-fs-sm); }
.mj-stat__value { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.2; }
.mj-stat--success .mj-stat__value { color: var(--mj-success); }
.mj-stat--warning .mj-stat__value { color: var(--mj-warning); }
.mj-stat--info .mj-stat__value { color: var(--mj-info); }

/* -------------------------------------------------------------------------
 * 6. Forms
 * ---------------------------------------------------------------------- */

.mj-form {
	display: grid;
	gap: var(--mj-s4);
}

.mj-field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.mj-field__label {
	font-size: var(--mj-fs-sm);
	font-weight: 650;
	color: var(--mj-ink-2);
}

.mj-field__help {
	font-size: 12px;
	color: var(--mj-muted);
}

.mj-input {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-sm);
	background: var(--mj-surface);
	color: var(--mj-ink);
	font-family: inherit;
	font-size: var(--mj-fs-md);
	line-height: 1.5;
	transition: border-color .18s var(--mj-ease), box-shadow .18s var(--mj-ease);
}

.mj-input:focus {
	border-color: var(--mj-brand);
	box-shadow: 0 0 0 3px var(--mj-brand-50);
	outline: none;
}

.mj-input--area {
	min-height: 110px;
	resize: vertical;
}

.mj-form__actions,
.mj-form__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s3);
	align-items: center;
	margin: var(--mj-s4) 0 0;
}

.mj-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s3);
	align-items: end;
	margin-bottom: var(--mj-s5);
	padding: var(--mj-s4);
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	box-shadow: 0 10px 32px rgba(16,24,40,.06);
}
.mj-filters .mj-input { min-height:48px; border-radius:12px; background:#fff; }
.mj-filters .mj-field--search { flex:1 1 300px; }
.mj-filters .mj-field--search .mj-input { padding-inline-start:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23667085' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:16px center; }
.mj-ui[dir="rtl"] .mj-filters .mj-field--search .mj-input { background-position:calc(100% - 16px) center; }

.mj-filters__actions {
	display: flex;
	gap: var(--mj-s2);
}

.mj-field--search {
	position: relative;
	min-width: 220px;
}

/* -------------------------------------------------------------------------
 * 7. Cards & tables
 * ---------------------------------------------------------------------- */

.mj-card {
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	box-shadow: var(--mj-sh-1);
	overflow: hidden;
}

.mj-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mj-fs-sm);
}

.mj-table th,
.mj-table td {
	padding: 12px 14px;
	text-align: start;
	border-bottom: 1px solid var(--mj-line-2);
	vertical-align: middle;
}

.mj-table thead th {
	font-weight: 650;
	color: var(--mj-muted);
	background: var(--mj-canvas);
	white-space: nowrap;
}

.mj-table tbody tr:hover { background: var(--mj-brand-50); }
.mj-table--plain th, .mj-table--plain td { border-bottom: 0; }
.mj-table__num { text-align: end; font-variant-numeric: tabular-nums; }

.mj-details {
	display: grid;
	gap: 0;
	margin: 0;
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r);
	overflow: hidden;
	background: var(--mj-surface);
}

.mj-details > div {
	display: flex;
	justify-content: space-between;
	gap: var(--mj-s4);
	padding: 10px 14px;
	border-bottom: 1px solid var(--mj-line-2);
}

.mj-details > div:last-child { border-bottom: 0; }
.mj-details dt { color: var(--mj-muted); font-size: var(--mj-fs-sm); }
.mj-details dd { margin: 0; font-weight: 600; text-align: end; }

.mj-empty {
	display: grid;
	justify-items: center;
	gap: var(--mj-s3);
	padding: var(--mj-s8) var(--mj-s5);
	text-align: center;
	color: var(--mj-muted);
	background: var(--mj-surface);
	border: 1px dashed var(--mj-line);
	border-radius: var(--mj-r-lg);
}

.mj-empty__icon { color: var(--mj-brand); }

.mj-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s2);
	margin-top: var(--mj-s6);
}

.mj-pagination a,
.mj-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-pill);
	background: var(--mj-surface);
	color: var(--mj-ink-2);
	text-decoration: none;
	font-weight: 600;
}

.mj-pagination .is-current {
	background: var(--mj-brand);
	border-color: var(--mj-brand);
	color: #fff;
}

.mj-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s2);
	margin-bottom: var(--mj-s5);
	border-bottom: 1px solid var(--mj-line);
}

.mj-tabs__item {
	padding: 10px 14px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--mj-muted);
	font-weight: 600;
	text-decoration: none;
}

.mj-tabs__item.is-active {
	color: var(--mj-brand-600);
	border-bottom-color: var(--mj-brand);
}

.mj-progress {
	display: block;
	width: 100%;
	height: 8px;
	border-radius: var(--mj-r-pill);
	background: var(--mj-line-2);
	overflow: hidden;
}

.mj-progress__bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--mj-brand), var(--mj-brand-600));
	transition: width .4s var(--mj-ease);
}

/* -------------------------------------------------------------------------
 * 8. Catalog & course cards
 * ---------------------------------------------------------------------- */

.mj-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--mj-s5);
}

.mj-course-card {
	display: flex;
	flex-direction: column;
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	overflow: hidden;
	box-shadow: var(--mj-sh-1);
	transition: transform .2s var(--mj-ease), box-shadow .2s var(--mj-ease);
}

.mj-course-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mj-sh-2);
}

.mj-course-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--mj-canvas);
}

.mj-course-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mj-course-card__badges {
	position: absolute;
	inset-block-start: var(--mj-s3);
	inset-inline-start: var(--mj-s3);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mj-course-card__body {
	display: grid;
	gap: var(--mj-s2);
	padding: var(--mj-s4);
	flex: 1;
}

.mj-course-card__title {
	margin: 0;
	font-size: var(--mj-fs-lg);
	font-weight: 700;
	line-height: 1.35;
}

.mj-course-card__title a { color: inherit; text-decoration: none; }
.mj-course-card__title a:hover { color: var(--mj-brand-600); }
.mj-course-card__excerpt { margin: 0; color: var(--mj-muted); font-size: var(--mj-fs-sm); }
.mj-course-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--mj-muted); font-size: 12px; list-style:none; padding:0; margin:8px 0; }
.mj-course-card__meta li { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.mj-course-card__meta svg { flex:0 0 auto; }

.mj-course-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mj-s3);
	padding: var(--mj-s3) var(--mj-s4) var(--mj-s4);
	border-top: 1px solid var(--mj-line-2);
}

.mj-course-card__price { font-weight: 700; font-size: var(--mj-fs-lg); }
.mj-course-card__price del { color: var(--mj-muted); font-weight: 500; font-size: var(--mj-fs-sm); }

.mj-course-list { display: grid; gap: var(--mj-s3); }

.mj-course-row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) auto;
	gap: var(--mj-s4);
	align-items: center;
	padding: var(--mj-s3);
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r);
}

.mj-course-row__media img { width: 100%; border-radius: var(--mj-r-sm); display: block; }
.mj-course-row__title { margin: 0 0 4px; font-size: var(--mj-fs-md); font-weight: 650; }
.mj-course-row__progress { display: grid; gap: 6px; max-width: 240px; }

.mj-catalog__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s3);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mj-s4);
}

/* -------------------------------------------------------------------------
 * 9. Course hero, curriculum, reviews
 * ---------------------------------------------------------------------- */

.mj-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: var(--mj-s6);
	align-items: start;
	margin-bottom: var(--mj-s7);
}

.mj-hero__main { display: grid; gap: var(--mj-s3); }
.mj-hero__title { margin: 0; font-size: var(--mj-fs-h1); font-weight: 750; line-height: 1.2; }
.mj-hero__subtitle { margin: 0; font-size: var(--mj-fs-lg); color: var(--mj-ink-2); }
.mj-hero__excerpt { margin: 0; color: var(--mj-muted); }

.mj-hero__facts,
.mj-hero__includes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s3);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--mj-muted);
	font-size: var(--mj-fs-sm);
}

.mj-hero__media {
	border-radius: var(--mj-r-lg);
	overflow: hidden;
	background: var(--mj-invert);
	aspect-ratio: 16 / 9;
}

.mj-hero__panel {
	display: grid;
	gap: var(--mj-s4);
	padding: var(--mj-s5);
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	box-shadow: var(--mj-sh-2);
	position: sticky;
	inset-block-start: var(--mj-s5);
}

.mj-hero__price { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 750; }
.mj-hero__price del { font-size: 1rem; color: var(--mj-muted); font-weight: 500; margin-inline-start: 6px; }
.mj-hero__progress { display: grid; gap: 6px; }
.mj-hero__seats { font-size: var(--mj-fs-sm); color: var(--mj-warning); font-weight: 600; }

.mj-course-trailer { border-radius: var(--mj-r); overflow: hidden; background: var(--mj-invert); }
.mj-course-trailer iframe,
.mj-course-trailer video { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

.mj-curriculum { margin: var(--mj-s6) 0; }
.mj-curriculum__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s3);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--mj-s4);
}

.mj-chapters { display: grid; gap: var(--mj-s3); }

.mj-chapter {
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	overflow: hidden;
	box-shadow:0 8px 28px rgba(16,24,40,.06);
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mj-chapter:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--mj-brand) 28%,var(--mj-line)); box-shadow:0 14px 34px rgba(16,24,40,.09); }

.mj-chapter__head {
	display: flex;
	align-items: center;
	gap: var(--mj-s3);
	padding: var(--mj-s4);
	cursor: pointer;
}

.mj-chapter__title { flex: 1; }
.mj-chapter__title strong { display: block; font-size: var(--mj-fs-md); }
.mj-chapter__summary { margin:0; color:var(--mj-muted); font-size:var(--mj-fs-sm); display:grid; grid-template-columns:42px minmax(150px,1fr) auto auto 24px; gap:12px; align-items:center; padding:18px 20px; cursor:pointer; list-style:none; }
.mj-chapter__summary::-webkit-details-marker { display:none; }
.mj-chapter__index { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--mj-brand-50); color:var(--mj-brand-700); font-weight:800; }
.mj-chapter__title { color:var(--mj-ink); font-size:var(--mj-fs-md); font-weight:750; }
.mj-chapter__chevron { transition:transform .2s ease; }
.mj-chapter__details[open] .mj-chapter__chevron { transform:rotate(180deg); }
.mj-chapter__intro { margin:0; padding:0 20px 16px; color:var(--mj-muted); }

.mj-lessons { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mj-line-2); }

.mj-lesson {
	display: flex;
	align-items: center;
	gap: var(--mj-s3);
	padding: 0;
	border-bottom: 1px solid var(--mj-line-2);
}
.mj-lesson__link { padding:15px 20px; min-height:58px; }
.mj-lesson__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--mj-brand-50); }
.mj-lesson:hover { background:#fbfcff; }

.mj-lesson:last-child { border-bottom: 0; }
.mj-lesson__icon { color: var(--mj-brand); }
.mj-lesson__title { flex: 1 1 0; min-width: 0; font-weight: 500; }
.mj-lesson__icon { flex: 0 0 34px; }
.mj-lesson__link { color: inherit; text-decoration: none; display: flex; gap: var(--mj-s3); align-items: center; flex: 1; }
.mj-lesson__link:hover .mj-lesson__title { color: var(--mj-brand-600); }
.mj-lesson__tags { display: flex; gap: 6px; align-items: center; }
.mj-lesson__duration { color: var(--mj-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mj-lesson--locked { opacity: .72; }
.mj-lesson--current { background: var(--mj-brand-50); }
.mj-lesson--completed .mj-lesson__title { color: var(--mj-success); }
@media(max-width:640px){.mj-chapter__summary{grid-template-columns:36px minmax(0,1fr) 22px}.mj-chapter__count,.mj-chapter__duration{display:none}.mj-lesson__link{flex-wrap:wrap}.mj-lesson__tags{margin-inline-start:46px}.mj-lesson__duration{margin-inline-start:auto}}

.mj-review-list { display: grid; gap: var(--mj-s4); margin: 0; padding: 0; list-style: none; }
.mj-review { padding: var(--mj-s4); background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r); }
.mj-review__head { display: flex; align-items: center; gap: var(--mj-s3); margin-bottom: var(--mj-s2); }
.mj-review__title { margin: 0 0 6px; font-size: var(--mj-fs-md); font-weight: 700; }
.mj-review__body { margin: 0; color: var(--mj-ink-2); }
.mj-review__reply {
	margin-top: var(--mj-s3);
	padding: var(--mj-s3);
	background: var(--mj-brand-50);
	border-radius: var(--mj-r-sm);
}

.mj-related__list { display: grid; gap: var(--mj-s3); margin: 0; padding: 0; list-style: none; }
.mj-related__list a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--mj-s3); align-items: center; text-decoration: none; color: inherit; }
.mj-related__thumb img { width: 72px; height: 48px; object-fit: cover; border-radius: var(--mj-r-sm); display: block; }
.mj-related__title { font-weight: 600; font-size: var(--mj-fs-sm); }
.mj-related__price { grid-column: 2; font-weight: 700; font-size: var(--mj-fs-sm); color: var(--mj-brand-600); }

.mj-instructor-card { display: flex; gap: var(--mj-s4); align-items: flex-start; }
.mj-avatar { border-radius: var(--mj-r-pill); }

/* -------------------------------------------------------------------------
 * 10. Player
 * ---------------------------------------------------------------------- */

.mj-player-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mj-s4);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mj-s5);
	padding: var(--mj-s3) var(--mj-s4);
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r);
}

.mj-player-bar__back { display: inline-flex; align-items: center; gap: var(--mj-s2); color: var(--mj-ink); text-decoration: none; font-weight: 600; }
.mj-player-bar__progress { display: flex; align-items: center; gap: var(--mj-s3); min-width: 220px; flex: 1; justify-content: flex-end; }

.mj-player-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: var(--mj-s5);
	align-items: start;
}

.mj-player__stage { display: grid; gap: var(--mj-s4); min-width: 0; }
.mj-player__title { margin: 0; font-size: var(--mj-fs-h2); font-weight: 700; }
.mj-player__media { border-radius: var(--mj-r); overflow: hidden; background: var(--mj-invert); }
.mj-player__sidebar { position: sticky; inset-block-start: var(--mj-s4); max-height: calc(100vh - 120px); overflow: auto; }
.mj-player__actions { display: flex; flex-wrap: wrap; gap: var(--mj-s3); align-items: center; }
.mj-player__gate { display: grid; justify-items: center; gap: var(--mj-s4); padding: var(--mj-s8) var(--mj-s4); text-align: center; }

.mj-player iframe,
.mj-player video,
.mj-player audio { display: block; width: 100%; border: 0; }
.mj-player iframe,
.mj-player video { aspect-ratio: 16 / 9; }
.mj-player__fallback { margin: 0; padding: var(--mj-s3); color: var(--mj-muted); }

/* Click-to-load poster. Every child is absolutely positioned, so the
   container needs its own box or the poster (and its play button) collapses to
   nothing and cannot be clicked. */
.mj-player--facade { position: relative; aspect-ratio: 16 / 9; background: var(--mj-invert); }
.mj-player__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}

/* Once the facade is replaced by the real embed the poster button retires.
   An explicit rule is required: `display: grid` above outranks :where([hidden]). */
.mj-player__facade[hidden] { display: none; }
.mj-player.is-loaded .mj-player__facade { display: none; }

.mj-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mj-player__play {
	position: relative;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: var(--mj-r-pill);
	background: rgba(255, 255, 255, .92);
	color: var(--mj-brand-600);
	font-size: 24px;
	box-shadow: var(--mj-sh-3);
}

.mj-pdf { background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r); }
.mj-pdf__object { display: block; width: 100%; border: 0; }

.mj-notes { margin-top: var(--mj-s6); }
.mj-notes__form { display: grid; gap: var(--mj-s3); }

/* -------------------------------------------------------------------------
 * 11. Quiz shell (runtime is rendered by quiz.js)
 * ---------------------------------------------------------------------- */

.mj-quiz-app {
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	padding: var(--mj-s5);
	box-shadow: var(--mj-sh-1);
}

.mj-quiz-app__loading { color: var(--mj-muted); }
.mj-quiz__head { display: flex; flex-wrap: wrap; gap: var(--mj-s3); align-items: center; justify-content: space-between; margin-bottom: var(--mj-s4); }
.mj-quiz__timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mj-brand-600); }
.mj-quiz__timer.is-urgent { color: var(--mj-danger); }
.mj-quiz__question { padding: var(--mj-s4) 0; border-bottom: 1px solid var(--mj-line-2); }
.mj-quiz__question:last-of-type { border-bottom: 0; }
.mj-quiz__options { display: grid; gap: var(--mj-s2); margin: var(--mj-s3) 0 0; padding: 0; list-style: none; }
.mj-quiz__option { display: flex; gap: var(--mj-s3); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--mj-line); border-radius: var(--mj-r-sm); cursor: pointer; }
.mj-quiz__option:hover { background: var(--mj-brand-50); }
.mj-quiz__option input { margin-top: 3px; }
.mj-quiz__nav { display: flex; flex-wrap: wrap; gap: var(--mj-s3); justify-content: space-between; margin-top: var(--mj-s5); }
.mj-quiz__result { display: grid; gap: var(--mj-s3); }
.mj-quiz__score { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 750; }

/* -------------------------------------------------------------------------
 * 12. Checkout, receipts, certificates
 * ---------------------------------------------------------------------- */

.mj-checkout__grid { align-items: start; }
.mj-cart-table td, .mj-cart-table th { padding: 14px; }
.mj-coupon, .mj-coupon__row { display: flex; gap: var(--mj-s2); align-items: end; flex-wrap: wrap; }
.mj-summary { display: grid; gap: var(--mj-s3); padding: var(--mj-s5); background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r-lg); }
.mj-summary__title { margin: 0; font-size: var(--mj-fs-lg); font-weight: 700; }
.mj-summary__rows { display: grid; gap: var(--mj-s2); }
.mj-summary__rows > div { display: flex; justify-content: space-between; gap: var(--mj-s3); }
.mj-summary__total { display: flex; justify-content: space-between; padding-top: var(--mj-s3); border-top: 1px solid var(--mj-line); font-size: var(--mj-fs-lg); font-weight: 750; }

.mj-gateways { display: grid; gap: var(--mj-s2); }
.mj-gateway { display: flex; gap: var(--mj-s3); align-items: flex-start; padding: var(--mj-s3); border: 1px solid var(--mj-line); border-radius: var(--mj-r-sm); cursor: pointer; }
.mj-gateway:hover { background: var(--mj-brand-50); }
.mj-gateway__body { display: grid; gap: 4px; }
.mj-pay { display: grid; gap: var(--mj-s3); }
.mj-pay__note { color: var(--mj-muted); font-size: var(--mj-fs-sm); }
.mj-orders-mini { margin-top: var(--mj-s5); display: grid; gap: var(--mj-s2); }

.mj-receipt { display: grid; gap: var(--mj-s4); padding: var(--mj-s5); background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r-lg); box-shadow: var(--mj-sh-1); }
.mj-receipt__head { display: flex; flex-wrap: wrap; gap: var(--mj-s3); align-items: center; justify-content: space-between; }
.mj-receipt__head .mj-section__title { margin: 0; }
.mj-receipt__meta { border: 0; }
.mj-receipt__items { margin: 0; }
.mj-receipt__totals { display: grid; gap: var(--mj-s2); max-width: 360px; margin-inline-start: auto; }
.mj-receipt__totals > div { display: flex; justify-content: space-between; gap: var(--mj-s3); }
.mj-receipt__discount { color: var(--mj-success); }
.mj-receipt__total { padding-top: var(--mj-s3); border-top: 1px solid var(--mj-line); font-size: var(--mj-fs-lg); font-weight: 750; }
.mj-receipt__actions { display: flex; flex-wrap: wrap; gap: var(--mj-s3); }

.mj-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--mj-s4); }
.mj-cert-card { display: grid; gap: var(--mj-s3); padding: var(--mj-s5); background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r-lg); box-shadow: var(--mj-sh-1); }
.mj-cert-card__top { display: flex; gap: var(--mj-s3); align-items: center; justify-content: space-between; }
.mj-cert-card__seal { color: var(--mj-brand); }
.mj-cert-card__title { margin: 0; font-size: var(--mj-fs-lg); font-weight: 700; }
.mj-cert-card__actions { display: flex; flex-wrap: wrap; gap: var(--mj-s2); }
.mj-cert-mini { display: flex; gap: var(--mj-s2); align-items: center; color: var(--mj-muted); font-size: var(--mj-fs-sm); }
.mj-cert-mini__icon { color: var(--mj-success); }

.mj-certificate-view { display: grid; gap: var(--mj-s5); }
.mj-certificate-view__head { display: flex; flex-wrap: wrap; gap: var(--mj-s3); align-items: center; justify-content: space-between; }
.mj-certificate-view__document { display: grid; place-items: center; padding: var(--mj-s5); background: var(--mj-canvas); border-radius: var(--mj-r-lg); }
.mj-certificate-view__actions { display: flex; flex-wrap: wrap; gap: var(--mj-s3); }

.mj-verify { display: grid; gap: var(--mj-s5); max-width: var(--mj-w-narrow); margin: 0 auto; }
.mj-verify__head { text-align: center; }
.mj-verify__form { display: flex; flex-wrap: wrap; gap: var(--mj-s3); align-items: end; justify-content: center; }
.mj-verify__result {
	display: flex;
	gap: var(--mj-s5);
	padding: var(--mj-s5);
	background: var(--mj-surface);
	border: 1px solid var(--mj-line);
	border-radius: var(--mj-r-lg);
	box-shadow: var(--mj-sh-2);
}
.mj-verify__result--success { border-inline-start: 6px solid var(--mj-success); }
.mj-verify__result--warning { border-inline-start: 6px solid var(--mj-warning); }
.mj-verify__result--danger  { border-inline-start: 6px solid var(--mj-danger); }
.mj-verify__seal { color: var(--mj-success); }
.mj-verify__course { margin: var(--mj-s2) 0 var(--mj-s4); font-size: var(--mj-fs-h2); }

/* -------------------------------------------------------------------------
 * 13. Account, dashboard, misc
 * ---------------------------------------------------------------------- */

.mj-account { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--mj-s6); align-items: start; }
.mj-account__panel { padding: var(--mj-s5); background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r-lg); box-shadow: var(--mj-sh-1); }
.mj-account__title { margin: 0 0 var(--mj-s4); font-size: var(--mj-fs-h3); font-weight: 700; }
.mj-account__identity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mj-s4); align-items: center; margin-bottom: var(--mj-s5); }

.mj-dashboard { display: grid; gap: var(--mj-s6); }
.mj-dashboard__head { display: flex; flex-wrap: wrap; gap: var(--mj-s3); align-items: center; justify-content: space-between; }
.mj-dashboard__title { margin: 0; font-size: var(--mj-fs-h2); }
.mj-dashboard__section { display: grid; gap: var(--mj-s4); }
.mj-dashboard__section > .mj-table { background: var(--mj-surface); }

.mj-apply { max-width: var(--mj-w-narrow); }
.mj-apply__form { display: grid; gap: var(--mj-s4); }

.mj-gate { display: grid; justify-items: center; gap: var(--mj-s3); text-align: center; }
.mj-gate__card { padding: var(--mj-s6); background: var(--mj-surface); border: 1px solid var(--mj-line); border-radius: var(--mj-r-lg); box-shadow: var(--mj-sh-2); }
.mj-gate__icon { color: var(--mj-brand); }
.mj-gate__title { margin: 0 0 var(--mj-s2); font-size: var(--mj-fs-h2); }
.mj-gate__text { margin: 0 0 var(--mj-s4); color: var(--mj-muted); }
.mj-gate__actions { display: flex; flex-wrap: wrap; gap: var(--mj-s3); justify-content: center; }
.mj-gate__back { margin-top: var(--mj-s3); }

.mj-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--mj-s4); color: var(--mj-muted); font-size: var(--mj-fs-sm); }
.mj-breadcrumbs a { color: inherit; }

/* Toasts */

.mj-toasts {
	position: fixed;
	inset-block-end: var(--mj-s5);
	inset-inline-end: var(--mj-s5);
	z-index: 99999;
	display: grid;
	gap: var(--mj-s2);
	max-width: min(360px, 90vw);
}

.mj-toast {
	padding: 12px 16px;
	border-radius: var(--mj-r);
	background: var(--mj-invert);
	color: #fff;
	font-size: var(--mj-fs-sm);
	box-shadow: var(--mj-sh-3);
	animation: mj-toast-in .22s var(--mj-ease);
}

.mj-toast--success { background: var(--mj-success); }
.mj-toast--error   { background: var(--mj-danger); }
.mj-toast--warning { background: var(--mj-warning); }
.mj-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: all .22s var(--mj-ease); }

@keyframes mj-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Stars */

.mj-stars { display: inline-flex; gap: 2px; color: var(--mj-accent); }

/* -------------------------------------------------------------------------
 * 14. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.mj-grid--sidebar,
	.mj-hero,
	.mj-player-layout,
	.mj-account {
		grid-template-columns: minmax(0, 1fr);
	}

	.mj-hero__panel,
	.mj-player__sidebar {
		position: static;
		max-height: none;
	}
}

@media (max-width: 720px) {
	.mj-grid--2 { grid-template-columns: minmax(0, 1fr); }

	.mj-course-row { grid-template-columns: 96px minmax(0, 1fr); }
	.mj-course-row__progress { grid-column: 1 / -1; max-width: none; }

	.mj-details > div { flex-direction: column; gap: 2px; }
	.mj-details dd { text-align: start; }

	.mj-verify__result { flex-direction: column; }
	.mj-main { padding-inline: var(--mj-s3); }
}

/* -------------------------------------------------------------------------
 * 15. Motion & print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mj-main *,
	.mj-toast {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.mj-player-bar,
	.mj-hero__panel,
	.mj-certificate-view__actions,
	.mj-receipt__actions,
	.mj-toasts,
	.mj-btn {
		display: none !important;
	}
}