/* SSC Course Template - 100% match with ssc-course-pages/app/course design */
/* Version: 1.0.1 */

/* CSS Variables matching Next.js globals.css */
:root {
	--background: #fafafa;
	--foreground: #0f172a;
	--card: #ffffff;
	--card-foreground: #0f172a;
	--primary: #d4af37;
	--primary-foreground: #0f172a;
	--secondary: #f3f4f6;
	--secondary-foreground: #0f172a;
	--muted: #f1f5f9;
	--muted-foreground: #64748b;
	--accent: #d4af37;
	--accent-foreground: #0f172a;
	--destructive: #dc2626;
	--destructive-foreground: #ffffff;
	--border: #e5e7eb;
	--input: #e5e7eb;
	--ring: #d4af37;
	--radius: 0.5rem;
}

/* Base */
.min-h-screen {
	min-height: 100vh;
}

.bg-background {
	background-color: var(--background);
}

.bg-secondary-30 {
	background-color: rgba(243, 244, 246, 0.3);
}

.bg-foreground-5 {
	background-color: rgba(15, 23, 42, 0.05);
}

.bg-card {
	background-color: var(--card);
}

.bg-secondary {
	background-color: var(--secondary);
}

.bg-primary-10 {
	background-color: rgba(212, 175, 55, 0.1);
}

.text-foreground {
	color: var(--foreground);
}

.text-muted-foreground {
	color: var(--muted-foreground);
}

.text-primary {
	color: var(--primary);
}

.text-destructive {
	color: var(--destructive);
}

.border-border {
	border-color: var(--border);
}

/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: 1280px;
	}
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* Grid */
.grid {
	display: grid;
}

.gap-8 {
	gap: 2rem;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-3 {
	gap: 0.75rem;
}

.items-start {
	align-items: flex-start;
}

.items-center {
	align-items: center;
}

@media (min-width: 1024px) {
	.lg\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}

	.lg\:col-span-1 {
		grid-column: span 1 / span 1;
	}
}

/* Flex */
.flex {
	display: flex;
}

.text-left {
	text-align: left;
}

/* Typography */
.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

@media (min-width: 768px) {
	.md\:text-4xl {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.text-xs {
	font-size: 0.75rem;
	line-height: 1rem;
}

.font-bold {
	font-weight: 700;
}

.font-semibold {
	font-weight: 600;
}

.font-medium {
	font-weight: 500;
}

.text-balance {
	text-wrap: balance;
}

.text-pretty {
	text-wrap: pretty;
}

.leading-relaxed {
	line-height: 1.625;
}

/* Spacing */
.mb-4 {
	margin-bottom: 1rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.mt-12 {
	margin-top: 3rem;
}

.mt-6 {
	margin-top: 1.5rem;
}

.pt-6 {
	padding-top: 1.5rem;
}

.space-y-3 > * + * {
	margin-top: 0.75rem;
}

.space-y-4 > * + * {
	margin-top: 1rem;
}

/* Badge */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	border-width: 1px;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

.badge-secondary {
	background-color: var(--secondary);
	color: var(--secondary-foreground);
	border-color: transparent;
}

.bg-green-100 {
	background-color: #dcfce7;
}

.text-green-700 {
	color: #15803d;
}

.bg-amber-100 {
	background-color: #fef3c7;
}

.text-amber-700 {
	color: #b45309;
}

.bg-red-100 {
	background-color: #fee2e2;
}

.text-red-700 {
	color: #b91c1c;
}

.border-0 {
	border-width: 0;
}

/* Button */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.15s;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.btn:disabled {
	pointer-events: none;
	opacity: 0.5;
}

.btn-primary {
	background-color: var(--primary);
	color: var(--primary-foreground);
}

.btn-primary:hover {
	background-color: rgba(212, 175, 55, 0.9);
}

.btn-secondary {
	background-color: var(--secondary);
	color: var(--secondary-foreground);
}

.btn-outline {
	background-color: var(--background);
	color: var(--foreground);
	border: 1px solid var(--border);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-outline:hover {
	background-color: var(--accent);
	color: var(--accent-foreground);
}

.btn-lg {
	height: 2.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.w-full {
	width: 100%;
}

/* Media */
.aspect-video {
	position: relative;
	padding-top: 56.25%;
}

.rounded-xl {
	border-radius: 0.75rem;
}

.overflow-hidden {
	overflow: hidden;
}

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.inset-0 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.object-cover {
	object-fit: cover;
}

/* Tabs */
.tabs-wrapper {
	width: 100%;
}

.tabs-list {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background-color: transparent;
	padding: 0;
	height: auto;
}

.tab-trigger {
	padding: 0.75rem 1rem;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	background-color: transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--muted-foreground);
	border: none;
	transition: all 0.15s;
}

.tab-trigger.is-active {
	color: var(--foreground);
	border-bottom-color: var(--primary);
}

.tabs-list.learn-tabs .tab-trigger {
	position: relative;
}

.tab-content {
	padding-top: 0;
	margin-top: 0;
}

.tab-content[data-panel="lesson"] {
	margin-top: 0;
}

/* List */
.shrink-0 {
	flex-shrink: 0;
}

/* Accordion */
.curriculum-accordion {
	display: grid;
	gap: 0.75rem;
}

.accordion-item {
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--card);
}

.accordion-trigger {
	width: 100%;
	padding: 0.75rem 1rem;
	border: none;
	background-color: transparent;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.15s;
}

.accordion-trigger:hover {
	background-color: rgba(243, 244, 246, 0.5);
}

.module-number {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2rem;
	width: 2rem;
	border-radius: 9999px;
	background-color: rgba(212, 175, 55, 0.1);
	color: var(--primary);
	font-size: 0.875rem;
	font-weight: 500;
}

.accordion-content {
	padding: 0;
}

.divide-y > * + * {
	border-top: 1px solid var(--border);
}

.hover\:bg-secondary-30:hover {
	background-color: rgba(243, 244, 246, 0.3);
}

.transition-colors {
	transition-property: color, background-color, border-color;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* Sidebar */
.sticky {
	position: sticky;
}

.top-24 {
	top: 6rem;
}

.p-6 {
	padding: 1.5rem;
}

.border {
	border-width: 1px;
	border-style: solid;
	border-color: var(--border);
}

.border-t {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--border);
}

.h-10 {
	height: 2.5rem;
}

.w-10 {
	width: 2.5rem;
}

.rounded-lg {
	border-radius: 0.5rem;
}

.h-5 {
	height: 1.25rem;
}

.w-5 {
	width: 1.25rem;
}

.h-4 {
	height: 1rem;
}

.w-4 {
	width: 1rem;
}

.h-1\.5 {
	height: 0.375rem;
}

.w-1\.5 {
	width: 0.375rem;
}

.rounded-full {
	border-radius: 9999px;
}

.mt-0\.5 {
	margin-top: 0.125rem;
}

.mt-2\.5 {
	margin-top: 0.625rem;
}

/* SVG icons */
svg {
	display: inline-block;
	vertical-align: middle;
}

/* Additional utilities */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.min-w-0 {
	min-width: 0;
}

.bg-primary\/15 {
	background-color: rgba(212, 175, 55, 0.15);
}

.border-primary\/30 {
	border-color: rgba(212, 175, 55, 0.3);
}

.hover\:bg-muted:hover {
	background-color: var(--muted);
}

.bg-\[#E85D3B\] {
	background-color: #E85D3B;
}

.text-\[#E85D3B\] {
	color: #E85D3B;
}

.max-w-4xl {
	max-width: 56rem;
}

.ml-1 {
	margin-left: 0.25rem;
}

.badge-sm {
	font-size: 0.625rem;
	padding: 0.125rem 0.25rem;
}

/* Learn view specific */
.learn-tabs .tab-trigger {
	position: relative;
}

/* Responsive */
@media (max-width: 1024px) {
	.lg\:grid-cols-2,
	.lg\:grid-cols-3 {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   SSC Course Template - Player Styles
   ============================================ */

:root {
	--color-primary: #E76E3C;
	--color-primary-strong: #2A3242;
	--color-primary-light: rgba(231, 110, 60, 0.1);
	--color-primary-hover: #2A3242;
	--color-accent: #FBBF59;
	--color-accent-hover: #f5a623;
	--color-bg: #ffffff;
	--color-bg-secondary: #f9fafb;
	--color-border: #e5e7eb;
	--color-border-hover: #d1d5db;
	--color-muted: #6b7280;
	--color-muted-light: #9ca3af;
	--color-foreground: #1a1a1a;
	--color-success: #10b981;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
body.ssc-course-template { margin: 0; background: var(--color-bg); color: var(--color-foreground); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }

.ssc-layout { height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; overflow: hidden; }
.ssc-main-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.ssc-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.ssc-content-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.ssc-center { flex: 1; overflow-y: auto; min-height: 0; }
.ssc-inner { padding: 1.5rem; max-width: 64rem; margin: 0 auto; width: 100%; }
/* Lesson loading: spinner (GPU-friendly transform) and optional skeleton stagger */
.ssc-lesson-loading { position: relative; }
.ssc-lesson-loading-spinner { width: 24px; height: 24px; border: 3px solid var(--color-border, #e5e7eb); border-top-color: var(--color-primary, #e76e3c); border-radius: 50%; animation: ssc-spin 0.8s linear infinite; margin-bottom: 1rem; flex-shrink: 0; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(2) { animation-delay: 0s; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(3) { animation-delay: 0.05s; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(4) { animation-delay: 0.1s; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(5) { animation-delay: 0.15s; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(6) { animation-delay: 0.2s; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(7) { animation-delay: 0.25s; }
.ssc-lesson-loading .ssc-skeleton-shimmer:nth-child(8) { animation-delay: 0.3s; }
/* Content just loaded: short opacity fade-in (GPU-friendly) */
@keyframes ssc-content-in { from { opacity: 0; } to { opacity: 1; } }
.ssc-content-just-loaded { animation: ssc-content-in 0.2s ease; }
.ssc-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-border); flex-wrap: wrap; }
.ssc-title h1 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-foreground); line-height: 1.4; }
.ssc-title-module { font-size: 0.875rem; font-weight: 500; color: var(--color-muted-light); white-space: nowrap; }
.ssc-title-separator { font-size: 1rem; color: var(--color-muted-light); line-height: 1; }
.ssc-icon { height: 1rem; width: 1rem; flex-shrink: 0; }

/* Lesson Video Container */
.ssc-lesson-video-container { margin-bottom: 2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #000; position: relative; min-height: 200px; }
.ssc-lesson-video-container.loading { min-height: 400px; }

/* Video Player Wrapper */
#ssc-video-player-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background: #000; }
#ssc-video-player-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#ssc-video-player-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Video Thumbnail */
.ssc-video-thumbnail { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; cursor: pointer; overflow: hidden; border-radius: 8px; }
.ssc-video-thumbnail img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center;
    /* High quality image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Prevent blur on scaling */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ssc-video-thumbnail-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); display: flex; align-items: center; justify-content: center; }
.ssc-video-thumbnail-placeholder svg { width: 80px; height: 80px; color: rgba(255,255,255,0.3); }
.ssc-video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(243, 156, 18, 0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(243, 156, 18, 0.4); }
.ssc-video-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--color-primary); box-shadow: 0 6px 30px rgba(243, 156, 18, 0.6); }
.ssc-video-play-btn svg { width: 32px; height: 32px; color: #fff; margin-left: 4px; }
.ssc-video-thumbnail-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); }
.ssc-video-thumbnail-title { color: #fff; font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
.ssc-video-thumbnail-duration { color: rgba(255,255,255,0.7); font-size: 0.875rem; }

/* Video Loading */
.ssc-video-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-bg-secondary); z-index: 10; border-radius: var(--radius-lg); }
.ssc-video-loading.hidden { display: none; }
.ssc-video-loading-spinner { width: 48px; height: 48px; border: 4px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: ssc-spin 0.8s linear infinite; margin-bottom: 1rem; }
.ssc-video-loading-text { color: var(--color-muted); font-size: 0.875rem; font-weight: 500; }
@keyframes ssc-spin { to { transform: rotate(360deg); } }

