/* #55: Inter font - ensure it loads */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   LearnDash Student Dashboard Pro
   Main Dashboard Styles
   ========================================================================== */

/* ---------- Reset & Base - Theme Isolation Shield ---------- */
.lmsc-dash *,
.lmsc-dash *::before,
.lmsc-dash *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Reporting Phase 3: recovery, equal-period comparisons, and event timeline. */
.lmsc-qr-recovery,
.lmsc-qr-difficult {
	margin: 0 0 18px;
}

.lmsc-qr-difficult {
	padding: 18px;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 12px;
	background: var(--lmsc-card-bg, #fff);
}

.lmsc-qr-difficult-list {
	display: grid;
	gap: 8px;
	margin-bottom: 12px;
}

.lmsc-qr-difficult-list > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--lmsc-bg, #f8fafc);
}

.lmsc-qr-difficult-list span {
	color: var(--lmsc-text-muted, #64748b);
	white-space: nowrap;
}

.lmsc-period-comparison {
	margin-top: 18px;
}

#lmsc-course-period-comparison {
	padding: 16px;
}

#lmsc-course-period-comparison > .lmsc-chart-card__title {
	margin-bottom: 6px;
}

#lmsc-course-period-comparison > .lmsc-report-definition {
	margin: 0 0 12px;
	font-size: 0.78rem;
	line-height: 1.4;
	text-align: center;
}

.lmsc-period-comparison__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.lmsc-period-comparison__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 10px;
	background: var(--lmsc-bg, #f8fafc);
}

.lmsc-period-comparison__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.lmsc-period-comparison__head > strong {
	min-width: 0;
	font-size: 0.78rem;
	line-height: 1.25;
}

.lmsc-period-comparison__values {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.lmsc-period-comparison__values > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.lmsc-period-comparison__values > div span {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.1;
}

.lmsc-period-comparison__values small {
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.68rem;
}

.lmsc-period-comparison__head em {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--lmsc-surface, #fff);
	font-style: normal;
	font-weight: 700;
	font-size: 0.7rem;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-period-comparison__head em small {
	color: inherit;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.lmsc-period-comparison__head em.is-up { color: #047857; background: rgba(16, 185, 129, 0.12); }
.lmsc-period-comparison__head em.is-down { color: #b91c1c; background: rgba(239, 68, 68, 0.12); }

.lmsc-activity-timeline {
	margin-top: 18px;
}

.lmsc-activity-timeline__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.lmsc-activity-timeline__date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	margin-bottom: 12px;
	border-radius: 8px;
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.08);
}

.lmsc-activity-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lmsc-activity-timeline__list > li {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 12px;
	padding: 0 0 20px;
}

.lmsc-activity-timeline__list > li:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 16px;
	bottom: 2px;
	width: 2px;
	background: var(--lmsc-border, #e5e7eb);
}

.lmsc-activity-timeline__marker {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	border: 3px solid var(--lmsc-card-bg, #fff);
	border-radius: 50%;
	background: var(--lmsc-primary, #fb4365);
	box-shadow: 0 0 0 1px var(--lmsc-border, #e5e7eb);
}

.lmsc-activity-timeline__marker.is-quiz_pass,
.lmsc-activity-timeline__marker.is-course_completion,
.lmsc-activity-timeline__marker.is-certificate_earned { background: #10b981; }
.lmsc-activity-timeline__marker.is-quiz_fail,
.lmsc-activity-timeline__marker.is-returned { background: #ef4444; }
.lmsc-activity-timeline__marker.is-submission,
.lmsc-activity-timeline__marker.is-graded { background: #f59e0b; }

.lmsc-activity-timeline__meta {
	display: flex;
	justify-content: space-between;
	gap: 14px;
}

.lmsc-activity-timeline__meta time,
.lmsc-activity-timeline__list p,
.lmsc-activity-timeline__list small {
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-activity-timeline__list p {
	margin: 3px 0;
}

.lmsc-heatmap button.lmsc-heatmap-cell {
	display: block;
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.lmsc-heatmap button.lmsc-heatmap-cell:hover,
.lmsc-heatmap button.lmsc-heatmap-cell:focus-visible {
	outline: 2px solid var(--lmsc-primary, #fb4365);
	outline-offset: 2px;
}

@media (max-width: 1100px) {
	.lmsc-period-comparison__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.lmsc-period-comparison__grid { grid-template-columns: 1fr; }
	.lmsc-activity-timeline__actions,
	.lmsc-activity-timeline__meta,
	.lmsc-qr-difficult-list > div { align-items: flex-start; flex-direction: column; }
	.lmsc-activity-timeline__actions select,
	.lmsc-activity-timeline__actions .lmsc-btn { width: 100%; }
	.lmsc-qr-difficult-list span { white-space: normal; }
}

/* Stacking context isolation - prevents z-index leaking out */
.lmsc-dash,
.lmsc-component--learning-path,
[data-lmsc-learning-path] {
	isolation: isolate;
}

/* Headings - prevent theme font-family, letter-spacing, text-transform bleed */
.lmsc-dash h1,
.lmsc-dash h2,
.lmsc-dash h3,
.lmsc-dash h4,
.lmsc-dash h5,
.lmsc-dash h6 {
	font-family: inherit;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lmsc-text);
	margin: 0;
	padding: 0;
}

/* Paragraphs */
.lmsc-dash p {
	margin: 0;
	padding: 0;
	font-family: inherit; /* prevent theme p{font-family} bleed (e.g. progress message) */
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

/* Lists - prevent theme list-style, padding, margin injection */
.lmsc-dash ul,
.lmsc-dash ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lmsc-dash li {
	margin: 0;
	padding: 0;
}

/* Tables - prevent theme borders, background, and padding injection */
.lmsc-dash table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: none;
}

.lmsc-dash th,
.lmsc-dash td {
	text-align: left;
	padding: 0;
	border: none;
	font-weight: inherit;
	vertical-align: middle;
}

/* Form elements - prevent theme input styling, font-size, height overrides.
   Uses :where() for zero specificity so component classes always win. */
:where(.lmsc-dash) :where(button, input, select, textarea) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	outline: none;
}

.lmsc-dash button {
	cursor: pointer;
}

/* Labels */
.lmsc-dash label {
	font-weight: inherit;
	margin: 0;
	display: inline;
}

/* Fieldset */
.lmsc-dash fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* HR - prevent theme color/height injection */
.lmsc-dash hr {
	border: none;
	border-top: 1px solid var(--lmsc-border);
	margin: 0;
}

/* Strong/em - prevent theme font-weight overrides */
.lmsc-dash strong,
.lmsc-dash b {
	font-weight: 600;
}

.lmsc-dash {
	/* ── Default Design Tokens (overridden by skins) ── */
	--lmsc-primary: #1E6FF5; /* #3B82F6 -> AA with white text */
	--lmsc-primary-rgb: 30, 111, 245;
	--lmsc-secondary: #6366F1;
	--lmsc-accent: #8B5CF6;
	--lmsc-bg: #F8FAFC;
	--lmsc-surface: #FFFFFF;
	--lmsc-surface-alt: #F1F5F9;
	--lmsc-text: #1E293B;
	--lmsc-text-muted: #64748B;
	--lmsc-border: #E2E8F0;
	--lmsc-card-bg: #FFFFFF;
	/* Text colour for content sitting ON a brand-coloured background.
	   The default skin's primary (#fb4365) only reaches 3.45:1 against white,
	   so white button labels failed WCAG AA. Each skin overrides these in
	   skins.css with the value that actually passes, which lets us keep the
	   brand colours exactly as designed. */
	--lmsc-on-primary: #FFFFFF;
	--lmsc-on-accent: #FFFFFF;
	/* Light tint of the primary, for text/marks on DARK surfaces where the
	   full-strength primary is too dark to read. Overridden per skin in
	   skins.css; every value clears 7:1 on both dark surfaces. */
	--lmsc-primary-soft: #8DB5F6;
	--lmsc-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	--lmsc-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
	--lmsc-radius: 12px;
	--lmsc-radius-sm: 8px;
	--lmsc-transition: all 0.2s ease;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--lmsc-text);
	background: var(--lmsc-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	border-radius: 10px;
	overflow: hidden;
}

.lmsc-dash a,
.lmsc-dash a:link,
.lmsc-dash a:visited,
.lmsc-dash a:hover,
.lmsc-dash a:active,
.lmsc-dash a:focus {
	color: inherit;
	text-decoration: none !important;
	transition: var(--lmsc-transition);
}

.lmsc-dash a:hover {
	opacity: 0.85;
}

.lmsc-dash img {
	max-width: 100%;
	height: auto;
	display: block;
}

.lmsc-dash svg {
	flex-shrink: 0;
}

/* ---------- Layout: Sidebar ---------- */
.lmsc-dash--sidebar {
	display: grid;
	grid-template-columns: 280px 1fr;
	min-height: 100vh;
	gap: 0;
}

/* ---------- Sidebar ---------- */
.lmsc-dash__sidebar {
	background: var(--lmsc-sidebar-bg, linear-gradient(180deg, var(--lmsc-secondary) 0%, color-mix(in srgb, var(--lmsc-secondary) 85%, #000) 100%));
	color: var(--lmsc-sidebar-text, rgba(255, 255, 255, 0.85));
	display: flex;
	flex-direction: column;
	padding: 24px 0;
	position: sticky;
	top: 0;
	min-height: 100vh;
	height: auto;
	overflow: visible;
}

/* Default sidebar variables - only when no skin overrides them */
.lmsc-dash:not([data-skin]) .lmsc-dash__sidebar {
	--lmsc-sidebar-text: rgba(255, 255, 255, 0.85);
	--lmsc-sidebar-text-muted: rgba(255, 255, 255, 0.45);
	--lmsc-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
	--lmsc-sidebar-border: rgba(255, 255, 255, 0.1);
}

/* Account for WP admin bar */
body.admin-bar .lmsc-dash__sidebar {
	min-height: calc(100vh - 32px);
	top: 32px;
	height: auto;
}

.lmsc-dash__sidebar-header {
	text-align: center;
	padding: 16px 24px 24px;
	border-bottom: 1px solid var(--lmsc-sidebar-border);
}

.lmsc-dash__sidebar-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 12px;
	border: 3px solid var(--lmsc-sidebar-border);
}

.lmsc-dash__sidebar-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lmsc-dash__sidebar-user h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--lmsc-sidebar-text);
	text-shadow: none;
}

.lmsc-dash__sidebar-role {
	font-size: 12px;
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--lmsc-sidebar-text-muted);
}

/* Sidebar Nav */
.lmsc-dash__sidebar-nav {
	flex: 1;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Grouped nav sections */
.lmsc-dash__nav-section {
	margin-bottom: 4px;
}

.lmsc-dash__nav-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 16px 6px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--lmsc-sidebar-text-muted) !important;
	font-family: inherit;
	transition: color 0.2s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.lmsc-dash__nav-section-header:hover {
	color: var(--lmsc-sidebar-text) !important;
	background-color: rgba(var(--lmsc-primary-rgb, 35, 90, 243), 0.08) !important;
	background: rgba(var(--lmsc-primary-rgb, 35, 90, 243), 0.08) !important;
}

.lmsc-dash__nav-chevron {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.lmsc-dash__nav-section-header[aria-expanded="false"] .lmsc-dash__nav-chevron {
	transform: rotate(-90deg);
}

.lmsc-dash__nav-section-items {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.lmsc-dash__nav-section-header[aria-expanded="false"]+.lmsc-dash__nav-section-items {
	max-height: 0 !important;
}

.lmsc-dash__nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	border-radius: 12px;
	color: var(--lmsc-sidebar-text) !important;
	font-size: 14px;
	font-weight: 500;
	transition: var(--lmsc-transition);
	cursor: pointer;
	border: none;
	background: none;
	text-align: left;
	width: 100%;
	text-decoration: none !important;
	min-width: 0;
}

.lmsc-dash__nav-item span:not(.lmsc-dash__nav-icon):not(.lmsc-dash__nav-badge) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.lmsc-dash__nav-item:hover {
	background: var(--lmsc-sidebar-hover-bg) !important;
	color: var(--lmsc-sidebar-text) !important;
	transform: translateX(4px);
	text-decoration: none !important;
}

.lmsc-dash__nav-item--active {
	background: var(--lmsc-primary) !important;
	color: var(--lmsc-on-primary, #fff) !important;
	box-shadow: 0 4px 15px rgba(var(--lmsc-primary-rgb), 0.4);
}

.lmsc-dash__nav-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Sidebar Footer */
.lmsc-dash__sidebar-footer {
	padding: 16px 20px;
	border-top: 1px solid var(--lmsc-sidebar-border);
}

.lmsc-dash__layout-switcher {
	margin-bottom: 16px;
}

.lmsc-dash__layout-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--lmsc-sidebar-text-muted);
	margin-bottom: 8px;
	display: block;
}

.lmsc-dash__layout-options {
	display: flex;
	gap: 8px;
}

.lmsc-dash__layout-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid var(--lmsc-sidebar-border);
	background: var(--lmsc-sidebar-hover-bg);
	cursor: pointer;
	padding: 6px;
	transition: var(--lmsc-transition);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-dash__layout-btn svg {
	width: 100%;
	height: 100%;
	fill: var(--lmsc-sidebar-text-muted);
	stroke: none;
}

.lmsc-dash__layout-btn:hover {
	background: var(--lmsc-sidebar-hover-bg);
}

.lmsc-dash__layout-btn--active {
	background: var(--lmsc-primary);
	border-color: var(--lmsc-primary);
}

.lmsc-dash__layout-btn--active svg {
	fill: #fff;
}

/* Header Layout Switcher (visible in all layouts) */
.lmsc-dash__header-layout-switcher {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 4px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 10px;
}

.lmsc-dash__header-layout-switcher .lmsc-dash__layout-btn {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	border: 1px solid var(--lmsc-border);
	background: var(--lmsc-surface);
	padding: 5px;
}

.lmsc-dash__header-layout-switcher .lmsc-dash__layout-btn svg {
	fill: var(--lmsc-text-muted);
}

.lmsc-dash__header-layout-switcher .lmsc-dash__layout-btn:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	border-color: var(--lmsc-primary);
}

.lmsc-dash__header-layout-switcher .lmsc-dash__layout-btn:hover svg {
	fill: var(--lmsc-primary);
}

.lmsc-dash__header-layout-switcher .lmsc-dash__layout-btn--active {
	background: var(--lmsc-primary);
	border-color: var(--lmsc-primary);
}

.lmsc-dash__header-layout-switcher .lmsc-dash__layout-btn--active svg {
	fill: #fff;
}

/* Tab Badge Counts */
.lmsc-dash__nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--lmsc-on-primary, #fff);
	background: var(--lmsc-primary, #fb4365);
	border-radius: 10px;
	margin-left: 6px;
	letter-spacing: 0;
}

/* Sidebar badge - smaller, positioned right */
.lmsc-dash__sidebar-nav .lmsc-dash__nav-badge {
	margin-left: auto;
	font-size: 10px;
	min-width: 18px;
	height: 18px;
}

/* Topnav badge - slightly different positioning */
.lmsc-dash__topnav .lmsc-dash__nav-badge {
	position: relative;
	top: -1px;
}

.lmsc-dash__logout-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 10px;
	color: var(--lmsc-sidebar-text-muted, rgba(255, 255, 255, 0.7));
	font-size: 14px;
	width: 100%;
	transition: var(--lmsc-transition);
}

.lmsc-dash__logout-btn svg {
	width: 18px;
	height: 18px;
}

.lmsc-dash__logout-btn:hover {
	background: rgba(239, 68, 68, 0.15);
	color: var(--lmsc-danger, #ef4444);
}

/* Logout link below profile completeness in sidebar */
.lmsc-dash a.lmsc-dash__profile-logout-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-text-muted, #94a3b8);
	text-decoration: none;
	padding: 8px 16px;
	min-height: 44px;
	border-radius: 8px;
	margin: 12px auto 0;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	transition: var(--lmsc-transition);
}
.lmsc-dash a.lmsc-dash__profile-logout-link:hover {
	color: var(--lmsc-danger, #ef4444);
	background: rgba(239, 68, 68, 0.08);
}
.lmsc-dash a.lmsc-dash__profile-logout-link:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}
.lmsc-dash__profile-logout-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* BuddyBoss sidebar variant */
.lmsc-bb-section--sidebar {
	margin-top: 16px;
}
.lmsc-bb-section--sidebar .lmsc-bb-divider {
	height: 1px;
	background: var(--lmsc-border, #e2e8f0);
	margin-bottom: 16px;
}
.lmsc-bb-section--sidebar .lmsc-bb-section__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 12px;
}

/* Danger zone - collapsed details element */
.lmsc-dash__profile-danger-details {
	margin-top: 24px;
	border-top: 1px solid var(--lmsc-border, #e2e8f0);
	padding-top: 16px;
}
.lmsc-dash__profile-danger-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-text-muted, #94a3b8);
	list-style: none;
	user-select: none;
	padding: 4px 0;
}
.lmsc-dash__profile-danger-summary::-webkit-details-marker { display: none; }
.lmsc-dash__profile-danger-summary:hover { color: var(--lmsc-danger, #ef4444); }
.lmsc-dash__profile-danger-summary svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.lmsc-dash__profile-danger-content {
	padding: 12px 0 0 20px;
}
.lmsc-dash__profile-danger-content p {
	font-size: 13px;
	margin: 0 0 12px;
}

/* ---------- Main Content ---------- */
.lmsc-dash__main {
	padding: 28px 36px;
	min-height: 100vh;
	min-width: 0;
	overflow: hidden;
}

/* ---------- Header ---------- */
.lmsc-dash__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 20px;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
	margin-bottom: 8px;
}

.lmsc-dash__header-left h1,
.lmsc-dash__page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--lmsc-text);
	margin: 0;
}

.lmsc-dash__header-left p {
	font-size: 14px;
	color: var(--lmsc-text-muted);
	margin: 2px 0 0;
}

.lmsc-dash__header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lmsc-dash__header-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	flex-shrink: 0;
}

.lmsc-dash__header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lmsc-dash__avatar-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.lmsc-dash__avatar-link:hover {
	transform: scale(1.08);
}

/* ---------- Search (icon-only, expands on focus) ---------- */
.lmsc-dash__search {
	position: relative;
	width: 40px;
	overflow: hidden;
	transition: width 0.3s ease;
	cursor: pointer;
}

.lmsc-dash__search:focus-within {
	width: 280px;
	overflow: visible;
}

.lmsc-dash__search > .lmsc-dash__search-input {
	width: 100%;
	padding: 10px 16px 10px 48px;
	border: 1px solid transparent;
	border-radius: 20px;
	font-size: 0 !important;
	background: transparent;
	transition: all 0.3s ease;
	outline: none;
	font-family: inherit;
	cursor: pointer;
	color: transparent !important;
}

.lmsc-dash__search > .lmsc-dash__search-input::placeholder {
	color: transparent !important;
	transition: color 0.2s ease;
}

.lmsc-dash__search:focus-within .lmsc-dash__search-input {
	border-color: var(--lmsc-border);
	background: var(--lmsc-surface);
	cursor: text;
	color: var(--lmsc-text, #1e293b) !important;
	font-size: 14px !important;
	padding-left: 48px;
}

.lmsc-dash__search:focus-within .lmsc-dash__search-input::placeholder {
	color: var(--lmsc-text-muted, #94a3b8) !important;
}

.lmsc-dash__search-input:focus {
	border-color: var(--lmsc-primary);
	box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb), 0.15);
}

.lmsc-dash__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--lmsc-text-muted);
	pointer-events: none;
	z-index: 2;
}

.lmsc-dash__search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	max-height: 320px;
	overflow-y: auto;
	background: var(--lmsc-surface);
	border: 1px solid var(--lmsc-border);
	border-radius: var(--lmsc-radius-sm);
	box-shadow: var(--lmsc-shadow-lg);
	z-index: 100;
	display: none;
}

.lmsc-dash__search-results.is-open {
	display: block;
}

.lmsc-dash__search-result-item {
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	border-bottom: 1px solid var(--lmsc-border);
	transition: background 0.15s;
	font-size: 13px;
}

.lmsc-dash__search-result-item:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.06);
}

.lmsc-dash__search-result-item:last-child {
	border-bottom: none;
}

.lmsc-dash__search-result-type {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted);
	background: var(--lmsc-bg);
	padding: 2px 8px;
	border-radius: 4px;
}

/* ---------- Notification Bell ---------- */
.lmsc-dash__notification-bell {
	position: relative;
}

.lmsc-dash__bell-btn,
.lmsc-dash__msg-btn {
	background: none;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	border-radius: 50%;
	width: 38px;
	height: 38px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
	position: relative;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-dash__bell-btn svg,
.lmsc-dash__msg-btn svg {
	width: 20px;
	height: 20px;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-dash__bell-btn:hover,
.lmsc-dash__msg-btn:hover {
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08);
	border-color: var(--lmsc-primary);
	transform: scale(1.05);
}

.lmsc-dash__bell-btn:hover svg,
.lmsc-dash__msg-btn:hover svg {
	color: var(--lmsc-primary);
}

/* Active / focus - when dropdown is open. Use :focus-visible (keyboard) not
   :focus, so a MOUSE click no longer leaves the icon button stuck "fully blued"
   after the panel opens. :active keeps the press feedback. */
.lmsc-dash__notification-bell:has(.is-open) .lmsc-dash__bell-btn,
.lmsc-dash__bell-btn:focus-visible,
.lmsc-dash__bell-btn:active,
.lmsc-dash__msg-btn:focus-visible,
.lmsc-dash__msg-btn:active {
	background: var(--lmsc-primary, #3b82f6);
	border-color: var(--lmsc-primary);
	outline: none;
	transform: scale(1);
}

/* Mouse-click focus: revert to the resting look instead of a persistent fill. */
.lmsc-dash__bell-btn:focus:not(:focus-visible),
.lmsc-dash__msg-btn:focus:not(:focus-visible) {
	background: none;
	border-color: var(--lmsc-border, rgba(0, 0, 0, 0.08));
}

.lmsc-dash__notification-bell:has(.is-open) .lmsc-dash__bell-btn svg,
.lmsc-dash__bell-btn:focus-visible svg,
.lmsc-dash__bell-btn:active svg,
.lmsc-dash__msg-btn:focus-visible svg,
.lmsc-dash__msg-btn:active svg {
	color: #fff;
	fill: currentColor;
}

/* ── Theme-override hardening for the header icon buttons ──────────
   Themes commonly paint a global `button { background; border-radius;
   box-shadow/focus ring }` with higher specificity, turning these icon
   buttons into dark rounded squares with a stray focus ring. Pin the
   structural properties so the circular outline style always wins
   (same approach as the notification "Clear All" pill). */
button.lmsc-dash__bell-btn,
button.lmsc-dash__msg-btn,
button.lmsc-dash__header-action-btn {
	background: transparent !important;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08)) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0;
	width: 38px;
	height: 38px;
	line-height: 1;
	color: var(--lmsc-text-muted, #6b7280) !important;
}

button.lmsc-dash__bell-btn:hover,
button.lmsc-dash__msg-btn:hover,
button.lmsc-dash__header-action-btn:hover {
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08) !important;
	border-color: var(--lmsc-primary) !important;
	color: var(--lmsc-primary) !important;
}

/* Open / pressed: filled primary circle with a white glyph. */
.lmsc-dash__notification-bell:has(.is-open) button.lmsc-dash__bell-btn,
button.lmsc-dash__bell-btn:active,
button.lmsc-dash__msg-btn:active,
button.lmsc-dash__header-action-btn:active,
button.lmsc-dash__bell-btn:focus-visible,
button.lmsc-dash__msg-btn:focus-visible,
button.lmsc-dash__header-action-btn:focus-visible {
	background: var(--lmsc-action-bg, #1D6BEE) !important;
	border-color: var(--lmsc-primary) !important;
	color: var(--lmsc-action-fg, #fff) !important;
}

.lmsc-dash__notification-bell:has(.is-open) button.lmsc-dash__bell-btn svg,
button.lmsc-dash__bell-btn:active svg,
button.lmsc-dash__msg-btn:active svg,
button.lmsc-dash__header-action-btn:active svg,
button.lmsc-dash__bell-btn:focus-visible svg,
button.lmsc-dash__msg-btn:focus-visible svg,
button.lmsc-dash__header-action-btn:focus-visible svg {
	color: #fff !important;
}

/* Mouse-click focus must NOT leave a persistent fill or theme focus ring. */
button.lmsc-dash__bell-btn:focus:not(:focus-visible),
button.lmsc-dash__msg-btn:focus:not(:focus-visible),
button.lmsc-dash__header-action-btn:focus:not(:focus-visible) {
	background: transparent !important;
	border-color: var(--lmsc-border, rgba(0, 0, 0, 0.08)) !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--lmsc-text-muted, #6b7280) !important;
}

button.lmsc-dash__bell-btn:focus:not(:focus-visible) svg,
button.lmsc-dash__msg-btn:focus:not(:focus-visible) svg,
button.lmsc-dash__header-action-btn:focus:not(:focus-visible) svg {
	color: var(--lmsc-text-muted, #6b7280) !important;
}

.lmsc-dash__bell-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--lmsc-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.lmsc-dash__notification-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 360px;
	max-height: 440px;
	background: var(--lmsc-surface);
	border: 1px solid var(--lmsc-border);
	border-radius: var(--lmsc-radius);
	box-shadow: var(--lmsc-shadow-lg);
	z-index: 200;
	display: none;
	overflow: hidden;
}

.lmsc-dash__notification-dropdown.is-open {
	display: block;
	animation: lmscFadeDown 0.2s ease;
}

.lmsc-dash__notification-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--lmsc-border);
}

.lmsc-dash__notification-header h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

/* High-specificity selector + explicit resets: theme button styles
   (background, color, border, focus ring) must not bleed in. */
.lmsc-dash__notification-dropdown .lmsc-dash__notification-header button.lmsc-dash__mark-all-read,
.lmsc-dash__mark-all-read {
	background: transparent;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	color: var(--lmsc-primary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	padding: 6px 12px;
	margin: 0;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	box-shadow: none;
	outline: none;
	transition: background 0.15s, border-color 0.15s;
}

.lmsc-dash__notification-dropdown .lmsc-dash__notification-header button.lmsc-dash__mark-all-read:hover,
.lmsc-dash__mark-all-read:hover {
	background: var(--lmsc-bg, #f1f5f9);
	border-color: var(--lmsc-primary);
	color: var(--lmsc-primary);
}

.lmsc-dash__notification-dropdown .lmsc-dash__notification-header button.lmsc-dash__mark-all-read:focus,
.lmsc-dash__notification-dropdown .lmsc-dash__notification-header button.lmsc-dash__mark-all-read:active {
	background: transparent;
	color: var(--lmsc-primary);
	box-shadow: none;
	outline: none;
}

.lmsc-dash__notification-dropdown .lmsc-dash__notification-header button.lmsc-dash__mark-all-read:focus-visible {
	outline: 2px solid var(--lmsc-primary);
	outline-offset: 2px;
}

.lmsc-dash__notification-list {
	max-height: 380px;
	overflow-y: auto;
}

.lmsc-dash__notif-item {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--lmsc-border);
	transition: background 0.15s;
	cursor: pointer;
}

.lmsc-dash__notif-item:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.04);
}

.lmsc-dash__notif-item:hover .lmsc-dash__notification-dismiss {
	opacity: 1;
}

.lmsc-dash__notif-item--unread {
	background: rgba(var(--lmsc-primary-rgb), 0.06);
}

.lmsc-dash__notif-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(var(--lmsc-primary-rgb), 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.lmsc-dash__notif-content {
	flex: 1;
	min-width: 0;
}

.lmsc-dash__notif-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

.lmsc-dash__notif-message {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-dash__notif-time {
	font-size: 11px;
	color: var(--lmsc-text-muted);
	white-space: nowrap;
}

.lmsc-dash__notification-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--lmsc-text-muted);
	font-size: 13px;
}

/* --- Dynamic notification items --- */
.lmsc-dash__notification-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--lmsc-border);
	transition: background 0.15s;
}

.lmsc-dash__notification-item:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.04);
}

.lmsc-dash__notification-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 6px;
}

.lmsc-dash__notification-body {
	flex: 1;
	min-width: 0;
}

.lmsc-dash__notification-icon {
	margin-right: 4px;
	font-size: 13px;
}

.lmsc-dash__notification-title {
	font-size: 13px;
	font-weight: 600;
	display: block;
	margin-bottom: 2px;
}

.lmsc-dash__notification-excerpt {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	margin: 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-dash__notification-time {
	font-size: 11px;
	color: var(--lmsc-text-muted);
}

.lmsc-dash__notification-dismiss {
	background: none;
	border: none;
	color: var(--lmsc-text-muted);
	font-size: 18px;
	cursor: pointer;
	padding: 2px 6px;
	line-height: 1;
	flex-shrink: 0;
	opacity: 0.5;
	transition: opacity 0.15s, color 0.15s;
	border-radius: 4px;
}

.lmsc-dash__notification-item:hover .lmsc-dash__notification-dismiss {
	opacity: 1;
}

.lmsc-dash__notification-dismiss:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
}

.lmsc-dash__notification-loading {
	padding: 24px 16px;
	text-align: center;
	color: var(--lmsc-text-muted);
	font-size: 13px;
}

/* --- Notification icon glyphs inside dropdown (from notifications.js) --- */
.lmsc-dash__notif-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--lmsc-border);
	transition: background 0.15s;
}

.lmsc-dash__notif-item:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.04);
}

.lmsc-dash__notif-item--unread {
	background: rgba(var(--lmsc-primary-rgb), 0.06);
}

.lmsc-dash__notif-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-dash__notif-icon-glyph {
	display: inline-block;
}

/* Override the white filter for icons inside the dropdown (white background) */
.lmsc-dash__notif-icon-glyph::before {
	filter: none !important;
	width: 16px;
	height: 16px;
}

.lmsc-dash__notif-icon-emoji {
	font-size: 16px;
	line-height: 1;
}

.lmsc-dash__notif-content {
	flex: 1;
	min-width: 0;
}

.lmsc-dash__notif-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

.lmsc-dash__notif-message {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-dash__notif-time {
	font-size: 11px;
	color: var(--lmsc-text-muted);
	flex-shrink: 0;
	white-space: nowrap;
}

/* ---------- Top Nav Layout ---------- */
.lmsc-dash__topnav {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	margin-bottom: 24px;
	box-shadow: var(--lmsc-shadow);
	overflow-x: auto;
}

.lmsc-dash__topnav-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	color: #475569;
	white-space: nowrap;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	background: none;
	text-decoration: none;
}

.lmsc-dash__topnav-item:hover {
	background: rgba(0, 0, 0, 0.06);
	color: #1e293b;
	text-decoration: none;
}

.lmsc-dash__topnav-item--active {
	background: var(--lmsc-primary);
	color: var(--lmsc-on-primary, #fff) !important;
	box-shadow: 0 4px 14px rgba(var(--lmsc-primary-rgb), 0.35);
	font-weight: 600;
}

.lmsc-dash__topnav-item--active:hover {
	background: color-mix(in srgb, var(--lmsc-primary) 90%, #000);
	color: var(--lmsc-on-primary, #fff) !important;
}

/* ---------- Pill Buttons ---------- */
.lmsc-dash__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: var(--lmsc-transition);
	border: 1px solid var(--lmsc-border) !important;
	background: var(--lmsc-surface) !important;
	color: var(--lmsc-text-muted) !important;
	font-family: inherit;
	white-space: nowrap;
}

.lmsc-dash__pill:hover {
	border-color: var(--lmsc-primary) !important;
	color: var(--lmsc-primary) !important;
}

.lmsc-dash__pill--active {
	background: var(--lmsc-action-bg, #1D6BEE) !important;
	color: var(--lmsc-action-fg, #fff) !important;
	border-color: var(--lmsc-primary) !important;
	box-shadow: 0 2px 8px rgba(var(--lmsc-primary-rgb), 0.3);
}

/* Active pill must keep white text even on hover - lmsc-dash__pill:hover
   sets color:primary !important which would otherwise win by specificity. */
.lmsc-dash__pill--active:hover {
	background: var(--lmsc-action-bg, #1D6BEE) !important;
	color: var(--lmsc-action-fg, #fff) !important;
	border-color: var(--lmsc-primary) !important;
	opacity: 0.92;
}

/* ---------- Announcement Banner ---------- */
.lmsc-dash__announcement {
	background: linear-gradient(135deg, rgba(var(--lmsc-primary-rgb), 0.08), rgba(var(--lmsc-accent-rgb), 0.06));
	border: 1px solid rgba(var(--lmsc-primary-rgb), 0.15);
	border-radius: var(--lmsc-radius);
	padding: 16px 20px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lmsc-dash__announcement-close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: var(--lmsc-text-muted);
	padding: 4px;
	line-height: 1;
}

/* ---------- Tab Panels ---------- */
.lmsc-dash__panel {
	display: none;
	animation: lmscFadeIn 0.35s ease;
}

.lmsc-dash__panel--active {
	display: block;
}

/* ---------- Welcome Banner ---------- */
.lmsc-dash__welcome-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--lmsc-primary, #fb4365), var(--lmsc-accent, color-mix(in srgb, var(--lmsc-primary, #fb4365) 65%, #6366f1)));
	color: #fff;
	margin-bottom: 20px;
	box-shadow: 0 8px 32px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.25);
	overflow: hidden;
	position: relative;
}

.lmsc-dash__welcome-banner::before {
	content: '';
	position: absolute;
	top: -60%;
	right: -15%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	pointer-events: none;
}

.lmsc-dash__welcome-banner::after {
	content: '';
	position: absolute;
	bottom: -40%;
	left: -10%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

/* Alternate welcome-banner patterns. The gradient remains driven entirely by
 * the active skin variables; these layers add decoration only. */
.lmsc-dash[data-banner-style="topographic"] .lmsc-dash__welcome-banner::before {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1600 240%22 preserveAspectRatio%3D%22xMidYMid slice%22%3E%3Cg fill%3D%22none%22 stroke%3D%22white%22 stroke-width%3D%221.15%22 vector-effect%3D%22non-scaling-stroke%22%3E%3Cg stroke-opacity%3D%22.2%22%3E%3Cpath d%3D%22M-120 36C32-43 171 67 318 28 444-5 520-62 661-18 803 27 873 78 1019 36 1172-8 1271-42 1411 13 1505 50 1601 39 1720-7%22%2F%3E%3Cpath d%3D%22M-105 89C44 15 180 117 329 77 463 41 548-9 685 33 827 77 905 126 1048 83 1192 40 1299 9 1430 58 1518 91 1609 87 1712 52%22%2F%3E%3Cpath d%3D%22M-96 147C55 78 196 170 344 132 481 97 570 54 704 92 842 132 927 179 1067 139 1208 98 1318 70 1447 116 1534 147 1617 145 1707 116%22%2F%3E%3Cpath d%3D%22M-83 208C65 143 211 226 359 191 499 157 591 119 724 154 858 189 948 231 1088 195 1225 160 1338 136 1463 176 1548 203 1628 204 1702 181%22%2F%3E%3Cpath d%3D%22M37-20C107 30 124 92 84 145 53 187 60 224 119 270%22%2F%3E%3Cpath d%3D%22M1513-34C1452 17 1438 76 1474 122 1513 171 1505 217 1443 272%22%2F%3E%3C%2Fg%3E%3Cg stroke-opacity%3D%22.32%22%3E%3Cpath d%3D%22M550 126C552 55 628 3 733-3 842-9 953 37 1001 102 1051 170 996 224 889 248 779 273 653 245 584 193 559 174 549 149 550 126Z%22%2F%3E%3Cpath d%3D%22M586 127C589 72 650 31 736 26 824 21 914 56 955 107 998 160 953 201 869 220 783 239 683 218 626 178 603 162 585 145 586 127Z%22%2F%3E%3Cpath d%3D%22M625 129C629 88 676 58 741 55 808 52 875 77 908 114 942 152 907 181 844 194 780 208 706 193 663 164 643 151 624 141 625 129Z%22%2F%3E%3Cpath d%3D%22M668 130C672 103 703 84 746 82 791 80 835 96 858 120 880 143 858 160 819 169 777 178 730 169 702 151 684 140 667 137 668 130Z%22%2F%3E%3Cpath d%3D%22M713 130C718 117 734 108 752 108 772 108 791 114 801 125 812 136 802 144 785 148 766 152 745 148 732 141 721 135 712 134 713 130Z%22%2F%3E%3C%2Fg%3E%3Cg stroke-opacity%3D%22.27%22%3E%3Cpath d%3D%22M73 125C83 55 169 7 263 18 360 30 416 91 392 151 369 208 268 236 168 206 100 186 66 158 73 125Z%22%2F%3E%3Cpath d%3D%22M109 126C119 72 185 37 257 46 331 55 374 101 356 145 338 188 260 208 184 187 132 171 104 151 109 126Z%22%2F%3E%3Cpath d%3D%22M147 127C156 89 201 65 252 72 303 79 333 109 321 139 309 168 256 181 205 167 170 157 143 143 147 127Z%22%2F%3E%3Cpath d%3D%22M1195 76C1234 18 1325-3 1402 26 1482 57 1506 119 1460 163 1414 207 1305 210 1236 174 1187 149 1173 108 1195 76Z%22%2F%3E%3Cpath d%3D%22M1231 80C1263 37 1331 22 1390 44 1450 66 1468 112 1434 145 1399 178 1317 180 1265 153 1229 134 1215 102 1231 80Z%22%2F%3E%3Cpath d%3D%22M1269 84C1292 55 1337 45 1378 59 1419 74 1431 105 1409 126 1385 148 1331 149 1297 131 1272 118 1259 97 1269 84Z%22%2F%3E%3C%2Fg%3E%3Cg stroke-opacity%3D%22.18%22%3E%3Cpath d%3D%22M390-24C430 8 448 48 425 80 397 119 417 156 468 176 519 197 532 225 498 266%22%2F%3E%3Cpath d%3D%22M1080-30C1047 8 1041 45 1073 72 1114 106 1115 142 1076 173 1040 202 1045 233 1095 271%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.9;
	transform: none;
}

.lmsc-dash[data-banner-style="topographic"] .lmsc-dash__welcome-banner::after {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: linear-gradient(90deg, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0.28) 50%, rgba(2, 6, 23, 0.4));
}

.lmsc-dash[data-skin="spotify"][data-banner-style="topographic"] .lmsc-dash__welcome-banner::after {
	background: linear-gradient(90deg, rgba(2, 6, 23, 0.64), rgba(2, 6, 23, 0.58) 56%, rgba(2, 6, 23, 0.52));
}

.lmsc-dash[data-banner-style="geometric"] .lmsc-dash__welcome-banner::before {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1600 240%22 preserveAspectRatio%3D%22xMidYMid slice%22%3E%3Cg%3E%3Cpath fill%3D%22black%22 fill-opacity%3D%22.12%22 d%3D%22M0 0h355L190 240H0Z%22%2F%3E%3Cpath fill%3D%22white%22 fill-opacity%3D%22.055%22 d%3D%22M355 0h380L574 168 190 240Z%22%2F%3E%3Cpath fill%3D%22black%22 fill-opacity%3D%22.08%22 d%3D%22M735 0h382L936 132 574 168Z%22%2F%3E%3Cpath fill%3D%22white%22 fill-opacity%3D%22.07%22 d%3D%22M1117 0h483v240l-282-92-382-16Z%22%2F%3E%3Cpath fill%3D%22black%22 fill-opacity%3D%22.105%22 d%3D%22M190 240 574 168l362-36 382 16-150 92Z%22%2F%3E%3Cpath fill%3D%22white%22 fill-opacity%3D%22.045%22 d%3D%22M355 0 574 168 735 0Z%22%2F%3E%3Cpath fill%3D%22white%22 fill-opacity%3D%22.08%22 d%3D%22M936 132 1117 0l201 148Z%22%2F%3E%3Cpath fill%3D%22black%22 fill-opacity%3D%22.075%22 d%3D%22M1318 148 1600 46v194h-432Z%22%2F%3E%3Cg fill%3D%22none%22 stroke%3D%22white%22 stroke-opacity%3D%22.25%22 stroke-width%3D%221.05%22 vector-effect%3D%22non-scaling-stroke%22%3E%3Cpath d%3D%22M0 0 190 240 355 0 574 168 735 0 936 132 1117 0 1318 148 1600 46%22%2F%3E%3Cpath d%3D%22M0 182 190 240 574 168 936 132 1318 148 1600 240%22%2F%3E%3Cpath d%3D%22M128 0 303 102 574 168 812 238%22%2F%3E%3Cpath d%3D%22M574 168 714 240%22%2F%3E%3Cpath d%3D%22M936 132 1032 240%22%2F%3E%3Cpath d%3D%22M1117 0 1228 74 1318 148 1455 240%22%2F%3E%3Cpath d%3D%22M735 0 842 62 936 132%22%2F%3E%3Cpath d%3D%22M1318 148 1478 0%22%2F%3E%3Cpath d%3D%22M355 0 468 72 735 0%22%2F%3E%3Cpath d%3D%22M936 132 1168 240%22%2F%3E%3Cpath d%3D%22M1318 148 1600 109%22%2F%3E%3C%2Fg%3E%3Cg fill%3D%22white%22%3E%3Ccircle cx%3D%22574%22 cy%3D%22168%22 r%3D%2213%22 fill-opacity%3D%22.08%22%2F%3E%3Ccircle cx%3D%22936%22 cy%3D%22132%22 r%3D%2215%22 fill-opacity%3D%22.1%22%2F%3E%3Ccircle cx%3D%221318%22 cy%3D%22148%22 r%3D%2218%22 fill-opacity%3D%22.11%22%2F%3E%3Ccircle cx%3D%22190%22 cy%3D%22240%22 r%3D%223%22%2F%3E%3Ccircle cx%3D%22574%22 cy%3D%22168%22 r%3D%223.8%22%2F%3E%3Ccircle cx%3D%22936%22 cy%3D%22132%22 r%3D%224.2%22%2F%3E%3Ccircle cx%3D%221117%22 cy%3D%220%22 r%3D%223.2%22%2F%3E%3Ccircle cx%3D%221318%22 cy%3D%22148%22 r%3D%224.8%22%2F%3E%3Ccircle cx%3D%221478%22 cy%3D%220%22 r%3D%223%22%2F%3E%3Ccircle cx%3D%221600%22 cy%3D%2246%22 r%3D%222.8%22%2F%3E%3Cpath fill-opacity%3D%22.88%22 d%3D%22M574 155l2.6 10.4 10.4 2.6-10.4 2.6-2.6 10.4-2.6-10.4-10.4-2.6 10.4-2.6Z%22%2F%3E%3Cpath fill-opacity%3D%22.92%22 d%3D%22M936 117l3 12 12 3-12 3-3 12-3-12-12-3 12-3Z%22%2F%3E%3Cpath fill-opacity%3D%22.9%22 d%3D%22M1318 130l3.5 14.5 14.5 3.5-14.5 3.5-3.5 14.5-3.5-14.5-14.5-3.5 14.5-3.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 1;
	transform: none;
}

.lmsc-dash[data-banner-style="geometric"] .lmsc-dash__welcome-banner::after {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: linear-gradient(115deg, rgba(2, 6, 23, 0.44), rgba(2, 6, 23, 0.28) 46%, rgba(2, 6, 23, 0.42));
}

.lmsc-dash[data-skin="spotify"][data-banner-style="geometric"] .lmsc-dash__welcome-banner::after {
	background: linear-gradient(115deg, rgba(2, 6, 23, 0.66), rgba(2, 6, 23, 0.64) 68%, rgba(2, 6, 23, 0.56));
}

.lmsc-dash[data-banner-style="orbital"] .lmsc-dash__welcome-banner {
	background: linear-gradient(135deg, var(--lmsc-primary, #007aff), var(--lmsc-accent, #8b5cf6));
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--lmsc-primary, #007aff) 42%, #020617),
		color-mix(in srgb, var(--lmsc-accent, #8b5cf6) 52%, #020617)
	);
}

.lmsc-dash[data-banner-style="orbital"] .lmsc-dash__welcome-banner::before {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1600 240%22 preserveAspectRatio%3D%22xMidYMid slice%22%3E%3Cg fill%3D%22none%22 stroke%3D%22white%22 stroke-width%3D%221.05%22 vector-effect%3D%22non-scaling-stroke%22%3E%3Cg stroke-opacity%3D%22.26%22 stroke-dasharray%3D%223 7%22%3E%3Cpath d%3D%22M430 286C624 24 935-63 1268 30 1437 77 1541 171 1648 292%22%2F%3E%3Cpath d%3D%22M520 294C684 73 951 1 1237 77 1382 115 1489 190 1581 283%22%2F%3E%3Cpath d%3D%22M626 300C758 124 973 68 1203 124 1320 153 1418 211 1496 284%22%2F%3E%3Cpath d%3D%22M774 298C872 170 1021 133 1178 164 1266 181 1344 220 1406 275%22%2F%3E%3Cpath d%3D%22M864-30C1084 79 1254 225 1327 337%22%2F%3E%3Cpath d%3D%22M1010-48C1203 40 1378 168 1495 301%22%2F%3E%3C%2Fg%3E%3Cg stroke-opacity%3D%22.12%22%3E%3Cpath d%3D%22M72 226C293 106 542 68 790 107 1002 140 1191 237 1331 334%22%2F%3E%3Cpath d%3D%22M-30 174C245 55 532 30 810 83 1055 130 1268 243 1412 354%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg fill%3D%22white%22%3E%3Ccircle cx%3D%22118%22 cy%3D%2238%22 r%3D%221.2%22 fill-opacity%3D%22.75%22%2F%3E%3Ccircle cx%3D%22246%22 cy%3D%2278%22 r%3D%221.6%22 fill-opacity%3D%22.82%22%2F%3E%3Ccircle cx%3D%22451%22 cy%3D%2242%22 r%3D%221.1%22 fill-opacity%3D%22.68%22%2F%3E%3Ccircle cx%3D%22622%22 cy%3D%22170%22 r%3D%221.4%22 fill-opacity%3D%22.72%22%2F%3E%3Ccircle cx%3D%22792%22 cy%3D%22211%22 r%3D%222.2%22 fill-opacity%3D%22.9%22%2F%3E%3Ccircle cx%3D%221019%22 cy%3D%22181%22 r%3D%221.3%22 fill-opacity%3D%22.75%22%2F%3E%3Ccircle cx%3D%221188%22 cy%3D%2286%22 r%3D%221.8%22 fill-opacity%3D%22.88%22%2F%3E%3Ccircle cx%3D%221346%22 cy%3D%2233%22 r%3D%221.2%22 fill-opacity%3D%22.68%22%2F%3E%3Ccircle cx%3D%221502%22 cy%3D%22111%22 r%3D%221.6%22 fill-opacity%3D%22.82%22%2F%3E%3Cpath fill-opacity%3D%22.8%22 d%3D%22M246 70l1.7 6.3 6.3 1.7-6.3 1.7-1.7 6.3-1.7-6.3-6.3-1.7 6.3-1.7Z%22%2F%3E%3Cpath fill-opacity%3D%22.9%22 d%3D%22M792 200l2.2 8.8 8.8 2.2-8.8 2.2-2.2 8.8-2.2-8.8-8.8-2.2 8.8-2.2Z%22%2F%3E%3Cpath fill-opacity%3D%22.84%22 d%3D%22M1188 77l1.8 7.2 7.2 1.8-7.2 1.8-1.8 7.2-1.8-7.2-7.2-1.8 7.2-1.8Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: brightness(1.55);
	opacity: 1;
	transform: none;
}

.lmsc-dash[data-banner-style="orbital"] .lmsc-dash__welcome-banner::after {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background:
		radial-gradient(circle at 50% 79%, rgba(255, 255, 255, 0.95) 0 2px, rgba(255, 255, 255, 0.34) 3px, transparent 11px),
		radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.9) 0 1.5px, rgba(255, 255, 255, 0.18) 3px, transparent 9px),
		radial-gradient(circle at 89% 73%, rgba(255, 255, 255, 0.76) 0 1.5px, transparent 3px),
		linear-gradient(90deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.1) 48%, rgba(2, 6, 23, 0.14));
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.lmsc-dash[data-banner-style="orbital"] .lmsc-dash__welcome-banner::after {
		background:
			radial-gradient(circle at 50% 79%, rgba(255, 255, 255, 0.95) 0 2px, rgba(255, 255, 255, 0.34) 3px, transparent 11px),
			radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.9) 0 1.5px, rgba(255, 255, 255, 0.18) 3px, transparent 9px),
			radial-gradient(circle at 89% 73%, rgba(255, 255, 255, 0.76) 0 1.5px, transparent 3px),
			linear-gradient(90deg, rgba(2, 6, 23, 0.5), rgba(2, 6, 23, 0.46) 48%, rgba(2, 6, 23, 0.48));
	}
}

.lmsc-dash__welcome-left h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #fff;
}

.lmsc-dash__welcome-subtitle {
	margin: 0;
	font-size: 15px;
	opacity: 0.85;
}

/* Avatar in the welcome banner */
.lmsc-dash__welcome-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
	margin-right: 16px;
}

.lmsc-dash__welcome-left {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	position: relative;
	z-index: 1;
}

.lmsc-dash__welcome-text {
	flex: 1;
	min-width: 0;
}

.lmsc-dash__welcome-left h2+p,
.lmsc-dash__welcome-left .lmsc-dash__welcome-subtitle {
	width: 100%;
	margin-top: 2px;
}

.lmsc-dash__welcome-progress {
	flex-shrink: 0;
	display: flex;
	/* Column so the "what does this % mean" caption sits under the ring. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.lmsc-dash[data-banner-style="topographic"] .lmsc-dash__welcome-progress,
.lmsc-dash[data-banner-style="geometric"] .lmsc-dash__welcome-progress,
.lmsc-dash[data-banner-style="orbital"] .lmsc-dash__welcome-progress {
	position: relative;
	z-index: 1;
}

.lmsc-dash__welcome-ring svg {
	width: 72px;
	height: 72px;
}

@media (max-width: 640px) {
	.lmsc-dash__welcome-banner {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		padding: 24px;
	}
}

/* ---------- Quick Action Cards ---------- */
.lmsc-dash__quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin-bottom: 28px;
}

.lmsc-dash__action-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	background: var(--lmsc-surface);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
	transition: var(--lmsc-transition);
	border: 1px solid var(--lmsc-border);
	cursor: pointer;
}

.lmsc-dash__action-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--lmsc-shadow-lg);
	border-color: rgba(var(--lmsc-primary-rgb), 0.2);
}

.lmsc-dash__action-card--primary {
	background: linear-gradient(135deg, var(--lmsc-primary), color-mix(in srgb, var(--lmsc-primary) 80%, #000));
	color: #fff;
}

.lmsc-dash__action-card--primary:hover {
	box-shadow: 0 8px 25px rgba(var(--lmsc-primary-rgb), 0.4);
}

.lmsc-dash__action-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-dash__action-card:not(.lmsc-dash__action-card--primary) .lmsc-dash__action-icon {
	background: rgba(var(--lmsc-primary-rgb), 0.1);
}

.lmsc-dash__action-icon svg {
	width: 22px;
	height: 22px;
}

.lmsc-dash__action-card:not(.lmsc-dash__action-card--primary) .lmsc-dash__action-icon svg {
	color: var(--lmsc-primary);
}

.lmsc-dash__action-text strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.lmsc-dash__action-text span {
	font-size: 12px;
	opacity: 0.75;
}

/* ---------- Stats Grid ---------- */
.lmsc-dash__stats-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

.lmsc-dash__stat-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background: var(--lmsc-surface);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
	border: 1px solid var(--lmsc-border);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.lmsc-dash__stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);
	border-color: rgba(var(--lmsc-primary-rgb), 0.25);
}

.lmsc-dash__stat-label {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	font-weight: 500;
	letter-spacing: 0.3px;
}

.lmsc-dash__stat-value {
	font-size: 28px;
	font-weight: 700;
	display: block;
	margin-top: 6px;
	line-height: 1;
	color: var(--lmsc-text);
}

.lmsc-dash__stat-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-dash__stat-icon svg {
	width: 24px;
	height: 24px;
}

/* Stat card accent colors */
.lmsc-dash__stat-card--enrolled .lmsc-dash__stat-icon {
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	color: var(--lmsc-primary);
}

.lmsc-dash__stat-card--lessons .lmsc-dash__stat-icon {
	background: rgba(16, 185, 129, 0.1);
	color: var(--lmsc-success);
}

.lmsc-dash__stat-card--certs .lmsc-dash__stat-icon {
	background: rgba(245, 158, 11, 0.1);
	color: var(--lmsc-warning);
}

.lmsc-dash__stat-card--hours .lmsc-dash__stat-icon {
	background: rgba(var(--lmsc-accent-rgb), 0.1);
	color: var(--lmsc-accent);
}

.lmsc-dash__stat-card--quizzes .lmsc-dash__stat-icon {
	background: rgba(99, 102, 241, 0.1);
	color: #6366f1;
}

.lmsc-dash__stat-card--pass-rate .lmsc-dash__stat-icon {
	background: rgba(16, 185, 129, 0.1);
	color: var(--lmsc-success);
}

.lmsc-dash__stat-card--assignments .lmsc-dash__stat-icon {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.lmsc-dash__stat-card--total-quizzes .lmsc-dash__stat-icon {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
}


/* ---------- Pagination ---------- */
.lmsc-dash__pagination {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 16px 0 8px;
}

.lmsc-dash__pagination-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--lmsc-border);
	background: var(--lmsc-surface);
	color: var(--lmsc-text);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.lmsc-dash__pagination-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.lmsc-dash__pagination-btn:hover:not(:disabled) {
	background: var(--lmsc-accent);
	color: var(--lmsc-on-accent, #fff);
	border-color: var(--lmsc-accent);
}

.lmsc-dash__pagination-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.lmsc-dash__pagination-info {
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-text-muted);
}

.lmsc-dash__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.lmsc-dash__section-header h2,
.lmsc-dash__section-header h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.lmsc-dash__link {
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-primary);
}

/* ---------- Continue Learning Section ---------- */
.lmsc-dash__continue-section {
	margin-bottom: 28px;
}

/* ---------- Course Cards Grid ---------- */
.lmsc-dash__courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

/* ---------- Course Card ---------- */
.lmsc-dash__course-card {
	background: var(--lmsc-surface);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: var(--lmsc-transition);
	border: 1px solid var(--lmsc-border);
}

.lmsc-dash__course-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);
	border-color: rgba(var(--lmsc-primary-rgb), 0.2);
}

.lmsc-dash__course-thumbnail {
	position: relative;
	height: 170px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(var(--lmsc-primary-rgb), 0.12), rgba(var(--lmsc-accent-rgb), 0.08));
}

.lmsc-dash__course-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.lmsc-dash__course-card:hover .lmsc-dash__course-thumbnail img {
	transform: scale(1.05);
}

.lmsc-dash__course-thumbnail-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Unique gradient per course card (when no thumbnail image) */
.lmsc-dash__course-card:nth-child(4n+1) .lmsc-dash__course-thumbnail {
	background: linear-gradient(135deg, #4f6eb4 0%, #5b3e8a 100%);
}
.lmsc-dash__course-card:nth-child(4n+2) .lmsc-dash__course-thumbnail {
	background: linear-gradient(135deg, #b06ab3 0%, #8b4063 100%);
}
.lmsc-dash__course-card:nth-child(4n+3) .lmsc-dash__course-thumbnail {
	background: linear-gradient(135deg, #3a7bd5 0%, #1e5fa8 100%);
}
.lmsc-dash__course-card:nth-child(4n+4) .lmsc-dash__course-thumbnail {
	background: linear-gradient(135deg, #2e8b6b 0%, #1a6b5a 100%);
}

.lmsc-dash__course-thumbnail-placeholder svg {
	width: 48px;
	height: 48px;
	color: #fff;
	opacity: 0.6;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.lmsc-dash__course-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--lmsc-primary);
	color: var(--lmsc-on-primary, #fff);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 6px;
}

.lmsc-dash__course-body {
	padding: 16px 20px 20px;
}

.lmsc-dash__course-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
	line-height: 1.3;
}

.lmsc-dash__course-title a {
	color: var(--lmsc-text);
}

.lmsc-dash__course-title a:hover {
	color: var(--lmsc-primary);
}

.lmsc-dash__course-excerpt {
	font-size: 13px;
	color: var(--lmsc-text-muted);
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lmsc-dash__course-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	font-size: 12px;
}

.lmsc-dash__course-lessons {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--lmsc-text-muted);
}

.lmsc-dash__course-lessons svg {
	width: 14px;
	height: 14px;
}

.lmsc-dash__course-status {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
}

.lmsc-dash__course-status--completed {
	color: var(--lmsc-success);
}

.lmsc-dash__course-status--in_progress {
	color: var(--lmsc-primary);
}

.lmsc-dash__course-status--not_started {
	color: var(--lmsc-text-muted);
}

/* ---------- Progress Bar ---------- */
.lmsc-dash__progress-bar-wrap {
	margin-bottom: 14px;
}

.lmsc-dash__progress-bar {
	height: 6px;
	background: var(--lmsc-bg);
	border-radius: 3px;
	overflow: hidden;
}

.lmsc-dash__progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--lmsc-primary), var(--lmsc-accent));
	border-radius: 3px;
	transition: width 0.6s ease;
}

.lmsc-dash__progress-bar-fill--complete {
	background: linear-gradient(90deg, var(--lmsc-success), #34d399);
}

.lmsc-dash__progress-text {
	font-size: 11px;
	font-weight: 700;
	color: var(--lmsc-primary);
	margin-top: 6px;
	display: block;
	text-align: right;
}

.lmsc-dash__progress-text--complete {
	color: var(--lmsc-success);
}

/* Course CTA */
.lmsc-dash__course-next-lesson {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--lmsc-text-muted);
	margin-bottom: 8px;
	overflow: hidden;
}

.lmsc-dash__course-next-lesson svg {
	flex-shrink: 0;
	color: var(--lmsc-primary);
}

.lmsc-dash__course-next-lesson a {
	color: var(--lmsc-primary);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	transition: color 0.2s;
}

.lmsc-dash__course-next-lesson a:hover {
	color: var(--lmsc-primary-dark, var(--lmsc-primary));
	text-decoration: underline;
}

.lmsc-dash__course-cta {
	display: block;
	text-align: center;
	padding: 10px;
	background: rgba(var(--lmsc-primary-rgb), 0.08);
	color: var(--lmsc-primary);
	border-radius: var(--lmsc-radius-sm);
	font-size: 13px;
	font-weight: 600;
	transition: var(--lmsc-transition);
}

.lmsc-dash__course-cta:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
}

/* ==========================================================================
   Course Card Variant: Minimal
   Compact horizontal card - no thumbnail, icon + title + inline progress
   ========================================================================== */
.lmsc-dash__course-card--minimal {
	display: flex;
	align-items: stretch;
	padding: 16px 20px;
	gap: 16px;
	border-radius: 12px;
}

.lmsc-dash__course-card--minimal:hover {
	transform: translateY(-2px);
}

.lmsc-dash__course-minimal-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lmsc-primary);
	align-self: flex-start;
	margin-top: 2px;
}

.lmsc-dash__course-minimal-icon svg {
	width: 22px;
	height: 22px;
}

.lmsc-dash__course-minimal-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lmsc-dash__course-minimal-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lmsc-dash__course-card--minimal .lmsc-dash__course-title {
	font-size: 14px;
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-dash__course-minimal-progress {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-dash__course-minimal-progress .lmsc-dash__progress-bar {
	flex: 1;
}

.lmsc-dash__course-minimal-progress .lmsc-dash__progress-text {
	margin-top: 0;
	font-size: 12px;
	min-width: 32px;
	text-align: right;
}

.lmsc-dash__course-minimal-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
}

.lmsc-dash__course-badge--inline {
	position: static;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	color: var(--lmsc-primary);
}

.lmsc-dash__course-minimal-link {
	margin-left: auto;
	font-weight: 600;
	color: var(--lmsc-primary);
	font-size: 12px;
	white-space: nowrap;
}

.lmsc-dash__course-minimal-link:hover {
	text-decoration: underline;
}

/* Override grid for minimal cards - single column list */
.lmsc-dash__courses-grid:has(.lmsc-dash__course-card--minimal) {
	grid-template-columns: 1fr;
	gap: 8px;
}

/* ==========================================================================
   Course Card Variant: Rated
   Standard card + star rating + instructor name
   ========================================================================== */
.lmsc-dash__course-instructor {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--lmsc-text-muted);
	margin-bottom: 8px;
}

.lmsc-dash__course-instructor svg {
	flex-shrink: 0;
	color: var(--lmsc-text-muted);
	opacity: 0.6;
}

.lmsc-dash__course-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.lmsc-dash__course-stars {
	display: flex;
	align-items: center;
	gap: 1px;
	color: #f59e0b;
}

.lmsc-dash__star {
	flex-shrink: 0;
}

.lmsc-dash__star--half {
	color: #f59e0b;
}

.lmsc-dash__course-rating-text {
	font-size: 13px;
	font-weight: 700;
	color: var(--lmsc-text);
}

.lmsc-dash__course-rating-count {
	font-size: 12px;
	color: var(--lmsc-text-muted);
}

/* ==========================================================================
   Course Card Variant: Overlay
   Full-bleed image with gradient overlay and content on top
   ========================================================================== */
.lmsc-dash__course-card--overlay {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}

.lmsc-dash__course-card--overlay:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.lmsc-dash__course-overlay-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lmsc-dash__course-overlay-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lmsc-dash__course-card--overlay:hover .lmsc-dash__course-overlay-image img {
	transform: scale(1.06);
}

.lmsc-dash__course-overlay-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.5) 40%,
			rgba(0, 0, 0, 0.1) 100%);
	z-index: 1;
}

.lmsc-dash__course-thumbnail-placeholder--overlay {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--lmsc-primary), var(--lmsc-secondary));
}

.lmsc-dash__course-thumbnail-placeholder--overlay svg {
	width: 48px;
	height: 48px;
	opacity: 0.6;
	color: #fff;
}

.lmsc-dash__course-overlay-content {
	position: relative;
	z-index: 2;
	padding: 20px;
	color: #fff;
}

.lmsc-dash__course-card--overlay .lmsc-dash__course-title {
	margin: 8px 0 12px;
}

.lmsc-dash__course-card--overlay .lmsc-dash__course-title a {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.lmsc-dash__course-badge--glass {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.lmsc-dash__course-overlay-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 12px;
}

.lmsc-dash__course-card--overlay .lmsc-dash__course-status {
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.15);
}

.lmsc-dash__progress-bar-wrap--overlay {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-dash__progress-bar--glass {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	height: 6px;
}

.lmsc-dash__progress-bar--glass .lmsc-dash__progress-bar-fill {
	border-radius: 8px;
	background: linear-gradient(90deg, var(--lmsc-primary), var(--lmsc-accent, #60a5fa));
}

.lmsc-dash__progress-bar-wrap--overlay .lmsc-dash__progress-text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Progress Ring (Overview Widget) ---------- */
.lmsc-dash__widget {
	background: var(--lmsc-surface);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
	border: 1px solid var(--lmsc-border);
	padding: 16px 18px;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

.lmsc-dash .lmsc-dash__widget h3 {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 10px;
	letter-spacing: -0.2px;
}

.lmsc-dash__progress-ring-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 128px;
	height: 128px;
	margin: 0 auto 8px;
}

.lmsc-dash__progress-ring-container canvas {
	width: 100% !important;
	height: 100% !important;
	max-width: 128px;
	max-height: 128px;
}

.lmsc-dash__progress-ring {
	width: 100px;
	height: 100px;
}

.lmsc-dash__progress-ring-bg {
	fill: none;
	stroke: var(--lmsc-bg);
	stroke-width: 10;
}

.lmsc-dash__progress-ring-fill {
	fill: none;
	stroke: var(--lmsc-primary);
	stroke-width: 10;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 1s ease;
}

.lmsc-dash__progress-ring-text {
	font-size: 28px;
	font-weight: 800;
	fill: var(--lmsc-text);
	text-anchor: middle;
	dominant-baseline: middle;
	letter-spacing: -0.5px;
}

.lmsc-dash__progress-ring-subtext {
	font-size: 12px;
	fill: var(--lmsc-text-muted);
	text-anchor: middle;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Specificity bumped to beat the `.lmsc-dash p` reset (font-size/line-height: inherit). */
.lmsc-dash p.lmsc-dash__progress-message {
	text-align: center;
	font-size: 13px;
	color: var(--lmsc-text-muted);
	margin-bottom: 12px;
	line-height: 1.4;
}

.lmsc-dash__progress-mini-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	text-align: center;
}

.lmsc-dash__mini-stat {
	padding: 14px 12px;
	background: var(--lmsc-bg);
	border-radius: 12px;
	border: 1px solid var(--lmsc-border);
	transition: border-color 0.2s ease;
}

.lmsc-dash__mini-stat:hover {
	border-color: rgba(var(--lmsc-primary-rgb), 0.3);
}

.lmsc-dash__mini-stat-value {
	font-size: 24px;
	font-weight: 800;
	display: block;
	color: var(--lmsc-text);
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.lmsc-dash__mini-stat-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--lmsc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-top: 2px;
}

/* ---------- Daily Todo List Widget ---------- */
.lmsc-dash__widget--todo {
	min-height: 200px;
}

.lmsc-dash__todo-progress {
	font-size: 12px;
	font-weight: 600;
	color: var(--lmsc-text-muted);
	background: rgba(var(--lmsc-primary-rgb), 0.08);
	padding: 3px 10px;
	border-radius: 12px;
}

.lmsc-dash__todo-progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	border-radius: 4px;
	margin-bottom: 16px;
	overflow: hidden;
}

.lmsc-dash__todo-progress-fill {
	height: 100%;
	background: var(--lmsc-primary);
	border-radius: 4px;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lmsc-dash__todo-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lmsc-dash__todo-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border);
	transition: opacity 0.2s ease;
}

.lmsc-dash__todo-item:last-child {
	border-bottom: none;
}

.lmsc-dash__todo-checkbox {
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 6px;
	border: 2px solid var(--lmsc-border);
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: all 0.2s ease;
}

.lmsc-dash__todo-checkbox svg {
	width: 14px;
	height: 14px;
	opacity: 0;
	color: #fff;
	transition: opacity 0.15s ease;
}

.lmsc-dash__todo-checkbox:hover {
	border-color: var(--lmsc-primary);
	background: rgba(var(--lmsc-primary-rgb), 0.06);
}

.lmsc-dash__todo-item--done .lmsc-dash__todo-checkbox {
	background: var(--lmsc-primary);
	border-color: var(--lmsc-primary);
}

.lmsc-dash__todo-item--done .lmsc-dash__todo-checkbox svg {
	opacity: 1;
}

.lmsc-dash__todo-icon {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.lmsc-dash__todo-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-text);
	line-height: 1.4;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.lmsc-dash__todo-text {
	color: var(--lmsc-text);
	text-decoration: none;
}

a.lmsc-dash__todo-text:hover {
	color: var(--lmsc-primary);
	text-decoration: none;
}

.lmsc-dash__todo-item--done .lmsc-dash__todo-text {
	text-decoration: line-through;
	opacity: 0.5;
}

/* ---------- Activity List (Widget) ---------- */
.lmsc-dash__activity-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lmsc-dash__activity-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lmsc-border);
}

.lmsc-dash__activity-item:last-child {
	border-bottom: none;
}

.lmsc-dash__activity-icon-wrap {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
}

.lmsc-dash__activity-icon-wrap--completed {
	background: rgba(16, 185, 129, 0.12);
	color: var(--lmsc-success);
}

.lmsc-dash__activity-icon-wrap--in_progress {
	background: rgba(var(--lmsc-primary-rgb), 0.12);
	color: var(--lmsc-primary);
}

.lmsc-dash__activity-info {
	flex: 1;
	min-width: 0;
}

.lmsc-dash__activity-type {
	font-size: 11px;
	color: var(--lmsc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	display: block;
}

.lmsc-dash__activity-title {
	font-size: 13px;
	font-weight: 500;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-dash__activity-title a {
	color: var(--lmsc-text);
}

.lmsc-dash__activity-time {
	font-size: 11px;
	color: var(--lmsc-text-muted);
	white-space: nowrap;
}

/* ---------- Toolbar ---------- */
.lmsc-dash__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.lmsc-dash__filter-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.lmsc-dash__sort-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-dash__sort-label {
	font-size: 13px;
	color: var(--lmsc-text-muted);
}

.lmsc-dash__sort-select {
	padding: 8px 12px;
	border: 1px solid var(--lmsc-border);
	border-radius: var(--lmsc-radius-sm);
	font-size: 13px;
	background: var(--lmsc-surface);
	font-family: inherit;
	outline: none;
	cursor: pointer;
}

.lmsc-dash__view-toggle {
	display: flex;
	gap: 4px;
	margin-left: 8px;
}

.lmsc-dash__view-btn {
	width: 34px;
	height: 34px;
	border: 1px solid var(--lmsc-border);
	border-radius: 8px;
	background: var(--lmsc-surface);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	transition: var(--lmsc-transition);
}

.lmsc-dash__view-btn svg {
	width: 100%;
	height: 100%;
	fill: var(--lmsc-text-muted);
	stroke: var(--lmsc-text-muted);
}

.lmsc-dash__view-btn:hover {
	border-color: var(--lmsc-primary);
}

.lmsc-dash__view-btn--active {
	background: var(--lmsc-primary);
	border-color: var(--lmsc-primary);
}

.lmsc-dash__view-btn--active svg {
	fill: #fff;
	stroke: #fff;
}

/* ---------- Courses Container (list view) ---------- */
.lmsc-dash__courses-container.lmsc-dash__courses-container--list .lmsc-dash__courses-grid {
	grid-template-columns: 1fr;
}

.lmsc-dash__courses-container--list .lmsc-dash__course-card {
	display: grid;
	grid-template-columns: 200px 1fr;
}

.lmsc-dash__courses-container--list .lmsc-dash__course-thumbnail {
	height: 100%;
}

/* ---------- Pagination ---------- */
.lmsc-dash__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 0;
}

.lmsc-dash__pagination-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid var(--lmsc-border);
	border-radius: var(--lmsc-radius-sm);
	background: var(--lmsc-surface);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--lmsc-transition);
	font-family: inherit;
	color: var(--lmsc-text);
}

.lmsc-dash__pagination-btn svg {
	width: 16px;
	height: 16px;
}

.lmsc-dash__pagination-btn:hover:not(:disabled) {
	background: var(--lmsc-accent);
	border-color: var(--lmsc-accent);
	color: var(--lmsc-on-accent, #fff);
}

.lmsc-dash__pagination-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.lmsc-dash__pagination-info {
	font-size: 13px;
	color: var(--lmsc-text-muted);
}

/* ---------- Certificate Filters ---------- */
.lmsc-dash__certificates-tab > .lmsc-dash__section + .lmsc-dash__section {
	margin-block-start: 24px;
}

.lmsc-dash__cert-filters {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

/* ---------- Certificate Cards Grid ---------- */
.lmsc-dash__cert-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.lmsc-dash__cert-card {
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	box-shadow: var(--lmsc-shadow);
	overflow: visible;
	transition: var(--lmsc-transition);
	border: 1px solid transparent;
	display: flex;
	flex-direction: column;
}

.lmsc-dash__cert-card:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--lmsc-primary-rgb), 0.2);
	box-shadow: var(--lmsc-shadow-lg);
}

.lmsc-dash__cert-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 16px;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
	border-radius: var(--lmsc-radius) var(--lmsc-radius) 0 0;
}

.lmsc-dash__cert-medal {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-dash__cert-medal svg {
	width: 28px;
	height: 28px;
	color: var(--lmsc-warning, #f59e0b);
}

.lmsc-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.lmsc-badge--success {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.lmsc-badge--info {
	background: rgba(59, 130, 246, 0.12);
	color: #2563eb;
}

.lmsc-dash__cert-card-body {
	padding: 0 20px 16px;
	flex: 1;
}

.lmsc-dash__cert-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
	line-height: 1.35;
	color: var(--lmsc-text);
}

.lmsc-dash__cert-date {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.lmsc-dash__cert-card-footer {
	padding: 12px 20px;
	border-top: 1px solid var(--lmsc-border);
	display: flex;
	gap: 8px;
}

.lmsc-dash__cert-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	transition: var(--lmsc-transition);
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
}

.lmsc-dash__cert-btn--download {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
}

.lmsc-dash__cert-btn--download:hover {
	background: color-mix(in srgb, var(--lmsc-action-bg, #1D6BEE) 85%, #000);
	color: var(--lmsc-action-fg, #fff);
	transform: translateY(-1px);
}

/* Certificate UID Badge */
.lmsc-dash__cert-uid {
	display: inline-block;
	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 11px;
	color: var(--lmsc-text-muted);
	background: rgba(0, 0, 0, 0.04);
	padding: 2px 8px;
	border-radius: 4px;
	margin-top: 4px;
	letter-spacing: 0.5px;
}

/* Verify Button */
.lmsc-dash__cert-btn--verify {
	background: #10b981;
	color: #fff;
}

.lmsc-dash__cert-btn--verify:hover {
	background: #059669;
	color: #fff;
	transform: translateY(-1px);
}

/* Share Button */
.lmsc-dash__cert-btn--share {
	background: rgba(0, 0, 0, 0.06);
	color: var(--lmsc-text);
	border: none;
	cursor: pointer;
}

.lmsc-dash__cert-btn--share:hover {
	background: rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

/* Share Dropdown Wrapper */
.lmsc-dash__cert-share-wrap {
	position: relative;
}

.lmsc-dash__cert-share-dropdown {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: var(--lmsc-surface, #fff);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
	padding: 6px;
	min-width: 200px;
	z-index: 50;
	animation: lmsc-dropdown-in 0.2s ease;
}

@keyframes lmsc-dropdown-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lmsc-dash__cert-share-dropdown--open {
	display: block;
}

.lmsc-dash__share-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--lmsc-text, #1e293b);
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease;
	border: none;
	background: none;
	cursor: pointer;
	width: 100%;
	font-family: inherit;
}

.lmsc-dash__share-link:hover {
	background: rgba(0, 0, 0, 0.05);
}

.lmsc-dash__share-link--highlight {
	color: #0077b5;
	font-weight: 500;
}

.lmsc-dash__share-link--highlight:hover {
	background: rgba(0, 119, 181, 0.08);
}

/* Certificate card footer wrapping */
.lmsc-dash__cert-card-footer {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* ---------- Certificate Verify Info Cards ---------- */
.lmsc-dash__cert-verify-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lmsc-dash__info-card {
	display: flex;
	gap: 16px;
	padding: 20px;
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius, 12px);
	transition: border-color 0.2s ease;
}

.lmsc-dash__info-card:hover {
	border-color: var(--lmsc-primary, #007AFF);
}

.lmsc-dash__info-card-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--lmsc-primary-rgb, 0, 122, 255), 0.1);
	color: var(--lmsc-primary, #007AFF);
}

.lmsc-dash__info-card-content h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--lmsc-text, #0f172a);
}

.lmsc-dash__info-card-content p {
	font-size: 13px;
	color: var(--lmsc-text-muted, #64748b);
	margin: 0;
	line-height: 1.6;
}

/* ===== VERIFICATION PAGE ===== */
.lmsc-verify-wrap {
	max-width: 560px;
	margin: 0 auto;
	padding: 40px 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.lmsc-verify-search {
	text-align: center;
}

.lmsc-verify-search h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1e293b;
}

.lmsc-verify-search p {
	color: #64748b;
	margin: 0 0 24px;
}

.lmsc-verify-form {
	display: flex;
	gap: 8px;
	max-width: 400px;
	margin: 0 auto;
}

.lmsc-verify-input {
	flex: 1;
	padding: 12px 16px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	font-size: 15px;
	font-family: 'SF Mono', monospace;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: border-color 0.2s ease;
}

.lmsc-verify-input:focus {
	outline: none;
	border-color: #fb4365;
}

.lmsc-verify-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: linear-gradient(135deg, #fb4365, #fc6b87);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.lmsc-verify-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(251, 67, 101, 0.3);
}

/* Verify Result */
.lmsc-verify-result {
	text-align: center;
	padding: 32px 24px;
	border-radius: 16px;
	border: 2px solid;
}

.lmsc-verify-result--valid {
	border-color: #10b981;
	background: #f0fdf4;
}

.lmsc-verify-result--invalid {
	border-color: #ef4444;
	background: #fef2f2;
}

.lmsc-verify-badge {
	color: #10b981;
	margin-bottom: 12px;
}

.lmsc-verify-badge--fail {
	color: #ef4444;
}

.lmsc-verify-result h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 20px;
	color: #1e293b;
}

.lmsc-verify-result--invalid p {
	color: #64748b;
	margin: 0 0 20px;
}

.lmsc-verify-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	text-align: left;
	margin-bottom: 20px;
}

.lmsc-verify-detail {
	background: rgba(255, 255, 255, 0.7);
	padding: 12px 16px;
	border-radius: 10px;
}

.lmsc-verify-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #64748b;
	margin-bottom: 4px;
}

.lmsc-verify-value {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.lmsc-verify-qr {
	margin-top: 16px;
}

.lmsc-verify-qr img {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
	.lmsc-verify-details {
		grid-template-columns: 1fr;
	}

	.lmsc-verify-form {
		flex-direction: column;
	}
}

/* ============================================================
   Phase 2 Course Performance reporting
   ============================================================ */
.lmsc-course-report-scope {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 16px;
}

.lmsc-course-report-scope > div {
	padding: 12px 14px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius-sm, 8px);
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.82rem;
	line-height: 1.45;
}

.lmsc-course-report-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.lmsc-course-report-filters .lmsc-roster-select {
	min-width: 150px;
	flex: 1 1 150px;
}

.lmsc-course-report-filters .lmsc-btn {
	margin-left: auto;
}

.lmsc-course-performance-table {
	min-width: 1050px;
}

.lmsc-cp-course-name {
	max-width: 260px;
	font-weight: 700;
	line-height: 1.35;
}

.lmsc-cp-risk-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--lmsc-bg, #f1f5f9);
	font-weight: 700;
}

.lmsc-cp-risk-count.has-risk {
	color: var(--lmsc-danger, #b91c1c);
	background: rgba(239, 68, 68, 0.12);
}

.lmsc-course-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 18px;
	margin-top: 18px;
}

.lmsc-course-detail-grid > .lmsc-chart-card {
	grid-column: auto;
	width: auto;
	min-width: 0;
	margin: 0;
}

.lmsc-course-detail-grid > #lmsc-course-period-comparison,
.lmsc-course-detail-grid > #lmsc-course-activity-timeline,
.lmsc-course-detail-grid > #lmsc-course-bottlenecks,
.lmsc-course-detail-grid > #lmsc-course-at-risk {
	grid-column: 1 / -1;
}

.lmsc-course-detail-grid > #lmsc-course-quiz-summary .lmsc-learner-kpis {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lmsc-cp-detail-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.lmsc-cp-detail-head h3,
.lmsc-cp-detail-head p {
	margin: 0;
}

.lmsc-cp-detail-head h3 {
	font-size: 1.35rem;
}

.lmsc-cp-distribution {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.lmsc-cp-distribution-row {
	display: grid;
	grid-template-columns: 62px minmax(120px, 1fr) 36px;
	align-items: center;
	gap: 12px;
	font-size: 0.84rem;
}

.lmsc-cp-distribution-row > div {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--lmsc-border, #e2e8f0);
}

.lmsc-cp-distribution-row i {
	display: block;
	height: 100%;
	min-width: 0;
	border-radius: inherit;
	background: var(--lmsc-primary, #2563eb);
}

.lmsc-cp-largest-stall {
	margin: 14px 0;
	padding: 12px 14px;
	border-left: 3px solid var(--lmsc-warning, #f59e0b);
	border-radius: 0 8px 8px 0;
	background: rgba(245, 158, 11, 0.1);
}

#lmsc-course-bottlenecks .is-largest-stall {
	background: rgba(245, 158, 11, 0.07);
}

.lmsc-cp-step-affected td {
	padding: 10px 14px 16px;
	background: var(--lmsc-bg, #f8fafc);
}

.lmsc-cp-affected-person {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px;
	padding: 8px 10px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	background: var(--lmsc-surface, #fff);
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.lmsc-cp-affected-person span {
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.75rem;
}

.lmsc-cp-risk-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.lmsc-cp-risk-row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	background: var(--lmsc-surface, #fff);
}

.lmsc-cp-risk-row > img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.lmsc-cp-risk-main small {
	display: block;
	margin-top: 5px;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-cp-severity {
	display: inline-flex;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
}

.lmsc-cp-severity.is-high { color: #991b1b; background: #fee2e2; }
.lmsc-cp-severity.is-medium { color: #92400e; background: #fef3c7; }
.lmsc-cp-severity.is-low { color: #1e40af; background: #dbeafe; }

.lmsc-cp-reasons {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.lmsc-cp-reasons span {
	padding: 3px 7px;
	border-radius: 6px;
	background: var(--lmsc-bg, #f1f5f9);
	font-size: 0.73rem;
}

.lmsc-cp-risk-actions {
	display: flex;
	align-items: center;
	gap: 7px;
}

.lmsc-cp-risk-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--lmsc-border, #e2e8f0);
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.8rem;
}

.lmsc-cp-time-authorities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.lmsc-cp-time-authorities > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 13px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
}

.lmsc-cp-time-authorities span {
	font-weight: 800;
}

@media (max-width: 980px) {
	.lmsc-course-detail-grid,
	.lmsc-cp-risk-list {
		grid-template-columns: 1fr;
	}

	.lmsc-course-detail-grid > #lmsc-course-period-comparison,
	.lmsc-course-detail-grid > #lmsc-course-activity-timeline,
	.lmsc-course-detail-grid > #lmsc-course-bottlenecks,
	.lmsc-course-detail-grid > #lmsc-course-at-risk {
		grid-column: auto;
	}
}

@media (max-width: 780px) {
	.lmsc-course-report-scope,
	.lmsc-cp-time-authorities,
	.lmsc-course-detail-grid,
	.lmsc-cp-risk-list {
		grid-template-columns: 1fr;
	}

	.lmsc-course-detail-grid > #lmsc-course-period-comparison,
	.lmsc-course-detail-grid > #lmsc-course-activity-timeline,
	.lmsc-course-detail-grid > #lmsc-course-bottlenecks,
	.lmsc-course-detail-grid > #lmsc-course-at-risk {
		grid-column: auto;
	}

	.lmsc-course-report-filters .lmsc-roster-select,
	.lmsc-course-report-filters .lmsc-btn {
		width: 100%;
		min-width: 0;
		margin-left: 0;
	}

	.lmsc-cp-risk-row {
		grid-template-columns: 38px minmax(0, 1fr);
		align-items: flex-start;
	}

	.lmsc-cp-risk-row > img {
		width: 38px;
		height: 38px;
	}

	.lmsc-cp-risk-actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}

	.lmsc-cp-risk-footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.lmsc-cp-detail-head {
		flex-direction: column;
	}

	.lmsc-cp-distribution-row {
		grid-template-columns: 52px minmax(80px, 1fr) 28px;
		gap: 8px;
	}

	.lmsc-cp-risk-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.lmsc-cp-risk-actions .lmsc-btn,
	.lmsc-cp-risk-actions .lmsc-roster-view {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* Reporting Phase 1: scope labels and actionable outcomes. */
.lmsc-report-scope-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 3px 8px;
	border: 1px solid var(--lmsc-border);
	border-radius: 999px;
	color: var(--lmsc-text-muted);
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

.lmsc-report-definition {
	margin: 6px 0 14px;
	font-size: 13px;
}

.lmsc-report-secondary-outcomes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding: 13px 16px;
	border: 1px solid var(--lmsc-border);
	border-radius: var(--lmsc-radius);
	background: var(--lmsc-surface);
}

.lmsc-report-secondary-outcomes__value {
	margin-right: 8px;
	color: var(--lmsc-primary);
	font-size: 20px;
	font-weight: 700;
}

.lmsc-report-secondary {
	border-style: dashed;
}

.lmsc-work-review-list {
	display: grid;
	gap: 9px;
}

.lmsc-work-review-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--lmsc-border);
	border-radius: 10px;
	background: var(--lmsc-bg);
	color: var(--lmsc-text);
	cursor: pointer;
	font: inherit;
	text-align: left;
}

.lmsc-work-review-item:hover,
.lmsc-work-review-item:focus-visible {
	border-color: var(--lmsc-primary);
	outline: none;
}

.lmsc-work-review-empty {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--lmsc-success, #22c55e) 9%, transparent);
	color: var(--lmsc-text-muted);
}

.lmsc-site-overview__header {
	flex: 1 0 100%;
}

.lmsc-site-overview__header p {
	margin: 4px 0 0;
	color: var(--lmsc-text-muted);
	font-size: 12px;
}

.lmsc-learner-report-scope {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--lmsc-primary) 7%, transparent);
	font-size: 13px;
}

.lmsc-learner-report-scope span {
	margin-left: auto;
	color: var(--lmsc-text-muted);
}

@media (max-width: 600px) {
	.lmsc-report-secondary-outcomes,
	.lmsc-work-review-item,
	.lmsc-learner-report-scope {
		align-items: flex-start;
		flex-direction: column;
	}

	.lmsc-learner-report-scope span {
		margin-left: 0;
	}

	.lmsc-report-scope-badge {
		margin: 6px 0 0;
	}
}

/* Certificate empty state */
.lmsc-dash__empty-state--cert {
	text-align: center;
	padding: 48px 24px;
}

.lmsc-dash__empty-icon {
	margin-bottom: 16px;
	color: var(--lmsc-text-muted);
	opacity: 0.4;
}

.lmsc-dash__empty-state--cert h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
}

.lmsc-dash__empty-state--cert p {
	color: var(--lmsc-text-muted);
	font-size: 14px;
	margin: 0;
}

/* Responsive certificate grid */
@media (max-width: 1024px) {
	.lmsc-dash__cert-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.lmsc-dash__cert-cards {
		grid-template-columns: 1fr;
	}
}

/* ---------- Quiz Scores Table ---------- */
.lmsc-dash__quiz-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	overflow: hidden;
	box-shadow: var(--lmsc-shadow);
}

.lmsc-dash__quiz-table th {
	text-align: left;
	padding: 14px 20px;
	background: var(--lmsc-bg);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted);
	font-weight: 600;
}

.lmsc-dash__quiz-table td {
	padding: 14px 20px;
	border-bottom: 1px solid var(--lmsc-border);
	font-size: 14px;
}

.lmsc-dash__quiz-table tr:last-child td {
	border-bottom: none;
}

.lmsc-dash__quiz-score {
	font-weight: 700;
}

.lmsc-dash__quiz-score--pass {
	color: var(--lmsc-success);
}

.lmsc-dash__quiz-score--fail {
	color: var(--lmsc-danger);
}

.lmsc-dash__quiz-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
}

.lmsc-dash__quiz-badge--pass {
	background: rgba(16, 185, 129, 0.12);
	color: var(--lmsc-success);
}

.lmsc-dash__quiz-badge--fail {
	background: rgba(239, 68, 68, 0.12);
	color: var(--lmsc-danger);
}

/* ---------- Activity Timeline ---------- */
.lmsc-dash__timeline-item {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--lmsc-border);
	position: relative;
	color: var(--lmsc-text);
}

.lmsc-dash__timeline-item:last-child {
	border-bottom: none;
}

.lmsc-dash__timeline-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.lmsc-dash__timeline-dot--completed {
	background: rgba(16, 185, 129, 0.12);
	color: var(--lmsc-success);
}

.lmsc-dash__timeline-dot--in_progress {
	background: rgba(var(--lmsc-primary-rgb), 0.12);
	color: var(--lmsc-primary);
}

.lmsc-dash__timeline-body {
	flex: 1;
}

.lmsc-dash__timeline-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
	color: var(--lmsc-text);
}

.lmsc-dash__timeline-title a {
	color: var(--lmsc-text);
}

.lmsc-dash__timeline-title a:hover {
	color: var(--lmsc-primary);
}

.lmsc-dash__timeline-meta {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	display: flex;
	gap: 12px;
}

/* ---------- Profile ---------- */
.lmsc-dash__profile-grid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 24px;
}

.lmsc-dash__profile-card {
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	box-shadow: var(--lmsc-shadow);
	padding: 24px;
	text-align: center;
	height: fit-content;
	position: sticky;
	top: 24px;
}

.lmsc-dash__profile-avatar-wrap {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 16px;
	position: relative;
	border: 4px solid rgba(var(--lmsc-primary-rgb), 0.2);
}

.lmsc-dash__profile-avatar-lg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lmsc-dash__profile-avatar-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 44px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.2s;
	cursor: pointer;
	border-radius: 0 0 50% 50%;
}

.lmsc-dash__profile-avatar-wrap:hover .lmsc-dash__profile-avatar-overlay,
.lmsc-dash__profile-avatar-wrap:focus-within .lmsc-dash__profile-avatar-overlay {
	opacity: 1;
}

.lmsc-dash__profile-avatar-wrap:focus-within {
	outline: 2px solid var(--lmsc-primary, #3b82f6);
	outline-offset: 3px;
}

.lmsc-dash__profile-avatar-overlay svg {
	width: 16px;
	height: 16px;
	color: #fff;
}

.lmsc-dash__profile-avatar-overlay span {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.3px;
}

.lmsc-dash .lmsc-dash__profile-name {
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lmsc-text);
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.lmsc-dash p.lmsc-dash__profile-email {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lmsc-text-muted);
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.lmsc-dash p.lmsc-dash__profile-since {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lmsc-text-muted);
}

/* Profile Form */
.lmsc-dash__profile-form-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.lmsc-dash__profile-form {
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	box-shadow: var(--lmsc-shadow);
	padding: 24px;
}

.lmsc-dash .lmsc-dash__profile-form > h3 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lmsc-text);
	margin: 0 0 18px;
}

.lmsc-dash #lmsc-dash-profile-form > h3:not(:first-child) {
	font-size: 14px;
	font-weight: 600;
	border-block-start: 1px solid var(--lmsc-border);
	padding-block-start: 20px;
	margin-block-start: 4px;
	margin-block-end: 16px;
}

.lmsc-dash__profile-form .lmsc-dash__form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lmsc-dash__form-group {
	margin-bottom: 16px;
	min-width: 0;
}

.lmsc-dash__form-group label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--lmsc-text);
}

.lmsc-dash .lmsc-dash__profile-form .lmsc-dash__form-group > label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lmsc-text);
}

.lmsc-dash__profile-form .lmsc-dash__input {
	min-height: 44px;
}

.lmsc-dash__input,
.lmsc-dash__textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: var(--lmsc-radius-sm);
	font-size: 14px;
	background: var(--lmsc-bg);
	transition: var(--lmsc-transition);
	outline: none;
	font-family: inherit;
}

.lmsc-dash__input:focus,
.lmsc-dash__textarea:focus {
	border-color: var(--lmsc-primary);
	box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb), 0.1);
	background: var(--lmsc-surface);
}

.lmsc-dash__textarea {
	resize: vertical;
}

.lmsc-dash__password-wrap {
	position: relative;
}

.lmsc-dash__password-toggle {
	position: absolute;
	inset-inline-end: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

.lmsc-dash__password-toggle svg {
	width: 18px;
	height: 18px;
	color: var(--lmsc-text-muted);
}

.lmsc-dash__form-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 8px;
}

.lmsc-dash__form-message {
	font-size: 13px;
	font-weight: 500;
}

.lmsc-dash__form-message--success {
	color: var(--lmsc-success);
}

.lmsc-dash__form-message--error {
	color: var(--lmsc-danger);
}

/* ---------- Integration Sections (WooCommerce / MemberPress) ---------- */
.lmsc-dash__integration-section {
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	box-shadow: var(--lmsc-shadow);
	overflow: hidden;
	margin-top: 16px;
}

.lmsc-dash__integration-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	cursor: pointer;
	user-select: none;
	border-bottom: 1px solid var(--lmsc-border);
	transition: var(--lmsc-transition);
}

.lmsc-dash__integration-header:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.04);
}

.lmsc-dash__integration-header h3 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
}

.lmsc-dash__integration-header h3 svg {
	margin-inline-end: 6px !important;
	margin-right: 0 !important;
}

.lmsc-dash__integration-toggle {
	transition: transform 0.3s ease;
}

.lmsc-dash__integration-header[aria-expanded="false"]+.lmsc-dash__integration-body {
	display: none;
}

.lmsc-dash__integration-header[aria-expanded="false"] .lmsc-dash__integration-toggle {
	transform: rotate(-90deg);
}

.lmsc-dash__integration-body {
	padding: 24px;
}

/* WooCommerce Orders Table */
.lmsc-dash__wc-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.lmsc-dash__wc-orders-table th {
	text-align: left;
	padding: 10px 14px;
	background: var(--lmsc-bg);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted);
	font-weight: 600;
	border-bottom: 1px solid var(--lmsc-border);
}

.lmsc-dash__wc-orders-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--lmsc-border);
	font-size: 14px;
}

.lmsc-dash__wc-orders-table tr:last-child td {
	border-bottom: none;
}

.lmsc-dash__wc-orders-table a {
	color: var(--lmsc-primary);
	font-weight: 600;
}

.lmsc-dash__wc-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
}

.lmsc-dash__wc-status--processing {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
}

.lmsc-dash__wc-status--completed {
	background: rgba(16, 185, 129, 0.1);
	color: var(--lmsc-success);
}

.lmsc-dash__wc-status--on-hold {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
}

.lmsc-dash__wc-links,
.lmsc-dash__mepr-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* MemberPress Summary */
.lmsc-dash__mepr-info p {
	margin: 0 0 12px;
	font-size: 14px;
}

.lmsc-dash__mepr-memberships h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 8px;
}

.lmsc-dash__mepr-list {
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}

.lmsc-dash__mepr-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--lmsc-border);
}

.lmsc-dash__mepr-list li:last-child {
	border-bottom: none;
}

/* Small button variant */
.lmsc-dash .lmsc-dash-btn--sm {
	padding: 6px 14px;
	font-size: 13px;
}

/* ---------- Buttons ---------- */
.lmsc-dash .lmsc-dash-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border-radius: var(--lmsc-radius-sm);
	font-size: 14px;
	font-weight: 600;
	/* Pinned so every default-size button is the same height. Without it the
	   line-height inherits from context (1.3 in some panels, 1.15 in others)
	   and identical buttons render 38px here and 41px there. */
	line-height: 1.15;
	cursor: pointer;
	transition: var(--lmsc-transition);
	border: none;
	font-family: inherit;
	gap: 8px;
	color: var(--lmsc-text);
	background: var(--lmsc-surface, #fff);
}

.lmsc-dash .lmsc-dash-btn--primary {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
}

.lmsc-dash .lmsc-dash-btn--primary:hover {
	background: color-mix(in srgb, var(--lmsc-action-bg, #1D6BEE) 85%, #000);
	box-shadow: 0 4px 12px rgba(var(--lmsc-primary-rgb), 0.3);
	color: var(--lmsc-action-fg, #fff);
}

.lmsc-dash .lmsc-dash-btn--success {
	background: #087A55;
	color: #fff;
}

.lmsc-dash .lmsc-dash-btn--success:hover {
	background: #066344;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
	color: #fff;
}

/* Neutral secondary action (Cancel, View, etc.) - skin-safe on every theme.
   Previously painted with var(--lmsc-secondary), which is the sidebar bg color
   (near-white on Spotify/Netflix => invisible; purple on Sunset => off-theme).
   Now a surface+border button that reads on light AND dark skins, tinting to
   the active primary on hover. */
.lmsc-dash .lmsc-dash-btn--secondary {
	background: var(--lmsc-surface-alt, #f1f5f9);
	color: var(--lmsc-text);
	border: 1px solid var(--lmsc-border);
}

.lmsc-dash .lmsc-dash-btn--secondary:hover {
	background: var(--lmsc-surface);
	border-color: var(--lmsc-primary);
	color: var(--lmsc-primary);
}

/* ---------- Empty State ---------- */
.lmsc-dash__empty-state {
	text-align: center;
	padding: 48px 24px;
}

.lmsc-dash__empty-state svg {
	width: 48px;
	height: 48px;
	color: var(--lmsc-text-muted);
	opacity: 0.4;
	margin-bottom: 12px;
}

.lmsc-dash__empty-state p {
	font-size: 14px;
	color: var(--lmsc-text-muted);
}


/* ---------- Skeleton Loading ---------- */
.lmsc-dash__skeleton {
	padding: 8px 0;
}

.lmsc-dash__skeleton-row {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}

.lmsc-dash__skeleton-block {
	border-radius: var(--lmsc-radius);
	background: linear-gradient(90deg, var(--lmsc-bg) 25%, rgba(var(--lmsc-primary-rgb), 0.04) 50%, var(--lmsc-bg) 75%);
	background-size: 200% 100%;
	animation: lmscShimmer 1.5s infinite;
	height: 120px;
}

.lmsc-dash__skeleton-block--lg {
	flex: 2;
}

.lmsc-dash__skeleton-block--md {
	flex: 1;
}

.lmsc-dash__skeleton-block--sm {
	flex: 0.5;
}

.lmsc-dash__skeleton-block--card {
	flex: 1;
	height: 280px;
}

.lmsc-dash__skeleton-block--full {
	flex: 1;
	height: 60px;
}

/* ---------- Content-shaped skeleton variants ---------- */

/* Stat card skeleton - mimics the stats row layout */
.lmsc-dash__skeleton-stat {
	flex: 1;
	border-radius: var(--lmsc-radius);
	border: 1px solid var(--lmsc-border);
	background: var(--lmsc-surface);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lmsc-dash__skeleton-stat::before,
.lmsc-dash__skeleton-stat::after {
	content: '';
	display: block;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--lmsc-bg) 25%, rgba(var(--lmsc-primary-rgb), 0.06) 50%, var(--lmsc-bg) 75%);
	background-size: 200% 100%;
	animation: lmscShimmer 1.5s infinite;
}

.lmsc-dash__skeleton-stat::before {
	width: 60%;
	height: 12px;
}

.lmsc-dash__skeleton-stat::after {
	width: 40%;
	height: 28px;
}

/* Course card skeleton - image placeholder + text lines + progress bar */
.lmsc-dash__skeleton-course {
	flex: 1;
	min-width: 240px;
	border-radius: var(--lmsc-radius);
	border: 1px solid var(--lmsc-border);
	background: var(--lmsc-surface);
	overflow: hidden;
}

.lmsc-dash__skeleton-course-img {
	height: 140px;
	background: linear-gradient(90deg, var(--lmsc-bg) 25%, rgba(var(--lmsc-primary-rgb), 0.06) 50%, var(--lmsc-bg) 75%);
	background-size: 200% 100%;
	animation: lmscShimmer 1.5s infinite;
}

.lmsc-dash__skeleton-course-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lmsc-dash__skeleton-line {
	border-radius: 4px;
	background: linear-gradient(90deg, var(--lmsc-bg) 25%, rgba(var(--lmsc-primary-rgb), 0.06) 50%, var(--lmsc-bg) 75%);
	background-size: 200% 100%;
	animation: lmscShimmer 1.5s infinite;
	height: 12px;
}

.lmsc-dash__skeleton-line--title {
	width: 80%;
	height: 16px;
}

.lmsc-dash__skeleton-line--meta {
	width: 50%;
}

.lmsc-dash__skeleton-line--bar {
	width: 100%;
	height: 8px;
	border-radius: 999px;
}

/* Banner skeleton */
.lmsc-dash__skeleton-banner {
	border-radius: var(--lmsc-radius-lg, 12px);
	height: 100px;
	background: linear-gradient(90deg, var(--lmsc-bg) 25%, rgba(var(--lmsc-primary-rgb), 0.06) 50%, var(--lmsc-bg) 75%);
	background-size: 200% 100%;
	animation: lmscShimmer 1.5s infinite;
	margin-bottom: 16px;
}

/* ---------- Section Icon ---------- */
.lmsc-dash__section-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
	color: var(--lmsc-primary);
}

/* ---------- Login Prompt ---------- */
.lmsc-dash-login-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

.lmsc-dash-login-prompt__inner {
	text-align: center;
	padding: 48px;
	background: var(--lmsc-surface, #fff);
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	max-width: 400px;
}

.lmsc-dash-login-prompt__icon {
	width: 48px;
	height: 48px;
	color: var(--lmsc-primary, #fb4365);
	margin-bottom: 16px;
}

.lmsc-dash-login-prompt h2 {
	font-size: 22px;
	margin: 0 0 8px;
}

.lmsc-dash-login-prompt p {
	font-size: 14px;
	color: #6b7280;
	margin: 0 0 24px;
}

/* ---------- Animations ---------- */
@keyframes lmscFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lmscFadeDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lmscShimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

@keyframes lmscPulseGlow {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(var(--lmsc-primary-rgb), 0);
	}

	50% {
		box-shadow: 0 0 12px 2px rgba(var(--lmsc-primary-rgb), 0.15);
	}
}

@keyframes lmscStaggerIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ---------- Staggered Card Appearances ---------- */
.lmsc-dash__panel--active .lmsc-dash__stat-card,
.lmsc-dash__panel--active .lmsc-dash__course-card,
.lmsc-dash__panel--active .lmsc-dash__cert-card,
.lmsc-dash__panel--active .lmsc-dash__action-card {
	animation: lmscStaggerIn 0.4s ease both;
}

.lmsc-dash__panel--active .lmsc-dash__stat-card:nth-child(1),
.lmsc-dash__panel--active .lmsc-dash__course-card:nth-child(1),
.lmsc-dash__panel--active .lmsc-dash__action-card:nth-child(1) {
	animation-delay: 0s;
}

.lmsc-dash__panel--active .lmsc-dash__stat-card:nth-child(2),
.lmsc-dash__panel--active .lmsc-dash__course-card:nth-child(2),
.lmsc-dash__panel--active .lmsc-dash__action-card:nth-child(2) {
	animation-delay: 0.06s;
}

.lmsc-dash__panel--active .lmsc-dash__stat-card:nth-child(3),
.lmsc-dash__panel--active .lmsc-dash__course-card:nth-child(3),
.lmsc-dash__panel--active .lmsc-dash__action-card:nth-child(3) {
	animation-delay: 0.12s;
}

.lmsc-dash__panel--active .lmsc-dash__stat-card:nth-child(4),
.lmsc-dash__panel--active .lmsc-dash__course-card:nth-child(4),
.lmsc-dash__panel--active .lmsc-dash__action-card:nth-child(4) {
	animation-delay: 0.18s;
}

/* ---------- Progress Bar Glow ---------- */
.lmsc-dash__progress-bar-fill {
	position: relative;
}

.lmsc-dash__progress-bar-fill::after {
	content: '';
	position: absolute;
	right: 0;
	top: -2px;
	bottom: -2px;
	width: 20px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.6);
	filter: blur(4px);
	animation: lmscPulseGlow 2s ease-in-out infinite;
}

/* ---------- Enhanced Stat Cards ---------- */
.lmsc-dash__stat-card {
	border-left-width: 4px;
	position: relative;
	overflow: hidden;
}

.lmsc-dash__stat-card::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -30px;
	width: 100px;
	height: 200%;
	border-radius: 50%;
	opacity: 0.04;
	pointer-events: none;
}

.lmsc-dash__stat-card--enrolled::before {
	background: var(--lmsc-primary);
}

.lmsc-dash__stat-card--lessons::before {
	background: var(--lmsc-success);
}

.lmsc-dash__stat-card--certs::before {
	background: var(--lmsc-warning);
}

.lmsc-dash__stat-card--hours::before {
	background: var(--lmsc-accent);
}

/* ---------- Course Thumbnail Gradient ---------- */
.lmsc-dash__course-thumbnail::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}

.lmsc-dash__course-card:hover .lmsc-dash__course-thumbnail::after {
	opacity: 1;
}

/* ---------- Sidebar Active Refinement ---------- */
.lmsc-dash__nav-item--active {
	position: relative;
}

.lmsc-dash__nav-item--active::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 60%;
	background: #fff;
	border-radius: 2px;
	opacity: 0.7;
}

/* ---------- Dark Mode ---------- */
.lmsc-dash--dark {
	--lmsc-bg: #0f172a;
	--lmsc-surface: #1e293b;
	--lmsc-surface-alt: #162032;
	--lmsc-text: #f1f5f9;
	--lmsc-text-muted: #94a3b8;
	--lmsc-border: #334155;
	--lmsc-card-bg: #1e293b;
	--lmsc-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	--lmsc-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.lmsc-dash--dark .lmsc-dash__sidebar {
	background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

.lmsc-dash--dark .lmsc-dash__quiz-table th {
	background: #0f172a;
}

.lmsc-dash--dark .lmsc-dash__input,
.lmsc-dash--dark .lmsc-dash__textarea {
	background: #0f172a;
	color: #f1f5f9;
	border-color: #334155;
}

.lmsc-dash--dark .lmsc-dash__mini-stat {
	background: #0f172a;
}

/* ---------- Greeting Banner ---------- */
.lmsc-dash__greeting {
	font-size: 14px;
	color: var(--lmsc-text-muted);
	margin-bottom: 4px;
}

.lmsc-dash__greeting strong {
	color: var(--lmsc-text);
	font-weight: 700;
}

.lmsc-dash__greeting .wave-emoji {
	display: inline-block;
	animation: lmscWave 1.8s ease-in-out 1;
	transform-origin: 70% 70%;
}

@keyframes lmscWave {

	0%,
	60%,
	100% {
		transform: rotate(0);
	}

	10%,
	30% {
		transform: rotate(14deg);
	}

	20% {
		transform: rotate(-8deg);
	}

	40% {
		transform: rotate(-4deg);
	}

	50% {
		transform: rotate(10deg);
	}
}

/* ---------- Nav Icon SVGs (inline via CSS) ---------- */
.lmsc-icon-dashboard::before,
.lmsc-icon-courses::before,
.lmsc-icon-certificates::before,
.lmsc-icon-activity::before,
.lmsc-icon-profile::before,
.lmsc-icon-lesson::before,
.lmsc-icon-quiz::before,
.lmsc-icon-topic::before,
.lmsc-icon-access::before,
.lmsc-icon-trophy::before,
.lmsc-icon-checkmark::before,
.lmsc-icon-bell::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.lmsc-icon-dashboard::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
	filter: brightness(0) invert(1);
}

.lmsc-icon-courses::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'/%3E%3C/svg%3E");
	filter: brightness(0) invert(1);
}

.lmsc-icon-certificates::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
	filter: brightness(0) invert(1);
}

.lmsc-icon-activity::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
	filter: brightness(0) invert(1);
}

.lmsc-icon-profile::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	filter: brightness(0) invert(1);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.lmsc-dash__quick-actions {
		grid-template-columns: repeat(2, 1fr);
	}

	.lmsc-dash__stats-row {
		grid-template-columns: repeat(2, 1fr);
	}


	.lmsc-dash__profile-grid {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__profile-card {
		position: static;
	}
}

@media (max-width: 768px) {
	.lmsc-dash--sidebar {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__sidebar {
		display: none;
		position: fixed;
		z-index: 1000;
		width: 280px;
		left: 0;
		top: 0;
	}

	.lmsc-dash__sidebar.is-open {
		display: flex;
	}

	.lmsc-dash__main {
		padding: 16px;
	}

	.lmsc-dash__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.lmsc-dash__search {
		width: 100%;
	}

	.lmsc-dash__quick-actions {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__courses-grid {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__stats-row {
		grid-template-columns: 1fr 1fr;
	}

	.lmsc-dash__profile-form .lmsc-dash__form-row {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__courses-container--list .lmsc-dash__course-card {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__notification-dropdown {
		width: calc(100vw - 32px);
		right: -60px;
	}
}

@media (max-width: 480px) {
	.lmsc-dash__stats-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   V1.0 Feature Extensions
   ========================================================================== */

/* ---------- Notification Ticker ---------- */
.lmsc-ticker {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, var(--lmsc-primary), var(--lmsc-accent, #8B5CF6));
	color: #fff;
	padding: 8px 16px;
	border-radius: var(--lmsc-radius, 12px);
	margin-bottom: 16px;
	overflow: hidden;
	position: relative;
	font-size: 0.85rem;
	font-weight: 500;
	animation: lmsc-ticker-enter 0.4s ease-out;
}

.lmsc-ticker--closing {
	animation: lmsc-ticker-exit 0.3s ease-in forwards;
}

@keyframes lmsc-ticker-enter {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes lmsc-ticker-exit {
	to {
		transform: translateY(-100%);
		opacity: 0;
		height: 0;
		padding: 0;
		margin: 0;
	}
}

.lmsc-ticker__icon {
	flex-shrink: 0;
	margin-right: 12px;
	opacity: 0.9;
}

.lmsc-ticker__track {
	flex: 1;
	overflow: hidden;
	position: relative;
	margin-right: 12px;
	mask-image: linear-gradient(to right, transparent, #000 2%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 92%, transparent);
}

.lmsc-ticker__content {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	animation: lmsc-ticker-scroll 30s linear infinite;
}

@keyframes lmsc-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.lmsc-ticker__item {
	opacity: 0.95;
}

.lmsc-ticker__separator {
	opacity: 0.5;
	font-size: 0.7rem;
}

.lmsc-ticker__close {
	flex-shrink: 0;
	margin-left: 12px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 50%;
	color: #fff;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--lmsc-transition);
}

.lmsc-ticker__close:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* ---------- Data Tables ---------- */
.lmsc-data-table-wrap {
	overflow-x: auto;
	border-radius: var(--lmsc-radius, 12px);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	background: var(--lmsc-card-bg, #fff);
}

.lmsc-submissions-header {
	margin-block-end: 18px;
	max-width: 760px;
}

.lmsc-submissions-header__eyebrow {
	display: block;
	margin-block-end: 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lmsc-text-muted);
}

.lmsc-dash .lmsc-submissions-header h2,
.lmsc-dash .lmsc-submissions-header h3 {
	margin: 0 0 5px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--lmsc-text);
}

.lmsc-dash .lmsc-submissions-header p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--lmsc-text-muted);
}

.lmsc-submissions-header--staff {
	margin-block-end: 14px;
}

.lmsc-submissions-header--hub {
	margin-block-end: 16px;
}

.lmsc-submissions__tabs {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(180px, 1fr);
	gap: 4px;
	margin-block-end: 24px;
	padding: 4px;
	border: 1px solid var(--lmsc-border);
	border-radius: 14px;
	background: var(--lmsc-surface);
}

.lmsc-submissions__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 44px;
	padding: 9px 16px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--lmsc-text-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 550;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.lmsc-submissions__tab:hover {
	background: color-mix(in srgb, var(--lmsc-primary) 8%, var(--lmsc-surface));
	color: var(--lmsc-text);
}

.lmsc-submissions__tab--active,
.lmsc-submissions__tab--active:hover {
	background: var(--lmsc-primary);
	color: var(--lmsc-on-primary, #fff);
	box-shadow: 0 4px 12px rgba(var(--lmsc-primary-rgb), 0.24);
}

.lmsc-submissions__tab:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--lmsc-primary) 48%, transparent);
	outline-offset: 2px;
}

.lmsc-submissions__tab-icon {
	display: inline-flex;
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 auto;
}

.lmsc-submissions__tab-icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.lmsc-submissions__tab-label {
	min-inline-size: 0;
}

.lmsc-submissions__tab-badge {
	min-inline-size: 20px;
	padding: 2px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 14%, transparent);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.lmsc-submissions__view[hidden] {
	display: none !important;
}

.lmsc-submissions__load-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 16px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--lmsc-danger) 35%, var(--lmsc-border));
	border-radius: 10px;
	background: color-mix(in srgb, var(--lmsc-danger) 8%, var(--lmsc-surface));
	color: var(--lmsc-text);
	font-size: 13px;
	line-height: 1.45;
}

.lmsc-tab-panel--embedded > .lmsc-submissions-header {
	margin-block-end: 14px;
}

.lmsc-tab-shortcode-content {
	margin-block-start: 24px;
	padding: 20px;
	border: 1px solid var(--lmsc-border);
	border-radius: 12px;
	background: var(--lmsc-surface);
}

@media (max-width: 520px) {
	.lmsc-submissions__tabs {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		inline-size: 100%;
	}

	.lmsc-submissions__tab {
		min-inline-size: 0;
		padding-inline: 10px;
	}
}

@media (max-width: 359px) {
	.lmsc-submissions__tabs {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: 1fr;
	}
}

.lmsc-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.lmsc-data-table thead {
	background: var(--lmsc-bg-muted, #f8fafc);
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
}

.lmsc-data-table th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-data-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.04));
	vertical-align: middle;
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-data-table tbody tr {
	transition: var(--lmsc-transition);
}

.lmsc-data-table tbody tr:hover {
	background: var(--lmsc-bg-muted, rgba(0, 0, 0, 0.02));
}

.lmsc-data-table tbody tr:last-child td {
	border-bottom: none;
}

.lmsc-loading-row td {
	text-align: center;
	padding: 40px !important;
}

/* ---------- Score Bar ---------- */
.lmsc-score-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 100px;
}

.lmsc-score-bar__fill {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--lmsc-border, #e2e8f0);
	position: relative;
	overflow: hidden;
}

.lmsc-score-bar__fill::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	border-radius: 3px;
	transition: width 0.5s ease;
}

.lmsc-score-bar__fill--high::after {
	background: var(--lmsc-success, #10b981);
	width: inherit;
}

.lmsc-score-bar__fill--mid::after {
	background: var(--lmsc-accent, #eab308);
	width: inherit;
}

.lmsc-score-bar__fill--low::after {
	background: var(--lmsc-primary, #fb4365);
	width: inherit;
}

.lmsc-score-bar span {
	font-size: 0.75rem;
	font-weight: 600;
	min-width: 32px;
}

/* ---------- Badges ---------- */
.lmsc-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.lmsc-badge--success {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.lmsc-badge--danger {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
}

.lmsc-badge--warning {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}

.lmsc-badge--info {
	background: rgba(59, 130, 246, 0.12);
	color: #2563eb;
}

.lmsc-dash--dark .lmsc-badge--success {
	background: rgba(16, 185, 129, 0.2);
	color: #34d399;
}

.lmsc-dash--dark .lmsc-badge--danger {
	background: rgba(239, 68, 68, 0.2);
	color: #f87171;
}

.lmsc-dash--dark .lmsc-badge--warning {
	background: rgba(245, 158, 11, 0.2);
	color: #fbbf24;
}

.lmsc-dash--dark .lmsc-badge--info {
	background: rgba(59, 130, 246, 0.2);
	color: #60a5fa;
}

/* ---------- Mini Stats Row ---------- */
.lmsc-quizzes-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.lmsc-stat-mini {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 16px;
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	transition: var(--lmsc-transition);
}

.lmsc-stat-mini:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Colorful stat box backgrounds (#7) */
.lmsc-stat-mini {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.02));
	border-color: rgba(59, 130, 246, 0.12);
}

.lmsc-stat-mini--success {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
	border-color: rgba(16, 185, 129, 0.15);
}

.lmsc-stat-mini--danger {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
	border-color: rgba(239, 68, 68, 0.15);
}

.lmsc-stat-mini--info {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.02));
	border-color: rgba(139, 92, 246, 0.15);
}

.lmsc-stat-mini__value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--lmsc-primary);
}

.lmsc-stat-mini--success .lmsc-stat-mini__value {
	color: var(--lmsc-success, #10b981);
}

.lmsc-stat-mini--danger .lmsc-stat-mini__value {
	color: #ef4444;
}

.lmsc-stat-mini--info .lmsc-stat-mini__value {
	color: var(--lmsc-accent, #8B5CF6);
}

.lmsc-stat-mini__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted, #64748b);
	margin-top: 4px;
}

/* ---------- Filter Pills (Premium) ---------- */
.lmsc-filter-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	align-items: center;
}

.lmsc-pill,
button.lmsc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 24px;
	border: 1px solid rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.18);
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.06);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--lmsc-text, #1a1a2e);
	font-size: 0.813rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.lmsc-pill:hover {
	border-color: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.4);
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.12);
	color: var(--lmsc-primary, #fb4365);
	box-shadow: 0 2px 8px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.15);
	transform: translateY(-1px);
}

.lmsc-pill--active {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #fb4365);
	box-shadow: 0 3px 12px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.3);
}

.lmsc-pill--active:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #fb4365);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.4);
}

.lmsc-pill__count {
	padding: 2px 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.25);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.lmsc-pill:not(.lmsc-pill--active) .lmsc-pill__count {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.12);
	color: var(--lmsc-primary, #fb4365);
}

/* ---------- Tab Error Banner ---------- */
.lmsc-tab-error {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #b91c1c;
	font-size: 0.875rem;
}

.lmsc-tab-error p {
	margin: 0;
	flex: 1;
}

.lmsc-tab-error__retry {
	padding: 6px 16px;
	border-radius: 8px;
	border: 1px solid rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
	font-weight: 600;
	font-size: 0.813rem;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.lmsc-tab-error__retry:hover {
	background: rgba(239, 68, 68, 0.2);
	border-color: rgba(239, 68, 68, 0.5);
}

/* ---------- Card Grid ---------- */
.lmsc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.lmsc-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	box-shadow: var(--lmsc-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
	padding: 20px;
	transition: var(--lmsc-transition);
}

.lmsc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lmsc-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.lmsc-card__title {
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.lmsc-card__title a {
	color: var(--lmsc-text);
}

.lmsc-card__title a:hover {
	color: var(--lmsc-primary);
}

.lmsc-card__meta {
	font-size: 0.8rem;
	color: var(--lmsc-text-muted, #64748b);
	margin-bottom: 8px;
}

.lmsc-card__excerpt {
	font-size: 0.813rem;
	color: var(--lmsc-text-muted, #94a3b8);
	line-height: 1.5;
	margin-top: 8px;
}

.lmsc-card__stats-row {
	display: flex;
	gap: 16px;
	margin: 12px 0;
}

.lmsc-card__stat {
	font-size: 0.8rem;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-card__stat strong {
	color: var(--lmsc-text);
}

.lmsc-card__points {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lmsc-primary);
}

/* ---------- Buttons ---------- */
.lmsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	border: none;
	font-size: 0.813rem;
	font-weight: 500;
	cursor: pointer;
	transition: var(--lmsc-transition);
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
}

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

.lmsc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.lmsc-btn--sm {
	padding: 6px 12px;
	font-size: 0.75rem;
}

.lmsc-btn--xs {
	padding: 4px 10px;
	font-size: 0.7rem;
	border-radius: 6px;
}

.lmsc-btn--outline {
	background: transparent;
	border: 1px solid var(--lmsc-action-link, var(--lmsc-primary));
	color: var(--lmsc-action-link, var(--lmsc-primary));
}

.lmsc-btn--outline:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
}

/* ---------- Pagination ---------- */
.lmsc-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.06));
}

.lmsc-pagination__info {
	font-size: 0.8rem;
	color: var(--lmsc-text-muted, #64748b);
}

/* ---------- Announcement Cards ---------- */
.lmsc-announcement-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	padding: 20px;
	margin-bottom: 12px;
	transition: all 0.3s ease;
	position: relative;
}

.lmsc-announcement-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.lmsc-announcement--info {
	border-left: 4px solid #3b82f6;
}

.lmsc-announcement--success {
	border-left: 4px solid #10b981;
}

.lmsc-announcement--warning {
	border-left: 4px solid #f59e0b;
}

.lmsc-announcement--alert {
	border-left: 4px solid #ef4444;
}

.lmsc-announcement-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.lmsc-announcement-card__priority {
	font-size: 0.8rem;
}

.lmsc-announcement-card__priority-badge {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 2px 8px;
	border-radius: 10px;
	line-height: 1.4;
}

.lmsc-badge--urgent {
	background: rgba(239, 68, 68, 0.12);
	color: #DC2626;
}

.lmsc-badge--high {
	background: rgba(249, 115, 22, 0.12);
	color: #EA580C;
}

.lmsc-badge--normal {
	background: rgba(59, 130, 246, 0.12);
	color: #2563EB;
}

.lmsc-badge--low {
	background: rgba(100, 116, 139, 0.12);
	color: #64748B;
}

.lmsc-announcement-card__title {
	flex: 1;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
}

.lmsc-announcement-card__dismiss {
	background: none;
	border: none;
	font-size: 1.3rem;
	color: var(--lmsc-text-muted, #94a3b8);
	cursor: pointer;
	padding: 8px;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: var(--lmsc-transition);
	border-radius: 6px;
}

.lmsc-announcement-card__dismiss:hover {
	color: var(--lmsc-primary);
}

.lmsc-announcement-card__body {
	font-size: 0.875rem;
	color: var(--lmsc-text-muted, #64748b);
	line-height: 1.6;
}

/* -- Hot announcement card -- */
.lmsc-announcement-card--hot {
	border-left: 4px solid #F59E0B;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), transparent);
}

.lmsc-announcement-card__hot {
	font-size: 1.1rem;
	animation: lmsc-fire-pulse 1.5s ease-in-out infinite;
}

@keyframes lmsc-fire-pulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.15);
		opacity: 0.8;
	}
}

/* ---------- Group Drawer ---------- */
.lmsc-drawer {
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--lmsc-radius, 12px);
	margin-top: 16px;
	overflow: hidden;
	animation: lmsc-drawer-enter 0.3s ease;
}

@keyframes lmsc-drawer-enter {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lmsc-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
}

.lmsc-drawer__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.lmsc-drawer__close {
	/* Pin against the theme's global button{} styles, which otherwise paint this
	   a filled blue pill. It should be a plain muted "×" that takes the active
	   skin colour on hover - nothing more. */
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	color: var(--lmsc-text-muted, #64748b);
	transition: var(--lmsc-transition);
}

.lmsc-drawer__close:hover,
.lmsc-drawer__close:focus {
	background: none !important;
	color: var(--lmsc-primary) !important;
	box-shadow: none !important;
	outline: none;
}

/* ── Theme-override hardening for ALL close (×) glyph buttons ──────────
   These are chrome-less "×" buttons by design. A theme's global button{}
   otherwise paints them as filled pills (esp. on hover/focus). Pin the chrome
   for every close button in one place so this can't recur surface by surface.
   Each button's own rule keeps its colour; we only kill the stray background. */
.lmsc-ticker__close, .lmsc-ticker__close:hover, .lmsc-ticker__close:focus,
.lmsc-drawer__close, .lmsc-drawer__close:hover, .lmsc-drawer__close:focus,
.lmsc-modal__close, .lmsc-modal__close:hover, .lmsc-modal__close:focus,
.lmsc-group-message-modal__close, .lmsc-group-message-modal__close:hover, .lmsc-group-message-modal__close:focus,
.lmsc-toast__close, .lmsc-toast__close:hover, .lmsc-toast__close:focus,
.lmsc-review-modal__close, .lmsc-review-modal__close:hover, .lmsc-review-modal__close:focus,
.lmsc-email-composer__close, .lmsc-email-composer__close:hover, .lmsc-email-composer__close:focus,
.lmsc-admin-modal__close, .lmsc-admin-modal__close:hover, .lmsc-admin-modal__close:focus {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none;
}

.lmsc-drawer__body {
	padding: 16px 20px;
}

.lmsc-drawer__course-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.04));
}

.lmsc-drawer__course-item:last-child {
	border-bottom: none;
}

.lmsc-drawer__course-item a {
	flex: 1;
	font-weight: 500;
	font-size: 0.875rem;
}

/* ---------- Progress Bar (small) ---------- */
.lmsc-progress-bar--sm {
	width: 80px;
	height: 4px;
	background: var(--lmsc-border, #e2e8f0);
	border-radius: 2px;
	overflow: hidden;
}

.lmsc-progress-bar__fill {
	height: 100%;
	background: var(--lmsc-primary);
	border-radius: 2px;
	transition: width 0.4s ease;
}

/* ---------- Text Utilities ---------- */
.lmsc-text-muted {
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.8rem;
}

.lmsc-link {
	color: var(--lmsc-primary);
	font-weight: 500;
}

.lmsc-link:hover {
	opacity: 0.8;
}

/* ---------- Empty States ---------- */
.lmsc-empty-state {
	text-align: center;
	padding: 60px 24px;
}

.lmsc-empty-state__icon {
	font-size: 2.5rem;
	margin-bottom: 16px;
	opacity: 0.4;
}

.lmsc-empty-state h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--lmsc-text);
}

.lmsc-empty-state p {
	font-size: 0.875rem;
	color: var(--lmsc-text-muted, #94a3b8);
	max-width: 320px;
	margin: 0 auto;
}

/* ---------- Loading / Spinner ---------- */
.lmsc-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
}

.lmsc-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--lmsc-border, #e2e8f0);
	border-top-color: var(--lmsc-primary);
	border-radius: 50%;
	animation: lmsc-spin 0.7s linear infinite;
}

@keyframes lmsc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Skeleton Loaders ---------- */
@keyframes lmsc-skeleton-shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.lmsc-skeleton-pulse {
	background: linear-gradient(90deg,
			var(--lmsc-surface-alt, #f1f5f9) 25%,
			rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.06) 50%,
			var(--lmsc-surface-alt, #f1f5f9) 75%);
	background-size: 200% 100%;
	animation: lmsc-skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--lmsc-radius-sm, 8px);
}

.lmsc-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	padding: 8px 0;
}

.lmsc-skeleton-card {
	border-radius: var(--lmsc-radius, 12px);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	padding: 16px;
	background: var(--lmsc-card-bg, #fff);
}

.lmsc-skeleton-card__img {
	height: 140px;
	border-radius: var(--lmsc-radius-sm, 8px);
	margin-bottom: 16px;
}

.lmsc-skeleton-card__line {
	height: 14px;
	margin-bottom: 10px;
	border-radius: 7px;
}

.lmsc-skeleton-card__bar {
	height: 8px;
	border-radius: 4px;
	margin-top: 12px;
}

.lmsc-skeleton-table {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.lmsc-skeleton-row {
	height: 52px;
	border-radius: var(--lmsc-radius-sm, 8px);
}

.lmsc-skeleton-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	padding: 8px 0;
}

.lmsc-skeleton-stat {
	height: 80px;
	border-radius: var(--lmsc-radius, 12px);
}

.lmsc-skeleton-block {
	height: 200px;
	border-radius: var(--lmsc-radius, 12px);
}

/* ---------- Enhanced Empty States ---------- */
.lmsc-empty-state__illustration {
	width: 120px;
	height: 120px;
	margin: 0 auto 20px;
	color: var(--lmsc-primary);
	opacity: 0.3;
}

.lmsc-empty-state__illustration svg {
	width: 100%;
	height: 100%;
}




/* ---- Custom Select & Date Styling (#6) ---- */
.lmsc-dash__sort-select,
select.lmsc-dash__input,
.lmsc-dash .lmsc-dash__assignment-filter select,
input[type="date"].lmsc-dash__input,
input[type="date"].lmsc-dash__input--sm {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	padding-right: 36px;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: var(--lmsc-radius-sm, 8px);
	padding: 8px 36px 8px 12px;
	font-size: 14px;
	background-color: var(--lmsc-bg, #fff);
	transition: var(--lmsc-transition);
}

.lmsc-dash__sort-select:focus,
select.lmsc-dash__input:focus,
input[type="date"].lmsc-dash__input:focus,
input[type="date"].lmsc-dash__input--sm:focus {
	border-color: var(--lmsc-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	outline: none;
}

input[type="date"].lmsc-dash__input::-webkit-calendar-picker-indicator,
input[type="date"].lmsc-dash__input--sm::-webkit-calendar-picker-indicator {
	opacity: 0.5;
	cursor: pointer;
}

/* ---- Reduce header chrome & icon crowding (#9, #10) ---- */
.lmsc-dash__header-right {
	gap: 4px;
}

.lmsc-dash__header-action-btn {
	padding: 6px;
}

.lmsc-dash__header-action-btn svg {
	width: 18px;
	height: 18px;
}

/* ---- Content padding for floating button (#12) ---- */
.lmsc-dash__content {
	padding-bottom: 80px;
}

/* ---- Compact certificate action buttons (#13) ---- */
.lmsc-cert-card__actions {
	flex-wrap: wrap;
	gap: 6px;
}

.lmsc-cert-card__actions .lmsc-dash-btn {
	padding: 6px 10px;
	font-size: 0.75rem;
	gap: 4px;
}

/* ---------- Modern Layout ---------- */
.lmsc-dash--modern {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.lmsc-dash--modern .lmsc-dash__sidebar {
	display: none;
}

.lmsc-dash__modern-nav {
	display: flex;
	gap: 4px;
	padding: 8px 12px;
	background: var(--lmsc-card-bg, rgba(255, 255, 255, 0.95));
	backdrop-filter: blur(20px);
	border-radius: 16px;
	margin: 0 24px 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lmsc-dash__modern-nav-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 12px;
	border: none;
	background: transparent;
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.813rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: var(--lmsc-transition);
}

.lmsc-dash__modern-nav-item:hover {
	background: var(--lmsc-bg-muted, #f1f5f9);
	color: var(--lmsc-text);
}

.lmsc-dash__modern-nav-item--active {
	background: var(--lmsc-primary);
	color: var(--lmsc-on-primary, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

/* ---------- New Tab Icons ---------- */
.lmsc-icon-quizzes::before {
	content: '\f11b';
}

.lmsc-icon-assignments::before {
	content: '\f15b';
}

.lmsc-icon-essays::before {
	content: '\f15c';
}

.lmsc-icon-announcements::before {
	content: '\f0a1';
}

.lmsc-icon-groups::before {
	content: '\f0c0';
}

.lmsc-icon-account::before {
	content: "111";
}

/* SVG fallback for icon font */
[class^="lmsc-icon-"]::before,
[class*=" lmsc-icon-"]::before {
	font-family: 'dashicons';
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.lmsc-icon-quizzes::before {
	content: '\f469';
}

/* dashicons-welcome-learn-more */
.lmsc-icon-assignments::before {
	content: '\f321';
}

/* dashicons-media-text */
.lmsc-icon-essays::before {
	content: '\f497';
}

/* dashicons-editor-paste-text */
.lmsc-icon-announcements::before {
	content: '\f488';
}

/* dashicons-megaphone */
.lmsc-icon-groups::before {
	content: '\f307';
}

/* dashicons-groups */

/* dashicons-calendar-alt */
.lmsc-icon-schedule::before {
	content: '\f508';
}

/* dashicons-schedule */
.lmsc-icon-meetings::before {
	content: '\f235';
}

/* dashicons-networking - path/roadmap icon */
.lmsc-icon-learning-paths::before {
	content: '\f325';
}

/* dashicons-chart-area - reports */
.lmsc-icon-reports::before {
	content: '\f239';
}

/* ---------- V1.0 Responsive ---------- */
@media (max-width: 768px) {
	.lmsc-quizzes-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.lmsc-card-grid {
		grid-template-columns: 1fr;
	}

	.lmsc-data-table th:nth-child(n+5),
	.lmsc-data-table td:nth-child(n+5) {
		display: none;
	}

	.lmsc-dash__modern-nav {
		margin: 0 12px 12px;
	}
}

@media (max-width: 480px) {
	.lmsc-quizzes-stats {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.lmsc-filter-bar {
		gap: 6px;
	}

	.lmsc-pill {
		padding: 6px 12px;
		font-size: 0.75rem;
	}

	.lmsc-ticker {
		font-size: 0.75rem;
		padding: 6px 12px;
	}
}

/* ---------- Secondary Stats Row ---------- */
.lmsc-dash__stats-row--secondary {
	margin-top: -8px;
}

.lmsc-dash__stat-card--quizzes {
	--stat-color: #8B5CF6;
}

.lmsc-dash__stat-card--pass-rate {
	--stat-color: #10b981;
}

.lmsc-dash__stat-card--assignments {
	--stat-color: #f59e0b;
}

.lmsc-dash__stat-card--total-quizzes {
	--stat-color: #06b6d4;
}

.lmsc-dash__stat-card--quizzes .lmsc-dash__stat-icon,
.lmsc-dash__stat-card--pass-rate .lmsc-dash__stat-icon,
.lmsc-dash__stat-card--assignments .lmsc-dash__stat-icon,
.lmsc-dash__stat-card--total-quizzes .lmsc-dash__stat-icon {
	color: var(--stat-color);
	opacity: 0.6;
}

/* ---------- Pending Work Widget ---------- */
.lmsc-dash__widget--pending {
	border-left: 3px solid #f59e0b;
}

.lmsc-dash__pending-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lmsc-dash__pending-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(245, 158, 11, 0.06);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: background 0.2s;
	cursor: pointer;
}

.lmsc-dash__pending-item:hover {
	background: rgba(245, 158, 11, 0.12);
}

.lmsc-dash__pending-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f59e0b;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}

.lmsc-dash__pending-label {
	flex: 1;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--lmsc-text, #334155);
}

.lmsc-dash__pending-item svg {
	color: #94a3b8;
	flex-shrink: 0;
}

/* ---------- Account Tab ---------- */
.lmsc-account-tab__header {
	margin-bottom: 18px;
}

.lmsc-dash .lmsc-account-tab__header h2 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lmsc-text, #1e293b);
	margin: 0 0 4px;
}

.lmsc-dash p.lmsc-account-tab__description {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lmsc-text-muted, #64748b);
	margin: 0;
}

.lmsc-account-tab .lmsc-card {
	padding: 20px;
}

.lmsc-account-tab .lmsc-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.lmsc-account-plugin__icon {
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 1;
}

.lmsc-account-plugin__content {
	flex: 1 1 auto;
	min-width: 0;
	margin-inline-start: 4px;
}

.lmsc-dash .lmsc-account-plugin__title {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 3px;
	overflow-wrap: anywhere;
}

.lmsc-dash p.lmsc-account-plugin__meta {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lmsc-text-muted, #64748b);
	margin: 0;
	overflow-wrap: anywhere;
}

.lmsc-account-tab .lmsc-card__stats-row {
	padding: 8px 0 12px;
	font-size: 0.85rem;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-account-tab .lmsc-btn--outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--lmsc-primary, #fb4365);
	color: var(--lmsc-primary, #fb4365);
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

.lmsc-account-tab .lmsc-btn--outline:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
}

.lmsc-account-tab__ld-section .lmsc-card__meta {
	font-size: 0.85rem;
	color: var(--lmsc-text-muted, #64748b);
	margin: 4px 0 0;
}

/* ================================================================
   WCAG AA ACCESSIBILITY
   ================================================================ */

/* Focus indicators for keyboard navigation */
.lmsc-dash a:focus-visible,
.lmsc-dash button:focus-visible,
.lmsc-dash input:focus-visible,
.lmsc-dash select:focus-visible,
.lmsc-dash textarea:focus-visible,
.lmsc-dash [tabindex]:focus-visible {
	outline: 2px solid var(--lmsc-primary, #fb4365);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Nav items focus */
.lmsc-dash__nav-item:focus-visible,
.lmsc-dash__topnav-item:focus-visible,
.lmsc-dash__pill:focus-visible,
.lmsc-dash__grid-tab:focus-visible {
	outline: 2px solid var(--lmsc-primary, #fb4365);
	outline-offset: -2px;
}

/* Layout / skin button focus */
.lmsc-dash__layout-btn:focus-visible,
.lmsc-dash__skin-option:focus-visible {
	outline: 2px solid var(--lmsc-primary, #fb4365);
	outline-offset: 1px;
}

/* Certificate button focus */
.lmsc-dash__cert-btn:focus-visible {
	outline: 2px solid var(--lmsc-primary, #fb4365);
	outline-offset: 2px;
}

/* Card and interactive surfaces */
.lmsc-dash__course-card:focus-within {
	box-shadow: 0 0 0 2px var(--lmsc-primary, #fb4365), 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

	.lmsc-dash *,
	.lmsc-dash *::before,
	.lmsc-dash *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Ensure text meets WCAG AA contrast minimums */
.lmsc-dash__sidebar-role,
.lmsc-dash__cert-date,
.lmsc-admin-help {
	color: #586779;
	/* 4.72:1 on white, meets AA */
}

/* Skip navigation link (hidden until focused) */
.lmsc-dash__skip-nav {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	padding: 8px 16px;
	border-radius: 0 0 8px 8px;
	font-weight: 600;
	z-index: 9999;
	text-decoration: none;
	transition: top 0.2s ease;
}

.lmsc-dash__skip-nav:focus {
	top: 0;
}

/* Verification page accessibility */
.lmsc-verify-input:focus-visible {
	outline: 2px solid #fb4365;
	outline-offset: 2px;
}

.lmsc-verify-btn:focus-visible {
	outline: 2px solid #fb4365;
	outline-offset: 2px;
}

/* ========================================================================
   Phase D: Quiz Detail View
   ======================================================================== */
.lmsc-quiz-expand-btn:not(.lmsc-btn) {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: var(--lmsc-text-muted, #888);
	transition: transform 0.2s ease, color 0.2s ease;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
}

.lmsc-quiz-expand-btn:not(.lmsc-btn):hover {
	color: var(--lmsc-primary, #fb4365);
}

.lmsc-quiz-expand-btn--open {
	transform: rotate(180deg);
}

.lmsc-quiz-detail-row td {
	padding: 0 !important;
	background: var(--lmsc-surface-alt, #1e1e2e);
	border-top: none !important;
}

.lmsc-quiz-detail-unavailable {
	display: inline-block;
	max-width: 10rem;
	color: var(--lmsc-text-muted);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.lmsc-quiz-review__status-text {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--lmsc-text-muted);
}

.lmsc-quiz-review__item--pending {
	border-left-color: var(--lmsc-warning, #b45309);
}

.lmsc-quiz-review__item--recorded {
	border-left-color: var(--lmsc-border-strong, #64748b);
}

.lmsc-quiz-detail {
	padding: 16px 20px;
}

.lmsc-quiz-questions__header {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text-muted, #888);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.08));
}

.lmsc-quiz-question {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	margin-bottom: 4px;
	font-size: 14px;
	transition: background 0.15s ease;
}

.lmsc-quiz-question:hover {
	background: rgba(255, 255, 255, 0.03);
}

.lmsc-quiz-question--correct {
	border-left: 3px solid #22c55e;
}

.lmsc-quiz-question--wrong {
	border-left: 3px solid #ef4444;
}

.lmsc-quiz-question__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--lmsc-text-muted, #888);
	flex-shrink: 0;
}

.lmsc-quiz-question__icon {
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
}

.lmsc-quiz-question--correct .lmsc-quiz-question__icon {
	color: #22c55e;
}

.lmsc-quiz-question--wrong .lmsc-quiz-question__icon {
	color: #ef4444;
}

.lmsc-quiz-question__text {
	flex: 1;
}

.lmsc-quiz-question__pts {
	font-size: 12px;
	color: var(--lmsc-text-muted, #888);
	flex-shrink: 0;
}

/* ── Enhanced Quiz Review Panel ───────────────────────────── */
.lmsc-quiz-review {
	padding: 4px 0;
}

.lmsc-quiz-review__header {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.08));
}

.lmsc-quiz-review__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text-muted, #888);
}

.lmsc-quiz-review__score {
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
}

.lmsc-quiz-review__score--pass {
	background: rgba(34, 197, 94, 0.12);
	color: #22c55e;
}

.lmsc-quiz-review__score--fail {
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
}

.lmsc-quiz-review__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lmsc-quiz-review__item {
	border-radius: 10px;
	padding: 10px 14px;
	transition: background 0.15s ease;
}

.lmsc-quiz-review__item:hover {
	background: rgba(255, 255, 255, 0.03);
}

.lmsc-quiz-review__item--correct {
	border-left: 3px solid #22c55e;
}

.lmsc-quiz-review__item--wrong {
	border-left: 3px solid #ef4444;
}

.lmsc-quiz-review__item-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.lmsc-quiz-review__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--lmsc-text-muted, #888);
	flex-shrink: 0;
}

.lmsc-quiz-review__icon {
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
}

.lmsc-quiz-review__item--correct .lmsc-quiz-review__icon {
	color: #22c55e;
}

.lmsc-quiz-review__item--wrong .lmsc-quiz-review__icon {
	color: #ef4444;
}

.lmsc-quiz-review__question {
	flex: 1;
	color: var(--lmsc-text, #e2e8f0);
}

.lmsc-quiz-review__item-pts {
	font-size: 12px;
	color: var(--lmsc-text-muted, #888);
	flex-shrink: 0;
}

.lmsc-quiz-review__question-body {
	margin: 8px 0 4px 58px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--lmsc-text, #e2e8f0);
	word-break: break-word;
}

.lmsc-quiz-review__question-body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 8px 0;
}

.lmsc-quiz-review__question-body p:last-child {
	margin-bottom: 0;
}

.lmsc-quiz-review__question-body audio,
.lmsc-quiz-review__question-body video {
	max-width: 100%;
	margin: 8px 0;
	border-radius: 6px;
}

.lmsc-quiz-review__question-body iframe {
	max-width: 100%;
	border-radius: 6px;
	margin: 8px 0;
}

.lmsc-quiz-review__answers {
	margin-top: 8px;
	margin-left: 58px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lmsc-quiz-review__answer {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 8px;
}

.lmsc-quiz-review__answer--student {
	background: rgba(255, 255, 255, 0.03);
}

.lmsc-quiz-review__answer--correct {
	background: rgba(34, 197, 94, 0.06);
}

.lmsc-quiz-review__answer-label {
	font-weight: 600;
	color: var(--lmsc-text-muted, #888);
	white-space: nowrap;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.lmsc-quiz-review__answer-text {
	color: var(--lmsc-text, #e2e8f0);
	word-break: break-word;
}

.lmsc-quiz-review__answer-text--wrong {
	color: #ef4444;
	text-decoration: line-through;
	opacity: 0.8;
}

.lmsc-quiz-review__answer-text--correct {
	color: #22c55e;
	font-weight: 600;
}

@media (max-width: 600px) {
	.lmsc-quiz-review__answers {
		margin-left: 34px;
	}
	.lmsc-quiz-review__summary {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* ========================================================================
   Phase D: Essay Detail Modal
   ======================================================================== */
.lmsc-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
}

.lmsc-modal--open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	animation: lmsc-fade-in 0.2s ease;
}

.lmsc-modal__content {
	position: relative;
	z-index: 1;
	background: var(--lmsc-surface, #1a1a2e);
	border: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.1));
	border-radius: 16px;
	width: 90%;
	max-width: 680px;
	max-height: 80vh;
	overflow-y: auto;
	animation: lmsc-slide-up 0.3s ease;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.lmsc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.08));
	position: sticky;
	top: 0;
	background: var(--lmsc-surface, #1a1a2e);
	z-index: 1;
	border-radius: 16px 16px 0 0;
}

.lmsc-modal__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.lmsc-modal__close {
	background: none;
	border: none;
	color: var(--lmsc-text-muted, #888);
	font-size: 24px;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
	transition: color 0.15s;
}

.lmsc-modal__close:hover {
	color: var(--lmsc-text, #fff);
}

.lmsc-modal__body {
	padding: 24px;
}

@keyframes lmsc-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes lmsc-slide-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lmsc-essay-detail__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.lmsc-essay-detail__points {
	font-weight: 700;
	color: var(--lmsc-primary, #fb4365);
}

.lmsc-essay-detail__context {
	font-size: 13px;
	color: var(--lmsc-text-muted, #888);
	margin-bottom: 20px;
}

.lmsc-essay-detail__content {
	line-height: 1.7;
	font-size: 15px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
	border: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.06));
	margin-bottom: 20px;
}

.lmsc-essay-detail__feedback h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.08));
}

.lmsc-feedback-item {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 10px;
}

.lmsc-feedback-item__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.lmsc-feedback-item__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.lmsc-feedback-item__body {
	line-height: 1.6;
}

/* ========================================================================
   Phase D: Announcement Filter Pills & Card Accents
   ======================================================================== */
.lmsc-filter-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

/* Duplicate pill block removed - using primary definition above */


/* Announcement type accents */
.lmsc-announcement--info {
	border-left: 3px solid #3b82f6;
}

.lmsc-announcement--success {
	border-left: 3px solid #22c55e;
}

.lmsc-announcement--warning {
	border-left: 3px solid #f59e0b;
}

.lmsc-announcement--alert {
	border-left: 3px solid #ef4444;
}

.lmsc-announcement-card {
	transition: transform 0.15s ease, opacity 0.3s ease;
}

.lmsc-announcement-card:hover {
	transform: translateY(-1px);
}

/* ========================================================================
   Phase D: Group Drawer Tabs & Member Items
   ======================================================================== */
.lmsc-drawer__tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.08));
	padding: 0 20px;
}

.lmsc-drawer__tab {
	padding: 10px 20px;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--lmsc-text-muted, #888);
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}

.lmsc-drawer__tab:hover {
	color: var(--lmsc-accent, #6366f1);
	background: rgba(var(--lmsc-accent-rgb, 99, 102, 241), 0.06);
	border-radius: 6px 6px 0 0;
}

.lmsc-drawer__tab--active {
	color: var(--lmsc-accent, #6366f1);
}

.lmsc-drawer__tab--active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--lmsc-accent, #6366f1);
	border-radius: 2px 2px 0 0;
}

.lmsc-member-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.06));
}

.lmsc-member-item:last-child {
	border-bottom: none;
}

.lmsc-member-item__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
}

.lmsc-member-item__info {
	flex: 1;
	min-width: 0;
}

.lmsc-member-item__info strong {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-member-item__name-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.lmsc-member-item__pct {
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-primary, #007AFF);
}

.lmsc-member-item__pct--complete {
	color: var(--lmsc-success, #10b981);
}

/* --- Group Actions (Message button bar) --- */
.lmsc-group-actions {
	display: flex;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.06));
	margin-bottom: 4px;
}

/* --- Group Stats Cards --- */
.lmsc-group-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.lmsc-group-stat-card {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
	text-align: center;
}

.lmsc-group-stat-card__value {
	font-size: 28px;
	font-weight: 700;
	color: var(--lmsc-text, #0f172a);
	line-height: 1;
	margin-bottom: 4px;
}

.lmsc-group-stat-card__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--lmsc-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* --- Group Progress Heading --- */
.lmsc-group-progress-heading {
	font-size: 15px;
	font-weight: 600;
	color: var(--lmsc-text, #0f172a);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
}

/* --- Member Progress Row --- */
.lmsc-member-progress-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.06));
}

.lmsc-member-progress-row:last-child {
	border-bottom: none;
}

.lmsc-member-progress-row__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.lmsc-member-progress-row__info {
	flex: 1;
	min-width: 0;
}

.lmsc-member-progress-row__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text, #0f172a);
	margin-bottom: 4px;
}

.lmsc-member-progress-row__pct {
	font-size: 13px;
	font-weight: 700;
	color: var(--lmsc-primary, #007AFF);
	min-width: 40px;
	text-align: right;
}

.lmsc-member-progress-row__detail {
	font-size: 11px;
	color: var(--lmsc-text-muted, #64748b);
	min-width: 36px;
	text-align: right;
}

/* --- Group Message Modal --- */
.lmsc-group-message-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	animation: lmsc-fadeIn 0.2s ease;
}

.lmsc-group-message-modal__content {
	background: var(--lmsc-surface, #fff);
	border-radius: var(--lmsc-radius, 16px);
	width: 90%;
	max-width: 520px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.lmsc-group-message-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
}

.lmsc-group-message-modal__header h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--lmsc-text, #0f172a);
}

.lmsc-group-message-modal__close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--lmsc-text-muted, #94a3b8);
	cursor: pointer;
	line-height: 1;
}

.lmsc-group-message-modal__body {
	padding: 24px;
}

.lmsc-group-message-modal__body .lmsc-admin-field {
	margin-bottom: 16px;
}

.lmsc-group-message-modal__body .lmsc-admin-field:last-child {
	margin-bottom: 0;
}

.lmsc-group-message-modal__body label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text, #334155);
	margin-bottom: 6px;
}

.lmsc-dash-input,
.lmsc-dash-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius, 10px);
	font-size: 14px;
	font-family: inherit;
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #0f172a);
	outline: none;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.lmsc-dash-input:focus,
.lmsc-dash-textarea:focus {
	border-color: var(--lmsc-primary, #007AFF);
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.lmsc-dash-textarea {
	resize: vertical;
	min-height: 100px;
}

.lmsc-group-message-modal__footer {
	padding: 16px 24px;
	border-top: 1px solid var(--lmsc-border, #e2e8f0);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* ========================================================================
   Phase D: Assignment Upload Zone
   ======================================================================== */
.lmsc-upload-zone {
	border: 2px dashed var(--lmsc-border, rgba(255, 255, 255, 0.15));
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	margin-bottom: 20px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.lmsc-upload-zone:hover {
	border-color: var(--lmsc-primary, #fb4365);
	background: rgba(251, 67, 101, 0.04);
}

.lmsc-upload-zone__text {
	font-size: 14px;
	color: var(--lmsc-text-muted, #888);
	margin-bottom: 12px;
}

.lmsc-upload-zone__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Essay card click hint */
.lmsc-card__expand-hint {
	display: block;
	font-size: 12px;
	color: var(--lmsc-text-muted, #666);
	margin-top: 8px;
	transition: color 0.15s;
}

.lmsc-card--essay {
	cursor: pointer;
}

.lmsc-card--essay:hover .lmsc-card__expand-hint {
	color: var(--lmsc-primary, #fb4365);
}

/* Card actions row */
.lmsc-card__actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

/* ==========================================================================
   BuddyBoss Community Section
   ========================================================================== */

.lmsc-bb-section {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 16px);
	padding: 24px;
	margin-top: 24px;
	box-shadow: var(--lmsc-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.lmsc-bb-section h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-bb-section h4 {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 16px 0 10px;
	color: var(--lmsc-text, #1e293b);
}

/* Stats row */
.lmsc-bb-stats {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.lmsc-bb-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 20px;
	background: var(--lmsc-bg, #f8fafc);
	border-radius: var(--lmsc-radius-sm, 10px);
	min-width: 80px;
}

.lmsc-bb-stat__num {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--lmsc-primary, #fb4365);
	line-height: 1;
}

.lmsc-bb-stat__label {
	font-size: 0.75rem;
	color: var(--lmsc-muted, #94a3b8);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Profile link */
.lmsc-bb-profile-link {
	margin: 12px 0;
}

/* xProfile fields */
.lmsc-bb-fields {
	margin-top: 12px;
}

.lmsc-bb-field {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
}

.lmsc-bb-field:last-child {
	border-bottom: none;
}

.lmsc-bb-field__label {
	font-weight: 600;
	color: var(--lmsc-text, #1e293b);
	font-size: 0.875rem;
}

.lmsc-bb-field__value {
	color: var(--lmsc-muted, #64748b);
	font-size: 0.875rem;
}

/* Activity feed */
.lmsc-bb-activity {
	margin-top: 16px;
}

.lmsc-bb-activity-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
	gap: 12px;
}

.lmsc-bb-activity-item:last-child {
	border-bottom: none;
}

.lmsc-bb-activity-item__text {
	font-size: 0.85rem;
	color: var(--lmsc-text, #1e293b);
	flex: 1;
}

.lmsc-bb-activity-item__time {
	font-size: 0.75rem;
	color: var(--lmsc-muted, #94a3b8);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Meetings (Zoom) Tab
   ========================================================================== */

/* Countdown banner */
.lmsc-meeting-countdown {
	background: linear-gradient(135deg, var(--lmsc-primary, #fb4365), var(--lmsc-accent, #7c3aed));
	color: #fff;
	border-radius: var(--lmsc-radius, 16px);
	padding: 20px 24px;
	margin-bottom: 20px;
	text-align: center;
}

.lmsc-meeting-countdown__label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.85;
	margin-bottom: 6px;
}

.lmsc-meeting-countdown__timer {
	font-size: 2rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
}

.lmsc-meeting-countdown__title {
	font-size: 0.9rem;
	margin-top: 8px;
	opacity: 0.9;
}

/* ── Meeting Create (Inline Form) ── */
.lmsc-meeting-create-wrap {
	margin-bottom: 16px;
}
.lmsc-meeting-create-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.lmsc-meeting-create-form {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 16px);
	padding: 24px;
	margin-top: 12px;
	border: 1px solid var(--lmsc-border, rgba(255,255,255,0.08));
	animation: lmscSlideDown 0.25s ease;
}
@keyframes lmscSlideDown {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.lmsc-meeting-create-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
.lmsc-meeting-create-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lmsc-meeting-create-form__field--full {
	grid-column: 1 / -1;
}
.lmsc-meeting-create-form__field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text-secondary, #94a3b8);
}
.lmsc-meeting-create-form__field .required {
	color: var(--lmsc-danger, #ef4444);
}
.lmsc-meeting-create-form__field input,
.lmsc-meeting-create-form__field select {
	padding: 10px 14px;
	border: 1px solid var(--lmsc-border, rgba(255,255,255,0.1));
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: var(--lmsc-text, #e2e8f0);
	background: var(--lmsc-input-bg, rgba(255,255,255,0.05));
	transition: border-color 0.2s, box-shadow 0.2s;
}
.lmsc-meeting-create-form__field input:focus,
.lmsc-meeting-create-form__field select:focus {
	outline: none;
	border-color: var(--lmsc-primary, #6366f1);
	box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.lmsc-meeting-create-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--lmsc-border, rgba(255,255,255,0.06));
}
.lmsc-meeting-create-form__feedback {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
}
@media (max-width: 640px) {
	.lmsc-meeting-create-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Meeting cards grid */
.lmsc-meetings-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.lmsc-meeting-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 16px);
	padding: 20px;
	box-shadow: var(--lmsc-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
	border-left: 4px solid var(--lmsc-muted, #94a3b8);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lmsc-meeting-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--lmsc-shadow-hover, 0 10px 25px -5px rgba(0, 0, 0, 0.08));
}

/* Status variants */
.lmsc-meeting-card--live {
	border-left-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), transparent);
}

.lmsc-meeting-card--upcoming {
	border-left-color: #10b981;
}

.lmsc-meeting-card--past {
	border-left-color: #94a3b8;
	opacity: 0.75;
}

.lmsc-meeting-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.lmsc-meeting-card__status {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lmsc-meeting-card--live .lmsc-meeting-card__status {
	color: #ef4444;
	animation: lmsc-pulse 2s infinite;
}

.lmsc-meeting-card--upcoming .lmsc-meeting-card__status {
	color: #10b981;
}

.lmsc-meeting-card--past .lmsc-meeting-card__status {
	color: #94a3b8;
}

.lmsc-meeting-card__duration {
	font-size: 0.75rem;
	color: var(--lmsc-muted, #94a3b8);
	background: var(--lmsc-bg, #f1f5f9);
	padding: 2px 8px;
	border-radius: 20px;
}

.lmsc-meeting-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-meeting-card__course {
	font-size: 0.8rem;
	color: var(--lmsc-primary, #fb4365);
	margin: 0 0 8px;
	font-weight: 500;
}

.lmsc-meeting-card__meta {
	display: flex;
	gap: 16px;
	font-size: 0.8rem;
	color: var(--lmsc-muted, #64748b);
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.lmsc-meeting-card__desc {
	font-size: 0.82rem;
	color: var(--lmsc-muted, #64748b);
	margin: 0 0 12px;
	line-height: 1.5;
}

.lmsc-meeting-card__actions {
	margin-top: 12px;
}

/* Join button */
.lmsc-meeting__join-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.lmsc-meeting-card--live .lmsc-meeting__join-btn {
	background: #ef4444;
	border-color: #ef4444;
}

.lmsc-meeting-card--live .lmsc-meeting__join-btn:hover {
	background: #dc2626;
}

/* Pulse animation for live indicator */
@keyframes lmsc-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

/* Responsive */
@media (max-width: 640px) {
	.lmsc-meetings-list {
		grid-template-columns: 1fr;
	}

	.lmsc-bb-stats {
		gap: 8px;
	}

	.lmsc-bb-stat {
		padding: 8px 12px;
		min-width: 60px;
	}

	.lmsc-meeting-countdown__timer {
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   Phase 1 - Tab Panel & Page Background Fixes
   Override any inherited or missing backgrounds on content panels.
   ========================================================================== */

/* ---- Dashboard container: use skin background or inherit page ---- */
.lmsc-dash {
	background: var(--lmsc-bg, transparent);
}

/* ---- Tab Panels: explicit surface background ---- */
.lmsc-tab-panel {
	background: var(--lmsc-surface, #ffffff) !important;
	border-radius: var(--lmsc-radius, 12px);
	padding: 24px;
	margin-top: 0;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	box-shadow: var(--lmsc-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
	color: var(--lmsc-text, #1a1a2e);
}

/* ---- Panel wrappers: no stray background ---- */
.lmsc-dash__panel {
	background: transparent !important;
}

.lmsc-dash__content {
	background: transparent;
}

/* ---- Stats row: proper spacing inside panels ---- */
.lmsc-quizzes-stats {
	margin-bottom: 20px;
}

.lmsc-stat-mini {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
}

/* ---- Empty states: readable text on light background ---- */
.lmsc-empty-state {
	background: var(--lmsc-surface, #fff);
	border-radius: var(--lmsc-radius, 12px);
	padding: 48px 24px;
	text-align: center;
}

.lmsc-empty-state h3 {
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-empty-state p {
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-empty-state__icon {
	opacity: 0.5;
	color: var(--lmsc-text-muted, #6b7280);
}

/* ---- Filter bar inside panels ---- */
.lmsc-tab-panel .lmsc-filter-bar {
	padding: 0 0 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
}

/* Panel pill overrides are handled by the primary definition now */
.lmsc-tab-panel .lmsc-pill {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.06);
	color: var(--lmsc-text, #1a1a2e);
	border: 1px solid rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.15);
}

.lmsc-tab-panel .lmsc-pill:hover {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.12);
	color: var(--lmsc-primary, #fb4365);
	border-color: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.4);
}

.lmsc-tab-panel .lmsc-pill--active {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #fb4365);
	box-shadow: 0 3px 12px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.3);
}

.lmsc-tab-panel .lmsc-pill--active:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #fb4365);
	box-shadow: 0 4px 16px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.4);
}

/* ---- Data table readability ---- */
.lmsc-data-table-wrap {
	background: var(--lmsc-surface, #fff);
	border-radius: var(--lmsc-radius, 12px);
	overflow: hidden;
}

/* ---- Card grid spacing fix ---- */
.lmsc-card-grid {
	gap: 16px;
}

.lmsc-card {
	background: var(--lmsc-surface, #fff);
}

/* ---- Pagination contrast ---- */
.lmsc-pagination {
	margin-top: 20px;
}

/* ---- Dark mode overrides ---- */
.lmsc-dash--dark .lmsc-tab-panel {
	background: var(--lmsc-surface, #1e293b);
	border-color: var(--lmsc-border, rgba(255, 255, 255, 0.1));
}

.lmsc-dash--dark .lmsc-empty-state {
	background: var(--lmsc-surface, #1e293b);
}

.lmsc-dash--dark .lmsc-empty-state h3 {
	color: var(--lmsc-text, #e2e8f0);
}

.lmsc-dash--dark .lmsc-empty-state p {
	color: var(--lmsc-text-muted, #94a3b8);
}

.lmsc-dash--dark .lmsc-stat-mini {
	background: var(--lmsc-surface, #1e293b);
	border-color: var(--lmsc-border, rgba(255, 255, 255, 0.1));
}

.lmsc-dash--dark .lmsc-tab-panel .lmsc-pill {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.12);
	border-color: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.2);
	color: var(--lmsc-text, #e2e8f0);
}

.lmsc-dash--dark .lmsc-tab-panel .lmsc-pill:hover {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.2);
	color: var(--lmsc-primary, #fb4365);
	border-color: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.4);
}

.lmsc-dash--dark .lmsc-tab-panel .lmsc-pill--active,
.lmsc-dash--dark .lmsc-tab-panel .lmsc-pill--active:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #fb4365);
}

.lmsc-dash--dark .lmsc-pill:hover {
	color: var(--lmsc-primary, #fb4365);
}

.lmsc-dash--dark .lmsc-pill--active:hover {
	color: #fff;
}

.lmsc-dash--dark .lmsc-tab-error {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.3);
	color: #fca5a5;
}

.lmsc-dash--dark .lmsc-tab-error__retry {
	color: #fca5a5;
	border-color: rgba(239, 68, 68, 0.4);
	background: rgba(239, 68, 68, 0.2);
}

/* ---- Mobile: tighter panel padding ---- */
@media (max-width: 768px) {
	.lmsc-tab-panel {
		padding: 16px;
	}
}

@media (max-width: 480px) {
	.lmsc-tab-panel {
		padding: 12px;
		border-radius: var(--lmsc-radius-sm, 8px);
	}
}

/* ==========================================================================
   Phase 2 - Chart.js Containers & Report Styles
   ========================================================================== */

/* ---- Chart row: 3-column grid ---- */
/* ---------- Reports Header ---------- */
.lmsc-reports-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.lmsc-reports-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lmsc-reports-header__actions > * {
	flex-shrink: 0;
}

.lmsc-reports-filters {
	display: flex;
	gap: 6px;
}

.lmsc-dash .lmsc-dash-btn--sm {
	padding: 6px 14px;
	font-size: 13px;
}

/* ---------- Reports Stat Cards ---------- */
.lmsc-reports-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 20px 0;
}

.lmsc-reports-stat-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--lmsc-surface);
	border-radius: var(--lmsc-radius);
	border: 1px solid var(--lmsc-border);
	padding: 18px 20px;
	box-shadow: var(--lmsc-shadow);
	transition: var(--lmsc-transition);
}

.lmsc-reports-stat-card:hover {
	box-shadow: var(--lmsc-shadow-lg);
	transform: translateY(-2px);
}

.lmsc-reports-stat-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-reports-stat-card__icon--blue {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
}

.lmsc-reports-stat-card__icon--green {
	background: rgba(16, 185, 129, 0.1);
	color: #10b981;
}

.lmsc-reports-stat-card__icon--purple {
	background: rgba(139, 92, 246, 0.1);
	color: #8b5cf6;
}

.lmsc-reports-stat-card__icon--gold {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
}

.lmsc-reports-stat-card__content {
	display: flex;
	flex-direction: column;
}

.lmsc-reports-stat-card__value {
	font-size: 22px;
	font-weight: 700;
	color: var(--lmsc-text);
	line-height: 1.2;
}

.lmsc-reports-stat-card__label {
	font-size: 12px;
	color: var(--lmsc-text-muted);
	font-weight: 500;
	margin-top: 2px;
}

/* ---------- Activity Heatmap ---------- */
.lmsc-heatmap {
	display: flex;
	gap: 3px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.lmsc-heatmap-week {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.lmsc-heatmap-cell {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: var(--lmsc-border);
	transition: background 0.15s ease;
}

.lmsc-heatmap-cell[data-level="0"] {
	background: var(--lmsc-border);
}

.lmsc-heatmap-cell[data-level="1"] {
	background: rgba(var(--lmsc-chart-accent-rgb, var(--lmsc-primary-rgb)), 0.25);
}

.lmsc-heatmap-cell[data-level="2"] {
	background: rgba(var(--lmsc-chart-accent-rgb, var(--lmsc-primary-rgb)), 0.5);
}

.lmsc-heatmap-cell[data-level="3"] {
	background: rgba(var(--lmsc-chart-accent-rgb, var(--lmsc-primary-rgb)), 0.75);
}

.lmsc-heatmap-cell[data-level="4"] {
	background: rgb(var(--lmsc-chart-accent-rgb, var(--lmsc-primary-rgb)));
}

.lmsc-heatmap-legend {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: flex-end;
	margin-top: 8px;
}

.lmsc-heatmap-legend .lmsc-heatmap-cell {
	cursor: default;
}

/* ---------- Responsive stat cards ---------- */
@media (max-width: 900px) {
	.lmsc-reports-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.lmsc-reports-stats {
		grid-template-columns: 1fr;
	}

	.lmsc-reports-header {
		flex-direction: column;
	}
}

.lmsc-chart-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 24px 0;
}

/* When chart-row has only 2 cards (e.g. Most Active / Least Active), use 2 columns */
.lmsc-chart-row:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
	grid-template-columns: repeat(2, 1fr);
}

/* ---- Chart card ---- */
.lmsc-chart-card {
	background: var(--lmsc-surface, #fff);
	border-radius: var(--lmsc-radius, 12px);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	padding: 20px;
	box-shadow: var(--lmsc-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lmsc-chart-card__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lmsc-text, #1a1a2e);
	margin: 0 0 16px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ---- Canvas wrapper - fixed aspect ratio ---- */
.lmsc-chart-card__canvas-wrap {
	position: relative;
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1 / 1;
}

.lmsc-chart-card__canvas-wrap canvas {
	width: 100% !important;
	height: 100% !important;
}

/* ---- Custom legend ---- */
.lmsc-chart-card__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 16px;
	font-size: 0.75rem;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-chart-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lmsc-chart-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.lmsc-chart-legend-label {
	white-space: nowrap;
}

/* ---- Quiz detail drawer ---- */
.lmsc-detail-drawer {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius, 12px);
	margin-top: 8px;
	padding: 16px;
	animation: lmscSlideDown 0.3s ease;
}

@keyframes lmscSlideDown {
	from {
		opacity: 0;
		max-height: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		max-height: 1000px;
		transform: translateY(0);
	}
}

.lmsc-detail-drawer__questions {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lmsc-detail-drawer__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.06));
	font-size: 0.875rem;
}

.lmsc-detail-drawer__question:last-child {
	border-bottom: none;
}

.lmsc-detail-drawer__q-text {
	flex: 1;
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-detail-drawer__q-result {
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 0.75rem;
}

.lmsc-detail-drawer__q-result--correct {
	background: rgba(34, 197, 94, 0.12);
	color: #16a34a;
}

.lmsc-detail-drawer__q-result--incorrect {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
}

/* ---- Quiz row clickable ---- */
.lmsc-quiz-row--expandable {
	cursor: pointer;
	transition: background 0.15s;
}

.lmsc-quiz-row--expandable:hover {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.04);
}

.lmsc-quiz-row__expand-icon {
	transition: transform 0.2s;
	display: inline-block;
}

.lmsc-quiz-row__expand-icon--open {
	transform: rotate(180deg);
}

/* ---- Essay detail drawer ---- */
.lmsc-essay-detail {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius, 12px);
	margin-top: 8px;
	padding: 20px;
	animation: lmscSlideDown 0.3s ease;
}

.lmsc-essay-detail__content {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--lmsc-text, #1a1a2e);
	margin-bottom: 16px;
	padding: 16px;
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.03);
	border-radius: 8px;
	border-left: 3px solid var(--lmsc-primary, #fb4365);
}

.lmsc-essay-detail__feedback {
	padding: 16px;
	background: rgba(34, 197, 94, 0.06);
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.lmsc-essay-detail__feedback h4 {
	margin: 0 0 8px;
	color: #16a34a;
	font-size: 0.875rem;
}

.lmsc-essay-detail__grade {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 12px;
}

/* ---- Assignment upload ---- */
.lmsc-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 8px;
	border: 1px dashed var(--lmsc-primary, #fb4365);
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.04);
	color: var(--lmsc-primary, #fb4365);
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 500;
	transition: all 0.2s;
}

.lmsc-upload-btn:hover {
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.1);
	border-style: solid;
}

/* ---- Dark mode chart overrides ---- */
.lmsc-dash--dark .lmsc-chart-card {
	background: var(--lmsc-surface, #1e293b);
	border-color: var(--lmsc-border, rgba(255, 255, 255, 0.1));
}

.lmsc-dash--dark .lmsc-chart-card__title {
	color: var(--lmsc-text, #e2e8f0);
}

.lmsc-dash--dark .lmsc-chart-card__legend {
	color: var(--lmsc-text-muted, #94a3b8);
}

.lmsc-dash--dark .lmsc-detail-drawer {
	background: var(--lmsc-surface, #1e293b);
	border-color: var(--lmsc-border, rgba(255, 255, 255, 0.1));
}

.lmsc-dash--dark .lmsc-detail-drawer__q-text {
	color: var(--lmsc-text, #e2e8f0);
}

.lmsc-dash--dark .lmsc-essay-detail {
	background: var(--lmsc-surface, #1e293b);
	border-color: var(--lmsc-border, rgba(255, 255, 255, 0.1));
}

.lmsc-dash--dark .lmsc-essay-detail__content {
	color: var(--lmsc-text, #e2e8f0);
}

/* ---- Inline chart row (inside tabs, single chart) ---- */
.lmsc-chart-row--inline {
	grid-template-columns: 1fr;
	max-width: 300px;
	margin: 16px auto;
}

.lmsc-chart-card--sm {
	padding: 16px;
}

.lmsc-chart-card--sm .lmsc-chart-card__canvas-wrap {
	max-width: 160px;
}

/* --- Wide chart card (bar chart) --- */
.lmsc-chart-card--wide {
	grid-column: 1 / -1;
	align-items: stretch;
}

/* Personal report sections use the desktop canvas instead of stacking two
   compact data views inside separate full-width cards. */
.lmsc-personal-report-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: 18px;
	margin-top: 20px;
}

.lmsc-personal-report-grid > .lmsc-chart-card--wide {
	grid-column: auto;
	width: auto;
	min-width: 0;
	margin: 0;
}

.lmsc-personal-report-grid #lmsc-reports-heatmap .lmsc-heatmap {
	justify-content: center;
}

.lmsc-report-table-viewport {
	width: 100%;
	max-height: 520px;
	overflow: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius-sm, 10px);
}

.lmsc-report-table-viewport table {
	margin: 0;
}

.lmsc-report-table-viewport thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--lmsc-surface, #fff);
	box-shadow: 0 1px 0 var(--lmsc-border, #e5e7eb);
}

@media (min-width: 1101px) {
	#lmsc-course-activity-timeline .lmsc-activity-timeline__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 14px;
	}

	#lmsc-course-activity-timeline .lmsc-activity-timeline__list > li {
		padding: 12px;
		border: 1px solid var(--lmsc-border, #e5e7eb);
		border-radius: var(--lmsc-radius-sm, 10px);
		background: var(--lmsc-bg, #f8fafc);
	}

	#lmsc-course-activity-timeline .lmsc-activity-timeline__list > li::before {
		display: none;
	}
}

@media (max-width: 980px) {
	.lmsc-personal-report-grid {
		grid-template-columns: 1fr;
	}
}

.lmsc-chart-card__canvas-wrap--bar {
	max-width: 100%;
	max-height: 280px;
	height: 280px;
	aspect-ratio: auto;
}

/* --- Reports header --- */
.lmsc-reports-header {
	margin-bottom: 24px;
}

.lmsc-reports-header h2 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.lmsc-reports-header .lmsc-text-muted {
	color: var(--lmsc-text-muted, #6b7280);
	font-size: 0.92rem;
	margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.lmsc-chart-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.lmsc-chart-row {
		grid-template-columns: 1fr;
	}

	/* Match the higher-specificity two-card rule above so phone report charts
	   cannot remain squeezed into two narrow columns. */
	.lmsc-chart-row:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
		grid-template-columns: 1fr;
	}

	.lmsc-chart-card {
		padding: 16px;
	}
}

/* ==========================================================================
   V1.1 - UX Polish Additions
   ========================================================================== */

/* ---------- Toast Notification System ---------- */
.lmsc-toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 10000;
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	pointer-events: none;
}

.lmsc-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: #fff;
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
	pointer-events: auto;
	animation: lmscToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	max-width: 380px;
	min-width: 260px;
}

.lmsc-toast--removing {
	animation: lmscToastOut 0.3s ease forwards;
}

.lmsc-toast--success {
	background: linear-gradient(135deg, #059669, #10b981);
}

.lmsc-toast--error {
	background: linear-gradient(135deg, #dc2626, #ef4444);
}

.lmsc-toast--info {
	background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.lmsc-toast--warning {
	background: linear-gradient(135deg, #d97706, #f59e0b);
}

.lmsc-toast__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.lmsc-toast__message {
	flex: 1;
	line-height: 1.4;
}

.lmsc-toast__close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 2px;
	font-size: 18px;
	line-height: 1;
	transition: color 0.2s;
}

.lmsc-toast__close:hover {
	color: #fff;
}

@keyframes lmscToastIn {
	from {
		opacity: 0;
		transform: translateX(40px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes lmscToastOut {
	to {
		opacity: 0;
		transform: translateX(40px) scale(0.95);
	}
}

/* ---------- Enhanced Empty States ---------- */
.lmsc-dash__empty-state {
	text-align: center;
	padding: 56px 24px;
}

.lmsc-dash__empty-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background: rgba(var(--lmsc-primary-rgb), 0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-dash__empty-icon svg {
	width: 40px;
	height: 40px;
	color: var(--lmsc-primary);
	opacity: 0.7;
}

.lmsc-dash__empty-state h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--lmsc-text);
}

.lmsc-dash__empty-state p {
	font-size: 14px;
	color: var(--lmsc-text-muted);
	max-width: 320px;
	margin: 0 auto;
	line-height: 1.6;
}

.lmsc-dash__empty-state .lmsc-dash-btn {
	margin-top: 20px;
}

/* ---------- Mobile Hamburger Toggle ---------- */
.lmsc-dash__mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--lmsc-surface);
	border: 1px solid var(--lmsc-border);
	cursor: pointer;
	z-index: 1001;
	transition: var(--lmsc-transition);
	flex-shrink: 0;
}

.lmsc-dash__mobile-toggle svg {
	width: 20px;
	height: 20px;
	color: var(--lmsc-text);
}

.lmsc-dash__mobile-toggle:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.08);
}

.lmsc-dash__sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	z-index: 999;
}

.lmsc-dash__sidebar-overlay.is-open {
	display: block;
}

@media (max-width: 768px) {

	/* Hide hamburger toggle - bottom tabs handle mobile navigation */
	.lmsc-dash__mobile-toggle {
		display: none !important;
	}

	.lmsc-dash__sidebar {
		height: 100vh;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		transform: translateX(-100%);
		display: none !important;
	}

	.lmsc-dash__sidebar.is-open {
		transform: translateX(0);
		display: none !important;
	}

	/* Also hide the overlay */
	.lmsc-dash__sidebar-overlay,
	.lmsc-dash__sidebar-overlay.is-open {
		display: none !important;
	}
}

/* ---------- Small phone (≤480px, incl. 390px iPhones) Fixes ----------
   Raised from 375px in 2.3.9.3: at 376-480px the welcome banner kept its
   nowrap row layout inside an overflow:hidden container, clipping ~48px of
   content on 390px screens. Stack it and let header content reflow instead. */
@media (max-width: 480px) {
	.lmsc-dash__main {
		padding: 12px;
	}

	.lmsc-dash__header {
		gap: 8px;
	}

	.lmsc-dash__header-right {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.lmsc-dash__welcome-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}

	.lmsc-dash__welcome-left {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.lmsc-dash__welcome-text h2 {
		font-size: 18px;
	}

	.lmsc-dash__stats-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.lmsc-dash__stat-card {
		padding: 14px;
	}

	.lmsc-dash__cert-cards {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__cert-card-footer {
		flex-direction: column;
		gap: 8px;
	}

	.lmsc-toast-container {
		left: 12px;
		right: 12px;
		bottom: 12px;
	}

	.lmsc-toast {
		max-width: 100%;
		min-width: 0;
	}

	.lmsc-dash__notification-dropdown {
		width: calc(100vw - 24px);
		right: -40px;
	}
}

/* ---------- Learning Streak Badge ---------- */
.lmsc-dash__streak-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: linear-gradient(135deg, #f59e0b, #ef4444);
	color: #fff;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	animation: lmscPulseGlow 2s ease-in-out infinite;
}

.lmsc-dash__streak-badge .streak-fire {
	font-size: 16px;
}

/* ---------- Command Palette (Ctrl+K) ---------- */
.lmsc-cmdpalette-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	z-index: 10001;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20vh;
	animation: lmscFadeIn 0.15s ease;
}

.lmsc-cmdpalette {
	background: var(--lmsc-surface, #fff);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
	width: 520px;
	max-width: calc(100vw - 32px);
	max-height: 420px;
	overflow: hidden;
	animation: lmscSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lmsc-cmdpalette__input-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
}

.lmsc-cmdpalette__input-wrap svg {
	width: 20px;
	height: 20px;
	color: var(--lmsc-text-muted, #6b7280);
	flex-shrink: 0;
}

.lmsc-cmdpalette__input {
	flex: 1;
	border: none;
	outline: none;
	background: none;
	font-size: 16px;
	color: var(--lmsc-text, #1e293b);
	font-family: inherit;
}

.lmsc-cmdpalette__input::placeholder {
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-cmdpalette__kbd {
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--lmsc-bg, #f1f5f9);
	color: var(--lmsc-text-muted, #6b7280);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	font-family: inherit;
}

.lmsc-cmdpalette__results {
	overflow-y: auto;
	max-height: 340px;
	padding: 8px;
}

.lmsc-cmdpalette__group-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted, #6b7280);
	padding: 8px 12px 4px;
}

.lmsc-cmdpalette__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	color: var(--lmsc-text, #1e293b);
	font-size: 14px;
	transition: background 0.15s;
}

.lmsc-cmdpalette__item:hover,
.lmsc-cmdpalette__item--active {
	background: rgba(var(--lmsc-primary-rgb, 0, 122, 255), 0.08);
}

.lmsc-cmdpalette__item-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(var(--lmsc-primary-rgb, 0, 122, 255), 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-cmdpalette__item-icon svg {
	width: 16px;
	height: 16px;
	color: var(--lmsc-primary, #007AFF);
}

.lmsc-cmdpalette__item-text {
	flex: 1;
}

.lmsc-cmdpalette__item-label {
	font-weight: 500;
}

.lmsc-cmdpalette__item-desc {
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
}

@keyframes lmscSlideDown {
	from {
		opacity: 0;
		transform: translateY(-16px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ---------- Confetti ---------- */
.lmsc-confetti-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10002;
	overflow: hidden;
}

.lmsc-confetti-piece {
	position: absolute;
	width: 10px;
	height: 10px;
	top: -20px;
	animation: lmscConfettiFall 3s ease-in forwards;
}

.lmsc-confetti-piece:nth-child(odd) {
	border-radius: 50%;
}

.lmsc-confetti-piece:nth-child(even) {
	border-radius: 2px;
}

@keyframes lmscConfettiFall {
	0% {
		opacity: 1;
		transform: translateY(0) rotate(0deg) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(100vh) rotate(720deg) scale(0.5);
	}
}

/* ---------- Certificate Print Button ---------- */
.lmsc-dash__cert-btn--print {
	background: rgba(var(--lmsc-primary-rgb), 0.08);
	color: var(--lmsc-primary);
	border: none;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: var(--lmsc-radius-sm, 8px);
	font-size: 13px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: var(--lmsc-transition);
}

.lmsc-dash__cert-btn--print:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.15);
}

/* ---------- Print Stylesheet ---------- */
@media print {

	.lmsc-dash__sidebar,
	.lmsc-dash__header,
	.lmsc-dash__topnav,
	.lmsc-dash__mobile-toggle,
	.lmsc-dash__sidebar-overlay,
	.lmsc-toast-container,
	.lmsc-cmdpalette-overlay,
	.lmsc-confetti-container,
	.lmsc-dash__search,
	.lmsc-dash__layout-switcher,
	.lmsc-dash__notification-wrap,
	.lmsc-ticker,
	.lmsc-dash__cert-btn--share,
	.lmsc-dash__cert-share-wrap,
	.lmsc-dash__cert-btn--download,
	.lmsc-dash__cert-btn--print {
		display: none !important;
	}

	.lmsc-dash {
		display: block !important;
	}

	.lmsc-dash__main {
		padding: 0 !important;
	}

	.lmsc-dash__panel {
		display: block !important;
		animation: none !important;
	}

	.lmsc-dash__cert-card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.lmsc-dash__cert-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   Schedule / Calendar Tab
   ========================================================================== */

.lmsc-dash__schedule-tab {
	padding: 0;
}

/* --- Header: Nav + View Toggle --- */
.lmsc-schedule-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 0;
	gap: 16px;
	flex-wrap: wrap;
}

.lmsc-schedule-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lmsc-schedule-nav__btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #1a1a2e);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.lmsc-schedule-nav__btn:hover {
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08);
	border-color: var(--lmsc-primary, #3b82f6);
	color: var(--lmsc-primary, #3b82f6);
	transform: scale(1.05);
}

.lmsc-schedule-nav__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--lmsc-text, #1a1a2e);
	margin: 0;
	min-width: 160px;
	text-align: center;
	letter-spacing: -0.3px;
}

.lmsc-schedule-view-toggle {
	display: flex;
	gap: 4px;
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.06);
	padding: 3px;
	border-radius: 10px;
}

.lmsc-schedule-view-toggle .lmsc-pill {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	border: none;
	background: transparent;
	color: var(--lmsc-text-muted, #6b7280);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lmsc-schedule-view-toggle .lmsc-pill--active {
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-primary, #3b82f6);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* --- Stat Pills --- */
.lmsc-schedule-stats {
	display: flex;
	gap: 8px;
	padding: 16px 24px 0;
	flex-wrap: wrap;
}

.lmsc-schedule-stats:empty {
	display: none;
}

.lmsc-schedule-stat-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 24px;
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	font-size: 12px;
	transition: all 0.2s ease;
}

.lmsc-schedule-stat-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.lmsc-schedule-stat-pill__value {
	font-weight: 800;
	font-size: 14px;
}

.lmsc-schedule-stat-pill__label {
	color: var(--lmsc-text-muted, #6b7280);
	font-weight: 500;
}

/* --- Calendar Grid --- */
.lmsc-schedule-calendar {
	padding: 16px 24px 24px;
}

.lmsc-schedule-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}

.lmsc-schedule-calendar__weekdays span {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--lmsc-text-muted, #6b7280);
	padding: 8px 0;
	letter-spacing: 0.5px;
}

.lmsc-schedule-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--lmsc-radius-sm, 8px);
	overflow: hidden;
}

/* --- Day Cells --- */
.lmsc-cal-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.2s ease;
	cursor: default;
	min-height: 48px;
	border-right: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.06));
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.06));
}

.lmsc-cal-day:nth-child(7n) {
	border-right: none;
}

.lmsc-schedule-calendar__grid .lmsc-cal-day:nth-last-child(-n+7) {
	border-bottom: none;
}

.lmsc-cal-day--empty {
	background: transparent;
}

.lmsc-cal-day__num {
	font-size: 14px;
	font-weight: 500;
	color: var(--lmsc-text, #1a1a2e);
	line-height: 1;
}

/* Today - glowing ring */
.lmsc-cal-day--today {
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08);
	box-shadow: inset 0 0 0 2px var(--lmsc-primary, #3b82f6);
}

.lmsc-cal-day--today .lmsc-cal-day__num {
	color: var(--lmsc-primary, #3b82f6);
	font-weight: 800;
}

/* Has events - subtle indicator bg */
.lmsc-cal-day--has-events {
	cursor: pointer;
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.03);
}

.lmsc-cal-day--has-events:hover {
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.10);
	transform: scale(1.05);
	z-index: 2;
}

/* Selected day */
.lmsc-cal-day--selected {
	background: var(--lmsc-primary, #3b82f6) !important;
	box-shadow: 0 4px 12px rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.35);
}

.lmsc-cal-day--selected .lmsc-cal-day__num {
	color: #fff !important;
	font-weight: 700;
}

.lmsc-cal-day--selected .lmsc-cal-dot {
	background: rgba(255, 255, 255, 0.7) !important;
}

/* --- Event Dot Indicators --- */
.lmsc-cal-day__dots {
	display: flex;
	gap: 3px;
	margin-top: 4px;
}

.lmsc-cal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

.lmsc-cal-dot--lesson {
	background: #3b82f6;
}

.lmsc-cal-dot--quiz {
	background: #f59e0b;
}

.lmsc-cal-dot--assignment {
	background: #10b981;
}

.lmsc-cal-dot--enrollment {
	background: #8b5cf6;
}

.lmsc-cal-day--has-events:hover .lmsc-cal-dot {
	transform: scale(1.4);
}

/* --- Day Events Panel --- */
.lmsc-schedule-day-events {
	padding: 0 24px 24px;
	animation: lmscFadeSlideUp 0.3s ease;
}

@keyframes lmscFadeSlideUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lmsc-schedule-day-events__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--lmsc-text, #1a1a2e);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
}

/* --- Side-by-Side Schedule Layout --- */
.lmsc-schedule-body {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.lmsc-schedule-body__calendar {
	flex: 1;
	min-width: 0;
}

.lmsc-schedule-body__sidebar {
	width: 280px;
	min-width: 280px;
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius-sm, 10px);
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	animation: lmscFadeSlideUp 0.3s ease;
}

.lmsc-schedule-sidebar__header {
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
}

.lmsc-schedule-sidebar__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--lmsc-text, #1a1a2e);
	margin: 0;
}

.lmsc-schedule-sidebar__content {
	padding: 12px;
}

.lmsc-schedule-sidebar__empty {
	text-align: center;
	padding: 32px 16px;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-schedule-sidebar__empty p {
	font-size: 13px;
	margin: 8px 0 0;
	line-height: 1.5;
}

/* Sidebar event cards - compact for 25% width */
.lmsc-schedule-sidebar__content .lmsc-event-card {
	padding: 8px 10px;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__icon {
	width: 28px;
	height: 28px;
	border-radius: 6px;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__icon svg {
	width: 14px;
	height: 14px;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__body {
	flex: 1;
	min-width: 0;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__top {
	gap: 4px;
	margin-bottom: 2px;
	flex-wrap: wrap;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__top .lmsc-event-badge {
	font-size: 8px;
	padding: 1px 5px;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__top .lmsc-event-status {
	font-size: 8px;
	padding: 1px 5px;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__title {
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-schedule-sidebar__content .lmsc-event-card__course {
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hide the time + ics button in sidebar - redundant in compact view */
.lmsc-schedule-sidebar__content .lmsc-event-card__right {
	display: none;
}

/* Enhanced calendar day cell: show event count badge + type mini-labels */
.lmsc-cal-day__count {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--lmsc-primary, #3b82f6);
	color: var(--lmsc-on-primary, #fff);
	font-size: 9px;
	font-weight: 700;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.lmsc-cal-day--selected .lmsc-cal-day__count {
	background: rgba(255, 255, 255, 0.3);
}

/* Type mini-labels inside calendar cells */
.lmsc-cal-day__types {
	display: flex;
	gap: 2px;
	margin-top: 3px;
	flex-wrap: wrap;
	justify-content: center;
}

.lmsc-cal-type-label {
	font-size: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	padding: 1px 4px;
	border-radius: 3px;
	line-height: 1.3;
}

.lmsc-cal-type-label--lesson {
	background: rgba(59, 130, 246, 0.12);
	color: #3b82f6;
}

.lmsc-cal-type-label--quiz {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}

.lmsc-cal-type-label--assignment {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.lmsc-cal-type-label--enrollment {
	background: rgba(139, 92, 246, 0.12);
	color: #7c3aed;
}

.lmsc-cal-day--selected .lmsc-cal-type-label {
	background: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.9);
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
	.lmsc-schedule-body {
		flex-direction: column;
	}

	.lmsc-schedule-body__sidebar {
		width: 100%;
		min-width: 0;
		position: static;
		max-height: none;
	}
}

/* --- Instructor Tab Sub-Tab Text Fix --- */
.lmsc-instructor__editor-tabs .lmsc-pill,
.lmsc-instructor__tabs .lmsc-pill,
.lmsc-dash__panel[data-panel="instructor"] .lmsc-pill,
.lmsc-dash__panel[data-panel="reports"] .lmsc-pill {
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-dash__panel[data-panel="instructor"] .lmsc-pill--active,
.lmsc-dash__panel[data-panel="reports"] .lmsc-pill--active {
	color: #fff;
}

/* --- Event Cards --- */
.lmsc-event-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 8px;
	border-radius: var(--lmsc-radius-sm, 10px);
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	text-decoration: none;
	color: inherit;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lmsc-event-card:hover {
	border-color: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.3);
	box-shadow: 0 4px 16px rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.10);
	transform: translateY(-2px);
}

.lmsc-event-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-event-card__icon--lesson {
	background: rgba(59, 130, 246, 0.10);
	color: #3b82f6;
}

.lmsc-event-card__icon--quiz {
	background: rgba(245, 158, 11, 0.10);
	color: #f59e0b;
}

.lmsc-event-card__icon--assignment {
	background: rgba(16, 185, 129, 0.10);
	color: #10b981;
}

.lmsc-event-card__icon--enrollment {
	background: rgba(139, 92, 246, 0.10);
	color: #8b5cf6;
}

.lmsc-event-card__body {
	flex: 1;
	min-width: 0;
}

.lmsc-event-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.lmsc-event-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text, #1a1a2e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-event-card__course {
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-event-card__time {
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

/* --- Event Badges --- */
.lmsc-event-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.lmsc-event-badge--lesson {
	background: rgba(59, 130, 246, 0.10);
	color: #3b82f6;
}

.lmsc-event-badge--quiz {
	background: rgba(245, 158, 11, 0.10);
	color: #f59e0b;
}

.lmsc-event-badge--assignment {
	background: rgba(16, 185, 129, 0.10);
	color: #10b981;
}

.lmsc-event-badge--enrollment {
	background: rgba(139, 92, 246, 0.10);
	color: #8b5cf6;
}

/* --- Status Badges --- */
.lmsc-event-status {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 12px;
	white-space: nowrap;
}

.lmsc-event-status--upcoming {
	background: rgba(59, 130, 246, 0.08);
	color: #3b82f6;
}

.lmsc-event-status--available {
	background: rgba(16, 185, 129, 0.08);
	color: #10b981;
}

.lmsc-event-status--completed {
	background: rgba(107, 114, 128, 0.08);
	color: #6b7280;
}

.lmsc-event-status--pending {
	background: rgba(245, 158, 11, 0.08);
	color: #f59e0b;
}

.lmsc-event-status--overdue {
	background: rgba(239, 68, 68, 0.08);
	color: #ef4444;
}

/* --- List View --- */
.lmsc-schedule-list {
	padding: 0 24px 24px;
}

.lmsc-schedule-date-group {
	margin-bottom: 20px;
}

.lmsc-schedule-date-group__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--lmsc-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--lmsc-border, #e5e7eb);
}

/* --- Schedule Responsive --- */
@media (max-width: 768px) {
	.lmsc-schedule-header {
		padding: 16px 16px 0;
		flex-direction: column;
		align-items: stretch;
	}

	.lmsc-schedule-nav {
		justify-content: center;
	}

	.lmsc-schedule-view-toggle {
		justify-content: center;
	}

	.lmsc-schedule-stats {
		padding: 12px 16px 0;
		justify-content: center;
	}

	.lmsc-schedule-calendar {
		padding: 12px 8px 16px;
	}

	.lmsc-cal-day {
		min-height: 40px;
		border-radius: 8px;
	}

	.lmsc-cal-day__num {
		font-size: 12px;
	}

	.lmsc-schedule-day-events,
	.lmsc-schedule-list {
		padding: 0 16px 16px;
	}

	.lmsc-event-card {
		gap: 10px;
		padding: 12px;
	}

	.lmsc-event-card__icon {
		width: 34px;
		height: 34px;
		border-radius: 8px;
	}

	.lmsc-event-card__title {
		font-size: 13px;
	}
}

/* ================================================================
   Group Leader Dashboard
   ================================================================ */

.lmsc-gl-header {
	margin-bottom: 20px;
}

.lmsc-gl-group-selector {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-gl-group-selector label {
	font-weight: 600;
	white-space: nowrap;
	color: var(--lmsc-text);
}

.lmsc-gl-group-selector select {
	flex: 1;
	max-width: 400px;
	padding: 8px 12px;
	border-radius: var(--lmsc-radius, 8px);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text);
	font-size: 14px;
}

/* Stats Cards */
.lmsc-gl-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.lmsc-gl-stat-card {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius, 12px);
	padding: 20px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: var(--lmsc-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.lmsc-gl-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.lmsc-gl-stat-icon {
	margin-bottom: 8px;
	color: var(--lmsc-primary, #007AFF);
	display: flex;
	justify-content: center;
}

.lmsc-gl-stat-icon svg {
	width: 28px;
	height: 28px;
}

.lmsc-gl-stat-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--lmsc-primary, #333aff);
	line-height: 1.2;
}

.lmsc-gl-stat-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted, #6b7280);
	margin-top: 4px;
}

/* Sub-tabs */
.lmsc-gl-subtabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

/* Members Table */
.lmsc-gl-members-table-wrap {
	overflow-x: auto;
}

.lmsc-gl-table {
	width: 100%;
	border-collapse: collapse;
}

.lmsc-gl-table th {
	padding: 10px 14px;
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted, #6b7280);
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
}

.lmsc-gl-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--lmsc-border, #f3f4f6);
	font-size: 14px;
	color: var(--lmsc-text);
	vertical-align: middle;
}

.lmsc-gl-table tr:hover td {
	background: var(--lmsc-hover-bg, rgba(0, 0, 0, 0.02));
}

.lmsc-gl-member-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lmsc-gl-member-avatar {
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.lmsc-gl-member-cell small {
	color: var(--lmsc-text-muted, #6b7280);
	display: block;
	font-size: 12px;
}

/* Progress Bars */
.lmsc-gl-progress-bar {
	position: relative;
	height: 20px;
	background: var(--lmsc-border, #e5e7eb);
	border-radius: 10px;
	overflow: hidden;
	min-width: 100px;
}

.lmsc-gl-progress-bar--lg {
	height: 24px;
	border-radius: 12px;
}

.lmsc-gl-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--lmsc-accent, #7c5cfc), var(--lmsc-accent-hover, #6a4bea));
	border-radius: inherit;
	transition: width 0.6s ease;
}

.lmsc-gl-progress-bar span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Course Progress Grid */
.lmsc-gl-course-progress-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.lmsc-gl-course-card {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
}

.lmsc-gl-course-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text);
}

.lmsc-gl-course-meta {
	display: flex;
	gap: 16px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
}

/* Grading Cards */
.lmsc-gl-grading-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.lmsc-pill__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--lmsc-accent, #7c5cfc);
	color: var(--lmsc-on-accent, #fff);
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
}

.lmsc-gl-grading-card {
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
	margin-bottom: 12px;
}

.lmsc-gl-grading-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.lmsc-gl-grading-header div {
	flex: 1;
}

.lmsc-gl-grading-header strong {
	display: block;
	font-size: 14px;
	color: var(--lmsc-text);
}

.lmsc-gl-grading-header small {
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-gl-grading-header time {
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-gl-grading-avatar {
	border-radius: 50%;
	object-fit: cover;
}

.lmsc-gl-grading-title {
	font-size: 14px;
	color: var(--lmsc-text);
	margin: 0 0 8px;
}

.lmsc-gl-grading-preview {
	font-size: 13px;
	color: var(--lmsc-text-muted, #6b7280);
	margin: 0 0 10px;
	line-height: 1.5;
}

.lmsc-gl-file-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--lmsc-accent, #7c5cfc);
	text-decoration: none;
	margin-bottom: 10px;
}

.lmsc-gl-file-link:hover {
	text-decoration: underline;
}

.lmsc-gl-grading-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.lmsc-btn--success {
	background: #22c55e;
	color: #fff;
	border: none;
}

.lmsc-btn--success:hover {
	background: #16a34a;
}

.lmsc-btn--danger {
	background: #ef4444;
	color: #fff;
	border: none;
}

.lmsc-btn--danger:hover {
	background: #dc2626;
}

.lmsc-gl-points-badge {
	font-size: 12px;
	color: var(--lmsc-text-muted, #6b7280);
	background: rgba(var(--lmsc-primary-rgb, 51, 58, 255), 0.08);
	padding: 4px 10px;
	border-radius: 12px;
}

.lmsc-gl-empty-grading {
	text-align: center;
	padding: 40px 20px;
	color: var(--lmsc-text-muted, #6b7280);
	font-size: 16px;
}

.lmsc-gl-empty {
	text-align: center;
	color: var(--lmsc-text-muted, #6b7280);
	padding: 20px;
}

/* Essay Grading Modal */
.lmsc-gl-essay-modal-content {
	max-width: 600px;
}

.lmsc-gl-essay-student {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--lmsc-border, rgba(255, 255, 255, 0.1));
}

.lmsc-gl-essay-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.lmsc-gl-essay-student-name {
	display: block;
	font-size: 15px;
	color: var(--lmsc-text);
}

.lmsc-gl-essay-meta {
	font-size: 12px;
	color: var(--lmsc-text-muted, rgba(255, 255, 255, 0.5));
}

.lmsc-gl-essay-content-preview {
	max-height: 200px;
	overflow-y: auto;
	padding: 12px;
	background: var(--lmsc-border, rgba(255, 255, 255, 0.05));
	border-radius: var(--lmsc-radius, 8px);
	font-size: 14px;
	line-height: 1.6;
	color: var(--lmsc-text);
	margin-bottom: 16px;
}

.lmsc-gl-grade-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lmsc-gl-grade-points {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-gl-grade-points label {
	font-weight: 600;
	color: var(--lmsc-text);
}

.lmsc-gl-grade-points .lmsc-input {
	width: 80px;
}

.lmsc-gl-grade-max {
	font-size: 14px;
	color: var(--lmsc-text-muted, rgba(255, 255, 255, 0.5));
}

.lmsc-gl-grade-feedback label {
	display: block;
	font-weight: 600;
	color: var(--lmsc-text);
	margin-bottom: 6px;
}

.lmsc-gl-grade-actions {
	display: flex;
	gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
	.lmsc-gl-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.lmsc-gl-course-progress-grid {
		grid-template-columns: 1fr;
	}

	.lmsc-gl-group-selector {
		flex-direction: column;
		align-items: stretch;
	}

	.lmsc-gl-group-selector select {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.lmsc-gl-stats {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.lmsc-gl-stat-card {
		padding: 14px;
	}

	.lmsc-gl-stat-value {
		font-size: 22px;
	}

	.lmsc-gl-grading-actions {
		flex-direction: column;
	}
}

/* ===== Course Search (#7) ===== */
.lmsc-dash__search-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--lmsc-bg-secondary, #f4f5f7);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	padding: 6px 12px;
	transition: border-color .2s, box-shadow .2s;
}

.lmsc-dash__search-wrap:focus-within {
	border-color: var(--lmsc-primary, #007AFF);
	box-shadow: 0 0 0 3px rgba(0, 122, 255, .12);
}

.lmsc-dash__search-wrap svg {
	color: var(--lmsc-text-muted, #94a3b8);
	flex-shrink: 0;
}

.lmsc-dash__search-wrap .lmsc-dash__search-input {
	border: none;
	background: transparent;
	font-size: 14px;
	line-height: 1.4;
	outline: none;
	width: 180px;
	min-width: 0;
	padding: 8px 0;
	color: var(--lmsc-text, #1e293b);
	cursor: text;
}

.lmsc-dash__search-wrap .lmsc-dash__search-input::placeholder {
	color: var(--lmsc-text-muted, #94a3b8);
}

/* ===== Course Gradient Thumbnail (#12) ===== */
.lmsc-dash__course-initial {
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.lmsc-dash__course-thumbnail-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 140px;
	border-radius: 8px 8px 0 0;
}

/* ===== Course Last Accessed Date (#9) ===== */
.lmsc-dash__course-accessed {
	font-size: 11px;
	color: var(--lmsc-text-muted, #94a3b8);
	margin-left: auto;
}

/* ===== Quizzes Toolbar (#13, #14) ===== */
.lmsc-quizzes-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.lmsc-quizzes-filters {
	display: flex;
	gap: 6px;
}

.lmsc-quizzes-sort {
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	background: var(--lmsc-bg, #fff);
	color: var(--lmsc-text, #1e293b);
	cursor: pointer;
}

/* ===== Password Strength Meter (#27) ===== */
.lmsc-password-strength {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

.lmsc-password-strength__bar {
	flex: 1;
	height: 6px;
	background: var(--lmsc-bg-secondary, #e2e8f0);
	border-radius: 3px;
	overflow: hidden;
}

.lmsc-password-strength__fill {
	height: 100%;
	border-radius: 3px;
	transition: width .3s ease, background .3s ease;
}

.lmsc-password-strength__label {
	font-size: 12px;
	font-weight: 600;
	min-width: 70px;
	transition: color .3s;
}

/* ===== Schedule Today Button (#39) ===== */
.lmsc-schedule-today-btn {
	margin-left: 8px;
	font-size: 12px;
	padding: 4px 12px;
}

/* ===== Assignment Feedback (#22) ===== */
.lmsc-card__feedback {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0;
	padding: 8px 12px;
	background: var(--lmsc-bg-secondary, #f4f5f7);
	border-left: 3px solid var(--lmsc-info, #3b82f6);
	border-radius: 0 6px 6px 0;
	font-size: 13px;
	color: var(--lmsc-text-muted, #64748b);
	line-height: 1.5;
}

.lmsc-card__feedback svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--lmsc-info, #3b82f6);
}

/* ===== Essay Word Count Badge (#24) ===== */
.lmsc-essay-wc {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	padding: 2px 8px;
}

.lmsc-badge--neutral {
	background: var(--lmsc-bg-secondary, #f1f5f9);
	color: var(--lmsc-text-muted, #64748b);
}

/* ===== Color-Coded Schedule Events (#41) ===== */
.lmsc-event-card--type-lesson {
	border-left: 3px solid #3b82f6;
}

.lmsc-event-card--type-quiz {
	border-left: 3px solid #8b5cf6;
}

.lmsc-event-card--type-assignment {
	border-left: 3px solid #f59e0b;
}

.lmsc-event-card--type-drip {
	border-left: 3px solid #06b6d4;
}

.lmsc-event-card--type-meeting,
.lmsc-event-card--type-zoom {
	border-left: 3px solid #ef4444;
}

.lmsc-event-card--type-course {
	border-left: 3px solid #22c55e;
}

/* ===== Add to Calendar Button (#38) ===== */
.lmsc-event-card__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex-shrink: 0;
}

.lmsc-event-card__ics-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 6px;
	background: var(--lmsc-bg, #fff);
	color: var(--lmsc-text-muted, #94a3b8);
	cursor: pointer;
	transition: all .2s;
}

.lmsc-event-card__ics-btn:hover {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #007AFF);
}

/* ===== Responsive Stat Cards (#5) ===== */
@media (max-width: 768px) {

	.lmsc-dash__stats-row,
	.lmsc-reports-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {

	.lmsc-dash__stats-row,
	.lmsc-reports-stats {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.lmsc-dash__stat-card,
	.lmsc-reports-stat-card {
		padding: 12px;
	}

	.lmsc-dash__stat-value,
	.lmsc-reports-stat-card__value {
		font-size: 20px;
	}
}

/* ===== Print Stylesheet (#63) ===== */
@media print {

	.lmsc-dash__sidebar,
	.lmsc-dash__header-actions,
	.lmsc-dash__toolbar,
	.lmsc-dash__pagination,
	.lmsc-dash__form-actions,
	.lmsc-dash-btn,
	.lmsc-dash__command-palette,
	.lmsc-event-card__ics-btn,
	.lmsc-dash__profile-avatar-overlay,
	.lmsc-dash__profile-logout,
	.lmsc-schedule-view-toggle,
	.lmsc-schedule-nav__btn,
	.lmsc-schedule-today-btn,
	.lmsc-reports-filters,
	[data-share-toggle],
	.lmsc-dash__cert-share-wrap,
	.lmsc-toast {
		display: none !important;
	}

	.lmsc-dash__main {
		margin-left: 0 !important;
		padding: 0 !important;
	}

	.lmsc-dash {
		box-shadow: none !important;
		border: none !important;
	}

	.lmsc-dash__tab-content {
		padding: 0 !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	* {
		box-shadow: none !important;
	}

	.lmsc-card,
	.lmsc-chart-card,
	.lmsc-dash__stat-card,
	.lmsc-reports-stat-card {
		break-inside: avoid;
	}

	a[href]:after {
		content: none !important;
	}

	/* Scoped print: only show reports tab content */
	body.lmsc-printing-report .lmsc-dash__sidebar,
	body.lmsc-printing-report .lmsc-dash__topbar,
	body.lmsc-printing-report .lmsc-dash__topnav,
	body.lmsc-printing-report .lmsc-filter-bar,
	body.lmsc-printing-report .lmsc-tab-panel:not([data-tab="reports"]),
	body.lmsc-printing-report .lmsc-dash__header-actions,
	body.lmsc-printing-report .lmsc-reports-filters,
	body.lmsc-printing-report .lmsc-dash-btn,
	body.lmsc-printing-report #wpadminbar,
	body.lmsc-printing-report .lmsc-dash__tab-nav {
		display: none !important;
	}

	body.lmsc-printing-report .lmsc-dash__main {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.lmsc-printing-report .lmsc-tab-panel[data-tab="reports"] {
		display: block !important;
		padding: 0 !important;
	}
}

/* ===== Breadcrumb Trail (#62) ===== */
.lmsc-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--lmsc-text, #64748b);
	opacity: 0.7;
}

.lmsc-breadcrumb__home {
	color: var(--lmsc-primary, #007AFF);
	text-decoration: none;
}

.lmsc-breadcrumb__home:hover {
	text-decoration: underline;
}

.lmsc-breadcrumb__sep {
	color: var(--lmsc-text-muted, #d1d5db);
}

.lmsc-breadcrumb__current {
	color: var(--lmsc-text, #1e293b);
	font-weight: 500;
}

/* ===== Profile Completeness Ring (#30) ===== */
.lmsc-dash__profile-completeness {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.lmsc-profile-ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-profile-ring svg {
	transform: rotate(-90deg);
}

.lmsc-profile-ring__pct {
	position: absolute;
	font-size: 11px;
	font-weight: 700;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-profile-ring__label {
	font-size: 12px;
	color: var(--lmsc-text-muted, #64748b);
}

/* ===== Assignment Due Date (#21) ===== */
.lmsc-card__due {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--lmsc-text-muted, #64748b);
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--lmsc-bg-secondary, #f1f5f9);
}

.lmsc-card__due--overdue {
	color: #ef4444;
	background: #fef2f2;
}

/* ===== Retake Quiz Button (#16) ===== */
.lmsc-retake-btn {
	margin-left: 4px;
}

/* ===== GL Section Toolbar (#44, #49) ===== */
.lmsc-gl-section-toolbar {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 8px 0;
}

/* ===== GL Email Link (#47) ===== */
.lmsc-gl-email-link {
	color: var(--lmsc-primary, #007AFF);
	text-decoration: none;
}

.lmsc-gl-email-link:hover {
	text-decoration: underline;
}

/* ===== Certificate List View (#58) ===== */
.lmsc-dash__cert-cards--list {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
}

.lmsc-dash__cert-cards--list .lmsc-dash__cert-card {
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.lmsc-dash__cert-cards--list .lmsc-dash__cert-card-header {
	flex-shrink: 0;
}

.lmsc-dash__cert-cards--list .lmsc-dash__cert-card-body {
	flex: 1;
}

.lmsc-dash__cert-cards--list .lmsc-dash__cert-card-footer {
	flex-shrink: 0;
}

.lmsc-dash__cert-view-toggle {
	display: flex;
	gap: 4px;
}

/* ===== Bulk Approve (#48) ===== */
.lmsc-bulk-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--lmsc-bg-secondary, #f8fafc);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	margin-bottom: 8px;
}

.lmsc-bulk-select-all {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;
}

.lmsc-bulk-check {
	position: absolute;
	top: 8px;
	left: 8px;
	cursor: pointer;
	z-index: 1;
}

.lmsc-gl-grading-card {
	position: relative;
}

/* ===== Danger Zone (#32) ===== */
.lmsc-dash__profile-danger-zone {
	border: 1px solid #fca5a5;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 24px 0;
	background: #fef2f2;
}

.lmsc-dash__profile-danger-zone h4 {
	color: #dc2626;
	margin: 0 0 4px;
	font-size: 14px;
}

.lmsc-dash__profile-danger-zone p {
	margin: 0 0 12px;
	font-size: 13px;
}

.lmsc-dash .lmsc-dash-btn--outline {
	background: transparent;
	color: var(--lmsc-action-link, var(--lmsc-primary));
	border: 1px solid var(--lmsc-action-link, var(--lmsc-primary));
}

/* One visible keyboard focus treatment for shared controls, including dialogs. */
.lmsc-dash-btn:focus-visible,
.lmsc-btn:focus-visible,
.lmsc-learner-export:focus-visible {
	outline: 3px solid var(--lmsc-action-link, #1D6BEE);
	outline-offset: 3px;
}

/* ===== Date Range Picker (#34) ===== */
.lmsc-reports-date-range {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.lmsc-reports-date-range .lmsc-dash-btn {
	white-space: nowrap;
	min-width: fit-content;
	flex-shrink: 0;
}

.lmsc-reports-date-sep {
	color: var(--lmsc-text-muted, #94a3b8);
	font-size: 13px;
}

.lmsc-dash__input--sm {
	padding: 4px 8px;
	font-size: 13px;
	max-width: 150px;
}

/* ===== Section Header Flex (#58) ===== */
.lmsc-dash__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* ===== Avatar Crop Modal (#29) ===== */
.lmsc-crop-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-crop-modal {
	background: var(--lmsc-card-bg, #fff);
	border-radius: 16px;
	padding: 24px;
	max-width: 380px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lmsc-crop-modal h3 {
	margin: 0 0 16px;
	font-size: 18px;
}

.lmsc-crop-container {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: #1a1a2e;
	cursor: grab;
}

.lmsc-crop-container canvas {
	display: block;
	border-radius: 50%;
}

.lmsc-crop-controls {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lmsc-crop-controls label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--lmsc-text-muted, #94a3b8);
}

.lmsc-crop-controls input[type="range"] {
	flex: 1;
	accent-color: var(--lmsc-primary, #fb4365);
}

.lmsc-crop-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ===== Week View (#40) ===== */
.lmsc-schedule-week__header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	margin-bottom: 2px;
}

.lmsc-week-day-header {
	text-align: center;
	padding: 8px 4px;
	background: var(--lmsc-card-bg, #f8fafc);
	border-radius: 8px 8px 0 0;
}

.lmsc-week-day-header--today {
	background: var(--lmsc-primary, #fb4365);
	color: var(--lmsc-on-primary, #fff);
}

.lmsc-week-day-name {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	opacity: .7;
}

.lmsc-week-day-num {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.lmsc-schedule-week__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	min-height: 200px;
}

.lmsc-week-day-col {
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 0 0 8px 8px;
	padding: 8px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lmsc-week-day-col--today {
	border-color: var(--lmsc-primary, #fb4365);
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.04);
}

.lmsc-week-event {
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 4px;
	background: rgba(59, 130, 246, 0.1);
	border-left: 3px solid #3b82f6;
}

.lmsc-week-event--quiz {
	border-left-color: #8b5cf6;
	background: rgba(139, 92, 246, 0.1);
}

.lmsc-week-event--assignment {
	border-left-color: #f59e0b;
	background: rgba(245, 158, 11, 0.1);
}

.lmsc-week-event--drip {
	border-left-color: #22c55e;
	background: rgba(34, 197, 94, 0.1);
}

.lmsc-week-event__time {
	font-size: 10px;
	color: var(--lmsc-text-muted, #94a3b8);
	display: block;
}

.lmsc-week-event__title {
	font-weight: 500;
}

.lmsc-week-empty {
	color: var(--lmsc-text-muted, #94a3b8);
	font-size: 13px;
	text-align: center;
	margin-top: 20px;
}

/* ===== Recurring Badge (#42) ===== */
.lmsc-recurring-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	margin-left: 4px;
	cursor: help;
}

/* ===== Comparison Controls (#37) ===== */
.lmsc-comparison-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.lmsc-comparison-vs {
	font-weight: 700;
	font-size: 14px;
	color: var(--lmsc-text-muted, #94a3b8);
	text-transform: uppercase;
}

/* ===== GL Visual Charts (#50) ===== */
.lmsc-gl-charts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 16px;
}

.lmsc-gl-chart-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: 12px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	padding: 20px;
}

.lmsc-gl-chart-card h4 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text, #1e293b);
}

/* ===== Account Enrichment (#51-55) ===== */
.lmsc-account-enrichment {
	margin: 0;
}

.lmsc-dash .lmsc-account-enrichment > h3 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lmsc-text);
	margin: 0 0 14px;
}

/* ── CE Credits tab ── */
.lmsc-ce-tab__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.lmsc-ce-tab__head h2{margin:0;font-size:20px;font-weight:700;color:var(--lmsc-text);}
.lmsc-ce-totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.lmsc-ce-total{background:var(--lmsc-card-bg,#fff);border:1px solid var(--lmsc-border,#e2e8f0);border-radius:12px;padding:14px 16px;}
.lmsc-ce-total__val{font-size:26px;font-weight:700;color:var(--lmsc-primary);line-height:1;}
.lmsc-ce-total__label{font-size:12px;font-weight:600;color:var(--lmsc-text);margin-top:4px;text-transform:uppercase;letter-spacing:.03em;}
.lmsc-ce-total__sub{font-size:11px;color:var(--lmsc-text-muted,#94a3b8);margin-top:2px;}
.lmsc-ce-table-wrap{overflow-x:auto;border:1px solid var(--lmsc-border,#e2e8f0);border-radius:12px;}
.lmsc-ce-table{width:100%;border-collapse:collapse;font-size:13px;}
.lmsc-ce-table th{text-align:left;padding:11px 14px;background:var(--lmsc-bg,#f8fafc);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--lmsc-text-muted,#64748b);font-weight:600;border-bottom:1px solid var(--lmsc-border,#e2e8f0);}
.lmsc-ce-table td{padding:11px 14px;border-bottom:1px solid var(--lmsc-border,#eef0f6);color:var(--lmsc-text,#1e293b);vertical-align:middle;}
.lmsc-ce-table tr:last-child td{border-bottom:none;}
.lmsc-ce-badge{display:inline-block;font-size:10px;font-weight:600;border-radius:999px;padding:2px 9px;text-transform:uppercase;letter-spacing:.03em;}
.lmsc-ce-badge--expired{background:#fef3c7;color:#92400e;}
.lmsc-ce-badge--revoked{background:#fee2e2;color:#991b1b;}
.lmsc-ce-verify{font-size:12px;font-weight:600;color:var(--lmsc-primary);text-decoration:none;}
.lmsc-ce-verify:hover{text-decoration:underline;}

.lmsc-account-enrichment__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.lmsc-enrichment-card {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 64px;
	background: var(--lmsc-surface, #fff);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	padding: 12px;
	text-align: start;
}

.lmsc-enrichment-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--lmsc-primary, #235af3) 10%, transparent);
	color: var(--lmsc-primary, #235af3);
}

.lmsc-enrichment-card__icon svg {
	display: block;
}

.lmsc-enrichment-card__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.lmsc-enrichment-card__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lmsc-text-muted, #94a3b8);
	margin-bottom: 2px;
	line-height: 1.25;
}

.lmsc-enrichment-card__value {
	font-size: 15px;
	font-weight: 600;
	color: var(--lmsc-text, #1e293b);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.lmsc-profile-ring__bg {
	stroke: var(--lmsc-border, #e2e8f0);
}

@media (max-width: 768px) {
	.lmsc-account-enrichment__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.lmsc-account-enrichment__grid {
		grid-template-columns: 1fr;
	}

	.lmsc-dash__profile-card,
	.lmsc-dash__profile-form {
		padding: 20px;
	}
}

/* Week view responsive */
@media (max-width: 768px) {

	.lmsc-schedule-week__header,
	.lmsc-schedule-week__grid {
		grid-template-columns: repeat(7, 1fr);
		font-size: 11px;
	}

	.lmsc-week-day-num {
		font-size: 14px;
	}

	.lmsc-week-event {
		font-size: 10px;
		padding: 2px 4px;
	}

	.lmsc-crop-container {
		width: 250px;
		height: 250px;
	}

	.lmsc-crop-container canvas {
		width: 250px;
		height: 250px;
	}
}

/* ---------- Time Spent Per-Course Bars ---------- */
.lmsc-time-spent-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lmsc-time-spent-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lmsc-time-spent-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text-primary, #1e293b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-time-spent-bar-wrap {
	position: relative;
	height: 28px;
	background: var(--lmsc-bg-secondary, #f1f5f9);
	border-radius: 6px;
	overflow: hidden;
}

.lmsc-time-spent-bar {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--lmsc-primary, #007AFF), var(--lmsc-accent, #8B5CF6));
	min-width: 4px;
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.lmsc-time-spent-value {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 600;
	color: var(--lmsc-text-primary, #1e293b);
}

.lmsc-time-spent-bar-wrap:has(.lmsc-time-spent-bar[style*="width:100%"]) .lmsc-time-spent-value,
.lmsc-time-spent-bar-wrap:has(.lmsc-time-spent-bar[style*="width: 100%"]) .lmsc-time-spent-value {
	color: #fff;
}

/* Dark mode */
[data-theme="dark"] .lmsc-time-spent-label,
.lmsc-dash--dark .lmsc-time-spent-label {
	color: var(--lmsc-text-primary, #e2e8f0);
}

[data-theme="dark"] .lmsc-time-spent-bar-wrap,
.lmsc-dash--dark .lmsc-time-spent-bar-wrap {
	background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .lmsc-time-spent-value,
.lmsc-dash--dark .lmsc-time-spent-value {
	color: var(--lmsc-text-primary, #e2e8f0);
}

/* ========== Upload Drop Zone ========== */
.lmsc-upload-zone {
	position: relative;
	border: 2px dashed var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius, 16px);
	padding: 2rem 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.25s ease;
	background: var(--lmsc-card-bg, #fff);
	margin-bottom: 1.25rem;
}

.lmsc-upload-zone:hover {
	border-color: var(--lmsc-primary, #007aff);
	background: rgba(0, 122, 255, 0.03);
}

.lmsc-upload-zone--dragover {
	border-color: var(--lmsc-primary, #007aff);
	background: rgba(0, 122, 255, 0.08);
	transform: scale(1.01);
	box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.lmsc-upload-zone__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.lmsc-upload-zone__content {
	pointer-events: none;
}

.lmsc-upload-zone__icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 0.75rem;
	stroke: var(--lmsc-text-muted, #94a3b8);
	transition: stroke 0.2s;
}

.lmsc-upload-zone:hover .lmsc-upload-zone__icon,
.lmsc-upload-zone--dragover .lmsc-upload-zone__icon {
	stroke: var(--lmsc-primary, #007aff);
}

.lmsc-upload-zone__label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--lmsc-text-primary, #1e293b);
	margin: 0 0 0.25rem;
}

.lmsc-upload-zone__sublabel {
	font-size: 0.85rem;
	color: var(--lmsc-text-muted, #94a3b8);
	margin: 0 0 0.5rem;
}

.lmsc-upload-zone__types {
	display: inline-block;
	font-size: 0.75rem;
	color: var(--lmsc-text-muted, #94a3b8);
	background: var(--lmsc-bg-alt, #f1f5f9);
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
}

.lmsc-upload-zone__progress {
	margin-top: 1rem;
}

.lmsc-upload-zone__bar {
	height: 6px;
	background: var(--lmsc-bg-alt, #f1f5f9);
	border-radius: 3px;
	overflow: hidden;
}

.lmsc-upload-zone__bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--lmsc-primary, #007aff), var(--lmsc-accent, #8b5cf6));
	border-radius: 3px;
	transition: width 0.3s ease;
	animation: lmsc-shimmer 1.5s infinite;
}

@keyframes lmsc-shimmer {
	0% {
		background-position: -200px 0;
	}

	100% {
		background-position: 200px 0;
	}
}

.lmsc-upload-zone__status {
	display: block;
	font-size: 0.8rem;
	color: var(--lmsc-primary, #007aff);
	margin-top: 0.4rem;
	font-weight: 500;
}

/* Upload zone - uploading state */
.lmsc-upload-zone--uploading {
	pointer-events: none;
	opacity: 0.75;
}

.lmsc-upload-zone--uploading .lmsc-upload-zone__content {
	display: none;
}

/* Dark mode */
[data-theme="dark"] .lmsc-upload-zone,
.lmsc-dash--dark .lmsc-upload-zone {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .lmsc-upload-zone:hover,
.lmsc-dash--dark .lmsc-upload-zone:hover {
	border-color: var(--lmsc-primary, #007aff);
	background: rgba(0, 122, 255, 0.06);
}

[data-theme="dark"] .lmsc-upload-zone__types,
.lmsc-dash--dark .lmsc-upload-zone__types {
	background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .lmsc-upload-zone__bar,
.lmsc-dash--dark .lmsc-upload-zone__bar {
	background: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   Phase 1 - Design Polish
   ========================================================================== */

/* ---------- 1. Course Card Hover Overlay ---------- */
.lmsc-dash__course-card {
	position: relative;
}

.lmsc-dash__course-hover-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.82) 0%,
			rgba(0, 0, 0, 0.55) 40%,
			rgba(0, 0, 0, 0.25) 70%,
			transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 5;
	border-radius: 16px;
	pointer-events: none;
}

.lmsc-dash__course-card:hover .lmsc-dash__course-hover-overlay {
	opacity: 1;
}

/* Allow clicks ONLY on the CTA link inside the overlay, not the overlay itself.
   This prevents the overlay from blocking clicks on the card body (title, progress bar). */
.lmsc-dash__course-hover-overlay .lmsc-dash__course-hover-cta {
	pointer-events: auto;
}

.lmsc-dash__course-hover-stats {
	display: flex;
	gap: 16px;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 500;
	margin-bottom: 8px;
}

.lmsc-dash__course-hover-stats span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.lmsc-dash__course-hover-stats svg {
	width: 14px;
	height: 14px;
	opacity: 0.8;
}

.lmsc-dash__course-hover-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.2s;
	width: fit-content;
}

.lmsc-dash__course-hover-cta:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* ---------- 2. Tab Switch Transitions ---------- */
@keyframes lmsc-fadeInUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lmsc-dash__panel {
	display: none;
}

.lmsc-dash__panel--active {
	display: block;
	animation: lmsc-fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- 3. Active Tab Indicator Enhancement ---------- */
/* Sidebar layout - glowing left border */
.lmsc-dash__nav-item--active::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)) !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
	width: 3px !important;
	height: 70% !important;
	border-radius: 3px !important;
}

.lmsc-dash__nav-item--active {
	box-shadow: 0 4px 15px rgba(var(--lmsc-primary-rgb), 0.4),
		inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* ---------- 4. Initials-Based Avatar ---------- */
.lmsc-initials-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-weight: 700;
	font-size: 1.1rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	user-select: none;
}

/* Size variants */
.lmsc-initials-avatar--sm {
	font-size: 0.7rem;
	letter-spacing: 0.5px;
}

.lmsc-initials-avatar--lg {
	font-size: 2rem;
	letter-spacing: 2px;
}

/* ---------- 5. Clickable Breadcrumbs - 3-level ---------- */
.lmsc-breadcrumb__segment {
	color: var(--lmsc-primary);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s;
}

.lmsc-breadcrumb__segment:hover {
	opacity: 0.7;
	text-decoration: underline;
}

.lmsc-breadcrumb__current {
	cursor: default;
}

/* ---------- 6. Stat Cards (display-only) ---------- */
.lmsc-dash__stat-card {
	cursor: default;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lmsc-dash__stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- 7. Mobile Bottom Tab Bar ---------- */
/* Base: hidden on desktop. The @media block below shows them on mobile. */
.lmsc-dash__mobile-tabs,
.lmsc-dash__mobile-more-drawer {
	display: none;
}

@media (max-width: 768px) {

	/* Switch from two-column grid to single-column on mobile */
	.lmsc-dash--sidebar {
		grid-template-columns: 1fr !important;
	}

	/* Hide sidebar completely on mobile - bottom tabs handle navigation */
	.lmsc-dash__sidebar {
		display: none !important;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		z-index: 10000;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	/* Sidebar never opens on mobile */
	.lmsc-dash__sidebar.is-open {
		display: none !important;
	}

	/* Hide breadcrumb on mobile - page title is sufficient */
	.lmsc-breadcrumb {
		display: none !important;
	}

	/* Bottom fixed tab bar - syncs with skin colors */
	/* ──── Bottom Tab Bar ──── */
	.lmsc-dash__mobile-tabs {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		display: flex;
		align-items: stretch;
		background: var(--lmsc-bg, #fff);
		border-top: 1px solid var(--lmsc-border, #e2e8f0);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
		padding: 4px 0 env(safe-area-inset-bottom, 4px);
	}

	/* ──── Individual Tab Button ──── */
	.lmsc-dash__mobile-tab {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 6px 2px;
		cursor: pointer;
		background: none;
		border: none;
		outline: none;
		color: var(--lmsc-text-muted, #94a3b8);
		font-size: 0.6rem;
		font-weight: 500;
		transition: color 0.2s, background 0.2s;
		gap: 2px;
		max-width: 20%;
		font-family: inherit;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.lmsc-dash__mobile-tab svg,
	.lmsc-dash__mobile-tab .lmsc-dash__nav-icon {
		width: 22px;
		height: 22px;
	}

	/* Hover */
	.lmsc-dash__mobile-tab:hover {
		color: var(--lmsc-primary) !important;
		background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.06);
		border-radius: 12px;
	}

	/* Active (pressed) */
	.lmsc-dash__mobile-tab:active {
		color: var(--lmsc-primary) !important;
		background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.15) !important;
		border-radius: 12px;
		transform: scale(0.95);
	}

	/* Focus (keyboard) */
	.lmsc-dash__mobile-tab:focus {
		outline: none;
		color: var(--lmsc-primary);
	}

	.lmsc-dash__mobile-tab:focus-visible {
		outline: 2px solid var(--lmsc-primary);
		outline-offset: -2px;
		border-radius: 12px;
	}

	/* ──── Active (selected) Tab ──── */
	.lmsc-dash__mobile-tab--active {
		color: var(--lmsc-primary) !important;
		background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.1) !important;
		border-radius: 12px;
		position: relative;
	}

	.lmsc-dash__mobile-tab--active .lmsc-dash__nav-icon,
	.lmsc-dash__mobile-tab--active svg {
		color: var(--lmsc-primary) !important;
	}

	.lmsc-dash__mobile-tab--active::after {
		content: '';
		position: absolute;
		top: 0;
		left: 25%;
		right: 25%;
		height: 2px;
		background: var(--lmsc-primary);
		border-radius: 0 0 2px 2px;
	}

	.lmsc-dash__mobile-tab__label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* ──── "More" Overflow Drawer ──── */
	.lmsc-dash__mobile-more-drawer {
		position: fixed;
		bottom: 60px;
		left: 8px;
		right: 8px;
		z-index: 9999;
		background: var(--lmsc-bg, #fff);
		border: 1px solid var(--lmsc-border, #e2e8f0);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
		padding: 12px;
		display: none;
		max-height: 50vh;
		overflow-y: auto;
	}

	.lmsc-dash__mobile-more-drawer--open {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		animation: lmsc-fadeInUp 0.25s ease both;
	}

	/* ──── More Drawer Items ──── */
	.lmsc-dash__mobile-more-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 12px 4px;
		border-radius: 12px;
		background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.06);
		cursor: pointer;
		border: none;
		outline: none;
		color: var(--lmsc-text, #1e293b);
		font-size: 0.7rem;
		font-weight: 500;
		font-family: inherit;
		transition: background 0.2s, transform 0.1s;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.lmsc-dash__mobile-more-item:hover {
		background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.12);
	}

	.lmsc-dash__mobile-more-item:active {
		background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.2) !important;
		transform: scale(0.95);
	}

	.lmsc-dash__mobile-more-item:focus {
		outline: none;
	}

	.lmsc-dash__mobile-more-item:focus-visible {
		outline: 2px solid var(--lmsc-primary);
		outline-offset: -2px;
	}

	.lmsc-dash__mobile-more-item svg {
		width: 20px;
		height: 20px;
		color: var(--lmsc-primary);
	}

	/* Bottom padding for fixed bar */
	.lmsc-dash__main {
		padding-bottom: 70px !important;
	}

	/* Move continue learning button above bottom bar */
	.lmsc-continue-btn {
		bottom: 76px !important;
	}
}

/* Hide mobile tabs on desktop */
@media (min-width: 769px) {

	.lmsc-dash__mobile-tabs,
	.lmsc-dash__mobile-more-drawer {
		display: none !important;
	}
}

/* ---------- Course Quick-Peek ---------- */
.lmsc-quick-peek {
	padding: 14px 16px;
	border-top: 1px solid var(--lmsc-border);
	background: rgba(var(--lmsc-primary-rgb), 0.02);
	animation: lmsc-fadeInUp 0.25s ease both;
}

.lmsc-quick-peek__header {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted);
	margin-bottom: 10px;
}

.lmsc-quick-peek__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lmsc-quick-peek__lesson {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--lmsc-surface);
	border: 1px solid var(--lmsc-border);
	color: var(--lmsc-text);
	text-decoration: none;
	font-size: 0.82rem;
	transition: background 0.2s, border-color 0.2s;
}

.lmsc-quick-peek__lesson:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.06);
	border-color: rgba(var(--lmsc-primary-rgb), 0.2);
	color: var(--lmsc-primary);
}

.lmsc-quick-peek__lesson svg {
	flex-shrink: 0;
}

.lmsc-quick-peek__empty {
	text-align: center;
	color: var(--lmsc-text-muted);
	font-size: 0.8rem;
	padding: 8px;
}


/* ---------- Meeting Card Enhancements ---------- */
.lmsc-meeting-card__rel-time {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--lmsc-primary);
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	padding: 2px 8px;
	border-radius: 12px;
}

.lmsc-meeting-card--live {
	border-left: 3px solid #ef4444;
	animation: lmsc-live-pulse 2s ease-in-out infinite;
}

@keyframes lmsc-live-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2);
	}

	50% {
		box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
	}
}

/* A colour variant, so it must ONLY change colour. It previously also
   redefined padding, radius, weight and font-size (0.78rem = 12.48px), which
   made a "ghost" button a different SHAPE from its primary sibling — on the
   Group Leader screen two buttons both labelled "Export CSV" rendered at
   29px/13px/r10 and 30px/12.48px/r8 side by side. Geometry now comes from
   .lmsc-dash-btn / --sm alone. */
.lmsc-dash .lmsc-dash-btn--ghost {
	background: transparent;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	color: var(--lmsc-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.lmsc-dash .lmsc-dash-btn--ghost:hover {
	border-color: var(--lmsc-primary);
	color: var(--lmsc-primary);
}

/* ---------- Group Leader Dashboard Enhancements ---------- */
.lmsc-gl-row--atrisk {
	background: rgba(239, 68, 68, 0.04);
}

.lmsc-gl-badge--atrisk {
	font-size: 0.7rem;
	margin-left: 4px;
	vertical-align: middle;
}

.lmsc-gl-last-activity {
	font-size: 0.82rem;
	color: var(--lmsc-text-muted);
}

.lmsc-gl-last-activity--warn {
	color: #ef4444;
	font-weight: 600;
}

.lmsc-dash .lmsc-dash-btn--active {
	background: rgba(var(--lmsc-primary-rgb), 0.1) !important;
	border-color: var(--lmsc-primary) !important;
	color: var(--lmsc-primary) !important;
}

.lmsc-gl-toolbar {
	flex-wrap: wrap;
}

/* ========== Compact Overall Progress summary ========== */
.lmsc-dash__widget--progress {
	align-self: start;
}

.lmsc-dash__progress-summary {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

.lmsc-dash__progress-summary .lmsc-dash__progress-ring-container {
	margin: 0;
}

.lmsc-dash__progress-summary .lmsc-dash__progress-mini-stats {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	min-width: 0;
	gap: 6px;
}

.lmsc-dash__progress-summary .lmsc-dash__mini-stat {
	padding: 8px 6px;
}

.lmsc-dash__progress-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	max-width: 380px;
	margin: 10px auto 0;
}

.lmsc-dash .lmsc-dash__progress-footer p.lmsc-dash__progress-message {
	flex: 1 1 190px;
	margin: 0;
	text-align: start;
}

.lmsc-dash a.lmsc-dash__progress-courses-link {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lmsc-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lmsc-dash a.lmsc-dash__progress-courses-link:hover {
	text-decoration-thickness: 2px;
}

.lmsc-dash a.lmsc-dash__progress-courses-link:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
	border-radius: 3px;
}

/* ========== Phase 2: Gamification Row ========== */
/* Default: transparent wrapper - children flow into parent grid (topbar mode). */
.lmsc-dash__gamification-row {
	display: contents;
}

/* In sidebar mode, use a flex row for equal 50/50 split. */
.lmsc-dash--sidebar .lmsc-dash__gamification-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.lmsc-dash--sidebar .lmsc-dash__gamification-row > .lmsc-dash__widget {
	flex: 1;
	min-width: 0;
}

@media (max-width: 768px) {
	.lmsc-dash--sidebar .lmsc-dash__gamification-row {
		flex-direction: column;
	}
}

/* ========== Phase 2: Gamification Widget ========== */
.lmsc-dash__widget--gamification {
	background: var(--lmsc-card-bg);
	border-radius: var(--lmsc-radius);
	padding: 20px;
	border: 1px solid var(--lmsc-border);
	min-width: 0;
	overflow: hidden;
}

.lmsc-gamification__streak-counter {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(239, 68, 68, 0.06));
	margin-bottom: 16px;
}

.lmsc-gamification__streak-counter--silver {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
}

.lmsc-gamification__streak-counter--gold {
	background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(245, 158, 11, 0.08));
}

.lmsc-gamification__streak-counter--platinum {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.08));
}

.lmsc-gamification__streak-icon {
	font-size: 2.2rem;
	line-height: 1;
	animation: lmsc-streak-pulse 2s ease-in-out infinite;
}

@keyframes lmsc-streak-pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.15);
	}
}

.lmsc-gamification__streak-info {
	display: flex;
	flex-direction: column;
}

.lmsc-gamification__streak-days {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	color: var(--lmsc-text);
}

.lmsc-gamification__streak-label {
	font-size: 0.8rem;
	color: var(--lmsc-text-muted);
	margin-top: 2px;
}

.lmsc-gamification__best-streak {
	font-size: 0.78rem;
	color: var(--lmsc-text-muted);
	text-align: center;
	margin-bottom: 12px;
}

.lmsc-gamification__badge-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.lmsc-gamification__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	border-radius: 10px;
	text-align: center;
	transition: transform 0.2s ease;
}

.lmsc-gamification__badge--earned {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(59, 130, 246, 0.06));
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.lmsc-gamification__badge--locked {
	background: var(--lmsc-hover-bg, rgba(0, 0, 0, 0.03));
	border: 1px dashed var(--lmsc-border);
	opacity: 0.5;
}

.lmsc-gamification__badge--earned:hover {
	transform: scale(1.05);
}

.lmsc-gamification__badge--bronze.lmsc-gamification__badge--earned {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.06));
	border-color: rgba(245, 158, 11, 0.3);
}

.lmsc-gamification__badge--silver.lmsc-gamification__badge--earned {
	background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(59, 130, 246, 0.06));
	border-color: rgba(148, 163, 184, 0.3);
}

.lmsc-gamification__badge--gold.lmsc-gamification__badge--earned {
	background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(245, 158, 11, 0.08));
	border-color: rgba(234, 179, 8, 0.3);
}

.lmsc-gamification__badge--platinum.lmsc-gamification__badge--earned {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(236, 72, 153, 0.08));
	border-color: rgba(139, 92, 246, 0.3);
}

.lmsc-gamification__badge-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.lmsc-gamification__badge-name {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--lmsc-text);
}

.lmsc-gamification__badge-req {
	font-size: 0.68rem;
	color: var(--lmsc-text-muted);
}

/* ========== Phase 2: Leaderboard Widget ========== */
.lmsc-dash__widget--leaderboard {
	background: var(--lmsc-card-bg);
	border-radius: var(--lmsc-radius);
	padding: 20px;
	border: 1px solid var(--lmsc-border);
	overflow: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

.lmsc-dash__leaderboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 8px;
}

.lmsc-dash__leaderboard-header h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.lmsc-dash__leaderboard-filter {
	font-size: 0.72rem;
	padding: 3px 6px;
	border-radius: 6px;
	border: 1px solid var(--lmsc-border);
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text);
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s;
	max-width: 110px;
	min-width: 0;
}

.lmsc-dash__leaderboard-filter:hover,
.lmsc-dash__leaderboard-filter:focus {
	border-color: var(--lmsc-primary);
	outline: none;
}

.lmsc-dash__leaderboard-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lmsc-lb__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--lmsc-border, #e2e8f0);
}

.lmsc-lb__page-btn {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 6px;
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #334155);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
	line-height: 1;
}

.lmsc-lb__page-btn:hover:not(:disabled) {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #3b82f6);
}

.lmsc-lb__page-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.lmsc-lb__page-info {
	font-size: 0.7rem;
	color: var(--lmsc-text-muted, #94a3b8);
	font-weight: 500;
	min-width: 30px;
	text-align: center;
}

.lmsc-lb__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--lmsc-hover-bg, rgba(0, 0, 0, 0.02));
	transition: background 0.2s, transform 0.15s;
}

.lmsc-lb__row:hover {
	background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.06);
	transform: translateX(2px);
}

@keyframes lmsc-lb-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.lmsc-lb__row--top1 {
	background: linear-gradient(135deg, rgba(234, 179, 8, 0.10), rgba(245, 158, 11, 0.06));
	border: 1px solid rgba(234, 179, 8, 0.2);
	position: relative;
	overflow: hidden;
}

.lmsc-lb__row--top1::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.12), transparent);
	background-size: 200% 100%;
	animation: lmsc-lb-shimmer 3s ease infinite;
	pointer-events: none;
}

.lmsc-lb__row--top2 {
	background: linear-gradient(135deg, rgba(148, 163, 184, 0.10), rgba(100, 116, 139, 0.06));
	border: 1px solid rgba(148, 163, 184, 0.2);
	position: relative;
	overflow: hidden;
}

.lmsc-lb__row--top2::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.10), transparent);
	background-size: 200% 100%;
	animation: lmsc-lb-shimmer 4s ease infinite;
	pointer-events: none;
}

.lmsc-lb__row--top3 {
	background: linear-gradient(135deg, rgba(180, 83, 9, 0.08), rgba(217, 119, 6, 0.05));
	border: 1px solid rgba(180, 83, 9, 0.16);
	position: relative;
	overflow: hidden;
}

.lmsc-lb__row--top3::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(180, 83, 9, 0.08), transparent);
	background-size: 200% 100%;
	animation: lmsc-lb-shimmer 4.5s ease infinite;
	pointer-events: none;
}

.lmsc-lb__row--me {
	background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.08);
	border: 1px solid rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.2);
	box-shadow: 0 0 0 1px rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.1);
}

.lmsc-lb__rank {
	font-size: 1.1rem;
	font-weight: 700;
	min-width: 28px;
	text-align: center;
	flex-shrink: 0;
	color: var(--lmsc-text-muted);
}

.lmsc-lb__row--top1 .lmsc-lb__rank,
.lmsc-lb__row--top2 .lmsc-lb__rank,
.lmsc-lb__row--top3 .lmsc-lb__rank {
	font-size: 1.3rem;
}

.lmsc-lb__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	border: 2px solid var(--lmsc-border);
}

.lmsc-lb__row--top1 .lmsc-lb__avatar {
	border-color: #eab308;
	box-shadow: 0 0 8px rgba(234, 179, 8, 0.3);
}

.lmsc-lb__row--top2 .lmsc-lb__avatar {
	border-color: #94a3b8;
}

.lmsc-lb__row--top3 .lmsc-lb__avatar {
	border-color: #b45309;
}

.lmsc-lb__name {
	flex: 1;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lmsc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-lb__name small {
	font-weight: 500;
	color: var(--lmsc-primary);
	font-size: 0.75rem;
}

.lmsc-lb__score {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--lmsc-primary);
	padding: 3px 10px;
	background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.08);
	border-radius: 20px;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.lmsc-dash__leaderboard-empty {
	text-align: center;
	padding: 20px 16px;
	color: var(--lmsc-text-muted);
	font-size: 0.85rem;
}

.lmsc-dash__leaderboard-empty p {
	margin: 0;
}

/* ========== Phase 2: Completion Toast ========== */
.lmsc-dash__completion-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.lmsc-dash__completion-toast--show {
	transform: translateY(0);
	opacity: 1;
}

.lmsc-dash__completion-toast-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 14px;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: #fff;
	box-shadow: 0 12px 40px rgba(34, 197, 94, 0.3);
	max-width: 380px;
}

.lmsc-dash__completion-toast-icon {
	font-size: 2rem;
	flex-shrink: 0;
}

.lmsc-dash__completion-toast-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lmsc-dash__completion-toast-text strong {
	font-size: 1rem;
}

.lmsc-dash__completion-toast-text span {
	font-size: 0.82rem;
	opacity: 0.9;
}

.lmsc-dash__completion-toast-close {
	background: none;
	border: none;
	color: #fff;
	opacity: 0.7;
	cursor: pointer;
	font-size: 1.1rem;
	padding: 4px;
	flex-shrink: 0;
}

.lmsc-dash__completion-toast-close:hover {
	opacity: 1;
}

/* ========== Phase 2: Deadline Countdown Widget ========== */
.lmsc-dash__widget--deadlines {
	background: var(--lmsc-card-bg);
	border-radius: var(--lmsc-radius);
	padding: 20px;
	border: 1px solid var(--lmsc-border);
}

.lmsc-dash__deadline-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lmsc-dash__deadline-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 4px solid;
	background: var(--lmsc-hover-bg, rgba(0, 0, 0, 0.02));
	transition: background 0.2s ease;
}

.lmsc-dash__deadline-item:hover {
	background: var(--lmsc-hover-bg, rgba(0, 0, 0, 0.04));
}

.lmsc-dash__deadline-item--green {
	border-left-color: #22c55e;
}

.lmsc-dash__deadline-item--orange {
	border-left-color: #f59e0b;
	background: rgba(245, 158, 11, 0.04);
}

.lmsc-dash__deadline-item--red {
	border-left-color: #ef4444;
	background: rgba(239, 68, 68, 0.04);
}

.lmsc-dash__deadline-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lmsc-dash__deadline-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lmsc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-dash__deadline-course {
	font-size: 0.75rem;
	color: var(--lmsc-text-muted);
}

.lmsc-dash__deadline-timer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
	margin-left: 12px;
}

.lmsc-dash__deadline-countdown {
	font-size: 0.9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lmsc-dash__deadline-item--red .lmsc-dash__deadline-countdown {
	color: #ef4444;
}

.lmsc-dash__deadline-item--orange .lmsc-dash__deadline-countdown {
	color: #f59e0b;
}

.lmsc-dash__deadline-item--green .lmsc-dash__deadline-countdown {
	color: #22c55e;
}

.lmsc-dash__deadline-type {
	font-size: 0.68rem;
	color: var(--lmsc-text-muted);
	text-transform: capitalize;
}

.lmsc-dash__deadline-empty {
	text-align: center;
	padding: 16px;
	color: var(--lmsc-text-muted);
	font-size: 0.85rem;
}

/* ========== Notes & Bookmarks ========== */
.lmsc-dash__notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.lmsc-dash__note-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
	box-shadow: var(--lmsc-card-shadow, 0 1px 3px rgba(0, 0, 0, .1));
	transition: transform .2s, box-shadow .2s;
}

.lmsc-dash__note-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.lmsc-dash__note-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.lmsc-dash__note-header h4 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__note-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

/* Icon buttons (edit / delete on note cards, etc.) */
.lmsc-dash__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	color: var(--lmsc-text-muted, #64748b);
	transition: background 0.15s, color 0.15s;
	padding: 0;
	line-height: 1;
}

.lmsc-dash__icon-btn svg {
	display: block;
}

.lmsc-dash__icon-btn:hover {
	background: var(--lmsc-bg-hover, rgba(0, 0, 0, .06));
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__icon-btn--danger:hover {
	background: #fee2e2;
	color: #ef4444;
}

.lmsc-dash__note-content {
	font-size: 0.85rem;
	color: var(--lmsc-text-muted, #64748b);
	margin: 0 0 12px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lmsc-dash__note-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
}

.lmsc-dash__note-tag {
	background: var(--lmsc-primary-alpha, rgba(0, 122, 255, .1));
	color: var(--lmsc-primary, #007AFF);
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 0.72rem;
	font-weight: 500;
}

.lmsc-dash__note-time {
	color: var(--lmsc-text-muted, #94a3b8);
}

/* Color picker dots */
.lmsc-dash__color-picker {
	display: flex;
	gap: 8px;
}

.lmsc-dash__color-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s, border-color .15s;
	padding: 0;
}

.lmsc-dash__color-dot:hover {
	transform: scale(1.15);
}

.lmsc-dash__color-dot--active {
	border-color: var(--lmsc-text, #1e293b);
	transform: scale(1.15);
}

/* ==========================================================================
   Base Button System
   ========================================================================== */
.lmsc-dash__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	border-radius: 10px;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #1f2937);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.lmsc-dash__btn:hover {
	background: var(--lmsc-bg-hover, #f3f4f6);
	border-color: var(--lmsc-text-muted, #9ca3af);
	transform: translateY(-1px);
}

.lmsc-dash__btn:active {
	transform: translateY(0);
}

.lmsc-dash__btn--primary {
	background: var(--lmsc-accent, var(--lmsc-primary, #3b82f6));
	color: var(--lmsc-on-accent, #fff);
	border-color: var(--lmsc-accent, var(--lmsc-primary, #3b82f6));
	box-shadow: 0 2px 8px rgba(var(--lmsc-accent-rgb, var(--lmsc-primary-rgb, 59, 130, 246)), 0.25);
}

.lmsc-dash__btn--primary:hover {
	background: var(--lmsc-accent, var(--lmsc-primary, #3b82f6));
	border-color: var(--lmsc-accent, var(--lmsc-primary, #3b82f6));
	filter: brightness(1.1);
	box-shadow: 0 4px 12px rgba(var(--lmsc-accent-rgb, var(--lmsc-primary-rgb, 59, 130, 246)), 0.35);
}

.lmsc-dash__btn--primary svg,
.lmsc-dash__btn--primary:hover svg {
	color: #fff;
}

/* ==========================================================================
   Modal System
   ========================================================================== */
.lmsc-dash__modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lmsc-dash__modal {
	background: var(--lmsc-surface, #fff);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	animation: lmscModalIn 0.25s ease;
}

@keyframes lmscModalIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.lmsc-dash__modal-header {
	padding: 18px 20px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
}

.lmsc-dash__modal-header h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__modal-close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: var(--lmsc-text-muted, #6b7280);
	padding: 4px 8px;
	border-radius: 6px;
	transition: background 0.2s;
	line-height: 1;
}

.lmsc-dash__modal-close:hover {
	background: var(--lmsc-bg-hover, #f3f4f6);
	color: var(--lmsc-primary, #3b82f6);
}

.lmsc-dash__modal-body {
	padding: 20px;
}

.lmsc-dash__modal-footer {
	padding: 14px 20px 18px;
	border-top: 1px solid var(--lmsc-border, #e5e7eb);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* Form elements inside modals */
.lmsc-dash__modal .lmsc-dash__form-group {
	margin-bottom: 16px;
}

.lmsc-dash__modal .lmsc-dash__form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text, #1f2937);
	margin-bottom: 6px;
}

.lmsc-dash__input,
.lmsc-dash__textarea {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 10px;
	background: var(--lmsc-bg, #f8fafc);
	color: var(--lmsc-text, #1f2937);
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.lmsc-dash__input:focus,
.lmsc-dash__textarea:focus {
	outline: none;
	border-color: var(--lmsc-primary, #3b82f6);
	box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.12);
}

.lmsc-dash__textarea {
	resize: vertical;
	min-height: 100px;
}

.lmsc-dash__modal .lmsc-dash__form-row {
	display: flex;
	gap: 16px;
}

/* Note editor modal */
.lmsc-dash__modal--note .lmsc-dash__modal {
	max-width: 520px;
}

/* Bookmarks */
.lmsc-dash__bookmark-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	margin-bottom: 8px;
	box-shadow: var(--lmsc-card-shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.lmsc-dash__bookmark-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lmsc-dash__bookmark-info h4 {
	margin: 0;
	font-size: 0.9rem;
}

.lmsc-dash__bookmark-info a {
	color: var(--lmsc-text, #1e293b);
	text-decoration: none;
}

.lmsc-dash__bookmark-info a:hover {
	color: var(--lmsc-primary, #007AFF);
}

/* ========== Study Timer ========== */
.lmsc-dash__timer-tab {
	max-width: 640px;
	margin: 0 auto;
}

.lmsc-dash__timer-widget {
	text-align: center;
	padding: 24px 16px;
}

.lmsc-dash__timer-display {
	position: relative !important;
	width: 200px;
	height: 200px;
	margin: 0 auto 20px;
}

.lmsc-dash__timer-ring {
	display: block;
	width: 200px;
	height: 200px;
	transform: rotate(-90deg);
}

/* Centered overlay for time + label. Fills the ring box and centers with
   flexbox so theme styles can't knock the text off-center (the old
   translate(-50%,…) percentages were fragile). */
.lmsc-dash__timer-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	pointer-events: none;
}

.lmsc-dash__timer-ring-bg {
	stroke: var(--lmsc-border, #e2e8f0);
}

.lmsc-dash__timer-ring-progress {
	stroke: var(--lmsc-primary, #007AFF);
	stroke-linecap: round;
	transition: stroke-dashoffset .3s;
}

.lmsc-dash__timer-time {
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--lmsc-text, #1e293b);
	font-variant-numeric: tabular-nums;
}

.lmsc-dash__timer-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-dash__timer-mode {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}

.lmsc-dash__timer-mode small {
	opacity: .6;
	font-size: .75em;
}

.lmsc-dash__timer-context {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 16px;
	font-size: .82rem;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__timer-context label {
	font-weight: 600;
}

.lmsc-dash__timer-context select {
	min-width: 180px;
	max-width: 280px;
}

.lmsc-dash__timer-status {
	max-width: 520px;
	margin: 0 auto 5px;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__timer-persistence {
	max-width: 520px;
	margin: 0 auto;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-dash__timer-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
}

.lmsc-dash__btn--lg {
	padding: 10px 28px;
	font-size: 1rem;
}

.lmsc-dash__btn--danger {
	background: #ef4444;
	color: #fff;
}

.lmsc-dash__btn--danger:hover {
	background: #dc2626;
}

/* Stats row */
.lmsc-dash__timer-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.lmsc-dash__stat-card--mini {
	text-align: center;
	padding: 14px 8px;
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	box-shadow: var(--lmsc-card-shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.lmsc-dash__stat-card--mini .lmsc-dash__stat-value {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--lmsc-primary, #007AFF);
}

.lmsc-dash__stat-card--mini .lmsc-dash__stat-label {
	font-size: .72rem;
	color: var(--lmsc-text-muted, #64748b);
	margin-top: 4px;
	display: block;
}

.lmsc-dash__timer-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -8px 0 20px;
	padding: 10px 12px;
	border: 1px solid #fecaca;
	border-radius: 8px;
	background: #fef2f2;
	color: #991b1b;
	font-size: .82rem;
}

.lmsc-dash__timer-error[style*="display:none"] {
	display: none;
}

.lmsc-dash__timer-error .lmsc-dash__btn {
	flex: 0 0 auto;
	padding: 5px 10px;
}

/* Daily goal */
.lmsc-dash__timer-goal {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
	margin-bottom: 20px;
	box-shadow: var(--lmsc-card-shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.lmsc-dash__timer-goal-header {
	display: flex;
	justify-content: space-between;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--lmsc-text, #1e293b);
}

/* Weekly bars chart */
.lmsc-dash__timer-chart-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
	margin-bottom: 20px;
	box-shadow: var(--lmsc-card-shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.lmsc-dash__timer-chart-card h4 {
	margin: 0 0 12px;
	font-size: .9rem;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__timer-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 100px;
}

.lmsc-dash__timer-bar-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.lmsc-dash__timer-bar {
	width: 100%;
	max-width: 32px;
	background: var(--lmsc-primary, #007AFF);
	border-radius: 4px 4px 0 0;
	transition: height .4s;
	min-height: 4px;
	opacity: .7;
}

.lmsc-dash__timer-bar-col span {
	font-size: .68rem;
	color: var(--lmsc-text-muted, #94a3b8);
	margin-top: 4px;
}

/* Recent sessions */
.lmsc-dash__timer-sessions-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 12px);
	padding: 16px;
	box-shadow: var(--lmsc-card-shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.lmsc-dash__timer-sessions-card h4 {
	margin: 0 0 12px;
	font-size: .9rem;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__timer-session {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
}

.lmsc-dash__timer-session:last-child {
	border-bottom: none;
}

.lmsc-dash__timer-session-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-dash__timer-session-info strong {
	font-size: .85rem;
	color: var(--lmsc-text, #1e293b);
}

/* Responsive */
@media (max-width: 600px) {
	.lmsc-dash__timer-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.lmsc-dash__notes-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Header Action Buttons (Timer & Notes Icons)
   ========================================================================== */
.lmsc-dash__timer-icon,
.lmsc-dash__notes-icon {
	position: relative;
	display: inline-flex;
}

.lmsc-dash__header-action-btn {
	background: none;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	cursor: pointer;
	padding: 8px;
	color: var(--lmsc-text-muted, #6b7280);
	transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
	position: relative;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-dash__header-action-btn:hover {
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08);
	border-color: var(--lmsc-primary);
	color: var(--lmsc-primary);
	transform: scale(1.05);
}

.lmsc-dash__header-action-btn:active,
.lmsc-dash__header-action-btn:focus-visible {
	background: var(--lmsc-action-bg, #1D6BEE);
	border-color: var(--lmsc-primary);
	color: var(--lmsc-action-fg, #fff);
	outline: none;
	transform: scale(1);
}

/* Persisting the active fill after a mouse click left the icon button stuck
   "fully blued". Only keyboard focus (:focus-visible) shows the fill now. */
.lmsc-dash__header-action-btn:focus:not(:focus-visible) {
	background: none;
	border-color: var(--lmsc-border, rgba(0, 0, 0, 0.08));
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-dash__header-action-btn:hover svg,
.lmsc-dash__header-action-btn:active svg,
.lmsc-dash__header-action-btn:focus-visible svg {
	color: inherit;
}

.lmsc-dash__header-action-btn svg {
	width: 20px;
	height: 20px;
	color: var(--lmsc-text-muted, #6b7280);
}

/* ==========================================================================
   Slide-Out Panel System
   ========================================================================== */
.lmsc-dash__slideout-panel {
	position: fixed;
	inset: 0;
	z-index: 999999;
}

/* Respect WP admin bar height when logged in */
body.admin-bar .lmsc-dash__slideout-panel {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .lmsc-dash__slideout-panel {
		top: 46px;
	}
}

.lmsc-dash__slideout-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.3s;
	cursor: pointer;
}

.lmsc-dash__slideout-panel--open .lmsc-dash__slideout-overlay {
	opacity: 1;
}

.lmsc-dash__slideout-drawer {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 420px;
	max-width: 90vw;
	background: var(--lmsc-card-bg, #ffffff);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	overflow-y: auto;
	overflow-x: hidden;
}

.lmsc-dash__slideout-drawer--wide {
	width: 560px;
}

.lmsc-dash__slideout-panel--open .lmsc-dash__slideout-drawer {
	transform: translateX(0);
}

.lmsc-dash__slideout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
	flex-shrink: 0;
}

.lmsc-dash__slideout-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__slideout-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--lmsc-text-muted, #6b7280);
	border-radius: 6px;
	transition: background 0.2s, color 0.2s;
}

.lmsc-dash__slideout-close:hover {
	background: var(--lmsc-bg-hover, #f3f4f6);
	color: var(--lmsc-primary, #3b82f6);
}

.lmsc-dash__slideout-close svg {
	width: 20px;
	height: 20px;
}

.lmsc-dash__slideout-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
}

/* ==========================================================================
   Messaging Slide-Over Panel
   ========================================================================== */
.lmsc-dash__msg-panel {
	position: fixed;
	inset: 0;
	z-index: 999999; /* Must sit above WP admin bar and theme headers */
	pointer-events: none;
}

/* Respect WP admin bar height when logged in */
body.admin-bar .lmsc-dash__msg-panel {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .lmsc-dash__msg-panel {
		top: 46px;
	}
}

.lmsc-dash__msg-panel[style*="display: none"],
.lmsc-dash__msg-panel[style*="display:none"] {
	visibility: hidden;
}

.lmsc-dash__msg-panel--open {
	pointer-events: auto;
}

.lmsc-dash__msg-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.3s;
	cursor: pointer;
}

.lmsc-dash__msg-panel--open .lmsc-dash__msg-overlay {
	opacity: 1;
}

.lmsc-dash__msg-drawer {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 420px;
	max-width: 90vw;
	background: var(--lmsc-card-bg, #ffffff);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}

.lmsc-dash__msg-panel--open .lmsc-dash__msg-drawer {
	transform: translateX(0);
}

.lmsc-dash__msg-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
	flex-shrink: 0;
}

.lmsc-dash__msg-panel-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__msg-panel-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.lmsc-dash__msg-compose-btn,
.lmsc-dash__msg-close-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--lmsc-text-muted, #6b7280);
	border-radius: 6px;
	transition: background 0.2s, color 0.2s;
	line-height: 0;
}

.lmsc-dash__msg-compose-btn:hover,
.lmsc-dash__msg-close-btn:hover {
	background: var(--lmsc-bg-hover, #f3f4f6);
	color: var(--lmsc-primary, #3b82f6);
}

.lmsc-dash__msg-compose-btn svg,
.lmsc-dash__msg-close-btn svg {
	width: 20px;
	height: 20px;
}

.lmsc-dash__msg-inbox {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}

.lmsc-dash__msg-list {
	padding: 0;
}

.lmsc-dash__msg-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-dash__msg-empty p {
	margin: 0;
	font-size: 14px;
}

.lmsc-dash__msg-thread {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.lmsc-dash__msg-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 10px 16px;
	font-size: 14px;
	/* Pin against the theme's global `button{}` styles, which otherwise paint
	   this a solid blue bar with white text (it ignores the active skin). Keep
	   it a flat text button tinted with the skin's primary colour. The skin var
	   resolves even though the drawer renders outside .lmsc-dash. */
	background: none !important;
	color: var(--lmsc-primary, #3b82f6) !important;
	border: none !important;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.lmsc-dash__msg-back-btn:hover,
.lmsc-dash__msg-back-btn:focus {
	background: rgba(127, 127, 127, 0.08) !important;
	color: var(--lmsc-primary, #3b82f6) !important;
	outline: none;
}

.lmsc-dash__msg-back-btn svg {
	width: 16px;
	height: 16px;
}

.lmsc-dash__msg-thread-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.lmsc-dash__msg-reply-form {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--lmsc-border, #e5e7eb);
	flex-shrink: 0;
}

.lmsc-dash__msg-reply-form textarea {
	flex: 1;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	resize: none;
	font-family: inherit;
}

.lmsc-dash__msg-send-btn {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border: none;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	transition: background 0.2s;
	line-height: 0;
}

.lmsc-dash__msg-send-btn:hover {
	filter: brightness(1.1);
}

.lmsc-dash__msg-send-btn svg {
	width: 18px;
	height: 18px;
}

.lmsc-dash__msg-send-btn--full {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.lmsc-dash__msg-compose {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.lmsc-dash__msg-compose-form {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lmsc-dash__msg-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-text-muted, #6b7280);
	margin-bottom: 6px;
}

.lmsc-dash__msg-field input,
.lmsc-dash__msg-field textarea {
	width: 100%;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}

.lmsc-dash__msg-field input:focus,
.lmsc-dash__msg-field textarea:focus {
	outline: none;
	border-color: var(--lmsc-primary, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.lmsc-dash__msg-recipient-results {
	max-height: 160px;
	overflow-y: auto;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 8px;
	margin-top: 4px;
	display: block;
}

.lmsc-dash__msg-recipient-results:empty {
	display: none;
}

.lmsc-dash__msg-selected-recipients {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.lmsc-dash__msg-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 10px;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

/* ==========================================================================
   Enhanced Study Timer Design (Slide-Out Panel)
   ========================================================================== */
.lmsc-dash__slideout-body .lmsc-dash__timer-tab {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-widget {
	text-align: center;
	padding: 24px 16px;
	background: linear-gradient(135deg, rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.04), rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08));
	border-radius: 16px;
	border: 1px solid rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.12);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-display {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-ring-bg {
	stroke: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.1);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-ring-progress {
	stroke: var(--lmsc-primary, #3b82f6);
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: center;
	transition: stroke-dashoffset 0.5s ease;
	filter: drop-shadow(0 0 6px rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.4));
}

.lmsc-dash__slideout-body .lmsc-dash__timer-time {
	font-size: 42px;
	font-weight: 700;
	color: var(--lmsc-text, #1f2937);
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
	z-index: 1;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-label {
	font-size: 13px;
	color: var(--lmsc-text-muted, #6b7280);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: -20px;
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	z-index: 1;
	text-align: center;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-mode {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-context {
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* BuddyBoss assigns a foreground directly to form labels, so the detached
   Timer panel must reassert its active skin text token instead of inheriting. */
.lmsc-dash__slideout-body .lmsc-dash__timer-context label {
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-context select {
	max-width: 100%;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-mode .lmsc-dash__pill {
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--lmsc-border, #e5e7eb);
	background: transparent;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-mode .lmsc-dash__pill--active {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #3b82f6);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-mode .lmsc-dash__pill small {
	opacity: 0.7;
	font-size: 10px;
	margin-left: 2px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-controls {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-controls .lmsc-dash__btn {
	border-radius: 12px;
	font-weight: 600;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.lmsc-dash__slideout-body .lmsc-dash__stat-card--mini {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 12px;
	padding: 12px 8px;
	text-align: center;
	transition: transform 0.2s, box-shadow 0.2s;
}

.lmsc-dash__slideout-body .lmsc-dash__stat-card--mini:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.lmsc-dash__slideout-body .lmsc-dash__stat-card--mini .lmsc-dash__stat-value {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--lmsc-primary, #3b82f6);
	margin-bottom: 2px;
}

.lmsc-dash__slideout-body .lmsc-dash__stat-card--mini .lmsc-dash__stat-label {
	display: block;
	max-width: 100%;
	font-size: 11px;
	color: var(--lmsc-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
	line-height: 1.35;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-goal {
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 12px;
	padding: 16px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-goal-header {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-chart-card {
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 12px;
	padding: 16px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-chart-card h4 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-bars {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 100px;
	gap: 6px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-bar-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-bar {
	width: 100%;
	border-radius: 6px 6px 0 0;
	min-height: 4px;
	background: linear-gradient(to top, var(--lmsc-primary, #3b82f6), rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.6));
	transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-bar-col span {
	font-size: 10px;
	color: var(--lmsc-text-muted, #9ca3af);
	font-weight: 500;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-sessions-card {
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 12px;
	padding: 16px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-sessions-card h4 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-session {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, #f3f4f6);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-session:last-child {
	border-bottom: none;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-session-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-dash__slideout-body .lmsc-dash__timer-session-info strong {
	font-size: 14px;
	color: var(--lmsc-text, #1f2937);
}

.lmsc-dash__slideout-body .lmsc-dash__timer-session-info .lmsc-dash__note-time {
	font-size: 11px;
	color: var(--lmsc-text-muted, #9ca3af);
	display: block;
	margin-top: 1px;
}

/* ==========================================================================
   Enhanced Notes Design (Slide-Out Panel)
   ========================================================================== */
.lmsc-dash__slideout-body .lmsc-dash__notes-tab {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lmsc-dash__slideout-body .lmsc-dash__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.lmsc-dash__slideout-body .lmsc-dash__toolbar-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}

.lmsc-dash__slideout-body .lmsc-dash__toolbar-actions .lmsc-dash__search-input {
	display: none; /* Hide in narrow slideout - not enough room */
}

.lmsc-dash__slideout-body .lmsc-dash__toolbar-actions .lmsc-dash__search-input:focus {
	border-color: var(--lmsc-primary, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.lmsc-dash__slideout-body .lmsc-dash__toolbar-actions .lmsc-dash__btn {
	white-space: nowrap;
	flex-shrink: 0;
}

.lmsc-dash__slideout-body .lmsc-dash__notes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.lmsc-dash__slideout-body .lmsc-dash__note-card {
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 12px;
	padding: 0;
	border-left: none !important;
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
}

.lmsc-dash__slideout-body .lmsc-dash__note-card::before {
	content: '';
	display: block;
	height: 4px;
	background: var(--note-color, #fbbf24);
	border-radius: 12px 12px 0 0;
}

.lmsc-dash__slideout-body .lmsc-dash__note-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lmsc-dash__slideout-body .lmsc-dash__note-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 14px 14px 0;
}

.lmsc-dash__slideout-body .lmsc-dash__note-header h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text, #1f2937);
	line-height: 1.3;
}

.lmsc-dash__slideout-body .lmsc-dash__note-actions {
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.2s;
}

.lmsc-dash__slideout-body .lmsc-dash__note-card:hover .lmsc-dash__note-actions {
	opacity: 1;
}

.lmsc-dash__slideout-body .lmsc-dash__note-content {
	padding: 8px 14px;
	font-size: 13px;
	color: var(--lmsc-text-muted, #6b7280);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

.lmsc-dash__slideout-body .lmsc-dash__note-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-top: 1px solid var(--lmsc-border, #f3f4f6);
}

.lmsc-dash__slideout-body .lmsc-dash__note-tag {
	display: inline-flex;
	align-items: center;
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08);
	color: var(--lmsc-primary, #3b82f6);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 6px;
}

.lmsc-dash__slideout-body .lmsc-dash__note-time {
	font-size: 11px;
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-dash__slideout-body .lmsc-dash__empty-state {
	text-align: center;
	padding: 32px 16px;
}

.lmsc-dash__slideout-body .lmsc-dash__empty-state svg {
	opacity: 0.3;
	margin-bottom: 8px;
}

.lmsc-dash__slideout-body .lmsc-dash__empty-state h3 {
	font-size: 16px;
	margin: 0 0 4px;
}

.lmsc-dash__slideout-body .lmsc-dash__empty-state p {
	font-size: 13px;
	color: var(--lmsc-text-muted, #9ca3af);
	margin: 0;
}

.lmsc-dash__slideout-body .lmsc-dash__bookmarks-view .lmsc-dash__bookmark-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 10px;
	margin-bottom: 8px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.lmsc-dash__slideout-body .lmsc-dash__bookmark-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Slide-Out Dark Mode
   ========================================================================== */
.lmsc-dash--dark .lmsc-dash__slideout-drawer {
	background: var(--lmsc-card-bg, #1e293b);
}

.lmsc-dash--dark .lmsc-dash__slideout-overlay {
	background: rgba(0, 0, 0, 0.5);
}

.lmsc-dash--dark .lmsc-dash__slideout-body .lmsc-dash__timer-widget {
	background: linear-gradient(135deg, rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08), rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.14));
}

.lmsc-dash--dark .lmsc-dash__slideout-body .lmsc-dash__note-card::before {
	opacity: 0.8;
}

/* ==========================================================================
   Slide-Out Responsive
   ========================================================================== */
@media (max-width: 480px) {

	.lmsc-dash__slideout-drawer,
	.lmsc-dash__slideout-drawer--wide {
		width: 100%;
		max-width: 100%;
	}

	.lmsc-dash__slideout-body .lmsc-dash__timer-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.lmsc-dash__slideout-drawer--wide {
		width: 90vw;
	}
}

/* ========== Admin Reports View Toggle ========== */
.lmsc-reports-view-toggle {
	display: flex;
	gap: 8px;
	margin: 16px 0 20px;
	padding: 4px;
	background: var(--lmsc-sidebar-bg, #f1f5f9);
	border-radius: 10px;
	width: fit-content;
}

.lmsc-reports-view-toggle .lmsc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--lmsc-text-muted, #64748b);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lmsc-reports-view-toggle .lmsc-pill:hover {
	background: rgba(var(--lmsc-accent-rgb, 99, 102, 241), 0.08);
}

.lmsc-reports-view-toggle .lmsc-pill--active {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	box-shadow: 0 2px 8px rgba(var(--lmsc-primary-rgb, 0, 122, 255), 0.3);
}

.lmsc-reports-view-toggle .lmsc-pill svg {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.lmsc-reports-view-toggle {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
		width: 100%;
	}

	.lmsc-reports-view-toggle .lmsc-pill {
		justify-content: center;
		min-width: 0;
		padding: 8px 5px;
		line-height: 1.2;
		white-space: normal;
	}

	.lmsc-reports-view-toggle .lmsc-pill svg {
		display: none;
	}
}

/* Admin Recent Completions List */
.lmsc-admin-recent-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lmsc-admin-recent-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	transition: box-shadow 0.2s ease;
}

.lmsc-admin-recent-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.lmsc-admin-recent-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.lmsc-admin-recent-info {
	flex: 1;
	font-size: 13px;
	line-height: 1.4;
}

.lmsc-admin-recent-date {
	font-size: 12px;
	white-space: nowrap;
}

/* Dark mode overrides */
.lmsc-dash--dark .lmsc-reports-view-toggle {
	background: rgba(255, 255, 255, 0.05);
}

.lmsc-dash--dark .lmsc-admin-recent-item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

/* ════════════════════════════════════════════════════════ */
/*  LEARNING PATHS - Student Visualization  (Premium)      */
/* ════════════════════════════════════════════════════════ */

/* ── Entrance Animation ──────────────────────────── */
@keyframes lpFadeUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lpScaleIn {
	from {
		opacity: 0;
		transform: scale(0.85);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes lpNodeGlow {

	0%,
	100% {
		box-shadow: 0 0 0 5px rgba(99, 102, 241, .18);
	}

	50% {
		box-shadow: 0 0 0 12px rgba(99, 102, 241, .06), 0 0 28px rgba(99, 102, 241, .12);
	}
}

@keyframes lpShimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

/* ── Empty State ─────────────────────────────────── */
.lmsc-lp-student-empty {
	text-align: center;
	padding: 80px 24px;
	background: linear-gradient(160deg, rgba(99, 102, 241, .04) 0%, rgba(236, 72, 153, .03) 50%, transparent 100%);
	border-radius: 24px;
	border: 1px dashed rgba(99, 102, 241, .15);
	animation: lpFadeUp .5s ease-out both;
}

.lmsc-lp-student-empty-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	background: linear-gradient(135deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-primary));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 32px rgba(99, 102, 241, .25), 0 0 0 6px rgba(99, 102, 241, .08);
	animation: lpScaleIn .5s ease-out both;
}

.lmsc-lp-student-empty-icon svg {
	color: #fff;
}

.lmsc-lp-student-empty h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
	background: linear-gradient(135deg, var(--lmsc-primary), var(--lmsc-accent, var(--lmsc-primary)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.lmsc-lp-student-empty p {
	color: #64748b;
	max-width: 400px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.7;
}

/* ── Path Selector ───────────────────────────────── */
.lmsc-lp-selector {
	animation: lpFadeUp .45s ease-out both;
}

.lmsc-lp-selector-title {
	font-size: 19px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	letter-spacing: -.02em;
}

.lmsc-lp-selector-title svg {
	color: var(--lmsc-accent, var(--lmsc-primary));
	filter: drop-shadow(0 2px 4px rgba(99, 102, 241, .25));
}

.lmsc-lp-selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

/* ── Selector Card ───────────────────────────────── */
.lmsc-lp-select-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	min-height: 104px; /* keeps every card the same height so rows align */
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e5ea);
	border-radius: 20px;
	cursor: pointer;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 0 0 1px rgba(99, 102, 241, .03);
	animation: lpFadeUp .5s ease-out both;
}

/* Uniform card background - colour comes from the icon tile + progress fill,
   so every card reads as part of one consistent set (no per-card tint). */

/* staggered entrance for cards */
.lmsc-lp-select-card:nth-child(1) { animation-delay: .05s; }
.lmsc-lp-select-card:nth-child(2) { animation-delay: .1s; }
.lmsc-lp-select-card:nth-child(3) { animation-delay: .15s; }
.lmsc-lp-select-card:nth-child(4) { animation-delay: .2s; }

/* Left accent bar */
.lmsc-lp-select-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-accent, var(--lmsc-primary)));
	opacity: 0;
	transition: opacity .25s;
	border-radius: 3px 0 0 3px;
}

/* Remove the old top shimmer line */
.lmsc-lp-select-card::after {
	display: none;
}

.lmsc-lp-select-card:hover::before {
	opacity: 1;
}

.lmsc-lp-select-card:hover {
	border-color: rgba(99, 102, 241, .3);
	box-shadow:
		0 8px 28px rgba(99, 102, 241, .12),
		0 4px 10px rgba(0, 0, 0, .04),
		0 0 0 1px rgba(99, 102, 241, .08);
	transform: translateY(-4px) scale(1.01);
}

.lmsc-lp-select-card:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(99, 102, 241, .08);
}

/* ── Icon badge ──────────────────────────────────── */
.lmsc-lp-select-icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15), 0 0 0 3px rgba(255, 255, 255, .15);
	position: relative;
	z-index: 1;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
}

.lmsc-lp-select-card:hover .lmsc-lp-select-icon {
	transform: scale(1.06);
}

.lmsc-lp-select-icon svg {
	width: 22px;
	height: 22px;
}

/* thumbnail rendered as the left media tile (same size/position as the icon)
   so cards with and without an image stay perfectly consistent */
.lmsc-lp-select-icon--thumb {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ── Info block ──────────────────────────────────── */
.lmsc-lp-select-info {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.lmsc-lp-select-info h4 {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--lmsc-text, #1e293b);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* clamp long titles to 2 lines so rows stay aligned */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lmsc-lp-select-info span {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 500;
}

.lmsc-lp-select-arrow {
	flex-shrink: 0;
	color: #c7d2fe;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	position: relative;
	z-index: 1;
}

.lmsc-lp-select-card:hover .lmsc-lp-select-arrow {
	transform: translateX(5px);
	color: var(--lmsc-accent, var(--lmsc-primary));
}

/* ── Learning Path Progress Bar (#14) ──────────── */
.lmsc-lp-progress-bar {
	width: 100%;
	height: 6px;
	background: rgba(0, 0, 0, 0.09);
	border-radius: 99px;
	margin-top: 10px;
	overflow: hidden;
}

.lmsc-lp-progress-fill {
	height: 100%;
	border-radius: 99px;
	transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
}

.lmsc-lp-progress-label {
	font-size: 11px;
	color: var(--lmsc-text-muted, #64748b);
	margin-top: 5px;
	font-weight: 500;
}

.lmsc-lp-select-cta {
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lmsc-accent, var(--lmsc-primary));
	opacity: 0.55; /* always visible so every card has a clear call-to-action */
	transform: translateX(0);
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

.lmsc-lp-select-card:hover .lmsc-lp-select-cta {
	opacity: 1;
	transform: translateX(3px);
}

/* ── Back Button ─────────────────────────────────── */
.lmsc-lp-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(99, 102, 241, .08);
	border: 1px solid rgba(99, 102, 241, .18);
	color: var(--lmsc-accent, var(--lmsc-primary));
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 16px;
	margin-bottom: 18px;
	transition: all .25s;
	border-radius: 10px;
}

.lmsc-lp-back-btn:hover {
	background: rgba(99, 102, 241, .14);
	border-color: rgba(99, 102, 241, .30);
	box-shadow: 0 2px 8px rgba(99, 102, 241, .12);
	color: var(--lmsc-primary);
}

/* ── Roadmap Header ──────────────────────────────── */
.lmsc-lp-rh {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	padding: 32px 36px;
	background:
		radial-gradient(ellipse at 0% 50%, rgba(99, 102, 241, .06) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 50%, rgba(139, 92, 246, .04) 0%, transparent 50%),
		var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e5ea);
	border-radius: 20px;
	margin-bottom: 32px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .04), 0 0 0 1px rgba(99, 102, 241, .04);
	animation: lpFadeUp .45s ease-out both;
}

/* Decorative dot grid pattern */
.lmsc-lp-rh::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(99, 102, 241, .08) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
	opacity: .5;
	z-index: 0;
}

.lmsc-lp-rh > * {
	position: relative;
	z-index: 1;
}

/* Left accent bar */
.lmsc-lp-rh::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, var(--lmsc-primary), var(--lmsc-accent, var(--lmsc-primary)), #c4b5fd);
	border-radius: 4px 0 0 4px;
	z-index: 1;
}

.lmsc-lp-rh-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.3;
	background: linear-gradient(135deg, #1e293b, var(--lmsc-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.lmsc-lp-rh-desc {
	margin: 0 0 10px;
	color: #64748b;
	font-size: 13px;
	line-height: 1.6;
	max-width: 420px;
}

.lmsc-lp-rh-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* Conic-gradient progress circle */
.lmsc-lp-rh-circle {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: conic-gradient(
		var(--lp-color, var(--lmsc-primary)) calc(var(--lp-pct, 0) * 1%),
		#f1f5f9 calc(var(--lp-pct, 0) * 1%)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow:
		0 0 0 4px rgba(99, 102, 241, .1),
		0 4px 16px rgba(99, 102, 241, .15);
	transition: box-shadow .3s;
}

.lmsc-lp-rh-circle:hover {
	box-shadow:
		0 0 0 6px rgba(99, 102, 241, .15),
		0 8px 28px rgba(99, 102, 241, .2);
}

.lmsc-lp-rh-circle::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--lmsc-card-bg, #fff);
}

.lmsc-lp-rh-circle-pct {
	position: relative;
	z-index: 1;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-lp-rh-stats {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lmsc-lp-rh-label {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 600;
	line-height: 1.4;
}

/* ── Nodes Container ─────────────────────────────── */
.lmsc-lp-nodes {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding: 20px 20px 40px;
}

/* ── Individual Node ─────────────────────────────── */
.lmsc-lp-node {
	display: flex;
	align-items: center;
	gap: 18px;
	position: relative;
	margin-bottom: 20px;
	padding-top: 8px;
	width: 100%;
	max-width: 500px;
	animation: lpFadeUp .45s ease-out both;
}

/* staggered entrance */
.lmsc-lp-node:nth-child(1) {
	animation-delay: .1s;
}

.lmsc-lp-node:nth-child(2) {
	animation-delay: .2s;
}

.lmsc-lp-node:nth-child(3) {
	animation-delay: .3s;
}

.lmsc-lp-node:nth-child(4) {
	animation-delay: .4s;
}

.lmsc-lp-node:nth-child(5) {
	animation-delay: .5s;
}

.lmsc-lp-node:nth-child(6) {
	animation-delay: .6s;
}

.lmsc-lp-node:last-child {
	margin-bottom: 0;
}

/* Zigzag left/right alignment is handled by .lmsc-lp-nodes--snake overrides */

/* ── Connector ───────────────────────────────────── */
.lmsc-lp-connector {
	position: absolute;
	left: 28px;
	top: 58px;
	bottom: -20px;
	transform: translateX(-50%);
	width: 4px;
	z-index: 0;
	overflow: visible;
}

.lmsc-lp-connector svg {
	width: 4px;
	height: 100%;
}

/* ── Node Circle ─────────────────────────────────── */
.lmsc-lp-node-circle {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
	color: #64748b;
	font-weight: 800;
	font-size: 16px;
	transition: all .35s cubic-bezier(.4, 0, .2, 1);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, .1),
		0 0 0 4px rgba(0, 0, 0, .04);
}

.lmsc-lp-node--completed .lmsc-lp-node-circle {
	color: #fff;
	box-shadow:
		0 6px 24px rgba(34, 197, 94, .35),
		0 0 0 5px rgba(34, 197, 94, .15),
		0 0 40px rgba(34, 197, 94, .1);
}

.lmsc-lp-node--in-progress .lmsc-lp-node-circle {
	color: #fff;
	box-shadow:
		0 0 0 6px rgba(99, 102, 241, .2),
		0 0 30px rgba(99, 102, 241, .15);
	animation: lpNodeGlow 2.5s ease-in-out infinite;
}

.lmsc-lp-node--available .lmsc-lp-node-circle {
	background: linear-gradient(135deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-accent, var(--lmsc-primary)));
	color: #fff;
	box-shadow:
		0 4px 16px rgba(99, 102, 241, .25),
		0 0 0 4px rgba(99, 102, 241, .1);
}

.lmsc-lp-node--locked .lmsc-lp-node-circle {
	background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
	color: #b0bec5;
	opacity: .8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

.lmsc-lp-node-ring {
	position: absolute;
	inset: -3px;
}

.lmsc-lp-node-ring svg {
	width: 100%;
	height: 100%;
}

.lmsc-lp-node-pct {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.lmsc-lp-node-num {
	font-size: 18px;
	font-weight: 900;
}

.lmsc-lp-node-card {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
	min-width: 0;
	padding: 20px 24px;
	background: #fff;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1.5px solid rgba(99, 102, 241, .15);
	border-radius: 20px;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	position: relative;
	z-index: 2;
	overflow: hidden;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, .07),
		0 8px 28px rgba(0, 0, 0, .04),
		inset 0 1px 0 rgba(255, 255, 255, .9);
}

.lmsc-lp-node:not(.lmsc-lp-node--locked) .lmsc-lp-node-card {
	cursor: pointer;
}

.lmsc-lp-node:not(.lmsc-lp-node--locked) .lmsc-lp-node-card:hover {
	border-color: rgba(99, 102, 241, .4);
	box-shadow:
		0 8px 24px rgba(99, 102, 241, .12),
		0 16px 48px rgba(99, 102, 241, .08),
		inset 0 1px 0 rgba(255, 255, 255, .9);
	transform: translateY(-4px) scale(1.02);
}

.lmsc-lp-node--completed .lmsc-lp-node-card {
	border-color: rgba(34, 197, 94, .2);
	background: linear-gradient(140deg, rgba(34, 197, 94, .03) 0%, var(--lmsc-card-bg, #fff) 100%);
}

.lmsc-lp-node--completed .lmsc-lp-node-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #22c55e, #86efac);
	border-radius: 18px 18px 0 0;
	opacity: .6;
}

.lmsc-lp-node--in-progress .lmsc-lp-node-card {
	border-color: rgba(99, 102, 241, .2);
	box-shadow: 0 3px 16px rgba(99, 102, 241, .06);
	background: linear-gradient(140deg, rgba(99, 102, 241, .03) 0%, var(--lmsc-card-bg, #fff) 100%);
}

.lmsc-lp-node--in-progress .lmsc-lp-node-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--lmsc-primary), var(--lmsc-accent, var(--lmsc-primary)));
	border-radius: 18px 18px 0 0;
	opacity: .6;
}

.lmsc-lp-node--locked .lmsc-lp-node-card {
	opacity: .7;
}

/* Node thumb */
.lmsc-lp-node-thumb {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	transition: transform .3s;
}

.lmsc-lp-node:not(.lmsc-lp-node--locked):hover .lmsc-lp-node-thumb {
	transform: scale(1.05);
}

.lmsc-lp-node-info {
	flex: 1;
	min-width: 0;
}

.lmsc-lp-node-title {
	display: block;
	font-size: 16px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -.02em;
	color: var(--lmsc-text, #0f172a);
}

.lmsc-lp-node-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #64748b;
	margin-top: 5px;
	font-weight: 600;
}

.lmsc-lp-node-arrow {
	flex-shrink: 0;
	color: #cbd5e1;
	transition: all .28s cubic-bezier(.4, 0, .2, 1);
}

.lmsc-lp-node:not(.lmsc-lp-node--locked):hover .lmsc-lp-node-arrow {
	transform: translateX(5px);
	color: var(--lmsc-accent, var(--lmsc-primary));
}

/* ── Status Badges ───────────────────────────────── */
.lmsc-lp-badge-done {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 99px;
	background: linear-gradient(135deg, #dcfce7, #bbf7d0);
	color: #15803d;
	letter-spacing: .02em;
	text-transform: uppercase;
	box-shadow: 0 1px 4px rgba(34, 197, 94, .12);
}

.lmsc-lp-badge-progress {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 99px;
	background: linear-gradient(135deg, #ede9fe, #ddd6fe);
	color: var(--lmsc-primary);
	letter-spacing: .02em;
	box-shadow: 0 1px 4px rgba(99, 102, 241, .1);
}

.lmsc-lp-badge-locked {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 99px;
	background: #f1f5f9;
	color: #94a3b8;
}

.lmsc-lp-badge-avail {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 99px;
	background: linear-gradient(135deg, #dbeafe, #bfdbfe);
	color: var(--lmsc-primary);
	letter-spacing: .02em;
	box-shadow: 0 1px 4px rgba(37, 99, 235, .1);
}

/* ── Prerequisite explainer (locked steps) ───────── */
.lmsc-lp-node-prereq {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.4;
	color: #64748b;
}

.lmsc-lp-node-prereq svg {
	flex-shrink: 0;
	color: #94a3b8;
}

.lmsc-lp-node-prereq strong {
	color: #475569;
	font-weight: 600;
}

.lmsc-dash--dark .lmsc-lp-node-prereq {
	color: #94a3b8;
}

.lmsc-dash--dark .lmsc-lp-node-prereq strong {
	color: #cbd5e1;
}

/* ── Respect users who prefer reduced motion ─────── */
@media (prefers-reduced-motion: reduce) {
	.lmsc-dash-wrap *,
	.lmsc-dash-wrap *::before,
	.lmsc-dash-wrap *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.lmsc-lp-cpt-turn svg,
	.lmsc-lp-gx-connector,
	.lmsc-lp-node-arrow {
		animation: none !important;
	}
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
	.lmsc-lp-rh {
		flex-direction: column;
		text-align: center;
		padding: 24px 20px;
	}

	.lmsc-lp-rh::before {
		height: 4px;
	}

	.lmsc-lp-node--left,
	.lmsc-lp-node--right {
		flex-direction: row;
		margin-left: auto;
		margin-right: auto;
	}

	.lmsc-lp-nodes {
		padding: 0 8px;
	}

	.lmsc-lp-selector-grid {
		grid-template-columns: 1fr;
	}

	.lmsc-lp-node {
		max-width: 100%;
	}
}

/* ── Dark Mode ───────────────────────────────────── */
.lmsc-dash--dark .lmsc-lp-student-empty {
	background: linear-gradient(160deg, rgba(99, 102, 241, .07) 0%, rgba(168, 139, 250, .04) 50%, transparent 100%);
	border-color: rgba(99, 102, 241, .1);
}

.lmsc-dash--dark .lmsc-lp-student-empty h3 {
	background: linear-gradient(135deg, var(--lmsc-primary-soft), var(--lmsc-primary-soft));
	-webkit-background-clip: text;
	background-clip: text;
}

.lmsc-dash--dark .lmsc-lp-select-card {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);
}

.lmsc-dash--dark .lmsc-lp-select-card::before {
	background: linear-gradient(135deg, rgba(99, 102, 241, .1) 0%, rgba(168, 139, 250, .06) 50%, transparent 100%);
}

.lmsc-dash--dark .lmsc-lp-select-info h4 {
	color: var(--lmsc-text, #f1f5f9);
}

.lmsc-dash--dark .lmsc-lp-select-info span {
	color: #94a3b8;
}

.lmsc-dash--dark .lmsc-lp-rh {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2), 0 0 0 1px rgba(99, 102, 241, .08);
	background:
		radial-gradient(ellipse at 0% 50%, rgba(99, 102, 241, .1) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 50%, rgba(139, 92, 246, .06) 0%, transparent 50%),
		var(--lmsc-card-bg, #1e293b);
}

.lmsc-dash--dark .lmsc-lp-rh::before {
	opacity: 1;
}

.lmsc-dash--dark .lmsc-lp-rh::after {
	background-image: radial-gradient(rgba(99, 102, 241, .1) 1px, transparent 1px);
	opacity: .3;
}

.lmsc-dash--dark .lmsc-lp-rh-title {
	background: linear-gradient(135deg, #e2e8f0, var(--lmsc-primary-soft));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.lmsc-dash--dark .lmsc-lp-rh-pct {
	color: var(--lmsc-primary-soft);
}

.lmsc-dash--dark .lmsc-lp-node-circle {
	background: linear-gradient(145deg, #374151, #1f2937);
	color: #9ca3af;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.lmsc-dash--dark .lmsc-lp-node--locked .lmsc-lp-node-circle {
	background: linear-gradient(145deg, #1f2937, #111827);
	color: #4b5563;
}

.lmsc-dash--dark .lmsc-lp-node-card {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .08);
}

.lmsc-dash--dark .lmsc-lp-node--completed .lmsc-lp-node-card {
	border-color: rgba(34, 197, 94, .15);
	background: linear-gradient(140deg, rgba(34, 197, 94, .06) 0%, var(--lmsc-card-bg, #1e293b) 100%);
}

.lmsc-dash--dark .lmsc-lp-node--in-progress .lmsc-lp-node-card {
	border-color: rgba(99, 102, 241, .15);
	background: linear-gradient(140deg, rgba(99, 102, 241, .06) 0%, var(--lmsc-card-bg, #1e293b) 100%);
}

.lmsc-dash--dark .lmsc-lp-badge-done {
	background: rgba(34, 197, 94, .15);
	color: #4ade80;
	box-shadow: 0 1px 4px rgba(34, 197, 94, .08);
}

.lmsc-dash--dark .lmsc-lp-badge-progress {
	background: rgba(99, 102, 241, .15);
	color: var(--lmsc-primary-soft);
	box-shadow: 0 1px 4px rgba(99, 102, 241, .06);
}

.lmsc-dash--dark .lmsc-lp-badge-locked {
	background: rgba(148, 163, 184, .08);
	color: #64748b;
}

.lmsc-dash--dark .lmsc-lp-badge-avail {
	background: rgba(37, 99, 235, .15);
	color: #93c5fd;
	box-shadow: 0 1px 4px rgba(37, 99, 235, .06);
}

/* ════════════════════════════════════════════════════════ */
/*  LAYOUT VARIANTS - 6 DISTINCT STYLES                      */
/* ════════════════════════════════════════════════════════ */

/* ═══ 1. DEFAULT ZIGZAG - alternating left/right with center timeline ═══ */
.lmsc-lp-nodes--snake {
	display: grid;
	grid-template-columns: 1fr 48px 1fr;
	row-gap: 40px;
	column-gap: 0;
	position: relative;
	padding: 32px 16px;
	max-width: 860px;
	margin: 0 auto;
}

/* Center timeline line - replaced by winding road SVG from JS */
.lmsc-lp-nodes--snake::before {
	display: none;
}

/* ── Winding Road SVG ────────────────────────────── */
.lmsc-lp-winding-road {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
	opacity: 0;
	animation: lpRoadFadeIn .8s ease-out .2s forwards;
}

@keyframes lpRoadFadeIn {
	to { opacity: 1; }
}

.lmsc-lp-road-edge {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .1));
}

/* Dark mode road */
.lmsc-dash--dark .lmsc-lp-road-edge {
	stroke: #374151;
}

.lmsc-dash--dark .lmsc-lp-road-surface {
	stroke: #0f172a;
}

.lmsc-dash--dark .lmsc-lp-road-dash {
	stroke: rgba(255, 255, 255, .5);
}

.lmsc-lp-nodes--snake .lmsc-lp-connector {
	display: none;
}

/* ── Node base - each node spans ALL 3 parent columns, gets own row ── */
.lmsc-lp-nodes--snake .lmsc-lp-node {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 48px 1fr;
	align-items: center;
	position: relative;
	width: auto;
	max-width: none;
	margin-bottom: 0;
	gap: 0;
	overflow: visible;
	min-width: 0;
}

/* ── Left nodes: card in col 1, circle in col 2 ── */
.lmsc-lp-nodes--snake .lmsc-lp-node--left .lmsc-lp-node-card {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	flex-direction: row-reverse;
}

.lmsc-lp-nodes--snake .lmsc-lp-node--left .lmsc-lp-node-circle {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	position: static;
	z-index: 4;
}

/* ── Right nodes: circle in col 2, card in col 3 ── */
.lmsc-lp-nodes--snake .lmsc-lp-node--right .lmsc-lp-node-card {
	grid-column: 3;
	grid-row: 1;
	text-align: left;
}

.lmsc-lp-nodes--snake .lmsc-lp-node--right .lmsc-lp-node-circle {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	position: static;
	z-index: 4;
}

/* Card overrides for zigzag - prevent stretching */
.lmsc-lp-nodes--snake .lmsc-lp-node-card {
	flex: 0 1 auto;
	max-width: 100%;
	min-width: 0;
}

/* Truncate long titles in zigzag cards */
.lmsc-lp-nodes--snake .lmsc-lp-node-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.lmsc-lp-nodes--snake .lmsc-lp-node--left .lmsc-lp-node-info {
	align-items: flex-end;
}

/* ── Connector dot between rows on the timeline ── */
.lmsc-lp-nodes--snake .lmsc-lp-node::after {
	content: '';
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lmsc-accent, var(--lmsc-primary));
	opacity: .2;
	z-index: 3;
}

.lmsc-lp-nodes--snake .lmsc-lp-node:last-child::after {
	display: none;
}

/* Active node glow on zigzag */
.lmsc-lp-nodes--snake .lmsc-lp-node--active .lmsc-lp-node-card {
	box-shadow: 0 0 0 2px var(--lmsc-accent, var(--lmsc-primary)), 0 8px 25px rgba(99, 102, 241, .15);
}

/* "You are here" label - now lives inside the circle element (v2.2.6.11) */
/* Zigzag-specific overrides removed; generic positioning handles all layouts. */

/* ══ 2. STRAIGHT - clean vertical with gradient rail ═══════ */
.lmsc-lp-nodes--straight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	position: relative;
	padding: 24px 0;
}

.lmsc-lp-nodes--straight::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #e2e8f0 0%, var(--lmsc-accent, var(--lmsc-primary)) 40%, var(--lmsc-accent, var(--lmsc-primary)) 60%, #e2e8f0 100%);
	border-radius: 4px;
	transform: translateX(-50%);
	opacity: .2;
}

.lmsc-lp-nodes--straight .lmsc-lp-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding-bottom: 0;
}

.lmsc-lp-nodes--straight .lmsc-lp-node-card {
	width: 100%;
	max-width: 440px;
}

.lmsc-lp-nodes--straight .lmsc-lp-connector {
	position: static;
	height: 36px;
	display: flex;
	justify-content: center;
}

/* ══ 3. TIMELINE - thick left rail with step labels ════════ */
.lmsc-lp-nodes--timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 80px;
	position: relative;
}

.lmsc-lp-nodes--timeline::before {
	content: '';
	position: absolute;
	left: 99px;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-primary-soft));
	border-radius: 4px;
	opacity: .25;
}

.lmsc-lp-nodes--timeline .lmsc-lp-node {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	position: relative;
	padding: 14px 0;
}

.lmsc-lp-nodes--timeline .lmsc-lp-connector {
	display: none;
}

.lmsc-lp-nodes--timeline .lmsc-lp-tl-label {
	position: absolute;
	left: -80px;
	top: 20px;
	width: 60px;
	text-align: right;
	font-size: 11px;
	font-weight: 800;
	color: var(--lmsc-accent, var(--lmsc-primary));
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .6;
}

.lmsc-lp-nodes--timeline .lmsc-lp-node-circle {
	position: relative;
	z-index: 2;
	width: 44px;
	height: 44px;
	font-size: 13px;
}

.lmsc-lp-nodes--timeline .lmsc-lp-node-card {
	flex: 1;
	padding: 16px 20px;
}

/* ══ 4. COMPACT - grid with snake-flow arrows ══════════════ */
.lmsc-lp-nodes--compact {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 24px 0;
	align-items: stretch;
}

/* ── Row container ── */
.lmsc-lp-cpt-row {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 8px;
}

.lmsc-lp-cpt-row--rtl {
	flex-direction: row-reverse;
}

/* ── Card ── */
.lmsc-lp-cpt-card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid rgba(226, 229, 234, .6);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
	position: relative;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	cursor: pointer;
}

.lmsc-lp-cpt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(99, 102, 241, .12), 0 2px 8px rgba(0, 0, 0, .06);
	border-color: rgba(99, 102, 241, .3);
}

.lmsc-lp-cpt-card.lmsc-lp-node--completed {
	border-left: 3px solid #22c55e;
}

.lmsc-lp-cpt-card.lmsc-lp-node--in-progress {
	border-left: 3px solid var(--lmsc-accent, var(--lmsc-primary));
}

.lmsc-lp-cpt-card.lmsc-lp-node--locked {
	opacity: .55;
}

.lmsc-lp-cpt-card.lmsc-lp-node--locked:hover {
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
	border-color: rgba(226, 229, 234, .6);
}

/* ── Status circle ── */
.lmsc-lp-cpt-circle {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.lmsc-lp-cpt-circle svg {
	width: 18px;
	height: 18px;
}

/* ── Body (title + meta) ── */
.lmsc-lp-cpt-body {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.lmsc-lp-cpt-body .lmsc-lp-node-title {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: -.01em;
	line-height: 1.4;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-lp-cpt-body .lmsc-lp-node-meta {
	font-size: 11px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.lmsc-lp-cpt-body .lmsc-lp-node-meta .lmsc-lp-badge-done,
.lmsc-lp-cpt-body .lmsc-lp-node-meta .lmsc-lp-badge-progress,
.lmsc-lp-cpt-body .lmsc-lp-node-meta .lmsc-lp-badge-locked,
.lmsc-lp-cpt-body .lmsc-lp-node-meta .lmsc-lp-badge-avail,
.lmsc-lp-cpt-body .lmsc-lp-node-meta .lmsc-lp-badge-type {
	white-space: nowrap;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 6px;
}

/* ── Flow arrow between cards ── */
.lmsc-lp-cpt-arrow {
	flex-shrink: 0;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lmsc-accent, var(--lmsc-primary));
	opacity: .35;
}

.lmsc-lp-cpt-arrow svg {
	width: 18px;
	height: 18px;
}

/* Flip arrows in RTL (reversed) rows */
.lmsc-lp-cpt-row--rtl .lmsc-lp-cpt-arrow svg {
	transform: scaleX(-1);
}

/* ── Turn arrow between rows ── */
.lmsc-lp-cpt-turn {
	display: flex;
	padding: 8px 0;
	color: var(--lmsc-accent, var(--lmsc-primary));
	opacity: .7;
}

.lmsc-lp-cpt-turn--right {
	justify-content: flex-end;
	padding-right: 40px;
}

.lmsc-lp-cpt-turn--left {
	justify-content: flex-start;
	padding-left: 40px;
}

.lmsc-lp-cpt-turn svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 2px 4px rgba(99, 102, 241, .25));
	animation: lmscCptBounce 1.8s ease-in-out infinite;
}

@keyframes lmscCptBounce {
	0%, 100% { transform: translateY(0); opacity: .7; }
	50% { transform: translateY(5px); opacity: 1; }
}

/* ── Active card (you are here) ── */
.lmsc-lp-nodes--compact .lmsc-lp-node--active {
	padding-top: 16px;
	margin-top: 0;
}

.lmsc-lp-nodes--compact .lmsc-lp-you-are-here {
	top: -24px;
}

.lmsc-lp-nodes--compact .lmsc-lp-milestone-marker {
	top: -8px;
	right: 8px;
}

/* ── Responsive: 2 columns on tablet ── */
@media (max-width: 1024px) {
	.lmsc-lp-cpt-row {
		flex-wrap: wrap;
		gap: 10px;
	}
	.lmsc-lp-cpt-card {
		flex: 1 1 calc(50% - 10px);
		min-width: 220px;
	}
	.lmsc-lp-cpt-arrow {
		display: none;
	}
	.lmsc-lp-cpt-turn {
		justify-content: center;
		padding: 6px 0;
	}
	.lmsc-lp-cpt-turn--right,
	.lmsc-lp-cpt-turn--left {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── Responsive: 1 column on mobile - drop turn arrows entirely ── */
@media (max-width: 640px) {
	.lmsc-lp-nodes--compact {
		padding: 16px 0;
	}
	.lmsc-lp-cpt-row {
		gap: 10px;
	}
	.lmsc-lp-cpt-card {
		flex: 1 1 100%;
		min-width: 0;
		padding: 14px 14px;
		gap: 12px;
	}
	.lmsc-lp-cpt-circle {
		width: 40px;
		height: 40px;
	}
	.lmsc-lp-cpt-body .lmsc-lp-node-title {
		white-space: normal;
	}
	/* Turn arrows are meaningless in a single column - hide them */
	.lmsc-lp-cpt-turn {
		display: none;
	}
	/* "You are here" label sits more snugly on tight screens */
	.lmsc-lp-nodes--compact .lmsc-lp-you-are-here {
		top: -8px;
		font-size: 10px;
	}
}


/* ══ 5. GALAXY - space map ═════════════════════════════════ */
.lmsc-lp-nodes--galaxy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 40px 32px;
	background:
		radial-gradient(ellipse at 20% 10%, rgba(99, 102, 241, .12) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 85%, rgba(139, 92, 246, .08) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 50%, rgba(30, 27, 75, .97) 0%, #0f0e2a 100%);
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}

/* Twinkling stars - layer 1 */
.lmsc-lp-nodes--galaxy::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,.5) 50%, transparent 50%),
		radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.35) 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 35% 8%, rgba(255,255,255,.45) 50%, transparent 50%),
		radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,.4) 50%, transparent 50%),
		radial-gradient(1px 1px at 88% 15%, rgba(255,255,255,.5) 50%, transparent 50%),
		radial-gradient(1px 1px at 15% 78%, rgba(255,255,255,.3) 50%, transparent 50%),
		radial-gradient(1.5px 1.5px at 75% 55%, rgba(255,255,255,.35) 50%, transparent 50%),
		radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,.3) 50%, transparent 50%),
		radial-gradient(1px 1px at 92% 72%, rgba(167,139,250,.4) 50%, transparent 50%);
	animation: lp-twinkle 3s ease-in-out infinite alternate;
	pointer-events: none;
}

.lmsc-lp-nodes--galaxy::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 5% 55%, rgba(167,139,250,.3) 50%, transparent 50%),
		radial-gradient(1px 1px at 45% 65%, rgba(99,102,241,.25) 50%, transparent 50%),
		radial-gradient(1px 1px at 82% 40%, rgba(139,92,246,.3) 50%, transparent 50%);
	animation: lp-twinkle 5s ease-in-out 1.5s infinite alternate;
	pointer-events: none;
}

@keyframes lp-twinkle {
	from { opacity: .25; }
	to { opacity: .75; }
}

/* ── Galaxy Node - centered card ── */
.lmsc-lp-gx-node {
	display: flex;
	align-items: center;
	gap: 0;
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 520px;
	padding: 0;
}

/* Remove old zigzag */
.lmsc-lp-gx-node:nth-child(odd),
.lmsc-lp-gx-node:nth-child(even) {
	align-self: center;
	margin: 0;
	flex-direction: row;
}

/* ── Planet (3D sphere) ── */
.lmsc-lp-gx-orbit {
	position: relative;
	flex-shrink: 0;
	z-index: 3;
}

/* Spinning orbit ring */
.lmsc-lp-gx-orbit::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1.5px dashed rgba(99, 102, 241, .2);
	animation: lp-orbit-spin 25s linear infinite;
}

@keyframes lp-orbit-spin {
	to { transform: rotate(360deg); }
}

/* Pulse ring for active/in-progress */
.lmsc-lp-gx-orbit::after {
	content: '';
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 1px solid transparent;
	pointer-events: none;
}

.lmsc-lp-node--in-progress .lmsc-lp-gx-orbit::after,
.lmsc-lp-node--active .lmsc-lp-gx-orbit::after {
	border-color: rgba(99, 102, 241, .15);
	animation: lp-ring-pulse 2.5s ease-out infinite;
}

@keyframes lp-ring-pulse {
	0% { transform: scale(1); opacity: .5; }
	100% { transform: scale(1.5); opacity: 0; }
}

.lmsc-lp-gx-planet {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
	position: relative;
	z-index: 2;
}

/* Shine highlight - 3D sphere effect */
.lmsc-lp-gx-shine {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 3;
}

.lmsc-lp-gx-planet svg,
.lmsc-lp-gx-planet .lmsc-lp-node-num,
.lmsc-lp-gx-planet .lmsc-lp-node-pct {
	position: relative;
	z-index: 4;
}

.lmsc-lp-gx-node:hover .lmsc-lp-gx-planet {
	transform: scale(1.12);
}

.lmsc-lp-node--in-progress .lmsc-lp-gx-planet {
	animation: lmsc-lp-gx-pulse 2.5s ease-in-out infinite;
}

@keyframes lmsc-lp-gx-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

/* ── Info card ── */
.lmsc-lp-gx-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 14px 20px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .15);
	flex: 1;
	min-width: 0;
	margin-left: 16px;
	transition: all .25s;
}

.lmsc-lp-gx-node:hover .lmsc-lp-gx-info {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(99, 102, 241, .4);
}

.lmsc-lp-gx-info .lmsc-lp-node-title {
	font-size: 14px;
	font-weight: 700;
	color: #f1f5f9;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lmsc-lp-gx-info .lmsc-lp-node-meta {
	color: rgba(203, 213, 225, .85);
	font-size: 11px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

/* ── Connector trail ── */
.lmsc-lp-gx-connector {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	max-width: 520px;
	padding-left: 23px;
	height: 28px;
	z-index: 1;
}

/* Hide dashed connectors when winding road SVG is present */
.lmsc-lp-winding-road ~ .lmsc-lp-node .lmsc-lp-gx-connector,
.lmsc-lp-winding-road ~ .lmsc-lp-gx-connector {
	display: none;
}

.lmsc-lp-gx-connector svg line {
	filter: drop-shadow(0 0 4px currentColor);
}

/* ── Locked node ── */
.lmsc-lp-gx-node.lmsc-lp-node--locked {
	opacity: .35;
}

.lmsc-lp-gx-node.lmsc-lp-node--locked:hover {
	opacity: .5;
}

/* ── Completed orbit ring ── */
.lmsc-lp-node--completed .lmsc-lp-gx-orbit::before {
	border-color: rgba(34, 197, 94, .25);
}

/* ══ 6. MILESTONE - horizontal progress rail ═══════════════ */
.lmsc-lp-nodes--milestone {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 10px;
}

.lmsc-lp-ms-node {
	display: flex;
	align-items: stretch;
	position: relative;
	min-height: 90px;
}

.lmsc-lp-ms-marker {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
	color: #6b7280;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	margin-top: 14px;
	transition: all .3s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* Active/completed marker gets gradient */
.lmsc-lp-ms-node.lmsc-lp-node--completed .lmsc-lp-ms-marker,
.lmsc-lp-ms-node.lmsc-lp-node--in-progress .lmsc-lp-ms-marker {
	box-shadow: 0 4px 16px rgba(99, 102, 241, .25);
}

.lmsc-lp-ms-line {
	position: absolute;
	left: 19px;
	top: 54px;
	bottom: -14px;
	width: 3px;
	border-radius: 2px;
	z-index: 1;
	transition: background .3s;
}

.lmsc-lp-ms-card {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: 20px;
	padding: 16px 22px;
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid rgba(226, 229, 234, .7);
	border-radius: 16px;
	margin-bottom: 14px;
	transition: all .28s cubic-bezier(.4, 0, .2, 1);
	position: relative;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .03), 0 4px 12px rgba(0, 0, 0, .02);
}

/* Accent top bar on active milestone cards */
.lmsc-lp-ms-node.lmsc-lp-node--completed .lmsc-lp-ms-card::before,
.lmsc-lp-ms-node.lmsc-lp-node--in-progress .lmsc-lp-ms-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 16px 16px 0 0;
}

.lmsc-lp-ms-node.lmsc-lp-node--completed .lmsc-lp-ms-card::before {
	background: linear-gradient(90deg, #22c55e, #86efac);
}

.lmsc-lp-ms-node.lmsc-lp-node--in-progress .lmsc-lp-ms-card::before {
	background: linear-gradient(90deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-accent, var(--lmsc-primary)));
}

.lmsc-lp-ms-card:hover {
	border-color: rgba(99, 102, 241, .25);
	box-shadow: 0 6px 24px rgba(99, 102, 241, .08), 0 2px 8px rgba(0, 0, 0, .04);
	transform: translateX(4px);
}

.lmsc-lp-ms-card .lmsc-lp-node-thumb {
	width: 54px;
	height: 54px;
	border-radius: 12px;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.lmsc-lp-ms-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.lmsc-lp-ms-content .lmsc-lp-node-title {
	font-size: 15px;
	font-weight: 700;
}

.lmsc-lp-ms-bar {
	height: 6px;
	background: rgba(0, 0, 0, .06);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 6px;
}

.lmsc-lp-ms-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
	background: linear-gradient(90deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-accent, var(--lmsc-primary)));
}

.lmsc-lp-ms-node.lmsc-lp-node--locked {
	opacity: .4;
}

/* ═══════════════════════════════════════════════════════════ */
/*  DARK MODE - LAYOUT VARIANTS                               */
/* ═══════════════════════════════════════════════════════════ */

.lmsc-dash--dark .lmsc-lp-nodes--snake::before {
	opacity: .2;
}

.lmsc-dash--dark .lmsc-lp-nodes--straight::before {
	background: linear-gradient(180deg, #374151 0%, var(--lmsc-accent, var(--lmsc-primary)) 40%, var(--lmsc-accent, #6366f1) 60%, #374151 100%);
	opacity: .15;
}

.lmsc-dash--dark .lmsc-lp-nodes--timeline::before {
	background: linear-gradient(180deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-primary-soft));
	opacity: .15;
}

.lmsc-dash--dark .lmsc-lp-tl-label {
	color: var(--lmsc-primary-soft);
}

.lmsc-dash--dark .lmsc-lp-cpt-card {
	background: var(--lmsc-card-bg, #1f2937);
	border-color: rgba(55, 65, 81, .6);
}

.lmsc-dash--dark .lmsc-lp-nodes--galaxy {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, .1) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 80%, rgba(168, 139, 250, .08) 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(15, 23, 42, .8) 0%, transparent 70%);
}

.lmsc-dash--dark .lmsc-lp-gx-info {
	background: rgba(30, 41, 59, .6);
	border-color: rgba(99, 102, 241, .15);
}

.lmsc-dash--dark .lmsc-lp-gx-orbit::before {
	border-color: rgba(99, 102, 241, .15);
}

.lmsc-dash--dark .lmsc-lp-ms-card {
	background: var(--lmsc-card-bg, #1f2937);
	border-color: rgba(55, 65, 81, .6);
}

.lmsc-dash--dark .lmsc-lp-ms-marker {
	background: linear-gradient(145deg, #374151, #1f2937);
	color: #9ca3af;
}

.lmsc-dash--dark .lmsc-lp-ms-bar {
	background: rgba(255, 255, 255, .06);
}

/* ═══════════════════════════════════════════════════════════ */
/*  RESPONSIVE - LAYOUT VARIANTS                              */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

	/* Default zigzag collapses to single column */
	.lmsc-lp-nodes--snake {
		grid-template-columns: 1fr;
		row-gap: 16px;
		padding: 16px 0;
	}

	.lmsc-lp-nodes--snake::before {
		display: none;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node::after {
		display: none;
	}

	/* Collapse sub-grid nodes to simple flex row on mobile */
	.lmsc-lp-nodes--snake .lmsc-lp-node--left,
	.lmsc-lp-nodes--snake .lmsc-lp-node--right {
		display: flex;
		grid-template-columns: none;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node--left .lmsc-lp-node-card,
	.lmsc-lp-nodes--snake .lmsc-lp-node--right .lmsc-lp-node-card {
		text-align: left;
		flex-direction: row;
		flex: 1;
		min-width: 0;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node--left .lmsc-lp-node-info {
		align-items: flex-start;
	}

	/* Timeline */
	.lmsc-lp-nodes--timeline {
		padding-left: 0;
	}

	.lmsc-lp-nodes--timeline::before {
		left: 21px;
	}

	.lmsc-lp-nodes--timeline .lmsc-lp-tl-label {
		display: none;
	}

	/* Compact cards narrower */
	.lmsc-lp-cpt-card {
		flex: 0 0 200px;
	}

	.lmsc-lp-cpt-top {
		height: 90px;
	}

	/* Galaxy - remove stagger offset */
	.lmsc-lp-gx-node:nth-child(odd),
	.lmsc-lp-gx-node:nth-child(even) {
		transform: none;
	}

	.lmsc-lp-gx-planet {
		width: 48px;
		height: 48px;
	}
}

/* ═══════════════════════════════════════════════════════════ */
/*  LEARNING PATH - JOURNEY MAPPING & MODERN ENHANCEMENTS     */
/* ═══════════════════════════════════════════════════════════ */

/* ── Journey Breadcrumb ────────────────────────────────── */
.lmsc-lp-journey-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 6px 14px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lmsc-accent, var(--lmsc-primary));
	background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(99, 102, 241, .15));
	backdrop-filter: blur(6px);
	border: 1px solid rgba(99, 102, 241, .2);
	animation: lpFadeUp .5s ease-out both;
}

.lmsc-lp-journey-breadcrumb svg {
	opacity: .7;
	flex-shrink: 0;
}

.lmsc-lp-journey--complete {
	color: #22c55e;
	background: linear-gradient(135deg, rgba(34, 197, 94, .08), rgba(34, 197, 94, .15));
	border-color: rgba(34, 197, 94, .2);
}

/* ── "You Are Here" indicator ─────────────────────────── */
/* Now positioned relative to its parent circle/planet element. */
.lmsc-lp-you-are-here {
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px 5px 10px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--lmsc-primary), var(--lmsc-accent, var(--lmsc-primary)));
	box-shadow:
		0 4px 14px rgba(99, 102, 241, .45),
		0 0 0 3px rgba(255, 255, 255, .95),
		0 0 30px rgba(99, 102, 241, .12);
	white-space: nowrap;
	z-index: 10;
	animation: lpYahBounce 2.5s ease-in-out infinite;
	pointer-events: none;
}

/* Connector arrow from badge to node */
.lmsc-lp-you-are-here::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--lmsc-accent, var(--lmsc-primary));
	filter: drop-shadow(0 2px 3px rgba(99, 102, 241, .3));
}

.lmsc-lp-yah-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: lpYahPulse 1.5s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes lpYahBounce {

	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

	50% {
		transform: translateX(-50%) translateY(-4px);
	}
}

@keyframes lpYahPulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .4;
		transform: scale(1.5);
	}
}

/* ── Active Node Glow ─────────────────────────────────── */
.lmsc-lp-node--active {
	position: relative;
}

.lmsc-lp-node--active .lmsc-lp-node-card,
.lmsc-lp-node--active .lmsc-lp-ms-card,
.lmsc-lp-node--active .lmsc-lp-gx-info {
	border-color: rgba(99, 102, 241, .45) !important;
	box-shadow:
		0 0 0 3px rgba(99, 102, 241, .15),
		0 8px 28px rgba(99, 102, 241, .18),
		inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.lmsc-lp-node--active .lmsc-lp-node-circle {
	box-shadow:
		0 0 0 5px rgba(99, 102, 241, .25),
		0 0 24px rgba(99, 102, 241, .3) !important;
	animation: lpActiveRing 2s ease-in-out infinite !important;
}

@keyframes lpActiveRing {

	0%,
	100% {
		box-shadow: 0 0 0 5px rgba(99, 102, 241, .25), 0 0 24px rgba(99, 102, 241, .3);
	}

	50% {
		box-shadow: 0 0 0 8px rgba(99, 102, 241, .35), 0 0 36px rgba(99, 102, 241, .4);
	}
}

/* ── Step Type Badge ──────────────────────────────────── */
.lmsc-lp-badge-type {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 8px;
	border-radius: 99px;
	background: rgba(99, 102, 241, .1);
	color: var(--lmsc-primary);
	margin-right: 4px;
}

.lmsc-lp-type-icon {
	width: 12px;
	height: 12px;
	vertical-align: -1px;
	flex-shrink: 0;
}

/* ── Enhanced Connector Animation ─────────────────────── */
.lmsc-lp-node--completed+.lmsc-lp-node .lmsc-lp-connector line,
.lmsc-lp-node--completed .lmsc-lp-connector line {
	stroke-dasharray: 0 !important;
}

.lmsc-lp-node--active .lmsc-lp-connector line {
	animation: lpDashFlow 1.5s linear infinite;
}

@keyframes lpDashFlow {
	to {
		stroke-dashoffset: -20;
	}
}

/* (glassmorphism rules merged into primary .lmsc-lp-node-card above) */

/* ── Progress fill gradient ───────────────────────────── */
.lmsc-lp-ms-fill {
	transition: width .6s cubic-bezier(.4, 0, .2, 1) !important;
	background: linear-gradient(90deg, var(--lmsc-accent, var(--lmsc-primary)), #22c55e) !important;
	background-size: 200% 100% !important;
}

/* ── Dark mode for new elements ───────────────────────── */
.lmsc-dash--dark .lmsc-lp-journey-breadcrumb {
	background: linear-gradient(135deg, rgba(99, 102, 241, .15), rgba(99, 102, 241, .25));
	border-color: rgba(99, 102, 241, .3);
}

.lmsc-dash--dark .lmsc-lp-journey--complete {
	background: linear-gradient(135deg, rgba(34, 197, 94, .15), rgba(34, 197, 94, .25));
	border-color: rgba(34, 197, 94, .3);
}

.lmsc-dash--dark .lmsc-lp-you-are-here {
	box-shadow: 0 4px 14px rgba(99, 102, 241, .5);
}

.lmsc-dash--dark .lmsc-lp-badge-type {
	background: rgba(99, 102, 241, .2);
	color: var(--lmsc-primary-soft);
}

.lmsc-dash--dark .lmsc-lp-node-card {
	background: rgba(30, 41, 59, .8) !important;
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border-color: rgba(99, 102, 241, .15) !important;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, .2),
		0 4px 14px rgba(0, 0, 0, .15),
		inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.lmsc-dash--dark .lmsc-lp-node:not(.lmsc-lp-node--locked) .lmsc-lp-node-card:hover {
	box-shadow:
		0 4px 12px rgba(99, 102, 241, .15),
		0 12px 32px rgba(99, 102, 241, .12),
		inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.lmsc-dash--dark .lmsc-lp-node--active .lmsc-lp-node-card,
.lmsc-dash--dark .lmsc-lp-node--active .lmsc-lp-ms-card {
	box-shadow:
		0 0 0 3px rgba(99, 102, 241, .25),
		0 8px 28px rgba(99, 102, 241, .2),
		inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* ── Mobile: simplify You-are-here position ───────────── */
@media (max-width: 640px) {
	.lmsc-lp-you-are-here {
		top: -22px;
		font-size: 9px;
		padding: 3px 10px;
	}

	.lmsc-lp-journey-breadcrumb {
		font-size: 12px;
		padding: 5px 12px;
	}
}

/* ==========================================================================
   LEARNING PATHS - PREMIUM UPGRADE STYLES
   ========================================================================== */

/* ── Selector Card Thumbnails ──────────────────────── */
.lmsc-lp-select-card--has-thumb {
	position: relative;
	overflow: hidden;
}
.lmsc-lp-select-thumb {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.18;
	/* fade the image out toward the text side so it reads as a clean right-edge
	   accent rather than a wash behind the title - keeps cards consistent */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 100%);
	transition: opacity 0.3s ease, transform 0.5s ease;
	z-index: 0;
}
.lmsc-lp-select-card--has-thumb:hover .lmsc-lp-select-thumb {
	opacity: 0.28;
	transform: scale(1.05);
}
.lmsc-lp-select-card--has-thumb .lmsc-lp-select-icon,
.lmsc-lp-select-card--has-thumb .lmsc-lp-select-info,
.lmsc-lp-select-card--has-thumb .lmsc-lp-select-cta {
	position: relative;
	z-index: 1;
}

/* ── Meta Badges (time, difficulty, count) ─────────── */
.lmsc-lp-select-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.lmsc-lp-meta-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(99, 102, 241, 0.12);
	color: var(--lmsc-primary);
	white-space: nowrap;
}
.lmsc-lp-diff--beginner { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.lmsc-lp-diff--intermediate { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.lmsc-lp-diff--advanced { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

/* ── Roadmap Header Badges ─────────────────────────── */
.lmsc-lp-rh-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

/* ── Confetti Canvas ───────────────────────────────── */
.lmsc-lp-confetti-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	pointer-events: none;
	z-index: 10;
}

/* ── Sticky Continue CTA Bar ───────────────────────── */
.lmsc-lp-continue-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	background: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
.lmsc-lp-continue-cta--visible {
	transform: translateY(0);
}
.lmsc-lp-continue-inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lmsc-lp-continue-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.lmsc-lp-continue-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
}
.lmsc-lp-continue-title {
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lmsc-lp-continue-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.lmsc-lp-continue-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* ── Milestone Markers ─────────────────────────────── */
.lmsc-lp-milestone-marker {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px 3px 6px;
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.15);
	z-index: 5;
	animation: lmsc-lp-milestone-pulse 2s ease-in-out infinite;
}
.lmsc-lp-milestone-star {
	font-size: 14px;
	line-height: 1;
}
.lmsc-lp-milestone-pct {
	font-size: 10px;
	font-weight: 700;
	color: #78350f;
	letter-spacing: 0.3px;
}
@keyframes lmsc-lp-milestone-pulse {
	0%, 100% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.15); }
	50% { box-shadow: 0 2px 12px rgba(245, 158, 11, 0.6), 0 0 30px rgba(245, 158, 11, 0.25); }
}

/* ── Locked Node Tooltip ─────────────────────────────\n   Uses native title attribute on the node wrapper.\n   No custom ::after needed - prevents false triggers on connectors. */

/* ── Animated Connector Lines ──────────────────────── */
.lmsc-lp-connector--animate .lmsc-lp-conn-line {
	stroke-dashoffset: 200;
	transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.lmsc-lp-connector--visible .lmsc-lp-conn-line {
	stroke-dashoffset: 0;
}

/* ── Narrow dashboard canvas: Zigzag → Straight ──────
   The dashboard sidebar still consumes width on tablets, so the Learning Path
   canvas needs its single-column treatment before the viewport reaches 768px. */
@media (max-width: 900px) {
	.lmsc-lp-nodes--snake {
		padding-left: 0 !important;
	}
	.lmsc-lp-nodes--snake .lmsc-lp-node {
		flex-direction: row !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.lmsc-lp-nodes--snake .lmsc-lp-node--left,
	.lmsc-lp-nodes--snake .lmsc-lp-node--right {
		margin-left: 0 !important;
		align-self: stretch !important;
	}
	.lmsc-lp-nodes--snake .lmsc-lp-node--right {
		flex-direction: row !important;
	}
	.lmsc-lp-nodes--snake .lmsc-lp-node--right .lmsc-lp-node-card {
		order: 0;
	}
	.lmsc-lp-rh {
		flex-direction: column !important;
		gap: 16px !important;
		text-align: center;
	}
	.lmsc-lp-rh-badges {
		justify-content: center;
	}
	.lmsc-lp-continue-inner {
		padding: 10px 16px;
	}
	.lmsc-lp-continue-btn {
		padding: 8px 16px;
		font-size: 13px;
	}
	.lmsc-lp-milestone-marker {
		top: -6px;
		right: -4px;
		padding: 2px 6px 2px 4px;
	}
	.lmsc-lp-milestone-star { font-size: 12px; }
	.lmsc-lp-milestone-pct { font-size: 9px; }
	.lmsc-lp-node--locked[data-tooltip]::after {
		display: none;
	}
}

/* ── Enrollment CTA ("Start This Path") ────────────── */
.lmsc-lp-enroll-cta {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lmsc-lp-enroll-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 32px;
	border: none;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}
.lmsc-lp-enroll-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
}
.lmsc-lp-enroll-btn:disabled {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}
.lmsc-lp-enroll-sub {
	font-size: 12px;
	color: #6b7280;
	margin: 0;
}
.lmsc-lp-journey--enroll {
	background: rgba(99, 102, 241, 0.06);
	border-color: rgba(99, 102, 241, 0.2);
	color: var(--lmsc-primary);
}

/* ── Dark Mode: All New Premium Elements ───────────── */
.lmsc-dash--dark .lmsc-lp-meta-badge {
	background: rgba(99, 102, 241, 0.15);
	color: var(--lmsc-primary-soft);
}
.lmsc-dash--dark .lmsc-lp-diff--beginner { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.lmsc-dash--dark .lmsc-lp-diff--intermediate { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.lmsc-dash--dark .lmsc-lp-diff--advanced { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.lmsc-dash--dark .lmsc-lp-continue-cta {
	background: rgba(15, 23, 42, 0.9);
	border-top-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}
.lmsc-dash--dark .lmsc-lp-continue-label { color: #9ca3af; }
.lmsc-dash--dark .lmsc-lp-continue-title { color: #f1f5f9; }
.lmsc-dash--dark .lmsc-lp-select-thumb { opacity: 0.08; }
.lmsc-dash--dark .lmsc-lp-select-card--has-thumb:hover .lmsc-lp-select-thumb { opacity: 0.15; }
.lmsc-dash--dark .lmsc-lp-node--locked[data-tooltip]::after {
	background: #334155;
	color: #e2e8f0;
}

/* ── Completed Path Badge on Selector Cards ────────── */
.lmsc-lp-completed-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 10px;
	font-weight: 700;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.2));
	color: #16a34a;
	white-space: nowrap;
}
.lmsc-lp-select-card--completed {
	border-color: rgba(34, 197, 94, 0.3) !important;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.02), rgba(34, 197, 94, 0.06)) !important;
}
.lmsc-lp-select-card--completed .lmsc-lp-select-cta {
	color: #16a34a;
}
.lmsc-lp-card-ribbon {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 20px;
	z-index: 2;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* ── Celebration Toast ─────────────────────────────── */
.lmsc-lp-celebration-toast {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
	z-index: 20;
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
	pointer-events: none;
}
.lmsc-lp-celebration-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(-16px);
}
.lmsc-lp-celebration-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: #fff;
	box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4), 0 0 0 4px rgba(34, 197, 94, 0.15);
	white-space: nowrap;
}
.lmsc-lp-celebration-emoji {
	font-size: 32px;
}
.lmsc-lp-celebration-inner strong {
	display: block;
	font-size: 16px;
}
.lmsc-lp-celebration-inner p {
	margin: 2px 0 0;
	font-size: 13px;
	opacity: 0.9;
}

/* ── Completed Date Badge (for previously completed paths) ── */
.lmsc-lp-completed-date {
	margin-top: 12px;
	padding: 8px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.12));
	border: 1px solid rgba(34, 197, 94, 0.2);
	color: #16a34a;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* ── Milestone Step Nodes ──────────────────────────── */
.lmsc-lp-node--milestone-step .lmsc-lp-node-circle {
	background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 4px 16px rgba(245, 158, 11, 0.3) !important;
}
.lmsc-lp-node--milestone-step .lmsc-lp-node-card {
	border-left: 3px solid #f59e0b !important;
}
.lmsc-lp-node--milestone-step.lmsc-lp-node--completed .lmsc-lp-node-circle {
	background: linear-gradient(135deg, #22c55e, #16a34a) !important;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(34, 197, 94, 0.3) !important;
}
.lmsc-lp-milestone-desc {
	margin: 6px 0 0;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}
.lmsc-lp-milestone-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 16px;
	border: 2px solid #f59e0b;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.15));
	color: #b45309;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}
.lmsc-lp-milestone-btn:hover {
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #fff;
	border-color: #f59e0b;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.lmsc-lp-milestone-btn:disabled {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}
.lmsc-lp-milestone-btn svg {
	flex-shrink: 0;
}

/* ── Recommendations Section ──────────────────────── */
.lmsc-lp-recommendations {
	margin-top: 20px;
	padding: 20px 22px;
	border-radius: 14px;
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e5ea);
	box-shadow: 0 1px 3px rgba(0. 0, 0, .03);
}
.lmsc-lp-rec-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--lmsc-text, #1e293b);
}
.lmsc-lp-rec-title svg {
	color: #fbbf24;
	width: 18px;
	height: 18px;
}
.lmsc-lp-rec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.lmsc-lp-rec-card {
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e5ea);
	cursor: pointer;
	transition: all .2s ease;
	position: relative;
	overflow: hidden;
}
.lmsc-lp-rec-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--lmsc-accent, var(--lmsc-primary)), var(--lmsc-accent, var(--lmsc-primary)));
	opacity: 0;
	transition: opacity .2s;
	border-radius: 3px 0 0 3px;
}
.lmsc-lp-rec-card:hover::before {
	opacity: 1;
}
.lmsc-lp-rec-card:hover {
	border-color: rgba(99, 102, 241, .2);
	box-shadow: 0 3px 12px rgba(99, 102, 241, .08);
	transform: translateY(-1px);
}
.lmsc-lp-rec-card h4 {
	margin: 6px 0 3px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lmsc-text, #1e293b);
	line-height: 1.3;
}
.lmsc-lp-rec-reason {
	font-size: 10px;
	font-weight: 700;
	color: var(--lmsc-accent, var(--lmsc-primary));
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.lmsc-lp-rec-meta {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

/* ── Dark Mode: New Elements ──────────────────────── */
.lmsc-dash--dark .lmsc-lp-completed-badge {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.25));
	color: #86efac;
}
.lmsc-dash--dark .lmsc-lp-select-card--completed {
	border-color: rgba(34, 197, 94, 0.25) !important;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.03), rgba(34, 197, 94, 0.08)) !important;
}
.lmsc-dash--dark .lmsc-lp-milestone-desc { color: #9ca3af; }
.lmsc-dash--dark .lmsc-lp-milestone-btn {
	border-color: rgba(245, 158, 11, 0.5);
	background: rgba(245, 158, 11, 0.1);
	color: #fcd34d;
}
.lmsc-dash--dark .lmsc-lp-completed-date {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.2);
	color: #86efac;
}
.lmsc-dash--dark .lmsc-lp-recommendations {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.08));
	border-color: rgba(99, 102, 241, 0.15);
}
.lmsc-dash--dark .lmsc-lp-rec-card {
	background: rgba(30, 41, 59, 0.7);
	border-color: rgba(99, 102, 241, 0.15);
}
.lmsc-dash--dark .lmsc-lp-rec-card h4 { color: #f1f5f9; }
.lmsc-dash--dark .lmsc-lp-rec-reason { color: var(--lmsc-primary-soft); }
.lmsc-dash--dark .lmsc-lp-rec-meta { color: #9ca3af; }

/* ── Mobile: Recommendations ──────────────────────── */
@media (max-width: 640px) {
	.lmsc-lp-rec-grid {
		grid-template-columns: 1fr;
	}
	.lmsc-lp-celebration-inner {
		flex-direction: column;
		text-align: center;
		white-space: normal;
		padding: 16px;
	}
	.lmsc-lp-celebration-emoji { font-size: 28px; }
}

/* ==========================================================================
   AUDIT POLISH - Batch fixes for 18+ items
   ========================================================================== */

/* ── #3: FAB "Continue Learning" - avoid overlapping table action buttons ── */
.lmsc-dash__panel[data-tab="quizzes"]~.lmsc-continue-btn,
.lmsc-dash__panel[data-tab="assignments"]~.lmsc-continue-btn,
.lmsc-dash__panel[data-tab="essays"]~.lmsc-continue-btn {
	bottom: 100px;
}

/* ── #7: Mobile bottom bar - visible active indicator ── */
@media (max-width: 768px) {
	.lmsc-dash--sidebar .lmsc-dash__nav-item--active {
		background: rgba(255, 255, 255, 0.18);
		border-radius: 12px;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
	}
}

/* ── #16: Second stat row smaller for visual hierarchy ── */
.lmsc-dash__stats-row--secondary .lmsc-dash__stat-card {
	padding: 14px 18px;
}

.lmsc-dash__stats-row--secondary .lmsc-dash__stat-value {
	font-size: 22px;
}

.lmsc-dash__stats-row--secondary .lmsc-dash__stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.lmsc-dash__stats-row--secondary .lmsc-dash__stat-icon svg {
	width: 20px;
	height: 20px;
}

/* ── #28: Sort dropdown styled as interactive control ── */
.lmsc-dash__sort-control,
.lmsc-dash select[name="sort"],
.lmsc-filter-bar select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--lmsc-surface);
	border: 1px solid var(--lmsc-border);
	border-radius: var(--lmsc-radius-sm, 8px);
	padding: 8px 36px 8px 14px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--lmsc-text);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: var(--lmsc-transition);
}

.lmsc-dash__sort-control:hover,
.lmsc-dash select[name="sort"]:hover,
.lmsc-filter-bar select:hover {
	border-color: var(--lmsc-primary);
}

.lmsc-dash__sort-control:focus,
.lmsc-dash select[name="sort"]:focus,
.lmsc-filter-bar select:focus {
	outline: none;
	border-color: var(--lmsc-primary);
	box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb), 0.15);
}

/* ── #43: Improve color contrast for muted text (WCAG AA) ── */
.lmsc-dash {
	--lmsc-text-muted: #596574;
}

/* ── #44: Visible focus rings for keyboard navigation ── */
.lmsc-dash a:focus-visible,
.lmsc-dash button:focus-visible,
.lmsc-dash [tabindex]:focus-visible,
.lmsc-dash__nav-item:focus-visible {
	outline: 2px solid var(--lmsc-primary);
	outline-offset: 2px;
	border-radius: var(--lmsc-radius-sm);
}

.lmsc-dash input:focus-visible,
.lmsc-dash textarea:focus-visible,
.lmsc-dash select:focus-visible {
	outline: none;
	border-color: var(--lmsc-primary);
	box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb), 0.15);
}

/* ── #49: prefers-reduced-motion - pause all animations ── */
@media (prefers-reduced-motion: reduce) {
	.lmsc-ticker__content {
		animation: none !important;
	}

	.lmsc-continue-btn {
		animation: none !important;
	}

	.lmsc-dash__stat-card,
	.lmsc-dash__course-card,
	.lmsc-dash__nav-item,
	.lmsc-dash__widget {
		transition: none !important;
	}

	.lmsc-dash *,
	.lmsc-dash *::before,
	.lmsc-dash *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── #50: Stats 2 columns on tablet (768-1024px) ── */
@media (max-width: 1024px) {
	.lmsc-dash__stats-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── #51: Course cards single-column on mobile ── */
@media (max-width: 640px) {
	.lmsc-dash__courses-grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	.lmsc-dash__course-card {
		max-width: 100%;
	}
}

/* ── #52: Table horizontal scroll on mobile ── */
@media (max-width: 768px) {
	.lmsc-data-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lmsc-data-table-wrap::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 24px;
		background: linear-gradient(to right, transparent, var(--lmsc-surface));
		pointer-events: none;
		opacity: 0.8;
	}

	.lmsc-data-table {
		min-width: 600px;
	}
}

/* ── #53: Bottom nav - icons only at mobile breakpoint ── */
@media (max-width: 480px) {
	.lmsc-dash--sidebar .lmsc-dash__nav-label {
		display: none !important;
	}

	.lmsc-dash--sidebar .lmsc-dash__nav-item {
		min-width: unset;
		padding: 8px;
	}
}

/* ── #54: Greeting banner mobile layout ── */
@media (max-width: 640px) {
	.lmsc-dash__greeting {
		flex-direction: column;
		text-align: center;
		padding: 24px 16px;
		gap: 12px;
	}

	.lmsc-dash__greeting-text h2 {
		font-size: 1.25rem;
	}

	.lmsc-dash__greeting-text p {
		font-size: 0.85rem;
	}

	.lmsc-dash__greeting-avatar {
		width: 48px;
		height: 48px;
	}

	.lmsc-dash__greeting .lmsc-progress-ring {
		display: none;
	}
}

/* ── #56: Stat card values scale down when cards are narrow ── */
@media (max-width: 1200px) {
	.lmsc-dash--sidebar .lmsc-dash__stat-value {
		font-size: 22px;
	}

	.lmsc-dash--sidebar .lmsc-dash__stat-label {
		font-size: 11px;
	}
}

/* ── #57: Hide WordPress page title above the dashboard ── */
.lmsc-dash-page-title-hidden .entry-title,
.lmsc-dash-page-title-hidden .page-title,
.lmsc-dash-page-title-hidden article>.entry-header,
.lmsc-dash-page-title-hidden .wp-block-post-title {
	display: none !important;
}

/* ── #58: Sidebar role label - title-case instead of ALL-CAPS ── */
.lmsc-dash__sidebar-role {
	text-transform: capitalize;
	font-size: 11px;
	letter-spacing: 0.8px;
	opacity: 0.75;
}

/* ── #59: Course card title truncation (max 2 lines) ── */
.lmsc-dash__course-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── #64: GPU acceleration hints for animated elements ── */
.lmsc-continue-btn,
.lmsc-ticker__content,
.lmsc-dash__stat-card,
.lmsc-dash__course-card,
.lmsc-dash__nav-item::before {
	will-change: transform;
}


/* ── #18: Widget cards uniform minimum height ── */
.lmsc-dash__overview-grid > .lmsc-dash__widget {
	min-height: 280px;
}

/* ── #26: Quiz score bars slightly larger ── */
.lmsc-dash__quiz-bar {
	min-width: 60px;
	height: 8px;
	border-radius: 4px;
}

/* ── #29: Filter pill icon alignment fix ── */
.lmsc-filter-pill svg,
.lmsc-dash__filter-pill svg {
	vertical-align: -2px;
	margin-right: 4px;
}

/* ── #31: Profile card and edit form visual separation ── */
.lmsc-account-tab .lmsc-dash__profile-sidebar {
	border-right: 1px solid var(--lmsc-border);
}

.lmsc-account-tab .lmsc-dash__profile-form {
	background: var(--lmsc-surface-alt);
	border-radius: var(--lmsc-radius);
	padding: 28px;
}

/* ── #48: Skip-to-content link (visually hidden until focused) ── */
.lmsc-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	padding: 8px 16px;
	z-index: 100000;
	transition: top 0.2s;
	border-radius: 0 0 var(--lmsc-radius-sm) 0;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}

.lmsc-skip-link:focus {
	top: 0;
}

/* ── #68: Print styles for Reports tab ── */
@media print {

	.lmsc-dash__sidebar,
	.lmsc-dash__header,
	.lmsc-dash__topnav,
	.lmsc-continue-btn,
	.lmsc-ticker,
	.lmsc-dash__breadcrumb,
	.lmsc-dash__quick-actions,
	.lmsc-dash__footer {
		display: none !important;
	}

	.lmsc-dash {
		display: block !important;
		background: #fff !important;
	}

	.lmsc-dash__main {
		padding: 0 !important;
		max-width: 100% !important;
	}

	.lmsc-dash__panel {
		display: block !important;
		page-break-inside: avoid;
	}

	.lmsc-dash__stat-card {
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		page-break-inside: avoid;
	}

	.lmsc-data-table {
		font-size: 10pt;
	}

	.lmsc-data-table th,
	.lmsc-data-table td {
		border: 1px solid #ddd !important;
	}
}

/* ==========================================================================
   Phase 2 - UX Improvements
   ========================================================================== */

/* ---------- Announcement Unread State ---------- */
.lmsc-announcement-card--unread {
	border-left: 4px solid var(--lmsc-primary, #fb4365);
	background: rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.03);
}

.lmsc-announcement-card--unread .lmsc-announcement-card__title {
	font-weight: 700;
}

/* ---------- Dismiss Undo Toast ---------- */
.lmsc-toast {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1e293b;
	color: #f1f5f9;
	padding: 12px 20px;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	z-index: 10000;
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.lmsc-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.lmsc-toast__undo {
	padding: 4px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
	color: #93c5fd;
	font-weight: 600;
	font-size: 0.813rem;
	cursor: pointer;
	transition: all 0.2s;
}

.lmsc-toast__undo:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* ---------- Rich Text Toolbar ---------- */
.lmsc-rte-toolbar {
	display: flex;
	gap: 4px;
	padding: 6px 8px;
	background: var(--lmsc-bg-muted, #f8fafc);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	border-bottom: none;
	border-radius: var(--lmsc-radius, 12px) var(--lmsc-radius, 12px) 0 0;
}

.lmsc-rte-toolbar button {
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: none;
	color: var(--lmsc-text-muted, #64748b);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	transition: all 0.15s;
	line-height: 1;
}

.lmsc-rte-toolbar button:hover {
	background: var(--lmsc-border, rgba(0, 0, 0, 0.06));
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-rte-toolbar button.active {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #fb4365);
}

.lmsc-rte-editor {
	min-height: 120px;
	padding: 12px;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	border-radius: 0 0 var(--lmsc-radius, 12px) var(--lmsc-radius, 12px);
	font-size: 0.875rem;
	line-height: 1.6;
	outline: none;
	overflow-y: auto;
	max-height: 200px;
	background: var(--lmsc-card-bg, #fff);
}

.lmsc-rte-editor:focus {
	border-color: var(--lmsc-primary, #fb4365);
	box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.1);
}

.lmsc-rte-editor ul,
.lmsc-rte-editor ol {
	padding-left: 20px;
	margin: 4px 0;
}

/* ---------- Sticky Profile Save ---------- */
.lmsc-dash__form-actions--sticky {
	position: sticky;
	bottom: 0;
	background: var(--lmsc-card-bg, #fff);
	padding: 16px 0;
	margin-top: 12px;
	border-top: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	z-index: 10;
}

/* ---------- Mobile Hamburger ---------- */
.lmsc-dash__hamburger {
	display: none;
	width: 36px;
	height: 36px;
	padding: 6px;
	border: none;
	border-radius: 8px;
	background: var(--lmsc-surface, #f8fafc);
	color: var(--lmsc-text, #1a1a2e);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.lmsc-dash__hamburger:hover {
	background: var(--lmsc-border, #e5e7eb);
}

@media (max-width: 768px) {
	.lmsc-dash__hamburger {
		display: none !important;
	}
}

.lmsc-dash__sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s;
}

.lmsc-dash__sidebar-overlay.is-open {
	display: block;
	opacity: 1;
}

/* ---------- Daily Goal Selector ---------- */
.lmsc-timer-goal-select {
	padding: 4px 10px;
	border-radius: 8px;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	background: var(--lmsc-card-bg, #fff);
	color: var(--lmsc-text, #1a1a2e);
	font-size: 0.813rem;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Empty State CTA ---------- */
.lmsc-empty-state__cta,
.lmsc-dash__empty-state .lmsc-empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 10px 20px;
	border-radius: 10px;
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	font-size: 0.875rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s;
}

.lmsc-empty-state__cta:hover,
.lmsc-dash__empty-state .lmsc-empty-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(var(--lmsc-primary-rgb, 251, 67, 101), 0.3);
	color: #fff;
	text-decoration: none;
}

/* ---------- Clear Filter Button ---------- */
.lmsc-clear-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 16px;
	border-radius: 8px;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, 0.08));
	background: var(--lmsc-surface, #f8fafc);
	color: var(--lmsc-text, #1a1a2e);
	font-size: 0.813rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.lmsc-clear-filter-btn:hover {
	background: var(--lmsc-border, #e5e7eb);
}

/* ---------- Panel Bottom Padding for FAB ---------- */
.lmsc-dash__panel {
	padding-bottom: 80px;
}

/* ═══════════════════════════════════════════════════════
   Phase 3: 16 UX Improvements CSS
   ═══════════════════════════════════════════════════════ */

/* ---------- Filter Pill Wrapping (narrow screens) ---------- */
.lmsc-dash__pills,
.lmsc-dash__filter-pills,
.lmsc-schedule-view-toggle,
.lmsc-announcement-filters {
	flex-wrap: wrap;
	gap: 6px;
}

/* ---------- Dead Space Below Learning Paths ---------- */
.lmsc-lp-select,
.lmsc-lp-container {
	margin-bottom: 0;
}

.lmsc-tab-panel[data-tab="learning-paths"] {
	padding-bottom: 20px;
}

/* ---------- Skeleton Shimmer Loading ---------- */
.lmsc-skeleton {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.lmsc-skeleton__row {
	height: 48px;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--lmsc-bg-hover, #f3f4f6) 25%, rgba(255, 255, 255, 0.5) 50%, var(--lmsc-bg-hover, #f3f4f6) 75%);
	background-size: 200% 100%;
	animation: lmscShimmer 1.5s infinite ease-in-out;
}

@keyframes lmscShimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* ---------- Tools Dropdown ---------- */
.lmsc-tools-dropdown {
	position: relative;
	display: inline-flex;
}

.lmsc-tools-dropdown__trigger {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	color: var(--lmsc-text-muted, #6b7280);
	transition: background 0.2s, color 0.2s;
}

.lmsc-tools-dropdown__trigger:hover {
	background: var(--lmsc-bg-hover, #f3f4f6);
	color: var(--lmsc-primary, #3b82f6);
}

.lmsc-tools-dropdown__menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 180px;
	background: var(--lmsc-card-bg, #ffffff);
	border: 1px solid var(--lmsc-border, #e5e7eb);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
	z-index: 1000;
	flex-direction: column;
	gap: 2px;
}

.lmsc-tools-dropdown--open .lmsc-tools-dropdown__menu {
	display: flex;
}

.lmsc-tools-dropdown__menu button,
.lmsc-tools-dropdown__menu .lmsc-dash__action-btn,
.lmsc-tools-dropdown__menu .lmsc-dash__action-icon {
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	border-radius: 6px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--lmsc-text, #1f2937);
	font-size: 13px;
	transition: background 0.15s;
}

.lmsc-tools-dropdown__menu button:hover,
.lmsc-tools-dropdown__menu .lmsc-dash__action-btn:hover {
	background: var(--lmsc-bg-hover, #f3f4f6);
}

/* ---------- Notes Character Counter ---------- */
.lmsc-rte-char-count {
	font-size: 12px;
	color: var(--lmsc-text-muted, #9ca3af);
	text-align: right;
	padding: 4px 0;
}

/* ---------- Empty State CTA Tip ---------- */
.lmsc-empty-cta-tip {
	margin-top: 12px;
	font-size: 13px;
	color: var(--lmsc-text-muted, #6b7280);
	background: var(--lmsc-bg-hover, #f9fafb);
	border-radius: 8px;
	padding: 10px 14px;
	border-left: 3px solid var(--lmsc-primary, #3b82f6);
}

/* ---------- Course Card Placeholder ---------- */
.lmsc-course-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}

/* ---------- Mobile Filter Pill Adjustments ---------- */
@media (max-width: 640px) {

	.lmsc-dash__pills,
	.lmsc-dash__filter-pills {
		gap: 4px;
	}

	.lmsc-dash__pills .lmsc-pill,
	.lmsc-dash__filter-pills .lmsc-pill {
		font-size: 12px;
		padding: 4px 10px;
	}
}


/* ═══════════════════════════════════════════════════════
   ═══  Feature 1: Review Modal  ═══════════════════════
   ═══════════════════════════════════════════════════════ */

.lmsc-review-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: lmsc-fade-in 0.2s ease-out;
}

.lmsc-review-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.lmsc-review-modal__content {
	position: relative;
	background: var(--lmsc-card-bg, #fff);
	border-radius: 16px;
	width: 90%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.lmsc-review-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--lmsc-text-muted, #94a3b8);
	padding: 4px;
}

.lmsc-review-modal__close:hover {
	color: var(--lmsc-text-color, #1e293b);
}

.lmsc-review-modal__header h3 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
}

.lmsc-review-modal__course-name {
	color: var(--lmsc-text-muted, #64748b);
	font-size: 14px;
	margin: 0 0 20px;
}

/* Star Selector */
.lmsc-review-modal__rating-section {
	margin-bottom: 20px;
}

.lmsc-review-modal__rating-section label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

.lmsc-review-modal__stars {
	display: flex;
	gap: 4px;
}

.lmsc-review-modal__star {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: #e2e8f0;
	transition: color 0.15s, transform 0.15s;
}

.lmsc-review-modal__star:hover,
.lmsc-review-modal__star.lmsc-review-modal__star--hovered {
	color: #fbbf24;
	transform: scale(1.15);
}

.lmsc-review-modal__star.lmsc-review-modal__star--selected {
	color: #f59e0b;
}

.lmsc-review-modal__star svg {
	fill: currentColor;
}

/* Form Fields */
.lmsc-review-modal__field {
	margin-bottom: 16px;
}

.lmsc-review-modal__field label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.lmsc-review-modal__field input,
.lmsc-review-modal__field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	background: var(--lmsc-input-bg, #f8fafc);
	color: var(--lmsc-text-color, #1e293b);
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.lmsc-review-modal__field input:focus,
.lmsc-review-modal__field textarea:focus {
	outline: none;
	border-color: var(--lmsc-primary, #007aff);
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.lmsc-review-modal__char-count {
	display: block;
	text-align: right;
	font-size: 12px;
	color: var(--lmsc-text-muted, #94a3b8);
	margin-top: 4px;
}

/* Actions */
.lmsc-review-modal__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 20px;
}

.lmsc-review-modal__cancel {
	padding: 10px 20px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-review-modal__submit {
	padding: 10px 24px;
	border: none;
	border-radius: 10px;
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: opacity 0.2s;
}

.lmsc-review-modal__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lmsc-review-modal__submit svg {
	fill: currentColor;
	stroke: none;
}

.lmsc-review-modal__status {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	text-align: center;
}

.lmsc-review-modal__status--success {
	background: #ecfdf5;
	color: #059669;
}

.lmsc-review-modal__status--error {
	background: #fef2f2;
	color: #dc2626;
}

/* Existing Review */
.lmsc-review-modal__existing {
	text-align: center;
	padding: 20px 0 0;
}

.lmsc-review-modal__existing-header h4 {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-review-modal__existing-stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 12px;
}

.lmsc-review-modal__existing h5 {
	font-size: 16px;
	margin: 0 0 8px;
}

.lmsc-review-modal__existing p {
	color: var(--lmsc-text-muted, #64748b);
	font-size: 14px;
}

.lmsc-review-modal__delete-btn {
	margin-top: 16px;
	padding: 8px 16px;
	border: 1px solid #fca5a5;
	border-radius: 8px;
	background: transparent;
	color: #dc2626;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lmsc-review-modal__delete-btn:hover {
	background: #fef2f2;
}


/* ═══════════════════════════════════════════════════════
   ═══  Feature 2: Admin Dashboard  ════════════════════
   ═══════════════════════════════════════════════════════ */

.lmsc-admin-dash__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.lmsc-admin-dash__header h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.lmsc-admin-dash__header h2 svg {
	color: var(--lmsc-primary, #007aff);
}

.lmsc-admin-dash__subtitle {
	margin: 4px 0 0;
	color: var(--lmsc-text-muted, #64748b);
	font-size: 14px;
}

.lmsc-admin-dash__email-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
	transition: opacity 0.2s;
}

.lmsc-admin-dash__email-btn:hover {
	opacity: 0.9;
}

/* Stat Cards */
.lmsc-admin-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.lmsc-admin-dash__stat-card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	transition: transform 0.2s, box-shadow 0.2s;
}

.lmsc-admin-dash__stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.lmsc-admin-dash__stat-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-admin-dash__stat-card--users .lmsc-admin-dash__stat-icon {
	background: #eff6ff;
	color: #3b82f6;
}

.lmsc-admin-dash__stat-card--courses .lmsc-admin-dash__stat-icon {
	background: #f0fdf4;
	color: #22c55e;
}

.lmsc-admin-dash__stat-card--enrollments .lmsc-admin-dash__stat-icon {
	background: #fef3c7;
	color: #f59e0b;
}

.lmsc-admin-dash__stat-card--active .lmsc-admin-dash__stat-icon {
	background: #f0f9ff;
	color: #0ea5e9;
}

.lmsc-admin-dash__stat-card--revenue .lmsc-admin-dash__stat-icon {
	background: #ecfdf5;
	color: #10b981;
}

.lmsc-admin-dash__stat-info {
	display: flex;
	flex-direction: column;
}

.lmsc-admin-dash__stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.lmsc-admin-dash__stat-label {
	font-size: 13px;
	color: var(--lmsc-text-muted, #64748b);
}

/* Grid Layout */
.lmsc-admin-dash__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	.lmsc-admin-dash__grid {
		grid-template-columns: 1fr;
	}
}

.lmsc-admin-dash__card {
	background: var(--lmsc-card-bg, #fff);
	border-radius: 14px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.lmsc-admin-dash__card--full {
	grid-column: 1 / -1;
}

/* Export Actions Bar */
.lmsc-admin-dash__export-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	margin-bottom: 1.5rem;
	background: var(--lmsc-bg-offset, #f8fafc);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius, 10px);
}

.lmsc-admin-dash__export-label {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--lmsc-muted, #64748b);
	margin-right: .25rem;
}

.lmsc-export-btn {
	font-size: .75rem !important;
}

/* Pending Courses */
.lmsc-admin-dash__pending-section {
	margin-bottom: 1.5rem;
	border-left: 4px solid #f59e0b;
}

.lmsc-admin-dash__pending-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.lmsc-admin-dash__pending-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--lmsc-surface, #f8fafc);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	transition: opacity .3s, transform .3s;
}

.lmsc-admin-dash__pending-item--removed {
	opacity: 0;
	transform: translateX(20px);
	pointer-events: none;
}

.lmsc-admin-dash__pending-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.lmsc-admin-dash__pending-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-admin-dash__pending-meta {
	font-size: 12px;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-admin-dash__pending-actions {
	display: flex;
	gap: .5rem;
	flex-shrink: 0;
}

.lmsc-admin-dash__approve-btn,
.lmsc-admin-dash__reject-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .2s, transform .1s;
}

.lmsc-admin-dash__approve-btn {
	background: #059669;
	color: #fff;
}

.lmsc-admin-dash__approve-btn:hover {
	background: #047857;
	transform: translateY(-1px);
}

.lmsc-admin-dash__reject-btn {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
}

.lmsc-admin-dash__reject-btn:hover {
	background: rgba(239, 68, 68, 0.2);
	transform: translateY(-1px);
}

.lmsc-admin-dash__approve-btn:disabled,
.lmsc-admin-dash__reject-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.lmsc-admin-dash__card-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
}

.lmsc-admin-dash__card-header h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	margin: 0;
}

.lmsc-admin-dash__card-header h3 svg {
	color: var(--lmsc-primary, #007aff);
}

.lmsc-admin-dash__card-body {
	padding: 16px 20px;
}

/* Popular Courses */
.lmsc-admin-dash__popular-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lmsc-admin-dash__popular-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lmsc-admin-dash__popular-rank {
	font-weight: 700;
	font-size: 14px;
	color: var(--lmsc-primary, #007aff);
	width: 24px;
	text-align: center;
	flex-shrink: 0;
}

.lmsc-admin-dash__popular-info {
	flex: 1;
	min-width: 0;
}

.lmsc-admin-dash__popular-title {
	display: block;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-admin-dash__popular-meta {
	display: block;
	font-size: 12px;
	color: var(--lmsc-text-muted, #94a3b8);
}

.lmsc-admin-dash__popular-rating {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 13px;
	font-weight: 600;
	color: #f59e0b;
}

/* Enrollment List */
.lmsc-admin-dash__enrollment-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lmsc-admin-dash__enrollment-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lmsc-admin-dash__enrollment-avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.lmsc-admin-dash__enrollment-info {
	flex: 1;
	min-width: 0;
}

.lmsc-admin-dash__enrollment-name {
	display: block;
	font-weight: 600;
	font-size: 13px;
}

.lmsc-admin-dash__enrollment-course {
	display: block;
	font-size: 12px;
	color: var(--lmsc-text-muted, #94a3b8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-admin-dash__enrollment-time {
	font-size: 12px;
	color: var(--lmsc-text-muted, #94a3b8);
	flex-shrink: 0;
}

.lmsc-admin-dash__empty {
	text-align: center;
	color: var(--lmsc-text-muted, #94a3b8);
	font-size: 14px;
	padding: 20px 0;
}

/* Growth Chart */
#lmsc-admin-growth-chart {
	width: 100% !important;
	height: auto;
}

/* Extended admin stats grid */
.lmsc-reports-stats--extended {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-top: 20px;
}

/* Icon color variants */
.lmsc-reports-stat-card__icon--teal {
	background: rgba(20, 184, 166, 0.1);
	color: #14b8a6;
}

.lmsc-reports-stat-card__icon--orange {
	background: rgba(249, 115, 22, 0.1);
	color: #f97316;
}

/* Warning-style stat card for pending items */
.lmsc-reports-stat-card--warning {
	border-left: 3px solid #f97316;
}

/* Activity badges */
.lmsc-admin-active-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.lmsc-admin-active-badge--hot {
	background: rgba(34, 197, 94, 0.1);
	color: #16a34a;
}

.lmsc-admin-active-badge--cold {
	background: rgba(239, 68, 68, 0.1);
	color: #dc2626;
}

/* Make admin recent lists stretch full width inside chart cards */
.lmsc-admin-recent-list {
	width: 100%;
}

/* Chart card hosting a recent-list should align content to start, not center */
.lmsc-chart-card:has(.lmsc-admin-recent-list) {
	align-items: stretch;
}

/* Ensure the info text truncates gracefully instead of wrapping ugly */
.lmsc-admin-recent-info strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lmsc-admin-recent-info .lmsc-text-muted {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Admin recent list items */
.lmsc-admin-recent-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
}

.lmsc-admin-recent-item:last-child {
	border-bottom: none;
}

.lmsc-admin-recent-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.lmsc-admin-recent-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lmsc-admin-recent-info strong {
	font-size: 13px;
	font-weight: 600;
}

.lmsc-admin-recent-info .lmsc-text-muted {
	font-size: 12px;
}

.lmsc-admin-recent-date {
	font-size: 12px;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   ═══  Feature 3: Email Composer  ═════════════════════
   ═══════════════════════════════════════════════════════ */

.lmsc-email-composer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: lmsc-fade-in 0.2s ease-out;
}

.lmsc-email-composer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.lmsc-email-composer__content {
	position: relative;
	background: var(--lmsc-card-bg, #fff);
	border-radius: 16px;
	width: 90%;
	max-width: 580px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.lmsc-email-composer__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--lmsc-text-muted, #94a3b8);
	padding: 4px;
}

.lmsc-email-composer__close:hover {
	color: var(--lmsc-text-color, #1e293b);
}

.lmsc-email-composer__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
}

.lmsc-email-composer__header svg {
	color: var(--lmsc-primary, #007aff);
}

.lmsc-email-composer__header h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

.lmsc-email-composer__field {
	margin-bottom: 16px;
}

.lmsc-email-composer__field label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.lmsc-email-composer__select,
.lmsc-email-composer__field input,
.lmsc-email-composer__field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	background: var(--lmsc-input-bg, #f8fafc);
	color: var(--lmsc-text-color, #1e293b);
	box-sizing: border-box;
}

.lmsc-email-composer__select:focus,
.lmsc-email-composer__field input:focus,
.lmsc-email-composer__field textarea:focus {
	outline: none;
	border-color: var(--lmsc-primary, #007aff);
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.lmsc-email-composer__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--lmsc-text-muted, #94a3b8);
}

.lmsc-email-composer__recipient-count {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(var(--lmsc-primary-rgb, 59, 130, 246), 0.08);
	border-radius: 8px;
	font-size: 13px;
	color: var(--lmsc-primary);
	margin-bottom: 16px;
}

.lmsc-email-composer__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 24px;
}

.lmsc-email-composer__cancel {
	padding: 10px 20px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-email-composer__send {
	padding: 10px 24px;
	border: none;
	border-radius: 10px;
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: opacity 0.2s;
}

.lmsc-email-composer__send:hover {
	opacity: 0.9;
}

.lmsc-email-composer__status {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	text-align: center;
}

.lmsc-email-composer__status--success {
	background: #ecfdf5;
	color: #059669;
}

.lmsc-email-composer__status--error {
	background: #fef2f2;
	color: #dc2626;
}


/* ═══════════════════════════════════════════════════════
   ═══  Feature 4: Block Customizer  ═══════════════════
   ═══════════════════════════════════════════════════════ */

.lmsc-dash__block-customizer-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	font-size: 13px;
	color: var(--lmsc-text-muted, #64748b);
	transition: all 0.2s;
}

.lmsc-dash__block-customizer-toggle:hover {
	border-color: var(--lmsc-primary, #007aff);
	color: var(--lmsc-primary, #007aff);
}

.lmsc-dash__block-customizer-toggle--active {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border-color: var(--lmsc-primary, #007aff);
}

/* Block Edit Mode */
.lmsc-dash__block {
	transition: all 0.2s;
	position: relative;
}

.lmsc-dash--block-edit .lmsc-dash__block {
	border: 2px dashed var(--lmsc-border, #cbd5e1);
	border-radius: 14px;
	padding: 8px;
	margin-bottom: 16px;
	cursor: grab;
}

.lmsc-dash--block-edit .lmsc-dash__block:active {
	cursor: grabbing;
}

.lmsc-dash--block-edit .lmsc-dash__block:hover {
	border-color: var(--lmsc-primary, #007aff);
}

.lmsc-dash--block-edit .lmsc-dash__block.lmsc-dash__block--dragging {
	opacity: 0.4;
}

.lmsc-dash--block-edit .lmsc-dash__block.lmsc-dash__block--drag-over {
	border-color: var(--lmsc-primary, #007aff);
	background: rgba(0, 122, 255, 0.05);
}

/* Block Handle */
.lmsc-dash__block-handle {
	display: none;
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	justify-content: space-between;
	align-items: center;
	z-index: 5;
	pointer-events: none;
}

.lmsc-dash--block-edit .lmsc-dash__block-handle {
	display: flex;
	pointer-events: auto;
}

.lmsc-dash__block-drag-icon {
	color: var(--lmsc-text-muted, #94a3b8);
	cursor: grab;
	padding: 2px;
}

.lmsc-dash__block-visibility {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--lmsc-text-muted, #94a3b8);
	padding: 4px;
	border-radius: 6px;
	transition: all 0.15s;
}

.lmsc-dash__block-visibility:hover {
	background: rgba(0, 0, 0, 0.05);
	color: var(--lmsc-text-color, #1e293b);
}

.lmsc-dash__block-visibility--hidden {
	opacity: 0.4;
}

/* Hidden blocks in edit mode */
.lmsc-dash--block-edit .lmsc-dash__block--hidden {
	opacity: 0.35;
	border-style: dotted;
}

.lmsc-dash__block--hidden:not(.lmsc-dash--block-edit .lmsc-dash__block--hidden) {
	display: none;
}

@keyframes lmsc-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ==========================================================================
   Audit Fixes - Mobile Responsive Overrides
   ========================================================================== */

/* Reports stats grid: 2-column on tablet, 1-column on mobile */
@media (max-width: 768px) {
	.lmsc-reports-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.lmsc-reports-stats {
		grid-template-columns: 1fr;
	}

	.lmsc-reports-header__actions {
		width: 100%;
		min-width: 0;
	}

	.lmsc-reports-header__actions > * {
		max-width: 100%;
	}

	/* Keep native date inputs inside the report card. The button gets its own
	   full-width row so both dates retain a usable tap target. */
	.lmsc-reports-date-range {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		width: 100%;
		min-width: 0;
	}

	.lmsc-reports-date-range .lmsc-dash__input--sm {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.lmsc-reports-date-range .lmsc-dash-btn {
		grid-column: 1 / -1;
		width: 100%;
		min-width: 0;
	}

	/* Reports action bar: wrap buttons */
	.lmsc-reports-filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.lmsc-reports-filters .lmsc-dash__pill {
		justify-content: center;
		width: 100%;
	}
}

/* Touch target minimum size for toolbar buttons */
@media (max-width: 768px) {

	.lmsc-dash__header-right button,
	.lmsc-dash__header-right a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Audit Fixes - Sections 4-13
   ========================================================================== */

/* ── Section 5: Certificate ID badge styling ── */
.lmsc-dash__cert-uid {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	font-family: 'SF Mono', 'Consolas', monospace;
	letter-spacing: 0.5px;
	color: var(--lmsc-text-muted, #64748b);
	background: rgba(0, 0, 0, 0.04);
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	margin-bottom: 6px;
}

/* ── Section 9: Announcement priority left-border color-coding ── */
.lmsc-announcement-card--urgent {
	border-left: 4px solid #EF4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), transparent);
}

.lmsc-announcement-card--high {
	border-left: 4px solid #F97316;
	background: linear-gradient(135deg, rgba(249, 115, 22, 0.03), transparent);
}

.lmsc-announcement-card--normal {
	border-left: 4px solid #3B82F6;
}

/* ── Section 10: Group card compact padding + prominent button ── */
.lmsc-card--group {
	padding: 16px 20px;
}

.lmsc-card--group .lmsc-card__title {
	margin-bottom: 6px;
}

.lmsc-card--group .lmsc-card__stats-row {
	margin-bottom: 8px;
}

.lmsc-card--group .lmsc-group-expand-btn {
	background: var(--lmsc-action-bg, #1D6BEE);
	color: var(--lmsc-action-fg, #fff);
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 0.8rem;
	cursor: pointer;
	transition: var(--lmsc-transition);
}

.lmsc-card--group .lmsc-group-expand-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* ── Section 11: Profile Change Password button consistency ── */
.lmsc-dash__profile-form--password .lmsc-dash-btn--secondary {
	background: transparent;
	color: var(--lmsc-primary, #3B82F6);
	border: 1.5px solid var(--lmsc-primary, #3B82F6);
}

.lmsc-dash__profile-form--password .lmsc-dash-btn--secondary:hover {
	background: rgba(var(--lmsc-primary-rgb), 0.08);
}

/* ── Section 7: Reports progress bar improved contrast ── */
.lmsc-reports-progress-fill {
	min-width: 4px;
}

/* ── Section 8: Activity filter-to-content spacing ── */
.lmsc-dash__activity-tab .lmsc-dash__toolbar {
	margin-bottom: 12px;
}

.lmsc-dash__activity-tab .lmsc-dash__empty-state {
	padding: 40px 24px;
}

/* ── Section 4: Quiz stats-to-toolbar spacing ── */
.lmsc-quizzes-stats {
	margin-bottom: 20px;
}

/* ── Section 7: Reports table progress bar contrast ── */
.lmsc-gl-progress-bar__fill {
	min-width: 4px;
}

.lmsc-gl-progress-fill {
	min-width: 4px;
}

/* ── Section 10: Group card default avatar icon ── */
.lmsc-card--group .lmsc-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(var(--lmsc-primary-rgb), 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 8px;
}

.lmsc-card--group .lmsc-card__avatar svg {
	width: 22px;
	height: 22px;
	color: var(--lmsc-primary, #3B82F6);
	opacity: 0.8;
}

/* ===== Mobile Layout Fixes ===== */
@media (max-width: 768px) {

	/* 1. Fix hamburger toggle - only show on topnav layout;
	      sidebar layout uses its own mobile-toggle */
	.lmsc-dash--sidebar .lmsc-dash__hamburger {
		display: none !important;
	}

	/* Position hamburger inline with header, not overlapping breadcrumb */
	.lmsc-dash__header-left {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: nowrap;
		min-width: 0;
	}

	/* 2. Fix search - collapse to icon-only, prevent text bleed */
	.lmsc-dash__search {
		width: 36px;
		min-width: 36px;
		flex-shrink: 0;
	}

	.lmsc-dash__search-input {
		padding: 8px 8px 8px 36px;
		font-size: 13px;
	}

	.lmsc-dash__search-icon {
		left: 10px;
	}

	.lmsc-dash__search:focus-within {
		width: 200px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 50;
	}

	/* 3. Fix avatar - keep perfectly round, no squeezing */
	.lmsc-dash__header-avatar {
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
		flex-shrink: 0;
		border-radius: 50%;
		overflow: hidden;
	}

	.lmsc-dash__header-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* Also fix sidebar avatar on mobile */
	.lmsc-dash__sidebar-avatar {
		flex-shrink: 0;
	}

	.lmsc-dash__sidebar-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}

	/* 4. Hide admin controls on mobile - layout switcher, skin switcher */
	.lmsc-dash__header-layout-switcher,
	.lmsc-dash__skin-switcher,
	.lmsc-dash__layout-switcher {
		display: none !important;
	}

	/* Tighter header on mobile */
	.lmsc-dash__header {
		padding: 8px 0 12px;
		gap: 8px;
	}

	.lmsc-dash__header-right {
		gap: 6px;
		flex-wrap: nowrap;
		position: relative;
	}

	/* Shrink toolbar buttons on mobile for better fit */
	.lmsc-dash__header-action-btn {
		width: 32px;
		height: 32px;
		padding: 6px;
	}

	.lmsc-dash__header-action-btn svg {
		width: 16px;
		height: 16px;
	}

	.lmsc-dash__bell-btn,
	.lmsc-dash__msg-btn {
		width: 32px;
		height: 32px;
		padding: 6px;
	}

	/* Page title sizing on mobile */
	.lmsc-dash__page-title {
		font-size: 18px !important;
	}

	.lmsc-dash__header-left p {
		font-size: 12px;
	}
}

/* ===== Announcement Toolbar Badge ===== */
.lmsc-dash__announcements-icon {
	position: relative;
}

.lmsc-dash__announce-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--lmsc-accent, #ef4444);
	color: var(--lmsc-on-accent, #fff);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 10px;
	pointer-events: none;
}

/* ===== Messaging Role Badges ===== */
.lmsc-dash__msg-role-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 4px;
	line-height: 16px;
	vertical-align: middle;
}

.lmsc-dash__msg-role-badge--instructor {
	background: rgba(59, 130, 246, 0.12);
	color: #2563eb;
}

.lmsc-dash__msg-role-badge--leader {
	background: rgba(168, 85, 247, 0.12);
	color: #7c3aed;
}

/* ═════════════════════════════════════════════════════
 *  Instructor Tab
 * ═════════════════════════════════════════════════════ */

.lmsc-instructor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.lmsc-instructor__header h3 {
	margin: 0;
}

.lmsc-instructor__new-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

/* Course list cards */
.lmsc-instructor__course-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.lmsc-instructor__course-card {
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: var(--lmsc-radius, .75rem);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow .2s, transform .15s;
}

.lmsc-instructor__course-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.lmsc-instructor__course-thumb {
	height: 140px;
	background: var(--lmsc-bg-muted, #f3f4f6);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lmsc-instructor__course-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lmsc-instructor__course-thumb-placeholder {
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-instructor__course-info {
	padding: 1rem;
}

.lmsc-instructor__course-info h4 {
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
}

.lmsc-instructor__course-meta {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .78rem;
	color: var(--lmsc-text-muted, #6b7280);
}

/* Badges */
.lmsc-instructor__badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 9999px;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.lmsc-instructor__badge--published {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.lmsc-instructor__badge--draft {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}

.lmsc-instructor__badge--pending {
	background: rgba(245, 158, 11, 0.15);
	color: #d97706;
}

/* Pulsing dot for pending courses (UX-10) */
.lmsc-instructor__pending-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d97706;
	margin-right: 5px;
	vertical-align: middle;
	animation: lmsc-pending-pulse 1.5s ease-in-out infinite;
}

@keyframes lmsc-pending-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

/* Tag row with clear button (UX-7) */
.lmsc-instructor__tag-row {
	display: flex;
	gap: 6px;
	align-items: center;
}

.lmsc-instructor__tag-row .lmsc-dash-input {
	flex: 1;
}

.lmsc-instructor__tag-row .lmsc-dash-btn--ghost {
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 1;
	padding: 4px 8px;
}

/* Revenue estimate hint icon (UX-11) */
.lmsc-instructor__stat-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	font-size: 10px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	cursor: help;
	vertical-align: middle;
	margin-left: 3px;
}

/* Editor */
.lmsc-instructor__editor-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--lmsc-editor-section-gap, 24px);
	flex-wrap: wrap;
	gap: .75rem;
}

.lmsc-instructor__back {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: none;
	border: none;
	color: var(--lmsc-text, #111);
	cursor: pointer;
	font-size: .9rem;
	padding: .4rem .5rem;
	border-radius: .375rem;
	transition: background .15s;
}

.lmsc-instructor__back:hover {
	background: var(--lmsc-bg-muted, #f3f4f6);
}

.lmsc-instructor__editor-actions {
	display: flex;
	gap: .5rem;
}

/* Form */
.lmsc-instructor__form {
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: var(--lmsc-radius, .75rem);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Hide editor and its children when not active */
.lmsc-instructor__editor[style*="display: none"],
.lmsc-instructor__editor[style*="display:none"] {
	display: none !important;
}

/* Featured Image Upload */
.lmsc-instructor__thumb-field {
	margin-bottom: 1.25rem;
}

.lmsc-instructor__thumb-preview {
	position: relative;
	width: 100%;
	max-width: 320px;
	min-height: 180px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	border: 2px dashed var(--lmsc-border, #d1d5db);
	transition: border-color .2s;
}

.lmsc-instructor__thumb-preview:hover {
	border-color: var(--lmsc-primary, #007aff);
}

.lmsc-instructor__thumb-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 2rem;
	color: var(--lmsc-text-muted, #9ca3af);
	font-size: .82rem;
	text-align: center;
}

.lmsc-instructor__thumb-preview img {
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
	display: block;
}

.lmsc-instructor__thumb-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	z-index: 2;
}

.lmsc-instructor__thumb-remove:hover {
	background: rgba(239, 68, 68, .9);
}

/* Character counter */
.lmsc-instructor__char-count {
	display: block;
	text-align: right;
	font-size: .75rem;
	color: var(--lmsc-text-muted, #9ca3af);
	margin-top: 4px;
}

/* Lesson/Topic edit buttons */
.lmsc-instructor__lesson-edit,
.lmsc-instructor__topic-edit {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--lmsc-text-muted, #9ca3af);
	border-radius: 4px;
	transition: color .2s, background .2s;
}

.lmsc-instructor__lesson-edit:hover,
.lmsc-instructor__topic-edit:hover,
.lmsc-instructor__lesson-edit:focus,
.lmsc-instructor__topic-edit:focus,
.lmsc-instructor__lesson-edit:active,
.lmsc-instructor__topic-edit:active {
	/* light tint + primary icon so the pencil stays readable in every state
	   (never a solid blue fill with a same-colour icon on top) */
	color: var(--lmsc-primary, #007aff) !important;
	background: rgba(var(--lmsc-primary-rgb, 0, 122, 255), .12) !important;
}

/* Lesson edit form inside accordion */
.lmsc-instructor__lesson-edit-form .lmsc-instructor__inline-form {
	padding: .75rem 0;
	border-bottom: 1px solid var(--lmsc-border, #e5e7eb);
	margin-bottom: .75rem;
}

.lmsc-instructor__field {
	margin-bottom: 1rem;
}

.lmsc-instructor__field:last-child {
	margin-bottom: 0;
}

.lmsc-instructor__field label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	margin-bottom: .35rem;
	color: var(--lmsc-text, #111);
}

.lmsc-instructor__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.lmsc-required {
	color: #ef4444;
}

/* Curriculum */
.lmsc-instructor__curriculum {
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: var(--lmsc-radius, .75rem);
	padding: 1.5rem;
}

.lmsc-instructor__curriculum-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.lmsc-instructor__quizzes {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
}

.lmsc-instructor__curriculum-header h4 {
	margin: 0;
	font-size: 1rem;
}

.lmsc-instructor__curriculum-empty {
	text-align: center;
	color: var(--lmsc-text-muted, #9ca3af);
	padding: 2rem 1rem;
	font-size: .88rem;
}

/* Lesson accordion */
.lmsc-instructor__lesson {
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .06));
	border-radius: .5rem;
	margin-bottom: .5rem;
	overflow: hidden;
}

.lmsc-instructor__lesson-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	background: var(--lmsc-bg-muted, #f9fafb);
	cursor: default;
}

/* Drag handle */
.lmsc-instructor__lesson-drag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	color: var(--lmsc-text-muted, #9ca3af);
	padding: 4px 2px;
	flex-shrink: 0;
	transition: color .2s;
}

.lmsc-instructor__lesson-drag:hover {
	color: var(--lmsc-primary, #007aff);
}

.lmsc-instructor__lesson-drag:active {
	cursor: grabbing;
}

/* SortableJS states */
.lmsc-instructor__lesson--ghost {
	opacity: .4;
	border: 2px dashed var(--lmsc-primary, #3b82f6);
	border-radius: 8px;
}

.lmsc-instructor__lesson--chosen {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

.lmsc-instructor__lesson--dragging {
	opacity: .9;
}

/* TinyMCE editor wrapper */
.lmsc-instructor__editor-wrap {
	border-radius: var(--lmsc-radius, .5rem);
	overflow: visible;
}

.lmsc-instructor__editor-wrap .wp-editor-container {
	border-radius: var(--lmsc-radius, .5rem);
	overflow: hidden;
}

.lmsc-instructor__editor-wrap .mce-tinymce {
	border-radius: var(--lmsc-radius, .5rem) !important;
	overflow: hidden;
}

.lmsc-instructor__lesson-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lmsc-primary, #3b82f6);
	color: var(--lmsc-on-primary, #fff);
	font-size: .72rem;
	font-weight: 700;
	flex-shrink: 0;
}

.lmsc-instructor__lesson-title {
	flex: 1;
	font-weight: 600;
	font-size: .88rem;
}

.lmsc-instructor__lesson-count {
	font-size: .75rem;
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-instructor__lesson-toggle,
.lmsc-instructor__lesson-delete {
	background: none;
	border: none;
	cursor: pointer;
	padding: .25rem;
	border-radius: .25rem;
	color: var(--lmsc-text-muted, #9ca3af);
	transition: color .15s, background .15s;
}

.lmsc-instructor__lesson-toggle:hover {
	color: var(--lmsc-text, #111);
	background: rgba(0, 0, 0, .04);
}

.lmsc-instructor__lesson-delete:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
}

.lmsc-instructor__lesson--expanded .lmsc-instructor__lesson-toggle svg {
	transform: rotate(180deg);
}

.lmsc-instructor__lesson-body {
	padding: .75rem 1rem 1rem 2.5rem;
	border-top: 1px solid var(--lmsc-border, rgba(0, 0, 0, .06));
}

/* Topics */
.lmsc-instructor__topic {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .5rem;
	border-radius: .3rem;
	font-size: .85rem;
}

.lmsc-instructor__topic:hover {
	background: var(--lmsc-bg-muted, #f3f4f6);
}

.lmsc-instructor__topic-icon {
	color: var(--lmsc-text-muted, #9ca3af);
	flex-shrink: 0;
}

.lmsc-instructor__topic-title {
	flex: 1;
}

.lmsc-instructor__topic-delete {
	background: none;
	border: none;
	cursor: pointer;
	padding: .2rem;
	border-radius: .2rem;
	color: var(--lmsc-text-muted, #9ca3af);
	opacity: 0;
	transition: opacity .15s, color .15s;
}

.lmsc-instructor__topic:hover .lmsc-instructor__topic-delete {
	opacity: 1;
}

.lmsc-instructor__topic-delete:hover {
	color: #ef4444;
}

/* Add topic button */
.lmsc-instructor__add-topic-btn {
	margin-top: .5rem;
	font-size: .8rem;
}

/* Inline forms */
.lmsc-instructor__inline-form,
.lmsc-instructor__topic-inline-form {
	background: var(--lmsc-bg-muted, #f9fafb);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: .5rem;
	padding: .75rem;
	margin-top: .5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* Force topic element to wrap so the edit form goes below */
.lmsc-instructor__topic {
	flex-wrap: wrap;
}

/* Force WYSIWYG editor wrappers to take full width inside inline forms */
.lmsc-instructor__inline-form .wp-editor-wrap,
.lmsc-instructor__topic-inline-form .wp-editor-wrap,
.lmsc-instructor__topic-edit-form .wp-editor-wrap,
.lmsc-instructor__lesson-edit-form .wp-editor-wrap {
	width: 100% !important;
}

/* Topic/lesson edit forms should take full width */
.lmsc-instructor__topic-edit-form,
.lmsc-instructor__topic-inline-form {
	width: 100%;
	flex-basis: 100%;
}

/* Ensure the editor toolbar and iframe don't overflow */
.lmsc-instructor__inline-form .mce-tinymce,
.lmsc-instructor__topic-inline-form .mce-tinymce,
.lmsc-instructor__topic-edit-form .mce-tinymce,
.lmsc-instructor__lesson-edit-form .mce-tinymce {
	width: 100% !important;
	box-sizing: border-box;
}

/* Add Media button styling */
.lmsc-instructor__editor-wrap .wp-media-buttons,
.lmsc-instructor__inline-form .wp-media-buttons,
.lmsc-instructor__topic-inline-form .wp-media-buttons,
.lmsc-instructor__topic-edit-form .wp-media-buttons,
.lmsc-instructor__lesson-edit-form .wp-media-buttons {
	margin-bottom: 0;
}

/* Keep the Add Media outline inside the button radius. The outer editor
   wrapper remains unclipped so its larger radius cannot cut this corner. */
.lmsc-instructor__editor-wrap .wp-media-buttons .button,
.lmsc-instructor__inline-form .wp-media-buttons .button,
.lmsc-instructor__topic-inline-form .wp-media-buttons .button,
.lmsc-instructor__topic-edit-form .wp-media-buttons .button,
.lmsc-instructor__lesson-edit-form .wp-media-buttons .button {
	box-sizing: border-box;
	height: 40px;
	min-height: 40px;
	padding: 0 14px;
	border: none;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.55);
	background: var(--lmsc-card-bg, #fff);
	color: var(--lmsc-primary, #4f46e5);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}
.lmsc-instructor__editor-wrap .wp-media-buttons .button:hover,
.lmsc-instructor__inline-form .wp-media-buttons .button:hover,
.lmsc-instructor__topic-inline-form .wp-media-buttons .button:hover,
.lmsc-instructor__topic-edit-form .wp-media-buttons .button:hover,
.lmsc-instructor__lesson-edit-form .wp-media-buttons .button:hover {
	box-shadow: inset 0 0 0 1px var(--lmsc-primary, #4f46e5);
	background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.06);
}

/* Editor toolbar (TinyMCE) buttons: keep a light tint bg + primary-coloured
   icon on hover/focus/active so the glyph never washes out (e.g. a dark "B" on
   a saturated fill). Scoped to our course / lesson / topic editors. */
.lmsc-instructor__editor-wrap .mce-btn:hover button,
.lmsc-instructor__editor-wrap .mce-btn:focus button,
.lmsc-instructor__editor-wrap .mce-btn.mce-active button,
.lmsc-instructor__inline-form .mce-btn:hover button,
.lmsc-instructor__inline-form .mce-btn:focus button,
.lmsc-instructor__inline-form .mce-btn.mce-active button,
.lmsc-instructor__topic-inline-form .mce-btn:hover button,
.lmsc-instructor__topic-inline-form .mce-btn:focus button,
.lmsc-instructor__topic-inline-form .mce-btn.mce-active button,
.lmsc-instructor__topic-edit-form .mce-btn:hover button,
.lmsc-instructor__topic-edit-form .mce-btn:focus button,
.lmsc-instructor__topic-edit-form .mce-btn.mce-active button,
.lmsc-instructor__lesson-edit-form .mce-btn:hover button,
.lmsc-instructor__lesson-edit-form .mce-btn:focus button,
.lmsc-instructor__lesson-edit-form .mce-btn.mce-active button {
	background-color: rgba(var(--lmsc-primary-rgb, 99, 102, 241), 0.14) !important;
}
.lmsc-instructor__editor-wrap .mce-btn:hover .mce-ico,
.lmsc-instructor__editor-wrap .mce-btn:focus .mce-ico,
.lmsc-instructor__editor-wrap .mce-btn.mce-active .mce-ico,
.lmsc-instructor__inline-form .mce-btn:hover .mce-ico,
.lmsc-instructor__inline-form .mce-btn:focus .mce-ico,
.lmsc-instructor__inline-form .mce-btn.mce-active .mce-ico,
.lmsc-instructor__topic-inline-form .mce-btn:hover .mce-ico,
.lmsc-instructor__topic-inline-form .mce-btn:focus .mce-ico,
.lmsc-instructor__topic-inline-form .mce-btn.mce-active .mce-ico,
.lmsc-instructor__topic-edit-form .mce-btn:hover .mce-ico,
.lmsc-instructor__topic-edit-form .mce-btn:focus .mce-ico,
.lmsc-instructor__topic-edit-form .mce-btn.mce-active .mce-ico,
.lmsc-instructor__lesson-edit-form .mce-btn:hover .mce-ico,
.lmsc-instructor__lesson-edit-form .mce-btn:focus .mce-ico,
.lmsc-instructor__lesson-edit-form .mce-btn.mce-active .mce-ico {
	color: var(--lmsc-primary, #4f46e5) !important;
}

/* Quicktags / Visual-Text tabs row */
.lmsc-instructor__inline-form .wp-editor-tabs,
.lmsc-instructor__topic-inline-form .wp-editor-tabs,
.lmsc-instructor__topic-edit-form .wp-editor-tabs,
.lmsc-instructor__lesson-edit-form .wp-editor-tabs {
	float: right;
}

.lmsc-instructor__inline-actions {
	display: flex;
	gap: .5rem;
}

/* Category checkbox list */
.lmsc-instructor__cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .5rem 0;
}

.lmsc-instructor__cat-item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .75rem;
	border-radius: 20px;
	background: var(--lmsc-bg-muted, #f3f4f6);
	font-size: .82rem;
	cursor: pointer;
	transition: background .2s, border-color .2s;
	border: 1px solid transparent;
	user-select: none;
}

.lmsc-instructor__cat-item:hover {
	background: var(--lmsc-bg-elevated, #e5e7eb);
}

.lmsc-instructor__cat-item input[type="checkbox"] {
	width: 14px;
	height: 14px;
	accent-color: var(--lmsc-primary, #3b82f6);
	margin: 0;
}

.lmsc-instructor__cat-loading,
.lmsc-instructor__cat-empty {
	font-size: .82rem;
	color: var(--lmsc-text-muted, #9ca3af);
	padding: .25rem 0;
}

/* Price input with currency */
.lmsc-instructor__price-input-wrap {
	display: flex;
	align-items: center;
}

.lmsc-instructor__price-currency {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 38px;
	background: var(--lmsc-bg-muted, #f3f4f6);
	border: 1px solid var(--lmsc-border, #d1d5db);
	border-right: none;
	border-radius: var(--lmsc-radius, .5rem) 0 0 var(--lmsc-radius, .5rem);
	font-size: .85rem;
	font-weight: 600;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-instructor__price-input-wrap .lmsc-dash-input {
	border-radius: 0 var(--lmsc-radius, .5rem) var(--lmsc-radius, .5rem) 0;
}

/* Price fields row animation */
.lmsc-instructor__price-fields {
	animation: lmsc-slide-down .2s ease-out;
}

@keyframes lmsc-slide-down {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Field hint text */
.lmsc-instructor__field-hint {
	display: block;
	font-size: .75rem;
	color: var(--lmsc-text-muted, #9ca3af);
	margin-top: 4px;
}

/* Enrolled Students */
/* Quiz Builder */
.lmsc-instructor__quiz-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: 1rem;
}

.lmsc-instructor__quiz-item {
	background: var(--lmsc-bg, #fff);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: var(--lmsc-radius, 10px);
	overflow: hidden;
}

.lmsc-instructor__quiz-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .625rem .75rem;
	cursor: pointer;
	transition: background .15s;
}

.lmsc-instructor__quiz-header:hover {
	background: var(--lmsc-bg-offset, #f8fafc);
}

.lmsc-instructor__quiz-info {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1;
}

.lmsc-instructor__quiz-info svg {
	transition: transform .2s;
	flex-shrink: 0;
	color: var(--lmsc-muted, #64748b);
}

.lmsc-instructor__quiz-body {
	border-top: 1px solid var(--lmsc-border, #e2e8f0);
	padding: .75rem;
}

.lmsc-instructor__question-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: .75rem;
}

.lmsc-instructor__question-item {
	padding: .5rem .75rem;
	background: var(--lmsc-bg-offset, #f8fafc);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 6px;
}

.lmsc-instructor__question-header {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.lmsc-instructor__question-header strong {
	font-size: .8125rem;
}

.lmsc-instructor__badge--type {
	background: #dbeafe;
	color: #1e40af;
	font-size: .65rem;
	padding: .1rem .4rem;
	border-radius: 4px;
}

.lmsc-instructor__badge--draft {
	background: #fef3c7;
	color: #92400e;
	font-size: .65rem;
	padding: .1rem .4rem;
	border-radius: 4px;
}

.lmsc-question-answer-preview {
	list-style: none;
	padding: .25rem 0 0 .25rem;
	margin: .25rem 0 0 0;
	font-size: .75rem;
	color: var(--lmsc-muted, #64748b);
}

.lmsc-question-answer-preview li {
	padding: .1rem 0;
}

.lmsc-question-answer-preview li.lmsc-correct {
	color: #059669;
	font-weight: 600;
}

.lmsc-instructor__question-form {
	padding: .75rem;
	border: 1px dashed var(--lmsc-border, #e2e8f0);
	border-radius: 6px;
	margin-bottom: .75rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.lmsc-answer-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .35rem;
}

.lmsc-answer-row input[type="radio"],
.lmsc-answer-row input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
}

.lmsc-answer-row .lmsc-answer-text {
	flex: 1;
	font-size: .8125rem;
}

.lmsc-instructor__field-row {
	display: flex;
	gap: .75rem;
}

.lmsc-instructor__field {
	flex: 1;
}

.lmsc-instructor__field label {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	color: var(--lmsc-muted, #64748b);
	margin-bottom: .25rem;
}

.lmsc-instructor__students {
	margin-top: 1.5rem;
}

.lmsc-instructor__student-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, .06));
}

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

.lmsc-instructor__student-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.lmsc-instructor__student-info {
	flex: 1;
	min-width: 0;
}

.lmsc-instructor__student-name {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--lmsc-text, #111);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-instructor__student-email {
	display: block;
	font-size: .75rem;
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-instructor__student-progress {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	width: 120px;
}

.lmsc-instructor__student-bar {
	flex: 1;
	height: 6px;
	background: var(--lmsc-bg-muted, #e5e7eb);
	border-radius: 3px;
	overflow: hidden;
}

.lmsc-instructor__student-bar-fill {
	height: 100%;
	background: var(--lmsc-primary, #3b82f6);
	border-radius: 3px;
	transition: width .3s ease;
}

.lmsc-instructor__student-pct {
	font-size: .75rem;
	font-weight: 600;
	color: var(--lmsc-text-muted, #6b7280);
	min-width: 32px;
	text-align: right;
}

.lmsc-instructor__students-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: .75rem 0;
}

.lmsc-instructor__students-page-info {
	font-size: .82rem;
	color: var(--lmsc-text-muted, #9ca3af);
}

/* Keyboard shortcuts bar */
.lmsc-instructor__shortcuts-bar {
	display: flex;
	gap: 1.5rem;
	padding: .75rem 0;
	font-size: .75rem;
	color: var(--lmsc-text-muted, #9ca3af);
	border-top: 1px solid var(--lmsc-border, rgba(0, 0, 0, .06));
	margin-top: 1rem;
}

.lmsc-instructor__shortcuts-bar kbd {
	display: inline-block;
	padding: 1px 5px;
	font-size: .7rem;
	font-family: inherit;
	background: var(--lmsc-bg-muted, #f3f4f6);
	border: 1px solid var(--lmsc-border, #d1d5db);
	border-radius: 3px;
	box-shadow: 0 1px 0 var(--lmsc-border, #d1d5db);
}

/* Course list pagination */
.lmsc-instructor__course-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: .75rem 0;
	margin-top: .5rem;
}

.lmsc-instructor__page-info {
	font-size: .82rem;
	color: var(--lmsc-text-muted, #9ca3af);
}

/* Analytics Dashboard */
.lmsc-instructor__header-actions {
	display: flex;
	gap: .5rem;
	align-items: center;
}

.lmsc-instructor__analytics-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.lmsc-instructor__analytics-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

.lmsc-instructor__stat-card {
	background: var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: var(--lmsc-radius, .75rem);
	padding: 1.25rem;
	text-align: center;
}

.lmsc-instructor__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	margin-bottom: .5rem;
}

.lmsc-instructor__stat-icon--students {
	background: rgba(59, 130, 246, .1);
	color: #3b82f6;
}

.lmsc-instructor__stat-icon--revenue {
	background: rgba(16, 185, 129, .1);
	color: #10b981;
}

.lmsc-instructor__stat-icon--progress {
	background: rgba(245, 158, 11, .1);
	color: #f59e0b;
}

.lmsc-instructor__stat-icon--completion {
	background: rgba(139, 92, 246, .1);
	color: #8b5cf6;
}

.lmsc-instructor__stat-value {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--lmsc-text, #111827);
	line-height: 1.2;
}

.lmsc-instructor__stat-label {
	font-size: .78rem;
	color: var(--lmsc-text-muted, #6b7280);
	margin-top: .25rem;
}

.lmsc-instructor__stat-sub {
	font-size: .75rem;
	color: var(--lmsc-text-muted, #9ca3af);
}

.lmsc-instructor__analytics-section {
	margin-bottom: 1.5rem;
}

.lmsc-instructor__analytics-section h4 {
	font-size: .95rem;
	font-weight: 600;
	margin: 0 0 .75rem;
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-instructor__analytics-note {
	margin: -.35rem 0 .85rem;
	font-size: 12px;
	line-height: 1.45;
	color: var(--lmsc-text-muted, #64748b);
}

/* Analytics Table */
.lmsc-instructor__analytics-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lmsc-instructor__analytics-table {
	width: 100%;
	min-width: 600px;
	/* Forces horizontal scroll on mobile instead of squished columns */
	border-collapse: collapse;
	font-size: .82rem;
}

.lmsc-instructor__analytics-table thead th {
	text-align: start;
	padding: .6rem .75rem;
	font-weight: 600;
	color: var(--lmsc-text-muted, #6b7280);
	border-bottom: 2px solid var(--lmsc-border, #e5e7eb);
	white-space: nowrap;
}

.lmsc-instructor__analytics-table tbody tr {
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, .06));
}

.lmsc-instructor__analytics-table tbody tr:nth-child(even) {
	background: var(--lmsc-bg-muted, rgba(0, 0, 0, .02));
}

.lmsc-instructor__analytics-table td {
	padding: .6rem .75rem;
	vertical-align: middle;
	color: var(--lmsc-text, #374151);
}

.lmsc-instructor__analytics-course-name {
	font-weight: 600;
	margin-inline-end: .5rem;
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-instructor__analytics-progress {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.lmsc-instructor__analytics-rev-cell {
	font-weight: 600;
	color: var(--lmsc-text, #111827);
}

/* Revenue Chart */
.lmsc-instructor__revenue-chart {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.lmsc-instructor__revenue-row {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.lmsc-instructor__revenue-name {
	width: 140px;
	font-size: .82rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
	color: var(--lmsc-text, #1a1a2e);
}

.lmsc-instructor__revenue-bar-wrap {
	flex: 1;
	height: 8px;
	background: var(--lmsc-bg-muted, #e5e7eb);
	border-radius: 4px;
	overflow: hidden;
}

.lmsc-instructor__revenue-bar {
	height: 100%;
	background: var(--lmsc-success, var(--lmsc-primary, #059669));
	border-radius: 4px;
	transition: width .4s ease;
}

.lmsc-instructor__revenue-amount {
	font-size: .82rem;
	font-weight: 700;
	color: var(--lmsc-text, #111827);
	min-width: 60px;
	text-align: end;
}

/* Status bar */
.lmsc-instructor__status {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	padding: .875rem 1.5rem;
	border-radius: .625rem;
	font-size: .9rem;
	font-weight: 600;
	z-index: 9999;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	animation: lmsc-toast-in .35s ease-out;
	max-width: 400px;
}

@keyframes lmsc-toast-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.lmsc-instructor__status--success {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}

.lmsc-instructor__status--success::before {
	content: '✓ ';
	font-weight: 700;
}

.lmsc-instructor__status--error {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.lmsc-instructor__status--error::before {
	content: '✕ ';
	font-weight: 700;
}

/* Empty state */
.lmsc-instructor__empty .lmsc-empty-state__illustration {
	color: var(--lmsc-text-muted, #9ca3af);
}

/* Confirm Modal */
.lmsc-instructor__confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(3px);
	animation: lmsc-fadeIn 0.15s ease;
}

.lmsc-instructor__confirm-box {
	background: var(--lmsc-surface, var(--lmsc-bg-card, #fff));
	border-radius: 12px;
	padding: 28px 32px 24px;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	text-align: center;
	animation: lmsc-scaleIn 0.2s ease;
}

.lmsc-instructor__confirm-box p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lmsc-text-primary, #1f2937);
}

.lmsc-instructor__confirm-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.lmsc-instructor__confirm-actions .lmsc-dash-btn {
	min-width: 110px;
}

.lmsc-instructor__confirm-box .lmsc-instructor__status {
	position: static;
	max-width: none;
	margin: 0 0 12px;
	padding: 10px 12px;
	text-align: start;
	box-shadow: none;
}

@keyframes lmsc-fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes lmsc-scaleIn {
	from {
		transform: scale(0.92);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 640px) {
	.lmsc-instructor__course-list {
		grid-template-columns: 1fr;
	}

	.lmsc-instructor__field-row {
		grid-template-columns: 1fr;
	}

	.lmsc-instructor__editor-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.lmsc-instructor__earnings-stats {
		flex-direction: column;
	}

	.lmsc-instructor__earnings-filters {
		flex-direction: column;
	}
}

/* ── Earnings Dashboard (Premium Redesign) ── */
.lmsc-instructor__earnings-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	gap: 1rem;
	align-items: stretch;
	margin-bottom: 1.5rem;
}

.lmsc-instructor__earnings-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--lmsc-surface-alt, var(--lmsc-surface, #fff));
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .1));
	border-radius: .875rem;
	transition: transform .2s ease, box-shadow .2s ease;
	overflow: hidden;
}

.lmsc-instructor__earnings-stat::before {
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(99, 102, 241, .08);
}

.lmsc-instructor__earnings-stat:hover {
	transform: none;
	box-shadow: none;
}

.lmsc-instructor__earnings-stat:nth-child(2) {
	background: var(--lmsc-surface-alt, var(--lmsc-surface, #fff));
	border-color: var(--lmsc-border, rgba(0, 0, 0, .1));
}

.lmsc-instructor__earnings-stat:nth-child(2)::before {
	background: rgba(16, 185, 129, .08);
}

.lmsc-instructor__earnings-stat:nth-child(2):hover {
	box-shadow: none;
}

.lmsc-instructor__earnings-stat:nth-child(3) {
	background: var(--lmsc-surface-alt, var(--lmsc-surface, #fff));
	border-color: var(--lmsc-border, rgba(0, 0, 0, .1));
}

.lmsc-instructor__earnings-stat:nth-child(3)::before {
	background: rgba(245, 158, 11, .08);
}

.lmsc-instructor__earnings-stat:nth-child(3):hover {
	box-shadow: none;
}

.lmsc-instructor__earnings-stat-label {
	display: block;
	font-size: .7rem;
	font-weight: 600;
	color: var(--lmsc-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: .5rem;
}

.lmsc-instructor__earnings-stat-value {
	display: block;
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--lmsc-text, #111827);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.lmsc-instructor__earnings-stat-value--balance {
	color: var(--lmsc-text, #111827);
}

/* Withdraw button styling inside stat bar */
.lmsc-instructor__earnings-stats .lmsc-dash-btn--primary {
	align-self: center;
	padding: .875rem 1.75rem;
	font-weight: 700;
	border-radius: .75rem;
	font-size: .85rem;
	background: linear-gradient(135deg, var(--lmsc-action-bg, #1D6BEE) 0%, var(--lmsc-action-bg, #1D6BEE) 100%);
	border: none;
	color: #fff;
	box-shadow: 0 4px 14px rgba(79, 70, 229, .3);
	transition: all .25s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.lmsc-instructor__earnings-stats .lmsc-dash-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(79, 70, 229, .4);
	background: linear-gradient(135deg, var(--lmsc-action-bg, #1D6BEE) 0%, var(--lmsc-action-bg, #1D6BEE) 100%);
}

.lmsc-instructor__earnings-stats .lmsc-dash-btn--primary:disabled,
.lmsc-instructor__earnings-stats .lmsc-dash-btn--primary:disabled:hover {
	background: var(--lmsc-surface-alt, var(--lmsc-surface));
	color: var(--lmsc-text-muted);
	border: 1px solid var(--lmsc-border);
	box-shadow: none;
	transform: none;
	opacity: 1;
	cursor: not-allowed;
}

/* Filters bar */
.lmsc-instructor__earnings-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: .75rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.lmsc-instructor__earnings-filter-note {
	flex: 1 0 100%;
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--lmsc-text-muted, #64748b);
}

/* Sections */
.lmsc-instructor__earnings-section {
	margin-bottom: 2rem;
	background: var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: .875rem;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.lmsc-instructor__earnings-section h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--lmsc-text, #111827);
	display: flex;
	align-items: center;
	gap: .5rem;
}

.lmsc-instructor__earnings-section h4::before {
	content: '';
	width: 4px;
	height: 1.1em;
	background: var(--lmsc-primary);
	border-radius: 2px;
	display: inline-block;
}

.lmsc-instructor__earnings-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: .5rem;
}

/* Commission & Withdrawal table */
.lmsc-instructor__earnings-table-wrap table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .85rem;
}

.lmsc-instructor__earnings-table-wrap table thead th {
	background: var(--lmsc-surface-alt, #f8fafc);
	border-bottom: 2px solid var(--lmsc-border, #e2e8f0);
	padding: .75rem 1rem;
	text-align: start;
	font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--lmsc-text-muted, #64748b);
	white-space: nowrap;
}

.lmsc-instructor__earnings-table-wrap table tbody td {
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--lmsc-border, #f1f5f9);
	color: var(--lmsc-text, #374151);
	vertical-align: middle;
}

.lmsc-instructor__earnings-table-wrap table tbody tr:last-child td {
	border-bottom: none;
}

.lmsc-instructor__earnings-table-wrap table tbody tr:hover td {
	background: var(--lmsc-surface-alt, #f8fafc);
}

.lmsc-instructor__earnings-section p.lmsc-instructor__earnings-section-note {
	margin: -.55rem 0 .8rem;
	padding: 0;
	text-align: start;
	font-size: 12px;
	font-style: normal;
	color: var(--lmsc-text-muted, #64748b);
}

/* Status badges in tables */
.lmsc-instructor__badge--completed,
.lmsc-instructor__badge--COMPLETED {
	display: inline-block;
	background: linear-gradient(135deg, #d1fae5, #a7f3d0);
	color: #065f46;
	font-size: .65rem;
	font-weight: 700;
	padding: .2rem .6rem;
	border-radius: .375rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.lmsc-instructor__badge--pending {
	display: inline-block;
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	color: #92400e;
	font-size: .65rem;
	font-weight: 700;
	padding: .2rem .6rem;
	border-radius: .375rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.lmsc-instructor__badge--refunded {
	display: inline-block;
	background: linear-gradient(135deg, #fee2e2, #fecaca);
	color: #991b1b;
	font-size: .65rem;
	font-weight: 700;
	padding: .2rem .6rem;
	border-radius: .375rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.lmsc-instructor__badge--published {
	display: inline-block;
	background: linear-gradient(135deg, #d1fae5, #a7f3d0);
	color: #065f46;
	font-size: .65rem;
	font-weight: 700;
	padding: .2rem .6rem;
	border-radius: .375rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Empty state text in tables */
.lmsc-instructor__earnings-section p {
	text-align: center;
	color: var(--lmsc-text-muted, #9ca3af);
	font-style: italic;
	padding: 1rem;
	margin: 0;
}

/* Withdrawal modal enhancement */
.lmsc-modal__body h3 {
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: .25rem;
}

/* Responsive */
@media (max-width: 768px) {
	.lmsc-instructor__earnings-stats {
		grid-template-columns: 1fr;
	}

	.lmsc-instructor__earnings-filters {
		flex-direction: column;
	}

	.lmsc-instructor__earnings-section {
		padding: 1rem;
	}
}

/* ── Instructor Registration Form ── */
.lmsc-instructor-reg {
	max-width: 600px;
	margin: 2rem auto;
	padding: 2rem;
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 1rem);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
}

.lmsc-instructor-reg__header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.lmsc-instructor-reg__header h2 {
	margin: .5rem 0 .25rem;
	font-size: 1.5rem;
	font-weight: 700;
}

.lmsc-instructor-reg__header p {
	color: var(--lmsc-text-muted, #6b7280);
	font-size: .9rem;
	margin: 0;
}

.lmsc-instructor-reg__notice {
	padding: 1.25rem;
	border-radius: .75rem;
	text-align: center;
	border: 1px solid var(--lmsc-border);
}

.lmsc-instructor-reg__notice--success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.lmsc-instructor-reg__notice--pending {
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}

.lmsc-instructor-reg__field {
	margin-bottom: 1rem;
}

.lmsc-instructor-reg__field label {
	display: block;
	font-weight: 600;
	font-size: .85rem;
	margin-bottom: .35rem;
}

.lmsc-instructor-reg__actions {
	text-align: center;
	margin-top: 1.25rem;
}

.lmsc-instructor-reg__status {
	margin-top: 1rem;
	padding: .75rem;
	border-radius: .5rem;
	text-align: center;
	font-size: .85rem;
}

.lmsc-instructor-reg__status--success {
	background: #ecfdf5;
	color: #065f46;
}

.lmsc-instructor-reg__status--error {
	background: #fef2f2;
	color: #991b1b;
}

/* Guest registration form extras */
.lmsc-instructor-reg__subtitle {
	text-align: center;
	color: var(--lmsc-text-muted, #6b7280);
	font-size: .88rem;
	margin: -0.5rem 0 1.5rem;
}

.lmsc-instructor-reg__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 520px) {
	.lmsc-instructor-reg__row {
		grid-template-columns: 1fr;
	}
}

.lmsc-instructor-reg__separator {
	height: 1px;
	background: var(--lmsc-border, rgba(0,0,0,.08));
	margin: 1.5rem 0;
}

.lmsc-instructor-reg__section-label {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--lmsc-text-muted, #6b7280);
	margin-bottom: 1rem;
}

.lmsc-instructor-reg__field-hint {
	display: block;
	font-size: .75rem;
	color: var(--lmsc-text-muted, #94a3b8);
	margin-top: .25rem;
}

.lmsc-instructor-reg__field .required {
	color: #ef4444;
}

.lmsc-instructor-reg__login-link {
	text-align: center;
	font-size: .85rem;
	color: var(--lmsc-text-muted, #6b7280);
	margin-top: 1rem;
}
.lmsc-instructor-reg__login-link a {
	color: var(--lmsc-primary, #3b82f6);
	font-weight: 600;
	text-decoration: none;
}
.lmsc-instructor-reg__login-link a:hover {
	text-decoration: underline;
}

.lmsc-instructor-reg__notice--rejected {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.lmsc-instructor-reg__notice--disabled {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #64748b;
}

.lmsc-instructor-reg__rejection-reason {
	font-size: .85rem;
	margin-top: .5rem;
	opacity: .85;
}

/* ── Instructor Listing Grid ── */
.lmsc-instructor-listing {
	display: grid;
	grid-template-columns: repeat(var(--lmsc-listing-cols, 3), 1fr);
	gap: 1.25rem;
	padding: 1rem 0;
}

.lmsc-instructor-listing__card {
	background: var(--lmsc-card-bg, #fff);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: var(--lmsc-radius, 1rem);
	padding: 1.5rem;
	text-align: center;
	transition: transform .2s, box-shadow .2s;
}

.lmsc-instructor-listing__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.lmsc-instructor-listing__avatar {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-bottom: .75rem;
}

.lmsc-instructor-listing__name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 .25rem;
}

.lmsc-instructor-listing__expertise {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	padding: .15rem .6rem;
	border-radius: 4px;
	background: var(--lmsc-primary-light, #dbeafe);
	color: var(--lmsc-primary, #3b82f6);
	margin-bottom: .5rem;
}

.lmsc-instructor-listing__bio {
	font-size: .82rem;
	color: var(--lmsc-text-muted, #6b7280);
	margin: 0 0 .75rem;
	line-height: 1.4;
}

.lmsc-instructor-listing__stats {
	display: flex;
	justify-content: center;
	gap: 1rem;
	font-size: .78rem;
	color: var(--lmsc-text-muted, #6b7280);
}

.lmsc-instructor-listing__stat {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.lmsc-instructor-listing__empty {
	text-align: center;
	padding: 2rem;
	color: var(--lmsc-text-muted);
}

/* ── Co-Instructor List ── */
.lmsc-instructor__co-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	min-height: 2rem;
}

.lmsc-instructor__co-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .65rem;
	border-radius: 20px;
	background: var(--lmsc-bg-muted, #f3f4f6);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	font-size: .8rem;
	font-weight: 500;
}

.lmsc-instructor__co-chip button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: .9rem;
	color: var(--lmsc-text-muted);
	padding: 0;
	line-height: 1;
}

@media (max-width: 640px) {
	.lmsc-instructor-listing {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   RESPONSIVE FIXES - Mobile & Tablet
   Critical: sidebar scroll, stat card icons, nav text, layout fixes
   ========================================================================== */

/* ---------- Tablet (≤768px) - Sidebar & Layout ---------- */
@media (max-width: 768px) {

	/* Sidebar off-canvas: MUST scroll */
	.lmsc-dash__sidebar {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.lmsc-dash__sidebar-nav {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex: 1;
		min-height: 0;
	}

	/* Stat card icons: shrink to 40px on tablet */
	.lmsc-dash__stat-icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.lmsc-dash__stat-icon svg {
		width: 20px;
		height: 20px;
	}

	/* Stat value slightly smaller */
	.lmsc-dash__stat-value {
		font-size: 24px;
	}

	/* Nav items: ensure text doesn't overflow */
	.lmsc-dash__nav-item {
		padding: 10px 16px;
		gap: 12px;
		min-width: 0;
	}

	/* Toolbar icons: wrap gracefully */
	.lmsc-dash__toolbar {
		flex-wrap: wrap;
		gap: 6px;
	}

	.lmsc-dash__toolbar-btn {
		width: 36px;
		height: 36px;
	}
}

/* ---------- Small screens (≤640px) - Stat cards 2-column ---------- */
@media (max-width: 640px) {

	/* Stat cards 2-column with icons visible */
	.lmsc-dash__stats-row {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px;
	}

	.lmsc-dash__stat-card {
		padding: 14px;
		gap: 8px;
	}

	.lmsc-dash__stat-icon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.lmsc-dash__stat-icon svg {
		width: 18px;
		height: 18px;
	}

	.lmsc-dash__stat-value {
		font-size: 22px;
	}

	.lmsc-dash__stat-label {
		font-size: 11px;
	}

	/* Header: stack on mobile */
	.lmsc-dash__header {
		gap: 8px;
	}

	.lmsc-dash__header h1 {
		font-size: 20px;
	}

	.lmsc-dash__header p {
		font-size: 13px;
	}
}

/* ---------- Phone (≤480px) - Compact everything ---------- */
@media (max-width: 480px) {

	/* Stat cards: stay 2-column but ultra-compact */
	.lmsc-dash__stats-row {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px;
	}

	.lmsc-dash__stat-card {
		padding: 12px;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.lmsc-dash__stat-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
	}

	.lmsc-dash__stat-icon svg {
		width: 16px;
		height: 16px;
	}

	.lmsc-dash__stat-value {
		font-size: 20px;
	}

	.lmsc-dash__stat-label {
		font-size: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Welcome banner compact */
	.lmsc-dash__welcome-banner {
		padding: 16px !important;
	}

	.lmsc-dash__welcome-text h2 {
		font-size: 18px;
	}

	.lmsc-dash__welcome-text p {
		font-size: 13px;
	}

	.lmsc-dash__welcome-ring {
		width: 56px;
		height: 56px;
	}

	.lmsc-dash__welcome-ring svg {
		width: 56px;
		height: 56px;
	}

	/* Course cards compact */
	.lmsc-dash__courses-grid {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	/* Widget grid single column */
	.lmsc-dash__overview-grid {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	/* Section headings smaller */
	.lmsc-dash__section-header h2 {
		font-size: 16px;
	}
}

/* ---------- Tiny phone (≤375px) - iPhone SE ---------- */
@media (max-width: 375px) {

	.lmsc-dash__main {
		padding: 10px !important;
	}

	.lmsc-dash__stat-card {
		padding: 10px;
	}

	.lmsc-dash__stat-value {
		font-size: 18px;
	}

	.lmsc-dash__stat-label {
		font-size: 10px;
	}

	.lmsc-dash__stat-icon {
		width: 28px;
		height: 28px;
		border-radius: 7px;
	}

	.lmsc-dash__stat-icon svg {
		width: 14px;
		height: 14px;
	}

	/* Mobile bottom tabs tighter */
	.lmsc-dash__mobile-tab {
		font-size: 0.55rem;
		padding: 4px 1px;
	}

	.lmsc-dash__mobile-tab svg {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================================================
   COLLAPSED SIDEBAR - Icon-only mode (JS sets grid to ~72px)
   Hide text labels, section headers, and center nav icons.
   ========================================================================== */

/* Enable container queries on sidebar */
.lmsc-dash__sidebar {
	container-type: inline-size;
	container-name: sidebar;
}

/* When sidebar container is narrow (≤120px = collapsed/icon-only) */
@container sidebar (max-width: 120px) {

	/* Hide section group headers entirely */
	.lmsc-dash__nav-section-header {
		display: none !important;
	}

	/* Hide nav text labels, keep only icons */
	.lmsc-dash__nav-item span:not(.lmsc-dash__nav-icon):not(.lmsc-dash__nav-badge) {
		display: none !important;
	}

	/* Center the nav icons */
	.lmsc-dash__nav-item {
		justify-content: center;
		padding: 10px 0;
		gap: 0;
	}

	/* Hide sidebar user info text */
	.lmsc-dash__sidebar-user h3,
	.lmsc-dash__sidebar-role,
	.lmsc-dash__sidebar-name {
		display: none !important;
	}

	/* Shrink avatar in collapsed mode */
	.lmsc-dash__sidebar-avatar {
		width: 40px;
		height: 40px;
		margin-bottom: 0;
	}

	/* Compact sidebar header */
	.lmsc-dash__sidebar-header {
		padding: 12px 8px;
	}

	/* Compact sidebar nav */
	.lmsc-dash__sidebar-nav {
		padding: 8px 4px;
	}

	/* Hide logout text */
	.lmsc-dash__logout-btn span {
		display: none;
	}

	/* Center logout icon */
	.lmsc-dash__logout-btn {
		justify-content: center !important;
		padding: 10px 0 !important;
	}

	/* Hide nav badges in collapsed mode */
	.lmsc-dash__nav-badge {
		display: none !important;
	}

	/* Sidebar footer compact */
	.lmsc-dash__sidebar-footer {
		padding: 8px 4px;
	}
}

/* ==========================================================================
   UX/UI AUDIT FIXES - All 70 Bug Fixes (CSS Batch)
   ========================================================================== */

/* #1: Mobile overflow - collapse toolbar icons into compact mode */
@media (max-width: 768px) {
	.lmsc-dash__toolbar-actions {
		gap: 2px !important;
		flex-wrap: nowrap;
	}

	.lmsc-dash__toolbar-actions .lmsc-dash__search {
		display: none !important;
	}

	.lmsc-dash__header {
		flex-wrap: nowrap;
		overflow: hidden;
		max-width: 100vw;
	}
}

/* #3: Dashboard content cut off on mobile */
@media (max-width: 768px) {

	.lmsc-dash__content,
	.lmsc-dash__main {
		max-width: 100vw !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	.lmsc-dash {
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}
}

/* #6: IN PROGRESS badge overlap */
.lmsc-dash__course-status-badge {
	z-index: 1;
	position: relative;
}

/* #7: My Account layout - responsive grid */
@media (max-width: 900px) {
	.lmsc-dash__account-form {
		grid-template-columns: 1fr !important;
	}
}

/* #8: Quiz table header contrast */
.lmsc-dash table th,
.lmsc-dash__table th {
	color: var(--lmsc-text) !important;
	font-weight: 600 !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* #12: Scroll-to-top overlap with Logout */
.lmsc-dash~.ast-scroll-top,
.lmsc-dash~#ast-scroll-top {
	bottom: 80px !important;
}

/* #18: Greeting card/banner - already fixed at L1182 to use var(--lmsc-accent) */

/* #19: Sunset search bar dark mode fix */
.lmsc-dash--dark .lmsc-dash__search-input {
	background: var(--lmsc-input-bg, rgba(255, 255, 255, 0.08)) !important;
	color: var(--lmsc-text) !important;
}

/* #20/#22/#60: Ticker - original at L4061 already uses var(--lmsc-primary) + var(--lmsc-accent), no override needed */

/* #23: Tablet header icons spacing */
@media (max-width: 900px) {
	.lmsc-dash__toolbar-actions {
		gap: 4px;
	}

	.lmsc-dash__toolbar-actions .lmsc-dash__toolbar-btn {
		padding: 6px;
		width: 34px;
		height: 34px;
	}
}

/* #24: Reports filter controls alignment */
.lmsc-dash__report-filters,
.lmsc-dash__reports-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* #25: Mobile course card overflow */
@media (max-width: 768px) {
	.lmsc-dash__course-card {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* #26: Sort dropdown width on mobile */
@media (max-width: 768px) {

	.lmsc-dash__sort-select,
	.lmsc-dash select {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* #27: Topnav vertical waste - compact header */
.lmsc-dash--topnav .lmsc-dash__topnav {
	padding: 0 16px;
}

/* #28: Tab crowding - horizontal scroll */
.lmsc-dash__topnav-list,
.lmsc-dash__topnav-items {
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.lmsc-dash__topnav-list::-webkit-scrollbar,
.lmsc-dash__topnav-items::-webkit-scrollbar {
	display: none;
}

/* #30: Ticker z-index over search */
.lmsc-ticker {
	position: relative;
	z-index: 1;
}

.lmsc-dash__search {
	z-index: 2;
}

/* #31: Mobile header icons margin */
@media (max-width: 600px) {
	.lmsc-dash__toolbar-btn {
		margin-right: 2px;
	}
}

/* #32: Ticker left text clip */
.lmsc-ticker__content {
	padding-left: 16px;
}

/* #34: Bio character counter alignment */
.lmsc-dash__char-count,
.lmsc-dash__bio-counter {
	display: block;
	text-align: right;
	margin-top: 4px;
	font-size: 12px;
	color: var(--lmsc-text-muted);
}

/* #35: Social link icons size */
.lmsc-dash__social-icon svg,
.lmsc-dash__social-link-icon svg {
	width: 18px !important;
	height: 18px !important;
}

/* #36: Account section whitespace */
.lmsc-dash__account-section {
	margin-bottom: 16px !important;
}

/* #38: Nav badge contrast */
.lmsc-dash__nav-badge {
	background: var(--lmsc-primary) !important;
	color: var(--lmsc-on-primary, #fff) !important;
}

/* #39: Search/filter gap */
.lmsc-dash__course-search {
	margin-bottom: 12px !important;
}

/* #41: Drag-drop zone centering */
.lmsc-dash__upload-zone,
.lmsc-dash__dropzone {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* #42: Dropdown padding standardization */
.lmsc-dash select,
.lmsc-dash__select {
	padding: 8px 12px;
}

/* #45: Export/Print button spacing */
.lmsc-dash__report-actions {
	gap: 8px !important;
	display: flex;
	flex-wrap: wrap;
}

/* #46: Chart legend size */
.lmsc-dash__chart-legend,
.lmsc-dash .chart-legend {
	font-size: 13px;
}

/* #47: Announcements header layout */
.lmsc-dash__announce-header {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* #48: Urgent pill spacing */
.lmsc-dash__announce-badge,
.lmsc-dash__announce-status {
	margin-bottom: 6px;
}

/* #49: Sidebar section header margins */
.lmsc-dash__nav-section-title {
	margin-top: 24px !important;
}

.lmsc-dash__nav-section-title:first-child {
	margin-top: 0 !important;
}

/* #50: Meetings empty state icon cutoff */
.lmsc-dash__empty-state,
.lmsc-dash__empty {
	padding: 24px !important;
	text-align: center;
}

/* #51: Meetings empty state max height */
.lmsc-dash__empty-state {
	max-height: 400px;
}

/* #52: Schedule button alignment */
.lmsc-dash__schedule-filters,
.lmsc-dash__schedule-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* #53: Learning Path tooltip color → skin primary */
.lmsc-dash__lp-tooltip,
.lmsc-dash__learning-path-marker {
	background: var(--lmsc-primary) !important;
	color: var(--lmsc-on-primary, #fff) !important;
}

/* #54: Instructor header overlap with WP admin bar */
body.admin-bar .lmsc-dash__instructor-header {
	padding-top: 32px;
}

/* #55: Instructor course card min-height */
.lmsc-dash__instructor-course-card {
	min-height: 280px;
}

/* #56/#65: Admin export buttons wrap */
.lmsc-dash__admin-export-row,
.lmsc-dash__admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* #58: Admin stat card overflow (semi-circle decoration) */
.lmsc-dash__admin-stat-card {
	overflow: hidden;
}

/* #64: Tablet filter pills overflow */
@media (max-width: 900px) {

	.lmsc-dash__filter-pills,
	.lmsc-dash__course-filters {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap !important;
	}
}

/* #66: Topnav - hide hamburger */
.lmsc-dash--topnav .lmsc-dash__mobile-toggle {
	display: none !important;
}

/* #67: Topnav - hide duplicate breadcrumb */
.lmsc-dash--topnav .lmsc-dash__breadcrumb {
	display: none;
}

/* #68: Topnav scroll arrows */
.lmsc-dash__topnav-wrapper {
	position: relative;
	margin-bottom: 24px;
}

.lmsc-dash__topnav-wrapper .lmsc-dash__topnav {
	margin-bottom: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lmsc-dash__topnav-wrapper .lmsc-dash__topnav::-webkit-scrollbar {
	display: none;
}

.lmsc-dash__topnav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text-muted, #64748b);
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	z-index: 3;
	padding: 0;
	opacity: 0.45;
}

.lmsc-dash__topnav-arrow:hover {
	opacity: 1;
	background: var(--lmsc-primary, #4361ee);
	color: var(--lmsc-on-primary, #fff);
	box-shadow: 0 2px 8px rgba(var(--lmsc-primary-rgb, 67,97,238), 0.35);
}

.lmsc-dash__topnav-arrow--left {
	left: 4px;
}

.lmsc-dash__topnav-arrow--right {
	right: 4px;
}

.lmsc-dash__topnav-arrow svg {
	width: 14px;
	height: 14px;
}

/* ===== Admin CRUD Modal ===== */
.lmsc-admin-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lmsc-admin-modal-overlay--visible {
	opacity: 1;
}

.lmsc-admin-modal {
	background: #fff;
	border-radius: 16px;
	width: 90%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: translateY(20px);
	transition: transform 0.3s ease;
}

.lmsc-admin-modal-overlay--visible .lmsc-admin-modal {
	transform: translateY(0);
}

.lmsc-admin-modal--wide {
	max-width: 640px;
}

.lmsc-admin-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}

.lmsc-admin-modal__header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #1a1a2e;
}

.lmsc-admin-modal__close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: #9ca3af;
	padding: 4px;
	line-height: 1;
}

.lmsc-admin-modal__close:hover {
	color: #1a1a2e;
}

.lmsc-admin-modal__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lmsc-admin-modal__body label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.lmsc-admin-modal__body .lmsc-dash__input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.lmsc-admin-modal__body .lmsc-dash__input:focus {
	border-color: var(--lmsc-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lmsc-admin-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 20px;
	border-top: 1px solid #e5e7eb;
}

/* Admin action button hover. */
.lmsc-admin-card-actions button:hover,
.lmsc-admin-task-edit:hover,
.lmsc-admin-task-del:hover {
	color: var(--lmsc-accent, #6366f1) !important;
	transform: scale(1.15);
	transition: all 0.15s ease;
}

.lmsc-admin-task-del:hover,
.lmsc-admin-del-ann:hover {
	color: #ef4444 !important;
}

/* SVG icon alignment in modal headers. */
.lmsc-admin-modal__header h3 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lmsc-admin-modal__header h3 svg {
	flex-shrink: 0;
}
/* ================================================================
   Learning Goals Widget
   ================================================================ */
.lmsc-dash__widget--goals {
	background: var(--lmsc-card-bg, #fff);
	border-radius: var(--lmsc-radius, 16px);
	padding: 20px;
	box-shadow: var(--lmsc-shadow);
}
.lmsc-dash__goals-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}
.lmsc-goal-item {
	background: var(--lmsc-bg-secondary, #f8fafc);
	border-radius: 10px;
	padding: 12px 14px;
}
.lmsc-goal-item__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.lmsc-goal-item__label {
	font-weight: 600;
	font-size: 13px;
	color: var(--lmsc-text, #1e293b);
	word-break: break-word;
	flex: 1;
	min-width: 0;
}
.lmsc-goal-item__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.lmsc-goal-item__stat {
	font-size: 12px;
	color: var(--lmsc-text-secondary, #64748b);
	font-weight: 500;
}
.lmsc-goal-item__delete {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: var(--lmsc-text-secondary, #94a3b8);
	opacity: 0.5;
	transition: opacity 0.2s, color 0.2s;
}
.lmsc-goal-item:hover .lmsc-goal-item__delete {
	opacity: 1;
}
.lmsc-goal-item__delete:hover {
	/* Use skin accent so the trash icon always matches the active skin */
	color: var(--lmsc-accent, var(--lmsc-primary, #6366f1)) !important;
	opacity: 1;
	filter: brightness(0.85) saturate(1.4);
}
.lmsc-goal-item__bar {
	height: 6px;
	background: var(--lmsc-border, #e2e8f0);
	border-radius: 3px;
	overflow: hidden;
}
.lmsc-goal-item__fill {
	height: 100%;
	border-radius: 3px;
	background: var(--lmsc-primary);
	transition: width 0.4s ease;
}
.lmsc-goal-item__pct {
	font-size: 11px;
	color: var(--lmsc-text-secondary, #64748b);
	margin-top: 4px;
	display: block;
	text-align: right;
}
.lmsc-dash__goals-empty {
	text-align: center;
	padding: 16px;
	color: var(--lmsc-text-secondary, #94a3b8);
	font-size: 13px;
}



/* ================================================================
   Responsive Overview widget grid
   ================================================================ */
.lmsc-dash__overview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}

/* The sidebar consumes part of the dashboard canvas, so viewport breakpoints
   alone can leave its main column too narrow for three readable cards. Let the
   grid choose its column count from the space it actually owns. */
.lmsc-dash--sidebar .lmsc-dash__overview-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Header controls should move as complete units instead of squeezing titles.
   This also corrects the generic widget-heading margin that otherwise wins
   over the section-header reset through specificity. */
.lmsc-dash__overview-grid .lmsc-dash__widget-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 8px;
	min-width: 0;
}

.lmsc-dash .lmsc-dash__overview-grid .lmsc-dash__widget-header h3 {
	flex: 1 0 auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.lmsc-dash__overview-grid .lmsc-dash__widget-header > :not(h2):not(h3) {
	flex: 0 0 auto;
	max-width: 100%;
	margin-inline-start: auto;
}

.lmsc-dash__overview-grid .lmsc-dash__widget-header-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	font-size: 12px;
	line-height: 1.4;
	border-radius: 8px;
	white-space: nowrap;
}

.lmsc-dash__overview-grid > .lmsc-dash__widget {
	min-height: 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
/* Ensure widget content fills available space */
.lmsc-dash__overview-grid .lmsc-dash__todo-list,
.lmsc-dash__overview-grid .lmsc-dash__deadline-list,
.lmsc-dash__overview-grid .lmsc-dash__goals-list {
	flex: 1;
	overflow-y: auto;
	max-height: clamp(180px, 30vh, 360px); /* responsive: avoids clipping on short screens */
	scrollbar-width: thin;
	scrollbar-color: var(--lmsc-border, #e2e8f0) transparent;
}
.lmsc-dash__overview-grid .lmsc-dash__todo-list::-webkit-scrollbar,
.lmsc-dash__overview-grid .lmsc-dash__deadline-list::-webkit-scrollbar,
.lmsc-dash__overview-grid .lmsc-dash__goals-list::-webkit-scrollbar {
	width: 4px;
}
.lmsc-dash__overview-grid .lmsc-dash__todo-list::-webkit-scrollbar-thumb,
.lmsc-dash__overview-grid .lmsc-dash__deadline-list::-webkit-scrollbar-thumb,
.lmsc-dash__overview-grid .lmsc-dash__goals-list::-webkit-scrollbar-thumb {
	background: var(--lmsc-border, #e2e8f0);
	border-radius: 2px;
}
/* Responsive: 2 cols on medium */
@media (max-width: 1024px) {
	.lmsc-dash__overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Responsive: 1 col on mobile */
@media (max-width: 640px) {
	.lmsc-dash__overview-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Reporting 2.0 - Students roster + per-learner drill-down
   ============================================================ */
.lmsc-roster-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 16px}
.lmsc-roster-search{position:relative;flex:1;min-width:220px}
.lmsc-roster-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--lmsc-text-muted);pointer-events:none}
.lmsc-roster-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius-sm);background:var(--lmsc-surface);color:var(--lmsc-text);font-size:14px}
.lmsc-roster-select{padding:9px 12px;border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius-sm);background:var(--lmsc-surface);color:var(--lmsc-text);font-size:13px;max-width:220px}
.lmsc-roster-table-wrap{overflow-x:auto;border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius)}
.lmsc-roster-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.lmsc-roster-table thead th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--lmsc-text-muted);padding:11px 14px;border-bottom:1px solid var(--lmsc-border);background:rgba(0,0,0,0.015)}
.lmsc-roster-table tbody td{padding:11px 14px;border-bottom:1px solid var(--lmsc-border);vertical-align:middle}
.lmsc-roster-table tbody tr:last-child td{border-bottom:0}
.lmsc-roster-table tbody tr{cursor:pointer;transition:background .15s}
.lmsc-roster-table tbody tr:hover{background:rgba(var(--lmsc-primary-rgb),0.05)}
.lmsc-roster-learner{display:flex;align-items:center;gap:10px}
.lmsc-roster-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.lmsc-roster-name{font-weight:600;color:var(--lmsc-text);line-height:1.2}
.lmsc-roster-email{font-size:12px;color:var(--lmsc-text-muted)}
.lmsc-roster-muted{color:var(--lmsc-text-muted)}
.lmsc-roster-prog{display:flex;align-items:center;gap:8px;min-width:120px}
.lmsc-roster-prog__bar{flex:1;height:7px;border-radius:99px;background:rgba(0,0,0,0.08);overflow:hidden}
.lmsc-roster-prog__bar span{display:block;height:100%;border-radius:99px;background:var(--lmsc-primary)}
.lmsc-roster-prog__pct{font-size:12px;font-weight:600;color:var(--lmsc-text);min-width:34px;text-align:right}
.lmsc-roster-view{background:none;border:0;color:var(--lmsc-primary);font-weight:600;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:var(--lmsc-radius-sm);white-space:nowrap}
/* Pin the text color on every interaction state. Without an explicit color a
   theme's generic button:hover/:focus{color:#fff} bleeds through and makes the
   "Back"/"Questions" labels white-on-light and unreadable. Scoped under
   .lmsc-dash so it outranks theme button rules. */
.lmsc-dash .lmsc-roster-view:hover,
.lmsc-dash .lmsc-roster-view:focus,
.lmsc-dash .lmsc-roster-view:focus-visible,
.lmsc-dash .lmsc-roster-view:active{background:rgba(var(--lmsc-primary-rgb),0.1);color:var(--lmsc-primary);box-shadow:none;outline:none;text-decoration:none}
.lmsc-roster-empty{text-align:center;color:var(--lmsc-text-muted);padding:28px 14px}
.lmsc-roster-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.lmsc-roster-page{padding:7px 14px;border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius-sm);background:var(--lmsc-surface);color:var(--lmsc-text);font-size:13px;cursor:pointer}
.lmsc-roster-page:disabled{opacity:.45;cursor:not-allowed}
.lmsc-roster-pageinfo{font-size:13px;color:var(--lmsc-text-muted)}

/* Drill-down */
.lmsc-learner-back-wrap{margin-bottom:14px}
.lmsc-learner-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lmsc-learner-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.lmsc-learner-head__name{font-size:20px;font-weight:700;color:var(--lmsc-text);line-height:1.2}
.lmsc-learner-head__meta{font-size:13px;color:var(--lmsc-text-muted);margin-top:2px}
.lmsc-learner-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:22px}
.lmsc-learner-kpi{background:var(--lmsc-surface);border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius);padding:14px 16px;text-align:center}
.lmsc-learner-kpi__val{font-size:24px;font-weight:700;color:var(--lmsc-text);line-height:1.1}
.lmsc-learner-kpi__label{font-size:12px;color:var(--lmsc-text-muted);margin-top:4px}
.lmsc-learner-section{margin-bottom:24px}
.lmsc-learner-section h3{font-size:15px;font-weight:700;color:var(--lmsc-text);margin:0 0 12px}
.lmsc-learner-section__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lmsc-learner-section__head h3{margin:0}
.lmsc-learner-courses{display:flex;flex-direction:column;gap:12px}
.lmsc-learner-course{display:grid;grid-template-columns:1fr 160px;gap:14px;align-items:center}
.lmsc-learner-course__title{font-size:14px;color:var(--lmsc-text);font-weight:500}
.lmsc-learner-export{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:0;border-radius:var(--lmsc-radius-sm);background:var(--lmsc-action-bg, #1D6BEE);color:var(--lmsc-action-fg, #fff);font-size:13px;font-weight:600;cursor:pointer}
.lmsc-learner-export:hover{filter:brightness(0.95)}
.lmsc-learner-quiz-table{min-width:520px}
.lmsc-pill-pass{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(16,185,129,0.14);color:#047857}
.lmsc-pill-fail{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(239,68,68,0.14);color:#b91c1c}
/* "needs 80%" hint under a Fail pill - explains why a non-zero score failed. */
.lmsc-lq-passmark{font-size:11px;color:var(--lmsc-text-muted);margin-top:3px;white-space:nowrap}
/* Muted placeholder when an attempt has no per-question detail to drill into. */
.lmsc-lq-none{color:var(--lmsc-text-muted);opacity:.55}
@media (max-width:640px){.lmsc-learner-course{grid-template-columns:1fr}}

/* Quiz Reports - per-question detail (Phase 2) */
.lmsc-lq-questions{display:flex;flex-direction:column;gap:8px;padding:10px 4px}
.lmsc-lq-q{border:1px solid var(--lmsc-border);border-left-width:3px;border-radius:var(--lmsc-radius-sm);padding:9px 12px;background:var(--lmsc-surface)}
.lmsc-lq-q.is-correct{border-left-color:var(--lmsc-success)}
.lmsc-lq-q.is-wrong{border-left-color:var(--lmsc-danger)}
.lmsc-lq-q.is-pending{border-left-color:var(--lmsc-warning, #b45309)}
.lmsc-lq-q__head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--lmsc-text)}
.lmsc-lq-q__icon{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.lmsc-lq-q.is-correct .lmsc-lq-q__icon{background:var(--lmsc-success)}
.lmsc-lq-q.is-wrong .lmsc-lq-q__icon{background:var(--lmsc-danger)}
.lmsc-lq-q.is-pending .lmsc-lq-q__icon{background:var(--lmsc-warning, #b45309)}
.lmsc-lq-q__title{flex:1}
.lmsc-lq-q__pts{flex:none;font-size:12px;font-weight:600;color:var(--lmsc-text-muted)}
.lmsc-lq-q__ans{font-size:12px;color:var(--lmsc-text);margin-top:6px;padding-left:26px}
.lmsc-lq-expand{font-size:12px !important}

/* Activity feed (Phase 2) */
.lmsc-activity-feed{display:flex;flex-direction:column;gap:2px}
.lmsc-activity-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--lmsc-border)}
.lmsc-activity-item:last-child{border-bottom:0}
.lmsc-activity-item__body{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lmsc-activity-item__text{font-size:14px;color:var(--lmsc-text)}
.lmsc-activity-item__text em{font-style:normal;color:var(--lmsc-primary)}
.lmsc-activity-item__time{font-size:12px;color:var(--lmsc-text-muted);white-space:nowrap}

/* People roster - status segments + row flags (Phase B) */
.lmsc-roster-segments{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.lmsc-seg{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--lmsc-border);border-radius:99px;background:var(--lmsc-surface);color:var(--lmsc-text);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.lmsc-seg:hover{border-color:var(--lmsc-primary);color:var(--lmsc-primary)}
.lmsc-seg--active{background:var(--lmsc-action-bg, #1D6BEE);border-color:var(--lmsc-primary);color:var(--lmsc-action-fg, #fff)}
.lmsc-seg--active:hover{color:#fff}
.lmsc-seg__n{display:inline-block;min-width:18px;text-align:center;padding:0 6px;border-radius:99px;background:rgba(0,0,0,0.08);font-size:11px;font-weight:700;color:inherit}
.lmsc-seg--active .lmsc-seg__n{background:rgba(255,255,255,0.25)}
.lmsc-seg--warn:not(.lmsc-seg--active){color:#b45309;border-color:rgba(245,158,11,0.5)}
.lmsc-flag{display:inline-block;margin-left:4px;font-size:11px;font-weight:700;vertical-align:middle}
.lmsc-flag--warn{color:#b45309}
.lmsc-flag--fail{color:#b91c1c}

/* People - pending-review banner (Phase B) */
.lmsc-people-pending{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(245,158,11,0.4);background:rgba(245,158,11,0.08);border-radius:var(--lmsc-radius-sm);color:#92400e;font-size:13px}
.lmsc-people-pending svg{color:#b45309;flex:none}

/* By-quiz question matrix (Phase C) - uses our theme palette */
.lmsc-mx-wrap{overflow-x:auto;border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius)}
.lmsc-mx-table{border-collapse:collapse;font-size:13px;width:max-content;min-width:100%}
.lmsc-mx-table th,.lmsc-mx-table td{border-bottom:1px solid var(--lmsc-border);padding:8px 10px;text-align:center;white-space:nowrap}
.lmsc-mx-table tbody tr:last-child td{border-bottom:0}
.lmsc-mx-table thead th{position:sticky;top:0;background:var(--lmsc-surface);font-weight:600;font-size:12px;color:var(--lmsc-text-muted);z-index:2}
.lmsc-mx-sticky{position:sticky;left:0;background:var(--lmsc-surface);text-align:left !important;min-width:150px;font-weight:600;box-shadow:1px 0 0 var(--lmsc-border)}
.lmsc-mx-table thead .lmsc-mx-sticky{z-index:3}
.lmsc-mx-q{cursor:help;min-width:34px}
.lmsc-mx-cell{font-weight:700}
.lmsc-mx-cell.is-correct{background:rgba(16,185,129,0.14);color:#047857}
.lmsc-mx-cell.is-wrong{background:rgba(239,68,68,0.14);color:#b91c1c}
.lmsc-mx-cell.is-blank{color:var(--lmsc-text-muted)}
.lmsc-qr-viewtoggle{margin:0}

/* People - admin site overview + enrolment sparkline (Phase D) */
.lmsc-site-overview{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;padding:14px 16px;margin:0 0 16px;border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius);background:var(--lmsc-surface)}
.lmsc-so-kpis{display:flex;gap:24px;flex-wrap:wrap}
.lmsc-so-kpi__val{font-size:20px;font-weight:700;color:var(--lmsc-text);line-height:1.1}
.lmsc-so-kpi__label{font-size:11px;color:var(--lmsc-text-muted);margin-top:2px}
.lmsc-so-spark__label{font-size:11px;color:var(--lmsc-text-muted);margin-bottom:4px;text-align:right}
.lmsc-so-spark__bars{display:flex;align-items:flex-end;gap:3px;height:34px}
.lmsc-so-bar{width:6px;background:var(--lmsc-primary);border-radius:2px 2px 0 0;opacity:.85}

/* By-quiz graphs (Phase E) */
.lmsc-qr-charts{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:0 0 18px}
.lmsc-qr-chartbox{border:1px solid var(--lmsc-border);border-radius:var(--lmsc-radius);padding:12px 14px;background:var(--lmsc-surface)}
.lmsc-qr-chartbox__title{font-size:13px;font-weight:600;color:var(--lmsc-text);margin-bottom:8px}
.lmsc-qr-chartbox canvas{max-height:160px}
@media (max-width:640px){.lmsc-qr-charts{grid-template-columns:1fr}}

/* People - email-a-segment action bar (Phase E) */
.lmsc-people-actions{display:flex;justify-content:flex-end;margin:-2px 0 14px}
.lmsc-modal__subtitle{font-size:13px;color:var(--lmsc-text-muted);margin:4px 0 0;line-height:1.5}

/* People - email-a-segment modal (Phase E) */
/* Defensive: some third-party inline CSS on a host site defines a conflicting
   `.lmsc-modal` *card* (background+max-width:520px) that leaks onto our full-screen
   overlay (also `.lmsc-modal`), pinning it to a 520px box on the left. Our overlays
   are direct children of <body>; the foreign card is nested in `.lmsc-modal-backdrop`,
   so this body-child reset fixes ours without affecting theirs. */
body>.lmsc-modal{width:auto;max-width:none;background:transparent;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.lmsc-modal--email.lmsc-modal--open{display:flex;align-items:center;justify-content:center}
.lmsc-modal--email .lmsc-modal__content{position:relative;width:90%;max-width:520px;padding:24px;color:var(--lmsc-text,#e6e9f2)}
.lmsc-modal--email .lmsc-modal__title{color:var(--lmsc-text,#e6e9f2);font-size:18px;font-weight:700;margin:0 0 6px}
.lmsc-modal--email .lmsc-modal__subtitle{font-size:13px;color:var(--lmsc-text-muted,#9aa3b2);margin:0 0 4px;line-height:1.5}
.lmsc-modal--email .lmsc-form-group{margin:14px 0}
.lmsc-modal--email .lmsc-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--lmsc-text,#e6e9f2)}
.lmsc-modal--email .lmsc-input,
.lmsc-modal--email .lmsc-textarea{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--lmsc-border,rgba(255,255,255,.18));border-radius:8px;font-size:14px;background:#fff;color:#0f172a}
.lmsc-modal--email .lmsc-textarea{resize:vertical;min-height:120px}
.lmsc-modal--email .lmsc-field-hint{margin:6px 0 0;font-size:12px;color:var(--lmsc-text-muted,#9aa3b2)}
.lmsc-modal--email .lmsc-modal__close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:22px;line-height:1;color:var(--lmsc-text-muted,#9aa3b2);cursor:pointer;width:auto;padding:4px}
.lmsc-modal--email .lmsc-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.lmsc-so-kpi__src{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--lmsc-primary-soft,rgba(79,70,229,.12));color:var(--lmsc-primary);font-size:10px;font-weight:600;vertical-align:1px}

/* ============================================================
   GLOBAL CONTRAST GUARD - active/selected controls on hover
   ------------------------------------------------------------
   Several scoped `:hover` rules swap only the BACKGROUND to a
   light tint. On an ACTIVE/SELECTED control whose text is white,
   that left white-on-light = invisible (reported on the
   My Progress/People, My attempts/By quiz, List/Grid toggles).
   Skins only change --lmsc-primary (active = white-on-primary in
   every skin), so re-assert the active fill on hover & focus
   everywhere. !important defeats the more-specific scoped rules. */
.lmsc-pill.lmsc-pill--active:hover,
.lmsc-pill.lmsc-pill--active:focus,
.lmsc-pill.lmsc-pill--active:focus-visible,
button.lmsc-pill.lmsc-pill--active:hover,
button.lmsc-pill.lmsc-pill--active:focus {
	background: var(--lmsc-action-bg, #1D6BEE) !important;
	border-color: var(--lmsc-primary, #fb4365) !important;
	color: var(--lmsc-action-fg, #fff) !important;
}
.lmsc-pill.lmsc-pill--active:hover .lmsc-pill__count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* Layout-switcher icons: some skins collapse the sidebar tokens to white,
   leaving the inactive icon white-on-white (invisible). Pin a visible muted
   fill for inactive and white for the active (primary-filled) button. */
.lmsc-dash__layout-btn svg {
	fill: var(--lmsc-text-muted, #64748b);
}
.lmsc-dash__layout-btn--active svg {
	fill: #fff;
}

/* ============================================================
   Instructor course editor - Concept A refined workspace
   ============================================================ */
.lmsc-instructor__editor--refined {
	container: lmsc-instructor-editor / inline-size;
	--lmsc-editor-section-gap: 24px;
	--lmsc-editor-field-gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-top {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 16px;
	margin-bottom: var(--lmsc-editor-section-gap);
	background: color-mix(in srgb, var(--lmsc-surface, #fff) 94%, transparent);
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
	backdrop-filter: blur(14px);
}

body.admin-bar .lmsc-instructor__editor--refined .lmsc-instructor__editor-top {
	top: 32px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-command-main,
.lmsc-instructor__editor--refined .lmsc-instructor__editor-heading,
.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions {
	display: flex;
	align-items: center;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-command-main {
	flex: 1 1 auto;
	min-width: 0;
	gap: 12px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-heading {
	gap: 10px;
	min-width: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-divider {
	width: 1px;
	height: 28px;
	background: var(--lmsc-border, rgba(0, 0, 0, .1));
	flex: 0 0 auto;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lmsc-text, #1e293b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: rgba(245, 158, 11, .12);
	color: var(--lmsc-text, #1e293b);
	flex: 0 0 auto;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-badge.is-published {
	background: rgba(16, 185, 129, .13);
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__back {
	min-height: 44px;
	padding: 0 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-primary, #057fbd);
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions {
	justify-content: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}

.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions .lmsc-dash-btn {
	min-height: 44px;
	padding-inline: 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
}

.lmsc-instructor__editor--refined .lmsc-instructor__save-status {
	font-size: 12px;
	font-weight: 400;
	color: var(--lmsc-text-muted, #64748b);
	white-space: nowrap;
}

.lmsc-instructor__editor--refined .lmsc-instructor__save-status[data-state="dirty"] {
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__save-status[data-state="saved"] {
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined.is-loading-course .lmsc-instructor__form,
.lmsc-instructor__editor--refined.is-loading-course .lmsc-instructor__team-panel,
.lmsc-instructor__editor--refined.is-loading-course .lmsc-instructor__content-workspace {
	opacity: .68;
	pointer-events: none;
}

.lmsc-instructor__editor--refined #lmsc-instructor-save-course.is-loading::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: lmsc-spin .7s linear infinite;
}

.lmsc-instructor__editor--refined #lmsc-instructor-save-course.is-loading > svg {
	display: none;
}

.lmsc-instructor__editor--refined .is-complete:not(.is-current) .lmsc-instructor__setup-index {
	background: rgba(16, 185, 129, .13);
	color: var(--lmsc-success, #087a5b);
}

.lmsc-instructor__editor--refined #lmsc-inst-course-basics,
.lmsc-instructor__editor--refined #lmsc-inst-course-settings,
.lmsc-instructor__editor--refined #lmsc-inst-course-team,
.lmsc-instructor__editor--refined #lmsc-inst-course-content {
	scroll-margin-top: 96px;
}

.lmsc-instructor__editor--refined .is-setup-target {
	animation: lmsc-instructor-target-pulse .85s ease-out;
}

@keyframes lmsc-instructor-target-pulse {
	0% { box-shadow: 0 0 0 3px rgba(var(--lmsc-primary-rgb, 5, 127, 189), .24); }
	100% { box-shadow: 0 0 0 0 rgba(var(--lmsc-primary-rgb, 5, 127, 189), 0); }
}

.lmsc-instructor__editor--refined .lmsc-instructor__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
	gap: 18px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.lmsc-instructor__editor--refined .lmsc-card {
	padding: 20px;
	background: var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.lmsc-instructor__editor--refined .lmsc-card:hover {
	transform: none;
}

.lmsc-instructor__editor--refined .lmsc-instructor__form-side {
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	scrollbar-gutter: stable;
	box-shadow: none;
}

body.admin-bar .lmsc-instructor__editor--refined .lmsc-instructor__form-side {
	top: 120px;
	max-height: calc(100vh - 140px);
}

/* Respond to the actual workspace width, including the dashboard sidebar,
   rather than waiting for the browser viewport to become phone-sized. */
@container lmsc-instructor-editor (max-width: 800px) {
	.lmsc-instructor__editor--refined .lmsc-instructor__form--grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.lmsc-instructor__editor--refined .lmsc-instructor__form-side,
	body.admin-bar .lmsc-instructor__editor--refined .lmsc-instructor__form-side {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@container lmsc-instructor-editor (max-width: 560px) {
	.lmsc-instructor__editor--refined .lmsc-instructor__basics-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.lmsc-instructor__editor--refined .lmsc-instructor__editor-top {
		position: static;
		flex-direction: column;
		align-items: stretch;
	}
	.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions {
		flex-wrap: wrap;
	}
}

.lmsc-instructor__editor--refined .lmsc-instructor__section {
	margin-top: var(--lmsc-editor-section-gap);
}

.lmsc-instructor__editor--refined .lmsc-instructor__section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__section-heading > div {
	display: grid;
	gap: 3px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__section-heading h3 {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__section-heading p,
.lmsc-instructor__editor--refined .lmsc-instructor__curriculum-header p {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__basics-grid {
	display: grid;
	grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
	align-items: start;
	gap: 18px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__basics-fields {
	display: grid;
	gap: var(--lmsc-editor-field-gap);
	min-width: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__field {
	min-width: 0;
	margin-bottom: 16px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__field:last-child,
.lmsc-instructor__editor--refined .lmsc-instructor__basics-grid .lmsc-instructor__field {
	margin-bottom: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__field > label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-dash-input,
.lmsc-instructor__editor--refined .lmsc-dash-select,
.lmsc-instructor__editor--refined .lmsc-dash-textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .12));
	border-radius: 10px;
	background: var(--lmsc-surface-alt, var(--lmsc-surface, #fff));
	color: var(--lmsc-text, #1e293b);
	font-size: 14px;
	font-weight: 400;
}

.lmsc-instructor__editor--refined .lmsc-dash-input:focus,
.lmsc-instructor__editor--refined .lmsc-dash-select:focus,
.lmsc-instructor__editor--refined .lmsc-dash-textarea:focus,
.lmsc-instructor__editor--refined button:focus-visible {
	outline: 3px solid rgba(var(--lmsc-primary-rgb, 5, 127, 189), .22);
	outline-offset: 2px;
	border-color: var(--lmsc-primary, #057fbd);
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-preview {
	position: relative;
	width: 100%;
	max-width: none;
	min-height: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px dashed color-mix(in srgb, var(--lmsc-primary, #057fbd) 58%, var(--lmsc-border));
	border-radius: 13px;
	background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .08);
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-select {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 18px;
	border: 0;
	background: transparent;
	color: var(--lmsc-primary, #057fbd);
	cursor: pointer;
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-placeholder {
	display: grid;
	justify-items: center;
	gap: 7px;
	padding: 0;
	font-size: 13px;
	color: var(--lmsc-primary, #057fbd);
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-placeholder small {
	font-size: 11px;
	font-weight: 400;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lmsc-surface, #fff);
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-preview img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.lmsc-instructor__editor--refined .lmsc-instructor__thumb-remove {
	top: 8px;
	right: auto;
	inset-inline-end: 8px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__description-field {
	margin-top: 20px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__char-count {
	margin-top: 4px;
	font-size: 11px;
	text-align: end;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__side-heading {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
}

.lmsc-instructor__editor--refined .lmsc-instructor__settings-group {
	display: grid;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
}

.lmsc-instructor__editor--refined .lmsc-instructor__form-side .lmsc-instructor__field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__form-side .lmsc-instructor__field {
	margin-bottom: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-item {
	position: relative;
	/* Outrank the generic field-label block layout: each choice is one row. */
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 44px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .12));
	border-radius: 9px;
	background: var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	color: var(--lmsc-text, #1e293b);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-item:hover {
	border-color: color-mix(in srgb, var(--lmsc-primary, #057fbd) 45%, var(--lmsc-border));
	background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .04);
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-item.is-selected {
	border-color: var(--lmsc-primary, #057fbd);
	background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .09);
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-item:focus-within {
	outline: 2px solid var(--lmsc-action-link, #1D6BEE);
	outline-offset: 2px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-check {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border: 1.5px solid color-mix(in srgb, var(--lmsc-text-muted, #64748b) 70%, transparent);
	border-radius: 4px;
	background: var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	color: var(--lmsc-action-fg, #fff);
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-input:checked + .lmsc-instructor__cat-check {
	border-color: var(--lmsc-action-bg, #1D6BEE);
	background: var(--lmsc-action-bg, #1D6BEE);
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-input:checked + .lmsc-instructor__cat-check::before {
	content: '\2713';
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.lmsc-instructor__editor--refined .lmsc-instructor__cat-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.lmsc-instructor__editor--refined .lmsc-instructor__readiness {
	display: grid;
	gap: 10px;
	padding: 14px;
	border-radius: 12px;
	background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .09);
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__readiness.is-complete {
	background: rgba(16, 185, 129, .11);
}

.lmsc-instructor__editor--refined .lmsc-instructor__readiness-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 500;
}

.lmsc-instructor__editor--refined .lmsc-instructor__readiness-meter {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--lmsc-border, rgba(0, 0, 0, .1));
}

.lmsc-instructor__editor--refined .lmsc-instructor__readiness-meter span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--lmsc-primary, #057fbd);
	transition: width .2s ease;
}

.lmsc-instructor__editor--refined .lmsc-instructor__readiness small {
	font-size: 11px;
	line-height: 1.45;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__team-note {
	display: flex;
	align-items: center;
	gap: 7px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__team-note:not(.is-auto-save) > svg {
	display: none;
}

.lmsc-instructor__editor--refined .lmsc-instructor__co-add {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	margin-top: 14px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__co-results {
	grid-column: 1 / -1;
	display: grid;
	gap: 4px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__co-item,
.lmsc-instructor__editor--refined .lmsc-inst-co-result {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: 9px;
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #1e293b);
	text-align: start;
}

.lmsc-instructor__editor--refined .lmsc-instructor__co-item img,
.lmsc-instructor__editor--refined .lmsc-inst-co-result img {
	border-radius: 50%;
}

.lmsc-instructor__editor--refined .lmsc-instructor__co-item .lmsc-inst-co-remove,
.lmsc-instructor__editor--refined .lmsc-inst-co-result small {
	margin-inline-start: auto;
}

.lmsc-instructor__editor--refined .lmsc-inst-co-result {
	cursor: pointer;
}

.lmsc-instructor__editor--refined .lmsc-inst-co-result:hover {
	border-color: var(--lmsc-primary, #057fbd);
	background: rgba(var(--lmsc-primary-rgb, 5, 127, 189), .06);
}

.lmsc-instructor__editor--refined .lmsc-inst-co-result small,
.lmsc-instructor__editor--refined .lmsc-instructor__co-empty {
	font-size: 11px;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__content-workspace {
	padding-top: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__subnav {
	display: flex;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lmsc-border, rgba(0, 0, 0, .08));
	border-radius: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__subnav-tab {
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: var(--lmsc-text-muted, #64748b);
	cursor: pointer;
}

.lmsc-instructor__editor--refined .lmsc-instructor__subnav-tab:not(.is-active):hover {
	background: transparent;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__subnav-tab.is-active,
.lmsc-instructor__editor--refined .lmsc-instructor__subnav-tab.is-active:hover,
.lmsc-instructor__editor--refined .lmsc-instructor__subnav-tab.is-active:focus {
	border-color: var(--lmsc-primary, #057fbd);
	background: transparent;
	color: var(--lmsc-primary, #057fbd);
}

.lmsc-instructor__editor--refined .lmsc-instructor__subpanel {
	display: none !important;
	padding-top: 18px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__subpanel.is-active {
	display: block !important;
}

.lmsc-instructor__editor--refined .lmsc-instructor__curriculum,
.lmsc-instructor__editor--refined .lmsc-instructor__quizzes,
.lmsc-instructor__editor--refined .lmsc-instructor__students {
	margin-top: 0;
	padding: 18px 0 0;
	background: transparent;
	border: 0;
}

.lmsc-instructor__editor--refined .lmsc-instructor__curriculum-header {
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}

.lmsc-instructor__editor--refined .lmsc-instructor__curriculum-header h4 {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__empty-state,
.lmsc-instructor__editor--refined .lmsc-instructor__curriculum-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	min-height: 140px;
	margin: 0;
	padding: 20px;
	border-radius: 12px;
	background: var(--lmsc-surface-alt, rgba(15, 23, 42, .04));
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__empty-state strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-instructor__editor--refined .lmsc-instructor__shortcuts-bar {
	margin-top: 14px;
	padding: 14px 0 0;
}

.lmsc-instructor__editor--refined button:disabled,
.lmsc-instructor__editor--refined input:disabled {
	cursor: not-allowed;
	opacity: .55;
}

@media (max-width: 860px) {
	.lmsc-instructor__editor--refined .lmsc-instructor__form--grid {
		grid-template-columns: 1fr;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__form-side {
		position: static;
		max-height: none;
		overflow: visible;
	}

}

@media (max-width: 782px) {
	body.admin-bar .lmsc-instructor__editor--refined .lmsc-instructor__editor-top {
		top: 46px;
	}
}

@media (max-width: 640px) {
	.lmsc-instructor__editor--refined {
		--lmsc-editor-section-gap: 16px;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__editor-top {
		position: static;
		align-items: stretch;
		flex-direction: column;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__editor-divider,
	.lmsc-instructor__editor--refined .lmsc-instructor__save-status {
		display: none;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions .lmsc-dash-btn {
		width: 100%;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__basics-grid {
		grid-template-columns: 1fr;
	}

	.lmsc-instructor__editor--refined .lmsc-card {
		padding: 16px;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__co-add {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__subnav {
		scrollbar-width: none;
	}
}

@media (max-width: 390px) {
	.lmsc-instructor__editor--refined .lmsc-instructor__back {
		justify-content: center;
		width: 44px;
		padding: 0;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__back-label {
		display: none;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__editor-actions,
	.lmsc-instructor__editor--refined .lmsc-instructor__co-add {
		grid-template-columns: 1fr;
	}

	.lmsc-instructor__editor--refined .lmsc-instructor__co-results {
		grid-column: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lmsc-instructor__editor--refined *,
	.lmsc-instructor__editor--refined *::before,
	.lmsc-instructor__editor--refined *::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation-duration: .01ms !important;
	}
}

/* Group Leader — membership management (G1, native enrolment) */
.lmsc-gl-mgmt .lmsc-dash-btn{white-space:nowrap}
.lmsc-gl-row-actions{white-space:nowrap;text-align:right}
.lmsc-gl-row-act{background:none;border:0;padding:6px;border-radius:6px;cursor:pointer;color:var(--lmsc-text-muted,#64748b);transition:background .15s,color .15s;vertical-align:middle}
.lmsc-gl-row-act:hover{background:rgba(127,127,127,.14);color:var(--lmsc-text)}
.lmsc-gl-remove:hover{color:#dc2626;background:rgba(239,68,68,.14)}
.lmsc-gl-user-results{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:230px;overflow:auto}
.lmsc-gl-user-result{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid var(--lmsc-border,rgba(0,0,0,.08));border-radius:10px;padding:8px 10px;cursor:pointer;transition:border-color .15s,background .15s;color:var(--lmsc-text,#1e293b)}
.lmsc-gl-user-result:hover{border-color:var(--lmsc-primary);background:rgba(var(--lmsc-primary-rgb,99,102,241),.06)}
/* Pin result text colours so the name never inherits a white button-hover colour. */
.lmsc-gl-user-result,.lmsc-gl-user-result:hover,.lmsc-gl-user-result:focus{color:var(--lmsc-text,#1e293b) !important}
.lmsc-gl-user-result img{border-radius:50%;flex-shrink:0}
.lmsc-gl-user-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.lmsc-gl-user-meta strong{font-size:13px;line-height:1.2;color:var(--lmsc-text,#1e293b)}
.lmsc-gl-user-result:hover .lmsc-gl-user-meta strong,
.lmsc-gl-user-result:focus .lmsc-gl-user-meta strong{color:var(--lmsc-text,#1e293b) !important}
.lmsc-gl-user-meta small{font-size:11px;color:var(--lmsc-text-muted,#64748b)}
.lmsc-gl-user-add{font-size:12px;font-weight:600;color:var(--lmsc-primary);white-space:nowrap}
.lmsc-gl-user-result:hover .lmsc-gl-user-add,
.lmsc-gl-user-result:focus .lmsc-gl-user-add{color:var(--lmsc-primary) !important}
.lmsc-gl-user-empty,.lmsc-gl-invite-note{font-size:12px;color:var(--lmsc-text-muted,#64748b)}
.lmsc-gl-invite-note{display:block;margin-top:6px}
.lmsc-gl-or-divider{display:flex;align-items:center;text-align:center;color:var(--lmsc-text-muted,#94a3b8);font-size:12px;margin:6px 0}
.lmsc-gl-or-divider::before,.lmsc-gl-or-divider::after{content:'';flex:1;height:1px;background:var(--lmsc-border,rgba(0,0,0,.1))}
.lmsc-gl-or-divider span{padding:0 12px}
.lmsc-gl-import-result{margin-top:10px}
.lmsc-gl-import-summary{font-size:13px;background:rgba(var(--lmsc-primary-rgb,99,102,241),.08);border-radius:8px;padding:10px 12px;color:var(--lmsc-text)}

/* Skin-adopting (light) management modals — Group Leader add / import / email.
   Uses the active skin's surface/text/primary variables instead of a fixed
   dark theme, so it matches whichever of the 7 skins is active. */
.lmsc-modal--mgmt.lmsc-modal--open{display:flex;align-items:center;justify-content:center}
.lmsc-modal--mgmt .lmsc-modal__content{
	position:relative;width:90%;max-width:520px;padding:24px;
	background:var(--lmsc-surface, var(--lmsc-card-bg, #fff));
	color:var(--lmsc-text,#1e293b);
	border:1px solid var(--lmsc-border,rgba(0,0,0,.08));
	border-radius:16px;
	box-shadow:0 24px 60px rgba(0,0,0,.22);
	max-height:90vh;overflow:auto;
}
.lmsc-modal--mgmt .lmsc-modal__title{color:var(--lmsc-text,#1e293b);font-size:18px;font-weight:700;margin:0 0 6px}
.lmsc-modal--mgmt .lmsc-modal__subtitle{font-size:13px;color:var(--lmsc-text-muted,#64748b);margin:0 0 4px;line-height:1.5}
.lmsc-modal--mgmt .lmsc-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--lmsc-text,#1e293b)}
.lmsc-modal--mgmt .lmsc-input,
.lmsc-modal--mgmt .lmsc-textarea{
	width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
	border:1px solid var(--lmsc-border,rgba(0,0,0,.14));
	background:var(--lmsc-card-bg,#fff);color:var(--lmsc-text,#1e293b);font-size:14px;
}
.lmsc-modal--mgmt .lmsc-input::placeholder,
.lmsc-modal--mgmt .lmsc-textarea::placeholder{color:var(--lmsc-text-muted,#94a3b8)}
.lmsc-modal--mgmt .lmsc-input:focus,
.lmsc-modal--mgmt .lmsc-textarea:focus{outline:none;border-color:var(--lmsc-primary, #4f46e5);box-shadow:0 0 0 3px rgba(var(--lmsc-primary-rgb,99,102,241),.15)}
.lmsc-modal--mgmt .lmsc-modal__close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:24px;line-height:1;color:var(--lmsc-text-muted,#64748b);cursor:pointer;transition:color .15s}
.lmsc-modal--mgmt .lmsc-modal__close:hover{color:var(--lmsc-text)}
.lmsc-modal--mgmt .lmsc-btn{padding:9px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s,color .15s}
.lmsc-modal--mgmt .lmsc-btn--primary{background:var(--lmsc-action-bg, #1D6BEE);color:var(--lmsc-action-fg, #fff)}
.lmsc-modal--mgmt .lmsc-btn--primary:hover{background:color-mix(in srgb,var(--lmsc-action-bg,#1D6BEE) 85%,#000);filter:none}
.lmsc-modal--mgmt .lmsc-btn--ghost{background:transparent;color:var(--lmsc-text-muted,#64748b);border-color:var(--lmsc-border,rgba(0,0,0,.14))}
.lmsc-modal--mgmt .lmsc-btn--ghost:hover{background:rgba(127,127,127,.1);color:var(--lmsc-text)}
/* Group editor: fixed title + footer, scrollable body — so the action row
   (Cancel / Create) is ALWAYS visible even with the course/leader lists open. */
.lmsc-modal--group-editor .lmsc-modal__content{display:flex;flex-direction:column;max-height:88vh;overflow:hidden}
.lmsc-modal--group-editor .lmsc-modal__title{flex:0 0 auto}
.lmsc-modal--group-editor .lmsc-modal__body{flex:1 1 auto;min-height:0;overflow:auto;margin-top:4px}
.lmsc-modal--group-editor .lmsc-modal__actions{flex:0 0 auto;margin-top:16px;padding-top:14px;border-top:1px solid var(--lmsc-border,rgba(0,0,0,.08))}

/* Group create/edit — manage actions + chips (G2) */
.lmsc-gl-header{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.lmsc-gl-manage-actions{display:flex;gap:8px;margin-left:auto}
.lmsc-ge-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lmsc-ge-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(var(--lmsc-primary-rgb,99,102,241),.10);color:var(--lmsc-text,#1e293b);border-radius:999px;padding:4px 6px 4px 12px;font-size:12px;font-weight:600}
.lmsc-ge-chip button{background:none;border:0;cursor:pointer;color:var(--lmsc-text-muted,#64748b);font-size:16px;line-height:1;padding:0 2px}
.lmsc-ge-chip button:hover{color:#dc2626}

/* Group editor — live member management section (G2 full management) */
.lmsc-ge-count{font-size:12px;color:var(--lmsc-text-muted,#64748b);font-weight:600}
.lmsc-ge-member-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto;margin-bottom:8px}
.lmsc-ge-member-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:rgba(127,127,127,.06)}
.lmsc-ge-member-row img{border-radius:50%;flex-shrink:0}
.lmsc-ge-member-rm{background:none;border:0;cursor:pointer;color:var(--lmsc-text-muted,#64748b);font-size:18px;line-height:1;padding:0 4px;margin-left:auto}
.lmsc-ge-member-rm:hover{color:#dc2626}

/* Group Leader — all-groups card overview + delete (G2.2) */
.lmsc-gl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:4px 0 18px}
.lmsc-gl-card{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px;border:1px solid var(--lmsc-border,rgba(0,0,0,.08));border-radius:14px;background:var(--lmsc-card-bg,#fff);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;position:relative}
.lmsc-gl-card:hover{border-color:rgba(var(--lmsc-primary-rgb,99,102,241),.5);box-shadow:0 6px 18px rgba(0,0,0,.06);transform:translateY(-1px)}
.lmsc-gl-card.is-active{border-color:var(--lmsc-primary);box-shadow:0 0 0 1px var(--lmsc-primary)}
.lmsc-gl-card__icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(var(--lmsc-primary-rgb,99,102,241),.12);color:var(--lmsc-primary)}
.lmsc-gl-card__body{display:flex;flex-direction:column;min-width:0;flex:1}
.lmsc-gl-card__title{font-size:14px;font-weight:700;color:var(--lmsc-text,#1e293b);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lmsc-gl-card__meta{font-size:12px;color:var(--lmsc-text-muted,#64748b);margin-top:2px}
.lmsc-gl-card__edit{flex-shrink:0;color:var(--lmsc-text-muted,#94a3b8);padding:4px;border-radius:6px;display:inline-flex}
.lmsc-gl-card__edit:hover{color:var(--lmsc-primary);background:rgba(var(--lmsc-primary-rgb,99,102,241),.1)}
.lmsc-modal--mgmt .lmsc-btn--danger{background:transparent;color:#dc2626;border-color:rgba(239,68,68,.4)}
.lmsc-modal--mgmt .lmsc-btn--danger:hover{background:rgba(239,68,68,.1)}

/* Group cards: stay readable on hover/active — never a solid blue fill with dark
   text (override any global button-hover colour). */
.lmsc-gl-card,.lmsc-gl-card:hover,.lmsc-gl-card:focus{color:var(--lmsc-text,#1e293b) !important}
.lmsc-gl-card:hover{background:rgba(var(--lmsc-primary-rgb,99,102,241),.07) !important;border-color:var(--lmsc-primary)}
.lmsc-gl-card.is-active{background:rgba(var(--lmsc-primary-rgb,99,102,241),.10) !important;border-color:var(--lmsc-primary)}
.lmsc-gl-card .lmsc-gl-card__title{color:var(--lmsc-text,#1e293b) !important}
.lmsc-gl-card .lmsc-gl-card__meta{color:var(--lmsc-text-muted,#64748b) !important}

/* Defend toast colours against a third-party inline `.lmsc-toast{background:#fff}`
   collision that rendered success/info toasts white-on-white (unreadable). */
.lmsc-toast{background:#1e293b !important;color:#fff !important}
.lmsc-toast--success{background:linear-gradient(135deg,#059669,#10b981) !important}
.lmsc-toast--error{background:linear-gradient(135deg,#dc2626,#ef4444) !important}
.lmsc-toast--info{background:linear-gradient(135deg,#2563eb,#3b82f6) !important}
.lmsc-toast--warning{background:linear-gradient(135deg,#d97706,#f59e0b) !important}
.lmsc-toast__message,.lmsc-toast__icon,.lmsc-toast__close{color:#fff !important}

/* Group Leader: total-groups count above the cards */
.lmsc-gl-cards__head{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--lmsc-text-muted,#64748b);text-transform:uppercase;letter-spacing:.04em;margin:2px 0 2px}
.lmsc-gl-cards__count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--lmsc-primary);color:var(--lmsc-on-primary, #fff);font-size:12px;font-weight:700}

/* Group Leader: sub-group hierarchy hints */
.lmsc-gl-card__parent{display:block;font-size:11px;color:var(--lmsc-primary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lmsc-gl-card .lmsc-gl-card__parent{color:var(--lmsc-primary) !important}
.lmsc-gl-children-btn{display:inline-flex;align-items:center;gap:5px}

/* Group editor: join-code / enrollment-key section */
.lmsc-ge-join-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--lmsc-text,#1e293b);cursor:pointer}
.lmsc-ge-join-toggle input{width:16px;height:16px}
.lmsc-ge-join-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lmsc-ge-join-codefield{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;flex:1 1 140px;min-width:120px}
.lmsc-modal--mgmt .lmsc-ge-join-seatlabel{margin:0;white-space:nowrap}
.lmsc-ge-join #lmsc-ge-join-seats{max-width:130px}
.lmsc-ge-join-usage{font-size:12px;color:var(--lmsc-text-muted,#64748b)}
.lmsc-ge-join-usage.is-full{color:#dc2626;font-weight:700}

/* ============================================================
   Group editor as an in-flow SUB-SCREEN (not a modal).
   The form styling used to come from .lmsc-modal--mgmt; converting
   the wrapper to .lmsc-gl-editor-screen dropped all of it (labels went
   inline, inputs shrank to default width). Re-home that styling here and
   present it as a clean, centered settings card.
   ============================================================ */
.lmsc-gl-editor-screen{width:100%}
.lmsc-gl-editor-inner{
	background:var(--lmsc-card-bg,#fff);
	border:1px solid var(--lmsc-border,rgba(0,0,0,.08));
	border-radius:16px;
	padding:24px 26px;
	box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.lmsc-gl-editor-title{font-size:20px;font-weight:700;color:var(--lmsc-text,#1e293b);margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--lmsc-border,rgba(0,0,0,.08))}

/* Two-column form grid — fills the dashboard width without over-wide inputs.
   align-items:start keeps unequal-height fields top-aligned (no stretching). */
.lmsc-gl-editor-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;align-items:start}
.lmsc-gl-editor-screen .lmsc-form-group{margin:0;min-width:0}
/* Members list + the join sub-panel span the full width */
.lmsc-ge-full,.lmsc-gl-editor-screen .lmsc-ge-join{grid-column:1 / -1}
@media (max-width:820px){.lmsc-gl-editor-body{grid-template-columns:1fr}}
.lmsc-gl-editor-screen .lmsc-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--lmsc-text,#1e293b)}
.lmsc-gl-editor-screen .lmsc-input,
.lmsc-gl-editor-screen .lmsc-textarea,
.lmsc-gl-editor-screen select.lmsc-input{
	width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
	border:1px solid var(--lmsc-border,rgba(0,0,0,.14));
	background:var(--lmsc-card-bg,#fff);color:var(--lmsc-text,#1e293b);
	font-size:14px;font-family:inherit;line-height:1.4;
}
.lmsc-gl-editor-screen .lmsc-input::placeholder,
.lmsc-gl-editor-screen .lmsc-textarea::placeholder{color:var(--lmsc-text-muted,#94a3b8)}
.lmsc-gl-editor-screen .lmsc-input:focus,
.lmsc-gl-editor-screen .lmsc-textarea:focus,
.lmsc-gl-editor-screen select.lmsc-input:focus{outline:none;border-color:var(--lmsc-primary,#4f46e5);box-shadow:0 0 0 3px rgba(var(--lmsc-primary-rgb,99,102,241),.15)}
.lmsc-gl-editor-screen .lmsc-gl-invite-note{display:block;margin-top:6px;font-size:12px;color:var(--lmsc-text-muted,#64748b);line-height:1.5}

/* Buttons (re-homed from .lmsc-modal--mgmt) */
.lmsc-gl-editor-screen .lmsc-btn{padding:9px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s,color .15s,filter .15s}
.lmsc-gl-editor-screen .lmsc-btn--primary{background:var(--lmsc-action-bg, #1D6BEE);color:var(--lmsc-action-fg, #fff)}
.lmsc-gl-editor-screen .lmsc-btn--primary:hover{background:color-mix(in srgb,var(--lmsc-action-bg,#1D6BEE) 85%,#000);filter:none}
.lmsc-gl-editor-screen .lmsc-btn--ghost{background:transparent;color:var(--lmsc-text-muted,#64748b);border-color:var(--lmsc-border,rgba(0,0,0,.14))}
.lmsc-gl-editor-screen .lmsc-btn--ghost:hover{background:rgba(127,127,127,.1);color:var(--lmsc-text)}
.lmsc-gl-editor-screen .lmsc-btn--danger{background:transparent;color:#dc2626;border-color:rgba(239,68,68,.4)}
.lmsc-gl-editor-screen .lmsc-btn--danger:hover{background:rgba(239,68,68,.1)}

/* Sticky-feeling footer action row */
.lmsc-gl-editor-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:22px;padding-top:16px;border-top:1px solid var(--lmsc-border,rgba(0,0,0,.08))}
.lmsc-gl-editor-actions .lmsc-ge-delete{margin-right:auto}

/* Join-code sub-section: keep its inline label/field rows tidy */
.lmsc-gl-editor-screen .lmsc-ge-join-toggle{margin-top:2px}
.lmsc-gl-editor-screen .lmsc-ge-join-seatlabel{margin:0;white-space:nowrap;flex:0 0 auto;min-width:118px;font-weight:500}
.lmsc-gl-editor-screen .lmsc-ge-join #lmsc-ge-join-seats{max-width:130px}
.lmsc-gl-editor-screen .lmsc-ge-join-codefield{flex:1 1 160px;min-width:140px}
/* Join section reads as a distinct enrollment sub-panel across the full width */
.lmsc-gl-editor-screen .lmsc-ge-join{background:rgba(127,127,127,.04);border:1px solid var(--lmsc-border,rgba(0,0,0,.08));border-radius:12px;padding:16px 18px 14px}
.lmsc-gl-editor-screen #lmsc-ge-join-code{flex:0 1 300px;max-width:300px}

@media (max-width:600px){
	.lmsc-gl-editor-inner{padding:18px 16px}
	.lmsc-gl-editor-actions{flex-wrap:wrap}
	.lmsc-gl-editor-actions .lmsc-ge-delete{margin-right:0;order:3;width:100%}
}

/* Student "join a group" box (My Groups tab) */
.lmsc-join-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px;border:1px solid var(--lmsc-border,rgba(0,0,0,.08));border-radius:14px;background:var(--lmsc-card-bg,#fff)}
.lmsc-join-box__icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(var(--lmsc-primary-rgb,99,102,241),.12);font-size:20px}
.lmsc-join-box__main{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}
.lmsc-join-box__title{font-size:14px;font-weight:700;color:var(--lmsc-text,#1e293b)}
.lmsc-join-box__sub{font-size:12px;color:var(--lmsc-text-muted,#64748b);margin-top:2px}
.lmsc-join-box__form{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.lmsc-join-box__form input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;max-width:160px}

/* Toast fix: a second .lmsc-toast rule (centered system) sets opacity:0, which
   bleeds onto the container toasts whose entrance animation has fill-mode:none,
   making them vanish after ~0.4s. Pin the container toasts opaque + in-flow.
   (CSS animations still override these for the in/out transitions.) */
.lmsc-toast-container .lmsc-toast{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;opacity:1 !important;pointer-events:auto}

/* Centered confirm modal (replaces the native window.confirm dialog) */
.lmsc-modal--confirm .lmsc-modal__content{max-width:420px}
.lmsc-confirm__msg{font-size:14px;line-height:1.5;color:var(--lmsc-text,#1e293b);margin:4px 0 0}
.lmsc-confirm__msg{white-space:pre-line}

/* Group Leader: commerce "seats left / buy more" cue */
.lmsc-gl-seats-cue{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--lmsc-text-muted,#64748b);margin-left:auto}
.lmsc-gl-seats-label{font-weight:600}
.lmsc-gl-buymore{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--lmsc-primary);text-decoration:none;border:1px solid rgba(var(--lmsc-primary-rgb,99,102,241),.4);border-radius:8px;padding:3px 10px}
.lmsc-gl-buymore:hover{background:rgba(var(--lmsc-primary-rgb,99,102,241),.08)}
.lmsc-gl-suspended{color:#dc2626;font-weight:700}

/* F-06: small-phone header reflow.
   At <=768px the header is pinned to flex-wrap:nowrap + overflow:hidden to stop
   the page scrolling sideways. On phones under ~480px the icon row is wider than
   the header, so that clip silently sliced the avatar off the right edge.
   Reflow the row onto a second line instead of hiding it. */
@media (max-width: 480px) {
	.lmsc-dash .lmsc-dash__header {
		flex-wrap: wrap;
		overflow: visible;
		row-gap: 8px;
	}

	.lmsc-dash .lmsc-dash__header-left {
		flex: 1 1 100%;
		min-width: 0;
	}

	.lmsc-dash .lmsc-dash__header-right {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 6px;
	}
}

/* F-06 (cont.): the header icons are 44px each — search + 5 icons + avatar
   measured 332px against a 312px header at 390px wide, pushing the avatar onto
   its own line. Trim them slightly so the whole utility row fits one line;
   the wrap rule above remains as the safety net for even narrower screens. */
@media (max-width: 480px) {
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__timer-icon,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__notes-icon,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__messaging-icon,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__notification-bell,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__announcements-icon {
		width: 38px;
		min-width: 38px;
		height: 38px;
		flex-shrink: 0;
	}

	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__timer-icon > *,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__notes-icon > *,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__messaging-icon > *,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__notification-bell > button,
	.lmsc-dash .lmsc-dash__header-right > .lmsc-dash__announcements-icon > button {
		width: 38px;
		height: 38px;
	}
}

/* F-07: mobile notification panel containment.
   The bell lives inside the header, whose tablet overflow guard used to clip
   every part of the absolutely positioned panel below the icon. Hard-coded
   negative right offsets also pushed the panel outside narrow dashboards.
   Anchor it to the full utility row and keep that row above the ticker. */
@media (max-width: 768px) {
	.lmsc-dash .lmsc-dash__header {
		position: relative;
		overflow: visible;
		z-index: 3;
	}

	.lmsc-dash .lmsc-dash__header-right {
		position: relative;
		width: 100%;
		min-width: 0;
	}

	.lmsc-dash .lmsc-dash__notification-bell {
		position: static;
	}

	.lmsc-dash .lmsc-dash__notification-dropdown {
		top: calc(100% + 20px);
		left: 0;
		right: 0;
		width: 100%;
		max-width: 440px;
		box-sizing: border-box;
		z-index: 201;
	}
}

/* ==========================================================================
   Meetings display modes (admin setting: List / Cards / Calendar)
   The setting previously had no implementation — only a single hard-coded
   list was ever rendered.
   ========================================================================== */

/* --- Cards: same card markup, laid out as a responsive grid --- */
.lmsc-meetings-list--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	align-items: start;
}

.lmsc-meetings-list--cards .lmsc-meeting-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lmsc-meetings-list--cards .lmsc-meeting-card__actions {
	margin-top: auto;
}

/* --- Calendar: month grid --- */
.lmsc-cal__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--lmsc-text, #1e293b);
	margin-bottom: 12px;
	text-align: center;
}

.lmsc-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--lmsc-border, #e2e8f0);
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 12px;
	overflow: hidden;
}

.lmsc-cal__head {
	background: var(--lmsc-surface-alt, #f8fafc);
	padding: 8px 4px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lmsc-text-muted, #64748b);
}

.lmsc-cal__cell {
	background: var(--lmsc-card-bg, #fff);
	min-height: 92px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lmsc-cal__cell--empty {
	background: var(--lmsc-surface-alt, #f8fafc);
}

.lmsc-cal__cell--today .lmsc-cal__daynum {
	background: var(--lmsc-primary);
	color: var(--lmsc-on-primary, #fff);
	border-radius: 50%;
}

.lmsc-cal__daynum {
	font-size: 12px;
	font-weight: 600;
	color: var(--lmsc-text-muted, #64748b);
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lmsc-cal__events {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lmsc-cal__event {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	padding: 3px 6px;
	border-radius: 6px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), .12);
	color: var(--lmsc-primary);
	font-weight: 600;
}

a.lmsc-cal__event:hover {
	background: rgba(var(--lmsc-primary-rgb, 99, 102, 241), .22);
}

.lmsc-cal__event--live {
	background: rgba(220, 38, 38, .12);
	color: #b91c1c;
}

.lmsc-cal__event--past {
	background: var(--lmsc-surface-alt, #f1f5f9);
	color: var(--lmsc-text-muted, #64748b);
	font-weight: 500;
}

@media (max-width: 640px) {
	.lmsc-cal__cell {
		min-height: 64px;
		padding: 4px;
	}

	.lmsc-cal__event {
		font-size: 10px;
		padding: 2px 4px;
	}

	.lmsc-cal__head {
		font-size: 9px;
	}
}

/* BuddyBoss / BuddyPress profile source panel (F-14 dead-setting build-out) */
.lmsc-dash__bp-stats {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.lmsc-dash__bp-stat {
	display: flex;
	flex-direction: column;
}

.lmsc-dash__bp-stat-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--lmsc-text, #1e293b);
	line-height: 1.2;
}

.lmsc-dash__bp-stat-label {
	font-size: 12px;
	color: var(--lmsc-text-muted, #64748b);
}

/* ==========================================================================
   Progress metric labels
   The welcome ring is the unweighted MEAN of each course's percentage, while
   the Overall Progress ring is lessons completed / all lessons. They can
   legitimately differ by a lot (e.g. 18% vs 8%), which reads as a bug unless
   each figure says what it measures.
   ========================================================================== */
.lmsc-dash__welcome-ring-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	max-width: 96px;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lmsc-dash p.lmsc-dash__widget-subtitle {
	margin: -6px 0 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--lmsc-text-muted, #64748b);
}

/* WordPress swaps emoji characters for <img class="emoji">, which defaults to
   ~24px and inflates any compact control containing one — the Group Leader
   "At-Risk Only" button rendered 44px tall next to 31px siblings. Constrain
   emoji images inside buttons and pills to the text size. */
.lmsc-dash .lmsc-dash-btn img.emoji,
.lmsc-dash .lmsc-btn img.emoji,
.lmsc-dash .lmsc-pill img.emoji,
.lmsc-dash .lmsc-dash__pill img.emoji {
	width: 1em;
	height: 1em;
	margin: 0;
	vertical-align: -0.15em;
	display: inline-block;
}

/* ==========================================================================
   Native assignment workflow reliability and polish
   ========================================================================== */
.lmsc-upload-selectors {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.lmsc-upload-selector {
	flex: 1 1 220px;
	min-width: 180px;
}

.lmsc-upload-selector label {
	display: block;
	margin-bottom: 5px;
	color: var(--lmsc-text, #1e293b);
	font-size: 0.8rem;
	font-weight: 600;
}

.lmsc-upload-selector .lmsc-select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	background: var(--lmsc-card-bg, #fff);
	color: var(--lmsc-text, #1e293b);
	font-size: 0.875rem;
}

.lmsc-upload-selector__empty {
	margin: 6px 0 0;
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.75rem;
}

.lmsc-upload-zone--disabled {
	cursor: not-allowed;
	opacity: 0.56;
}

.lmsc-upload-zone--disabled:hover {
	border-color: var(--lmsc-border, #e2e8f0);
	background: var(--lmsc-card-bg, #fff);
	transform: none;
	box-shadow: none;
}

.lmsc-upload-zone[aria-disabled="false"]:focus-visible {
	border-color: var(--lmsc-primary, #007aff);
	outline: 3px solid color-mix(in srgb, var(--lmsc-primary, #007aff) 28%, transparent);
	outline-offset: 3px;
}

.lmsc-upload-zone[aria-disabled="true"]:focus-visible {
	outline: 2px solid var(--lmsc-text-muted, #64748b);
	outline-offset: 3px;
}

.lmsc-upload-zone__status--error {
	color: var(--lmsc-danger, #b91c1c);
}

.lmsc-upload-zone__status--success {
	color: var(--lmsc-success, #15803d);
}

.lmsc-card-grid,
.lmsc-card-grid > *,
.lmsc-card--assignment,
.lmsc-gl-grading-card,
.lmsc-gl-grading-header > div {
	min-width: 0;
}

.lmsc-card--assignment .lmsc-card__header {
	flex-wrap: wrap;
	gap: 8px;
}

.lmsc-card__returned-at {
	display: block;
	margin: 2px 0 8px;
	color: var(--lmsc-danger, #b91c1c);
	font-size: 0.75rem;
	font-weight: 600;
}

.lmsc-card__feedback > div {
	min-width: 0;
}

.lmsc-card__feedback strong,
.lmsc-card__feedback span {
	display: block;
	overflow-wrap: anywhere;
}

.lmsc-card__feedback strong {
	margin-bottom: 2px;
	color: var(--lmsc-text, #1e293b);
	font-size: 0.75rem;
}

.lmsc-card__points {
	display: inline-flex;
	gap: 4px;
	margin: 2px 0 10px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--lmsc-bg-secondary, #f1f5f9);
	color: var(--lmsc-text-muted, #475569);
	font-size: 0.75rem;
}

.lmsc-assignments-load-error {
	grid-column: 1 / -1;
	margin: 0;
	padding: 20px;
	color: var(--lmsc-text-muted, #64748b);
	text-align: center;
}

.lmsc-gl-grading-card {
	overflow: hidden;
}

.lmsc-gl-grading-card--selectable {
	padding-left: 44px;
}

.lmsc-gl-grading-header small,
.lmsc-gl-grading-title,
.lmsc-gl-grading-preview {
	overflow-wrap: anywhere;
}

.lmsc-gl-grading-header time {
	flex: 0 0 auto;
	white-space: nowrap;
}

.lmsc-gl-file-link {
	max-width: 100%;
	min-width: 0;
}

.lmsc-gl-file-link__name {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.lmsc-gl-assignment-points {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 2px 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	background: var(--lmsc-bg-secondary, #f8fafc);
}

.lmsc-gl-assignment-points label {
	color: var(--lmsc-text, #1e293b);
	font-size: 0.8rem;
	font-weight: 600;
}

.lmsc-gl-assignment-points__control {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.8rem;
	white-space: nowrap;
}

.lmsc-gl-assignment-points-input {
	width: 76px;
	min-width: 0;
}

.lmsc-bulk-check:focus-visible,
.lmsc-gl-grading-actions .lmsc-btn:focus-visible {
	outline: 2px solid var(--lmsc-primary, #007aff);
	outline-offset: 2px;
}

.lmsc-gl-assignment-return-modal__content {
	width: min(92vw, 560px);
	max-width: 560px;
	padding: 24px;
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #1e293b);
}

.lmsc-gl-assignment-return-modal__content > .lmsc-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
}

.lmsc-gl-assignment-return-modal__context {
	margin: 10px 32px 4px 0;
	color: var(--lmsc-text, #1e293b);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.lmsc-gl-assignment-return-modal__help,
.lmsc-gl-assignment-return-modal__field-help {
	display: block;
	color: var(--lmsc-text-muted, #64748b);
	font-size: 0.8rem;
	line-height: 1.45;
}

.lmsc-gl-assignment-return-modal .lmsc-gl-grade-feedback {
	margin-top: 18px;
}

.lmsc-gl-assignment-return-modal .lmsc-textarea {
	width: 100%;
	margin-bottom: 5px;
	resize: vertical;
}

.lmsc-gl-assignment-return-modal__error {
	display: block;
	margin-top: 6px;
	color: var(--lmsc-danger, #b91c1c);
	font-size: 0.8rem;
	font-weight: 600;
}

.lmsc-gl-assignment-return-modal .lmsc-gl-grade-actions {
	justify-content: flex-end;
	margin-top: 20px;
}

.lmsc-gl-assignment-return-modal button:focus-visible,
.lmsc-gl-assignment-return-modal textarea:focus-visible {
	outline: 2px solid var(--lmsc-primary, #007aff);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.lmsc-upload-selector {
		flex-basis: 100%;
		min-width: 0;
	}

	.lmsc-upload-zone {
		padding: 1.5rem 1rem;
	}

	.lmsc-gl-grading-header {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.lmsc-gl-grading-header time {
		width: 100%;
		padding-left: 38px;
	}

	.lmsc-gl-grading-actions .lmsc-btn {
		width: 100%;
		justify-content: center;
	}

	.lmsc-gl-assignment-points {
		align-items: flex-start;
		flex-direction: column;
	}

	.lmsc-gl-assignment-return-modal__content {
		width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
		padding: 20px;
	}

	.lmsc-gl-assignment-return-modal .lmsc-gl-grade-actions {
		flex-direction: column-reverse;
	}

	.lmsc-gl-assignment-return-modal .lmsc-gl-grade-actions .lmsc-btn {
		width: 100%;
	}
}

/* ========================================================================== 
   Responsive and detached-overlay safeguards
   ========================================================================== */

/* Notes can include two long LearnDash context labels plus a timestamp. Keep
   each value readable without allowing the card to widen its slideout. */
.lmsc-dash__slideout-body .lmsc-dash__note-meta {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 6px 8px;
	min-width: 0;
}

.lmsc-dash__slideout-body .lmsc-dash__note-tag {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lmsc-dash__slideout-body .lmsc-dash__note-time {
	margin-left: auto;
	white-space: nowrap;
}

.lmsc-dash__slideout-body .lmsc-dash__note-card:focus-within .lmsc-dash__note-actions {
	opacity: 1;
}

@media (hover: none), (pointer: coarse) {
	.lmsc-dash__slideout-body .lmsc-dash__note-actions {
		opacity: 1;
	}
}

/* The official provider can render third-party LearnDash markup. Contain it
   inside the drawer even when that add-on outputs wide tables or media. */
.lmsc-dash__official-notes {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
}

.lmsc-dash__official-notes img,
.lmsc-dash__official-notes video,
.lmsc-dash__official-notes iframe,
.lmsc-dash__official-notes table {
	max-width: 100%;
}

/* Panels are moved to body to escape theme stacking contexts, so recreate the
   dashboard's visible keyboard-focus treatment at their new DOM location. */
.lmsc-dash__slideout-panel button:focus-visible,
.lmsc-dash__slideout-panel a:focus-visible,
.lmsc-dash__slideout-panel input:focus-visible,
.lmsc-dash__slideout-panel select:focus-visible,
.lmsc-dash__slideout-panel textarea:focus-visible,
.lmsc-dash__slideout-panel [contenteditable="true"]:focus-visible {
	outline: 2px solid var(--lmsc-primary, #1e6ff5);
	outline-offset: 2px;
}

.lmsc-lp-select-card:focus-visible,
.lmsc-lp-rec-card:focus-visible,
.lmsc-lp-node[role="link"]:focus-visible,
.lmsc-lp-cpt-card[role="link"]:focus-visible {
	outline: 3px solid var(--lmsc-primary, #1e6ff5);
	outline-offset: 3px;
}

/* Course access actions are visually distinct from an immediately available
   course while still preserving the path sequence's locked state. */
.lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) .lmsc-lp-node-card,
.lmsc-lp-cpt-card.lmsc-lp-node--access-required:not(.lmsc-lp-node--locked),
.lmsc-lp-gx-node.lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) {
	border-color: rgba(245, 158, 11, 0.55);
	background: rgba(245, 158, 11, 0.08);
}

.lmsc-dash--dark .lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) .lmsc-lp-node-card,
.lmsc-dash--dark .lmsc-lp-cpt-card.lmsc-lp-node--access-required:not(.lmsc-lp-node--locked),
.lmsc-dash--dark .lmsc-lp-gx-node.lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) {
	border-color: rgba(251, 191, 36, 0.65);
	background: rgba(245, 158, 11, 0.12);
}

/* The sticky Learning Path action is also reparented to body; support dark
   mode when the dark-context class sits on the bar itself. */
.lmsc-lp-continue-cta.lmsc-dash--dark {
	background: rgba(15, 23, 42, 0.9);
	border-top-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

.lmsc-lp-continue-cta.lmsc-dash--dark .lmsc-lp-continue-label {
	color: #9ca3af;
}

.lmsc-lp-continue-cta.lmsc-dash--dark .lmsc-lp-continue-title {
	color: #f1f5f9;
}

.lmsc-dash--dark .lmsc-lp-enroll-sub {
	color: #cbd5e1;
}

/* A later layout-variant rule previously overrode the intended full-width
   compact cards on phones with a fixed 200px width. */
@media (max-width: 640px) {
	.lmsc-lp-nodes--compact .lmsc-lp-cpt-card {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.lmsc-dash__modal-overlay {
		padding: 12px;
	}

	.lmsc-dash__modal {
		max-height: 90vh;
		max-height: min(90vh, calc(100dvh - 24px));
	}

	.lmsc-dash__modal .lmsc-dash__form-row {
		flex-direction: column;
		gap: 0;
	}

	.lmsc-dash__modal .lmsc-dash__form-group,
	.lmsc-dash__modal .lmsc-dash__select {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* At phone width the selector CTA no longer competes with the title and
	   metadata in one horizontal row. */
	.lmsc-lp-select-card {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		align-items: start;
		gap: 10px 12px;
		min-height: 0;
		padding: 16px;
	}

	.lmsc-lp-select-icon {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 46px;
		height: 46px;
		border-radius: 13px;
	}

	.lmsc-lp-select-info {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
	}

	.lmsc-lp-select-info h4 {
		font-size: 14px;
	}

	.lmsc-lp-select-cta {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		opacity: 1;
	}

}

/* ========================================================================== 
   Consistent plugin-owned select controls
   ========================================================================== */

/* Host themes style native selects inconsistently (or remove their indicator
   entirely). Keep one compact chevron and enough text clearance throughout
   Dashboard Pro, including plugin overlays that are reparented to <body>. */
select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--lmsc-input-bg, var(--lmsc-surface, #fff));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 12px;
	border-color: var(--lmsc-border, #d1d5db);
	color: var(--lmsc-text, #1e293b);
	padding-inline-end: 36px !important;
}

select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]):disabled {
	background-color: var(--lmsc-surface-alt, #f8fafc);
	color: var(--lmsc-text-muted, #64748b);
	cursor: not-allowed;
	opacity: 1;
}

/* Detached panels carry the dark-context class themselves. Use a brighter
   neutral indicator there without changing each skin's field background. */
.lmsc-dash--dark select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]),
.lmsc-dash__slideout-panel.lmsc-dash--dark select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]),
.lmsc-modal.lmsc-dash--dark select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]),
.lmsc-dash__modal-overlay.lmsc-dash--dark select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[dir="rtl"] select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]) {
	background-position: left 12px center;
}

/* Let adjacent modal fields share the row evenly instead of allowing a long
   course option to squeeze the neighboring Lesson or topic control. */
.lmsc-dash__modal .lmsc-dash__form-row > .lmsc-dash__form-group {
	flex: 1 1 0;
	min-width: 0;
}

.lmsc-dash__modal .lmsc-dash__form-row > .lmsc-dash__form-group select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (forced-colors: active) {
	select:is([id^="lmsc-"], [class^="lmsc-"], [class*=" lmsc-"]):not([multiple]):not([size]) {
		appearance: auto;
		background-image: none;
		padding-inline-end: 12px !important;
	}
}

/* ========================================================================== 
   Learning Paths: professional responsive visual system

   This late, component-scoped layer deliberately replaces the older decorative
   effects with one readable state language. The tab is an inline-size container
   so a sidebar-constrained canvas reflows even on a wide browser viewport.
   ========================================================================== */

.lmsc-dash,
.lmsc-component--learning-path,
[data-lmsc-learning-path] {
	--lmsc-lp-surface: var(--lmsc-surface, #fff);
	--lmsc-lp-surface-subtle: var(--lmsc-surface-alt, #f8fafc);
	--lmsc-lp-text: var(--lmsc-text, #1e293b);
	--lmsc-lp-muted: var(--lmsc-text-muted, #596574);
	--lmsc-lp-border: var(--lmsc-border, #d7dee7);
	--lmsc-lp-link: #1d4ed8;
	--lmsc-lp-focus: #1d4ed8;
	--lmsc-lp-action-bg: var(--lmsc-lp-custom-action-bg, #1d6bee);
	--lmsc-lp-action-fg: var(--lmsc-lp-custom-action-fg, #fff);
	--lmsc-lp-action-border: #1e3a8a;
	--lmsc-lp-path-accent: var(--lp-color, var(--lmsc-lp-action-bg));
	--lmsc-lp-path-accent-fg: var(--lp-color-fg, var(--lmsc-lp-action-fg));
	--lmsc-lp-completed: #166534;
	--lmsc-lp-completed-bg: #f0fdf4;
	--lmsc-lp-completed-marker: var(--lmsc-lp-completed);
	--lmsc-lp-completed-marker-border: var(--lmsc-lp-completed);
	--lmsc-lp-completed-marker-fg: #fff;
	--lmsc-lp-current: #1d4ed8;
	--lmsc-lp-current-bg: #eff6ff;
	--lmsc-lp-current-marker: var(--lmsc-lp-path-accent);
	--lmsc-lp-current-marker-fg: var(--lmsc-lp-path-accent-fg);
	--lmsc-lp-available: #475569;
	--lmsc-lp-available-bg: #f8fafc;
	--lmsc-lp-access: #92400e;
	--lmsc-lp-access-bg: #fffbeb;
	--lmsc-lp-locked: #475569;
	--lmsc-lp-locked-bg: #f1f5f9;
	--lmsc-lp-road-edge: color-mix(in srgb, var(--lmsc-lp-path-accent) 22%, var(--lmsc-lp-border));
	--lmsc-lp-road-surface: color-mix(in srgb, var(--lmsc-lp-path-accent) 68%, var(--lmsc-lp-border));
	--lmsc-lp-road-dash: color-mix(in srgb, var(--lmsc-lp-surface) 78%, transparent);
}

.lmsc-component--learning-path *,
.lmsc-component--learning-path *::before,
.lmsc-component--learning-path *::after,
[data-lmsc-learning-path] *,
[data-lmsc-learning-path] *::before,
[data-lmsc-learning-path] *::after {
	box-sizing: border-box;
}

.lmsc-dash.lmsc-dash--dark,
.lmsc-dash[data-skin="midnight"] {
	--lmsc-lp-surface: var(--lmsc-surface, #0f172a);
	--lmsc-lp-surface-subtle: var(--lmsc-surface-alt, #111827);
	--lmsc-lp-text: var(--lmsc-text, #e2e8f0);
	--lmsc-lp-muted: var(--lmsc-text-muted, #a8b4c5);
	--lmsc-lp-border: var(--lmsc-border, #334155);
	--lmsc-lp-link: #bfdbfe;
	--lmsc-lp-focus: #bfdbfe;
	--lmsc-lp-action-border: #bfdbfe;
	--lmsc-lp-completed: #86efac;
	--lmsc-lp-completed-bg: #14291e;
	--lmsc-lp-completed-marker: #166534;
	--lmsc-lp-completed-marker-border: #86efac;
	--lmsc-lp-completed-marker-fg: #fff;
	--lmsc-lp-current: #bfdbfe;
	--lmsc-lp-current-bg: #172554;
	--lmsc-lp-available: #cbd5e1;
	--lmsc-lp-available-bg: #1e293b;
	--lmsc-lp-access: #fde68a;
	--lmsc-lp-access-bg: #3b2a10;
	--lmsc-lp-locked: #cbd5e1;
	--lmsc-lp-locked-bg: #1e293b;
	--lmsc-lp-road-edge: color-mix(in srgb, var(--lmsc-lp-path-accent) 26%, var(--lmsc-lp-border));
	--lmsc-lp-road-surface: color-mix(in srgb, var(--lmsc-lp-path-accent) 72%, var(--lmsc-lp-border));
	--lmsc-lp-road-dash: rgba(255, 255, 255, .72);
}

/* Canonical/shortcode roots also carry light standalone defaults. When they
   live inside the dashboard, inherit the resolved dark semantic palette from
   the canvas instead of shadowing it with those standalone values. */
.lmsc-dash.lmsc-dash--dark :is(.lmsc-component--learning-path, [data-lmsc-learning-path]),
.lmsc-dash[data-skin="midnight"] :is(.lmsc-component--learning-path, [data-lmsc-learning-path]) {
	--lmsc-lp-surface: inherit;
	--lmsc-lp-surface-subtle: inherit;
	--lmsc-lp-text: inherit;
	--lmsc-lp-muted: inherit;
	--lmsc-lp-border: inherit;
	--lmsc-lp-link: inherit;
	--lmsc-lp-focus: inherit;
	--lmsc-lp-action-bg: inherit;
	--lmsc-lp-action-fg: inherit;
	--lmsc-lp-action-border: inherit;
	--lmsc-lp-path-accent: inherit;
	--lmsc-lp-path-accent-fg: inherit;
	--lmsc-lp-completed: inherit;
	--lmsc-lp-completed-bg: inherit;
	--lmsc-lp-completed-marker: inherit;
	--lmsc-lp-completed-marker-border: inherit;
	--lmsc-lp-completed-marker-fg: inherit;
	--lmsc-lp-current: inherit;
	--lmsc-lp-current-bg: inherit;
	--lmsc-lp-current-marker: inherit;
	--lmsc-lp-current-marker-fg: inherit;
	--lmsc-lp-available: inherit;
	--lmsc-lp-available-bg: inherit;
	--lmsc-lp-access: inherit;
	--lmsc-lp-access-bg: inherit;
	--lmsc-lp-locked: inherit;
	--lmsc-lp-locked-bg: inherit;
	--lmsc-lp-road-edge: inherit;
	--lmsc-lp-road-surface: inherit;
	--lmsc-lp-road-dash: inherit;
}

.lmsc-dash__panel[data-panel="learning-paths"],
.lmsc-tab-panel[data-tab="learning-paths"],
.lmsc-component--learning-path,
[data-lmsc-learning-path] {
	container-name: lmsc-learning-paths;
	container-type: inline-size;
	min-width: 0;
}

.lmsc-lp-selector,
.lmsc-lp-container,
.lmsc-lp-nodes,
.lmsc-lp-rh,
.lmsc-lp-select-card,
.lmsc-lp-node,
.lmsc-lp-node-card,
.lmsc-lp-node-info,
.lmsc-lp-ms-content,
.lmsc-lp-cpt-body,
.lmsc-lp-gx-info {
	min-width: 0;
}

/* Empty results use the same semantic surface and text tokens as the catalog.
   This avoids transparent gradient text and low-contrast hard-coded grey in
   Midnight, Netflix, and custom dark skins. */
.lmsc-lp-student-empty {
	max-width: 680px;
	margin-inline: auto;
	padding: clamp(40px, 8vw, 72px) clamp(18px, 4vw, 32px);
	background: var(--lmsc-lp-surface-subtle);
	border: 1px dashed var(--lmsc-lp-border);
	border-radius: 16px;
	color: var(--lmsc-lp-text);
	text-align: center;
}

.lmsc-lp-student-empty-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 20px;
	background: var(--lmsc-lp-path-accent);
	border: 1px solid var(--lmsc-lp-action-border);
	border-radius: 16px;
	box-shadow: none;
	color: var(--lmsc-lp-path-accent-fg);
}

.lmsc-lp-student-empty-icon svg {
	color: currentColor;
}

.lmsc-lp-student-empty h3 {
	margin: 0 0 8px;
	background: none;
	color: var(--lmsc-lp-text);
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
	line-height: 1.35;
}

.lmsc-lp-student-empty p {
	max-width: 440px;
	margin: 0 auto;
	color: var(--lmsc-lp-muted);
	font-size: .86rem;
	line-height: 1.65;
}

/* Catalog cards */
.lmsc-lp-selector-title {
	margin-block-end: 20px;
	color: var(--lmsc-lp-text);
	font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
	line-height: 1.3;
}

.lmsc-lp-selector-title svg {
	color: var(--lmsc-lp-link);
	filter: none;
}

.lmsc-lp-selector-grid,
.lmsc-lp-rec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
}

/* Keep the catalog heading visually separate from its first card row even
   when a host theme resets heading margins to zero. */
.lmsc-lp-selector > .lmsc-lp-selector-grid {
	margin-block-start: clamp(18px, 1.5vw, 24px);
}

.lmsc-lp-catalog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 22px;
}

.lmsc-lp-catalog-page,
.lmsc-lp-catalog-retry {
	min-height: 44px;
	padding: 8px 14px;
	appearance: none;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-action-border);
	border-radius: 10px;
	color: var(--lmsc-lp-link);
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
}

.lmsc-lp-catalog-page:hover:not(:disabled),
.lmsc-lp-catalog-retry:hover {
	background: var(--lmsc-lp-path-accent);
	color: var(--lmsc-lp-path-accent-fg);
}

.lmsc-lp-catalog-page:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.lmsc-lp-catalog-page-info {
	min-width: 112px;
	color: var(--lmsc-lp-muted);
	font-size: .8rem;
	font-weight: 650;
	text-align: center;
}

.lmsc-lp-catalog-error {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 12px;
	padding: 10px 12px;
	background: var(--lmsc-lp-access-bg);
	border: 1px solid var(--lmsc-lp-access);
	border-radius: 10px;
	color: var(--lmsc-lp-text);
	font-size: .82rem;
}

.lmsc-lp-select-card {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 112px;
	padding: 18px;
	appearance: none;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .04);
	color: var(--lmsc-lp-text);
	font: inherit;
	text-align: start;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lmsc-lp-select-card::before {
	left: auto;
	right: auto;
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: 4px;
	height: auto;
	border-radius: 0;
	border-start-start-radius: 14px;
	border-end-start-radius: 14px;
	background: var(--lmsc-lp-path-accent);
	opacity: 0;
}

.lmsc-lp-select-card:hover,
.lmsc-lp-select-card:focus-visible,
.lmsc-lp-select-card:active {
	background: var(--lmsc-lp-surface) !important;
	color: var(--lmsc-lp-text) !important;
}

/* Returning from a path deliberately restores focus to the catalog card that
   opened it. Pointer focus is not a selected state, so neutralize host-theme
   button:focus fills while the keyboard-only :focus-visible outline remains. */
:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) button.lmsc-lp-select-card:focus:not(:focus-visible) {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .04) !important;
	color: var(--lmsc-lp-text) !important;
	outline: none !important;
	transform: none;
}

.lmsc-lp-select-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--lmsc-lp-path-accent) 32%, var(--lmsc-lp-border));
	box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) button.lmsc-lp-select-card:focus:not(:focus-visible):hover {
	border-color: color-mix(in srgb, var(--lmsc-lp-path-accent) 32%, var(--lmsc-lp-border)) !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important;
	transform: translateY(-2px);
}

.lmsc-lp-select-card:hover::before,
.lmsc-lp-select-card:focus-visible::before {
	opacity: 1;
}

.lmsc-lp-select-icon {
	grid-column: 1;
	grid-row: 1;
	width: 52px;
	height: 52px;
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 12px;
	background-color: var(--lmsc-lp-path-accent) !important;
	color: var(--lmsc-lp-path-accent-fg) !important;
	box-shadow: none;
}

.lmsc-lp-select-icon--thumb {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--lmsc-lp-surface-subtle) !important;
	color: var(--lmsc-lp-path-accent) !important;
}

.lmsc-lp-select-icon-fallback,
.lmsc-lp-select-icon-fallback svg {
	display: block;
	width: 24px;
	height: 24px;
}

.lmsc-lp-select-icon--thumb img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lmsc-lp-select-icon--thumb img[hidden] {
	display: none !important;
}

.lmsc-lp-select-icon--thumb.is-broken {
	background: color-mix(in srgb, var(--lmsc-lp-path-accent) 10%, var(--lmsc-lp-surface)) !important;
}

.lmsc-lp-select-card:hover .lmsc-lp-select-icon,
.lmsc-lp-select-card--has-thumb:hover .lmsc-lp-select-thumb {
	transform: none;
}

.lmsc-lp-select-info {
	display: block;
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.lmsc-lp-select-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	min-width: 0;
}

.lmsc-lp-select-title,
.lmsc-lp-rec-card-title,
.lmsc-lp-select-info h3,
.lmsc-lp-select-info h4,
.lmsc-lp-rec-card h4 {
	display: -webkit-box;
	flex: 1 1 150px;
	min-width: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	color: var(--lmsc-lp-text);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.lmsc-lp-select-meta,
.lmsc-lp-rh-badges,
.lmsc-lp-node-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

.lmsc-lp-select-meta {
	margin-block-start: 8px;
}

.lmsc-lp-meta-badge,
.lmsc-lp-badge-type,
.lmsc-lp-badge-done,
.lmsc-lp-badge-progress,
.lmsc-lp-badge-avail,
.lmsc-lp-badge-locked {
	max-width: 100%;
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	font-size: .72rem;
	font-weight: 650;
	line-height: 1.25;
	text-transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
}

.lmsc-lp-meta-badge,
.lmsc-lp-badge-type {
	background: var(--lmsc-lp-surface-subtle);
	border-color: var(--lmsc-lp-border);
	color: var(--lmsc-lp-muted);
}

.lmsc-lp-diff--beginner {
	background: #f0fdf4;
	border-color: #86efac;
	color: #166534;
}

.lmsc-lp-diff--intermediate {
	background: #fffbeb;
	border-color: #fcd34d;
	color: #92400e;
}

.lmsc-lp-diff--advanced {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #991b1b;
}

.lmsc-dash--dark .lmsc-lp-diff--beginner,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-diff--beginner {
	background: #14291e;
	border-color: #4ade80;
	color: #bbf7d0 !important;
}

.lmsc-dash--dark .lmsc-lp-diff--intermediate,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-diff--intermediate {
	background: #3b2a10;
	border-color: #fbbf24;
	color: #fde68a !important;
}

.lmsc-dash--dark .lmsc-lp-diff--advanced,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-diff--advanced {
	background: #3f1d24;
	border-color: #fb7185;
	color: #fecdd3 !important;
}

.lmsc-lp-progress-bar {
	display: block;
	width: 100%;
	overflow: hidden;
	height: 7px;
	margin-block-start: 10px;
	background: var(--lmsc-lp-locked-bg);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 999px;
}

.lmsc-lp-progress-fill {
	display: block;
	height: 100%;
	background: var(--lmsc-lp-path-accent) !important;
}

:is(.lmsc-component--learning-path, [data-lmsc-learning-path]):dir(rtl) .lmsc-lp-progress-fill {
	margin-inline-start: 0;
	margin-inline-end: auto;
	transform-origin: right center;
}

.lmsc-lp-select-card--completed .lmsc-lp-progress-fill {
	background: var(--lmsc-lp-completed) !important;
}

.lmsc-lp-progress-label,
.lmsc-lp-select-info > span,
.lmsc-lp-rec-meta {
	color: var(--lmsc-lp-muted);
}

.lmsc-lp-select-cta {
	grid-column: 3;
	grid-row: 1;
	max-width: 9rem;
	color: var(--lmsc-lp-link);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.35;
	opacity: 1;
	text-align: end;
	white-space: normal;
}

.lmsc-lp-select-card:hover .lmsc-lp-select-cta,
.lmsc-lp-select-card:hover .lmsc-lp-select-arrow {
	transform: none;
}

.lmsc-lp-select-card--completed,
.lmsc-dash--dark .lmsc-lp-select-card--completed {
	background: var(--lmsc-lp-completed-bg) !important;
	border-color: color-mix(in srgb, var(--lmsc-lp-completed) 38%, var(--lmsc-lp-border)) !important;
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) button.lmsc-lp-select-card--completed:focus:not(:focus-visible) {
	background: var(--lmsc-lp-completed-bg) !important;
	border-color: color-mix(in srgb, var(--lmsc-lp-completed) 38%, var(--lmsc-lp-border)) !important;
}

.lmsc-lp-completed-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-inline-start: 0;
	padding: 2px 7px;
	background: var(--lmsc-lp-completed-bg);
	border: 1px solid var(--lmsc-lp-completed);
	border-radius: 999px;
	color: var(--lmsc-lp-completed);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: .1em;
}

.lmsc-lp-rec-card {
	display: block;
	width: 100%;
	padding: 16px;
	appearance: none;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	color: var(--lmsc-lp-text);
	font: inherit;
	text-align: start;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lmsc-dash--dark .lmsc-lp-rec-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-rec-card {
	background: var(--lmsc-lp-surface);
	border-color: var(--lmsc-lp-border);
}

.lmsc-dash--dark .lmsc-lp-rec-reason,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-rec-reason {
	color: var(--lmsc-lp-link);
}

.lmsc-lp-rec-card:hover {
	background: var(--lmsc-lp-surface) !important;
	color: var(--lmsc-lp-text) !important;
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--lmsc-lp-action-bg) 32%, var(--lmsc-lp-border));
	box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) button.lmsc-lp-rec-card:focus:not(:focus-visible) {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
	color: var(--lmsc-lp-text) !important;
	outline: none !important;
	transform: none;
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) button.lmsc-lp-rec-card:focus:not(:focus-visible):hover {
	border-color: color-mix(in srgb, var(--lmsc-lp-action-bg) 32%, var(--lmsc-lp-border)) !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .10) !important;
	transform: translateY(-2px);
}

.lmsc-lp-rec-card::before {
	left: auto;
	right: auto;
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: 3px;
	height: auto;
	background: var(--lmsc-lp-action-bg);
	border-radius: 0;
	border-start-start-radius: 12px;
	border-end-start-radius: 12px;
}

.lmsc-lp-rec-reason {
	display: block;
	margin-block-end: 6px;
	color: var(--lmsc-lp-link);
}

.lmsc-lp-rec-card-title,
.lmsc-lp-rec-meta {
	display: block;
}

.lmsc-lp-rec-meta {
	margin-block-start: 6px;
}

.lmsc-lp-back-btn {
	min-height: 44px;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-action-border);
	border-radius: 10px;
	color: var(--lmsc-lp-link);
	box-shadow: none;
}

.lmsc-lp-back-btn:hover {
	background: var(--lmsc-lp-surface-subtle);
	border-color: var(--lmsc-lp-action-border);
	box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
	color: var(--lmsc-lp-link);
}

/* Compact, content-first path hero */
.lmsc-lp-rh {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, 280px) auto;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	margin-block-end: 24px;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .04);
	overflow: hidden;
	text-align: start !important;
}

.lmsc-lp-rh::after {
	display: none;
}

.lmsc-lp-rh::before {
	left: auto;
	right: auto;
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: 4px;
	height: auto;
	background: var(--lmsc-lp-path-accent);
	border-radius: 0;
}

.lmsc-lp-rh-info {
	min-width: 0;
}

.lmsc-lp-rh-title {
	margin: 0;
	background: none;
	color: var(--lmsc-lp-text);
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	font-size: clamp(1.25rem, 1.1rem + .55vw, 1.65rem);
	font-weight: 750;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.lmsc-dash--dark .lmsc-lp-rh,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-rh {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .12);
}

.lmsc-dash--dark .lmsc-lp-rh-title,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-rh-title {
	background: none;
	color: var(--lmsc-lp-text);
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
}

.lmsc-dash--dark .lmsc-lp-select-card::before,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-select-card::before {
	background: var(--lmsc-lp-path-accent);
}

.lmsc-lp-rh-duration {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 8px;
	color: var(--lmsc-lp-muted);
	font-size: .8rem;
	font-weight: 650;
	line-height: 1.4;
}

.lmsc-lp-rh-duration svg {
	flex: 0 0 auto;
}

.lmsc-lp-rh-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	min-width: 0;
}

.lmsc-lp-rh-progress-copy {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.lmsc-lp-rh-pct {
	flex: 0 0 auto;
	color: var(--lmsc-lp-text);
	font-size: .9rem;
	font-weight: 750;
	line-height: 1.2;
}

.lmsc-lp-rh-track {
	position: relative;
	height: 8px;
	overflow: hidden;
	background: var(--lmsc-lp-locked-bg);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 999px;
}

.lmsc-lp-rh-fill {
	display: block;
	height: 100%;
	max-width: 100%;
	background: var(--lmsc-lp-path-accent);
	border-radius: inherit;
}

.lmsc-lp-rh-track[aria-valuenow="100"] .lmsc-lp-rh-fill {
	background: var(--lmsc-lp-completed);
}

.lmsc-lp-rh-label {
	color: var(--lmsc-lp-muted);
	min-width: 0;
	font-size: .72rem;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
}

.lmsc-lp-rh-cta,
.lmsc-lp-rh-cta .lmsc-lp-enroll-cta {
	display: flex;
	align-items: stretch;
	margin: 0;
}

.lmsc-lp-rh-cta .lmsc-lp-rh-action {
	min-width: 118px;
}

.lmsc-lp-enroll-btn,
.lmsc-lp-rh-action,
.lmsc-lp-node-action,
.lmsc-lp-continue-btn,
.lmsc-lp-milestone-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	max-width: 100%;
	padding: 10px 16px;
	background: var(--lmsc-lp-action-bg, var(--lmsc-primary, #1e6ff5)) !important;
	border: 1px solid var(--lmsc-lp-action-border, #1e3a8a) !important;
	border-radius: 10px;
	box-shadow: none;
	color: var(--lmsc-lp-action-fg, var(--lmsc-on-primary, #fff)) !important;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	white-space: normal;
}

.lmsc-lp-enroll-btn:hover,
.lmsc-lp-rh-action:hover,
.lmsc-lp-node-action:hover,
.lmsc-lp-continue-btn:hover,
.lmsc-lp-milestone-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(15, 23, 42, .14);
}

/* Canonical roadmap and semantic states */
.lmsc-lp-nodes {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 12px 8px 24px;
	list-style: none;
}

.lmsc-lp-node {
	max-width: 720px;
	margin-block-end: 14px;
	padding-block-start: 4px;
}

/* Intentional terminal state: a compact destination rather than another
   course card. The canonical renderer owns the copy and completion state. */
.lmsc-lp-finish {
	position: relative;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 720px;
	min-width: 0;
	margin: 0;
	padding: 4px 0 10px;
	list-style: none;
	color: var(--lmsc-lp-text);
}

.lmsc-lp-finish .lmsc-lp-finish-marker {
	position: relative;
	display: grid;
	place-items: center;
	grid-column: 1;
	width: 46px;
	height: 46px;
	margin: 0;
	background: var(--lmsc-lp-available-bg) !important;
	border: 2px solid var(--lmsc-lp-available);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--lmsc-lp-available) 12%, transparent) !important;
	color: var(--lmsc-lp-available) !important;
}

.lmsc-lp-finish-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.lmsc-lp-finish-copy {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--lmsc-lp-text);
	font-size: .76rem;
	line-height: 1.35;
	text-align: start;
	overflow-wrap: anywhere;
}

.lmsc-lp-finish-copy strong {
	color: inherit;
	font-size: .86rem;
	font-weight: 750;
}

.lmsc-lp-finish--complete .lmsc-lp-finish-marker {
	background: var(--lmsc-lp-completed-marker) !important;
	border-color: var(--lmsc-lp-completed-marker-border);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--lmsc-lp-completed) 15%, transparent) !important;
	color: var(--lmsc-lp-completed-marker-fg) !important;
}

.lmsc-lp-finish--complete .lmsc-lp-finish-copy {
	color: var(--lmsc-lp-completed);
}

.lmsc-lp-finish-check {
	position: absolute;
	inset-inline-end: -4px;
	inset-block-end: -4px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	background: var(--lmsc-lp-surface);
	border: 2px solid var(--lmsc-lp-completed);
	border-radius: 999px;
	color: var(--lmsc-lp-completed);
}

.lmsc-lp-finish-check svg {
	display: block;
	width: 12px;
	height: 12px;
}

.lmsc-lp-node-circle,
.lmsc-lp-cpt-circle,
.lmsc-lp-ms-marker,
.lmsc-lp-gx-planet {
	width: 36px;
	height: 36px;
	border: 2px solid var(--lmsc-lp-available);
	background: var(--lmsc-lp-available-bg) !important;
	box-shadow: none !important;
	color: var(--lmsc-lp-available) !important;
	font-size: .78rem;
	font-weight: 750;
}

.lmsc-lp-node-card,
.lmsc-lp-cpt-card,
.lmsc-lp-ms-card,
.lmsc-lp-gx-info {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 76px;
	padding: 14px 16px;
	background: var(--lmsc-lp-surface);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid var(--lmsc-lp-border);
	border-inline-start: 4px solid var(--lmsc-lp-available);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lmsc-lp-node-info {
	grid-column: 2;
	min-width: 0;
}

.lmsc-lp-node-action {
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	cursor: pointer;
}

.lmsc-lp-node-card::before,
.lmsc-lp-ms-card::before {
	display: none;
}

.lmsc-lp-node[role="link"] .lmsc-lp-node-card,
.lmsc-lp-cpt-card[role="link"],
.lmsc-lp-gx-node[role="link"] .lmsc-lp-gx-info,
.lmsc-lp-ms-node[role="link"] .lmsc-lp-ms-card {
	cursor: pointer;
}

.lmsc-lp-node[role="link"]:hover .lmsc-lp-node-card,
.lmsc-lp-cpt-card[role="link"]:hover,
.lmsc-lp-gx-node[role="link"]:hover .lmsc-lp-gx-info,
.lmsc-lp-ms-node[role="link"]:hover .lmsc-lp-ms-card {
	transform: translateY(-2px);
	border-color: var(--lmsc-lp-link);
	box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}

.lmsc-lp-roadmap .lmsc-lp-node-title,
.lmsc-component--learning-path .lmsc-lp-node-title,
[data-lmsc-learning-path] .lmsc-lp-node-title,
.lmsc-component--learning-path .lmsc-lp-node-info > strong,
[data-lmsc-learning-path] .lmsc-lp-node-info > strong,
.lmsc-lp-cpt-body .lmsc-lp-node-title,
.lmsc-lp-gx-info .lmsc-lp-node-title,
.lmsc-lp-ms-content .lmsc-lp-node-title {
	display: block;
	-webkit-box-orient: initial;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	max-width: 100%;
	margin: 0;
	overflow: visible;
	color: var(--lmsc-lp-text);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.4;
	white-space: normal;
	text-overflow: clip;
	overflow-wrap: anywhere;
}

.lmsc-lp-status-badge,
.lmsc-lp-optional-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 3px 9px;
	border: 1px solid var(--lmsc-lp-available);
	border-radius: 999px;
	background: var(--lmsc-lp-available-bg);
	color: var(--lmsc-lp-available);
	font-size: .7rem;
	font-weight: 650;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: anywhere;
}

.lmsc-lp-optional-badge {
	border-color: var(--lmsc-lp-border);
	background: var(--lmsc-lp-surface-subtle);
	color: var(--lmsc-lp-muted);
}

.lmsc-lp-step-counts {
	max-width: 100%;
	color: var(--lmsc-lp-muted);
	overflow-wrap: anywhere;
}

.lmsc-lp-step-duration,
.lmsc-lp-step-progress {
	color: var(--lmsc-lp-muted);
	font-size: .72rem;
	font-weight: 650;
	line-height: 1.35;
}

.lmsc-lp-node-meta {
	margin-block-start: 6px;
	color: var(--lmsc-lp-muted);
	font-size: .76rem;
	font-weight: 550;
	line-height: 1.4;
}

.lmsc-lp-node-media {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--lmsc-lp-surface-subtle);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 10px;
	box-shadow: none;
	color: var(--lmsc-lp-muted);
}

.lmsc-lp-node-media-fallback,
.lmsc-lp-node-media-fallback svg {
	display: block;
	width: 24px;
	height: 24px;
}

.lmsc-lp-node-thumb,
.lmsc-lp-ms-card .lmsc-lp-node-thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--lmsc-lp-surface-subtle);
	border: 0;
	border-radius: inherit;
	box-shadow: none;
}

.lmsc-lp-node-thumb[hidden] {
	display: none !important;
}

.lmsc-lp-node-details {
	margin-block-start: 8px;
	border-block-start: 1px solid var(--lmsc-lp-border);
}

.lmsc-lp-node-details-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding-block: 8px 0;
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--lmsc-lp-link);
	font-family: inherit;
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
	list-style: none;
}

.lmsc-lp-node-details-toggle::-webkit-details-marker {
	display: none;
}

.lmsc-lp-node-details-toggle svg {
	flex: 0 0 auto;
	transition: transform .18s ease;
}

.lmsc-lp-node-details-less {
	display: none;
}

.lmsc-lp-node-details[open] .lmsc-lp-node-details-more {
	display: none;
}

.lmsc-lp-node-details[open] .lmsc-lp-node-details-less {
	display: inline;
}

.lmsc-lp-node-details[open] .lmsc-lp-node-details-toggle svg {
	transform: rotate(180deg);
}

.lmsc-lp-node-details-panel {
	padding-block-start: 2px;
	color: var(--lmsc-lp-muted);
	font-size: .75rem;
	line-height: 1.5;
}

.lmsc-lp-node-detail-meta,
.lmsc-lp-milestone-desc {
	margin: 8px 0 0;
	overflow-wrap: anywhere;
}

/* Milestone steps act as calm stage separators without introducing a second
   renderer or changing the ordered-list reading sequence. */
.lmsc-lp-node--type-milestone .lmsc-lp-node-card {
	border-inline-start-width: 1px;
	border-block-start: 3px solid var(--lmsc-lp-path-accent);
}

.lmsc-lp-node--type-milestone .lmsc-lp-node-media {
	background: color-mix(in srgb, var(--lmsc-lp-path-accent) 10%, var(--lmsc-lp-surface));
	border-color: color-mix(in srgb, var(--lmsc-lp-path-accent) 38%, var(--lmsc-lp-border));
	color: var(--lmsc-lp-path-accent);
}

.lmsc-lp-node--type-milestone .lmsc-lp-node-title {
	font-size: 1rem;
}

.lmsc-lp-node--available .lmsc-lp-node-circle {
	background: var(--lmsc-lp-available-bg) !important;
	border-color: var(--lmsc-lp-available);
	color: var(--lmsc-lp-available) !important;
}

.lmsc-lp-node--available .lmsc-lp-node-card {
	background: var(--lmsc-lp-surface);
	border-color: var(--lmsc-lp-border);
	border-inline-start-color: var(--lmsc-lp-available);
}

.lmsc-lp-node--available .lmsc-lp-status-badge {
	background: var(--lmsc-lp-available-bg);
	border-color: var(--lmsc-lp-available);
	color: var(--lmsc-lp-available);
}

.lmsc-lp-node--completed .lmsc-lp-node-circle,
.lmsc-lp-node--completed .lmsc-lp-cpt-circle,
.lmsc-lp-node--completed .lmsc-lp-ms-marker,
.lmsc-lp-node--completed .lmsc-lp-gx-planet {
	background: var(--lmsc-lp-completed-marker) !important;
	border-color: var(--lmsc-lp-completed-marker-border);
	box-shadow: none !important;
	color: var(--lmsc-lp-completed-marker-fg) !important;
}

.lmsc-lp-node--completed .lmsc-lp-node-card,
.lmsc-lp-cpt-card.lmsc-lp-node--completed,
.lmsc-lp-node--completed .lmsc-lp-ms-card,
.lmsc-lp-node--completed .lmsc-lp-gx-info {
	background: var(--lmsc-lp-surface);
	border-color: var(--lmsc-lp-border);
	border-inline-start-color: var(--lmsc-lp-completed);
}

.lmsc-lp-node--completed .lmsc-lp-status-badge {
	background: var(--lmsc-lp-completed-bg);
	border-color: var(--lmsc-lp-completed);
	color: var(--lmsc-lp-completed);
}

.lmsc-lp-node--in-progress .lmsc-lp-node-circle,
.lmsc-lp-node--active .lmsc-lp-node-circle,
.lmsc-lp-node--in-progress .lmsc-lp-cpt-circle,
.lmsc-lp-node--active .lmsc-lp-cpt-circle,
.lmsc-lp-node--in-progress .lmsc-lp-ms-marker,
.lmsc-lp-node--active .lmsc-lp-ms-marker,
.lmsc-lp-node--in-progress .lmsc-lp-gx-planet,
.lmsc-lp-node--active .lmsc-lp-gx-planet {
	background: var(--lmsc-lp-current-marker) !important;
	border-color: var(--lmsc-lp-current-marker);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lmsc-lp-current-marker) 18%, transparent) !important;
	color: var(--lmsc-lp-current-marker-fg) !important;
	animation: none !important;
}

.lmsc-lp-node--in-progress .lmsc-lp-node-card,
.lmsc-lp-node--active .lmsc-lp-node-card,
.lmsc-lp-cpt-card.lmsc-lp-node--in-progress,
.lmsc-lp-cpt-card.lmsc-lp-node--active,
.lmsc-lp-node--in-progress .lmsc-lp-ms-card,
.lmsc-lp-node--active .lmsc-lp-ms-card,
.lmsc-lp-node--in-progress .lmsc-lp-gx-info,
.lmsc-lp-node--active .lmsc-lp-gx-info {
	background: var(--lmsc-lp-surface);
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-current) !important;
	box-shadow: 0 0 0 1px var(--lmsc-lp-current) !important;
}

.lmsc-lp-node--in-progress .lmsc-lp-status-badge,
.lmsc-lp-node--active .lmsc-lp-status-badge {
	background: var(--lmsc-lp-current-bg);
	border-color: var(--lmsc-lp-current);
	color: var(--lmsc-lp-current);
}

.lmsc-lp-node--access-required .lmsc-lp-node-circle,
.lmsc-lp-node--access-required .lmsc-lp-cpt-circle,
.lmsc-lp-node--access-required .lmsc-lp-ms-marker,
.lmsc-lp-node--access-required .lmsc-lp-gx-planet {
	background: var(--lmsc-lp-access-bg) !important;
	border-color: var(--lmsc-lp-access);
	color: var(--lmsc-lp-access) !important;
}

.lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) .lmsc-lp-node-card,
.lmsc-lp-cpt-card.lmsc-lp-node--access-required,
.lmsc-lp-node--access-required .lmsc-lp-ms-card,
.lmsc-lp-node--access-required .lmsc-lp-gx-info {
	background: var(--lmsc-lp-surface);
	border-color: var(--lmsc-lp-border);
	border-inline-start-color: var(--lmsc-lp-access);
}

.lmsc-lp-node--access-required .lmsc-lp-status-badge {
	background: var(--lmsc-lp-access-bg);
	border-color: var(--lmsc-lp-access);
	color: var(--lmsc-lp-access);
}

.lmsc-lp-node--locked,
.lmsc-lp-cpt-card.lmsc-lp-node--locked,
.lmsc-lp-gx-node.lmsc-lp-node--locked,
.lmsc-lp-ms-node.lmsc-lp-node--locked {
	opacity: 1;
}

.lmsc-lp-node--locked .lmsc-lp-node-circle,
.lmsc-lp-node--locked .lmsc-lp-cpt-circle,
.lmsc-lp-node--locked .lmsc-lp-ms-marker,
.lmsc-lp-node--locked .lmsc-lp-gx-planet {
	background: var(--lmsc-lp-locked-bg) !important;
	border-color: var(--lmsc-lp-locked);
	color: var(--lmsc-lp-locked) !important;
	opacity: 1;
}

.lmsc-lp-node--locked .lmsc-lp-node-card,
.lmsc-lp-cpt-card.lmsc-lp-node--locked,
.lmsc-lp-node--locked .lmsc-lp-ms-card,
.lmsc-lp-node--locked .lmsc-lp-gx-info {
	background: var(--lmsc-lp-locked-bg);
	border-color: var(--lmsc-lp-border);
	border-inline-start-color: var(--lmsc-lp-locked);
	opacity: 1;
}

.lmsc-lp-node--locked .lmsc-lp-status-badge {
	background: var(--lmsc-lp-locked-bg);
	border-color: var(--lmsc-lp-locked);
	color: var(--lmsc-lp-locked);
}

/* Older dark-skin rules use important glass backgrounds. Keep the canonical
   semantic surfaces authoritative in that mode as well. */
.lmsc-dash--dark .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node-card {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
}

.lmsc-dash--dark .lmsc-lp-node--completed .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node--completed .lmsc-lp-node-card {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-completed) !important;
}

.lmsc-dash--dark .lmsc-lp-node--in-progress .lmsc-lp-node-card,
.lmsc-dash--dark .lmsc-lp-node--active .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node--in-progress .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node--active .lmsc-lp-node-card {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-current) !important;
	box-shadow: 0 0 0 1px var(--lmsc-lp-current) !important;
}

.lmsc-dash--dark .lmsc-lp-node--available:not(.lmsc-lp-node--active) .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node--available:not(.lmsc-lp-node--active) .lmsc-lp-node-card {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-available) !important;
}

.lmsc-dash--dark .lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node--access-required:not(.lmsc-lp-node--locked) .lmsc-lp-node-card {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-access) !important;
}

.lmsc-dash--dark .lmsc-lp-node--locked .lmsc-lp-node-card,
.lmsc-dash[data-skin="midnight"] .lmsc-lp-node--locked .lmsc-lp-node-card {
	background: var(--lmsc-lp-locked-bg) !important;
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-locked) !important;
}

.lmsc-lp-badge-done {
	background: var(--lmsc-lp-completed-bg);
	border-color: var(--lmsc-lp-completed);
	color: var(--lmsc-lp-completed);
}

.lmsc-lp-badge-progress {
	background: var(--lmsc-lp-current-bg);
	border-color: var(--lmsc-lp-current);
	color: var(--lmsc-lp-current);
}

.lmsc-lp-badge-avail {
	background: var(--lmsc-lp-available-bg);
	border-color: var(--lmsc-lp-available);
	color: var(--lmsc-lp-available);
}

.lmsc-lp-badge-locked {
	background: var(--lmsc-lp-locked-bg);
	border-color: var(--lmsc-lp-locked);
	color: var(--lmsc-lp-locked);
}

.lmsc-lp-node--access-required .lmsc-lp-badge-locked,
.lmsc-lp-node--access-required .lmsc-lp-badge-avail {
	background: var(--lmsc-lp-access-bg);
	border-color: var(--lmsc-lp-access);
	color: var(--lmsc-lp-access);
}

.lmsc-lp-node-prereq,
.lmsc-lp-sequence-gate,
.lmsc-lp-access-gate {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-block-start: 8px;
	padding: 7px 9px;
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 8px;
	background: var(--lmsc-lp-surface-subtle);
	color: var(--lmsc-lp-muted);
	font-size: .75rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.lmsc-lp-gates {
	display: grid;
	gap: 6px;
	margin-block-start: 8px;
}

.lmsc-lp-access-gate,
.lmsc-lp-node--access-required .lmsc-lp-node-prereq {
	background: var(--lmsc-lp-access-bg);
	border-color: var(--lmsc-lp-access);
	color: var(--lmsc-lp-access);
}

.lmsc-lp-node-prereq strong,
.lmsc-lp-sequence-gate strong,
.lmsc-lp-access-gate strong {
	color: inherit;
}

.lmsc-lp-you-are-here {
	background: var(--lmsc-lp-action-bg);
	border: 1px solid var(--lmsc-lp-action-border);
	box-shadow: 0 3px 10px rgba(15, 23, 42, .16);
	color: var(--lmsc-lp-action-fg);
	animation: none;
}

.lmsc-lp-you-are-here::after {
	border-top-color: var(--lmsc-lp-action-bg);
	filter: none;
}

.lmsc-lp-yah-dot,
.lmsc-lp-milestone-marker,
.lmsc-lp-connector line,
.lmsc-lp-gx-orbit::before,
.lmsc-lp-gx-orbit::after,
.lmsc-lp-gx-planet {
	animation: none !important;
}

.lmsc-lp-node-action[aria-disabled="true"],
.lmsc-lp-node-action:disabled,
.lmsc-lp-rh-action[aria-disabled="true"],
.lmsc-lp-rh-action:disabled {
	background: var(--lmsc-lp-locked-bg) !important;
	border-color: var(--lmsc-lp-locked) !important;
	color: var(--lmsc-lp-locked) !important;
	cursor: not-allowed;
	transform: none;
}

/* A pending network mutation is busy, not locked. Keep the action's semantic
   color and wait cursor while the native disabled state prevents duplicates. */
.lmsc-lp-node-action[data-loading="true"],
.lmsc-lp-rh-action[data-loading="true"],
.lmsc-lp-milestone-btn[data-loading="true"] {
	background: var(--lmsc-lp-action-bg) !important;
	border-color: var(--lmsc-lp-action-border) !important;
	color: var(--lmsc-lp-action-fg) !important;
	cursor: wait;
	opacity: .88;
	transform: none;
}

/* Canonical DOM adapters for retained desktop presentations. All variants use
   the same state/card structure; only geometry changes. */
.lmsc-lp-nodes--snake {
	--lmsc-lp-road-lane: 128px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--lmsc-lp-road-lane) minmax(0, 1fr);
	align-items: stretch;
	gap: 24px 0;
	max-width: 1040px;
	margin-inline: auto;
	padding: 24px 8px 32px !important;
	z-index: 1;
}

.lmsc-lp-nodes--snake::before {
	content: '';
	display: block;
	position: absolute;
	left: auto;
	right: auto;
	inset-block: 30px;
	inset-inline-start: 50%;
	width: 2px;
	background: var(--lmsc-lp-border);
	transform: translateX(-50%);
}

:is(.lmsc-component--learning-path, [data-lmsc-learning-path]):dir(rtl) .lmsc-lp-nodes--snake::before {
	transform: translateX(50%);
}

.lmsc-lp-nodes--snake .lmsc-lp-node {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--lmsc-lp-road-lane) minmax(0, 1fr);
	grid-column: 1 / -1;
	gap: 0;
	max-width: none;
	margin: 0;
}

.lmsc-lp-nodes--snake .lmsc-lp-node:nth-child(odd) .lmsc-lp-node-card {
	grid-column: 1;
	grid-row: 1;
}

.lmsc-lp-nodes--snake .lmsc-lp-node:nth-child(even) .lmsc-lp-node-card {
	grid-column: 3;
	grid-row: 1;
}

.lmsc-lp-nodes--snake .lmsc-lp-node-circle {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	position: relative;
	z-index: 3;
	transform: translateX(var(--lmsc-lp-road-shift, 0));
}

.lmsc-lp-nodes--snake .lmsc-lp-node::after {
	display: none;
}

.lmsc-lp-nodes--snake .lmsc-lp-finish {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--lmsc-lp-road-lane) minmax(0, 1fr);
	grid-column: 1 / -1;
	gap: 0;
	max-width: none;
	min-height: 66px;
	padding: 0;
}

.lmsc-lp-nodes--snake .lmsc-lp-finish-marker {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	z-index: 3;
	transform: translateX(var(--lmsc-lp-road-shift, 0));
}

.lmsc-lp-nodes--snake .lmsc-lp-finish--start .lmsc-lp-finish-copy {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	margin-inline-end: 14px;
	text-align: end;
}

.lmsc-lp-nodes--snake .lmsc-lp-finish--end .lmsc-lp-finish-copy {
	grid-column: 3;
	grid-row: 1;
	justify-self: start;
	margin-inline-start: 14px;
}

/* Signature ZigZag Road. The semantic ordered list remains untouched; the
   renderer measures its real node centres and mounts this decorative SVG as a
   sibling, so long titles and translated actions can change height safely. */
.lmsc-lp-path {
	position: relative;
}

.lmsc-lp-winding-road {
	position: absolute;
	display: block;
	max-width: none;
	overflow: visible;
	opacity: 1;
	animation: none;
	pointer-events: none;
	z-index: 0;
}

.lmsc-lp-winding-road[hidden] {
	display: none !important;
}

.lmsc-lp-path--winding-road .lmsc-lp-nodes--snake::before {
	display: none;
}

.lmsc-lp-path--winding-road .lmsc-lp-road-edge {
	stroke: color-mix(in srgb, var(--lmsc-lp-path-accent) 28%, var(--lmsc-lp-surface));
	stroke-width: 14;
	filter: none;
}

.lmsc-lp-path--winding-road .lmsc-lp-road-surface {
	stroke: color-mix(in srgb, var(--lmsc-lp-path-accent) 72%, var(--lmsc-lp-surface));
	stroke-width: 10;
}

.lmsc-lp-path--winding-road .lmsc-lp-road-dash {
	stroke: var(--lmsc-lp-surface);
	stroke-width: 1.5;
	stroke-dasharray: 4 9;
}

.lmsc-lp-path--winding-road .lmsc-lp-nodes--snake .lmsc-lp-node-card {
	position: relative;
	z-index: 2;
}

.lmsc-lp-nodes--straight,
.lmsc-lp-nodes--timeline,
.lmsc-lp-nodes--milestone {
	display: flex;
	align-items: center;
	padding-inline: 8px;
}

.lmsc-lp-nodes--straight::before,
.lmsc-lp-nodes--timeline::before,
.lmsc-lp-nodes--milestone::before {
	content: '';
	display: block;
	position: absolute;
	left: auto;
	right: auto;
	inset-block: 28px;
	inset-inline-start: calc(50% - 338px);
	width: 2px;
	background: var(--lmsc-lp-border);
	border: 0;
	border-radius: 999px;
	transform: none;
}

.lmsc-lp-nodes--straight .lmsc-lp-node,
.lmsc-lp-nodes--timeline .lmsc-lp-node,
.lmsc-lp-nodes--milestone .lmsc-lp-node {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	width: 100%;
	max-width: 720px;
	margin: 0 0 14px;
	padding: 0;
}

.lmsc-lp-nodes--straight .lmsc-lp-node-circle,
.lmsc-lp-nodes--timeline .lmsc-lp-node-circle,
.lmsc-lp-nodes--milestone .lmsc-lp-node-circle {
	grid-column: 1;
	position: relative;
	z-index: 2;
}

.lmsc-lp-nodes--straight .lmsc-lp-node-card,
.lmsc-lp-nodes--timeline .lmsc-lp-node-card,
.lmsc-lp-nodes--milestone .lmsc-lp-node-card {
	grid-column: 2;
	width: 100%;
	max-width: none;
}

.lmsc-lp-nodes--straight .lmsc-lp-finish,
.lmsc-lp-nodes--timeline .lmsc-lp-finish,
.lmsc-lp-nodes--milestone .lmsc-lp-finish {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 720px;
}

.lmsc-lp-nodes--straight .lmsc-lp-finish-marker,
.lmsc-lp-nodes--timeline .lmsc-lp-finish-marker,
.lmsc-lp-nodes--milestone .lmsc-lp-finish-marker {
	grid-column: 1;
	justify-self: center;
	z-index: 2;
}

.lmsc-lp-nodes--straight .lmsc-lp-finish-copy,
.lmsc-lp-nodes--timeline .lmsc-lp-finish-copy,
.lmsc-lp-nodes--milestone .lmsc-lp-finish-copy {
	grid-column: 2;
}

.lmsc-lp-nodes--compact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 14px;
}

.lmsc-lp-nodes--compact .lmsc-lp-node {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.lmsc-lp-nodes--compact .lmsc-lp-finish {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: none;
	padding-block-start: 8px;
}

.lmsc-lp-nodes--galaxy {
	background: var(--lmsc-lp-surface-subtle);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 16px;
}

.lmsc-lp-nodes--galaxy::before,
.lmsc-lp-nodes--galaxy::after {
	display: none;
	content: none;
}

/* Retained layout personalities use the same canonical learner state and card
   semantics. Milestone keeps a compact per-step progress rail at every size;
   the more spatial Galaxy and Milestone compositions activate only when the
   component itself has enough room. */
.lmsc-lp-nodes--milestone .lmsc-lp-node-card {
	position: relative;
	overflow: hidden;
	padding-block-end: 20px;
}

.lmsc-lp-nodes--milestone .lmsc-lp-node-card::before,
.lmsc-lp-nodes--milestone .lmsc-lp-node-card::after {
	content: '';
	display: block;
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: 4px;
	border-radius: 999px;
	pointer-events: none;
}

.lmsc-lp-nodes--milestone .lmsc-lp-node-card::before {
	width: 100%;
	background: var(--lmsc-lp-border);
}

.lmsc-lp-nodes--milestone .lmsc-lp-node-card::after {
	width: var(--lmsc-lp-step-progress, 0%);
	max-width: 100%;
	background: var(--lmsc-lp-path-accent);
}

.lmsc-lp-nodes--milestone .lmsc-lp-node--completed .lmsc-lp-node-card::after {
	background: var(--lmsc-lp-completed);
}

@container lmsc-learning-paths (min-width: 901px) {
	.lmsc-lp-nodes--snake .lmsc-lp-node:nth-child(odd) .lmsc-lp-node-card {
		width: calc(100% - 12px);
		justify-self: start;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node:nth-child(even) .lmsc-lp-node-card {
		width: calc(100% - 12px);
		justify-self: end;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node--type-milestone .lmsc-lp-node-card {
		grid-column: 1 / -1 !important;
		grid-row: 1;
		justify-self: center;
		width: min(100%, 680px);
		z-index: 4;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node--type-milestone .lmsc-lp-node-circle {
		opacity: 0;
		pointer-events: none;
	}

	.lmsc-lp-nodes--galaxy {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 18px;
		max-width: 980px;
		margin-inline: auto;
		padding: 28px 30px 52px;
		isolation: isolate;
		background:
			linear-gradient(145deg, color-mix(in srgb, var(--lmsc-lp-path-accent, #6366f1) 7%, var(--lmsc-lp-surface-subtle)), var(--lmsc-lp-surface-subtle) 58%),
			var(--lmsc-lp-surface-subtle);
		border-color: color-mix(in srgb, var(--lmsc-lp-path-accent, #6366f1) 28%, var(--lmsc-lp-border));
		overflow: hidden;
	}

	.lmsc-lp-nodes--galaxy::after {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image:
			radial-gradient(circle at 9% 18%, var(--lmsc-lp-path-accent, #6366f1) 0 2px, transparent 2.5px),
			radial-gradient(circle at 88% 14%, var(--lmsc-lp-path-accent, #6366f1) 0 1.5px, transparent 2px),
			radial-gradient(circle at 18% 79%, var(--lmsc-lp-path-accent, #6366f1) 0 1.5px, transparent 2px),
			radial-gradient(circle at 75% 72%, var(--lmsc-lp-path-accent, #6366f1) 0 2px, transparent 2.5px),
			linear-gradient(115deg, transparent 16%, color-mix(in srgb, var(--lmsc-lp-path-accent, #6366f1) 24%, transparent) 16.2% 16.5%, transparent 16.7% 82%, color-mix(in srgb, var(--lmsc-lp-path-accent, #6366f1) 18%, transparent) 82.2% 82.45%, transparent 82.7%);
		opacity: .72;
		pointer-events: none;
	}

	.lmsc-lp-nodes--galaxy .lmsc-lp-node {
		display: grid;
		grid-template-columns: 38px minmax(0, 1fr);
		align-items: start;
		gap: 12px;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}

	.lmsc-lp-nodes--galaxy .lmsc-lp-node:nth-child(even) {
		transform: translateY(24px);
	}

	.lmsc-lp-nodes--galaxy .lmsc-lp-node:nth-child(3n) {
		grid-column: 1 / -1;
		justify-self: center;
		width: min(76%, 720px);
	}

	.lmsc-lp-nodes--galaxy .lmsc-lp-node-circle {
		grid-column: 1;
		position: relative;
		z-index: 2;
		outline: 2px solid color-mix(in srgb, var(--lmsc-lp-path-accent, #6366f1) 58%, var(--lmsc-lp-border));
		outline-offset: 3px;
	}

	.lmsc-lp-nodes--galaxy .lmsc-lp-node-card {
		grid-column: 2;
		width: 100%;
		max-width: none;
	}

	.lmsc-lp-nodes--galaxy .lmsc-lp-finish {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		max-width: none;
		margin-block-start: 26px;
		padding: 4px 0 0;
		position: relative;
		z-index: 1;
	}

	.lmsc-lp-nodes--milestone {
		--lmsc-lp-milestone-lane: 96px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		width: 100%;
		max-width: 1040px;
		margin-inline: auto !important;
		padding: 24px 14px 32px;
		isolation: isolate;
	}

	.lmsc-lp-nodes--milestone::before {
		display: none;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--lmsc-lp-milestone-lane) minmax(0, 1fr);
		align-items: start;
		gap: 0;
		width: 100%;
		max-width: none;
		min-height: 92px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node-circle {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		justify-self: center;
		width: 42px;
		height: 42px;
		margin: 0;
		border-width: 3px;
		position: relative;
		z-index: 2;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node-card {
		grid-row: 1;
		grid-template-columns: 48px minmax(0, 1fr);
		align-items: start;
		width: 100%;
		max-width: none;
		min-width: 0;
		min-height: 92px;
		border-radius: 14px;
		position: relative;
		z-index: 1;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node:nth-child(odd) .lmsc-lp-node-card {
		grid-column: 1;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node:nth-child(even) .lmsc-lp-node-card {
		grid-column: 3;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node-info {
		grid-column: 2;
		grid-row: 1;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node-action {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-block-start: 10px;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node::before,
	.lmsc-lp-nodes--milestone .lmsc-lp-node:not(:last-child)::after {
		content: '';
		position: absolute;
		background: color-mix(in srgb, var(--lmsc-lp-path-accent) 30%, var(--lmsc-lp-border));
		border-radius: 999px;
		pointer-events: none;
		z-index: 0;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node::before {
		inset-block-start: 20px;
		inset-inline-start: calc(50% - (var(--lmsc-lp-milestone-lane) / 2));
		width: calc((var(--lmsc-lp-milestone-lane) - 42px) / 2);
		height: 2px;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node:nth-child(even)::before {
		inset-inline-start: calc(50% + 21px);
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node:not(:last-child)::after {
		inset-block-start: 21px;
		inset-block-end: -45px;
		inset-inline-start: calc(50% - 1px);
		width: 2px;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-finish {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--lmsc-lp-milestone-lane) minmax(0, 1fr);
		align-items: start;
		gap: 0;
		width: 100%;
		max-width: none;
		min-height: 76px;
		padding: 0;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-finish-marker {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		z-index: 2;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-finish-copy {
		grid-column: 2;
		grid-row: 2;
		justify-self: center;
		margin-block-start: 9px;
		text-align: center;
	}
}

/* The canonical card is informational; only its real nested action is
   interactive. Neutralize the old card-scale treatment so an unavailable
   step never looks clickable. */
.lmsc-lp-node,
.lmsc-lp-node[data-access-action="unavailable"],
.lmsc-lp-cpt-card:not([role="link"]),
.lmsc-lp-cpt-card[data-access-action="unavailable"] {
	cursor: default !important;
}

.lmsc-lp-node .lmsc-lp-node-card {
	cursor: default !important;
}

.lmsc-lp-node .lmsc-lp-node-card:hover,
.lmsc-lp-node[data-access-action="unavailable"] .lmsc-lp-node-card:hover,
.lmsc-lp-cpt-card:not([role="link"]):hover,
.lmsc-lp-cpt-card[data-access-action="unavailable"]:hover,
.lmsc-lp-gx-node:not([role="link"]):hover .lmsc-lp-gx-info,
.lmsc-lp-ms-node:not([role="link"]):hover .lmsc-lp-ms-card {
	transform: none !important;
	border-color: var(--lmsc-lp-border) !important;
	border-inline-start-color: var(--lmsc-lp-available) !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

.lmsc-lp-node:hover .lmsc-lp-node-thumb {
	transform: none !important;
}

.lmsc-lp-node--completed .lmsc-lp-node-card:hover {
	border-inline-start-color: var(--lmsc-lp-completed) !important;
}

.lmsc-lp-node--in-progress .lmsc-lp-node-card:hover,
.lmsc-lp-node--active .lmsc-lp-node-card:hover {
	border-inline-start-color: var(--lmsc-lp-current) !important;
	box-shadow: 0 0 0 1px var(--lmsc-lp-current) !important;
}

.lmsc-lp-node--access-required .lmsc-lp-node-card:hover {
	border-inline-start-color: var(--lmsc-lp-access) !important;
}

.lmsc-lp-node--locked .lmsc-lp-node-card:hover {
	border-inline-start-color: var(--lmsc-lp-locked) !important;
}

.lmsc-lp-node:not([role="link"]) .lmsc-lp-node-arrow,
.lmsc-lp-node[data-access-action="unavailable"] .lmsc-lp-node-arrow,
.lmsc-lp-node--locked .lmsc-lp-node-arrow,
.lmsc-lp-node--locked .lmsc-lp-node-action,
.lmsc-lp-node[data-access-action="unavailable"] .lmsc-lp-node-action {
	display: none !important;
}

.lmsc-lp-node-arrow {
	color: var(--lmsc-lp-link);
}

.lmsc-lp-node[role="link"]:hover .lmsc-lp-node-arrow {
	transform: translateX(3px);
}

/* Accessible keyboard focus, including elements detached to body. */
.lmsc-lp-select-card:focus-visible,
.lmsc-lp-rec-card:focus-visible,
.lmsc-lp-node[role="link"]:focus-visible,
.lmsc-lp-cpt-card[role="link"]:focus-visible,
.lmsc-lp-rh-title:focus-visible,
.lmsc-lp-back-btn:focus-visible,
.lmsc-lp-enroll-btn:focus-visible,
.lmsc-lp-rh-action:focus-visible,
.lmsc-lp-node-action:focus-visible,
.lmsc-lp-node-details-toggle:focus-visible,
.lmsc-lp-continue-btn:focus-visible,
.lmsc-lp-milestone-btn:focus-visible {
	outline: 3px solid var(--lmsc-lp-focus, #1d4ed8) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 1px var(--lmsc-lp-surface) !important;
	scroll-margin-block: clamp(16px, 8vh, 72px);
}

/* The historic CTA is appended to body. Keep a non-overlay fallback for old
   cached markup; the canonical renderer places its action inside the hero. */
body > .lmsc-lp-continue-cta {
	position: static;
	inset: auto;
	z-index: auto;
	width: min(800px, calc(100% - 32px));
	margin: 20px auto;
	transform: none;
	background: var(--lmsc-lp-surface, #fff);
	border: 1px solid var(--lmsc-lp-border, #d7dee7);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

body > .lmsc-lp-continue-cta.lmsc-lp-continue-cta--visible {
	transform: none;
}

body > .lmsc-lp-continue-cta .lmsc-lp-continue-inner {
	padding-block-end: max(12px, env(safe-area-inset-bottom));
}

/* Narrow canvas: every retained layout becomes the same calm vertical
   timeline. This deliberately uses component width, not browser width. */
@container lmsc-learning-paths (max-width: 900px) {
	.lmsc-lp-select-card {
		grid-template-columns: 48px minmax(0, 1fr);
		align-items: start;
		min-height: 0;
		padding: 16px;
	}

	.lmsc-lp-select-icon {
		width: 48px;
		height: 48px;
	}

	.lmsc-lp-select-cta {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		max-width: none;
		margin-block-start: 8px;
		text-align: start;
	}

	.lmsc-lp-rh {
		grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
		gap: 16px;
		padding: 20px;
		text-align: start;
	}

	.lmsc-lp-rh-cta {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.lmsc-lp-rh-progress {
		width: 100%;
	}

	.lmsc-lp-nodes,
	.lmsc-lp-nodes--snake,
	.lmsc-lp-nodes--straight,
	.lmsc-lp-nodes--timeline,
	.lmsc-lp-nodes--compact,
	.lmsc-lp-nodes--galaxy,
	.lmsc-lp-nodes--milestone {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding: 8px 0 16px;
		background: transparent;
		border-radius: 0;
		overflow: visible;
	}

	.lmsc-lp-nodes::before,
	.lmsc-lp-nodes--snake::before,
	.lmsc-lp-nodes--straight::before,
	.lmsc-lp-nodes--timeline::before,
	.lmsc-lp-nodes--compact::before,
	.lmsc-lp-nodes--galaxy::before,
	.lmsc-lp-nodes--milestone::before {
		content: '';
		display: block;
		position: absolute;
		left: auto;
		right: auto;
		inset-block: 20px 44px;
		inset-inline-start: 18px;
		inset-inline-end: auto;
		width: 2px;
		height: auto;
		background: var(--lmsc-lp-border);
		border: 0;
		border-radius: 999px;
		opacity: 1;
		animation: none;
		transform: none;
	}

	.lmsc-lp-nodes--snake {
		padding-inline: 0 !important;
	}

	.lmsc-lp-nodes::after,
	.lmsc-lp-nodes--galaxy::after {
		display: none;
		content: none;
	}

	.lmsc-lp-winding-road,
	.lmsc-lp-connector,
	.lmsc-lp-gx-connector,
	.lmsc-lp-cpt-arrow,
	.lmsc-lp-cpt-turn,
	.lmsc-lp-ms-line,
	.lmsc-lp-tl-label {
		display: none !important;
	}

	.lmsc-lp-node,
	.lmsc-lp-node--left,
	.lmsc-lp-node--right,
	.lmsc-lp-gx-node,
	.lmsc-lp-ms-node,
	.lmsc-lp-nodes--snake .lmsc-lp-node,
	.lmsc-lp-nodes--straight .lmsc-lp-node,
	.lmsc-lp-nodes--timeline .lmsc-lp-node {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		align-items: start;
		align-self: stretch;
		gap: 12px;
		width: 100%;
		max-width: none;
		min-height: 0;
		margin: 0;
		padding: 8px 0 10px;
		transform: none;
	}

	:is(
		.lmsc-lp-nodes,
		.lmsc-lp-nodes--snake,
		.lmsc-lp-nodes--straight,
		.lmsc-lp-nodes--timeline,
		.lmsc-lp-nodes--compact,
		.lmsc-lp-nodes--galaxy,
		.lmsc-lp-nodes--milestone
	) > .lmsc-lp-finish {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		align-items: center;
		align-self: stretch;
		gap: 12px;
		width: 100%;
		max-width: none;
		min-height: 0;
		margin: 0;
		padding: 8px 0 10px;
		transform: none;
	}

	:is(
		.lmsc-lp-nodes,
		.lmsc-lp-nodes--snake,
		.lmsc-lp-nodes--straight,
		.lmsc-lp-nodes--timeline,
		.lmsc-lp-nodes--compact,
		.lmsc-lp-nodes--galaxy,
		.lmsc-lp-nodes--milestone
	) > .lmsc-lp-finish .lmsc-lp-finish-marker {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		justify-self: center;
		margin: 0;
		outline: 0;
		transform: none;
	}

	:is(
		.lmsc-lp-nodes,
		.lmsc-lp-nodes--snake,
		.lmsc-lp-nodes--straight,
		.lmsc-lp-nodes--timeline,
		.lmsc-lp-nodes--compact,
		.lmsc-lp-nodes--galaxy,
		.lmsc-lp-nodes--milestone
	) > .lmsc-lp-finish .lmsc-lp-finish-copy {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		margin: 0;
		text-align: start;
	}

	.lmsc-lp-node-circle,
	.lmsc-lp-gx-orbit,
	.lmsc-lp-ms-marker {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		z-index: 2;
		margin: 0;
	}

	/* Desktop's alternating default-road selectors carry nth-child specificity.
	   Reset both sides explicitly so they cannot create implicit third columns
	   or collapse an odd card into the 46px marker track on a narrow canvas. */
	.lmsc-lp-nodes--snake .lmsc-lp-node:nth-child(odd) .lmsc-lp-node-card,
	.lmsc-lp-nodes--snake .lmsc-lp-node:nth-child(even) .lmsc-lp-node-card,
	.lmsc-lp-nodes--snake .lmsc-lp-node .lmsc-lp-node-card {
		grid-column: 2;
		grid-row: 1;
	}

	.lmsc-lp-nodes--snake .lmsc-lp-node .lmsc-lp-node-circle {
		grid-column: 1;
		grid-row: 1;
		transform: none;
	}

	.lmsc-lp-node-card,
	.lmsc-lp-gx-info,
	.lmsc-lp-ms-card,
	.lmsc-lp-nodes--snake .lmsc-lp-node-card,
	.lmsc-lp-nodes--straight .lmsc-lp-node-card,
	.lmsc-lp-nodes--timeline .lmsc-lp-node-card {
		grid-column: 2;
		width: 100%;
		max-width: none;
		margin: 0;
		text-align: start;
	}

	.lmsc-lp-node-card {
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: start;
	}

	.lmsc-lp-node-media {
		width: 44px;
		height: 44px;
	}

	.lmsc-lp-node-action {
		grid-column: 2;
		grid-row: auto;
		justify-self: start;
		margin-inline-start: 0;
	}

	.lmsc-lp-gx-info {
		margin-inline-start: 0;
	}

	.lmsc-lp-gx-orbit::before,
	.lmsc-lp-gx-orbit::after,
	.lmsc-lp-gx-shine {
		display: none;
		animation: none;
	}

	.lmsc-lp-cpt-row,
	.lmsc-lp-cpt-row--rtl {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
		padding: 0;
	}

	.lmsc-lp-cpt-card,
	.lmsc-lp-nodes--compact .lmsc-lp-cpt-card {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
		min-width: 0;
	}
}

@container lmsc-learning-paths (max-width: 520px) {
	.lmsc-lp-rh {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px;
		margin-block-end: 14px;
	}

	.lmsc-lp-rh-title {
		font-size: 1.08rem;
		line-height: 1.25;
	}

	.lmsc-lp-rh-progress {
		grid-template-columns: minmax(0, 1fr);
		text-align: start;
	}

	.lmsc-lp-rh-cta {
		grid-column: auto;
	}

	.lmsc-lp-enroll-cta,
	.lmsc-lp-enroll-btn,
	.lmsc-lp-rh-action {
		width: 100%;
	}

	.lmsc-lp-enroll-btn,
	.lmsc-lp-rh-action,
	.lmsc-lp-node-action,
	.lmsc-lp-continue-btn,
	.lmsc-lp-milestone-btn {
		min-height: 44px;
		padding: 8px 12px;
		font-size: .78rem;
	}

	.lmsc-lp-nodes,
	.lmsc-lp-nodes--snake,
	.lmsc-lp-nodes--straight,
	.lmsc-lp-nodes--timeline,
	.lmsc-lp-nodes--compact,
	.lmsc-lp-nodes--galaxy,
	.lmsc-lp-nodes--milestone {
		padding-block: 4px calc(32px + env(safe-area-inset-bottom));
	}

	.lmsc-lp-nodes::before,
	.lmsc-lp-nodes--snake::before,
	.lmsc-lp-nodes--straight::before,
	.lmsc-lp-nodes--timeline::before,
	.lmsc-lp-nodes--compact::before,
	.lmsc-lp-nodes--galaxy::before,
	.lmsc-lp-nodes--milestone::before {
		inset-block: 16px calc(57px + env(safe-area-inset-bottom));
		inset-inline-start: 18px;
	}

	:is(
		.lmsc-lp-nodes,
		.lmsc-lp-nodes--snake,
		.lmsc-lp-nodes--straight,
		.lmsc-lp-nodes--timeline,
		.lmsc-lp-nodes--compact,
		.lmsc-lp-nodes--galaxy,
		.lmsc-lp-nodes--milestone
	) > .lmsc-lp-node {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 10px;
		padding-block: 6px 7px;
	}

	.lmsc-lp-node-circle,
	.lmsc-lp-gx-orbit,
	.lmsc-lp-ms-marker,
	.lmsc-lp-cpt-circle,
	.lmsc-lp-gx-planet {
		width: 36px;
		height: 36px;
		font-size: .78rem;
	}

	.lmsc-lp-finish .lmsc-lp-finish-marker {
		width: 36px;
		height: 36px;
	}

	.lmsc-lp-finish-icon {
		width: 20px;
		height: 20px;
	}

	.lmsc-lp-finish-copy {
		max-width: 100%;
		padding: 0;
	}

	.lmsc-lp-finish-copy strong {
		font-size: .8rem;
	}

	.lmsc-lp-finish-check {
		width: 16px;
		height: 16px;
	}

	.lmsc-lp-node-card,
	.lmsc-lp-cpt-card,
	.lmsc-lp-ms-card,
	.lmsc-lp-gx-info {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 8px;
		min-height: 0;
		padding: 12px;
	}

	.lmsc-lp-roadmap .lmsc-lp-node-title,
	.lmsc-component--learning-path .lmsc-lp-node-title,
	[data-lmsc-learning-path] .lmsc-lp-node-title {
		font-size: .88rem;
		line-height: 1.35;
	}

	.lmsc-lp-node-info {
		grid-column: 2;
	}

	.lmsc-lp-node-action {
		grid-column: 1 / -1;
		grid-row: auto;
		width: 100%;
		margin-block-start: 2px;
		margin-inline-start: 0;
	}

	.lmsc-lp-node-media {
		width: 40px;
		height: 40px;
	}

	.lmsc-lp-node-details-toggle {
		min-height: 44px;
		padding-block: 7px;
		font-size: .7rem;
	}

	.lmsc-lp-node-meta {
		font-size: .7rem;
		gap: 5px;
		margin-block-start: 5px;
	}

	.lmsc-lp-status-badge,
	.lmsc-lp-optional-badge,
	.lmsc-lp-meta-badge,
	.lmsc-lp-badge-type,
	.lmsc-lp-badge-done,
	.lmsc-lp-badge-progress,
	.lmsc-lp-badge-avail,
	.lmsc-lp-badge-locked {
		padding: 2px 7px;
		font-size: .66rem;
	}

	.lmsc-lp-node-prereq,
	.lmsc-lp-sequence-gate,
	.lmsc-lp-access-gate {
		margin-block-start: 6px;
		padding: 6px 8px;
		font-size: .7rem;
	}

	.lmsc-lp-celebration-inner {
		align-items: center;
		flex-direction: column;
		padding: 14px;
		text-align: center;
	}
}

/* Completion confirmation is inline and container-bound. It cannot cover
   roadmap actions, depend on a viewport breakpoint, or overflow a narrow
   sidebar/shortcode canvas. */
:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-celebration-toast {
	position: relative;
	inset: auto;
	display: flex;
	justify-content: center;
	width: min(100%, 560px);
	max-width: 100%;
	margin: 16px auto 0;
	opacity: 0;
	transform: translateY(8px);
	z-index: 1;
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-celebration-toast--visible {
	opacity: 1;
	transform: none;
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-celebration-inner {
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
	white-space: normal;
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-celebration-inner > div {
	min-width: 0;
}

/* Reserve the phone safe-area for Dashboard Pro's bottom navigation. The path
   CTA itself is inline, so no second fixed layer can cover either surface. */
@media (max-width: 768px) {
	/* Let the document own vertical scrolling. Several themes and embedded
	   builders constrain widget height; a nested overflow:hidden canvas then
	   clips the final roadmap card and prevents touch scrolling to it. */
	.lmsc-dash.lmsc-dash--learning-paths-active {
		height: auto !important;
		max-height: none !important;
		min-height: 100vh;
		min-height: 100dvh;
		overflow-x: hidden !important;
		overflow-x: clip !important;
		overflow-y: visible !important;
		touch-action: pan-y pinch-zoom;
	}

	.lmsc-dash--learning-paths-active .lmsc-dash__main,
	.lmsc-dash--learning-paths-active .lmsc-dash__content,
	.lmsc-dash--learning-paths-active .lmsc-dash__panel[data-panel="learning-paths"],
	.lmsc-tab-panel[data-tab="learning-paths"],
	.lmsc-component--learning-path,
	[data-lmsc-learning-path] {
		height: auto !important;
		max-height: none !important;
		overflow-y: visible !important;
		touch-action: pan-y pinch-zoom;
	}

	.lmsc-dash--learning-paths-active .lmsc-dash__main {
		overflow-x: hidden !important;
		overflow-x: clip !important;
	}

	.lmsc-tab-panel[data-tab="learning-paths"] {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/* Motion preference applies to the real dashboard root and to the historic
   detached CTA. JS may still set inline transition values, so these rules are
   intentionally important. */
@media (prefers-reduced-motion: reduce) {
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-selector,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-selector *,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-select-card,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-select-card *,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-rh,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-rh *,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-back-btn,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-rec-card,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-progress-fill,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-node,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-node *,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-node *::before,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-node *::after,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-finish,
	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-finish *,
	.lmsc-lp-continue-cta,
	.lmsc-lp-continue-cta *,
	.lmsc-lp-celebration-toast,
	.lmsc-lp-celebration-toast * {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) .lmsc-lp-node {
		opacity: 1 !important;
		transform: none !important;
	}

	:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) :is(
		.lmsc-lp-select-card,
		.lmsc-lp-rec-card,
		.lmsc-lp-back-btn,
		.lmsc-lp-enroll-btn,
		.lmsc-lp-rh-action,
		.lmsc-lp-node-action,
		.lmsc-lp-milestone-btn
	):hover {
		transform: none !important;
	}

	.lmsc-lp-confetti-canvas {
		display: none !important;
	}
}

@media (forced-colors: active) {
	.lmsc-lp-select-card,
	.lmsc-lp-node-card,
	.lmsc-lp-cpt-card,
	.lmsc-lp-ms-card,
	.lmsc-lp-gx-info,
	.lmsc-lp-node-media,
	.lmsc-lp-status-badge,
	.lmsc-lp-optional-badge,
	.lmsc-lp-finish-copy,
	.lmsc-lp-finish-check,
	.lmsc-lp-node-circle,
	.lmsc-lp-cpt-circle,
	.lmsc-lp-ms-marker,
	.lmsc-lp-gx-planet {
		forced-color-adjust: auto;
		border-color: CanvasText;
	}

	.lmsc-lp-finish-marker,
	.lmsc-lp-finish-copy,
	.lmsc-lp-finish-check {
		background: Canvas !important;
		border-color: CanvasText !important;
		box-shadow: none !important;
		color: CanvasText !important;
	}

	.lmsc-lp-rh-action,
	.lmsc-lp-node-action,
	.lmsc-lp-milestone-btn {
		forced-color-adjust: auto;
		background: ButtonFace;
		border-color: ButtonText;
		color: ButtonText;
	}

	.lmsc-lp-node-details-toggle {
		forced-color-adjust: auto;
		color: LinkText;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node::before,
	.lmsc-lp-nodes--milestone .lmsc-lp-node::after {
		forced-color-adjust: auto;
		background: CanvasText;
	}

	.lmsc-lp-node--locked,
	.lmsc-lp-cpt-card.lmsc-lp-node--locked,
	.lmsc-lp-gx-node.lmsc-lp-node--locked,
	.lmsc-lp-ms-node.lmsc-lp-node--locked {
		opacity: 1;
	}
}

/* ========================================================================== 
   Learning Paths MVP layouts: Focus, Timeline, Snake Road

   These late component-scoped rules are the production contract for the three
   supported layouts. All colors resolve through the active dashboard skin.
   ========================================================================== */

.lmsc-lp-rh-kicker,
.lmsc-lp-focused-eyebrow,
.lmsc-lp-phase-kicker {
	display: block;
	margin-block-end: 7px;
	color: var(--lmsc-lp-path-accent);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.lmsc-lp-rh-description {
	max-width: 56ch;
	margin: 8px 0 0;
	color: var(--lmsc-lp-muted);
	font-size: .82rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.lmsc-lp-rh-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-block-start: 12px;
}

.lmsc-lp-rh-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 28px;
	margin: 0;
	padding: 4px 9px;
	background: var(--lmsc-lp-surface-subtle);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 999px;
	color: var(--lmsc-lp-muted);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.25;
}

.lmsc-lp-rh-progress {
	grid-template-columns: 62px minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
}

.lmsc-lp-rh-ring {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	padding: 5px;
	background: conic-gradient(var(--lmsc-lp-path-accent) var(--lmsc-lp-path-progress), var(--lmsc-lp-border) 0);
	border-radius: 50%;
}

.lmsc-lp-rh-ring > span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--lmsc-lp-surface);
	border-radius: inherit;
	color: var(--lmsc-lp-text);
}

.lmsc-lp-rh-ring strong {
	font-size: .82rem;
	font-weight: 800;
}

.lmsc-lp-rh-progress-copy,
.lmsc-lp-rh-track {
	grid-column: 2;
}

.lmsc-lp-focused-shell {
	display: grid;
	grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(18px, 2.5vw, 30px);
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding: clamp(10px, 1.5vw, 18px);
}

.lmsc-lp-focused-summary {
	position: sticky;
	inset-block-start: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 22px;
	background: linear-gradient(145deg, color-mix(in srgb, var(--lmsc-lp-path-accent) 10%, var(--lmsc-lp-surface)), var(--lmsc-lp-surface) 64%);
	border: 1px solid color-mix(in srgb, var(--lmsc-lp-path-accent) 26%, var(--lmsc-lp-border));
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
	color: var(--lmsc-lp-text);
}

.lmsc-lp-focused-summary-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-block-end: 18px;
	background: var(--lmsc-lp-path-accent);
	border-radius: 12px;
	color: var(--lmsc-lp-path-accent-fg);
}

.lmsc-lp-focused-summary-icon svg {
	width: 24px;
	height: 24px;
}

.lmsc-lp-focused-summary .lmsc-lp-focused-eyebrow {
	margin: 0;
}

.lmsc-lp-focused-percent {
	margin-block-start: 4px;
	color: var(--lmsc-lp-text);
	font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
}

.lmsc-lp-focused-summary > p {
	margin: 8px 0 0;
	color: var(--lmsc-lp-muted);
	font-size: .78rem;
	line-height: 1.55;
}

.lmsc-lp-focused-track {
	width: 100%;
	height: 8px;
	margin-block-start: 18px;
	overflow: hidden;
	background: var(--lmsc-lp-locked-bg);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 999px;
}

.lmsc-lp-focused-track > span {
	display: block;
	height: 100%;
	background: var(--lmsc-lp-path-accent);
	border-radius: inherit;
}

.lmsc-lp-focused-count {
	margin-block-start: 7px;
	color: var(--lmsc-lp-muted);
	font-size: .7rem;
	font-weight: 700;
}

.lmsc-lp-focused-current {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	margin-block-start: 18px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--lmsc-lp-border);
	color: var(--lmsc-lp-text);
	font-size: .74rem;
	line-height: 1.4;
}

.lmsc-lp-focused-current strong {
	color: var(--lmsc-lp-path-accent);
	font-size: .65rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lmsc-lp-focused-content {
	min-width: 0;
	padding: 6px 0 0;
}

.lmsc-lp-layout-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 18px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--lmsc-lp-border);
}

.lmsc-lp-layout-heading span {
	display: block;
	margin-block-end: 3px;
	color: var(--lmsc-lp-path-accent);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.lmsc-lp-layout-heading h2,
.lmsc-lp-phase h2 {
	margin: 0;
	color: var(--lmsc-lp-text);
	font-size: clamp(1rem, .9rem + .35vw, 1.22rem);
	font-weight: 800;
	line-height: 1.3;
}

.lmsc-lp-layout-heading > p {
	max-width: 34ch;
	margin: 0;
	color: var(--lmsc-lp-muted);
	font-size: .72rem;
	line-height: 1.45;
	text-align: end;
}

.lmsc-lp-nodes--focused {
	align-items: stretch;
	padding: 0;
}

.lmsc-lp-nodes--focused::before {
	content: '';
	position: absolute;
	inset-block: 22px 42px;
	inset-inline-start: 19px;
	width: 2px;
	background: color-mix(in srgb, var(--lmsc-lp-path-accent) 24%, var(--lmsc-lp-border));
	border-radius: 999px;
}

.lmsc-lp-nodes--focused .lmsc-lp-node,
.lmsc-lp-nodes--focused .lmsc-lp-finish {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	width: 100%;
	max-width: none;
	margin: 0 0 14px;
	padding: 0;
}

.lmsc-lp-nodes--focused .lmsc-lp-node-circle,
.lmsc-lp-nodes--focused .lmsc-lp-finish-marker {
	position: relative;
	z-index: 2;
	grid-column: 1;
	justify-self: center;
}

.lmsc-lp-nodes--focused .lmsc-lp-node-card,
.lmsc-lp-nodes--focused .lmsc-lp-finish-copy {
	grid-column: 2;
	width: 100%;
	max-width: none;
}

.lmsc-lp-nodes--focused .lmsc-lp-node-card {
	border-inline-start-width: 3px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.lmsc-lp-blueprint {
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding: clamp(10px, 1.5vw, 18px);
}

.lmsc-lp-blueprint-overview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-block-end: 20px;
}

.lmsc-lp-blueprint-overview > span {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 11px 12px;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 12px;
	color: var(--lmsc-lp-text);
}

.lmsc-lp-blueprint-overview b {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: color-mix(in srgb, var(--lmsc-lp-path-accent) 12%, var(--lmsc-lp-surface));
	border-radius: 9px;
	color: var(--lmsc-lp-path-accent);
	font-size: .72rem;
}

.lmsc-lp-blueprint-overview strong {
	min-width: 0;
	font-size: .74rem;
	overflow-wrap: anywhere;
}

.lmsc-lp-blueprint-overview small {
	color: var(--lmsc-lp-muted);
	font-size: .65rem;
	font-weight: 700;
}

.lmsc-lp-nodes--blueprint {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 14px;
	padding: 0;
}

.lmsc-lp-phase {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	grid-column: 1 / -1;
	min-width: 0;
	margin-block-start: 12px;
	padding: 16px 18px;
	background: linear-gradient(110deg, color-mix(in srgb, var(--lmsc-lp-path-accent) 11%, var(--lmsc-lp-surface)), var(--lmsc-lp-surface) 62%);
	border: 1px solid color-mix(in srgb, var(--lmsc-lp-path-accent) 24%, var(--lmsc-lp-border));
	border-radius: 15px;
	list-style: none;
}

.lmsc-lp-phase-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--lmsc-lp-path-accent);
	border-radius: 13px;
	color: var(--lmsc-lp-path-accent-fg);
}

.lmsc-lp-phase-icon svg {
	width: 25px;
	height: 25px;
}

.lmsc-lp-phase-kicker {
	margin-block-end: 2px;
}

.lmsc-lp-phase p {
	margin: 4px 0 0;
	color: var(--lmsc-lp-muted);
	font-size: .72rem;
	line-height: 1.45;
}

.lmsc-lp-phase-status {
	justify-self: end;
	padding: 5px 9px;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 999px;
	color: var(--lmsc-lp-muted);
	font-size: .66rem;
	font-weight: 750;
	line-height: 1.25;
	white-space: nowrap;
}

.lmsc-lp-phase--current .lmsc-lp-phase-status {
	border-color: var(--lmsc-lp-path-accent);
	color: var(--lmsc-lp-path-accent);
}

.lmsc-lp-phase--complete .lmsc-lp-phase-icon {
	background: var(--lmsc-lp-completed-marker);
	color: var(--lmsc-lp-completed-marker-fg);
}

.lmsc-lp-phase--complete .lmsc-lp-phase-status {
	background: var(--lmsc-lp-completed-bg);
	border-color: color-mix(in srgb, var(--lmsc-lp-completed) 44%, var(--lmsc-lp-border));
	color: var(--lmsc-lp-completed);
}

.lmsc-lp-nodes--blueprint .lmsc-lp-node {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.lmsc-lp-nodes--blueprint .lmsc-lp-node-circle {
	position: relative;
	z-index: 2;
	grid-column: 1;
}

.lmsc-lp-nodes--blueprint .lmsc-lp-node-card {
	grid-column: 2;
	width: 100%;
	max-width: none;
	min-height: 100%;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.lmsc-lp-nodes--blueprint .lmsc-lp-finish {
	grid-column: 1 / -1;
	justify-self: center;
	margin-block-start: 8px;
}

@container lmsc-learning-paths (max-width: 900px) {
	.lmsc-lp-rh {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.lmsc-lp-rh-progress {
		grid-column: 1;
		grid-row: 2;
	}

	.lmsc-lp-rh-cta {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.lmsc-lp-focused-shell {
		grid-template-columns: 1fr;
	}

	.lmsc-lp-focused-summary {
		position: static;
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px 14px;
	}

	.lmsc-lp-focused-summary-icon {
		grid-row: 1 / span 2;
		margin: 0;
	}

	.lmsc-lp-focused-summary .lmsc-lp-focused-eyebrow,
	.lmsc-lp-focused-summary > p {
		grid-column: 2;
	}

	.lmsc-lp-focused-percent {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin: 0;
	}

	.lmsc-lp-focused-track,
	.lmsc-lp-focused-count,
	.lmsc-lp-focused-current {
		grid-column: 1 / -1;
	}

	.lmsc-lp-focused-current {
		margin-block-start: 8px;
	}

	.lmsc-lp-nodes--blueprint {
		grid-template-columns: 1fr;
	}
}

@container lmsc-learning-paths (max-width: 600px) {
	.lmsc-lp-rh {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 18px;
	}

	.lmsc-lp-rh-progress,
	.lmsc-lp-rh-cta {
		grid-column: 1;
		grid-row: auto;
	}

	.lmsc-lp-rh-cta,
	.lmsc-lp-rh-cta .lmsc-lp-enroll-cta,
	.lmsc-lp-rh-cta .lmsc-lp-rh-action {
		width: 100%;
	}

	.lmsc-lp-focused-shell,
	.lmsc-lp-blueprint {
		padding-inline: 0;
	}

	.lmsc-lp-focused-summary {
		padding: 17px;
	}

	.lmsc-lp-layout-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.lmsc-lp-layout-heading > p {
		text-align: start;
	}

	.lmsc-lp-blueprint-overview {
		grid-template-columns: 1fr;
	}

	.lmsc-lp-phase {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 11px;
		padding: 14px;
	}

	.lmsc-lp-phase-icon {
		width: 42px;
		height: 42px;
	}

	.lmsc-lp-phase-status {
		grid-column: 2;
		justify-self: start;
		white-space: normal;
	}
}

/* ========================================================================== 
   Learning Paths catalog: guided-journey cards

   The catalog deliberately takes all accents from the active dashboard skin.
   No path-owned color is applied here, so switching skins keeps the complete
   catalog visually coherent while path detail views can retain their identity.
   ========================================================================== */

#lp-selector.lmsc-lp-selector {
	--lmsc-lp-catalog-accent: var(--lmsc-lp-action-bg, var(--lmsc-primary, var(--lmsc-lp-path-accent)));
	--lmsc-lp-catalog-on-accent: var(--lmsc-lp-action-fg, var(--lmsc-on-primary, #fff));
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

#lp-selector .lmsc-lp-catalog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-block-end: 22px;
}

#lp-selector .lmsc-lp-catalog-heading {
	min-width: 0;
}

#lp-selector .lmsc-lp-selector-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--lmsc-lp-text);
	font-size: clamp(1.3rem, 1.22rem + .25vw, 1.5rem);
	font-weight: 780;
	letter-spacing: -.035em;
	line-height: 1.15;
}

#lp-selector .lmsc-lp-selector-title svg {
	width: 24px;
	height: 24px;
	color: var(--lmsc-lp-catalog-accent);
}

#lp-selector .lmsc-lp-catalog-heading::after {
	display: block;
	width: 40px;
	height: 3px;
	margin-block-start: 10px;
	background: var(--lmsc-lp-catalog-accent);
	border-radius: 999px;
	content: "";
}

#lp-selector .lmsc-lp-selector-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-block-start: 0;
}

#lp-selector .lmsc-lp-select-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 10px;
	overflow: hidden;
	appearance: none;
	background: var(--lmsc-lp-surface) !important;
	border: 1px solid var(--lmsc-lp-border) !important;
	border-radius: 18px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .04), 0 12px 30px rgba(15, 23, 42, .06) !important;
	color: var(--lmsc-lp-text) !important;
	font: inherit;
	text-align: start;
	transform: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#lp-selector .lmsc-lp-select-card::before,
#lp-selector .lmsc-lp-select-card::after {
	display: none;
}

#lp-selector .lmsc-lp-select-card:hover {
	background: var(--lmsc-lp-surface) !important;
	border-color: color-mix(in srgb, var(--lmsc-lp-catalog-accent) 30%, var(--lmsc-lp-border)) !important;
	box-shadow: 0 5px 12px rgba(15, 23, 42, .06), 0 18px 38px rgba(15, 23, 42, .09) !important;
	color: var(--lmsc-lp-text) !important;
	transform: translateY(-2px);
}

#lp-selector .lmsc-lp-select-card:active {
	transform: translateY(0);
}

#lp-selector .lmsc-lp-select-card:focus-visible {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-catalog-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmsc-lp-catalog-accent) 22%, transparent), 0 12px 30px rgba(15, 23, 42, .07) !important;
	color: var(--lmsc-lp-text) !important;
	outline: none;
}

:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) #lp-selector button.lmsc-lp-select-card:focus:not(:focus-visible),
:is(.lmsc-dash, .lmsc-component--learning-path, [data-lmsc-learning-path]) #lp-selector button.lmsc-lp-select-card--completed:focus:not(:focus-visible) {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-border) !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .04), 0 12px 30px rgba(15, 23, 42, .06) !important;
	color: var(--lmsc-lp-text) !important;
	transform: none;
}

#lp-selector .lmsc-lp-card-visual {
	display: block;
	min-width: 0;
	padding: 12px 14px 13px;
	background:
		radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--lmsc-lp-catalog-accent) 12%, transparent), transparent 34%),
		linear-gradient(135deg, color-mix(in srgb, var(--lmsc-lp-catalog-accent) 8%, var(--lmsc-lp-surface)), color-mix(in srgb, var(--lmsc-lp-catalog-accent) 3%, var(--lmsc-lp-surface-subtle)));
	border: 1px solid color-mix(in srgb, var(--lmsc-lp-catalog-accent) 13%, var(--lmsc-lp-border));
	border-radius: 13px;
}

#lp-selector .lmsc-lp-card-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	margin-block-end: 8px;
}

#lp-selector .lmsc-lp-card-status,
#lp-selector .lmsc-lp-card-difficulty {
	display: inline-flex;
	align-items: center;
	max-width: 48%;
	min-height: 25px;
	padding: 4px 10px;
	background: color-mix(in srgb, var(--lmsc-lp-catalog-accent) 8%, var(--lmsc-lp-surface));
	border: 1px solid color-mix(in srgb, var(--lmsc-lp-catalog-accent) 28%, var(--lmsc-lp-border));
	border-radius: 999px;
	color: var(--lmsc-lp-catalog-accent) !important;
	font-size: .67rem;
	font-weight: 760;
	letter-spacing: .035em;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#lp-selector .lmsc-lp-card-difficulty {
	background: var(--lmsc-lp-surface);
	font-size: .7rem;
	font-weight: 690;
	letter-spacing: 0;
	text-transform: none;
}

#lp-selector .lmsc-lp-card-journey-row {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-width: 0;
}

#lp-selector .lmsc-lp-select-icon {
	position: relative;
	display: grid;
	grid-column: auto;
	grid-row: auto;
	place-items: center;
	width: 70px;
	height: 70px;
	overflow: hidden;
	background: var(--lmsc-lp-surface) !important;
	border: 1px solid color-mix(in srgb, var(--lmsc-lp-catalog-accent) 28%, var(--lmsc-lp-border));
	border-radius: 50%;
	box-shadow: 0 7px 18px rgba(15, 23, 42, .09);
	color: var(--lmsc-lp-catalog-accent) !important;
	transform: none;
}

#lp-selector .lmsc-lp-select-icon-svg {
	width: 33px;
	height: 33px;
	stroke-width: 1.8;
}

#lp-selector .lmsc-lp-select-icon--thumb {
	background: var(--lmsc-lp-surface) !important;
}

#lp-selector .lmsc-lp-select-icon--thumb img {
	position: absolute;
	inset: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 50%;
	object-fit: cover;
}

#lp-selector .lmsc-lp-select-icon-fallback,
#lp-selector .lmsc-lp-select-icon-fallback svg {
	width: 33px;
	height: 33px;
}

#lp-selector .lmsc-lp-card-journey-copy {
	display: grid;
	gap: 9px;
	min-width: 0;
}

#lp-selector .lmsc-lp-card-journey {
	display: flex;
	align-items: center;
	min-width: 0;
	width: 100%;
}

#lp-selector .lmsc-lp-journey-marker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	background: var(--lmsc-lp-surface);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 50%;
	color: var(--lmsc-lp-muted);
	font-size: .71rem;
	font-weight: 720;
	line-height: 1;
}

#lp-selector .lmsc-lp-journey-marker:not(:first-child) {
	margin-inline-start: clamp(11px, 2vw, 30px);
}

#lp-selector .lmsc-lp-journey-marker:not(:first-child)::before {
	position: absolute;
	z-index: -1;
	inset-inline-end: 100%;
	top: 50%;
	width: clamp(12px, 2vw, 31px);
	height: 2px;
	background: var(--lmsc-lp-border);
	content: "";
	transform: translateY(-50%);
}

#lp-selector .lmsc-lp-journey-marker--completed {
	background: var(--lmsc-lp-catalog-accent);
	border-color: var(--lmsc-lp-catalog-accent);
	color: var(--lmsc-lp-catalog-on-accent);
}

#lp-selector .lmsc-lp-journey-marker--completed::before,
#lp-selector .lmsc-lp-journey-marker--current::before {
	background: var(--lmsc-lp-catalog-accent) !important;
}

#lp-selector .lmsc-lp-journey-marker--current {
	border: 2px solid var(--lmsc-lp-catalog-accent);
	color: var(--lmsc-lp-catalog-accent);
}

#lp-selector .lmsc-lp-journey-marker--condensed {
	font-size: .65rem;
}

#lp-selector .lmsc-lp-card-journey-label {
	display: block;
	color: var(--lmsc-lp-muted);
	font-size: .76rem;
	font-weight: 620;
	line-height: 1.35;
}

#lp-selector .lmsc-lp-select-info {
	display: grid;
	flex: 1 1 auto;
	grid-column: auto;
	grid-row: auto;
	grid-template-rows: auto minmax(2.8em, auto) auto minmax(8px, 1fr) auto;
	align-items: start;
	justify-items: stretch;
	width: 100%;
	min-width: 0;
	padding: 12px 10px 7px;
	text-align: start;
}

#lp-selector .lmsc-lp-select-title {
	display: -webkit-box;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--lmsc-lp-text);
	font-size: clamp(1rem, .93rem + .24vw, 1.12rem);
	font-weight: 760;
	letter-spacing: -.018em;
	line-height: 1.32;
	overflow-wrap: anywhere;
	grid-row: 1;
	width: 100%;
	text-align: start;
}

#lp-selector .lmsc-lp-card-description {
	display: -webkit-box;
	min-height: 2.8em;
	margin-block-start: 5px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--lmsc-lp-muted);
	font-size: .79rem;
	font-weight: 470;
	line-height: 1.4;
	overflow-wrap: anywhere;
	grid-row: 2;
	width: 100%;
	text-align: start;
}

#lp-selector .lmsc-lp-select-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px 15px;
	min-width: 0;
	margin-block-start: 11px;
	grid-row: 3;
	width: 100%;
	text-align: start;
}

#lp-selector .lmsc-lp-meta-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--lmsc-lp-muted) !important;
	font-size: .73rem;
	font-weight: 590;
	line-height: 1.25;
	white-space: nowrap;
}

#lp-selector .lmsc-lp-meta-badge svg {
	flex: 0 0 auto;
	color: var(--lmsc-lp-catalog-accent);
}

#lp-selector .lmsc-lp-card-footer {
	display: grid;
	grid-template-columns: auto minmax(70px, 1fr) auto;
	align-items: center;
	gap: 8px 11px;
	min-width: 0;
	grid-row: 5;
	width: 100%;
	margin-block-start: 0;
	padding-block-start: 14px;
	text-align: start;
}

#lp-selector .lmsc-lp-card-progress-copy {
	color: var(--lmsc-lp-text);
	font-size: .75rem;
	font-weight: 680;
	line-height: 1.25;
	white-space: nowrap;
}

#lp-selector .lmsc-lp-progress-bar {
	display: block;
	width: 100%;
	height: 6px;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background: var(--lmsc-lp-locked-bg);
	border: 1px solid var(--lmsc-lp-border);
	border-radius: 999px;
}

#lp-selector .lmsc-lp-progress-fill,
#lp-selector .lmsc-lp-select-card--completed .lmsc-lp-progress-fill {
	display: block;
	height: 100%;
	background: var(--lmsc-lp-catalog-accent) !important;
}

#lp-selector .lmsc-lp-select-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	grid-column: 3;
	grid-row: 1;
	min-width: 118px;
	min-height: 44px;
	max-width: none;
	padding: 9px 14px;
	background: var(--lmsc-lp-catalog-accent);
	border: 1px solid color-mix(in srgb, var(--lmsc-lp-catalog-accent) 82%, #000);
	border-radius: 9px;
	color: var(--lmsc-lp-catalog-on-accent) !important;
	font-size: .76rem;
	font-weight: 720;
	line-height: 1.2;
	opacity: 1;
	text-align: center;
	white-space: nowrap;
}

#lp-selector .lmsc-lp-select-cta svg {
	flex: 0 0 auto;
	transition: transform .18s ease;
}

#lp-selector .lmsc-lp-select-card:hover .lmsc-lp-select-cta svg {
	transform: translateX(2px);
}

@container lmsc-learning-paths (max-width: 840px) {
	#lp-selector .lmsc-lp-selector-grid {
		grid-template-columns: 1fr;
	}
}

@container lmsc-learning-paths (max-width: 520px) {
	#lp-selector .lmsc-lp-catalog-head {
		margin-block-end: 18px;
	}

	#lp-selector .lmsc-lp-selector-title {
		font-size: 1.3rem;
	}

	#lp-selector .lmsc-lp-select-card {
		padding: 8px;
		border-radius: 15px;
	}

	#lp-selector .lmsc-lp-card-visual {
		padding: 12px;
	}

	#lp-selector .lmsc-lp-card-status,
	#lp-selector .lmsc-lp-card-difficulty {
		max-width: 52%;
		padding-inline: 8px;
	}

	#lp-selector .lmsc-lp-card-journey-row {
		grid-template-columns: 62px minmax(0, 1fr);
		gap: 11px;
	}

	#lp-selector .lmsc-lp-select-icon {
		width: 62px;
		height: 62px;
	}

	#lp-selector .lmsc-lp-journey-marker {
		flex-basis: 25px;
		width: 25px;
		height: 25px;
		font-size: .66rem;
	}

	#lp-selector .lmsc-lp-journey-marker:not(:first-child) {
		margin-inline-start: clamp(5px, 2vw, 12px);
	}

	#lp-selector .lmsc-lp-journey-marker:not(:first-child)::before {
		width: clamp(6px, 2vw, 13px);
	}

	#lp-selector .lmsc-lp-select-info {
		padding: 13px 6px 6px;
	}

	#lp-selector .lmsc-lp-card-description {
		min-height: 0;
	}

	#lp-selector .lmsc-lp-card-footer {
		grid-template-columns: auto minmax(48px, 1fr);
	}

	#lp-selector .lmsc-lp-select-cta {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#lp-selector .lmsc-lp-select-card,
	#lp-selector .lmsc-lp-select-cta svg {
		transition: none;
	}

	#lp-selector .lmsc-lp-select-card:hover,
	#lp-selector .lmsc-lp-select-card:active {
		transform: none;
	}
}
/* Shared report history controls wrap cleanly on narrow dashboards. */
.lmsc-report-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.lmsc-report-pagination span { font-size: 13px; }
/* Text-labelled pagination must not acquire a second arrow from legacy skins. */
.lmsc-pagination .lmsc-pager-text::before,
.lmsc-pagination .lmsc-pager-text::after { content: none !important; }
.lmsc-pagination .lmsc-pager-text { min-width: 44px; min-height: 44px; }

/* Refined journey layouts. Timeline is stored as `milestone`; Focus and its
   shared state/access renderer are deliberately unaffected by this treatment. */
:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) {
	--lmsc-lp-journey-border: color-mix(in srgb, var(--lmsc-lp-text) 14%, var(--lmsc-lp-surface));
	--lmsc-lp-journey-tint: color-mix(in srgb, var(--lmsc-lp-text) 3%, var(--lmsc-lp-surface));
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node .lmsc-lp-node-card {
	min-height: 96px;
	padding: 18px;
	gap: 14px;
	border: 1px solid var(--lmsc-lp-journey-border) !important;
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .035) !important;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-card::before,
:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-card::after {
	display: none;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node:is(.lmsc-lp-node--active, .lmsc-lp-node--in-progress) .lmsc-lp-node-card {
	border-color: var(--lmsc-lp-current) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmsc-lp-current) 9%, transparent) !important;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-media {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 10px;
	background: var(--lmsc-lp-journey-tint);
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-media-fallback,
:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-media-fallback svg {
	width: 21px;
	height: 21px;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-badge-type {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lmsc-lp-muted);
	font-weight: 500;
	letter-spacing: 0;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-status-badge {
	border-color: transparent;
	padding: 4px 8px;
	font-size: .68rem;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-action {
	min-height: 44px;
	padding: 10px 15px;
	border-radius: 9px;
	font-size: .76rem;
	box-shadow: none;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node--completed .lmsc-lp-node-action:not([aria-disabled="true"]):not([data-loading="true"]) {
	background: var(--lmsc-lp-surface) !important;
	border-color: var(--lmsc-lp-journey-border) !important;
	color: var(--lmsc-lp-link) !important;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node--completed .lmsc-lp-node-action:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-circle {
	width: 36px;
	height: 36px;
	border-width: 2px;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node--completed .lmsc-lp-node-circle {
	background: var(--lmsc-lp-completed-bg) !important;
	border-color: color-mix(in srgb, var(--lmsc-lp-completed) 30%, var(--lmsc-lp-surface));
	color: var(--lmsc-lp-completed) !important;
}

:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-finish-marker {
	width: 36px;
	height: 36px;
	box-shadow: none !important;
	border-width: 1px;
}

.lmsc-lp-roadmap:has(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-rh .lmsc-lp-rh-description {
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.6;
	margin-block-start: 6px;
}

/* Keep the measured road lane intact: its turns follow actual card heights. */
@container lmsc-learning-paths (min-width: 901px) {
	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) {
		gap: 16px;
		padding-block: 16px 24px !important;
	}

	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node .lmsc-lp-node-card {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		align-items: center;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node-action {
		grid-column: 3;
		grid-row: 1;
		margin: 0;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node-circle {
		margin-block-start: 18px;
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node::before {
		inset-block-start: 35px;
		width: calc((var(--lmsc-lp-milestone-lane) - 36px) / 2);
		height: 1px;
		background: var(--lmsc-lp-journey-border);
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node:nth-child(even)::before {
		inset-inline-start: calc(50% + 18px);
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-node:not(:last-child)::after {
		inset-block-start: 36px;
		inset-block-end: -52px;
		width: 1px;
		inset-inline-start: 50%;
		background: var(--lmsc-lp-journey-border);
	}

	.lmsc-lp-nodes--milestone .lmsc-lp-finish-marker {
		margin-block-start: 18px;
	}
}

@container lmsc-learning-paths (max-width: 900px) {
	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node .lmsc-lp-node-card {
		grid-template-columns: 40px minmax(0, 1fr);
		padding: 16px;
		gap: 12px;
	}
}

@container lmsc-learning-paths (max-width: 520px) {
	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node .lmsc-lp-node-card {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px;
	}

	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-media {
		display: none;
	}

	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-info,
	:is(.lmsc-lp-nodes--snake, .lmsc-lp-nodes--milestone) .lmsc-lp-node-action {
		grid-column: 1;
	}
}

/* Instructor review and discovery: compact controls with explicit labels. */
.lmsc-instructor__filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 20px; }
.lmsc-instructor__filters label { display: flex; flex: 1 1 155px; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.lmsc-instructor__filters label:first-child { flex-grow: 2; }
.lmsc-instructor__filters input, .lmsc-instructor__filters select { width: 100%; min-height: 44px; border: 1px solid var(--lmsc-border, #dce2e9); border-radius: 8px; padding: 10px 12px; background: var(--lmsc-card-bg, #fff); color: inherit; font: inherit; }
.lmsc-instructor__reviews { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--lmsc-border, #dce2e9); border-radius: 10px; font-size: 14px; }
.lmsc-instructor__reviews summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.lmsc-instructor__review-item { padding: 14px 0; border-bottom: 1px solid var(--lmsc-border, #dce2e9); overflow-wrap: anywhere; }
.lmsc-instructor__review-item p { margin: 6px 0; font-size: 13px; }
.lmsc-instructor__status--pending { color: #173c68; background: #eff6ff; border: 1px solid #92b4db; }
.lmsc-instructor__course-card:focus-visible, .lmsc-instructor__reviews summary:focus-visible, .lmsc-instructor__filters :is(input,select,button):focus-visible { outline: 3px solid var(--lmsc-primary, #1768ac); outline-offset: 3px; }
@media (max-width: 600px) {
    .lmsc-instructor__filters label, .lmsc-instructor__filters button { flex-basis: 100%; width: 100%; }
    .lmsc-instructor__reviews { padding: 14px; }
    .lmsc-instructor__header { flex-direction: column; align-items: stretch; gap: 14px; }
    .lmsc-instructor__header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
    .lmsc-instructor__header-actions .lmsc-instructor__new-btn { grid-column: 1 / -1; }
    .lmsc-instructor__header-actions .lmsc-dash-btn { min-width: 0; width: 100%; justify-content: center; }
}