/* Video Engagement Overlay */
.ssc-video-engagement-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border-radius: 8px;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: opacity 0.3s ease;
}

.ssc-veo-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.ssc-veo-title {
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
}

.ssc-veo-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	font-weight: 400;
	margin: 0 0 0.75rem;
}

.ssc-veo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	min-height: 3rem;
	background: var(--color-primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: var(--shadow-sm);
	line-height: 1;
	white-space: nowrap;
}

.ssc-veo-btn:hover {
	background: var(--color-primary-hover, #d4612f);
	border-color: var(--color-primary-hover, #d4612f);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.ssc-veo-btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: var(--shadow-sm);
}

.ssc-veo-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.ssc-veo-btn-icon svg {
	width: 20px;
	height: 20px;
}

.ssc-veo-footer {
	width: 100%;
	max-width: 320px;
}

.ssc-veo-progress-bar {
	width: 100%;
	height: 6px;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.ssc-veo-progress-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.4s ease;
	width: 0%;
}

/* State-specific progress bar colors - follow button's primary color */
.ssc-veo--ready .ssc-veo-progress-fill {
	background: var(--color-primary);
}

.ssc-veo--paused .ssc-veo-progress-fill {
	background: var(--color-primary);
}

.ssc-veo--completed .ssc-veo-progress-fill {
	background: #27ae60;
}

.ssc-veo-progress-label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	font-weight: 500;
}

/* Completed state button */
.ssc-veo--completed .ssc-veo-btn {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.ssc-veo--completed .ssc-veo-btn:hover {
	background: var(--color-primary-hover, #d4612f);
	border-color: var(--color-primary-hover, #d4612f);
}

/* Skip-blocked state */
.ssc-veo--skip-blocked .ssc-veo-progress-fill {
	background: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 480px) {
	.ssc-video-engagement-overlay {
		padding: 1.25rem 1rem;
	}
	.ssc-veo-title {
		font-size: 1.35rem;
	}
	.ssc-veo-subtitle {
		font-size: 0.9rem;
	}
	.ssc-veo-btn {
		padding: 0.7rem 1.35rem;
		font-size: 0.95rem;
	}
	.ssc-veo-footer {
		max-width: 240px;
	}
}

/* Media Items */
.ssc-media-items-container { margin-bottom: 1.5rem; }
.ssc-media-container { margin-bottom: 1.5rem; }
.ssc-media-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-secondary); box-shadow: var(--shadow-sm); }
.ssc-media-slide { display: none; width: 100%; }
.ssc-media-slide.active { display: block; }
.ssc-media-slide.video { position: relative; aspect-ratio: 16 / 9; }
.ssc-media-slide.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.ssc-media-slide.image img { width: 100%; height: auto; display: block; }
.ssc-media-slide.pdf { padding: 2rem; text-align: center; background: var(--color-bg-secondary); }
.ssc-media-slide.pdf iframe { width: 100%; min-height: 600px; border: none; }
.ssc-media-slide.pdf a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--color-primary); color: #fff; text-decoration: none; border-radius: var(--radius-sm); font-weight: 500; transition: var(--transition); }
.ssc-media-slide.pdf a:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Media Navigation */
.ssc-media-nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.ssc-media-nav-btn { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--color-foreground); }
.ssc-media-nav-btn:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ssc-media-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--color-bg-secondary); }
.ssc-media-dots { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.ssc-media-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--color-border); cursor: pointer; transition: var(--transition); }
.ssc-media-dot.active { background: var(--color-primary); width: 1.5rem; }
.ssc-media-dot:hover:not(.active) { background: var(--color-muted-light); }

/* Tabs */
.ssc-tabs { margin-bottom: 1.5rem; }
.ssc-tabs-list { border-bottom: 2px solid var(--color-border); margin-bottom: 1.5rem; display: flex; gap: 0; width: 100%; background: var(--color-bg-secondary); border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 0.25rem 0.25rem 0 0.25rem; }
.ssc-tab { border: none; background: transparent; padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: var(--transition); position: relative; margin-bottom: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ssc-tab:hover:not(.active) { color: var(--color-primary); background: var(--color-primary-light); }
.ssc-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: #fff; font-weight: 700; }
.ssc-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--color-primary); }
.ssc-tab-badge { display: inline-flex; align-items: center; justify-content: center; background: #ef4444; color: #fff; border-radius: 9999px; font-size: 11px; font-weight: 700; line-height: 1; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; vertical-align: middle; pointer-events: none; }

/* Cards */
.ssc-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: var(--transition); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.ssc-card:hover { box-shadow: var(--shadow-md); }
.ssc-card.ssc-tab-pane,
.ssc-tab-pane { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Progress */
.ssc-progress { margin-bottom: 1.5rem; padding: 1.25rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ssc-progress-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.ssc-progress-pct-text { font-size: 1.125rem; font-weight: 700; color: var(--color-foreground, #111827); }
.ssc-progress-bar { width: 100%; height: 0.875rem; background: var(--color-border); border-radius: 9999px; overflow: hidden; }
.ssc-progress-fill { height: 100%; background: var(--color-primary); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease; box-shadow: 0 2px 4px rgba(231, 110, 60, 0.3); }
.ssc-progress-fill.completed { background: #22c55e; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3); }

/* Typography - Matching Quill Editor formatting */
.ssc-prose { color: var(--color-muted); line-height: 1.42 !important; margin-top: 30px; }
.ssc-prose h2, .ssc-prose h3, .ssc-prose h4 { color: var(--color-foreground); margin-top: 1.5rem; margin-bottom: 0.75rem; }

/* Intentional line break spacers from Quill editor */
.ssc-prose p.ssc-line-break { margin-bottom: 0 !important; line-height: 1; }

.ssc-prose a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition); }
.ssc-prose a:hover { border-bottom-color: var(--color-primary); }
.ssc-prose iframe,
.ssc-prose video {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg);
    display: block;
}

/* Quill Editor Embedded Videos - Ensure proper display in lesson content */
.ssc-prose .ql-video,
.ssc-prose iframe.ql-video,
.ssc-prose video.ql-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 400px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-md);
}

/* HTML5 Video tags from Quill */
.ssc-prose video,
#ssc-lesson-content video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-md);
}

/* iframes from Quill (YouTube, Vimeo, etc.) */
.ssc-prose iframe,
#ssc-lesson-content iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 400px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    border: none;
    box-shadow: var(--shadow-md);
}

/* Ensure videos within any Quill content container render properly */
.ql-editor video,
.ql-editor iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 400px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-md);
}

/* Videos inside ssc-card and ssc-tab-pane containers */
.ssc-card video,
.ssc-tab-pane video,
.ssc-card .ql-video,
.ssc-tab-pane .ql-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-md);
}

.ssc-card iframe,
.ssc-tab-pane iframe,
.ssc-card .ql-video iframe,
.ssc-tab-pane .ql-video iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 400px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    border: none;
    box-shadow: var(--shadow-md);
}

/* Ensure videos work in nested structures (ssc-card > ssc-prose > video) */
.ssc-card .ssc-prose video,
.ssc-tab-pane .ssc-prose video,
.ssc-card .ssc-prose iframe,
.ssc-tab-pane .ssc-prose iframe,
.ssc-card #ssc-lesson-content video,
.ssc-tab-pane #ssc-lesson-content video,
.ssc-card #ssc-lesson-content iframe,
.ssc-tab-pane #ssc-lesson-content iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 400px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    display: block;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-md);
}

/* Content section video: override global iframe/video rules so player fills container */
#ssc-lesson-content .ssc-content-section-video iframe,
#ssc-lesson-content .ssc-content-section-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    box-shadow: none;
}
#ssc-lesson-content .ssc-content-section-video video {
    object-fit: contain;
}

/* Lesson content sections (tab-lesson): consistent spacing between media/text */
#ssc-lesson-content .ssc-content-section {
    margin-bottom: 2.5rem;
}
#ssc-lesson-content .ssc-content-section:last-child {
    margin-bottom: 0;
}

/* Lesson tab prose: consistent typography with tabs/curriculum (h1–h6, p, blockquote, hr, address) */
#tab-lesson .ssc-prose,
#ssc-lesson-content .ssc-prose,
.ssc-card.ssc-tab-pane#tab-lesson .ssc-prose,
#ssc-lesson-content .ssc-content-section .ssc-prose {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--color-foreground, #374151);
    line-height: 1.75;
}

#ssc-lesson-content .ssc-prose p,
#ssc-lesson-content .ssc-content-section .ssc-prose p {
    margin-bottom: 1.25em;
}

#ssc-lesson-content .ssc-prose p.ssc-line-break,
#ssc-lesson-content .ssc-content-section .ssc-prose p.ssc-line-break {
    margin-bottom: 0;
    line-height: 1;
}

#ssc-lesson-content .ssc-prose p:empty,
#ssc-lesson-content .ssc-content-section .ssc-prose p:empty {
    display: none;
}

#ssc-lesson-content .ssc-prose br,
#ssc-lesson-content .ssc-content-section .ssc-prose br {
    line-height: 1.75;
}

#ssc-lesson-content .ssc-prose h1,
#ssc-lesson-content .ssc-prose h2,
#ssc-lesson-content .ssc-prose h3,
#ssc-lesson-content .ssc-prose h4,
#ssc-lesson-content .ssc-prose h5,
#ssc-lesson-content .ssc-prose h6,
#ssc-lesson-content .ssc-content-section .ssc-prose h1,
#ssc-lesson-content .ssc-content-section .ssc-prose h2,
#ssc-lesson-content .ssc-content-section .ssc-prose h3,
#ssc-lesson-content .ssc-content-section .ssc-prose h4,
#ssc-lesson-content .ssc-content-section .ssc-prose h5,
#ssc-lesson-content .ssc-content-section .ssc-prose h6 {
    color: var(--color-foreground, #111827);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#ssc-lesson-content .ssc-prose h1:first-child,
#ssc-lesson-content .ssc-prose h2:first-child,
#ssc-lesson-content .ssc-prose h3:first-child,
#ssc-lesson-content .ssc-prose h4:first-child,
#ssc-lesson-content .ssc-prose h5:first-child,
#ssc-lesson-content .ssc-prose h6:first-child,
#ssc-lesson-content .ssc-content-section .ssc-prose h1:first-child,
#ssc-lesson-content .ssc-content-section .ssc-prose h2:first-child,
#ssc-lesson-content .ssc-content-section .ssc-prose h3:first-child,
#ssc-lesson-content .ssc-content-section .ssc-prose h4:first-child,
#ssc-lesson-content .ssc-content-section .ssc-prose h5:first-child,
#ssc-lesson-content .ssc-content-section .ssc-prose h6:first-child {
    margin-top: 0;
}

#ssc-lesson-content .ssc-prose h1 { font-size: 1.875rem; }
#ssc-lesson-content .ssc-prose h2 { font-size: 1.5rem; }
#ssc-lesson-content .ssc-prose h3 { font-size: 1.25rem; }
#ssc-lesson-content .ssc-prose h4 { font-size: 1.125rem; }
#ssc-lesson-content .ssc-prose h5 { font-size: 1rem; }
#ssc-lesson-content .ssc-prose h6 { font-size: 0.875rem; }
#ssc-lesson-content .ssc-content-section .ssc-prose h1 { font-size: 1.875rem; }
#ssc-lesson-content .ssc-content-section .ssc-prose h2 { font-size: 1.5rem; }
#ssc-lesson-content .ssc-content-section .ssc-prose h3 { font-size: 1.25rem; }
#ssc-lesson-content .ssc-content-section .ssc-prose h4 { font-size: 1.125rem; }
#ssc-lesson-content .ssc-content-section .ssc-prose h5 { font-size: 1rem; }
#ssc-lesson-content .ssc-content-section .ssc-prose h6 { font-size: 0.875rem; }

#ssc-lesson-content .ssc-prose hr,
#ssc-lesson-content .ssc-content-section .ssc-prose hr {
    border: 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 1.5em 0;
}

#ssc-lesson-content .ssc-prose address,
#ssc-lesson-content .ssc-content-section .ssc-prose address {
    font-style: italic;
    margin: 1em 0;
}

#ssc-lesson-content .ssc-prose blockquote,
#ssc-lesson-content .ssc-content-section .ssc-prose blockquote {
    margin: 1.25em 0;
    padding-left: 1em;
    border-left: 4px solid var(--color-primary, #e76e3c);
    color: var(--color-muted, #6b7280);
}

#ssc-lesson-content .ssc-prose ul,
#ssc-lesson-content .ssc-prose ol,
#ssc-lesson-content .ssc-content-section .ssc-prose ul,
#ssc-lesson-content .ssc-content-section .ssc-prose ol {
    margin: 1.25em 0;
    padding-left: 1.625em;
}

#ssc-lesson-content .ssc-prose li,
#ssc-lesson-content .ssc-content-section .ssc-prose li {
    margin-bottom: 0.5em;
}

#ssc-lesson-content .ssc-prose img,
#ssc-lesson-content .ssc-content-section .ssc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 0.5rem);
    margin: 1rem 0;
}

.ssc-img { margin-top: 1.5rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.ssc-challenge { margin-top: 1.5rem; padding: 1.25rem; background: var(--color-primary-light); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.ssc-attachments { margin-top: 1.5rem; padding: 1.25rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.ssc-attachments ul { list-style: none; padding: 0; margin: 0; }
.ssc-attachments li { margin-bottom: 0.75rem; }
.ssc-attachments li:last-child { margin-bottom: 0; }
.ssc-attachments a { text-decoration: none; color: var(--color-primary); display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); transition: var(--transition); }
.ssc-attachments a:hover { background: var(--color-primary-light); color: var(--color-primary); transform: translateX(4px); }

/* Buttons */
.ssc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; min-height: 2.75rem; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; font-size: 0.875rem; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.ssc-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; }
.ssc-btn:active::before { width: 300px; height: 300px; }
.ssc-btn:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ssc-btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ssc-btn.primary:hover:not(:disabled):not(.loading) { background: var(--color-primary-hover); color: #fff; border-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ssc-btn.primary:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }
.ssc-btn.primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ssc-btn.primary.video-locked { background: var(--color-muted-light, #9ca3af); border-color: var(--color-muted-light, #9ca3af); opacity: 0.8; cursor: not-allowed; transform: none; }
.ssc-btn.primary.completed { background: #10b981; border-color: #10b981; animation: successPulse 0.5s ease-out; }
.ssc-btn.loading { pointer-events: none; opacity: 0.9; }
.ssc-btn.loading .ssc-spinner { animation: spin 0.8s linear infinite; }
.ssc-btn.clicked { animation: buttonClick 0.2s ease-out; }
.ssc-btn.shake { animation: shake 0.5s ease-in-out; }
.ssc-btn .ssc-spinner { display: inline-block; width: 1rem; height: 1rem; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes buttonClick { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
@keyframes successPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 50% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.ssc-btn.destructive { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.ssc-btn.destructive:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ssc-btn.destructive:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.ssc-btn.outline { background: transparent; border-color: var(--color-border); color: var(--color-foreground); }
.ssc-btn.outline:hover:not(:disabled):not(.disabled) { background: var(--color-bg-secondary); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ssc-btn.outline:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.ssc-btn.outline.disabled, .ssc-btn.outline:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; background: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-muted-foreground); }

/* Resource View/Download buttons - consistent sizing for both <a> and <button> elements */
#ssc-lesson-media-items-list .ssc-btn.outline,
#ssc-lesson-media-items-list button.ssc-btn.outline,
#ssc-lesson-media-items-list a.ssc-btn.outline,
.ssc-download-btn,
.ssc-view-media-btn,
.ssc-view-video-btn {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 0.75rem !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

/* PDF Slider */
.ssc-pdf-slider-wrapper {
    position: relative;
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
}

.ssc-pdf-slider-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem;
    background: #f5f5f5;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgb(231, 110, 60) #f5f5f5;
}

.ssc-pdf-slider-container::-webkit-scrollbar {
    height: 8px;
}

.ssc-pdf-slider-container::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.ssc-pdf-slider-container::-webkit-scrollbar-thumb {
    background: rgb(231, 110, 60);
    border-radius: 4px;
}

.ssc-pdf-slider-container::-webkit-scrollbar-thumb:hover {
    background: rgb(200, 90, 50);
}

.ssc-pdf-slide {
    min-width: 100%;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* PDF Slider Navigation Arrows - Prominent & Easy to See */
.lw-pdf-slider-prev,
.lw-pdf-slider-next,
.ssc-pdf-slider-prev,
.ssc-pdf-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(231, 110, 60, 0.4);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(231, 110, 60, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    padding: 0;
}

.lw-pdf-slider-prev svg,
.lw-pdf-slider-next svg,
.lw-pdf-slider-icon svg,
.ssc-pdf-slider-prev svg,
.ssc-pdf-slider-next svg {
    width: 24px;
    height: 24px;
    stroke: rgb(231, 110, 60);
    stroke-width: 3;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.lw-pdf-slider-prev:hover,
.lw-pdf-slider-next:hover,
.ssc-pdf-slider-prev:hover,
.ssc-pdf-slider-next:hover {
    background: rgba(231, 110, 60, 0.95);
    border-color: rgba(231, 110, 60, 0.9);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 20px rgba(231, 110, 60, 0.5), 0 4px 8px rgba(0, 0, 0, 0.25);
}

.lw-pdf-slider-prev:hover svg,
.lw-pdf-slider-next:hover svg,
.ssc-pdf-slider-prev:hover svg,
.ssc-pdf-slider-next:hover svg {
    stroke: rgb(231, 110, 60);
    filter: brightness(1.2) drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

.lw-pdf-slider-prev:active,
.lw-pdf-slider-next:active,
.ssc-pdf-slider-prev:active,
.ssc-pdf-slider-next:active {
    transform: translateY(-50%) scale(1.05);
}

.lw-pdf-slider-prev:disabled,
.lw-pdf-slider-next:disabled,
.ssc-pdf-slider-prev:disabled,
.ssc-pdf-slider-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(200, 200, 200, 0.3);
    box-shadow: none;
}

.lw-pdf-slider-prev:disabled svg,
.lw-pdf-slider-next:disabled svg,
.ssc-pdf-slider-prev:disabled svg,
.ssc-pdf-slider-next:disabled svg {
    stroke: #999;
}

.lw-pdf-slider-prev:disabled:hover,
.lw-pdf-slider-next:disabled:hover,
.ssc-pdf-slider-prev:disabled:hover,
.ssc-pdf-slider-next:disabled:hover {
    transform: translateY(-50%) scale(1);
}

.lw-pdf-slider-prev,
.ssc-pdf-slider-prev {
    left: 16px;
}

.lw-pdf-slider-next,
.ssc-pdf-slider-next {
    right: 16px;
}

.lw-pdf-page-indicator {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
}

/* PDF Slider Page Transitions and Animations */
.lw-pdf-pages {
    position: relative;
    overflow: hidden;
}

.lw-pdf-page {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.lw-pdf-page.active {
    opacity: 1;
    transform: translateX(0);
}

.lw-pdf-page:not(.active) {
    opacity: 0;
}

/* Slide animations */
.lw-pdf-page-enter-right {
    animation: lwPdfSlideInRight 0.3s ease-in-out;
}

.lw-pdf-page-enter-left {
    animation: lwPdfSlideInLeft 0.3s ease-in-out;
}

.lw-pdf-page-exit-left {
    animation: lwPdfSlideOutLeft 0.3s ease-in-out;
}

.lw-pdf-page-exit-right {
    animation: lwPdfSlideOutRight 0.3s ease-in-out;
}

@keyframes lwPdfSlideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lwPdfSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lwPdfSlideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes lwPdfSlideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* Button icon animations */
.lw-pdf-slider-prev:not(:disabled):hover svg,
.lw-pdf-slider-next:not(:disabled):hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.lw-pdf-slider-prev:not(:disabled):active svg,
.lw-pdf-slider-next:not(:disabled):active svg {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.ssc-pdf-slider-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 1rem;
    background: #f5f5f5;
}

.ssc-pdf-slider-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.ssc-pdf-slider-indicator:hover {
    background: rgb(231, 110, 60);
    transform: scale(1.2);
}

.ssc-pdf-slider-indicator[data-slide] {
    background: #ccc;
}

.ssc-pdf-slider-counter {
    text-align: center;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    color: #333;
    font-size: 0.875rem;
    font-weight: 600;
    border-top: 1px solid #ddd;
    color: rgb(231, 110, 60);
}

/* Navigation Footer */
.ssc-nav-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.ssc-nav-footer button { will-change: transform, opacity; backface-visibility: hidden; }

/* Sidebar */
.ssc-course-sidebar { width: 20rem; flex-shrink: 0; background: var(--color-bg); border-left: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; }
.ssc-sidebar-header { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.ssc-sidebar-header h2 { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-foreground); display: flex; align-items: center; gap: 0.5rem; }
.ssc-sidebar-content { flex: 1; overflow-y: auto; padding: 0.5rem; }
.ssc-module { margin-bottom: 0.25rem; }
.ssc-module-header { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem; border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s; }
.ssc-module-header:hover { background: var(--color-bg-secondary); }
.ssc-module-toggle { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; color: var(--color-muted); transition: transform 0.2s; flex-shrink: 0; }
.ssc-module-toggle.expanded { transform: rotate(90deg); }
.ssc-module-icon { width: 1rem; height: 1rem; color: var(--color-primary); flex-shrink: 0; }
.ssc-module-title { flex: 1; font-size: 0.8125rem; font-weight: 600; color: var(--color-foreground); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.ssc-module-content { margin-left: 1rem; padding-left: 0.5rem; border-left: 1px solid var(--color-border); }
.ssc-unit-group { margin-bottom: 0.25rem; }
.ssc-unit-header { display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; }
.ssc-unit-header:hover { background: var(--color-bg-secondary); }
.ssc-unit-toggle { width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; color: var(--color-muted); transition: transform 0.2s; flex-shrink: 0; }
.ssc-unit-toggle.expanded { transform: rotate(90deg); }
.ssc-unit-icon { width: 0.875rem; height: 0.875rem; color: #6366f1; flex-shrink: 0; }
.ssc-unit-title { flex: 1; font-size: 0.75rem; font-weight: 500; color: var(--color-foreground); }
.ssc-unit-content { margin-left: 1rem; padding-left: 0.5rem; border-left: 1px solid var(--color-border); }
.ssc-lesson-list { list-style: none; padding: 0; margin: 0; }
.ssc-lesson-btn { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; background: transparent; border: none; cursor: pointer; transition: all 0.15s; text-align: left; }
.ssc-lesson-btn:hover:not(:disabled) { background: var(--color-bg-secondary); }
.ssc-lesson-btn.active { background: var(--color-primary-light); color: var(--color-primary); }
.ssc-lesson-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ssc-lesson-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--color-muted); }
.ssc-lesson-btn.active .ssc-lesson-icon { color: var(--color-primary); }
.ssc-lesson-title { flex: 1; font-weight: 500; color: var(--color-foreground); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssc-lesson-btn.active .ssc-lesson-title { color: var(--color-primary); font-weight: 600; }
.ssc-lesson-meta { display: flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; color: var(--color-muted); flex-shrink: 0; }

/* Responsive */
@media (max-width: 768px) {
	.ssc-inner { padding: 1rem; }
	.ssc-nav-footer { flex-direction: column; }
	.ssc-btn { width: 100%; justify-content: center; }
	.ssc-course-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--color-border); max-height: 50vh; }
	.ssc-tabs-list { flex-wrap: wrap; }
	.ssc-tab { flex: 1; min-width: 120px; }
}

@media (min-width: 1400px) {
	.ssc-inner { max-width: none; }
}

/* Video.js: Hide big play button when video is playing */
.video-js.vjs-playing .vjs-big-play-button,
.video-js.vjs-user-active.vjs-playing .vjs-big-play-button {
	display: none !important;
}

/* ============================================
   CONTENT SECTION BLOCKS
   Renders each lesson section as a separate visual card
   ============================================ */

.ssc-content-section-block {
	margin-bottom: 1.5rem;
	background: var(--color-bg-secondary, #f8f9fa);
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--color-border, #e5e7eb);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease;
}

.ssc-content-section-block:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ssc-section-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--color-bg-tertiary, #f1f3f5);
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.ssc-section-header svg {
	color: var(--color-primary, #e76e3c);
	flex-shrink: 0;
}

.ssc-section-header .ssc-section-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-foreground, #1f2937);
	flex: 1;
}

.ssc-section-header .ssc-section-type-badge {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--color-muted, #6b7280);
	background: var(--color-card, #fff);
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
}

.ssc-section-content {
	padding: 1rem;
}

.ssc-section-content .ssc-prose {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-foreground, #1f2937);
}



.ssc-section-content .ssc-prose p:last-child {
	margin-bottom: 0;
}

.ssc-section-content .ssc-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	margin: 1rem 0;
}

.ssc-section-content .ssc-prose h1,
.ssc-section-content .ssc-prose h2,
.ssc-section-content .ssc-prose h3,
.ssc-section-content .ssc-prose h4,
.ssc-section-content .ssc-prose h5,
.ssc-section-content .ssc-prose h6 {
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

.ssc-section-content video {
	width: 100%;
	max-width: 100%;
	border-radius: 0.5rem;
}

.ssc-section-pdf-inner {
	min-height: 200px;
}

/* SSC curriculum prose: typography for unit/lesson rich content (h1–h6, p, hr, address not overridden) */
.hta-ssc-curriculum__unit-copy,
.hta-ssc-curriculum__unit-content-area,
.hta-ssc-curriculum__lesson-copy,
.hta-ssc-curriculum__lesson-content-area {
	color: var(--color-foreground, #374151);
	line-height: 1.75;
}

.hta-ssc-curriculum__unit-copy p,
.hta-ssc-curriculum__unit-content-area p,
.hta-ssc-curriculum__lesson-copy p,
.hta-ssc-curriculum__lesson-content-area p {
	margin-bottom: 1.25em;
}

.hta-ssc-curriculum__unit-copy p:empty,
.hta-ssc-curriculum__unit-content-area p:empty,
.hta-ssc-curriculum__lesson-copy p:empty,
.hta-ssc-curriculum__lesson-content-area p:empty {
	display: none;
}

.hta-ssc-curriculum__unit-copy h1,
.hta-ssc-curriculum__unit-copy h2,
.hta-ssc-curriculum__unit-copy h3,
.hta-ssc-curriculum__unit-copy h4,
.hta-ssc-curriculum__unit-copy h5,
.hta-ssc-curriculum__unit-copy h6,
.hta-ssc-curriculum__unit-content-area h1,
.hta-ssc-curriculum__unit-content-area h2,
.hta-ssc-curriculum__unit-content-area h3,
.hta-ssc-curriculum__unit-content-area h4,
.hta-ssc-curriculum__unit-content-area h5,
.hta-ssc-curriculum__unit-content-area h6,
.hta-ssc-curriculum__lesson-copy h1,
.hta-ssc-curriculum__lesson-copy h2,
.hta-ssc-curriculum__lesson-copy h3,
.hta-ssc-curriculum__lesson-copy h4,
.hta-ssc-curriculum__lesson-copy h5,
.hta-ssc-curriculum__lesson-copy h6,
.hta-ssc-curriculum__lesson-content-area h1,
.hta-ssc-curriculum__lesson-content-area h2,
.hta-ssc-curriculum__lesson-content-area h3,
.hta-ssc-curriculum__lesson-content-area h4,
.hta-ssc-curriculum__lesson-content-area h5,
.hta-ssc-curriculum__lesson-content-area h6 {
	color: var(--color-foreground, #111827);
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.hta-ssc-curriculum__unit-copy h1:first-child,
.hta-ssc-curriculum__unit-content-area h1:first-child,
.hta-ssc-curriculum__lesson-copy h1:first-child,
.hta-ssc-curriculum__lesson-content-area h1:first-child,
.hta-ssc-curriculum__unit-copy h2:first-child,
.hta-ssc-curriculum__unit-content-area h2:first-child,
.hta-ssc-curriculum__lesson-copy h2:first-child,
.hta-ssc-curriculum__lesson-content-area h2:first-child,
.hta-ssc-curriculum__unit-copy h3:first-child,
.hta-ssc-curriculum__unit-content-area h3:first-child,
.hta-ssc-curriculum__lesson-copy h3:first-child,
.hta-ssc-curriculum__lesson-content-area h3:first-child,
.hta-ssc-curriculum__unit-copy h4:first-child,
.hta-ssc-curriculum__unit-content-area h4:first-child,
.hta-ssc-curriculum__lesson-copy h4:first-child,
.hta-ssc-curriculum__lesson-content-area h4:first-child,
.hta-ssc-curriculum__unit-copy h5:first-child,
.hta-ssc-curriculum__unit-content-area h5:first-child,
.hta-ssc-curriculum__lesson-copy h5:first-child,
.hta-ssc-curriculum__lesson-content-area h5:first-child,
.hta-ssc-curriculum__unit-copy h6:first-child,
.hta-ssc-curriculum__unit-content-area h6:first-child,
.hta-ssc-curriculum__lesson-copy h6:first-child,
.hta-ssc-curriculum__lesson-content-area h6:first-child {
	margin-top: 0;
}

.hta-ssc-curriculum__unit-copy hr,
.hta-ssc-curriculum__unit-content-area hr,
.hta-ssc-curriculum__lesson-copy hr,
.hta-ssc-curriculum__lesson-content-area hr {
	border: 0;
	border-top: 1px solid var(--color-border, #e5e7eb);
	margin: 1.5em 0;
}

.hta-ssc-curriculum__unit-copy address,
.hta-ssc-curriculum__unit-content-area address,
.hta-ssc-curriculum__lesson-copy address,
.hta-ssc-curriculum__lesson-content-area address {
	font-style: italic;
	margin: 1em 0;
}

.hta-ssc-curriculum__unit-copy blockquote,
.hta-ssc-curriculum__unit-content-area blockquote,
.hta-ssc-curriculum__lesson-copy blockquote,
.hta-ssc-curriculum__lesson-content-area blockquote {
	margin: 1.25em 0;
	padding-left: 1em;
	border-left: 4px solid var(--color-border, #e5e7eb);
	color: var(--color-muted, #6b7280);
}

.hta-ssc-curriculum__unit-copy ul,
.hta-ssc-curriculum__unit-copy ol,
.hta-ssc-curriculum__unit-content-area ul,
.hta-ssc-curriculum__unit-content-area ol,
.hta-ssc-curriculum__lesson-copy ul,
.hta-ssc-curriculum__lesson-copy ol,
.hta-ssc-curriculum__lesson-content-area ul,
.hta-ssc-curriculum__lesson-content-area ol {
	margin: 1.25em 0;
	padding-left: 1.625em;
}

.hta-ssc-curriculum__unit-copy li,
.hta-ssc-curriculum__unit-content-area li,
.hta-ssc-curriculum__lesson-copy li,
.hta-ssc-curriculum__lesson-content-area li {
	margin-bottom: 0.5em;
}

/* Builder Preview Mode indicator */
.ssc-builder-preview-mode {
	position: fixed;
	top: 100px;
	right: 20px;
	background: var(--color-primary, #e76e3c);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	z-index: 9999;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ssc-builder-preview-mode svg {
	width: 1rem;
	height: 1rem;
}

/* ========================================
   BuddyBoss Theme Overrides - Fullscreen Mode Only
   ======================================== */

/* Override BuddyBoss left margin ONLY in fullscreen mode on ssc-course-page template */
body.ssc-fullscreen-mode.page-template-ssc-course-template .site,
body.ssc-fullscreen-mode.page-template-ssc-course-template #page,
body.ssc-fullscreen-mode.page-template-ssc-course-template .site-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Stronger override for BuddyBoss panel margin in fullscreen on ssc-course-page template */
@media (min-width: 800px) {
	body.ssc-fullscreen-mode.page-template-ssc-course-template .bb-buddypanel:not(.activate) .site,
	body.ssc-fullscreen-mode.page-template-ssc-course-template .bb-buddypanel:not(.register) .site {
		margin-left: 0 !important;
		transition: none !important;
	}
}

/* Hide BuddyBoss sidebar and panels ONLY in fullscreen mode on ssc-course-page template */
body.ssc-fullscreen-mode.page-template-ssc-course-template .buddypanel,
body.ssc-fullscreen-mode.page-template-ssc-course-template aside.buddypanel,
body.ssc-fullscreen-mode.page-template-ssc-course-template .bb-sidebar,
body.ssc-fullscreen-mode.page-template-ssc-course-template .bb-sidebar-wrap,
body.ssc-fullscreen-mode.page-template-ssc-course-template #secondary {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Note: When NOT in fullscreen mode, BuddyBoss sidebar will show normally */

body.ssc-fullscreen-mode .ssc-content-wrap { border: 1px solid #e5e7eb; border-radius: 20px; }

/* ===== Next Lesson Transition Loader ===== */
.ssc-lesson-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
}
.ssc-lesson-transition.active {
	opacity: 1;
	pointer-events: auto;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.ssc-lesson-transition.fade-out {
	opacity: 0;
	background: rgba(255, 255, 255, 0.0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	pointer-events: none;
	transition: opacity 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
}
.ssc-lesson-transition-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.ssc-lesson-transition-check {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #10b981;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: ssc-transition-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ssc-lesson-transition-check svg {
	width: 28px;
	height: 28px;
	color: #fff;
}
.ssc-lesson-transition-text {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-foreground, #18181b);
	animation: ssc-transition-slide-up 0.45s ease both 0.15s;
}
.ssc-lesson-transition-next {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	animation: ssc-transition-slide-up 0.45s ease both 0.3s;
}
.ssc-lesson-transition-next span {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-muted, #71717a);
}
.ssc-lesson-transition-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-primary, #e76e3c);
	text-align: center;
	max-width: 400px;
}
.ssc-lesson-transition-spinner {
	width: 22px;
	height: 22px;
	border: 2.5px solid var(--color-border, #e4e4e7);
	border-top-color: var(--color-primary, #e76e3c);
	border-radius: 50%;
	animation: ssc-spin 0.7s linear infinite, ssc-transition-slide-up 0.35s ease both 0.45s;
}
@keyframes ssc-transition-pop {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes ssc-transition-slide-up {
	0% { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* ========================================
   QUIZ — Redesigned Multi-Quiz Player
   ======================================== */

.ssc-quiz-section { margin-top: 1.5rem; }

/* ── Shared quiz card wrapper ─────────────────────────────────────────────── */
.ssc-qz-card {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	border-radius: 1.25rem;
	padding: 2rem 1.75rem;
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Lesson tab: full-width quiz (align with #ssc-lesson-content / #tab-lesson column) */
#ssc-lesson-content .ssc-section.ssc-section--quiz.ssc-quiz-section,
#tab-lesson .ssc-section.ssc-section--quiz.ssc-quiz-section,
.ssc-tab-pane#tab-lesson .ssc-section.ssc-section--quiz.ssc-quiz-section {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
}

.ssc-qz-fullmode-float {
	border-radius: 9999px;
	border-color: rgba(231, 110, 60, 0.34);
	background: rgba(255, 255, 255, 0.95);
	color: #9a3412;
	padding: 0.52rem 0.9rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ssc-qz-fullmode-float:hover {
	background: #fff7ed;
	border-color: rgba(231, 110, 60, 0.52);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
	transform: translateY(-1px);
}

.ssc-qz-fullmode-float:active {
	transform: translateY(0);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

@media (max-width: 640px) {
	.ssc-qz-fullmode-float {
		padding: 0.45rem 0.78rem;
		font-size: 0.75rem;
	}
}

/* Inline "Open Quiz Dashboard" button next to Start Quiz on the Ready Card.
   Double-class selector to win over the later `.ssc-qz-actions { justify-content: flex-end }` base rule. */
.ssc-qz-actions.ssc-qz-actions--ready {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin: 0 auto;
}

/* The fullmode-inline button uses an accent palette but inherits the shared
   pill dimensions defined on .ssc-qz-btn--pill / .ssc-qz-btn--pill-outline. */
.ssc-qz-actions--ready .ssc-qz-fullmode-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 200px;
	height: 44px;
	padding: 0 1.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	border-radius: 9999px;
	border: 1.5px solid rgba(231, 110, 60, 0.4);
	background: transparent;
	color: #c2410c;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ssc-qz-actions--ready .ssc-qz-fullmode-inline:hover {
	background: #fff7ed;
	border-color: rgba(231, 110, 60, 0.65);
	transform: translateY(-1px);
}

.ssc-qz-actions--ready .ssc-qz-fullmode-inline:active {
	transform: translateY(0);
}

#ssc-lesson-content .ssc-quiz-section .ssc-qz-card,
#tab-lesson .ssc-quiz-section .ssc-qz-card,
.ssc-tab-pane#tab-lesson .ssc-quiz-section .ssc-qz-card {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ── 1. Ready Card ────────────────────────────────────────────────────────── */
.ssc-qz-ready {
	background: #f3f3f3;
	text-align: center;
	padding: 2.5rem 2rem 3rem;
	border-radius: 0.5rem;
}

.ssc-qz-label {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #e76e3c;
	margin-bottom: 0.5rem;
}

.ssc-qz-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1a1c1c;
	margin: 0 0 2rem;
	line-height: 1.3;
	font-family: 'Lexend', sans-serif;
}

.ssc-qz-desc {
	font-size: 0.9375rem;
	color: #6b7280;
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

/* Quiz Instructions panel on the Ready Card (creator-authored guidance). */
.ssc-qz-instructions {
	background: #fff7ed;
	border-left: 3px solid #f37435;
	border-radius: 8px;
	padding: 0.875rem 1rem;
	margin: 0 0 1.5rem;
	text-align: left;
}
.ssc-qz-instructions-label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: 'Lexend', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c2410c;
	margin-bottom: 0.375rem;
}
.ssc-qz-instructions-label svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.ssc-qz-instructions-body {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #1f2937;
	word-wrap: break-word;
}

.ssc-qz-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

/* If there are only 2 stats, split 50/50 */
.ssc-qz-stats:has(> .ssc-qz-stat:last-child:nth-child(2)) {
	grid-template-columns: repeat(2, 1fr);
}

/* If there is only 1 stat, take full width */
.ssc-qz-stats:has(> .ssc-qz-stat:last-child:nth-child(1)) {
	grid-template-columns: 1fr;
}

.ssc-qz-stats.ssc-qz-stats--with-attempts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssc-qz-stat {
	flex: 1 1 0;
	min-width: 0;
	padding: 1rem 0.5rem;
	border-radius: 0.5rem;
	background: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	box-shadow: 0 4px 20px rgba(26, 28, 28, 0.06);
}

.ssc-qz-stat-value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1c1c;
	line-height: 1.2;
}

.ssc-qz-stat-value--accent {
	color: #e76e3c;
}

.ssc-qz-stat-label {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #584239;
}

/* Loading spinner */
.ssc-qz-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ssc-qz-spin 0.6s linear infinite;
}

@keyframes ssc-qz-spin { to { transform: rotate(360deg); } }

/* ── 2. Question View (Figma: node 261:27, 261:157, 261:427) ──────────────── */
.ssc-qz-question {
	background: #f3f3f3;
	border-radius: 0.5rem;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-height: 0;
	max-width: 100%;
	overflow: hidden;
}

/* Scrollable block (stem + options + explanation); actions pinned to bottom */
.ssc-qz-question-main {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

/* Question header: badge+counter left, pct right, aligned baseline */
.ssc-qz-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
	flex-wrap: wrap;
}

.ssc-qz-header-left {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	flex: 1 1 260px;
}

.ssc-qz-badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e76e3c;
	margin-bottom: 0;
}

.ssc-qz-counter {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1c1c;
	line-height: 1;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ssc-qz-pct {
	font-size: 0.75rem;
	font-weight: 600;
	color: #584239;
	white-space: normal;
	text-align: right;
	min-width: 0;
	flex: 0 1 auto;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Progress bar */
.ssc-qz-progress {
	height: 8px;
	background: #eee;
	border-radius: 9999px;
	overflow: hidden;
}

.ssc-qz-progress__bar {
	height: 100%;
	background: #e76e3c;
	border-radius: 9999px;
	transition: width 0.35s ease;
	width: 0%;
}

/* Question text */
.ssc-qz-q-text {
	font-size: 1.125rem;
	font-weight: 500;
	color: #1a1c1c;
	line-height: 1.75rem;
	margin: 0;
	font-family: 'Lexend', sans-serif;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 640px) {
	.ssc-qz-header {
		align-items: flex-start;
	}

	.ssc-qz-pct {
		text-align: left;
	}
}

/* ── Options ──────────────────────────────────────────────────────────────── */
.ssc-qz-options {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Individual option row */
.ssc-qz-option {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.0625rem 1.0625rem;
	background: #fff;
	border: 1.5px solid #e2e2e2;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ssc-qz-option:hover:not(.ssc-qz-option--locked) {
	border-color: #e76e3c;
	background: #fff;
}

.ssc-qz-option--selected {
	border: 2px solid #e76e3c;
	background: #fff;
	box-shadow: none;
	padding: 1rem 0.9375rem;
}

/* Radio circle */
.ssc-qz-option__radio {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid #e2e2e2;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s, background 0.15s;
}

.ssc-qz-option--selected .ssc-qz-option__radio {
	border: 2px solid #e76e3c;
	background: #e76e3c;
}

.ssc-qz-option__radio svg {
	width: 12px;
	height: 12px;
	color: #fff;
}

/* Correct answer option (feedback state) */
.ssc-qz-option--correct {
	border: 2px solid #22c55e;
	background: #f0fdf4;
	padding: 1.125rem 1.125rem;
}

.ssc-qz-option--correct .ssc-qz-option__radio {
	border-color: #22c55e;
	background: #22c55e;
}

/* Wrong answer option (feedback state) */
.ssc-qz-option--wrong {
	border: 2px solid #ef4444;
	background: #fef2f2;
	padding: 1.0625rem 1.0625rem;
}

.ssc-qz-option--wrong .ssc-qz-option__radio {
	border-color: #ef4444;
	background: #ef4444;
}

.ssc-qz-option--locked { cursor: default; }

/* Option text */
.ssc-qz-option__text {
	flex: 1;
	font-size: 1rem;
	font-weight: 500;
	color: #584239;
	line-height: 1.5rem;
}

.ssc-qz-option--selected .ssc-qz-option__text {
	font-weight: 700;
	color: #1a1c1c;
}

.ssc-qz-option--correct .ssc-qz-option__text { color: #1a1c1c; }
.ssc-qz-option--wrong .ssc-qz-option__text { color: #1a1c1c; }

/* Option badge (CORRECT ANSWER / YOUR ANSWER) */
.ssc-qz-option__badge {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 0.25rem;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: center;
}

.ssc-qz-option--wrong .ssc-qz-option__badge {
	background: #fff;
	color: #dc2626;
}

.ssc-qz-option--correct .ssc-qz-option__badge {
	background: #fff;
	color: #16a34a;
}

/* ── Action row (Submit / Next) ───────────────────────────────────────────── */
.ssc-qz-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* ── 3 & 4. Explanation (Figma: node 261:157, 261:427) ─────────────────── */
.ssc-qz-explanation {
	display: flex;
	gap: 0.75rem;
	padding: 1.3125rem 1.3125rem;
	border-radius: 0.5rem;
	border: 1px solid;
}

.ssc-qz-explanation--correct {
	background: #f0fdf4;
	border-color: #dcfce7;
}

.ssc-qz-explanation--wrong {
	background: #f4f4f5;
	border-color: #e4e4e7;
}

.ssc-qz-explanation__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.1rem;
}

.ssc-qz-explanation__icon svg { width: 20px; height: 20px; }
.ssc-qz-explanation--correct .ssc-qz-explanation__icon svg { color: #16a34a; }
.ssc-qz-explanation--wrong .ssc-qz-explanation__icon svg { color: #1a1c1c; }

.ssc-qz-explanation__body { flex: 1; }

.ssc-qz-explanation__title {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
}

.ssc-qz-explanation--correct .ssc-qz-explanation__title { color: #166534; }
.ssc-qz-explanation--wrong .ssc-qz-explanation__title { color: #1a1c1c; }

.ssc-qz-explanation__text {
	font-size: 0.875rem;
	color: #584239;
	line-height: 1.625rem;
	margin: 0;
}

/* ── 5 & 6. Results Card (Figma: node 261:569, 261:695) ────────────────── */
.ssc-qz-result {
	text-align: center;
	background: #f3f3f3;
	padding: 2.5rem 2rem 2rem;
	border-radius: 0.5rem;
}

/* Header row: icon absolute left, text centered relative to the card */
.ssc-qz-result__header {
	position: relative;
	min-height: 96px;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ssc-qz-result__header-text {
	width: 100%;
	text-align: center;
}

.ssc-qz-result__header .ssc-qz-result__icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* Icon circle */
.ssc-qz-result__icon {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0;
}

.ssc-qz-result__icon svg { width: 54px; height: 54px; }

.ssc-qz-result--pass .ssc-qz-result__icon { background: #dcfce7; }
.ssc-qz-result--fail .ssc-qz-result__icon { background: #ffdad6; }

.ssc-qz-result__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.ssc-qz-result--pass .ssc-qz-result__label { color: #16a34a; }
.ssc-qz-result--fail .ssc-qz-result__label { color: #ba1a1a; }

.ssc-qz-result__heading {
	font-size: 1.875rem;
	font-weight: 800;
	color: #1a1c1c;
	margin: 0 0 0.5rem;
	font-family: 'Lexend', sans-serif;
}

.ssc-qz-result__message {
	font-size: 1rem;
	color: #584239;
	margin: 0;
	line-height: 1.5rem;
}

.ssc-qz-result__attempts-info {
	font-size: 0.875rem;
	font-weight: 400;
	color: #64748b;
	border-radius: 6px;
	
	margin-top: 1rem;
	
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.ssc-qz-result__attempts-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #64748b;
}

.ssc-qz-result__attempts-info strong {
	color: #dc2626;
	font-weight: 600;
}

.ssc-qz-result--fail .ssc-qz-result__attempts-info {
	color: #64748b;
}

/* Success state attempts info with trophy icon */
.ssc-qz-result__attempts-info--success {
	color: #16a34a;
}

.ssc-qz-result__attempts-info--success .ssc-qz-result__attempts-icon {
	width: 20px;
	height: 20px;
	color: #16a34a;
}

.ssc-qz-result__attempts-info--success strong {
	color: #16a34a;
}

/* 2-col stats grid (default for pass state) */
.ssc-qz-result__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-top: 2rem;
	margin-bottom: 2rem;
	border-radius: 0.75rem;
	padding: 1.5rem;
}
.ssc-qz-result__stat:only-child {
	grid-column: 1 / -1;
}

/* 3-col stats grid for fail state with new design */
.ssc-qz-result--fail .ssc-qz-result__stats {
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

/* 3-col stats grid for pass state with new design */
.ssc-qz-result--pass .ssc-qz-result__stats {
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.ssc-qz-result__stat {
	padding: 0.5rem 1.5rem;
	border-radius: 0;
	background: transparent;
	border: 0;
	text-align: center;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ssc-qz-result__stat + .ssc-qz-result__stat {
	border-left: 1px solid rgba(26, 28, 28, 0.08);
}

.ssc-qz-result__stat-label {
	margin-top: 1rem; 
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	order: -1;
}

.ssc-qz-result__stat-value {
	display: block;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: #1a1c1c;
	font-family: 'Lexend', sans-serif;
}

/* Your Score - highlight earned points in red for fail, green for pass.
   The trailing "/ XX PTS" inherits a softer tone of the same hue so the
   earned number reads as the dominant figure. */
.ssc-qz-result--fail .ssc-qz-result__stat--your-score .ssc-qz-result__stat-value {
	color: #f0a4a4;
}
.ssc-qz-result--fail .ssc-qz-result__stat--your-score .ssc-qz-result__stat-earned {
	color: #dc2626;
}

.ssc-qz-result--pass .ssc-qz-result__stat--your-score .ssc-qz-result__stat-value {
	color: #86c8a3;
}
.ssc-qz-result--pass .ssc-qz-result__stat--your-score .ssc-qz-result__stat-earned {
	color: #16a34a;
}

/* Passing Score - keep black */
.ssc-qz-result--fail .ssc-qz-result__stat--passing-score .ssc-qz-result__stat-value {
	color: #1a1c1c;
}

.ssc-qz-result--pass .ssc-qz-result__stat--passing-score .ssc-qz-result__stat-value {
	color: #1a1c1c;
}

/* Progress percentage - keep black */
.ssc-qz-result--fail .ssc-qz-result__stat-value--pct {
	color: #1a1c1c;
}

.ssc-qz-result--pass .ssc-qz-result__stat-value--pct {
	color: #1a1c1c;
}

.ssc-qz-result__stat-sublabel {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: #94a3b8;
	margin-top: 0.25rem;
}

/* Success sublabel in green */
.ssc-qz-result__stat-sublabel--success {
	color: #16a34a;
	font-weight: 600;
}

/* Points needed highlight in red */
.ssc-qz-result__points-needed {
	color: #dc2626;
	font-weight: 600;
}

/* Progress bar */
.ssc-qz-progress-bar {
	width: 100%;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	margin: 0.5rem 0;
}

.ssc-qz-progress-bar__fill {
	height: 100%;
	background: #dc2626;
	border-radius: 4px;
	transition: width 0.3s ease;
}

/* Green progress bar for success */
.ssc-qz-progress-bar--success .ssc-qz-progress-bar__fill {
	background: #16a34a;
}

/* Responsive: Stack stats on mobile */
@media (max-width: 768px) {
	.ssc-qz-result__header {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
		min-height: 0;
	}

	.ssc-qz-result__header .ssc-qz-result__icon {
		position: static;
		transform: none;
	}

	.ssc-qz-result--fail .ssc-qz-result__stats {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.ssc-qz-result--pass .ssc-qz-result__stats {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.ssc-qz-result__stat {
		padding: 1rem 0;
	}

	.ssc-qz-result__stat + .ssc-qz-result__stat {
		border-left: 0;
		border-top: 1px solid rgba(26, 28, 28, 0.08);
		padding-top: 1rem;
	}

	.ssc-qz-result__stat-value {
		font-size: 1.875rem;
	}
}

/* Actions section */
.ssc-qz-result__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.ssc-qz-result__btn-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Full-mode (Quiz Dashboard) result button row matches the tab-lesson layout. */
.ssc-qz-result__btn-row--fullmode {
	width: 100%;
	margin: 0 auto;
}

/* Pill buttons share an identical box (height/padding/font) so primary and
   outline variants render at the same size when shown side-by-side. */
.ssc-qz-btn--pill,
.ssc-qz-btn--pill-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 200px;
	height: 44px;
	padding: 0 1.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	border-radius: 9999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primary pill button */
.ssc-qz-btn--pill {
	background: #e76e3c;
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 6px -1px rgba(231,110,60,0.2), 0 2px 4px -2px rgba(231,110,60,0.1);
}

.ssc-qz-btn--pill:hover {
	background: #d4612e;
	transform: translateY(-1px);
	box-shadow: 0 8px 16px rgba(231,110,60,0.25);
}

.ssc-qz-btn--pill:active {
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(231,110,60,0.15);
}

.ssc-qz-btn--pill svg { width: 16px; height: 16px; transition: transform 0.2s ease; }

.ssc-qz-btn--pill:hover svg { transform: translateX(3px); }

.ssc-qz-btn--pill-outline {
	background: #fff;
	color: #1a1c1c;
	border-color: #8b7267;
}

.ssc-qz-btn--pill-outline svg { width: 16px; height: 16px; }

.ssc-qz-btn--pill-outline:hover {
	background: #f9fafb;
	border-color: #584239;
	color: #1a1c1c;
}

.ssc-qz-btn--pill-outline:active {
	background: #f3f4f6;
	transform: translateY(1px);
}

/* Text link (Review Answers) */
.ssc-qz-btn--text {
	background: none;
	color: #584239;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.ssc-qz-btn--text:hover { color: #1a1c1c; }

.ssc-qz-btn--text:active { transform: translateY(1px); }

/* Generic submit-answer button (in question view) */
.ssc-qz-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #e76e3c;
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	padding: 0.75rem 2.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(231,110,60,0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ssc-qz-btn:hover {
	background: #d4612e;
	transform: translateY(-1px);
	box-shadow: 0 8px 16px rgba(231,110,60,0.25);
}

.ssc-qz-btn:active {
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(231,110,60,0.15);
}

.ssc-qz-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	background: #e76e3c; /* maintain original color */
}

/* ── Per-question review block (Figma node 261:157) ─────────────────────── */
.ssc-qz-review-q {
	background: #f3f3f3;
	border-radius: 0.5rem;
	padding: 2rem;
	margin-bottom: 1.5rem;
}

.ssc-qz-review-q-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.ssc-qz-review-q-header-left {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ssc-qz-review-q-counter {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1c1c;
	line-height: 1;
}

.ssc-qz-review-q-pct {
	font-size: 0.75rem;
	font-weight: 600;
	color: #584239;
}

/* 8px progress bar */
.ssc-qz-review-q-progress-bar-wrap {
	height: 8px;
	border-radius: 9999px;
	background: #eee;
	overflow: hidden;
	margin-bottom: 1.5rem;
	width: 100%;
}

.ssc-qz-review-q-progress-bar {
	height: 100%;
	background: #e76e3c;
	border-radius: 9999px;
	transition: width 0.3s ease;
}

.ssc-qz-review-q-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1rem;
}

/* Question text */
.ssc-qz-review-q .ssc-qz-q-text {
	font-size: 1.125rem;
	font-weight: 500;
	color: #1a1c1c;
	line-height: 1.6rem;
}

/* Option badges — Figma colours */
.ssc-qz-option__badge--wrong {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #dc2626;
}

.ssc-qz-option__badge--correct {
	background: #f0fdf4;
	border-color: #86efac;
	color: #16a34a;
}

/* Correct option (not selected) */
.ssc-qz-option--correct:not(.ssc-qz-option--wrong) {
	background: #f0fdf4;
	border-color: #22c55e;
}

/* Explanation block */
.ssc-qz-review-explanation {
	display: flex;
	gap: 0.75rem;
	padding: 1.3125rem;
	border-radius: 0.5rem;
	border: 1px solid;
}

.ssc-qz-review-explanation--correct {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.ssc-qz-review-explanation--wrong {
	background: #f4f4f5;
	border-color: #e4e4e7;
}

.ssc-qz-review-explanation__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.1rem;
}

.ssc-qz-review-explanation__icon svg { width: 20px; height: 20px; }
.ssc-qz-review-explanation--correct .ssc-qz-review-explanation__icon svg { color: #16a34a; }
.ssc-qz-review-explanation--wrong .ssc-qz-review-explanation__icon svg { color: #1a1c1c; }

.ssc-qz-review-explanation__body { flex: 1; }

.ssc-qz-review-explanation__title {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	color: #1a1c1c;
}

.ssc-qz-review-explanation--correct .ssc-qz-review-explanation__title { color: #166534; }

.ssc-qz-review-explanation__text {
	font-size: 0.875rem;
	color: #584239;
	line-height: 1.625rem;
	margin: 0;
}

/* Next button per question footer */
.ssc-qz-review-q-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding-top: 1rem;
}

/* Bottom actions */
.ssc-qz-review-actions {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

/* ── Review mode (old — cleanup) ──────────────────────────────────────────── */
.ssc-qz-review .ssc-qz-header { margin-bottom: 1.5rem; }

.ssc-qz-review-item {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #f3f4f6;
}

.ssc-qz-review-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.ssc-qz-review-q-num {
	font-size: 0.75rem;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.375rem;
}

/* ── Loading / Error states ───────────────────────────────────────────────── */
.ssc-qz-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	color: #6b7280;
	font-size: 0.875rem;
}

.ssc-qz-loading .ssc-qz-spinner {
	border-color: #e5e7eb;
	border-top-color: #f97316;
}

.ssc-qz-error {
	padding: 1.25rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.75rem;
	color: #b91c1c;
	font-size: 0.875rem;
	text-align: center;
}

/* ====================================
   Modern Pill Scrollbar – Sidebar & Content
   ==================================== */

/* Firefox */
.ssc-sidebar-content,
.ssc-center {
	scrollbar-width: thin;
	scrollbar-color: #d45a2a transparent;
}

/* WebKit (Chrome, Safari, Edge) */
.ssc-sidebar-content::-webkit-scrollbar,
.ssc-center::-webkit-scrollbar {
	width: 8px;
}

.ssc-sidebar-content::-webkit-scrollbar-track,
.ssc-center::-webkit-scrollbar-track {
	background: transparent;
}

.ssc-sidebar-content::-webkit-scrollbar-thumb,
.ssc-center::-webkit-scrollbar-thumb {
	background-color: #d45a2a;
	border-radius: 20px;
	border: 2px solid transparent;
	background-clip: content-box;
	min-height: 40px;
}

.ssc-sidebar-content::-webkit-scrollbar-thumb:hover,
.ssc-center::-webkit-scrollbar-thumb:hover {
	background-color: #b34a22;
	border-width: 1px;
}

.ssc-sidebar-content::-webkit-scrollbar-thumb:active,
.ssc-center::-webkit-scrollbar-thumb:active {
	background-color: #d45a2a;
	box-shadow: 0 0 4px rgba(212, 90, 42, 0.4);
}

/* ===== Lesson Requirements (integrated into .ssc-progress) ===== */
.ssc-lesson-requirements {
	margin-top: 0.75rem;
}

/* --- Toggle button in progress header --- */
.ssc-lr-divider {
	display: none;
}
.ssc-lr-dropdown-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	min-height: 3rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: var(--radius-md, 0.5rem);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
	line-height: 1;
	white-space: nowrap;
	background: var(--color-bg-secondary, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	color: var(--color-foreground, #111827);
}
.ssc-lr-dropdown-btn:hover {
	background: var(--color-border, #e5e7eb);
	border-color: var(--color-border-hover, #d1d5db);
}
.ssc-lr-chevron {
	transition: transform 0.2s ease;
}
.ssc-lr-chevron-open {
	transform: rotate(180deg);
}

/* --- Subtitle below progress bar --- */
.ssc-lr-subtitle {
	font-size: 0.8125rem;
	color: var(--color-muted, #6b7280);
	font-weight: 500;
}
.ssc-lr-done-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	margin-left: 0.25rem;
}

/* --- Requirements item list (collapsible) --- */
.ssc-lr-list-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}
.ssc-lr-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0.875rem;
	background: var(--color-bg-secondary, #f9fafb);
	border-radius: 0.5rem;
	border: 1px solid var(--color-border, #e5e7eb);
	transition: background 0.15s;
}
.ssc-lr-item-completed:hover {
	background: rgba(34, 197, 94, 0.04);
}
.ssc-lr-item-pending {
	border-left: 3px solid var(--color-primary, #E76E3C);
}
.ssc-lr-item-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.ssc-lr-item-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	flex-shrink: 0;
}

.ssc-lr-item-icon-completed {
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}
.ssc-lr-item-icon-pending {
	background: rgba(231, 110, 60, 0.1);
	color: var(--color-primary, #E76E3C);
}
.ssc-lr-item-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-foreground, #111827);
}
.ssc-lr-item-right {
	display: flex;
	align-items: center;
}
.ssc-lr-status {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.ssc-lr-status-completed {
	color: #22c55e;
}
.ssc-lr-status-pending {
	color: var(--color-primary, #E76E3C);
}

/* --- Remaining info (below list card) --- */
.ssc-lr-remaining {
	margin-top: 0.75rem;
	padding: 0.875rem 1rem;
	background: var(--color-bg-secondary, #f9fafb);
	border-radius: 0.5rem;
	border: 1px solid var(--color-border, #e5e7eb);
}
.ssc-lr-remaining-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-foreground, #111827);
	margin-bottom: 0.5rem;
}
.ssc-lr-remaining ul {
	margin: 0;
	padding: 0 0 0 1.25rem;
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.ssc-lr-remaining li {
	font-size: 0.8125rem;
	color: var(--color-muted, #6b7280);
}

/* ============================================================
   Course Summarize – sidebar entry
   ============================================================ */
.ssc-sidebar-summarize {
	padding: 12px 16px;
	border-top: 1px solid #e5e7eb;
}
.ssc-sidebar-summarize-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	background: rgba(231, 110, 60, 0.08);
	border: 1px solid rgba(231, 110, 60, 0.2);
	border-radius: 8px;
	color: #e76e3c;
	font-family: 'Lexend', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.ssc-sidebar-summarize-btn:hover {
	background: rgba(231, 110, 60, 0.14);
	border-color: rgba(231, 110, 60, 0.4);
}
.ssc-sidebar-summarize-btn.active {
	background: #e76e3c;
	color: #fff;
	border-color: #e76e3c;
}

/* ============================================================
   Course Completed Overlay
   ============================================================ */
.ssc-course-completed-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60vh;
	padding: 2rem 1rem;
	animation: ssc-cc-fade-in 0.5s ease both;
}
@keyframes ssc-cc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.ssc-cc-card {
	width: 100%;
	max-width: 720px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(26, 28, 28, 0.06);
	padding: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	position: relative;
	overflow: hidden;
	animation: ssc-cc-slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ssc-cc-bg-detail {
	position: absolute;
	top: -128px;
	right: -128px;
	width: 256px;
	height: 256px;
	border-radius: 9999px;
	background: linear-gradient(135deg, #e76e3c 0%, #a33e00 100%);
	opacity: 0.03;
	pointer-events: none;
}

/* Header */
.ssc-cc-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}
.ssc-cc-thumbnail-wrap {
	width: 120px;
	height: 120px;
	background: linear-gradient(135deg, #e76e3c 0%, #d45a2a 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ssc-cc-icon {
	width: 60px;
	height: 60px;
	color: #fff;
}
.ssc-cc-heading {
	padding-top: 16px;
}
.ssc-cc-title {
	font-family: 'Lexend', sans-serif;
	font-size: 48px;
	font-weight: 800;
	color: #1a1c1c;
	text-align: center;
	letter-spacing: -1.2px;
	line-height: 1;
	margin: 0;
}
.ssc-cc-subtitle {
	font-family: 'Lexend', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #584239;
	text-align: center;
	max-width: 576px;
	margin: 0;
	line-height: 1.625;
}
.ssc-cc-subtitle strong {
	font-weight: 600;
	color: #1a1c1c;
}

/* Metrics Grid */
.ssc-cc-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	width: 100%;
	max-width: 672px;
	padding-bottom: 8px;
}
.ssc-cc-metric {
	background: #f3f3f3;
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ssc-cc-metric-label {
	font-family: 'Lexend', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #584239;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	line-height: 16px;
	margin-bottom: 8px;
}
.ssc-cc-metric-big {
	font-family: 'Lexend', sans-serif;
	font-size: 30px;
	font-weight: 900;
	color: #1a1c1c;
	line-height: 30px;
}
.ssc-cc-metric-suffix {
	font-family: 'Lexend', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #584239;
	text-transform: uppercase;
	line-height: 16px;
	padding-bottom: 2px;
}
.ssc-cc-metric-value-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

/* Progress metric */
.ssc-cc-metric--progress {
	padding: 24px 24px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ssc-cc-metric-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.ssc-cc-metric-top .ssc-cc-metric-label {
	margin-bottom: 0;
}
.ssc-cc-metric-value-inline {
	font-family: 'Lexend', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #e76e3c;
	line-height: 24px;
}
.ssc-cc-progress-bar {
	width: 100%;
	height: 8px;
	background: #eee;
	border-radius: 9999px;
	overflow: hidden;
}
.ssc-cc-progress-fill {
	width: 100%;
	height: 100%;
	background: #e76e3c;
	border-radius: 9999px;
}

/* Final Result metric */
.ssc-cc-metric--result {
	border-left: 4px solid rgba(231, 110, 60, 0.2);
	padding-left: 28px;
}
.ssc-cc-result-text {
	color: #53e73c;
}
.ssc-cc-result-text.failed {
	color: #dc2626;
}

/* Action Buttons */
.ssc-cc-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
}
.ssc-cc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e76e3c;
	color: #fff;
	font-family: 'Lexend', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	padding: 16px 24px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	max-width: 300px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	transition: background 0.2s ease, transform 0.15s ease;
}
.ssc-cc-btn:hover {
	background: #d4632f;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.ssc-cc-btn:active {
	transform: translateY(0);
}

@keyframes ssc-cc-slide-up {
	0% {
		transform: translateY(32px) scale(0.96);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 640px) {
	.ssc-cc-card {
		padding: 24px;
		gap: 24px;
	}
	.ssc-cc-title {
		font-size: 28px;
		letter-spacing: -0.5px;
	}
	.ssc-cc-subtitle {
		font-size: 15px;
	}
	.ssc-cc-thumbnail-wrap {
		width: 88px;
		height: 88px;
	}
	.ssc-cc-icon {
		width: 44px;
		height: 44px;
	}
	.ssc-cc-metrics {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.ssc-cc-actions {
		flex-direction: column;
	}
	.ssc-cc-btn {
		width: 100%;
		max-width: none;
	}
	.ssc-cc-metric-big {
		font-size: 24px;
	}
}