/* ============================================
   LEARNING JOURNEY - VERTICAL TIMELINE LAYOUT
   ============================================ */

/* Roadmap Container */
.lj-roadmap { 
	box-sizing: border-box; 
	padding: 0 16px;
	width: 100%;
}

.lj-roadmap .lj-grid { 
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* ============================================
   PROGRESS HEADER
   ============================================ */

/* Match dashboard theme cards: .akademi-themes-grid .akademi-theme-card */
.lj-progress-header {
	width: 100%;
	margin: 0 0 40px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 15%);
	box-sizing: border-box;
}

.lj-progress-header__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
	color: #111827;
}

.lj-progress-header__icon {
	font-size: 28px;
}

.lj-progress-header__bar-container {
	position: relative;
	margin-bottom: 12px;
}

.lj-progress-header__bar {
	position: relative;
	height: 12px;
	background: #f3f4f6;
	border-radius: 6px;
	overflow: hidden;
}

.lj-progress-header__fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
	border-radius: 6px;
	transition: width 0.5s ease;
}

.lj-progress-header__stats {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 14px;
	color: #6b7280;
}

.lj-progress-header__stat {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lj-progress-header__stat-value {
	font-weight: 700;
	color: #111827;
}

/* ============================================
   VERTICAL TIMELINE TRACK
   ============================================ */

.lj-track {
	list-style: none !important;
	margin: 0 !important;
	padding: 40px 0 40px 60px !important;
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

/* Central timeline spine */
.lj-track::before {
	content: '';
	position: absolute;
	left: 21.5px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(
		to bottom,
		#3b82f6 0%,
		#3b82f6 var(--progress-percentage, 0%),
		#e5e7eb var(--progress-percentage, 0%),
		#e5e7eb 100%
	);
	border-radius: 2px;
}

/* Timeline Items - ONE PER ROW */
.lj-track__item {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	flex: none !important;
	flex-basis: 100% !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	margin-bottom: 48px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	float: none !important;
	clear: both !important;
}

.lj-track__item:last-child {
	margin-bottom: 0;
}

/* Timeline dot */
.lj-track__item::before {
	content: '';
	position: absolute;
	left: -50.5px;
	top: 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 2;
	transition: all 0.3s ease;
}

/* Completed state dot */
.lj-track__item.lj-state-completed::before {
	background: #10b981;
	border-color: #10b981;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* Current state dot */
.lj-track__item.lj-state-current::before {
	background: #3b82f6;
	border-color: #3b82f6;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
	animation: pulse 2s infinite;
}

/* Upcoming state dot */
.lj-track__item.lj-state-upcoming::before {
	background: #fff;
	border-color: #e5e7eb;
}

/* Locked state dot */
.lj-track__item.lj-state-locked::before {
	background: #f3f4f6;
	border-color: #d1d5db;
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);
	}
}

/* ============================================
   NODE CARDS
   ============================================ */

.lj-node-card {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #ffffff;
	border: 2px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	color: #0f172a;
	transition: all 0.3s ease;
	box-sizing: border-box !important;
	float: none !important;
}

/* Remove old horizontal connection lines */
.lj-node-card::before,
.lj-node-card::after {
	display: none;
}

/* Card Header */
.lj-node-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #f3f4f6;
}

.lj-node-card__step {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b7280;
}

.lj-node-card__phase {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	background: #f3f4f6;
	color: #4b5563;
}

/* Phase color coding */
.lj-node-card[data-phase="foundation"] .lj-node-card__phase {
	background: #dbeafe;
	color: #1e40af;
}

.lj-node-card[data-phase="depth"] .lj-node-card__phase {
	background: #ede9fe;
	color: #6d28d9;
}

.lj-node-card[data-phase="application"] .lj-node-card__phase {
	background: #d1fae5;
	color: #065f46;
}

/* Card Body - Split Layout */
.lj-node-card__body {
	display: flex !important;
	flex-direction: row !important;
	gap: 24px;
	margin-bottom: 12px;
	align-items: flex-start;
}

.lj-node-card__body-left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-node-card__body-right {
	flex: 0 0 200px;
	border-left: 1px solid #e5e7eb;
	padding-left: 16px;
}

.lj-node-card__label {
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
}

.lj-node-card__description {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.5;
}

/* Chapters Section */
.lj-chapters-header {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

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

.lj-chapter-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4b5563;
}

/* Completed chapter - green with checkmark */
.lj-chapter-item.lj-chapter-completed {
	color: #10b981;
}

.lj-chapter-item.lj-chapter-completed .lj-chapter-icon {
	color: #10b981;
	font-weight: bold;
}

/* Open/unlocked chapter - blue with open circle */
.lj-chapter-item.lj-chapter-open {
	color: #4b5563;
}

.lj-chapter-item.lj-chapter-open .lj-chapter-icon {
	color: #3b82f6;
	font-weight: bold;
}

/* Locked chapter - gray/muted with lock icon */
.lj-chapter-item.lj-chapter-locked {
	opacity: 0.6;
}

.lj-chapter-item.lj-chapter-locked .lj-chapter-icon {
	color: #9ca3af;
}

.lj-chapter-item.lj-chapter-locked .lj-chapter-title {
	color: #9ca3af;
}

/* Legacy completed class for backward compatibility */
.lj-chapter-item.completed {
	color: #10b981;
}

.lj-chapter-item.more {
	color: #9ca3af;
	font-style: italic;
	padding-left: 24px;
}

.lj-chapter-icon {
	flex-shrink: 0;
	font-size: 14px;
}

.lj-chapter-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Card Footer */
.lj-node-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 12px;
	border-top: 1px solid #f3f4f6;
}

.lj-node-card__meta {
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* State-specific styling */
.lj-track__item.lj-state-completed .lj-node-card {
	border-color: #10b981;
	background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.lj-track__item.lj-state-current .lj-node-card {
	border-color: #3b82f6;
	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
}

.lj-track__item.lj-state-locked .lj-node-card {
	opacity: 0.6;
	border-style: dashed;
	cursor: not-allowed;
}

/* Hover effects */
.lj-node-card:hover,
.lj-node-card:focus {
	transform: translateX(4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.lj-track__item.lj-state-locked .lj-node-card:hover,
.lj-track__item.lj-state-locked .lj-node-card:focus {
	transform: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.lj-empty {
	padding: 24px;
	border-radius: 16px;
	border: 1px dashed #cbd5e1;
	text-align: center;
	color: #475569;
	background: #f8fafc;
}

/* ============================================
   RESPONSIVE BEHAVIOR
   ============================================ */

/* Mobile (< 768px) */
@media (max-width: 767px) {
	.lj-roadmap {
		padding: 0 12px;
	}

	.lj-track {
		padding: 20px 0 20px 48px;
	}
	
	.lj-track::before {
		left: 16px;
	}
	
	.lj-track__item {
		margin-bottom: 36px;
	}
	
	.lj-track__item::before {
		left: -40px;
		width: 20px;
		height: 20px;
		top: 20px;
	}
	
	.lj-node-card {
		padding: 16px;
	}
	
	.lj-node-card__label {
		font-size: 18px;
	}
	
	.lj-progress-header {
		padding: 16px;
		margin-bottom: 24px;
	}
	
	.lj-progress-header__title {
		font-size: 18px;
	}
	
	/* Hide chapters section on mobile */
	.lj-node-card__body {
		flex-direction: column !important;
	}
	
	.lj-node-card__body-right {
		display: none;
	}
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.lj-roadmap .lj-grid {
		max-width: 800px;
	}
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
	.lj-roadmap .lj-grid {
		max-width: 1000px;
	}
}
/**
 * Learning Journey — sidebar, chapters rail, chat widget, practice-paper sidebar.
 * Loaded once from main.tsx (bundled into node-runner.css).
 * Do not import per-component CSS for these surfaces.
 */

/* --- Shell: layout rail, accordion, chapters (ported from learning-node-shell.css) --- */

/* Aside rail — single base (modifiers + learning-node overrides below) */
.lj-sidebar {
	--lj-sidebar-section-gap: 16px;
	--lj-sidebar-collapsed-stack-gap: 12px;
	/* Expanded rail & chat/inbox open: 10% narrower than legacy 360px / 450px */
	--lj-sidebar-expanded-width: calc(360px * 0.9);
	--lj-sidebar-chat-open-width: calc(450px * 0.9);
	box-sizing: border-box;
	/* Neutral rail: always white. Dashboard sidebar colours apply only to .lj-header (learning-node-shell.css). */
	background: #ffffff;
	color: #0f172a;
	grid-column: 2;
	order: 2;
	width: var(--lj-sidebar-expanded-width);
	max-width: var(--lj-sidebar-expanded-width);
	min-width: var(--lj-sidebar-expanded-width);
	padding: 12px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	align-self: stretch;
	flex-shrink: 0;
	overflow: hidden;
	border-left: 1px solid #e5e7eb;
	border-right: none;
	border-top: none;
	border-bottom: none;
	box-shadow: none;
	transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
	will-change: width;
}
.lj-sidebar__node-title{
	flex-shrink:0;
	font-size:20px;
	font-weight:700;
	color:inherit;
	text-align:center;
	margin:0 0 var(--lj-sidebar-section-gap, 16px);
	position:sticky;
	top:0;
	z-index:2;
	background:transparent;
	padding:0 0 var(--lj-sidebar-section-gap, 16px);
}
.lj-sidebar__accordion{border:1px solid rgba(15,23,42,.12);border-radius:16px;background:#f8fafc;margin:0 0 var(--lj-sidebar-section-gap, 16px);overflow:visible;box-shadow:none}
.lj-accordion__header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:transparent;border:0;color:#0f172a;font-weight:600;text-align:left;cursor:pointer;border-bottom:1px solid rgba(15,23,42,.1)}
.lj-accordion__header.is-open{background:transparent}
.lj-accordion__header:hover,
.lj-accordion__header:focus,
.lj-accordion__header:active{background:transparent;color:#0f172a}
.lj-accordion__header:focus-visible{outline:2px solid rgba(37,99,235,.45);outline-offset:2px}
.lj-accordion__info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.lj-accordion__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#2079b0;font-weight:700}
.lj-accordion__title{font-size:17px;font-weight:700;color:#0f172a;line-height:1.3;overflow:hidden;display:flex;align-items:center;gap:8px;min-width:0}
.lj-accordion__title-badge{width:24px;height:24px;min-width:24px;flex-shrink:0;border-radius:999px;background:#2079b0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.lj-accordion__title-sep{color:#64748b;font-weight:400;flex-shrink:0}
.lj-accordion__title > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lj-accordion__meta{font-size:13px;color:#475569}
.lj-accordion__progress{margin-top:4px}
.lj-accordion__progress .lj-progressbar{height:6px;background:rgba(37,99,235,.18);border-radius:999px;overflow:hidden}
.lj-accordion__progress .lj-progressbar__fill{height:100%;background:linear-gradient(90deg,#38bdf8 0%,#2563eb 100%);transition:width .3s ease}
.lj-accordion__chevron{margin-left:16px;color:#2079b0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.lj-accordion__chevron svg{display:block;transition:transform .25s ease}
.lj-accordion__header.is-open .lj-accordion__chevron svg{transform:rotate(180deg)}
.lj-accordion__panel{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease;padding:0 14px;opacity:0}
.lj-accordion__panel.is-open{max-height:9999px;opacity:1;overflow:visible}
.lj-accordion__list{list-style:none;margin:0;padding:14px 0;display:flex;flex-direction:column;gap:10px}
@media (max-width: 1024px){.lj-layout{grid-template-columns:1fr}.lj-main,.lj-sidebar{grid-column:auto}}
.lj-sidebar--collapsed{width:88px;max-width:88px;min-width:88px}
.lj-sidebar--collapsed .lj-sidebar__node-title{font-size:0;height:0;margin:0;padding:0;overflow:hidden}
.lj-sidebar--collapsed .lj-sidebar__accordion{display:none}
.lj-sidebar--collapsed .lj-chat-sidebar{display:none}
.lj-chapters__collapsed{display:flex;flex-direction:column;gap:var(--lj-sidebar-collapsed-stack-gap, 12px);width:100%;align-items:center;padding:0}
.lj-sidebar__section--chapters{box-shadow:none}
.lj-sidebar__section--chapters .lj-chapter__icon,
.lj-sidebar__section--chapters .lj-chapter__icon:hover:not(:disabled),
.lj-sidebar__section--chapters .lj-chapter__icon.is-active,
.lj-sidebar__section--chapters .lj-chapter__icon.is-completed:hover:not(:disabled){box-shadow:none}
.lj-chapter__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;border-radius:12px;border:2px solid rgba(37,99,235,.25);background:#fff;color:#0f172a;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1)}
.lj-chapter__icon:hover:not(:disabled){background:#dbe7ff;border-color:#1a6a9a;box-shadow:none;transform:scale(1.05)}
.lj-chapter__icon.is-active{border-color:#22c55e;background:#dcfce7;color:#166534}
.lj-chapter__icon.is-locked{opacity:.5;cursor:not-allowed;background:#f3f4f6;border-color:#e5e7eb}
.lj-chapter__icon.is-completed{border-color:#22c55e;background:#dcfce7}
.lj-chat-sidebar__collapsed{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;border:0;background:linear-gradient(135deg,#1d4ed8,#2563eb);cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);margin:0 auto;padding:0}
.lj-chat-sidebar__collapsed:hover{transform:translateY(-2px) scale(1.05);box-shadow:none}
.lj-chat-sidebar__collapsed img{width:32px;height:32px;object-fit:contain;transition:transform .3s ease}
.lj-chat-sidebar__collapsed:hover img{transform:scale(1.1)}
/* Collapsed sidebar: match .lj-chapter__icon (white tile, blue border, blue glyph) */
.lj-sidebar__icon-badge{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;border-radius:12px;border:2px solid rgba(37,99,235,.25);background:#fff;color:#2563eb;cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);margin:0 auto;padding:0}
.lj-sidebar__icon-badge:hover:not(:disabled){background:#dbe7ff;border-color:#1a6a9a;color:#1d4ed8;box-shadow:none;transform:scale(1.05)}
.lj-sidebar__icon-badge:disabled{opacity:.5;cursor:not-allowed}
.lj-sidebar__icon-badge svg{display:block;width:22px;height:22px;flex-shrink:0}
.lj-sidebar__icon-badge--admin{border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.08);color:#dc2626}
.lj-sidebar__icon-badge--admin:hover:not(:disabled){background:rgba(239,68,68,.15);border-color:#dc2626;color:#b91c1c;transform:scale(1.05)}
@media (max-width: 1024px){.lj-sidebar{display:none}}
.lj-chapter__btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(37,99,235,.25);background:#fff;color:#0f172a;font-weight:600;text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.lj-chapter__btn:hover{background:#dbe7ff;border-color:#1a6a9a;box-shadow:none;transform:translateY(-1px)}
.lj-chapter.locked .lj-chapter__btn{opacity:.5;cursor:not-allowed;box-shadow:none;background:#f3f4f6;border-color:#e5e7eb}
.lj-chapter__index{width:32px;height:32px;min-width:32px;flex-shrink:0;border-radius:999px;background:#2079b0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.lj-chapter.is-active .lj-chapter__index{background:#22c55e}
.lj-badge{margin-left:auto;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(32,121,176,.12);color:#2079b0}
.lj-badge--active{background:#fefce8;color:#854d0e}
.lj-badge--done,.lj-badge--completed{background:#dcfce7;color:#166534}
.lj-badge--available{background:#fefce8;color:#854d0e}
.lj-badge--locked{background:#f1f5f9;color:#334155}
.lj-chapter__title{font-size:14px;margin:0;font-weight:700;color:#0f172a}
.lj-chapter {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.lj-chapter__locked {
	position: relative;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: #f8fafc;
	opacity: 0.7;
}
.lj-chapter__lock-icon {
	margin-left: auto;
	font-size: 16px;
	opacity: 0.6;
}
.lj-chapter__pending-review {
	margin-top: 8px;
	padding: 8px 10px;
	background: #fef3c7;
	border-radius: 8px;
	border-left: 3px solid #f59e0b;
}
.lj-chapter__pending-review-title {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	color: #92400e;
}
.lj-chapter__pending-review-hint {
	margin: 0;
	font-size: 11px;
	color: #78350f;
	opacity: 0.8;
}
.lj-chapter__dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border: none;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	color: #64748b;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}
.lj-chapter__dismiss:hover {
	background: rgba(0, 0, 0, 0.2);
	color: #0f172a;
}

/* Chat/Voice Open Sidebar - Expanded width */
.lj-sidebar.lj-sidebar--chat-open {
	width: var(--lj-sidebar-chat-open-width);
	max-width: var(--lj-sidebar-chat-open-width);
	min-width: var(--lj-sidebar-chat-open-width);
	overflow: hidden !important; /* Prevent sidebar scroll, only messages should scroll */
	transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

/* Sidebar Content Area */
.lj-sidebar__content {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

/* When chat/voice is open, content area should fill remaining space */
.lj-sidebar--chat-open .lj-sidebar__content {
	flex: 1 1 auto;
	min-height: 0;
}

/* Chat Container - fills remaining space */
.lj-sidebar__chat-container {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.lj-sidebar__chat-container > .lj-inbox-teachers--inline {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Voice Container - fills remaining space */
.lj-sidebar__voice-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.lj-sidebar__section{margin:0 0 var(--lj-sidebar-section-gap, 16px) 0;padding:0}
.lj-sidebar__section:last-child{margin-bottom:0}
.lj-sidebar__section-title{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:#0f172a;text-transform:uppercase}
.lj-chat-sidebar{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(15,23,42,.12);border-radius:14px;background:#f8fafc;box-shadow:none}
.lj-chat-sidebar__icon{width:70px;height:70px;border-radius:18px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent}
.lj-chat-sidebar__icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.lj-chat-sidebar__icon-fallback{color:#2563eb;opacity:.95}
.lj-chat-sidebar__actions{display:flex;flex-direction:column;gap:10px;flex:1}
.lj-chat-sidebar__button{display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:color .2s ease,border-color .2s ease,transform .2s ease;border:1px solid transparent}
.lj-chat-sidebar__button--voice{background:#fdad40;border-color:#fdad40;color:#fff}
.lj-chat-sidebar__button--voice:hover{background:#fdad40;border-color:#fdad40;transform:translateY(-1px)}
.lj-chat-sidebar__button--text{background:#ffffff;border-color:#3366cc;color:#3366cc}
.lj-chat-sidebar__button--text:hover{background:#f0f6fc;border-color:#3366cc;color:#3366cc;transform:translateY(-1px)}
.lj-sidebar__section--badges{margin-top:0}
.lj-sidebar__badges-placeholder{padding:16px;border:1px dashed #cbd5e1;border-radius:8px;color:#64748b;font-size:13px;text-align:center}
.lj-sidebar__footer{margin-top:12px;color:#475569;font-size:12px;text-align:center}
.lj-admin-tools{padding:12px;border:1px solid rgba(239,68,68,0.2);border-radius:12px;background:rgba(239,68,68,0.05)}
.lj-admin-tools__title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#dc2626;margin-bottom:10px}
.lj-admin-tools__buttons{display:flex;flex-direction:column;gap:8px}
.lj-admin-tools__button{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(239,68,68,0.3);border-radius:8px;background:#fff;color:#dc2626;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s ease;width:100%}
.lj-admin-tools__button:hover:not(:disabled){background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.5);transform:translateY(-1px)}
.lj-admin-tools__button:active:not(:disabled){transform:translateY(0)}
.lj-admin-tools__button:disabled{opacity:0.5;cursor:not-allowed;background:#f3f4f6}
.lj-admin-tools__button svg{flex-shrink:0}
.lj-admin-tools__button-label{flex:1;text-align:left}
body.single-learning_node .lj-sidebar {
	border-left: 1px solid rgba(15, 23, 42, 0.08);
	overflow: hidden;
	height: 100%;
	max-height: 100%;
	position: relative;
	margin: 0;
	border-radius: 0;
}

/* When chat is open in learning node, prevent sidebar scroll */
body.single-learning_node .lj-sidebar.lj-sidebar--chat-open {
	overflow: hidden !important;
}

/* Single scroll container: main column + sidebar inner content */
body.single-learning_node .lj-sidebar > .lj-sidebar__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

body.single-learning_node .lj-sidebar > .lj-sidebar__content::-webkit-scrollbar {
	width: 6px;
}

body.single-learning_node .lj-sidebar > .lj-sidebar__content::-webkit-scrollbar-track {
	background: transparent;
}

body.single-learning_node .lj-sidebar > .lj-sidebar__content::-webkit-scrollbar-thumb {
	background: rgba(15, 23, 42, 0.15);
	border-radius: 3px;
	transition: background 0.2s ease;
}

body.single-learning_node .lj-sidebar > .lj-sidebar__content::-webkit-scrollbar-thumb:hover {
	background: rgba(15, 23, 42, 0.3);
}

body.single-learning_node .lj-sidebar--chat-open > .lj-sidebar__content {
	overflow: hidden;
}

body.single-learning_node .lj-sidebar--chat-open .lj-sidebar__voice-container {
	overflow: hidden;
}

/* Narrow rail: keep controls inside 88px column */
body.single-learning_node .lj-sidebar--collapsed {
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
}
/* Embedded in theme (non full-screen): compact card, natural height */
body:not(.single-learning_node) .lj-sidebar {
	position: sticky;
	position: -webkit-sticky;
	top: 64px;
	align-self: flex-start;
	height: max-content;
	max-height: none;
	border-radius: 16px;
	margin: 16px;
	padding: 16px;
}

/*
 * Non-fullscreen practice paper: when chat is open, give sidebar a viewport-bounded
 * height so chat can reliably split into messages (scroll) + footer (always visible).
 */
body:not(.single-learning_node) .lj-sidebar.lj-sidebar--practice-paper.lj-sidebar--chat-open {
	height: calc(100vh - 96px);
	height: calc(100dvh - 96px);
	max-height: calc(100vh - 96px);
	max-height: calc(100dvh - 96px);
	min-height: min(640px, calc(100vh - 96px));
	min-height: min(640px, calc(100dvh - 96px));
}

body:not(.single-learning_node) .lj-sidebar.lj-sidebar--practice-paper.lj-sidebar--chat-open > .lj-sidebar__content {
	overflow: hidden;
}
.lj-chapter__btn { background:#fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow: none; }
.lj-chapter__btn:hover { transform: translateY(-2px); box-shadow: none; border-color: rgba(51, 92, 255, 0.35); }
.lj-sidebar__section-title{margin:0 0 8px;font-size:14px;font-weight:600;color:#0f172a}
/* Horizontal rule before Notes / Inbox / Gradebook (expanded sidebar) */
.lj-sidebar__divider {
	border: 0;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
	margin: 0 0 var(--lj-sidebar-section-gap, 16px) 0;
	padding: 0;
	width: 100%;
}

.lj-sidebar__tools-stack {
	display: flex;
	flex-direction: column;
	gap: var(--lj-sidebar-section-gap, 16px);
}

/* Match Ask Your Teacher row: same avatar column width as chat section */
.lj-sidebar__section--tools {
	--lj-sidebar-row-avatar-size: 48px;
}

.lj-sidebar__section--tools .lj-inbox-teachers__row .lj-inbox-teachers__avatar {
	width: var(--lj-sidebar-row-avatar-size);
	height: var(--lj-sidebar-row-avatar-size);
	min-width: var(--lj-sidebar-row-avatar-size);
	min-height: var(--lj-sidebar-row-avatar-size);
	flex-shrink: 0;
	align-self: center;
}

.lj-sidebar__tools-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	line-height: 0;
}

.lj-sidebar__tools-row__icon svg {
	display: block;
	flex-shrink: 0;
}

/*
 * Notes / Gradebook / Inbox tool avatars: InboxModal.css defines `.lj-inbox-teachers__avatar { background: … }`
 * with the same single-class specificity, and it is bundled after this file, so it was winning the cascade.
 * Scope with #lj-runner + section + both classes so header-matched colours reliably apply.
 */
#lj-runner .lj-sidebar__section--tools .lj-inbox-teachers__avatar.lj-sidebar__tools-avatar--notes,
#lj-runner .lj-sidebar__section--tools .lj-inbox-teachers__avatar.lj-sidebar__tools-avatar--gradebook {
	background: var(--akademi-sidebar-bg-color, #193852);
}

#lj-runner .lj-sidebar__section--tools .lj-inbox-teachers__avatar.lj-sidebar__tools-avatar--notes .lj-sidebar__tools-row__icon,
#lj-runner .lj-sidebar__section--tools .lj-inbox-teachers__avatar.lj-sidebar__tools-avatar--gradebook .lj-sidebar__tools-row__icon {
	color: var(--akademi-sidebar-font-color, #ffffff);
}

#lj-runner .lj-sidebar__section--tools .lj-inbox-teachers__avatar.lj-sidebar__tools-avatar--inbox {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

#lj-runner .lj-sidebar__section--tools .lj-inbox-teachers__avatar.lj-sidebar__tools-avatar--inbox .lj-sidebar__tools-row__icon {
	color: #fff;
}
/* Voice controls toggle */
body.lj-voice-controls-disabled .lj-chat-sidebar__button--voice,
body.lj-voice-controls-disabled .lj-chat-action.lj-chat-mic {
	display: none !important;
}

/* --- Practice paper sidebar --- */

.lj-sidebar--practice-paper * {
	box-sizing: border-box;
}

/* Timer stack gap + fill row height (.lj-sidebar base owns width / flex / overflow) */
.lj-sidebar.lj-sidebar--practice-paper {
	gap: var(--lj-sidebar-section-gap, 16px);
	height: 100%;
}

/* Sidebar Content Area — scroll lives here (aside stays overflow:hidden) */
.lj-sidebar.lj-sidebar--practice-paper > .lj-sidebar__content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

/* Practice-paper + chat open: avoid sidebar-level scrolling hiding chat footer. */
.lj-sidebar.lj-sidebar--practice-paper.lj-sidebar--chat-open > .lj-sidebar__content {
	overflow: hidden;
}

.lj-sidebar.lj-sidebar--practice-paper > .lj-sidebar__content::-webkit-scrollbar {
	width: 6px;
}

.lj-sidebar.lj-sidebar--practice-paper > .lj-sidebar__content::-webkit-scrollbar-thumb {
	background: rgba(15, 23, 42, 0.15);
	border-radius: 3px;
}

/* Chat Container - fills remaining space */
.lj-sidebar__chat-container {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.lj-sidebar__chat-container > .lj-inbox-teachers--inline {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Node Title */
.lj-sidebar--practice-paper .lj-sidebar__node-title {
	width: 100%;
	max-width: 100%;
	padding: 0 0 var(--lj-sidebar-section-gap, 16px) 0;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #1d2327;
	border-bottom: 1px solid #e0e0e0;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	box-sizing: border-box;
}

/* Sidebar Sections — vertical rhythm: gap between sections only (no double padding) */
.lj-sidebar--practice-paper .lj-sidebar__section {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0 0 var(--lj-sidebar-section-gap, 16px) 0;
	overflow: visible;
	box-sizing: border-box;
}

.lj-sidebar--practice-paper .lj-sidebar__section:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

/* Timer Section */
.lj-sidebar--practice-paper .lj-sidebar__section--timer {
	padding: 0;
	margin-bottom: 0;
	overflow: visible; /* Allow glow effect to extend outside */
}

/* Timer sits outside scroll area */
.lj-sidebar--practice-paper > .lj-sidebar__section--timer {
	flex-shrink: 0;
}

.lj-timer-control__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: 100%;
	flex-wrap: wrap;
	background: #f6f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 0.75rem;
	box-sizing: border-box;
}

.lj-timer-control__display {
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
}

.lj-timer-control__time {
	font-size: 1.25rem;
	font-weight: 600;
	color: #2271b1;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
}

.lj-timer-control__time.warning {
	color: #d63638;
}

.lj-timer-control__warning {
	font-size: 0.75rem;
	color: #d63638;
	margin-top: 0.25rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.lj-timer-control__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.lj-timer-control__input-inline {
	width: 60px;
	padding: 0.375rem 0.5rem;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 0.875rem;
	text-align: center;
	box-sizing: border-box;
}

.lj-timer-control__input-inline:disabled {
	background: #f0f0f1;
	cursor: not-allowed;
}

.lj-timer-control__input-inline:focus {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
	border-color: #2271b1;
	box-shadow: none;
}

/* Timer Collapsed View */
.lj-timer-control__collapsed {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0.5rem;
	border-radius: 8px;
	background-color: #f6f7f7;
	border: 1px solid #e0e0e0;
	transition: background-color 0.3s ease;
	margin: 0.25rem;
}

/* Running timer animation - background only (no glow/shadow) */
.lj-timer-control__collapsed.is-running {
	animation: timerBackgroundPulse 3s ease-in-out infinite;
}

@keyframes timerBackgroundPulse {
	0%, 100% {
		background-color: #f6f7f7; /* Light gray */
	}
	50% {
		background-color: #e8f0fe; /* Light blue */
	}
}

/* Warning state animations - Red color */
@keyframes timerBackgroundPulseWarning {
	0%, 100% {
		background-color: #fee; /* Light red */
	}
	50% {
		background-color: #fcc; /* Brighter red */
	}
}

/* Warning timer animation - Override with red when warning */
.lj-timer-control__collapsed.is-running.is-warning {
	animation: timerBackgroundPulseWarning 2s ease-in-out infinite;
}

.lj-timer-control__collapsed .lj-timer-control__time {
	font-size: 1.125rem;
	font-weight: 600;
	text-align: center;
	padding: 0.25rem 0.5rem;
}

/* Warning text color */
.lj-timer-control__collapsed.is-warning .lj-timer-control__time {
	color: #dc2626;
}

/* Button Styles */
.lj-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #1d2327;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-sizing: border-box;
}

.lj-button:hover {
	background: #f0f0f0;
	border-color: #999;
}

.lj-button--primary {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

.lj-button--primary:hover {
	background: #135e96;
	border-color: #135e96;
}

.lj-button--secondary {
	background: #fff;
	color: #50575e;
}

.lj-button--small {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.lj-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Session Section */
.lj-sidebar--practice-paper .lj-sidebar__section--sessions {
	overflow: visible;
}

.lj-session-actions {
	padding: 0;
}

.lj-session-note {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: center;
	margin: 0.5rem 0 0 0;
}

/* Session Button Styles */
.lj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #1d2327;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-sizing: border-box;
}

.lj-btn:hover {
	background: #f0f0f0;
	border-color: #999;
}

.lj-btn--primary {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

.lj-btn--primary:hover {
	background: #135e96;
	border-color: #135e96;
}

.lj-btn--secondary {
	background: #fff;
	color: #50575e;
	border-color: #ddd;
}

.lj-btn--secondary:hover {
	background: #f6f7f7;
	border-color: #999;
}

.lj-btn--block {
	display: flex;
	width: 100%;
}

.lj-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Chapters Section */
.lj-sidebar--practice-paper .lj-sidebar__section--chapters {
	padding: 0;
	overflow: visible;
	border-bottom: none;
	box-shadow: none;
}

.lj-sidebar--practice-paper .lj-sidebar__section--chapters .lj-chapter__icon,
.lj-sidebar--practice-paper .lj-sidebar__section--chapters .lj-chapter__icon:hover:not(:disabled),
.lj-sidebar--practice-paper .lj-sidebar__section--chapters .lj-chapter__icon.is-active,
.lj-sidebar--practice-paper .lj-sidebar__section--chapters .lj-chapter__icon.is-completed:hover:not(:disabled) {
	box-shadow: none;
}

.lj-chapters {
	width: 100%;
	max-width: 100%;
	overflow: visible;
	padding: 0;
}

.lj-chapters__title {
	font-size: 1rem;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 1rem 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lj-chapters__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lj-chapter {
	margin: 0;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.lj-chapter__btn {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	text-align: left;
	color: inherit;
	overflow: visible;
	box-sizing: border-box;
}

.lj-chapter__btn:hover {
	background: #f0f6fc;
	border-color: #2271b1;
}

.lj-chapter.is-active .lj-chapter__btn {
	background: #f0f6fc;
	border-color: #2271b1;
	box-shadow: none;
}

.lj-chapter__index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	background: #2271b1;
	border-radius: 50%;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	flex-shrink: 0;
}

.lj-chapter__title {
	flex: 1;
	font-size: 1rem;
	font-weight: 500;
	color: #1d2327;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Chapters Collapsed View */
.lj-chapters__collapsed {
	display: flex;
	flex-direction: column;
	gap: var(--lj-sidebar-collapsed-stack-gap, 12px);
	width: 100%;
	align-items: center;
	padding: 0;
}

.lj-chapter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	background: #2271b1;
	border: 2px solid #2271b1;
	border-radius: 50%;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lj-chapter__icon:hover:not(:disabled) {
	background: #135e96;
	border-color: #135e96;
	transform: scale(1.05);
}

.lj-chapter__icon.is-active {
	background: #f0f6fc;
	color: #2271b1;
	border-color: #2271b1;
	box-shadow: none;
}

.lj-chapter__icon.is-completed {
	background: #dcfce7;
	border-color: #16a34a;
	color: #166534;
}

.lj-chapter__icon.is-completed:hover:not(:disabled) {
	background: #bbf7d0;
	border-color: #15803d;
}

.lj-chapter__icon.is-locked {
	background: #fef2f2;
	border-color: #d32f2f;
	color: #721c24;
	cursor: not-allowed;
}

.lj-chapter__icon:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Locked Chapter */
.lj-chapter.is-locked {
	opacity: 1;
}

.lj-chapter__locked {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 1rem;
	background: #fef2f2;
	border: 2px solid #d63638;
	border-radius: 6px;
	cursor: default;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}

.lj-chapter__locked .lj-chapter__index {
	background: #d63638;
}

.lj-chapter__locked .lj-chapter__title {
	color: #721c24;
}

.lj-chapter__lock-icon {
	font-size: 1rem;
	flex-shrink: 0;
}

.lj-chapter__dismiss {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	background: transparent;
	border: none;
	color: #721c24;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s ease;
	flex-shrink: 0;
	z-index: 1;
}

.lj-chapter__dismiss:hover {
	background: rgba(114, 28, 36, 0.1);
}

/* Chat Section */
.lj-sidebar--practice-paper .lj-sidebar__section--chat {
	padding: 0;
}

.lj-chat-sidebar {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	box-sizing: border-box;
	box-shadow: none;
}

.lj-chat-sidebar__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	overflow: hidden;
}

.lj-chat-sidebar__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lj-chat-sidebar__actions {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	overflow: visible;
}

.lj-chat-sidebar__button {
	width: 100%;
	max-width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid #2271b1;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	overflow: visible;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

.lj-chat-sidebar__button:hover {
	background: #135e96;
	border-color: #135e96;
}

.lj-chat-sidebar__button--text {
	background: #fff;
	color: #2271b1;
	border-color: #2271b1;
}

.lj-chat-sidebar__button--text:hover {
	background: #f0f6fc;
}

.lj-chat-sidebar__button--voice {
	background: #2271b1;
	color: #fff;
}

/* Chat Collapsed View */
.lj-chat-sidebar__collapsed {
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.lj-chat-sidebar__collapsed img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lj-chat-sidebar__collapsed:hover {
	transform: scale(1.1);
}

/* Chat Disabled State */
.lj-chat-sidebar.is-disabled,
.lj-chat-sidebar__collapsed.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lj-chat-sidebar__collapsed.is-disabled:hover {
	transform: none;
}

.lj-chat-sidebar.is-disabled img,
.lj-chat-sidebar__collapsed.is-disabled img {
	filter: grayscale(100%);
}

.lj-chat-sidebar__disabled-message {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: left;
	padding: 0.5rem 0;
	line-height: 1.4;
}

/* Admin Tools Section */
.lj-sidebar--practice-paper .lj-sidebar__section--admin-tools {
	padding: 12px 10px;
	background: #f9f9f9;
	border-top: 2px solid #e0e0e0;
	border-radius: 8px;
}

.lj-admin-tools {
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.lj-admin-tools__title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #999;
	margin: 0 0 0.75rem 0;
	letter-spacing: 0.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lj-admin-tools__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.lj-admin-tools__button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	padding: 0.625rem 0.875rem;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #50575e;
	overflow: visible;
	box-sizing: border-box;
}

.lj-admin-tools__button:hover {
	background: #f6f7f7;
	border-color: #999;
}

.lj-admin-tools__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lj-admin-tools__button svg {
	flex-shrink: 0;
}

.lj-admin-tools__button-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.lj-admin-tools__button.is-active {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.4);
	color: #16a34a;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.lj-sidebar--practice-paper .lj-sidebar__node-title {
		font-size: 1.125rem;
	}

	.lj-sidebar--practice-paper {
		--lj-sidebar-section-gap: 14px;
	}

	.lj-timer-control__row {
		flex-direction: column;
		align-items: stretch;
	}

	.lj-timer-control__display {
		text-align: center;
		width: 100%;
	}

	.lj-timer-control__controls {
		width: 100%;
		justify-content: center;
	}

	.lj-chat-sidebar {
		flex-direction: column;
	}

	.lj-chat-sidebar__icon {
		align-self: center;
	}

	.lj-chat-sidebar__actions {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.lj-sidebar--practice-paper .lj-sidebar__node-title {
		font-size: 1rem;
	}

	.lj-sidebar--practice-paper {
		--lj-sidebar-section-gap: 12px;
		--lj-sidebar-collapsed-stack-gap: 10px;
	}

	.lj-chapter__btn {
		padding: 0.75rem 0.875rem;
	}

	.lj-chapter__title {
		font-size: 0.875rem;
	}
}


/* --- Chat widget (embedded + standalone) --- */

/* Chat Widget Container - Embedded in Sidebar */
.lj-sidebar__chat-container .lj-chat-widget {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	width: 100% !important;
	height: 100% !important;
	z-index: auto !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	margin: 0 !important;
	padding: 0 !important;
}

/* Chat Window (Embedded Mode) */
.lj-sidebar__chat-container .lj-chat-window {
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Embedded layout contract:
 * - messages area scrolls
 * - footer remains pinned in the visible chat frame
 */
.lj-sidebar__chat-container .lj-chat-window {
	display: grid !important;
	grid-template-rows: minmax(0, 1fr) auto;
}

/* Standalone Chat Widget (fallback for old behavior) */
.lj-chat-widget {
	position: fixed;
	top: 60px;
	right: 0;
	height: calc(100vh - 60px);
	width: 420px;
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.lj-chat-window {
	width: 100%;
	height: 100%;
	background: white;
	border-left: 1px solid #e0e0e0;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Chat Header */
/* Messages Area */
.lj-chat-messages {
	flex: 1;
	min-height: 0; /* Critical: allows flex child to shrink below content size */
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #f9fafb;
}

/* First message should have no extra top space */
.lj-sidebar__chat-container .lj-chat-message:first-child {
	margin-top: 0;
}

/* Compact footer for embedded chat */
.lj-sidebar__chat-container .lj-chat-footer {
	padding: 10px 12px 16px;
	margin-bottom: 4px;
}

/* Sidebar embedded chat: flat chrome (no message / control shadows) */
.lj-sidebar__chat-container .lj-chat-message-avatar,
.lj-sidebar__chat-container .lj-chat-message-content,
.lj-sidebar__chat-container .lj-chat-mic:hover,
.lj-sidebar__chat-container .lj-chat-send:hover:not(:disabled) {
	box-shadow: none !important;
}

/* Ask Akami (sidebar): match Ask Your Teacher / Inbox thread visuals */
.lj-sidebar__chat-container .lj-chat-messages {
	background: #fff;
	padding: 14px 12px 16px;
	gap: 8px;
	min-height: 0;
	overflow-y: auto;
}

.lj-sidebar__chat-container .lj-chat-welcome {
	padding: 16px 12px 8px;
	color: #64748b;
	font-size: 0.88rem;
	line-height: 1.45;
	text-align: center;
}

.lj-sidebar__chat-container .lj-chat-welcome-icon {
	max-width: 64px;
	max-height: 64px;
	margin-bottom: 12px;
}

.lj-sidebar__chat-container .lj-chat-welcome-icon.lj-chat-avatar-akami {
	max-width: 56px;
	max-height: 56px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.lj-sidebar__chat-container .lj-chat-welcome p {
	margin: 0;
}

.lj-sidebar__chat-container .lj-chat-message {
	gap: 8px;
	align-items: flex-end;
}

/* Akami logo: flat, no circular frame (teacher thread uses real avatars in circles) */
.lj-sidebar__chat-container .lj-chat-avatar-akami {
	width: 36px;
	height: 36px;
	object-fit: contain;
	object-position: center bottom;
	flex-shrink: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Logged-in user: same circular treatment as .lj-inbox-teachers__chat-avatar */
.lj-sidebar__chat-container .lj-chat-avatar-user-wrap {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: #cbd5e1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.lj-sidebar__chat-container .lj-chat-avatar-user-wrap__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lj-sidebar__chat-container .lj-chat-message-content {
	max-width: min(100%, 260px);
	min-width: 0;
	padding: 10px 14px;
	border-radius: 18px;
	font-size: 0.88rem;
	line-height: 1.45;
	box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
	word-break: break-word;
}

.lj-sidebar__chat-container .lj-chat-message-assistant .lj-chat-message-content {
	background: #fbfbff;
	color: #1e293b;
	border: 1px solid rgba(55, 95, 85, 0.2);
	border-bottom-left-radius: 6px;
}

.lj-sidebar__chat-container .lj-chat-message-user .lj-chat-message-content {
	background: #e4ffe3;
	color: #1e293b;
	border: 1px solid rgba(67, 56, 202, 0.22);
	border-bottom-right-radius: 6px;
}

.lj-sidebar__chat-container .lj-chat-message-content p {
	font-size: inherit;
	line-height: inherit;
}

.lj-sidebar__chat-container .lj-chat-message-assistant .lj-chat-message-content a {
	color: #4f46e5;
}

.lj-sidebar__chat-container .lj-chat-message-user .lj-chat-message-content a {
	color: #4338ca;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lj-sidebar__chat-container .lj-chat-typing {
	background: #fbfbff;
	border: 1px solid rgba(55, 95, 85, 0.2);
	border-radius: 18px;
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}

.lj-sidebar__chat-container .lj-chat-error {
	margin: 0 12px 8px;
	font-size: 0.85rem;
	border-radius: 10px;
}

.lj-sidebar__chat-container .lj-chat-footer--embedded {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 12px 16px 14px;
	margin-bottom: 0;
	border-top: 1px solid #e2e8f0;
	background: #fff;
	gap: 10px;
	position: sticky;
	bottom: 0;
	z-index: 2;
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-chat-embedded-compose {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

.lj-sidebar__chat-container .lj-chat-embedded-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: nowrap;
}

.lj-sidebar__chat-container .lj-chat-input--embedded {
	box-sizing: border-box;
	width: 100%;
	flex: 0 0 auto;
	min-width: 0;
	min-height: 72px;
	max-height: 120px;
	resize: vertical;
	margin-top: 0;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 0.9rem;
}

.lj-sidebar__chat-container .lj-chat-input--embedded:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

.lj-sidebar__chat-container .lj-chat-send--embedded-icon {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	background: var(--akademi-sidebar-bg-color, #193852);
	color: var(--akademi-sidebar-font-color, #ffffff);
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-chat-send--embedded-icon:hover:not(:disabled) {
	filter: brightness(1.08);
	transform: none;
	box-shadow: none !important;
}

.lj-sidebar__chat-container .lj-chat-send--embedded-icon:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.lj-sidebar__chat-container .lj-chat-send-arrow-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-chat-close--embedded {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #475569;
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-chat-close--embedded:hover {
	background: #f8fafc;
	color: #0f172a;
	border-color: #cbd5e1;
}

.lj-sidebar__chat-container .lj-chat-footer--embedded .lj-chat-limits {
	width: 100%;
	margin: 4px 0 0;
	padding: 0;
	font-size: 0.75rem;
	color: #64748b;
	text-align: center;
}

/*
 * Short tablet viewports: keep footer controls (close + limits) visible.
 * We compact the embedded footer/input chrome so the messages pane gives up space first.
 */
@media (max-height: 820px) {
	.lj-sidebar__chat-container .lj-chat-messages {
		padding: 10px 10px 12px;
		gap: 6px;
	}

	.lj-sidebar__chat-container .lj-chat-footer--embedded {
		padding: 8px 12px 10px;
		gap: 6px;
	}

	.lj-sidebar__chat-container .lj-chat-input--embedded {
		min-height: 52px;
		max-height: 84px;
		resize: none;
	}

	.lj-sidebar__chat-container .lj-chat-close--embedded {
		width: 32px;
		height: 32px;
		min-width: 32px;
		border-radius: 8px;
	}

	.lj-sidebar__chat-container .lj-chat-send--embedded-icon {
		width: 32px;
		height: 32px;
		min-width: 32px;
		border-radius: 8px;
	}

	.lj-sidebar__chat-container .lj-chat-footer--embedded .lj-chat-limits {
		margin-top: 2px;
		font-size: 0.72rem;
	}
}

@media (max-height: 700px) {
	.lj-sidebar__chat-container .lj-chat-footer--embedded {
		padding: 6px 10px 8px;
	}

	.lj-sidebar__chat-container .lj-chat-input--embedded {
		min-height: 44px;
		max-height: 68px;
	}
}

.lj-chat-messages::-webkit-scrollbar {
	width: 6px;
}

.lj-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

.lj-chat-messages::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

.lj-chat-messages::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Welcome Message */
.lj-chat-welcome {
	text-align: center;
	padding: 24px 16px;
	color: #6b7280;
}

.lj-chat-welcome-icon {
	display: block;
	max-width: 80px;
	max-height: 80px;
	width: auto;
	height: auto;
	margin: 0 auto 16px;
	object-fit: contain;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.lj-chat-welcome p {
	margin: 0;
	line-height: 1.6;
}

.lj-chat-welcome strong {
	color: #111827;
	font-size: 18px;
}

/* Chat Messages */
.lj-chat-message {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	animation: fadeIn 0.3s ease;
	max-width: 100%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lj-chat-message-assistant {
	align-self: flex-start;
}

.lj-chat-message-user {
	flex-direction: row;
	align-self: flex-end;
	justify-content: flex-end;
	margin-left: auto;
}

.lj-chat-message-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	object-fit: contain;
	background: rgba(255, 255, 255, 0.9);
}

.lj-chat-message-content {
	background: white;
	padding: 12px 16px;
	border-radius: 12px;
	max-width: 75%;
	min-width: 120px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.lj-chat-message-user .lj-chat-message-content {
	background: #2079b0;
	color: #fff;
	text-align: start;
}

.lj-chat-message-content p {
	margin: 0;
	line-height: 1.5;
	font-size: 14px;
	white-space: pre-line;
	word-break: break-word;
}

/* Typing Indicator */
.lj-chat-typing {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 12px 16px;
}

.lj-chat-typing span {
	width: 8px;
	height: 8px;
	background: #9ca3af;
	border-radius: 50%;
	animation: typing 1.4s infinite ease-in-out;
}

.lj-chat-typing span:nth-child(2) {
	animation-delay: 0.2s;
}

.lj-chat-typing span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes typing {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.5;
	}
	30% {
		transform: translateY(-8px);
		opacity: 1;
	}
}

/* Error Message */
.lj-chat-error {
	margin: 0 20px;
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #991b1b;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	animation: shake 0.3s ease;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.lj-chat-error svg {
	flex-shrink: 0;
}

/* Rate Limits */
.lj-chat-limits {
	padding: 8px 20px;
	font-size: 13px;
	color: #6b7280;
	text-align: center;
	width: calc(100% + 40px);
	align-self: center;
	margin: 0 -20px;
}

/* Input Area */
.lj-chat-footer {
	flex-shrink: 0; /* Critical: prevents footer from being squeezed/pushed off screen */
	padding: 12px 16px 16px;
	margin-bottom: 8px;
	border-top: 1px solid #e5e7eb;
	background: white;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lj-chat-input {
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
	margin-top: 0;
}

.lj-chat-input:focus {
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.lj-chat-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.lj-chat-action {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	flex-shrink: 0;
	cursor: pointer;
}

.lj-chat-action svg {
	pointer-events: none;
}

.lj-chat-mic {
	border: 1px solid #d1d5db;
	background: white;
	color: #111827;
}

.lj-chat-mic:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.lj-chat-mic.active {
	background: #dcfce7;
	border-color: #86efac;
	color: #065f46;
}

.lj-chat-send {
	border: none;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.lj-chat-send:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.lj-chat-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lj-chat-close {
	padding: 0;
	border: 1px solid #d1d5db;
	background: white;
	color: #111827;
}

.lj-chat-close:hover {
	background: #1f2937;
	color: #fff;
	border-color: #1f2937;
}

/* Reset padding for buttons inside chat only */
.lj-chat-window button:not(.lj-chat-close),
.lj-chat-window .wp-block-button__link,
.lj-chat-window .wp-element-button,
.lj-chat-window input[type=button],
.lj-chat-window input[type=reset],
.lj-chat-window input[type=submit] {
	padding: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
	.lj-chat-window {
		width: 100%;
		height: 100vh;
		max-height: 100vh;
		min-height: 100vh;
		border-radius: 0;
	}
}

/* Small screens */
@media (max-height: 700px) {
	.lj-chat-window {
		min-height: calc(100vh - 80px);
		max-height: calc(100vh - 80px);
		height: calc(100vh - 80px);
	}
}

/* Match .lj-header / Akademi sidebar tokens (duplicated from learning-node-shell.css for wp_enqueue-only loads) */
#lj-runner .lj-button--primary,
#lj-runner .button-primary {
	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
#lj-runner .lj-button--primary:hover:not(:disabled),
#lj-runner .lj-button--primary:focus:not(:disabled),
#lj-runner .button-primary:hover:not(:disabled),
#lj-runner .button-primary:focus:not(:disabled) {
	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
#lj-runner .lj-button--primary:active:not(:disabled),
#lj-runner .button-primary:active:not(:disabled) {
	filter: brightness(0.95);
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

/* Assignment (student): message assigning teacher under Ask Akami / below collapsed chat icon */
.lj-sidebar__section--chat-collapsed-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lj-sidebar-collapsed-stack-gap, 12px);
}

.lj-sidebar__assigning-teacher--collapsed {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid rgba(37, 99, 235, 0.35);
	background: #fff;
	padding: 0;
	margin: 0 auto;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-sidebar__assigning-teacher--collapsed:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.lj-sidebar__assigning-teacher--collapsed:focus-visible {
	outline: 2px solid rgba(37, 99, 235, 0.45);
	outline-offset: 2px;
}

.lj-sidebar__assigning-teacher--collapsed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lj-sidebar__assigning-teacher-initial {
	font-size: 1.15rem;
	font-weight: 700;
	color: #2563eb;
	line-height: 1;
}

/* Expanded chat section: same vertical rhythm as between other sidebar blocks */
.lj-sidebar:not(.lj-sidebar--collapsed) .lj-sidebar__section--chat {
	display: flex;
	flex-direction: column;
	gap: var(--lj-sidebar-section-gap, 16px);
}

/* Akami + teacher row avatars share one slot size */
.lj-sidebar__section--chat {
	--lj-sidebar-row-avatar-size: 48px;
}

.lj-sidebar__section--chat .lj-inbox-teachers__row .lj-inbox-teachers__avatar {
	width: var(--lj-sidebar-row-avatar-size);
	height: var(--lj-sidebar-row-avatar-size);
	min-width: var(--lj-sidebar-row-avatar-size);
	min-height: var(--lj-sidebar-row-avatar-size);
	flex-shrink: 0;
	align-self: center;
}

.lj-sidebar__assigning-teacher-cta {
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}

/* Akami row: same slot as teacher, but no circular frame */
.lj-inbox-teachers__avatar.lj-sidebar__chat-ask-row__avatar {
	border-radius: 0;
	background: none;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-sidebar__section--chat .lj-sidebar__chat-ask-row__avatar img {
	display: block;
	max-width: var(--lj-sidebar-row-avatar-size);
	max-height: var(--lj-sidebar-row-avatar-size);
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 0;
	box-sizing: border-box;
}

.lj-sidebar__chat-ask-row__glyph {
	display: block;
	color: #2563eb;
	flex-shrink: 0;
	opacity: 0.95;
}

.lj-sidebar__chat-ask-row--disabled {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

.lj-sidebar__chat-ask-row--disabled img {
	filter: grayscale(100%);
}

/* --- Marking / submission progress modals: Akami avatar (LJ_CFG.chatIcon, same as chat widget) --- */
.lj-marking-modal-akami-host {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.5rem;
	animation: lj-marking-modal-akami-bounce 1s ease-in-out infinite;
}

@keyframes lj-marking-modal-akami-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

/* Marking report chapter: waiting-for-submission (spacing handled by parent flex gap) */
.marking-report-waiting__akami.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 72px;
	height: 72px;
	max-width: 72px;
	max-height: 72px;
	object-fit: contain;
	object-position: center bottom;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	flex-shrink: 0;
}

.lj-marking-modal-akami-emoji {
	font-size: 4.5rem;
	line-height: 1;
	display: block;
}

@media (max-width: 768px) {
	.lj-marking-modal-akami-emoji {
		font-size: 3.5rem;
	}

	.lj-marking-modal-akami.lj-chat-avatar-akami {
		width: 56px;
		height: 56px;
		max-width: 56px;
		max-height: 56px;
	}
}
/* Card Variants */
.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* Shared Body Helpers */



/* AI Practice Specific */
.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(99, 102, 241, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #3730a3; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__sentence { color: #0f172a; padding: 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Error Highlighting for AI Open-Ended Questions */
.lj-card__feedback .error-highlight {
	background: #fee;
	color: #c00;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: 600;
	display: inline;
	margin: 0;
}

/* Sentence Error Highlight Card */
.lj-sentence-error-highlight {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-sentence-error-highlight__level {
	margin-bottom: 8px;
	color: #64748b;
}

.lj-sentence-error-highlight__instructions {
	margin-bottom: 16px;
	color: #0f172a;
}

.lj-sentence-error-highlight__sentence {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	min-height: 60px;
	align-items: center;
}

.lj-sentence-error-highlight__token {
	padding: 6px 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
	user-select: none;
}

.lj-sentence-error-highlight__token--default {
	background: transparent;
	color: #0f172a;
}

.lj-sentence-error-highlight__token--default:hover {
	background: rgba(99, 102, 241, 0.1);
}

.lj-sentence-error-highlight__token--selected {
	background: rgba(99, 102, 241, 0.2);
	color: #4f46e5;
	border: 2px solid #6366f1;
	font-weight: 600;
}

.lj-sentence-error-highlight__token--correct {
	background: rgba(22, 163, 74, 0.2);
	color: #15803d;
	border: 2px solid #16a34a;
	font-weight: 600;
}

.lj-sentence-error-highlight__token--incorrect {
	background: rgba(239, 68, 68, 0.2);
	color: #b91c1c;
	border: 2px solid #ef4444;
	font-weight: 600;
}

.lj-sentence-error-highlight__token--missed {
	background: rgba(251, 191, 36, 0.2);
	color: #d97706;
	border: 2px dashed #fbbf24;
	font-weight: 600;
}

.lj-sentence-error-highlight__actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.lj-sentence-error-highlight__reset {
	color: #64748b;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-size: inherit;
}

.lj-sentence-error-highlight__reset:hover {
	color: #475569;
}

.lj-sentence-error-highlight__feedback {
	padding: 16px;
	border-radius: 12px;
	margin-top: 8px;
}

.lj-sentence-error-highlight__feedback--correct {
	background: rgba(22, 163, 74, 0.1);
	border: 1px solid rgba(22, 163, 74, 0.3);
	color: #15803d;
}

.lj-sentence-error-highlight__feedback--incorrect {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #b91c1c;
}

.lj-sentence-error-highlight__rationales {
	margin-top: 12px;
	padding-left: 20px;
	list-style-type: disc;
}

.lj-sentence-error-highlight__rationales li {
	margin-top: 8px;
	color: #1e293b;
}
/* Override all button margin-top globally */
#lj-runner button,
#lj-runner .button,
button.button,
button {
	margin-top: 0 !important;
}

/* Content Card Variants */
.lj-card.lj-card--content { background: inherit; }
.lj-card.lj-card--content-examples {
	background: inherit;
	border: 1px solid rgba(59, 130, 246, 0.12);
	box-shadow: 0 18px 45px -28px rgba(30, 64, 175, 0.3);
}
.lj-card.lj-card--example { background: inherit; border: 1px solid rgba(51, 92, 255, 0.15); }
.lj-card.lj-card--concept-breakdown,
.lj-card.lj-card--model-walkthrough {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}
.lj-card.lj-card--grammar-pattern-grid,
.lj-card.lj-card--sentence-diagnostic {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Did You Know Card */
.lj-card.lj-card--did-you-know {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.25);
}

.lj-didyouknow {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

@media (min-width: 900px) {
	.lj-didyouknow {
		grid-template-columns: 1fr 1.3fr;
	}
}

.lj-didyouknow__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-didyouknow__imageWrapper {
	position: relative;
	width: 100%;
	max-width: 520px;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(15, 23, 42, 0.06);
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-didyouknow__image {
	display: block;
	width: 100%;
	height: auto;
}

.lj-didyouknow__imageFallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	font-size: 48px;
	color: #0f172a;
}

.lj-didyouknow__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #53b4c4;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 6px 14px rgba(15, 23, 42, 0.2);
}

.lj-didyouknow__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.lj-didyouknow .lj-card__html p {
	text-align: justify;
}

/* Canva Embed Card */
.lj-card.lj-card--canva-embed {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.25);
}

.lj-canva-embed {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-canva-embed__wrapper {
	width: 100%;
	min-height: 400px;
	border-radius: 8px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lj-canva-embed__iframe {
	display: block;
}

.lj-canva-embed__error {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 24px;
	background: rgba(239, 68, 68, 0.05);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 8px;
	color: rgb(153, 27, 27);
	text-align: center;
}

/* Content Examples Card */
.lj-content-card__layout {
	display: grid;
	gap: 28px;
	align-items: stretch;
}

.lj-content-card__layout:not(.has-examples) {
	min-height: 250px;
}

@media (min-width: 960px) {
	.lj-content-card__layout.has-examples {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.lj-content-card__main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 6px;
	align-items: stretch;
}

.lj-content-card__main.has-icon {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	align-self: stretch;
}

.lj-content-card__icon {
	font-size: 32px;
	line-height: 1;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}

.lj-content-card__main.has-icon .lj-card__html {
	flex: 0 1 auto;
}

.lj-content-card__main .lj-card__html p {
	text-align: justify;
}

.lj-content-card__examples {
	position: relative;
	border-radius: 20px;
	background: linear-gradient(135deg, #fdf2ff 0%, #e0f2fe 100%);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border: 1px solid rgba(148, 163, 184, 0.25);
	box-shadow: 0 14px 32px -28px rgba(15, 23, 42, 0.45);
	overflow: hidden;
}

.lj-content-card__examplesTitle {
	margin: 0;
	color: #0b1120;
}

.lj-content-card__examplesList.lj-card__list {
	margin: 0;
	padding-left: 20px;
	gap: 10px;
	color: #0f172a;
}

.lj-content-card__examplesList.lj-card__list li::marker {
	color: #1d4ed8;
}

.lj-content-card__examplesList.lj-card__list li {
	background: #ffffff;
	border-radius: 13px;
	padding: 10px 14px;
	box-shadow: 0 10px 30px -26px rgba(15, 23, 42, 0.55);
	border: 1px solid rgba(148, 163, 184, 0.3);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lj-content-card__examplesList.lj-card__list li:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px -30px rgba(15, 23, 42, 0.6);
	border-color: rgba(59, 130, 246, 0.55);
	background: #e5edff;
}

/* Animated Explanation Card */
.lj-animated-explanation {
	overflow: visible;
}

.lj-animated-explanation__layout {
	display: grid;
	gap: 28px;
	align-items: stretch;
	overflow: visible;
}

@media (min-width: 960px) {
	.lj-animated-explanation__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.lj-animated-explanation__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lj-animated-explanation__content .lj-card__html p {
	text-align: justify;
}

.lj-animated-explanation__animation {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: visible;
}

.lj-card:has(.lj-animated-explanation) {
	overflow: visible;
}

.lj-animated-explanation__animation-container {
	position: relative;
	min-height: 50px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 24px 24px 24px;
	overflow: visible;
}

.lj-animated-explanation__sentence-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.lj-animated-explanation__container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 16px;
	border-radius: 12px;
	background: #ffffff;
	border: 2px solid rgba(15, 23, 42, 0.1);
	transition: all 0.4s ease;
	width: 100%;
	max-width: 100%;
	position: relative;
	min-height: 160px;
	overflow: visible;
}

.lj-animated-explanation__container--complete {
	border-color: rgba(22, 163, 74, 0.3);
	background: rgba(22, 163, 74, 0.05);
}

.lj-animated-explanation__container--fragment {
	border-color: rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.05);
}

.lj-animated-explanation__tiles-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow-x: auto;
}

.lj-animated-explanation__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: 6px;
	background: #53b4c4;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	border: 2px solid rgba(255, 255, 255, 0.3);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	min-width: fit-content;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(83, 180, 196, 0.2);
	white-space: nowrap;
}

.lj-animated-explanation__tile--visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.lj-animated-explanation__tile--lifted {
	animation: tileLiftUp 0.8s ease-out forwards;
	z-index: 10;
	background: rgba(239, 68, 68, 0.9);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

.lj-animated-explanation__tile--restoring {
	animation: tileRestore 0.6s ease-out forwards;
	z-index: 10;
}

@keyframes tileLiftUp {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-100px) scale(0.8);
	}
}

@keyframes tileRestore {
	0% {
		opacity: 0;
		transform: translateY(-100px) scale(0.8);
		background: rgba(239, 68, 68, 0.9);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		background: #53b4c4;
	}
}


.lj-animated-explanation__explanation {
	padding: 12px 18px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	transition: all 0.4s ease;
	animation: explanationAppear 0.5s ease-out;
	max-width: 100%;
	margin: 0;
}

.lj-animated-explanation__explanation--complete {
	background: rgba(22, 163, 74, 0.1);
	color: #15803d;
	border: 2px solid rgba(22, 163, 74, 0.3);
}

.lj-animated-explanation__explanation--fragment {
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
	border: 2px solid rgba(239, 68, 68, 0.3);
}

@keyframes explanationAppear {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.lj-animated-explanation__label {
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
}

.lj-animated-explanation__label--complete {
	background: rgba(22, 163, 74, 0.15);
	color: #15803d;
	border: 2px solid rgba(22, 163, 74, 0.3);
}

.lj-animated-explanation__label--fragment {
	background: rgba(239, 68, 68, 0.15);
	color: #b91c1c;
	border: 2px solid rgba(239, 68, 68, 0.3);
	animation: fragmentPulse 1s ease-in-out;
}

.lj-animated-explanation__label--default {
	background: rgba(99, 102, 241, 0.15);
	color: #4f46e5;
	border: 2px solid rgba(99, 102, 241, 0.3);
}

@keyframes fragmentPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.9;
	}
}

.lj-animated-explanation__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding-top: 12px;
}

.lj-animated-explanation__control-button {
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	background: #ffffff;
	color: #0f172a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lj-animated-explanation__control-button:hover {
	background: rgba(15, 23, 42, 0.05);
	border-color: rgba(15, 23, 42, 0.3);
	transform: translateY(-1px);
}

.lj-animated-explanation__steps {
	display: flex;
	gap: 8px;
	margin-left: 12px;
}

.lj-animated-explanation__step-button {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	background: #ffffff;
	color: #0f172a;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-animated-explanation__step-button:hover {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.4);
}

.lj-animated-explanation__step-button.is-active {
	background: rgba(99, 102, 241, 0.2);
	border-color: #6366f1;
	color: #4f46e5;
	font-weight: 700;
}

/* Grammar Pattern Grid */
.lj-grammar-grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lj-grammar-grid__intro {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-grammar-grid__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lj-grammar-grid__item {
	background: rgba(255, 255, 255, 0.92);
	border-radius: 18px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.45);
}

.lj-grammar-grid__itemHeader {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-grammar-grid__pattern {
	margin: 0;
}

.lj-grammar-grid__section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-grammar-grid__sectionLabel {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #1d4ed8;
}

.lj-grammar-grid__example,
.lj-grammar-grid__note {
	background: rgba(248, 250, 252, 0.92);
	border-radius: 14px;
	padding: 16px 18px;
	border: 1px solid rgba(15, 23, 42, 0.05);
}

/* Media Spotlight Card */
.lj-media-spotlight {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-media-spotlight__intro,
.lj-media-spotlight__footnote {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-media-spotlight__mediaSection {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-media-spotlight__iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 16px;
	overflow: hidden;
	background: #0f172a;
}

.lj-media-spotlight__iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lj-media-spotlight__audio {
	width: 100%;
}

.lj-media-spotlight__mediaCaption {
	margin: 0;
	color: #0f172a;
}

.lj-media-spotlight__transcriptLink {
	color: #1d4ed8;
	text-decoration: underline;
}

.lj-media-spotlight__highlights {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-media-spotlight__highlightsTitle {
	margin: 0;
	color: #0f172a;
}

.lj-media-spotlight__highlightList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lj-media-spotlight__highlightItem {
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(255, 255, 255, 0.92);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-media-spotlight__highlightHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.lj-media-spotlight__highlightLabel {
	color: #0f172a;
}

.lj-media-spotlight__highlightTime {
	color: #2563eb;
}

.lj-media-spotlight__mediaFallback,
.lj-audio-annotation__playerFallback {
	padding: 20px;
	border-radius: 16px;
	background: rgba(248, 113, 113, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

/* English Banner Card */
.lj-english-banner {
	position: relative;
	overflow: hidden;
	color: #0b1027;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

.lj-english-banner__bg {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 45%, #ffe4e6 100%);
	animation: lj-biology-banner-bg 12s ease-in-out infinite;
	z-index: -2;
}

.lj-english-banner__shapes {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	z-index: -1;
}

.lj-english-banner__shape {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(59,130,246,0.25), rgba(59,130,246,0) 70%);
	animation: lj-float 9s ease-in-out infinite;
}

.lj-english-banner__shape:nth-child(1) { top: -36px; left: -32px; animation-delay: .15s; }
.lj-english-banner__shape:nth-child(2) { bottom: -30px; right: -28px; animation-delay: .85s; }
.lj-english-banner__shape:nth-child(3) { top: 18%; right: 20%; width: 120px; height: 120px; animation-delay: 1.5s; }

.lj-english-banner__content { text-align: center; }
.lj-english-banner__top {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: #1e293b;
	opacity: .95;
	transform: translateY(6px);
	animation: lj-slide-up .6s ease-out .05s both;
}

.lj-english-banner__top span {
	background: linear-gradient(90deg, #1d4ed8, #0f172a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lj-english-banner__main {
	margin: 6px 0 4px 0;
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	background: linear-gradient(90deg, #1d4ed8, #6366f1, #ec4899);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lj-fade-in .55s ease-out .15s both;
}

.lj-english-banner__subtitle {
	margin-top: 8px;
	color: #1e293b;
	opacity: .96;
}

/* Media Gallery Card */
.lj-media-gallery {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-media-gallery__intro,
.lj-media-gallery__footnote {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-media-gallery__items {
	display: grid;
	gap: 18px;
}

.lj-media-gallery__items--grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lj-media-gallery__items--carousel {
	display: flex;
	overflow-x: auto;
	gap: 16px;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
}

.lj-media-gallery__items--carousel .lj-media-gallery__item {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.lj-media-gallery__item {
	border-radius: 18px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(255, 255, 255, 0.94);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 14px 34px -26px rgba(15, 23, 42, 0.4);
}

.lj-media-gallery__mediaWrapper {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: rgba(15, 23, 42, 0.08);
}

.lj-media-gallery__image {
	display: block;
	width: 100%;
	height: auto;
}

.lj-media-gallery__caption,
.lj-media-gallery__note {
	margin: 0;
}

.lj-media-gallery__empty {
	margin: 0;
	color: #475569;
}

/* Concept Breakdown Card */
.lj-concept-card {
	display: grid;
	gap: 24px;
}

@media (min-width: 960px) {
	.lj-concept-card.has-spotlights {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.lj-concept-card__intro {
	border-radius: 16px;
	background: rgba(241, 245, 249, 0.6);
	padding: 18px;
	margin-bottom: 16px;
}

.lj-concept-card__sections {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-concept-card__section {
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(255, 255, 255, 0.72);
	padding: 0;
	overflow: hidden;
}

.lj-concept-card__sectionSummary {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	list-style: none;
	padding: 18px 20px;
	cursor: pointer;
}

.lj-concept-card__sectionSummary::-webkit-details-marker {
	display: none;
}

.lj-concept-card__sectionIndicator {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	position: relative;
}

.lj-concept-card__sectionIndicator::before,
.lj-concept-card__sectionIndicator::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: #1e293b;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.lj-concept-card__sectionIndicator::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.lj-concept-card__sectionTitle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-align: left;
}

.lj-concept-card__sectionTitleIcon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #38bdf8;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65), 0 6px 14px rgba(15, 23, 42, 0.18);
}

.lj-concept-card__section:nth-child(2) .lj-concept-card__sectionTitleIcon {
	background: #fb923c;
}

.lj-concept-card__section:nth-child(3) .lj-concept-card__sectionTitleIcon {
	background: #facc15;
}

.lj-concept-card__section:nth-child(n + 4) .lj-concept-card__sectionTitleIcon {
	background: #a855f7;
}

.lj-concept-card__section[open] .lj-concept-card__sectionIndicator::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.lj-concept-card__sectionBody {
	padding: 0 20px 20px;
}

.lj-concept-card__spotlights {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 22px;
	border-radius: 20px;
	background: #53b4c4;
	border: 1px solid rgba(37, 99, 235, 0.12);
}

.lj-concept-card__spotlightsTitle {
	margin: 0;
	color: #ffffff;
	text-align: center;
}

.lj-concept-card__spotlightsList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lj-concept-card__spotlight {
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.92);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-concept-card__spotlightTitle {
	margin: 0;
	color: #53b4c4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

.lj-concept-card__spotlightTitle::before {
	content: '';
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #38bdf8;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65), 0 6px 14px rgba(15, 23, 42, 0.18);
}

.lj-concept-card__spotlightsList li:nth-child(2) .lj-concept-card__spotlightTitle::before {
	background: #f97316;
}

.lj-concept-card__spotlightsList li:nth-child(3) .lj-concept-card__spotlightTitle::before {
	background: #a855f7;
}

.lj-concept-card__spotlightsList li:nth-child(n + 4) .lj-concept-card__spotlightTitle::before {
	background: #facc15;
}

/* Model Walkthrough Card */
.lj-model-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-model-card__excerpt {
	border-radius: 18px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(248, 250, 252, 0.85);
	padding: 20px 95px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
}

.lj-model-card__excerptTitle {
	margin: 0;
	color: #0f172a;
}

.lj-model-card__excerptLines {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lj-model-card__excerptParagraph {
	margin: 0;
	text-align: justify;
	line-height: 1.8;
}

.lj-model-card__excerptParagraph + .lj-model-card__excerptParagraph {
	margin-top: 6px;
}

.lj-model-card__excerptSegment {
	text-decoration-line: underline;
	text-decoration-color: var(--line-color, #38bdf8);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

.lj-model-card__excerptSegment > span {
	text-decoration: inherit;
}

.lj-model-card__excerptSpacer {
	white-space: pre;
}

.lj-model-card__excerptFooter {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.lj-model-card__excerptCount {
	color: #475569;
}

.lj-model-card__annotations {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lj-model-card__annotation {
	border-radius: 16px;
	border: 1px solid rgba(37, 99, 235, 0.12);
	background: rgba(255, 255, 255, 0.74);
	padding: 18px 20px;
	display: grid;
	grid-template-columns: auto minmax(0, 220px) minmax(0, 1fr);
	grid-template-areas: 'color meta body';
	column-gap: 16px;
	row-gap: 8px;
	align-items: start;
}

@media (max-width: 640px) {
	.lj-model-card__annotation {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: 'color meta' 'color body';
	}
}

.lj-model-card__annotationColor {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--annotation-color, #38bdf8);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 6px 14px rgba(15, 23, 42, 0.18);
	align-self: center;
	grid-area: color;
}

.lj-model-card__annotationMeta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	grid-area: meta;
}

.lj-model-card__annotationMetaHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.lj-model-card__annotationFocus {
	color: #0f172a;
}

.lj-model-card__annotationRange {
	color: #2563eb;
}

.lj-model-card__annotationDevice {
	color: #64748b;
}

.lj-model-card__annotationBody {
	grid-area: body;
	margin: 0;
	padding: 0;
}

@media (max-width: 640px) {
	.lj-model-card__annotationBody {
		margin-top: 4px;
	}
}

/* Audio Annotation Card */
.lj-audio-annotation {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-audio-annotation__intro,
.lj-audio-annotation__summary {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-audio-annotation__playerSection {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-audio-annotation__player {
	width: 100%;
}

.lj-audio-annotation__description {
	margin: 0;
	color: #0f172a;
}

.lj-audio-annotation__transcriptLink {
	color: #1d4ed8;
	text-decoration: underline;
}

.lj-audio-annotation__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-audio-annotation__listTitle {
	margin: 0;
	color: #0f172a;
}

.lj-audio-annotation__entries {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lj-audio-annotation__entry {
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(255, 255, 255, 0.92);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-audio-annotation__entryHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.lj-audio-annotation__time {
	color: #2563eb;
}

.lj-audio-annotation__label {
	color: #0f172a;
}


/* Sentence Diagnostic Card */
.lj-sentence-diagnostic {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-sentence-diagnostic__intro {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-sentence-diagnostic__block {
	border-radius: 18px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(255, 255, 255, 0.92);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	box-shadow: 0 16px 40px -30px rgba(15, 23, 42, 0.5);
}

.lj-sentence-diagnostic__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-sentence-diagnostic__label {
	color: #2563eb;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lj-sentence-diagnostic__sentence {
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: #0f172a;
}

.lj-sentence-diagnostic__tokens {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.lj-sentence-diagnostic__token {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.92);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 8px 22px -18px rgba(15, 23, 42, 0.4);
	position: relative;
}

.lj-sentence-diagnostic__token::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	border: 2px solid var(--token-color, #38bdf8);
	opacity: 0.7;
	pointer-events: none;
}

.lj-sentence-diagnostic__tokenText {
	font-weight: 600;
	color: #0f172a;
}

.lj-sentence-diagnostic__tokenBadge {
	color: var(--token-color, #38bdf8);
}

.lj-sentence-diagnostic__notes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-sentence-diagnostic__notesList {
	list-style: disc;
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: #1e293b;
}

/* Checklist Card */
.lj-card.lj-card--checklist {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-checklist-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-checklist-card__title {
	margin: 0;
	color: #0f172a;
}

.lj-checklist-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-checklist-card__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 16px;
	background: rgba(248, 250, 252, 0.85);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.15), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-checklist-card__item:hover {
	background: rgba(248, 250, 252, 0.95);
	border-color: rgba(15, 23, 42, 0.15);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.25), 0 4px 8px -4px rgba(15, 23, 42, 0.15);
}

.lj-checklist-card__itemIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #38bdf8;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	flex-shrink: 0;
	margin-top: 2px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 4px 12px rgba(15, 23, 42, 0.2);
}

.lj-checklist-card__item:nth-child(1) .lj-checklist-card__itemIcon {
	background: #38bdf8;
}

.lj-checklist-card__item:nth-child(2) .lj-checklist-card__itemIcon {
	background: #fb923c;
}

.lj-checklist-card__item:nth-child(3) .lj-checklist-card__itemIcon {
	background: #facc15;
}

.lj-checklist-card__item:nth-child(4) .lj-checklist-card__itemIcon {
	background: #a855f7;
}

.lj-checklist-card__item:nth-child(5) .lj-checklist-card__itemIcon {
	background: #22d3ee;
}

.lj-checklist-card__item:nth-child(n + 6) .lj-checklist-card__itemIcon {
	background: #38bdf8;
}

.lj-checklist-card__itemContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-checklist-card__itemTitle {
	margin: 0;
	color: #0f172a;
	font-weight: 600;
}

.lj-checklist-card__itemSummary {
	color: #475569;
	margin: 0;
	font-size: var(--lj-font-body-size);
	line-height: var(--lj-font-body-line);
}

/* QuickCheck Card - Two Column Layout */
.lj-quickcheck-container {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 32px;
	align-items: center;
	opacity: 1;
	transition: opacity 0.3s ease;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	overflow-x: hidden;
}

.lj-quickcheck-container.is-transitioning {
	opacity: 0;
}

.lj-quickcheck-question {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.lj-quickcheck-question p {
	margin: 0;
	color: #0f172a;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
	text-align: justify;
	text-align-last: left;
	text-justify: inter-word;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
	word-spacing: normal;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-quickcheck-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.lj-quickcheck-options .lj-card__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.lj-quickcheck-options .lj-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	padding: 14px 18px;
	border: 2px solid #2079b0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	overflow-wrap: break-word;
	word-wrap: break-word;
	min-width: 0;
}

.lj-quickcheck-options .lj-option:hover {
	border-color: rgba(32, 121, 176, 0.75);
	box-shadow: 0 4px 16px rgba(32, 121, 176, 0.2);
	transform: translateY(-1px);
}

.lj-quickcheck-options .lj-option.is-selected {
	border-color: #2079b0;
	background: rgba(32, 121, 176, 0.08);
	box-shadow: 0 4px 16px rgba(32, 121, 176, 0.25);
}

.lj-quickcheck-options .lj-option.is-correct {
	border-color: #22c55e;
	background: rgba(34, 197, 94, 0.08);
	animation: correctOptionAnimation 0.5s ease-out;
}

/* Animation for correct option selection */
@keyframes correctOptionAnimation {
	0% {
		transform: scale(0.98);
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
	50% {
		transform: scale(1.02);
		box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

.lj-quickcheck-options .lj-option.is-incorrect {
	border-color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
}

.lj-quickcheck-options .lj-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.lj-quickcheck-options .lj-option span {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	min-width: 0;
}

.lj-quickcheck-options .lj-card__feedback {
	margin-top: 12px;
	margin-bottom: 0;
	justify-content: center;
}

/* Completion/Congratulations View */
.lj-quickcheck-completion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 20px;
	gap: 20px;
}

.lj-quickcheck-completion__icon {
	font-size: 64px;
	line-height: 1;
	animation: celebrationAnimation 1s ease-out;
}

.lj-quickcheck-completion__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	color: #0f172a;
}

.lj-quickcheck-completion__message {
	margin: 0;
	font-size: 18px;
	color: #475569;
	line-height: 1.6;
	max-width: 500px;
}

/* Completion button uses consolidated button system */
.lj-quickcheck-completion__button {
	margin-top: 8px;
	/* Inherit from .lj-button--primary base styles */
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	font-size: var(--lj-font-body-size, 16px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	transition: all 0.2s ease;
	box-sizing: border-box;
	font-family: inherit;
	background: #335cff;
	color: #fff;
	box-shadow: 0 4px 12px rgba(51, 92, 255, 0.25);
}

.lj-quickcheck-completion__button:hover:not(:disabled),
.lj-quickcheck-completion__button:focus:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(51, 92, 255, 0.3);
	background: #2563eb;
}

.lj-quickcheck-completion__button:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(51, 92, 255, 0.2);
}

.lj-quickcheck-completion__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

@keyframes celebrationAnimation {
	0% {
		opacity: 0;
		transform: scale(0.5) rotate(-180deg);
	}
	50% {
		transform: scale(1.2) rotate(10deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

/* Sentence Parts Practice Card */
.lj-sentenceparts-instructions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px 0;
	text-align: center;
}

.lj-sentenceparts-instructions__text {
	color: #0f172a;
	line-height: 1.6;
	animation: instructionsFadeIn 0.8s ease-out;
	text-align: center;
}

.lj-sentenceparts-instructions__example {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-sentenceparts-instructions__example-label {
	margin: 0;
	font-weight: 600;
	color: #1e293b;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-sentenceparts-instructions__example-prompt {
	margin: 0;
	font-weight: 600;
	color: #0f172a;
	font-size: 16px;
}

.lj-sentenceparts-instructions__example-sentence {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	min-height: 48px;
	padding: 12px;
	background: #fff;
	border-radius: 8px;
	border: 2px solid rgba(15, 23, 42, 0.1);
	animation: exampleSentenceFadeIn 0.8s ease-out 0.3s both;
}

@keyframes exampleSentenceFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.lj-sentenceparts-instructions__example-feedback {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 12px;
	background: rgba(22, 163, 74, 0.1);
	border-radius: 8px;
	color: #0f766e;
	font-weight: 600;
	animation: correctAnswerAnimation 0.6s ease-out;
}

/* Demo Animation Section */
.lj-sentenceparts-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px;
	margin: 0;
	background: rgba(15, 23, 42, 0.02);
	border-radius: 12px;
	border: 2px solid rgba(15, 23, 42, 0.08);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-sentenceparts-demo__caption {
	margin: 0;
	font-weight: 600;
	color: #1e293b;
	font-size: 16px;
	text-align: center;
}

.lj-sentenceparts-demo__prompt {
	margin: 0;
	font-weight: 600;
	color: #0f172a;
	font-size: 18px;
	text-align: center;
	padding: 12px 20px;
	background: rgba(15, 23, 42, 0.04);
	border: 2px solid transparent;
	border-radius: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	animation: demoPromptHighlight 9s infinite;
}

@keyframes demoPromptHighlight {
	0% {
		background: rgba(59, 130, 246, 0.08);
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
		border-color: rgba(59, 130, 246, 0.2);
	}
	15% {
		background: rgba(59, 130, 246, 0.12);
		box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
		border-color: rgba(59, 130, 246, 0.3);
	}
	30% {
		background: rgba(59, 130, 246, 0.08);
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.2);
		border-color: rgba(59, 130, 246, 0.2);
	}
	32%, 100% {
		background: rgba(15, 23, 42, 0.04);
		box-shadow: none;
		border-color: transparent;
	}
}

.lj-sentenceparts-demo__sentence {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 16px;
	background: #fff;
	border-radius: 8px;
	border: 2px solid rgba(15, 23, 42, 0.1);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-sentenceparts-part--demo {
	animation: demoPartClick 9s infinite;
	cursor: default;
}

/* Click animation sequence - highlights the correct part */
.lj-sentenceparts-part--demo[data-is-correct="true"] {
	animation: demoPartClickCorrect 9s infinite;
}

.lj-sentenceparts-part--demo[data-is-correct="false"] {
	animation: demoPartClickIncorrect 9s infinite;
}

/* Demo feedback area */
.lj-sentenceparts-demo__feedback {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.lj-sentenceparts-demo__feedback-message {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 20px;
	background: rgba(22, 163, 74, 0.1);
	border-radius: 8px;
	color: #0f766e;
	font-weight: 600;
	opacity: 0;
	transform: translateY(-10px);
	animation: demoFeedbackShow 9s infinite;
}

.lj-sentenceparts-demo__feedback-message .lj-feedback-icon {
	color: #16a34a;
	font-size: 20px;
}

/* Caption text animation */
.lj-sentenceparts-demo__caption-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	width: 100%;
	position: relative;
}

.lj-sentenceparts-demo__caption-item {
	display: block;
	font-size: 15px;
	color: #475569;
	font-weight: 500;
	opacity: 0;
	transform: translateX(-50%) translateY(-10px);
	animation: demoCaptionFade 9s infinite;
	text-align: center;
	position: absolute;
	top: 0;
	left: 50%;
	white-space: nowrap;
	width: auto;
	max-width: 90%;
}

.lj-sentenceparts-demo__caption-item[data-caption-index="0"] {
	animation-delay: 0s;
}

.lj-sentenceparts-demo__caption-item[data-caption-index="1"] {
	animation-delay: 0s;
}

.lj-sentenceparts-demo__caption-item[data-caption-index="2"] {
	animation-delay: 0s;
}

/* Animation keyframes - incorrect parts */
@keyframes demoPartClick {
	0%, 32% {
		border-color: rgba(15, 23, 42, 0.2);
		background: #fff;
		color: #0f172a;
		transform: scale(1);
		box-shadow: none;
	}
	33%, 58% {
		/* Subtle pulse when correct part is highlighted */
		border-color: rgba(15, 23, 42, 0.25);
		background: rgba(15, 23, 42, 0.03);
		transform: scale(1);
		box-shadow: none;
	}
	59%, 100% {
		border-color: rgba(15, 23, 42, 0.2);
		background: #fff;
		color: #0f172a;
		transform: scale(1);
		box-shadow: none;
	}
}

/* Correct part - redesigned with smooth transitions */
@keyframes demoPartClickCorrect {
	0%, 32% {
		/* Caption 0: "Read the prompt carefully" - normal state */
		border-color: rgba(15, 23, 42, 0.2);
		background: #fff;
		color: #0f172a;
		transform: scale(1);
		box-shadow: none;
		font-weight: 500;
	}
	33%, 54% {
		/* Caption 1: "Click the part that matches the prompt" - cyan glow and pulse */
		border-color: #06b6d4;
		background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
		color: #ffffff;
		transform: scale(1.08);
		box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7),
		            0 4px 16px rgba(6, 182, 212, 0.4),
		            0 8px 24px rgba(6, 182, 212, 0.2);
		font-weight: 600;
	}
	55%, 57% {
		/* Pulsing glow effect before click */
		border-color: #0891b2;
		background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
		color: #ffffff;
		transform: scale(1.1);
		box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.5),
		            0 6px 20px rgba(6, 182, 212, 0.5),
		            0 12px 32px rgba(6, 182, 212, 0.3);
		font-weight: 600;
	}
	58%, 60% {
		/* Click animation - pressed down */
		border-color: #2563eb;
		background: #2563eb;
		color: #ffffff;
		transform: scale(0.92);
		box-shadow: inset 0 2px 8px rgba(37, 99, 235, 0.6),
		            0 2px 8px rgba(37, 99, 235, 0.4);
		font-weight: 600;
	}
	61%, 66% {
		/* Selected state - blue with bounce back */
		border-color: #2563eb;
		background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.25) 100%);
		color: #1e40af;
		transform: scale(1.05);
		box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3),
		            0 4px 16px rgba(37, 99, 235, 0.3);
		font-weight: 600;
	}
	67%, 91% {
		/* Caption 2: "Look for the green highlight - that's correct!" - green success glow */
		border-color: #22c55e;
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.3) 100%);
		color: #15803d;
		transform: scale(1.06);
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6),
		            0 4px 16px rgba(34, 197, 94, 0.4),
		            0 8px 24px rgba(34, 197, 94, 0.2);
		font-weight: 700;
		animation-timing-function: ease-in-out;
	}
	92%, 95% {
		/* Final success pulse */
		border-color: #22c55e;
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.35) 100%);
		color: #15803d;
		transform: scale(1.08);
		box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.5),
		            0 6px 20px rgba(34, 197, 94, 0.5),
		            0 12px 32px rgba(34, 197, 94, 0.3);
		font-weight: 700;
	}
	96%, 100% {
		/* Smooth reset */
		border-color: rgba(15, 23, 42, 0.2);
		background: #fff;
		color: #0f172a;
		transform: scale(1);
		box-shadow: none;
		font-weight: 500;
	}
}

/* Incorrect parts - subtle during caption 1 */
@keyframes demoPartClickIncorrect {
	0%, 32% {
		border-color: rgba(15, 23, 42, 0.2);
		background: #fff;
		color: #0f172a;
		transform: scale(1);
		box-shadow: none;
	}
	33%, 58% {
		/* Subtle dimming when correct part is highlighted */
		border-color: rgba(15, 23, 42, 0.15);
		background: rgba(15, 23, 42, 0.02);
		color: rgba(15, 23, 42, 0.6);
		transform: scale(0.98);
		box-shadow: none;
		opacity: 0.7;
	}
	59%, 100% {
		border-color: rgba(15, 23, 42, 0.2);
		background: #fff;
		color: #0f172a;
		transform: scale(1);
		box-shadow: none;
		opacity: 1;
	}
}

@keyframes demoFeedbackShow {
	0%, 66% {
		opacity: 0;
		transform: translateY(-20px) scale(0.9);
		filter: blur(4px);
	}
	69%, 88% {
		/* Show feedback during caption 2 - synchronized with green highlight */
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
	89%, 91% {
		/* Success bounce */
		opacity: 1;
		transform: translateY(-4px) scale(1.05);
		filter: blur(0);
	}
	92%, 100% {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
		filter: blur(4px);
	}
}

/* Caption 0: "Read the prompt carefully" - shows during prompt highlight (0-32%) */
@keyframes demoCaptionFade {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-15px);
		filter: blur(4px);
	}
	3% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}
	28% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}
	32%, 100% {
		opacity: 0;
		transform: translateX(-50%) translateY(15px);
		filter: blur(4px);
	}
}

/* Caption 1: "Click the part that matches the prompt" - shows during part highlight (33-58%) */
.lj-sentenceparts-demo__caption-item[data-caption-index="1"] {
	animation: demoCaptionFade1 9s infinite;
}

@keyframes demoCaptionFade1 {
	0%, 31% {
		opacity: 0;
		transform: translateX(-50%) translateY(-15px);
		filter: blur(4px);
	}
	34% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}
	55% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}
	58%, 100% {
		opacity: 0;
		transform: translateX(-50%) translateY(15px);
		filter: blur(4px);
	}
}

/* Caption 2: "Look for the green highlight - that's correct!" - shows during green highlight (69-93%) */
.lj-sentenceparts-demo__caption-item[data-caption-index="2"] {
	animation: demoCaptionFade2 9s infinite;
}

@keyframes demoCaptionFade2 {
	0%, 67% {
		opacity: 0;
		transform: translateX(-50%) translateY(-15px);
		filter: blur(4px);
	}
	70% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}
	88% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}
	90%, 100% {
		opacity: 0;
		transform: translateX(-50%) translateY(15px);
		filter: blur(4px);
	}
}

.lj-sentenceparts-start {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

/* Shared styling for all Start Practice buttons */
.lj-sentenceparts-start .button-primary,
.lj-sentencebuilder-start .button-primary,
.lj-ai-practice__start .button-primary {
	background: #53b4c4;
	border-color: #53b4c4;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(83, 180, 196, 0.25);
}

.lj-sentenceparts-start .button-primary:hover:not(:disabled),
.lj-sentenceparts-start .button-primary:focus:not(:disabled),
.lj-sentencebuilder-start .button-primary:hover:not(:disabled),
.lj-sentencebuilder-start .button-primary:focus:not(:disabled),
.lj-ai-practice__start .button-primary:hover:not(:disabled),
.lj-ai-practice__start .button-primary:focus:not(:disabled) {
	background: #53b4c4;
	border-color: #53b4c4;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(83, 180, 196, 0.3);
}

.lj-sentenceparts-start .button-primary:active:not(:disabled),
.lj-sentencebuilder-start .button-primary:active:not(:disabled),
.lj-ai-practice__start .button-primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(83, 180, 196, 0.2);
}

.lj-sentenceparts-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.lj-sentenceparts-question {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	align-items: center;
}

.lj-sentenceparts-prompt {
	font-weight: 600;
	color: #1e293b;
	font-size: 20px;
	margin: 0;
	text-align: center;
}

/* Color coding for prompt based on part type */
.lj-sentenceparts-prompt--subject {
	color: #2079b0; /* Blue for subject */
}

.lj-sentenceparts-prompt--verb {
	color: #f59e0b; /* Amber/orange for verb */
}

.lj-sentenceparts-prompt--object {
	color: #10b981; /* Green for object */
}

.lj-sentenceparts-prompt--detail {
	color: #8b5cf6; /* Purple for detail */
}

.lj-sentenceparts-sentence {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 16px;
	background: rgba(15, 23, 42, 0.02);
	border-radius: 12px;
	border: 2px solid rgba(15, 23, 42, 0.1);
}

.lj-sentenceparts-part {
	display: inline-block;
	padding: 8px 16px;
	margin: 0;
	border: 2px solid rgba(15, 23, 42, 0.2);
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.lj-sentenceparts-part:hover:not(:disabled) {
	border-color: rgba(15, 23, 42, 0.2); /* Keep border same color, no change */
	background: #53b4c4; /* Match Ask a question button color */
	color: #ffffff; /* White text for contrast */
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(83, 180, 196, 0.2);
}

.lj-sentenceparts-part:active:not(:disabled) {
	transform: translateY(0);
}

.lj-sentenceparts-part:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.lj-sentenceparts-part.is-selected {
	border-color: #2563eb;
	background: rgba(37, 99, 235, 0.1);
	font-weight: 600;
}

.lj-sentenceparts-part.is-correct {
	border-color: #22c55e;
	background: rgba(34, 197, 94, 0.15);
	color: #0f766e;
	animation: correctOptionAnimation 0.5s ease-out;
}

.lj-sentenceparts-part.is-incorrect {
	border-color: #ef4444;
	background: rgba(239, 68, 68, 0.1);
	color: #b91c1c;
}

.lj-sentenceparts-part.is-correct-highlight {
	border-color: #22c55e;
	background: rgba(34, 197, 94, 0.2);
	color: #0f766e;
	animation: correctOptionAnimation 0.5s ease-out;
}

.lj-sentenceparts-part--example {
	border-color: rgba(15, 23, 42, 0.2);
	background: #fff;
	cursor: default;
	transition: all 0.4s ease;
}

/* Use shared highlight class from ExampleAnimations.css - ensure animation is visible */
.lj-sentenceparts-part--example.lj-example-part-highlighted {
	border-color: #22c55e !important;
	background: rgba(34, 197, 94, 0.15) !important;
	color: #0f766e !important;
	animation: exampleHighlightAnimation 0.6s ease-out !important;
}

.lj-sentenceparts-feedback {
	margin-top: 8px;
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lj-sentenceparts-feedback .lj-card__feedback {
	justify-content: center;
	text-align: center;
}

.lj-sentenceparts-feedback .lj-card__desc {
	text-align: center;
	margin-top: 8px;
}

/* exampleHighlightAnimation moved to shared ExampleAnimations.css */

@keyframes instructionsFadeIn {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.lj-quickcheck-actions {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
}

.lj-quickcheck-actions .button {
	border-radius: 8px;
	margin: 0;
}

/* Sentence Builder Card */
.lj-sentencebuilder-instructions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px 0;
	text-align: center;
}

.lj-sentencebuilder-instructions__text {
	color: #0f172a;
	line-height: 1.6;
	animation: instructionsFadeIn 0.8s ease-out;
	text-align: center;
}

.lj-sentencebuilder-demo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-sentencebuilder-demo__caption {
	margin: 0;
	font-weight: 600;
	color: #1e293b;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-sentencebuilder-demo__heading {
	margin: 0 0 12px 0;
	font-weight: 600;
	color: #1e293b;
	font-size: 14px;
}

.lj-sentencebuilder-demo__bank,
.lj-sentencebuilder-demo__sentence {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-sentencebuilder-demo__tiles,
.lj-sentencebuilder-demo__sentence-area {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 48px;
	padding: 12px;
	background: #fff;
	border-radius: 8px;
	border: 2px solid rgba(15, 23, 42, 0.1);
	align-items: center;
	justify-content: flex-start;
}

.lj-sentencebuilder-tile--demo {
	padding: 8px 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	background: #53b4c4;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	transition: all 0.4s ease;
}

.lj-sentencebuilder-tile--demo[style*="background-color"] {
	/* Override default background when inline style is set */
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}

.lj-sentencebuilder-tile--demo.is-highlighted {
	border-color: rgba(255, 255, 255, 0.6);
	background: #3da4b8;
	color: #ffffff;
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(83, 180, 196, 0.6);
	animation: tileHighlightPulse 1s ease-in-out;
}

.lj-sentencebuilder-tile--demo.is-hidden {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

.lj-sentencebuilder-tile--demo.is-in-sentence {
	border-color: rgba(255, 255, 255, 0.3);
	background: #16a34a;
	color: #ffffff;
	animation: tileAppear 0.5s ease-out;
}

.lj-sentencebuilder-demo__placeholder {
	color: #94a3b8;
	font-size: 14px;
	font-style: italic;
}

.lj-sentencebuilder-demo__feedback {
	margin-top: 8px;
	text-align: center;
}

.lj-sentencebuilder-demo__feedback-message {
	margin: 0;
	font-weight: 600;
	color: #0f766e;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.lj-sentencebuilder-start {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.lj-sentencebuilder-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.lj-sentencebuilder-question {
	width: 100%;
	text-align: center;
}

.lj-sentencebuilder-prompt {
	font-weight: 600;
	color: #1e293b;
	font-size: 20px;
	margin: 0;
}

.lj-sentencebuilder-bank,
.lj-sentencebuilder-sentence-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-sentencebuilder-heading {
	margin: 0;
	font-weight: 600;
	color: #1e293b;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-sentencebuilder-tiles,
.lj-sentencebuilder-sentence {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 64px;
	padding: 16px;
	background: rgba(15, 23, 42, 0.02);
	border-radius: 12px;
	border: 2px solid rgba(15, 23, 42, 0.1);
	align-items: center;
	justify-content: flex-start;
}

.lj-sentencebuilder-tile {
	display: inline-block;
	padding: 8px 16px;
	margin: 0;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	background: #53b4c4;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	user-select: none;
}

.lj-sentencebuilder-tile[style*="background-color"] {
	/* Override default background when inline style is set */
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}

.lj-sentencebuilder-tile:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.5);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	filter: brightness(0.9);
}

.lj-sentencebuilder-tile:active:not(:disabled) {
	transform: translateY(0);
}

.lj-sentencebuilder-tile:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.lj-sentencebuilder-tile--in-sentence {
	cursor: move;
	background: #16a34a;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.3);
}

.lj-sentencebuilder-tile--in-sentence.is-correct {
	border-color: #22c55e;
	background: #22c55e;
	color: #ffffff;
	animation: correctOptionAnimation 0.5s ease-out;
}

.lj-sentencebuilder-tile--in-sentence.is-incorrect {
	border-color: #ef4444;
	background: #ef4444;
	color: #ffffff;
}

.lj-sentencebuilder-empty,
.lj-sentencebuilder-placeholder {
	color: #94a3b8;
	font-size: 14px;
	font-style: italic;
	margin: 0;
}

.lj-sentencebuilder-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.lj-sentencebuilder-feedback {
	margin-top: 8px;
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lj-sentencebuilder-feedback .lj-card__feedback {
	justify-content: center;
	text-align: center;
}

.lj-sentencebuilder-feedback .lj-card__desc {
	text-align: center;
	margin-top: 8px;
}

@keyframes tileHighlightPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 2px 8px rgba(83, 180, 196, 0.2);
	}
	50% {
		transform: scale(1.15);
		box-shadow: 0 6px 16px rgba(83, 180, 196, 0.5);
	}
	100% {
		transform: scale(1.1);
		box-shadow: 0 4px 12px rgba(83, 180, 196, 0.4);
	}
}

@keyframes tileAppear {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Responsive: Stack columns on smaller screens */
@media (max-width: 768px) {
	.lj-quickcheck-container {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	
	/* Ensure all children respect width on mobile */
	.lj-quickcheck-question,
	.lj-quickcheck-options {
		width: 100%;
		max-width: 100%;
	}

	.lj-sentencebuilder-tiles,
	.lj-sentencebuilder-sentence {
		min-height: 56px;
		padding: 12px;
	}

	.lj-sentencebuilder-tile {
		font-size: 14px;
		padding: 6px 12px;
	}
}



:root {
	--lj-font-heading-size: 17px;
	--lj-font-heading-line: 1.4;
	--lj-font-subheading-size: 15px;
	--lj-font-body-size: 16px;
	--lj-font-body-line: 1.6;
	--lj-font-caption-size: 14px;
	--lj-font-caption-line: 1.4;
}

/* Typography Utilities */
.lj-type-heading {
	font-size: var(--lj-font-heading-size);
	line-height: var(--lj-font-heading-line);
	font-weight: 600;
	color: #0f172a;
}

.lj-type-subheading {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px 0;
}

.lj-type-body {
	font-size: var(--lj-font-body-size);
	line-height: var(--lj-font-body-line);
	font-weight: 400;
	color: #1e293b;
	margin: 0;
}

.lj-type-caption {
	font-size: var(--lj-font-caption-size);
	line-height: var(--lj-font-caption-line);
	font-weight: 600;
	color: #475569;
}

.lj-type-eyebrow {
	font-size: var(--lj-font-caption-size);
	line-height: var(--lj-font-caption-line);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
}

/* Typography & Body Helpers */
.lj-card__desc {
	margin: 0 0 12px;
	color: #000000;
}

.lj-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-card__list li {
	margin: 0;
	padding: 0;
}

.lj-card__feedback {
	margin-top: 16px;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-card__feedback p {
	font-weight: 400;
}

.lj-card__feedback.is-correct {
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}

.lj-card__feedback.is-incorrect {
	color: #b91c1c;
}

.lj-card__feedback.is-incorrect p {
	color: #000000;
	font-weight: 400;
}

.lj-feedback-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.lj-card__feedback.is-correct .lj-feedback-icon {
	color: #16a34a;
}

.lj-card__feedback.is-incorrect .lj-feedback-icon {
	color: #dc2626;
}

/* Animation for correct answers */
@keyframes correctAnswerAnimation {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}
	50% {
		transform: translateY(-2px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.lj-card__html {
	display: block;
	color: #1e293b;
	font-size: var(--lj-font-body-size);
	line-height: var(--lj-font-body-line);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	overflow-x: hidden;
}

.lj-card__html > * + * {
	margin-top: 16px;
}

.lj-card__html h1,
.lj-card__html h2,
.lj-card__html h3 {
	margin: 0 0 8px;
	color: #0f172a;
	font-weight: 600;
}

/* Inputs & Options */
.lj-option {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #2079b0;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lj-option:hover {
	border-color: rgba(32, 121, 176, 0.75);
	box-shadow: 0 6px 18px rgba(32, 121, 176, 0.15);
}

.lj-option input {
	margin: 0;
}

/* Screen reader only class for accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.lj-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: var(--lj-font-body-size);
	line-height: var(--lj-font-body-line);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lj-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: none;
}

.lj-input:disabled {
	background: #e2e8f0;
	cursor: not-allowed;
}

/* ============================================
   CONSOLIDATED BUTTON SYSTEM
   Shared button styles for all cards
   ============================================ */

/* Base button reset - override all button margin-top */
#lj-runner button,
#lj-runner .button,
button.button,
.lj-runner-card button,
button {
	margin-top: 0 !important;
}

/* Base button styles - shared foundation */
.lj-button,
.button {
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	font-size: var(--lj-font-body-size, 16px);
	line-height: var(--lj-font-body-line, 1.6);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	box-sizing: border-box;
	font-family: inherit;
}

/* Primary button (default - blue) */
.lj-button,
.button,
.lj-button--primary,
.button-primary {
	background: #335cff;
	color: #fff;
	box-shadow: 0 4px 12px rgba(51, 92, 255, 0.25);
}

.lj-button:hover:not(:disabled),
.button:hover:not(:disabled),
.lj-button--primary:hover:not(:disabled),
.button-primary:hover:not(:disabled),
.lj-button:focus:not(:disabled),
.button:focus:not(:disabled),
.lj-button--primary:focus:not(:disabled),
.button-primary:focus:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(51, 92, 255, 0.3);
	background: #2563eb;
}

.lj-button:active:not(:disabled),
.button:active:not(:disabled),
.lj-button--primary:active:not(:disabled),
.button-primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(51, 92, 255, 0.2);
}

/* Secondary button (outlined) */
.lj-button--secondary,
.button-secondary {
	background: transparent;
	color: #335cff;
	border: 2px solid #335cff;
	box-shadow: none;
}

.lj-button--secondary:hover:not(:disabled),
.button-secondary:hover:not(:disabled),
.lj-button--secondary:focus:not(:disabled),
.button-secondary:focus:not(:disabled) {
	background: rgba(51, 92, 255, 0.08);
	border-color: #2563eb;
	color: #2563eb;
	transform: translateY(-1px);
}

/* Danger/destructive button (red - for reset, delete, etc.) */
.lj-button--danger,
.button-danger {
	background: rgba(239, 68, 68, 0.08);
	color: #dc2626;
	border: 1px solid rgba(239, 68, 68, 0.4);
	box-shadow: none;
}

.lj-button--danger:hover:not(:disabled),
.button-danger:hover:not(:disabled),
.lj-button--danger:focus:not(:disabled),
.button-danger:focus:not(:disabled) {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.6);
	color: #b91c1c;
	transform: translateY(-1px);
}

/* Icon button */
.lj-button--icon,
.button-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.9);
	color: #1e293b;
	border: 1px solid rgba(148, 163, 184, 0.4);
	box-shadow: none;
}

.lj-button--icon:hover:not(:disabled),
.button-icon:hover:not(:disabled),
.lj-button--icon:focus:not(:disabled),
.button-icon:focus:not(:disabled) {
	background: #fff;
	border-color: rgba(148, 163, 184, 0.6);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/* Large button */
.lj-button--large,
.button-large {
	padding: 1rem 2rem;
	font-size: 18px;
	border-radius: 10px;
}

/* Disabled state - applies to all button variants */
.lj-button:disabled,
.button:disabled,
.lj-button--primary:disabled,
.button-primary:disabled,
.lj-button--secondary:disabled,
.button-secondary:disabled,
.lj-button--danger:disabled,
.button-danger:disabled,
.lj-button--icon:disabled,
.button-icon:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* Actions container */
.lj-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.lj-actions .lj-button,
.lj-actions .button {
	margin: 0;
}

/* Quiz Layout */
.lj-quiz {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-quiz__intro {
	color: #0f172a;
}

.lj-quiz__list {
	list-style: decimal;
	margin: 0;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-quiz__item {
	display: block;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.lj-quiz__prompt {
	display: block;
	margin-bottom: 12px;
	font-weight: 500;
	color: #1e293b;
	line-height: 1.5;
}

.lj-quiz__select {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #cbd5f5;
	border-radius: 8px;
	background: #fff;
	font-size: inherit;
	line-height: 1.5;
	cursor: pointer;
}

.lj-quiz__select:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.lj-quiz__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lj-quiz__score {
	color: #1e293b;
	font-weight: 500;
}

/* Drag-and-Drop Layout */
.lj-dragdrop {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lj-dragdrop__level {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 12px;
	padding: 8px 12px;
	color: #1f2937;
	font-weight: 600;
}

.lj-dragdrop__levelLabel {
	font-weight: 700;
	color: #4338ca;
}

.lj-dragdrop__levelProgress {
	font-weight: 600;
	color: #1e293b;
}

.lj-dragdrop__prompt {
	font-weight: 500;
	color: #0f172a;
}

.lj-dragdrop__bank {
	background: #f0f9ff;
	border: 1px dashed #38bdf8;
	border-radius: 12px;
	padding: 12px;
}

.lj-dragdrop__tokens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lj-dragdrop__token {
	padding: 8px 12px;
	border-radius: 999px;
	background: #1d4ed8;
	color: #fff;
	font-weight: 600;
	cursor: grab;
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
	user-select: none;
}

.lj-dragdrop__token:active {
	cursor: grabbing;
}

.lj-dragdrop__token.is-assigned {
	background: #0f766e;
	box-shadow: 0 6px 16px rgba(15, 118, 110, 0.25);
}

.lj-dragdrop__hint {
	color: #0f172a;
}

.lj-dragdrop__board {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.lj-dragdrop__bin {
	background: #fff;
	border: 1px solid #cbd5f5;
	border-radius: 12px;
	padding: 12px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.lj-dragdrop__heading {
	margin: 0;
	font-weight: 700;
	color: #1e293b;
}

.lj-dragdrop__binTokens {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-content: flex-start;
}

.lj-dragdrop__placeholder {
	color: #64748b;
}

.lj-dragdrop__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lj-dragdrop__reset {
	border: 0;
	background: none;
	color: #1d4ed8;
	font-weight: 600;
	cursor: pointer;
}

.lj-dragdrop__reset:hover {
	text-decoration: underline;
}

.lj-dragdrop__feedback {
	font-weight: 600;
}

.lj-dragdrop__feedback.is-correct {
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}

.lj-dragdrop__feedback.is-incorrect {
	color: #b91c1c;
}
.lj-card {
	padding: 0;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px 8px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
	position: relative;
}

.lj-card__headerLeft {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.lj-card__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lj-card__headerActions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Icon button uses consolidated button system */
.lj-card__iconButton {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.9);
	color: #1e293b;
	border: 1px solid rgba(148, 163, 184, 0.4);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.6;
	font-weight: 600;
	transition: all 0.2s ease;
	box-sizing: border-box;
	font-family: inherit;
}

.lj-card__iconButton span {
	pointer-events: none;
}

.lj-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 10px 12px 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	overflow-x: hidden;
}

/* Ensure all direct children respect width constraints */
.lj-card__body > * {
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-card__body:has(.lj-sentenceparts-container) {
	text-align: center;
}

.lj-card__footer {
	padding: 16px 24px 20px;
	border-top: 1px solid rgba(15, 23, 42, 0.12);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	background: rgba(255, 255, 255, 0.75);
}

.lj-card__footerActions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* Reset button uses consolidated button system */
.lj-card__resetButton {
	padding: 6px 12px;
	font-size: var(--lj-font-caption-size, 0.875rem);
	margin-left: auto;
	/* Inherit from .lj-button--danger */
	background: rgba(239, 68, 68, 0.08);
	color: #dc2626;
	border: 1px solid rgba(239, 68, 68, 0.4);
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: inherit;
}

.lj-card__resetButton:hover:not(:disabled) {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.6);
	color: #b91c1c;
	transform: translateY(-1px);
}

.lj-card__resetButton:active:not(:disabled) {
	transform: translateY(0);
}

.lj-card__resetButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

.lj-card__title {
	margin: 0;
}

.lj-card__desc {
	margin: 0 0 12px;
}

/* Progress Bar */
.lj-card__progress {
	width: 100%;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-card__progress-bar-container {
	width: 100%;
	height: 8px;
	background-color: rgba(15, 23, 42, 0.08);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 8px;
}

.lj-card__progress-bar {
	height: 100%;
	background-color: #2079b0; /* Matches .lj-header background */
	border-radius: 4px;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

/* Gradient shimmer effect using same blue color */
.lj-card__progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
}

/* Particle/sparkle effect */
.lj-card__progress-bar::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 12px;
	transform: translate(50%, -50%);
	opacity: 0;
	pointer-events: none;
	border-radius: 50%;
	background: rgba(251, 146, 60, 0.9);
	box-shadow: 0 0 6px 3px rgba(249, 115, 22, 0.8);
}

.lj-card__progress-bar.animate-sparkle::before {
	animation: sparkle 0.8s ease-out;
}

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

@keyframes sparkle {
	0% {
		opacity: 0;
		transform: translate(50%, -50%) scale(0);
		box-shadow: 
			0 0 0 0 rgba(251, 146, 60, 0.9),
			4px -2px 0 0 rgba(249, 115, 22, 0.8),
			-4px 2px 0 0 rgba(251, 146, 60, 0.9),
			6px 1px 0 0 rgba(249, 115, 22, 0.7),
			-6px -1px 0 0 rgba(251, 146, 60, 0.8),
			2px 3px 0 0 rgba(249, 115, 22, 0.7),
			-2px -3px 0 0 rgba(251, 146, 60, 0.8),
			8px -3px 0 0 rgba(249, 115, 22, 0.6),
			-8px 3px 0 0 rgba(251, 146, 60, 0.7);
	}
	30% {
		opacity: 1;
		transform: translate(50%, -50%) scale(1);
		box-shadow: 
			0 0 14px 7px rgba(251, 146, 60, 0.9),
			4px -2px 10px 5px rgba(249, 115, 22, 0.8),
			-4px 2px 11px 5px rgba(251, 146, 60, 0.9),
			6px 1px 9px 4px rgba(249, 115, 22, 0.7),
			-6px -1px 10px 4px rgba(251, 146, 60, 0.8),
			2px 3px 9px 4px rgba(249, 115, 22, 0.7),
			-2px -3px 10px 4px rgba(251, 146, 60, 0.8),
			8px -3px 8px 3px rgba(249, 115, 22, 0.6),
			-8px 3px 9px 3px rgba(251, 146, 60, 0.7);
	}
	60% {
		opacity: 0.9;
		transform: translate(50%, -50%) scale(1.4);
		box-shadow: 
			0 0 18px 9px rgba(251, 146, 60, 0.7),
			4px -2px 12px 6px rgba(249, 115, 22, 0.6),
			-4px 2px 13px 6px rgba(251, 146, 60, 0.7),
			6px 1px 11px 5px rgba(249, 115, 22, 0.5),
			-6px -1px 12px 5px rgba(251, 146, 60, 0.6),
			2px 3px 11px 5px rgba(249, 115, 22, 0.5),
			-2px -3px 12px 5px rgba(251, 146, 60, 0.6),
			8px -3px 10px 4px rgba(249, 115, 22, 0.4),
			-8px 3px 11px 4px rgba(251, 146, 60, 0.5);
	}
	100% {
		opacity: 0;
		transform: translate(50%, -50%) scale(2);
		box-shadow: 
			0 0 0 0 rgba(251, 146, 60, 0),
			4px -2px 0 0 rgba(249, 115, 22, 0),
			-4px 2px 0 0 rgba(251, 146, 60, 0),
			6px 1px 0 0 rgba(249, 115, 22, 0),
			-6px -1px 0 0 rgba(251, 146, 60, 0),
			2px 3px 0 0 rgba(249, 115, 22, 0),
			-2px -3px 0 0 rgba(251, 146, 60, 0),
			8px -3px 0 0 rgba(249, 115, 22, 0),
			-8px 3px 0 0 rgba(251, 146, 60, 0);
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.lj-card__progress-bar {
		transition: width 0.3s ease;
	}
	
	.lj-card__progress-bar::after {
		animation: none;
	}
	
	.lj-card__progress-bar.animate-sparkle::before {
		animation: none;
	}
}

.lj-card__progress-text {
	margin: 0;
	font-size: var(--lj-font-caption-size, 0.875rem);
	line-height: var(--lj-font-caption-line, 1.25rem);
	color: rgba(15, 23, 42, 0.6);
	text-align: center;
}

/* View Prompt Button (Admin Only) */
.lj-card__viewPromptButton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #2079b0;
	background: rgba(32, 121, 176, 0.08);
	border: 1px solid rgba(32, 121, 176, 0.3);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.lj-card__viewPromptButton:hover {
	background: rgba(32, 121, 176, 0.15);
	border-color: rgba(32, 121, 176, 0.5);
	color: #1d4ed8;
	transform: translateY(-1px);
}

.lj-card__viewPromptButton:active {
	transform: translateY(0);
}

.lj-card__viewPromptButton svg {
	flex-shrink: 0;
}

/* Instructions Editor Modal */
.lj-card__instructionsEditor-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	animation: fadeIn 0.2s ease;
}

.lj-card__instructionsEditor-modal {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease;
	overflow: hidden;
}

.lj-card__instructionsEditor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-card__instructionsEditor-header h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

.lj-card__instructionsEditor-close {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	color: #64748b;
	cursor: pointer;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	font-family: inherit;
	line-height: 1;
	padding: 0;
}

.lj-card__instructionsEditor-close:hover {
	background: rgba(15, 23, 42, 0.05);
	color: #0f172a;
}

.lj-card__instructionsEditor-body {
	padding: 24px;
	flex: 1;
	overflow-y: auto;
}

.lj-card__instructionsEditor-textarea {
	width: 100%;
	min-height: 150px;
	padding: 12px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 8px;
	font-size: 14px;
	font-family: monospace;
	line-height: 1.5;
	resize: vertical;
	box-sizing: border-box;
	background: #f8fafc;
	overflow-x: auto;
}

.lj-card__instructionsEditor-textarea:focus {
	outline: none;
	border-color: #2079b0;
	box-shadow: 0 0 0 3px rgba(32, 121, 176, 0.1);
}

.lj-card__instructionsEditor-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 20px 24px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
	background: rgba(248, 250, 252, 0.5);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Shared Example Animation Styles - Reusable across all practice cards */

/* Base Tooltip Styling */
.lj-example-tooltip {
	background: #ffffff;
	border: 2px solid #2079b0;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
	max-width: 280px;
	pointer-events: none;
	font-size: 14px;
	line-height: 1.5;
	color: #0f172a;
}

.lj-example-tooltip__content {
	font-weight: 500;
}

/* Tooltip Arrow */
.lj-example-tooltip__arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.lj-example-tooltip__arrow--top {
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #2079b0;
}

.lj-example-tooltip__arrow--bottom {
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #2079b0;
}

.lj-example-tooltip__arrow--left {
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #2079b0;
}

.lj-example-tooltip__arrow--right {
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #2079b0;
}

/* Base Instructions Text Styling */
.lj-example-instructions {
	text-align: center;
	margin-top: 16px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-example-instructions p {
	margin: 0;
	color: #1e293b;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}

/* Highlighted Part State - Reusable */
.lj-example-part-highlighted {
	border-color: #22c55e !important;
	background: rgba(34, 197, 94, 0.15) !important;
	color: #0f766e !important;
	animation: exampleHighlightAnimation 0.6s ease-out;
}

/* Reusable Animation Keyframes */
@keyframes exampleHighlightAnimation {
	0% {
		opacity: 0.5;
		transform: scale(0.95);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.lj-example-tooltip,
	.lj-example-instructions,
	.lj-example-part-highlighted {
		animation: none !important;
		transition: none !important;
	}
}

/* Teacher View Banner */
.lj-teacher-view-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
	color: white;
	border-radius: 8px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.lj-teacher-view-banner .banner-icon {
	font-size: 24px;
}

.lj-teacher-view-banner .banner-text {
	font-size: 16px;
	line-height: 1.4;
}

.lj-teacher-view-banner .banner-text strong {
	font-weight: 600;
}

/* Teacher Action Panel */
.lj-teacher-action-panel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-bottom: 24px;
}

.lj-teacher-action-panel .panel-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lj-teacher-action-panel .panel-right {
	display: flex;
	gap: 12px;
}

.lj-teacher-action-panel .status-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-teacher-action-panel .status-pending {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.lj-teacher-action-panel .status-in-review {
	background: #fefce8;
	color: #ca8a04;
	border: 1px solid #fde68a;
}

.lj-teacher-action-panel .status-released {
	background: #f0fdf4;
	color: #16a34a;
	border: 1px solid #bbf7d0;
}

.lj-teacher-action-panel .action-btn {
	padding: 10px 18px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	min-width: 180px;
	white-space: nowrap;
}


.lj-teacher-action-panel .release-btn {
	background: #10b981;
	color: white;
}

.lj-teacher-action-panel .release-btn:hover:not(:disabled) {
	background: #059669;
}

.lj-teacher-action-panel .action-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Editable Score Field */
.lj-editable-score-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-editable-score-field .score-label {
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-editable-score-field .score-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-editable-score-field .score-btn {
	width: 32px;
	height: 32px;
	border: 1px solid #cbd5e1;
	background: white;
	border-radius: 6px;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.lj-editable-score-field .score-btn:hover:not(:disabled) {
	background: #f1f5f9;
	border-color: #94a3b8;
}

.lj-editable-score-field .score-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.lj-editable-score-field .score-display {
	display: flex;
	align-items: center;
	gap: 4px;
}

.lj-editable-score-field .score-input {
	width: 50px;
	padding: 6px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.lj-editable-score-field .score-input:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
}

.lj-editable-score-field .score-max {
	font-size: 16px;
	font-weight: 600;
	color: #64748b;
}

/* Modal Overlay */
.lj-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.lj-modal-content {
	background: white;
	padding: 32px;
	border-radius: 12px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.lj-modal-content h3 {
	margin: 0 0 16px 0;
	font-size: 20px;
	font-weight: 600;
	color: #0f172a;
}

.lj-modal-content p {
	margin: 0 0 24px 0;
	color: #475569;
	line-height: 1.6;
}

.lj-modal-content .modal-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.lj-modal-content .btn-cancel,
.lj-modal-content .btn-confirm {
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.lj-modal-content .btn-cancel {
	background: #e2e8f0;
	color: #475569;
}

.lj-modal-content .btn-cancel:hover {
	background: #cbd5e1;
}

.lj-modal-content .btn-confirm {
	background: #10b981;
	color: white;
}

.lj-modal-content .btn-confirm:hover {
	background: #059669;
}

/* Teacher Score Comparison */
.lj-score-comparison {
	display: flex;
	gap: 20px;
	padding: 16px;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: 8px;
	margin-top: 16px;
}

.lj-score-comparison .comparison-col {
	flex: 1;
}

.lj-score-comparison .col-label {
	font-size: 12px;
	font-weight: 600;
	color: #92400e;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.lj-score-comparison .col-value {
	font-size: 24px;
	font-weight: 700;
	color: #78350f;
}

.lj-score-comparison .arrow {
	display: flex;
	align-items: center;
	font-size: 24px;
	color: #92400e;
}

/* Adjusted Badge */
.lj-adjusted-badge {
	display: inline-block;
	padding: 4px 10px;
	background: #fef3c7;
	color: #92400e;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 8px;
}

/* Waiting State */
.lj-waiting-review {
	padding: 60px 40px;
	text-align: center;
	background: #f8fafc;
	border-radius: 12px;
	border: 2px dashed #cbd5e1;
}

.lj-waiting-review .waiting-icon {
	font-size: 64px;
	margin-bottom: 20px;
}

.lj-waiting-review h3 {
	font-size: 24px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 12px;
}

.lj-waiting-review p {
	font-size: 16px;
	color: #64748b;
	line-height: 1.6;
	max-width: 500px;
	margin: 0 auto;
}

.lj-voice-overlay {
	position: fixed;
	z-index: 10010;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Embedded mode - fills container without fixed positioning */
.lj-voice-overlay--embedded {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	z-index: auto;
}

.lj-voice-overlay--embedded .lj-voice-overlay__panel {
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	border: none;
}

.lj-voice-overlay__panel {
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(15, 23, 42, 0.12);
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
	border-radius: 18px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	text-align: center;
	gap: 32px;
	overflow: hidden;
}

.lj-voice-overlay__center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(100%, 420px);
	gap: 32px;
}

.lj-voice-overlay__bubble-wrap {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 32px;
}

.lj-voice-overlay__icon {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.lj-voice-overlay__icon img {
    width: 156px;
    height: 156px;
    object-fit: contain;
}

.lj-voice-overlay__bubble {
	position: relative;
	width: 100%;
	max-width: calc(360px * 0.9);
	min-width: 220px;
	padding: 18px 20px;
	border-radius: 18px;
	background: #2079b0;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 20px 40px rgba(32, 121, 176, 0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.lj-voice-overlay__bubble::after {
	content: '';
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 18px solid #2079b0;
}

.lj-voice-overlay__controls {
	display: flex;
	gap: 14px;
	align-items: center;
}

.lj-voice-overlay__button {
	min-width: 120px;
	padding: 12px 18px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.lj-voice-overlay__button--primary {
	background: linear-gradient(135deg, #0ea5e9 0%, #1d4ed8 100%);
	color: #ffffff;
	box-shadow: 0 12px 30px rgba(14, 165, 233, 0.35);
}

.lj-voice-overlay__button--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 36px rgba(14, 165, 233, 0.45);
}

.lj-voice-overlay__button--secondary {
	background: #f1f5f9;
	color: #0f172a;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-voice-overlay__button--secondary:hover {
	transform: translateY(-1px);
	background: #e2e8f0;
}

.lj-voice-overlay__waveform {
	display: flex;
	gap: 6px;
	align-items: flex-end;
	height: 32px;
}

.lj-voice-overlay__waveform-bar {
	width: 6px;
	border-radius: 999px;
	background: rgba(32, 121, 176, 0.45);
	animation: lj-wave 1.2s infinite ease-in-out;
}

.lj-voice-overlay__waveform-bar:nth-child(2) {
	animation-delay: 0.15s;
}

.lj-voice-overlay__waveform-bar:nth-child(3) {
	animation-delay: 0.3s;
}

.lj-voice-overlay__waveform-bar:nth-child(4) {
	animation-delay: 0.45s;
}

.lj-voice-overlay__waveform-bar:nth-child(5) {
	animation-delay: 0.6s;
}

@keyframes lj-wave {
	0%, 100% {
		height: 6px;
		background: rgba(32, 121, 176, 0.35);
	}
	50% {
		height: 28px;
		background: rgba(32, 121, 176, 0.75);
	}
}
/* Badge Display - Sidebar Component */

.badge-display {
	padding: 12px;
}

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

.badge-display-header h3 {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	margin: 0;
}

.badge-count {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	min-width: 24px;
	text-align: center;
}

/* Badge Grid */
.badge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 12px;
}

.badge-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.badge-card:hover {
	transform: scale(1.1);
}

.badge-card-icon {
	font-size: 64px;
	animation: badgeBounce 0.6s ease-out;
}

.badge-card-icon-img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	animation: badgeBounce 0.6s ease-out;
}

@keyframes badgeBounce {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}


/* Collapsed State */
.badge-display-collapsed {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.badge-count-indicator {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #ef4444;
	color: white;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.badge-mini-icon {
	font-size: 24px;
}

/* Empty State */
.badge-display-empty {
	padding: 24px 16px;
	text-align: center;
	color: #94a3b8;
}

.badge-empty-icon {
	font-size: 48px;
	margin-bottom: 12px;
	opacity: 0.5;
}

.badge-display-empty p {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 4px 0;
	color: #64748b;
}

.badge-display-empty small {
	font-size: 11px;
	color: #94a3b8;
}

/* Loading State */
.badge-display-loading {
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.badge-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(102, 126, 234, 0.2);
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

/* Error State */
.badge-display-error {
	padding: 16px;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 8px;
	color: #dc2626;
	font-size: 12px;
	text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
	.badge-grid {
		grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
		gap: 8px;
	}

	.badge-card {
		padding: 6px;
	}

	.badge-card-icon {
		font-size: 52px;
	}

	.badge-card-icon-img {
		width: 52px;
		height: 52px;
	}
}

/* Badge Unlock Modal - Full screen celebration */

.badge-unlock-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.badge-unlock-overlay.visible {
	opacity: 1;
	pointer-events: all;
}

.badge-unlock-modal {
	position: relative;
	max-width: 500px;
	width: 90%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 24px;
	padding: 48px 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	transform: scale(0.8);
	opacity: 0;
	animation: modalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation-delay: 0.1s;
	overflow: hidden;
}

/* Confetti Animation */
.badge-confetti {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
}

.confetti-piece {
	position: absolute;
	width: 10px;
	height: 10px;
	top: -20px;
	animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(100vh) rotate(720deg);
		opacity: 0;
	}
}

/* Badge Content */
.badge-unlock-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: white;
}

/* Badge Icon with Flip Animation */
.badge-unlock-icon-wrapper {
	position: relative;
	display: inline-block;
	margin-bottom: 24px;
}

.badge-glow-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
	animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.5;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2);
		opacity: 0.8;
	}
}

.badge-icon-container {
	position: relative;
	width: 160px;
	height: 160px;
	margin: 0 auto;
	perspective: 1000px;
}

.badge-icon {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
}

.badge-flip {
	animation: badgeFlip 1.5s ease-in-out;
}

@keyframes badgeFlip {
	0% {
		transform: rotateY(0deg) scale(0.5);
	}
	50% {
		transform: rotateY(180deg) scale(1.2);
	}
	100% {
		transform: rotateY(360deg) scale(1);
	}
}

.badge-icon-front,
.badge-icon-back {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 100px;
	backface-visibility: hidden;
}

.badge-icon-front img,
.badge-icon-back img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.badge-icon-back {
	transform: rotateY(180deg);
}

/* Text Styles */
.badge-unlock-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 16px 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	animation: titleBounce 0.6s ease-out;
	animation-delay: 0.5s;
	animation-fill-mode: both;
}

@keyframes titleBounce {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	60% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.badge-unlock-message {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px 0;
	opacity: 0;
	animation: fadeInUp 0.5s ease-out forwards;
	animation-delay: 0.8s;
}

.badge-unlock-message strong {
	font-weight: 700;
	font-size: 24px;
	display: block;
	margin-top: 8px;
}

.badge-unlock-description {
	font-size: 16px;
	margin: 0 0 12px 0;
	opacity: 0.9;
	opacity: 0;
	animation: fadeInUp 0.5s ease-out forwards;
	animation-delay: 1s;
}

.badge-unlock-encouragement {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 32px 0;
	opacity: 0;
	animation: fadeInUp 0.5s ease-out forwards;
	animation-delay: 1.2s;
}

@keyframes fadeInUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Close Button */
.badge-unlock-close-btn {
	background: white;
	color: #667eea;
	border: none;
	padding: 14px 32px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	opacity: 0;
	animation: fadeInUp 0.5s ease-out forwards;
	animation-delay: 1.4s;
}

.badge-unlock-close-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.badge-unlock-close-btn:active {
	transform: translateY(0);
}

/* Modal Pop Animation */
@keyframes modalPop {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	60% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.badge-unlock-modal {
		padding: 32px 24px;
	}

	.badge-unlock-title {
		font-size: 24px;
	}

	.badge-unlock-message {
		font-size: 18px;
	}

	.badge-unlock-message strong {
		font-size: 20px;
	}

	.badge-icon-container {
		width: 130px;
		height: 130px;
	}

	.badge-icon-front,
	.badge-icon-back {
		font-size: 80px;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.badge-flip,
	.badge-glow-ring,
	.confetti-piece,
	.badge-unlock-title,
	.badge-unlock-message,
	.badge-unlock-description,
	.badge-unlock-encouragement,
	.badge-unlock-close-btn {
		animation: none !important;
	}

	.badge-unlock-modal {
		transform: scale(1);
		opacity: 1;
	}

	.badge-unlock-title,
	.badge-unlock-message,
	.badge-unlock-description,
	.badge-unlock-encouragement,
	.badge-unlock-close-btn {
		opacity: 1;
	}
}

.lj-notes-modal {
	position: relative;
	background: #ffffff;
	color: #0f172a;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* When embedded inside the Learning Journey sidebar, let it fill the full panel */
.lj-sidebar__chat-container .lj-notes-modal {
	height: 100%;
	min-height: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	box-shadow: none;
}

.lj-notes-modal__body {
	--lj-notes-modal-body-margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	min-height: 0;
	flex: 1;
	overflow: hidden;
	margin-bottom: var(--lj-notes-modal-body-margin-bottom);
	box-sizing: border-box;
}

.lj-notes-modal__sidebar {
	border-right: none;
	border-bottom: 1px solid rgba(148, 163, 184, 0.2);
	padding: 16px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex-shrink: 0;
}

.lj-notes-modal__back-row {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 12px;
}

.lj-notes-modal__back-row--editor {
	margin-top: 12px;
	margin-bottom: 16px;
	padding-top: 4px;
	justify-content: center;
}

/* Same bg as .lj-header; text = sidebar font (Akademi sidebar tokens on #lj-runner) */
.lj-notes-modal__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	border-radius: 10px;
	background: var(--akademi-sidebar-bg-color, #193852);
	color: var(--akademi-sidebar-font-color, #ffffff);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-sizing: border-box;
	transition: filter 160ms ease, border-color 160ms ease;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.lj-notes-modal__back:hover {
	filter: brightness(1.08);
	border-color: color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 28%, transparent);
}

.lj-notes-modal__back:active {
	filter: brightness(0.95);
}

.lj-notes-modal__back:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--akademi-sidebar-bg-color, #193852) 55%, transparent);
	outline-offset: 2px;
}

.lj-notes-modal__back-icon {
	flex-shrink: 0;
	display: block;
	stroke: currentColor;
}

.lj-notes-modal__back-label {
	font-size: inherit;
	font-weight: inherit;
}

.lj-notes-modal__sidebar-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 0;
}

.lj-notes-modal__view-notes-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: #ffffff;
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	flex: 1;
	min-width: 0;
	justify-content: space-between;
}

.lj-notes-modal__view-notes-toggle:hover {
	background: #f8fafc;
	border-color: rgba(102, 126, 234, 0.45);
	color: #1e293b;
}

.lj-notes-modal__view-notes-toggle:focus-visible {
	outline: 2px solid rgba(102, 126, 234, 0.5);
	outline-offset: 2px;
}

.lj-notes-modal__view-notes-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lj-notes-modal__view-notes-chevron {
	flex-shrink: 0;
	color: #64748b;
	transition: transform 0.25s ease;
}

.lj-notes-modal__view-notes-toggle.is-open .lj-notes-modal__view-notes-chevron {
	transform: rotate(180deg);
}

/* Accent fill: overlay colour; text: sidebar font (--akademi-sidebar-* on #lj-runner) */
.lj-notes-modal__new-note {
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	cursor: pointer;
	box-sizing: border-box;
	transition: filter 160ms ease, border-color 160ms ease;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.lj-notes-modal__new-note:hover {
	filter: brightness(1.08);
	border-color: color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 28%, transparent);
}

.lj-notes-modal__new-note:active {
	filter: brightness(0.95);
}

.lj-notes-modal__new-note-icon {
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
}

/* Show at most 3 note rows before scrolling (row ≈ padding + title + meta + inner gap; ul gap 4px × 2) */
.lj-notes-modal__list {
	overflow-y: auto;
	overflow-x: hidden;
	margin-top: 12px;
	--lj-notes-list-row: 3.45rem;
	max-height: calc(3 * var(--lj-notes-list-row) + 2 * 4px);
	padding-right: 4px;
}

/* Enhanced scrollbar styling */
.lj-notes-modal__list::-webkit-scrollbar {
	width: 6px;
}

.lj-notes-modal__list::-webkit-scrollbar-track {
	background: rgba(148, 163, 184, 0.08);
	border-radius: 10px;
}

.lj-notes-modal__list::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.3);
	border-radius: 10px;
	transition: background 0.2s ease;
}

.lj-notes-modal__list::-webkit-scrollbar-thumb:hover {
	background: rgba(102, 126, 234, 0.5);
}

.lj-notes-modal__hint {
	font-size: 12px;
	color: #64748b;
	padding: 12px 8px;
	text-align: center;
	font-style: italic;
	opacity: 0.8;
}

.lj-notes-modal__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lj-notes-modal__list li {
	display: flex;
	align-items: stretch;
	position: relative;
	animation: slideIn 0.2s ease-out backwards;
	min-width: 0; /* Allow flex items to shrink below their content size */
}

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

.lj-notes-modal__list li:nth-child(1) { animation-delay: 0.05s; }
.lj-notes-modal__list li:nth-child(2) { animation-delay: 0.1s; }
.lj-notes-modal__list li:nth-child(3) { animation-delay: 0.15s; }
.lj-notes-modal__list li:nth-child(4) { animation-delay: 0.2s; }
.lj-notes-modal__list li:nth-child(5) { animation-delay: 0.25s; }

.lj-notes-modal__list-item {
	flex: 1;
	min-width: 0; /* Allow flex item to shrink below content size */
	text-align: left;
	border: none;
	background: #ffffff;
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: 8px 0 0 8px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(148, 163, 184, 0.15);
	border-right: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden; /* Ensure content doesn't overflow */
}

.lj-notes-modal__list-item:hover {
	background: #f8fafc;
	transform: translateX(2px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.lj-notes-modal__list-item-title {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease;
	min-width: 0; /* Ensure ellipsis works in flex container */
	max-width: 100%; /* Prevent overflow */
}

.lj-notes-modal__list-item-meta {
	font-size: 11px;
	color: #64748b;
	font-weight: 400;
}

.lj-notes-modal__list-item.is-active {
	background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
	border-color: #667eea;
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.lj-notes-modal__list-item.is-active .lj-notes-modal__list-item-title {
	color: #4c1d95;
	font-weight: 700;
}

.lj-notes-modal__list-item.is-active .lj-notes-modal__list-item-meta {
	color: #6366f1;
}

.lj-notes-modal__list-item-actions {
	width: 44px;
	min-width: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	border-radius: 0 8px 8px 0;
	border: 1px solid rgba(148, 163, 184, 0.15);
	border-left: none;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
}

.lj-notes-modal__list-item-actions.is-confirm {
	width: auto;
	min-width: 132px;
	max-width: 160px;
}

.lj-notes-modal__list-item-delete-confirm {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 10px;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.lj-notes-modal__list-item-delete-confirm-label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	line-height: 1.25;
	text-align: center;
}

.lj-notes-modal__list-item-delete-confirm-buttons {
	display: flex;
	flex-direction: row;
	gap: 6px;
	justify-content: stretch;
}

.lj-notes-modal__list-item-delete-cancel,
.lj-notes-modal__list-item-delete-affirm {
	flex: 1;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	padding: 6px 4px;
	cursor: pointer;
	border: 1px solid rgba(148, 163, 184, 0.35);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lj-notes-modal__list-item-delete-cancel {
	background: #f8fafc;
	color: #475569;
}

.lj-notes-modal__list-item-delete-cancel:hover {
	background: #f1f5f9;
	border-color: rgba(148, 163, 184, 0.5);
}

.lj-notes-modal__list-item-delete-affirm {
	background: #fef2f2;
	color: #b91c1c;
	border-color: rgba(239, 68, 68, 0.45);
}

.lj-notes-modal__list-item-delete-affirm:hover:not(:disabled) {
	background: #fee2e2;
	border-color: rgba(220, 38, 38, 0.55);
}

.lj-notes-modal__list-item-delete-affirm:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.lj-notes-modal__list-item-delete {
	width: 100%;
	min-height: 100%;
	border: none;
	border-radius: 0 8px 8px 0;
	background: transparent;
	color: #ef4444;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0;
	box-shadow: none;
}

.lj-notes-modal__list-item-delete svg {
	display: block;
	flex-shrink: 0;
}

.lj-notes-modal__list-item-delete:hover {
	background: #fef2f2;
	color: #dc2626;
	transform: scale(1.02);
}

.lj-notes-modal__list-item-delete:active {
	transform: scale(0.98);
}

.lj-notes-modal__list-item-delete-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.lj-notes-modal__editor {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	max-height: 600px;
	background: #ffffff;
}

/* Fill sidebar panel: textarea uses remaining height + scrolls; meta + back stay on-screen */
.lj-sidebar__chat-container .lj-notes-modal__editor {
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow: hidden;
}

.lj-sidebar__chat-container .lj-notes-modal__editor > .lj-notes-modal__error,
.lj-sidebar__chat-container .lj-notes-modal__editor > .lj-notes-modal__field:not(.lj-notes-modal__field--textarea) {
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-notes-modal__editor > .lj-notes-modal__field--textarea {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-sidebar__chat-container .lj-notes-modal__editor > .lj-notes-modal__meta,
.lj-sidebar__chat-container .lj-notes-modal__editor > .lj-notes-modal__back-row--editor {
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-notes-modal__editor .lj-notes-modal__field--textarea .lj-notes-modal__field-label {
	flex-shrink: 0;
}

.lj-sidebar__chat-container .lj-notes-modal__editor .lj-notes-modal__field--textarea textarea {
	flex: 1 1 0%;
	min-height: 120px !important;
	width: 100%;
	box-sizing: border-box;
	resize: none;
	overflow-y: auto;
	max-height: none;
	line-height: 1.6;
	/* Flex slot + internal scroll; beats stray inline height from extensions */
	height: 0 !important;
}

/* Enhanced scrollbar styling for editor */
.lj-notes-modal__editor::-webkit-scrollbar {
	width: 6px;
}

.lj-notes-modal__editor::-webkit-scrollbar-track {
	background: rgba(148, 163, 184, 0.08);
	border-radius: 10px;
}

.lj-notes-modal__editor::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.3);
	border-radius: 10px;
	transition: background 0.2s ease;
}

.lj-notes-modal__editor::-webkit-scrollbar-thumb:hover {
	background: rgba(102, 126, 234, 0.5);
}

.lj-notes-modal__error {
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
	color: #991b1b;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13px;
	border: 1px solid #fecaca;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
	animation: shake 0.3s ease;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.lj-notes-modal__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-notes-modal__field-label {
	font-size: 15px;
	font-weight: 600;
	color: #475569;
	letter-spacing: 0.01em;
}

.lj-notes-modal__field input,
.lj-notes-modal__field textarea {
	border-radius: 10px;
	border: 2px solid #e2e8f0;
	padding: 10px 14px;
	font-size: 14px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #1e293b;
	background: #ffffff;
	resize: vertical;
	min-height: 42px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lj-notes-modal__field input:hover,
.lj-notes-modal__field textarea:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.lj-notes-modal__field textarea {
	min-height: 300px;
	line-height: 1.6;
}

.lj-notes-modal__field input:focus,
.lj-notes-modal__field textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 8px rgba(102, 126, 234, 0.15);
	background: #ffffff;
}

.lj-notes-modal__field input::placeholder,
.lj-notes-modal__field textarea::placeholder {
	color: #94a3b8;
	font-style: italic;
}

.lj-notes-modal__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	font-size: 12px;
	color: #64748b;
	padding-top: 8px;
	border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.lj-notes-modal__meta-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.lj-notes-modal__save {
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	cursor: pointer;
	transition: filter 0.16s ease, opacity 0.16s ease;
}

.lj-notes-modal__save:hover:not(:disabled) {
	filter: brightness(1.08);
}

.lj-notes-modal__save:active:not(:disabled) {
	filter: brightness(0.95);
}

.lj-notes-modal__save:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.lj-notes-modal__shortcut {
	font-size: 11px;
	color: #94a3b8;
	background: #f1f5f9;
	padding: 4px 8px;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.lj-notes-modal__toast {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	border: none;
	color: #ffffff;
	border-radius: 12px;
	padding: 12px 24px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
	animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toastSlideIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Loading state animation - handled via React component */

/* Learning Journey sidebar / modal: student teachers list */

.lj-inbox-teachers--modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-inbox-teachers__backdrop {
	position: absolute;
	inset: 0;
	border: none;
	padding: 0;
	margin: 0;
	background: rgba(15, 23, 42, 0.5);
	backdrop-filter: blur(3px);
	cursor: pointer;
}

.lj-inbox-teachers__modal-shell {
	position: relative;
	z-index: 1;
	width: min(400px, 92vw);
	max-height: min(520px, 88vh);
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.lj-inbox-teachers__modal-shell > .lj-inbox-teachers__panel {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
}

.lj-inbox-teachers--inline {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-height: 0;
}

.lj-inbox-teachers__panel {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.lj-inbox-teachers--inline .lj-inbox-teachers__panel {
	border-radius: 0;
	box-shadow: none;
	height: 100%;
}

/* Scrollable middle; back control stays last in flex column (visible, not below fold) */
.lj-inbox-teachers__main {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.lj-inbox-teachers__main > .lj-inbox-teachers__list {
	max-height: none;
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Pin back control to bottom of sidebar panel */
.lj-inbox-teachers--inline .lj-inbox-teachers__panel > .lj-inbox-teachers__inline-back-row {
	margin-top: auto;
	flex-shrink: 0;
}

/* Match .lj-header (tokens inherit from #lj-runner / body when set by theme) */
.lj-inbox-teachers__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	background: var(--akademi-sidebar-bg-color, #193852);
}

.lj-inbox-teachers__title-group {
	min-width: 0;
}

.lj-inbox-teachers__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--akademi-sidebar-font-color, #ffffff);
	letter-spacing: -0.02em;
}

.lj-inbox-teachers__subtitle {
	margin: 4px 0 0;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 78%, transparent);
	line-height: 1.35;
}

.lj-inbox-teachers__subtitle-note {
	font-weight: 400;
	color: color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 55%, transparent);
}

.lj-inbox-teachers__close {
	flex-shrink: 0;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 28%, transparent);
	background: color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 18%, transparent);
	color: var(--akademi-sidebar-font-color, #ffffff);
	width: 32px;
	height: 32px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lj-inbox-teachers__close:hover {
	background: color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 28%, transparent);
	color: var(--akademi-sidebar-font-color, #ffffff);
}

.lj-inbox-teachers__search-wrap {
	padding: 12px 16px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-inbox-teachers__search-wrap--top {
	border-bottom: 1px solid #e2e8f0;
	background: #fff;
	padding-top: 14px;
}

.lj-inbox-teachers__search-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

.lj-inbox-teachers__search {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.9rem;
	font-family: inherit;
	color: #0f172a;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lj-inbox-teachers__search:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.lj-inbox-teachers__search::placeholder {
	color: #94a3b8;
}

.lj-inbox-teachers__status,
.lj-inbox-teachers__error,
.lj-inbox-teachers__hint {
	margin: 0 16px 12px;
	font-size: 0.88rem;
	line-height: 1.45;
}

.lj-inbox-teachers__status {
	color: #64748b;
}

.lj-inbox-teachers__error {
	color: #b91c1c;
	background: #fef2f2;
	padding: 10px 12px;
	border-radius: 10px;
}

.lj-inbox-teachers__hint {
	color: #64748b;
}

.lj-inbox-teachers__list {
	list-style: none;
	margin: 0 12px 12px;
	padding: 4px 0 0;
	/* ~5 rows: avatar row + optional subject line */
	max-height: calc(5 * 4.15rem + 4 * 6px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-inbox-teachers__list::-webkit-scrollbar {
	width: 6px;
}

.lj-inbox-teachers__list::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
}

.lj-inbox-teachers__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	min-height: 3.5rem;
	box-sizing: border-box;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fafafa;
}

.lj-inbox-teachers__avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-inbox-teachers__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lj-inbox-teachers__avatar-fallback {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.lj-inbox-teachers__meta {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lj-inbox-teachers__name {
	font-size: 0.92rem;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lj-inbox-teachers__class {
	font-size: 0.8rem;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lj-inbox-teachers__subject {
	font-size: 0.78rem;
	color: #475569;
	margin-top: 2px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lj-inbox-teachers__row-wrap {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lj-inbox-teachers__row--action {
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	min-height: 3.5rem;
	font: inherit;
	text-align: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.lj-inbox-teachers__row--action:hover:not(:disabled) {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.lj-inbox-teachers__row--action:focus-visible {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.lj-inbox-teachers__row--action:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.lj-inbox-teachers__compose {
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

/* Sidebar: compose between header and pinned back row — fill remaining height and scroll */
.lj-inbox-teachers--inline .lj-inbox-teachers__main > .lj-inbox-teachers__compose {
	flex: 1 1 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Modal: long compose — scroll inside main */
.lj-inbox-teachers--modal .lj-inbox-teachers__main > .lj-inbox-teachers__compose {
	max-height: min(calc(360px * 0.9), 52vh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Conversation after send */
.lj-inbox-teachers__thread {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

.lj-inbox-teachers__thread-messages {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
}

.lj-inbox-teachers__thread-end {
	flex-shrink: 0;
	height: 1px;
}

/* Chat rows: avatar + bubble. --theirs = learner/student (left, light bubble). --mine = teacher (right, accent bubble). */
.lj-inbox-teachers__chat-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 100%;
	padding-bottom: 8px;
}

.lj-inbox-teachers__chat-row--theirs {
	flex-direction: row;
	justify-content: flex-start;
}

.lj-inbox-teachers__chat-row--mine {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.lj-inbox-teachers__chat-avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: #cbd5e1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.lj-inbox-teachers__chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lj-inbox-teachers__chat-avatar-fallback {
	font-size: 0.85rem;
	font-weight: 700;
	color: #475569;
	line-height: 1;
}

.lj-inbox-teachers__chat-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: calc(100% - 44px);
	min-width: 0;
}

.lj-inbox-teachers__chat-row--mine .lj-inbox-teachers__chat-col {
	align-items: flex-end;
}

.lj-inbox-teachers__chat-bubble {
	max-width: min(100%, 260px);
	padding: 10px 14px;
	border-radius: 18px;
	font-size: 0.88rem;
	line-height: 1.45;
	word-break: break-word;
	box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}

/* Learner (left): soft sage / celadon — reads clearly cooler-greener than teacher */
.lj-inbox-teachers__chat-bubble--theirs {
	background: #e8f0ed;
	color: #1e293b;
	border: 1px solid rgba(55, 95, 85, 0.2);
	border-bottom-left-radius: 6px;
}

/* Teacher (right): soft periwinkle blue — hue-shifted from learner so side-by-side they’re obvious */
.lj-inbox-teachers__chat-bubble--mine {
	background: #d8e3fa;
	color: #1e293b;
	border: 1px solid rgba(67, 56, 202, 0.22);
	border-bottom-right-radius: 6px;
}

.lj-inbox-teachers__chat-bubble-body {
	margin: 0;
}

.lj-inbox-teachers__chat-bubble-body p {
	margin: 0.35em 0;
}

.lj-inbox-teachers__chat-bubble-body p:first-child {
	margin-top: 0;
}

.lj-inbox-teachers__chat-bubble-body p:last-child {
	margin-bottom: 0;
}

.lj-inbox-teachers__chat-bubble--theirs .lj-inbox-teachers__chat-bubble-body a {
	color: #4f46e5;
}

.lj-inbox-teachers__chat-bubble--mine .lj-inbox-teachers__chat-bubble-body a {
	color: #4338ca;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lj-inbox-teachers__chat-time {
	display: block;
	margin-top: 4px;
	padding: 0 4px;
	font-size: 0.65rem;
	font-weight: 500;
	color: #64748b;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.lj-inbox-teachers__thread-reply {
	flex-shrink: 0;
	border-top: 1px solid #e2e8f0;
	padding: 12px 16px;
}

.lj-inbox-teachers__thread-reply-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-inbox-teachers__thread-reply-row .lj-inbox-teachers__thread-reply-input {
	flex: 1 1 auto;
	min-width: 0;
}

.lj-inbox-teachers__thread-reply-input {
	resize: vertical;
	min-height: 72px;
}

.lj-inbox-teachers__thread-reply-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.lj-inbox-teachers__thread-reply-dashboard {
	font-size: 0.85rem;
}

/* Round icon control — same chrome as Ask Akami .lj-chat-close--embedded */
.lj-inbox-teachers__icon-round-btn {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #475569;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: inherit;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lj-inbox-teachers__icon-round-btn:hover {
	background: #f8fafc;
	color: #0f172a;
	border-color: #cbd5e1;
}

.lj-inbox-teachers__icon-round-btn__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.lj-inbox-teachers__compose-back.lj-inbox-teachers__icon-round-btn {
	align-self: flex-start;
	margin: 0 0 10px;
}

.lj-inbox-teachers__inline-back-row {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 4px 0 10px;
	flex-shrink: 0;
}

.lj-inbox-teachers__compose-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

.lj-inbox-teachers__compose-label--reply {
	display: block;
	margin-bottom: 8px;
}

.lj-inbox-teachers__compose-input,
.lj-inbox-teachers__compose-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.9rem;
	font-family: inherit;
	color: #0f172a;
	background: #fff;
	resize: vertical;
	min-height: 0;
}

.lj-inbox-teachers__compose-input:focus,
.lj-inbox-teachers__compose-textarea:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.lj-inbox-teachers__compose-flash {
	margin: 0;
}

.lj-inbox-teachers__compose-success {
	margin: 0;
	font-size: 0.88rem;
	color: #15803d;
	line-height: 1.45;
}

.lj-inbox-teachers__compose-link {
	color: #4f46e5;
	font-weight: 600;
	text-decoration: underline;
}

.lj-inbox-teachers__compose-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
}

.lj-inbox-teachers__compose-send {
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	border-radius: 10px;
	padding: 10px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--akademi-sidebar-font-color, #ffffff);
	background: var(--akademi-sidebar-bg-color, #193852);
	cursor: pointer;
	transition: opacity 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.lj-inbox-teachers__compose-send:hover:not(:disabled) {
	filter: brightness(1.08);
}

.lj-inbox-teachers__compose-send:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.lj-inbox-teachers__compose-send--icon {
	flex-shrink: 0;
	box-sizing: border-box;
	width: calc(44px * 0.75);
	height: calc(44px * 0.75);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(10px * 0.75);
	/* Match LJ sidebar / header tokens (school theme) */
	background: var(--akademi-sidebar-bg-color, #193852);
	color: var(--akademi-sidebar-font-color, #ffffff);
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
}

.lj-inbox-teachers__compose-send-icon {
	width: calc(1.35rem * 0.75);
	height: calc(1.35rem * 0.75);
	flex-shrink: 0;
}
.lj-gradebook-panel {
	position: relative;
	background: #ffffff;
	color: #0f172a;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: lj-gradebook-fade 0.2s ease-out;
}

@keyframes lj-gradebook-fade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lj-sidebar__chat-container .lj-gradebook-panel {
	flex: 1 1 0;
	height: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	box-shadow: none;
}

.lj-gradebook-panel__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 16px;
	min-height: 0;
	flex: 1;
	overflow: hidden;
	box-sizing: border-box;
}

.lj-gradebook-panel__body--scrollable {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.lj-gradebook-panel__back-row {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 12px;
}

.lj-gradebook-panel__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	background: var(--akademi-sidebar-bg-color, #193852);
	color: var(--akademi-sidebar-font-color, #ffffff);
}

.lj-gradebook-panel__back:hover {
	filter: brightness(1.06);
}

.lj-gradebook-panel__back-icon {
	flex-shrink: 0;
}

.lj-gradebook-panel__header {
	margin-bottom: 16px;
}

.lj-gradebook-panel__title {
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 700;
}

.lj-gradebook-panel__subtitle {
	margin: 0;
	font-size: 13px;
	color: #64748b;
	line-height: 1.4;
}

.lj-gradebook-panel__status {
	margin: 12px 0;
	font-size: 14px;
	color: #475569;
}

.lj-gradebook-panel__status--error {
	color: #b91c1c;
}

.lj-gradebook-panel__avg {
	padding: 12px 8px 16px;
	margin-bottom: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex-shrink: 0;
}

.lj-gradebook-panel__avg-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
	margin-bottom: 8px;
	width: 100%;
}

.lj-gradebook-panel__avg-letter {
	font-size: 2.75rem;
	font-weight: 800;
	color: #1d4ed8;
	line-height: 1;
	letter-spacing: -0.02em;
}

.lj-gradebook-panel__avg-letter--empty {
	font-size: 2rem;
	font-weight: 700;
	color: #94a3b8;
}

.lj-gradebook-panel__avg-marks {
	margin-top: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
}

.lj-gradebook-panel__avg-marks--empty {
	color: #94a3b8;
	font-weight: 600;
}

.lj-gradebook-panel__avg-pct {
	margin-top: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #64748b;
}

.lj-gradebook-panel__avg-meta {
	margin-top: 10px;
	font-size: 13px;
	color: #64748b;
}

.lj-gradebook-panel__list-wrap {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.lj-gradebook-panel__list-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 2px;
	margin-right: -2px;
}

.lj-gradebook-panel__list-heading {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #334155;
	flex-shrink: 0;
}

.lj-gradebook-panel__empty {
	margin: 0;
	padding: 8px 0 4px;
	font-size: 14px;
	color: #64748b;
}

.lj-gradebook-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-gradebook-panel__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 10px;
}

.lj-gradebook-panel__row-main {
	min-width: 0;
	flex: 1;
}

.lj-gradebook-panel__row-title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.35;
	word-break: break-word;
}

.lj-gradebook-panel__row-date {
	margin-top: 4px;
	font-size: 12px;
	color: #64748b;
}

.lj-gradebook-panel__row-grade {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 2px;
	min-width: 5.5rem;
}

.lj-gradebook-panel__row-letter {
	font-size: 1.1rem;
	font-weight: 800;
	color: #1d4ed8;
	line-height: 1.2;
}

.lj-gradebook-panel__row-letter--empty {
	color: #94a3b8;
	font-weight: 700;
}

.lj-gradebook-panel__row-marks {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
	white-space: nowrap;
}

.lj-gradebook-panel__row-pct {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	line-height: 1.2;
}

/* Dashboard gradebook scale (GradebookPage .gradebook-paper-focus-type__avgValue--*) — after row/avg defaults so colours win */
.lj-gradebook-panel__letter--a1 {
	color: #16a34a;
}
.lj-gradebook-panel__letter--a2 {
	color: #22c55e;
}
.lj-gradebook-panel__letter--b3 {
	color: #65a30d;
}
.lj-gradebook-panel__letter--b4 {
	color: #84cc16;
}
.lj-gradebook-panel__letter--c5 {
	color: #ca8a04;
}
.lj-gradebook-panel__letter--c6 {
	color: #f59e0b;
}
.lj-gradebook-panel__letter--d7 {
	color: #ea580c;
}
.lj-gradebook-panel__letter--e8 {
	color: #dc2626;
}
.lj-gradebook-panel__letter--f9 {
	color: #991b1b;
}
/* Chapter Unlock Notification - Appears below header when next chapter is unlocked */

.lj-chapter-unlock-notification {
	position: sticky;
	top: 0; /* Stick at top when header is hidden */
	width: 100%;
	max-width: 100%;
	margin: 0 0 18px;
	animation: slideDownBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 4;
}

.lj-chapter-unlock-notification__content {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.08) 100%);
	border: 2px solid rgba(34, 197, 94, 0.25);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15), 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.lj-chapter-unlock-notification__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.15);
	color: #16a34a;
	animation: iconPulse 2s ease-in-out infinite;
}

.lj-chapter-unlock-notification__icon svg {
	position: relative;
	z-index: 2;
}

.lj-chapter-unlock-notification__sparkles {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.lj-chapter-unlock-notification__sparkle {
	position: absolute;
	font-size: 12px;
	opacity: 0;
	animation: sparkleRotate 2s ease-in-out infinite;
}

.lj-chapter-unlock-notification__sparkle:nth-child(1) {
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 0s;
}

.lj-chapter-unlock-notification__sparkle:nth-child(2) {
	top: 50%;
	left: -8px;
	transform: translateY(-50%);
	animation-delay: 0.4s;
}

.lj-chapter-unlock-notification__sparkle:nth-child(3) {
	top: 50%;
	right: -8px;
	transform: translateY(-50%);
	animation-delay: 0.8s;
}

.lj-chapter-unlock-notification__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lj-chapter-unlock-notification__title {
	font-size: 15px;
	font-weight: 600;
	color: #059669;
	line-height: 1.4;
}

.lj-chapter-unlock-notification__chapter {
	font-size: 14px;
	font-weight: 500;
	color: #0f172a;
	line-height: 1.4;
	opacity: 0.85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lj-chapter-unlock-notification__button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 10px;
	border: none;
	background: #16a34a;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	white-space: nowrap;
}

.lj-chapter-unlock-notification__button:hover {
	background: #15803d;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.lj-chapter-unlock-notification__button:active {
	transform: translateY(0);
}

.lj-chapter-unlock-notification__button svg {
	flex-shrink: 0;
}

/* Slide down animation */
@keyframes slideDownBounce {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
		max-height: 0;
		margin-bottom: 0;
	}
	60% {
		opacity: 1;
		transform: translateY(4px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		max-height: 100px;
		margin-bottom: 18px;
	}
}

/* Icon pulse animation */
@keyframes iconPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
	}
}

/* Sparkle rotation animation */
@keyframes sparkleRotate {
	0%, 100% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
	}
}

/* Exit animation */
.lj-chapter-unlock-notification.lj-chapter-unlock-notification--exiting {
	animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
		max-height: 100px;
		margin-bottom: 18px;
	}
	100% {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
		max-height: 0;
		margin-bottom: 0;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.lj-chapter-unlock-notification__content {
		flex-wrap: wrap;
		gap: 12px;
	}
	
	.lj-chapter-unlock-notification__button {
		width: 100%;
		justify-content: center;
	}
	
	.lj-chapter-unlock-notification__chapter {
		white-space: normal;
		line-height: 1.3;
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.lj-chapter-unlock-notification,
	.lj-chapter-unlock-notification__icon,
	.lj-chapter-unlock-notification__sparkle {
		animation: none !important;
	}
	
	.lj-chapter-unlock-notification {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
 * Essay Practice Question Card Styles
 * Styles for the essay practice question card and related components
 */

/* Combined Argumentative Essay Question Card */
.lj-essay-combined {
	padding: 1rem 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-essay-combined * {
	box-sizing: border-box;
}

.lj-essay-combined__generator {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 2px solid #e0e0e0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-essay-combined__answer {
	margin-top: 2rem;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Part A & B Section Titles */
.lj-essay-section-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #2271b1;
}

/* Two-Column Layout for Question Generator */
.lj-essay-generator__two-column {
	display: grid;
	grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
	gap: 2rem;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
}

.lj-essay-generator__column-left {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	box-sizing: border-box;
}

/* Theme Input Field */
.lj-essay-generator__theme-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lj-essay-generator__theme-label {
	font-weight: 600;
	color: #1d2327;
	font-size: 0.9rem;
}

.lj-essay-generator__theme-input {
	width: 100%;
	padding: 0.625rem;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.lj-essay-generator__theme-input:focus {
	border-color: #2271b1;
	outline: none;
	box-shadow: 0 0 0 1px #2271b1;
}

.lj-essay-generator__column-right {
	background: #f9fafb;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1.5rem;
	min-height: 150px;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.lj-essay-generator__questions-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Clickable Question Buttons */
.lj-essay-generator__question-button {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	line-height: 1.6;
	width: 100%;
	max-width: 100%;
	padding: 1rem;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	font-size: inherit;
	box-sizing: border-box;
	overflow: hidden;
}

.lj-essay-generator__question-button:hover {
	border-color: #2271b1;
	background: #f0f6fc;
	box-shadow: 0 2px 4px rgba(34, 113, 177, 0.1);
}

.lj-essay-generator__question-button:active {
	transform: translateY(1px);
}

.lj-essay-generator__question-number {
	font-weight: 600;
	color: #2271b1;
	flex-shrink: 0;
}

.lj-essay-generator__question-text {
	color: #1d2327;
	font-size: calc(1rem + 1px);
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

.lj-essay-generator__placeholder {
	color: #6b7280;
	font-style: italic;
	text-align: center;
	margin: 2rem 0;
}

/* Essay Student Answer */
.lj-essay-answer {
	padding: 1rem 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Manual Entry in Part B */
.lj-essay-answer__manual-entry {
	margin-bottom: 2rem;
}

.lj-essay-answer__label {
	display: block;
	margin-bottom: 0.75rem;
	font-weight: 600;
	color: #1d2327;
	font-size: 0.95rem;
}

.lj-essay-answer__question-input-wrapper {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.lj-essay-answer__question-textarea {
	flex: 1;
	padding: 0.875rem;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.lj-essay-answer__question-textarea:focus {
	border-color: #2271b1;
	outline: none;
	box-shadow: 0 0 0 1px #2271b1;
}

.lj-essay-answer__question-textarea:disabled {
	background: #f9fafb;
	color: #6b7280;
	cursor: not-allowed;
}

.lj-essay-answer__question-textarea--spm-paper2 {
	min-height: 0;
}

.lj-essay-answer__question-textarea--scm {
	min-height: 440px;
}

.lj-essay-answer__question-textarea--guided-writing {
	min-height: 310px;
}

.lj-essay-answer__question-textarea--extended-writing {
	min-height: 0;
}

/* Override disabled styling when question is locked - keep it looking normal */
.lj-essay-answer__question-textarea.is-locked:disabled {
	background: #ffffff;
	color: #1d2327;
	cursor: default;
	border-color: #2271b1;
	opacity: 1;
	padding-bottom: 0.875rem;
	line-height: 1.5;
}

.lj-essay-answer__marks {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #50575e;
	font-weight: 600;
}

.lj-essay-answer__editor {
	margin-bottom: 1rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.lj-essay-answer__textarea {
	width: 100%;
	max-width: 100%;
	min-height: 400px;
	padding: 1rem;
	border: 2px solid #ddd;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 1.2rem;
	line-height: 1.8;
	resize: vertical;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-essay-answer__textarea:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.lj-essay-answer__textarea:disabled {
	background: #f6f7f7;
	cursor: not-allowed;
}

.lj-essay-answer__word-count {
	margin-top: 0.5rem;
	text-align: right;
	font-size: 0.9rem;
	color: #50575e;
}

.lj-essay-answer__word-count.is-over-limit {
	color: #d63638;
	font-weight: 600;
}

.lj-essay-answer__word-count.is-under-minimum {
	color: #dba617;
}

.lj-essay-answer__warning {
	font-weight: 600;
}

/* Extended Writing Question Selector */
.lj-extended-writing-selector {
	padding: 1.5rem 0;
}

.lj-extended-writing-selector__instruction {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 1.5rem;
	text-align: center;
}

.lj-extended-writing-selector__actions {
	display: flex;
	justify-content: center;
	margin: 0 0 1rem 0;
}

.lj-extended-writing-selector__assignment-instructions {
	margin: 0 auto 1.5rem auto;
	max-width: 720px;
	color: #3b4251;
	line-height: 1.6;
	text-align: center;
	font-size: 0.95rem;
	white-space: pre-line;
}

.lj-extended-writing-selector__questions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: none;
	margin: 0;
}

.lj-extended-writing-selector__question-card {
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 1.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	grid-template-areas:
		"header preview"
		"header button";
	column-gap: 1.25rem;
	row-gap: 1rem;
	align-items: start;
}

.lj-extended-writing-selector__question-card:hover {
	border-color: #2271b1;
	box-shadow: 0 4px 16px rgba(34, 113, 177, 0.15);
	transform: translateY(-2px);
}

.lj-extended-writing-selector__question-card:active {
	transform: translateY(0);
}

.lj-extended-writing-selector__question-header {
	grid-area: header;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.75rem;
	margin-bottom: 0;
	padding-right: 1rem;
	border-right: 1px solid #f0f0f0;
}

.lj-extended-writing-selector__question-number {
	font-size: 1.1rem;
	font-weight: 700;
	color: #2271b1;
}

.lj-extended-writing-selector__question-type {
	font-size: 0.85rem;
	color: #6b7280;
	background: #f3f4f6;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-weight: 500;
}

.lj-extended-writing-selector__question-preview {
	grid-area: preview;
	font-size: calc(0.95rem + 1px);
	line-height: 1.6;
	color: #374151;
	margin-bottom: 0;
	min-height: 0;
	display: block;
	white-space: pre-wrap;
	overflow: visible;
}

.lj-extended-writing-selector__select-button {
	grid-area: button;
	background: linear-gradient(135deg, #2271b1 0%, #1e5a8a 100%);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.2s ease;
	margin-top: 0;
	width: fit-content;
}

.lj-extended-writing-selector__question-card:hover .lj-extended-writing-selector__select-button {
	background: linear-gradient(135deg, #1e5a8a 0%, #1a4f7a 100%);
	transform: scale(1.02);
}

/* EFL Paper 2 Composition Question Selector (own naming, mirrors Extended Writing) */
.lj-efl-composition-selector {
	padding: 1.5rem 0;
}

.lj-efl-composition-selector__instruction {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 1.5rem;
	text-align: center;
}

.lj-efl-composition-selector__actions {
	display: flex;
	justify-content: center;
	margin: 0 0 1rem 0;
}

.lj-efl-composition-selector__assignment-instructions {
	margin: 0 auto 1.5rem auto;
	max-width: 720px;
	color: #3b4251;
	line-height: 1.6;
	text-align: center;
	font-size: 0.95rem;
	white-space: pre-line;
}

.lj-efl-composition-selector__questions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.lj-efl-composition-selector__questions {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lj-efl-composition-selector__question-card {
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 1.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}

.lj-efl-composition-selector__question-card:hover {
	border-color: #2271b1;
	box-shadow: 0 4px 16px rgba(34, 113, 177, 0.15);
	transform: translateY(-2px);
}

.lj-efl-composition-selector__question-card:active {
	transform: translateY(0);
}

.lj-efl-composition-selector__question-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f0f0f0;
}

.lj-efl-composition-selector__question-number {
	font-size: 1.1rem;
	font-weight: 700;
	color: #2271b1;
}

.lj-efl-composition-selector__question-type {
	font-size: 0.85rem;
	color: #6b7280;
	background: #f3f4f6;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-weight: 500;
}

.lj-efl-composition-selector__question-preview {
	font-size: calc(0.95rem + 1px);
	line-height: 1.6;
	color: #374151;
	margin-bottom: 1.5rem;
	white-space: pre-wrap;
	overflow: visible;
}

.lj-efl-composition-selector__select-button {
	background: linear-gradient(135deg, #2271b1 0%, #1e5a8a 100%);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.2s ease;
	margin-top: auto;
}

.lj-efl-composition-selector__question-card:hover .lj-efl-composition-selector__select-button {
	background: linear-gradient(135deg, #1e5a8a 0%, #1a4f7a 100%);
	transform: scale(1.02);
}

/* Action buttons group */
.lj-essay-actions__group {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Akami Marking Modal */
.lj-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.lj-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: slideUp 0.4s ease;
}

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

.lj-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.lj-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.lj-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.lj-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
}

.lj-marking-modal__progress-bar {
	width: 100%;
	height: 8px;
	background: #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	margin: 1rem 0;
}

.lj-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 4px;
	transition: width 0.5s ease;
}

.lj-marking-modal__hint {
	font-size: 0.875rem;
	color: #475569;
	margin: 1rem 0 0 0;
	padding: 0.75rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.lj-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;
}

.lj-marking-modal__spinner .lj-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Responsive adjustments for 2-column layout */
@media (max-width: 768px) {
	.lj-essay-generator__two-column {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.lj-essay-answer__question-input-wrapper {
		flex-direction: column;
	}
	
	.lj-essay-answer__question-input-wrapper .button {
		width: 100%;
	}

	.lj-essay-answer__textarea {
		min-height: 300px;
		font-size: 0.95rem;
	}

	.lj-essay-answer__question-textarea--spm-paper2 {
		min-height: 0;
	}

	.lj-essay-answer__question-textarea--scm {
		min-height: 400px;
	}

	.lj-essay-answer__question-textarea--guided-writing {
		min-height: 180px;
	}

	/* Extended Writing Selector - Mobile */
	.lj-extended-writing-selector__questions {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.lj-extended-writing-selector__question-card {
		padding: 1rem;
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"preview"
			"button";
		row-gap: 0.75rem;
	}

	.lj-extended-writing-selector__question-header {
		gap: 0.5rem;
		padding-right: 0;
		padding-bottom: 0.75rem;
		border-right: 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.lj-extended-writing-selector__question-preview {
		min-height: 3.6rem;
		font-size: calc(0.9rem + 1px);
	}

	.lj-extended-writing-selector__select-button {
		padding: 0.625rem 1.25rem;
		font-size: 0.85rem;
	}
	
	.lj-essay-actions__group {
		flex-direction: column;
	}
	
	.lj-essay-actions__group .button {
		width: 100%;
	}
}

/**
 * Language Review Card Styles
 * Styles for the language review card and error display
 */

.lj-language-review {
	padding: 1rem 0;
	border: none;
	background: none;
}

.lj-language-review__instructions {
	padding: 1rem;
	background: #f0f9ff;
	border-left: 4px solid #3b82f6;
	border-radius: 4px;
	margin-bottom: 1.5rem;
}

.lj-language-review__instructions p {
	margin: 0;
	color: #1e40af;
	line-height: 1.6;
}

/* Tabs */
.lj-language-review__tabs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #e5e7eb;
}

.lj-language-review__tab-buttons {
	display: flex;
	gap: 0.5rem;
}

.lj-language-review__tab {
	padding: 0.75rem 1.5rem;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s;
}

.lj-language-review__tab:hover {
	border-color: #3b82f6;
	color: #3b82f6;
}

.lj-language-review__tab.is-active {
	background: #3b82f6;
	border-color: #3b82f6;
	color: #fff;
}

/* Status Counter */
.lj-language-review__status-counter {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.lj-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

.lj-status-badge--corrected {
	background: #d1fae5;
	color: #065f46;
	border-radius: 5px;
}

.lj-status-badge--in-progress {
	background: #dbeafe;
	color: #1e40af;
	border-radius: 5px;
}

.lj-status-badge--not-fixed {
	background: #fef3c7;
	color: #92400e;
	border-radius: 5px;
}

.lj-status-badge--need-help {
	background: #f3e8ff;
	color: #6b21a8;
	border-radius: 5px;
	opacity: 0.7;
}

.lj-status-badge--reviewed {
	background: #fef3c7;
	color: #a16207;
	border-radius: 5px;
}

.lj-status-badge--dismissed {
	background: #f3f4f6;
	color: #6b7280;
	border-radius: 5px;
}

/* Error Types Legend */
.lj-language-review__legend {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: #f9fafb;
	border-radius: 8px;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.lj-language-review__legend-title {
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
}

.lj-language-review__legend-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.lj-error-type-badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Question Display */
.lj-language-review__question {
	padding: 0;
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: #1f2937;
}

/* Filters */
.lj-language-review__filters {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.lj-language-review__filters-label {
	font-weight: 600;
	color: #6b7280;
	white-space: nowrap;
}

.lj-language-review__filter-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.lj-filter-button {
	padding: 0.5rem 1rem;
	border: 2px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s;
}

.lj-filter-button:hover {
	border-color: var(--filter-color, #3b82f6);
	color: var(--filter-color, #3b82f6);
}

.lj-filter-button.is-active {
	background: var(--filter-color, #3b82f6);
	border-color: var(--filter-color, #3b82f6);
	color: #fff;
}

/* Essay Display */
.lj-language-review__essay {
	padding: 2rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	line-height: 2;
	font-size: 1.2rem;
}

.lj-language-review__paragraph {
	margin-bottom: 1.5rem;
	text-align: justify;
}

.lj-language-review__paragraph:last-child {
	margin-bottom: 0;
}

/* Error Tokens */
.lj-error-token {
	cursor: pointer;
	padding: 0 2px;
	border-radius: 2px;
	transition: all 0.2s;
	position: relative;
}

.lj-error-token:hover {
	opacity: 0.8;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lj-error-token--corrected {
	background: #d1fae5 !important;
	border-bottom: 2px solid #10b981 !important;
	text-decoration: line-through;
	opacity: 0.6;
}

.lj-error-token--in-progress {
	border-bottom-style: dashed !important;
}

.lj-error-token--skipped {
	opacity: 0.5;
	filter: grayscale(50%);
}

/* No Errors Message */
.lj-language-review__no-errors {
	padding: 3rem;
	text-align: center;
	color: #10b981;
	font-size: 1.1rem;
	font-weight: 600;
}

/* Loading and Error States */
.lj-language-review__loading,
.lj-language-review__error {
	padding: 3rem;
	text-align: center;
}

/* Errors Table */
.lj-language-review__errors-table {
	margin-top: 2rem;
	background: white;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-language-review__errors-table-header {
	background: #007cba;
	color: white;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.lj-language-review__errors-table-icon {
	font-size: 19.2px;
}

.lj-language-review__errors-table-title {
	font-weight: 600;
	font-size: 16px;
}

.lj-language-review__errors-table-container {
	overflow-x: auto;
	overflow-y: visible;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

.lj-language-review__table {
	border-collapse: collapse;
	table-layout: fixed;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-language-review__table-header {
	padding: 10px;
	text-align: left;
	font-weight: 600;
	color: #374151;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}

.lj-language-review__table-header--type {
	width: 15%;
	text-align: center;
}

.lj-language-review__table-header--comment {
	width: 40%;
	text-align: left;
}

.lj-language-review__table-header--correction {
	width: 35%;
	text-align: left;
}

.lj-language-review__table-header--status {
	width: 10%;
	text-align: center;
}

.lj-language-review__table-row {
	border-bottom: 1px solid #e5e7eb;
	transition: background-color 0.2s;
}

.lj-language-review__table-row:hover {
	background-color: #f9fafb;
}

.lj-language-review__table-row:last-child {
	border-bottom: none;
}

.lj-language-review__table-cell {
	padding: 12px 10px;
	color: #374151;
	font-size: 14px;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

.lj-language-review__table-cell--type {
	text-align: center;
}

.lj-language-review__table-cell--comment {
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	min-width: 200px;
	max-width: 400px;
}

.lj-language-review__table-cell--comment mark {
	font-weight: 500;
	cursor: pointer;
}

.lj-language-review__table-cell--correction {
	text-align: left;
}

.lj-language-review__table-cell--status {
	text-align: center;
}

.lj-error-type-badge--table {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	color: white;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
}

/* Responsive */
@media (max-width: 768px) {
	.lj-language-review__tabs {
		flex-direction: column;
		align-items: stretch;
	}
	
	.lj-language-review__status-counter {
		justify-content: center;
	}
	
	.lj-language-review__legend {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.lj-language-review__filters {
		flex-direction: column;
		align-items: stretch;
	}
	
	.lj-language-review__filter-buttons {
		justify-content: center;
	}
	
	.lj-language-review__errors-table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.lj-language-review__table {
		min-width: 700px;
	}
	
	.lj-language-review__table-cell {
		padding: 8px 6px;
		font-size: 13px;
	}
	
	.lj-language-review__table-cell--comment {
		min-width: 180px;
		max-width: 350px;
	}
}

/**
 * Correction Modal Styles
 * Styles for the correction modal component
 */

/* Correction Modal Overlay */
.lj-correction-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.lj-correction-modal {
	background: #fff;
	border-radius: 12px;
	width: 90%;
	max-width: 800px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	position: relative;
}

.lj-correction-modal--success {
	animation: modalSuccess 0.5s ease-out;
}

@keyframes modalSuccess {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Modal Header */
.lj-correction-modal__header {
	padding: 1.5rem;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.lj-correction-modal__header h3 {
	margin: 0;
	font-size: 1.25rem;
	color: #1f2937;
}

.lj-correction-modal__close {
	width: 32px;
	height: 32px;
	border: none;
	background: #f3f4f6;
	border-radius: 6px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
	transition: all 0.2s;
}

.lj-correction-modal__close:hover {
	background: #e5e7eb;
	color: #1f2937;
}

/* Modal Body */
.lj-correction-modal__body {
	padding: 1.5rem;
}

.lj-correction-modal__section {
	margin-bottom: 1.5rem;
}

.lj-correction-modal__section:last-child {
	margin-bottom: 0;
}

.lj-correction-modal__section h4 {
	margin: 0 0 0.75rem 0;
	font-size: 1rem;
	font-weight: 600;
	color: #374151;
}

/* Context Section */
.lj-correction-modal__context {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1rem;
	font-size: 1rem;
	line-height: 1.8;
}

.lj-correction-modal__context-before,
.lj-correction-modal__context-after {
	opacity: 0.6;
	font-style: italic;
	margin-bottom: 0.5rem;
}

.lj-correction-modal__context-after {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.lj-correction-modal__context-main {
	font-weight: 600;
	padding: 0.75rem;
	background: #fff;
	border: 2px solid #3b82f6;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Guidance Section */
.lj-correction-modal__guidance {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 10px;
	padding: 1rem;
}

.lj-correction-modal__guidance-item {
	display: flex;
	gap: 0.75rem;
	align-items: start;
	margin-bottom: 0.75rem;
}

.lj-correction-modal__guidance-item:last-child {
	margin-bottom: 0;
}

.lj-correction-modal__guidance-item p {
	margin: 0;
	color: #166534;
	line-height: 1.6;
	flex: 1;
}

/* Correction Input */
.lj-correction-modal__textarea {
	width: 100%;
	min-height: 100px;
	padding: 0.75rem;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.6;
	resize: vertical;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.lj-correction-modal__textarea:focus {
	outline: none;
	border-color: #3b82f6;
}

.lj-correction-modal__instruction {
	margin-top: 0.5rem;
	color: #6b7280;
	font-size: 0.875rem;
	font-style: italic;
}

/* Feedback */
.lj-correction-modal__feedback {
	padding: 1rem;
	border-radius: 8px;
	margin-top: 1rem;
}

.lj-correction-modal__feedback--error {
	background: #f0fdf4;
	border: 1px solid #86efac;
}

.lj-correction-modal__feedback--success {
	background: #f0fdf4;
	border: 1px solid #86efac;
}

.lj-correction-modal__feedback p {
	margin: 0;
	line-height: 1.6;
}

.lj-correction-modal__corrected {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: #fff;
	border-radius: 6px;
	line-height: 1.6;
}

.lj-correction-modal__corrected .corrected-word {
	font-weight: 700;
	color: #059669;
	border-bottom: 2px solid #059669;
	display: inline-block;
	position: relative;
	padding-right: 20px;
}

.lj-correction-modal__corrected .corrected-word::after {
	content: "✓";
.modal-error-word {
	background: rgba(239, 68, 68, 0.18);
	color: #b91c1c;
	font-weight: 600;
	padding: 1px 2px;
	border-radius: 3px;
}

.lj-correction-modal__feedback-list {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
	color: #14532d;
	line-height: 1.5;
}

.lj-correction-modal__feedback-list li {
	margin-bottom: 0.35rem;
}

.lj-correction-modal__feedback-list li:last-child {
	margin-bottom: 0;
}
	color: #059669;
	font-size: 0.85em;
	font-weight: bold;
	margin-left: 4px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}

/* Success Message */
.lj-correction-modal__success-message {
	text-align: center;
	padding: 2rem;
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border-radius: 12px;
	margin: 1rem 0;
}

.lj-correction-modal__success-message h3 {
	margin: 0 0 0.75rem 0;
	color: #065f46;
	font-size: 1.5rem;
}

.lj-correction-modal__success-message p {
	margin: 0;
	color: #166534;
	font-size: 1.1rem;
	line-height: 1.6;
}

/* Fireworks Animation */
.lj-correction-modal__fireworks {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	border-radius: 12px;
}

.firework {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: fireworkExplode 1s ease-out infinite;
}

.firework:nth-child(1) {
	top: 30%;
	left: 30%;
	background: #f59e0b;
	animation-delay: 0s;
}

.firework:nth-child(2) {
	top: 50%;
	left: 70%;
	background: #3b82f6;
	animation-delay: 0.3s;
}

.firework:nth-child(3) {
	top: 70%;
	left: 50%;
	background: #ec4899;
	animation-delay: 0.6s;
}

@keyframes fireworkExplode {
	0% {
		transform: scale(1);
		opacity: 1;
		box-shadow: 0 0 20px currentColor;
	}
	50% {
		transform: scale(30);
		opacity: 0.5;
	}
	100% {
		transform: scale(50);
		opacity: 0;
	}
}

/* Modal Footer */
.lj-correction-modal__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	background: #f9fafb;
	border-radius: 0 0 12px 12px;
	position: sticky;
	bottom: 0;
	gap: 1rem;
}

.lj-correction-modal__attempt-counter {
	color: #6b7280;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.lj-correction-modal__actions {
	display: flex;
	gap: 0.5rem;
}

/* Button Styles */
.lj-button {
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	border: none;
	white-space: nowrap;
}

.lj-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lj-button--primary {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.lj-button--primary:hover:not(:disabled) {
	background: #1d4ed8;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.lj-button--primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.lj-button--warning {
	background: #3b82f6;
	color: #fff;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.lj-button--warning:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.lj-button--warning:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.lj-button--danger {
	background: #a855f7;
	color: #fff;
	box-shadow: 0 2px 4px rgba(168, 85, 247, 0.2);
}

.lj-button--danger:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

.lj-button--danger:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(168, 85, 247, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
	.lj-correction-modal {
		width: 95%;
		max-width: none;
	}

	.lj-correction-modal__footer {
		flex-direction: column;
		gap: 0.75rem;
	}

	.lj-correction-modal__actions {
		width: 100%;
		flex-direction: column;
	}

	.lj-button {
		width: 100%;
	}

	.lj-correction-modal__attempt-counter {
		order: -1;
	}
}

/* Success/Fixed Word Styling (global for table, modal, and main essay) */
.corrected-word {
	font-weight: 700;
	color: #059669;
	display: inline-block;
	border-bottom: 2px solid #059669;
	position: relative;
	padding-right: 20px;
}

.corrected-word::after {
	content: "✓";
	color: #059669;
	font-size: 0.85em;
	font-weight: bold;
	margin-left: 4px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}

/* Make error highlights in modal context read-only (not clickable) */
.lj-correction-modal__context .error-highlight {
	cursor: default !important;
	pointer-events: none;
}

.lj-correction-modal__context-main .error-highlight {
	cursor: default !important;
}

/* New error styling (student-introduced errors) */
.modal-error-word.new-error {
	background: rgba(255, 215, 0, 0.3) !important;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 600;
}

/* Error guidance list styling */
.lj-correction-modal__feedback-list li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.lj-correction-modal__feedback-list li span {
	display: inline-block;
	margin-right: 4px;
}
/* Teacher Help Modal Overlay */
.lj-teacher-help-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Modal Container */
.lj-teacher-help-modal {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 700px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Modal Header */
.lj-teacher-help-modal__header {
	padding: 20px 24px;
	border-bottom: 2px solid #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #193852;
	border-radius: 12px 12px 0 0;
}

.lj-teacher-help-modal__header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: white;
}

.lj-teacher-help-modal__close {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	font-size: 24px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.lj-teacher-help-modal__close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

/* Modal Body */
.lj-teacher-help-modal__body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Section */
.lj-teacher-help-modal__section {
	margin-bottom: 20px;
}

.lj-teacher-help-modal__section:last-child {
	margin-bottom: 0;
}

.lj-teacher-help-modal__section h4 {
	margin: 0 0 10px 0;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Info Grid */
.lj-teacher-help-modal__info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.lj-teacher-help-modal__info-item {
	background: #f9fafb;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.lj-teacher-help-modal__info-label {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 4px;
	font-weight: 500;
}

.lj-teacher-help-modal__info-value {
	display: block;
	font-size: 16px;
	color: #111827;
	font-weight: 600;
}

/* Sentence Context */
.lj-teacher-help-modal__context {
	padding: 16px;
	background: #f9fafb;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	line-height: 1.8;
	font-size: 15px;
}

.lj-teacher-help-modal__context-before,
.lj-teacher-help-modal__context-after {
	color: #6b7280;
	margin-bottom: 8px;
	font-size: 14px;
}

.lj-teacher-help-modal__context-main {
	font-weight: 500;
	color: #1f2937;
	margin: 8px 0;
}

/* Text Boxes */
.lj-teacher-help-modal__text-box {
	padding: 14px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.6;
	border: 2px solid;
}

.lj-teacher-help-modal__text-box--student {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1e40af;
}

.lj-teacher-help-modal__text-box--guidance {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

.lj-teacher-help-modal__text-box--feedback {
	background: #fefce8;
	border-color: #fde047;
	color: #854d0e;
}

/* Textarea */
.lj-teacher-help-modal__textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
	resize: vertical;
	transition: border-color 0.2s;
}

.lj-teacher-help-modal__textarea:focus {
	outline: none;
	border-color: #667eea;
}

.lj-teacher-help-modal__textarea:disabled {
	background: #f9fafb;
	cursor: not-allowed;
}

.lj-teacher-help-modal__textarea--message {
	font-size: 15px;
	line-height: 1.6;
	min-height: 140px;
}

/* Spinner Animation */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Feedback Message */
.lj-teacher-help-modal__feedback {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	margin-top: 16px;
}

.lj-teacher-help-modal__feedback--success {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #6ee7b7;
}

.lj-teacher-help-modal__feedback--error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

/* Modal Footer */
.lj-teacher-help-modal__footer {
	padding: 20px 24px;
	border-top: 2px solid #e5e7eb;
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	background: #f9fafb;
	border-radius: 0 0 12px 12px;
}

/* Buttons */
.lj-teacher-help-modal__button {
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 6px;
}

.lj-teacher-help-modal__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lj-teacher-help-modal__button--dismiss {
	background: #fee2e2;
	color: #991b1b;
	border: 2px solid #fca5a5;
}

.lj-teacher-help-modal__button--dismiss:hover:not(:disabled) {
	background: #fecaca;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.lj-teacher-help-modal__button--send-help {
	background: #3b82f6;
	color: white;
	border: 2px solid #2563eb;
}

.lj-teacher-help-modal__button--send-help:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.lj-teacher-help-modal__button--reviewed {
	background: #10b981;
	color: white;
	border: 2px solid #059669;
}

.lj-teacher-help-modal__button--reviewed:hover:not(:disabled) {
	background: #059669;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.lj-teacher-help-modal__button--generate {
	background: #193852;
	color: white;
	border: none;
	padding: 12px 32px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(25, 56, 82, 0.3);
	display: inline-flex;
	margin: 0 auto;
}

.lj-teacher-help-modal__button--generate:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(25, 56, 82, 0.4);
	background: #213f5c;
}

/* Responsive */
@media (max-width: 768px) {
	.lj-teacher-help-modal {
		max-width: 100%;
		max-height: 95vh;
	}

	.lj-teacher-help-modal__info-grid {
		grid-template-columns: 1fr;
	}

	.lj-teacher-help-modal__footer {
		flex-direction: column;
	}

	.lj-teacher-help-modal__button {
		width: 100%;
		justify-content: center;
	}
}

/**
 * Argumentative Marking Report Styles
 * Mimics RWA plugin aesthetic
 */

/* ===================================
   MAIN CONTAINER
   =================================== */

.marking-report-container {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
}

/* ===================================
   LOADING STATE
   =================================== */

.marking-report-loading {
	text-align: center;
	padding: 60px 20px;
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-sub {
	color: #666;
	font-style: italic;
}

/* ===================================
   SECTIONS
   =================================== */

.marking-section {
	background: white;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.marking-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.marking-report-sticker {
	display: none !important;
}

/* ===================================
   MARKS SECTION (Recount-style aesthetic)
   =================================== */

.argumentative-report-section {
	background: white;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.argumentative-marks-section .section-title {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: #111827;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
}

.argumentative-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
	color: white;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 16px;
}

.argumentative-score-display {
	display: flex;
	flex-direction: column;
}

.argumentative-score-label {
	font-size: 0.9rem;
	opacity: 0.9;
}

.argumentative-score-value {
	font-size: 2rem;
	font-weight: bold;
}

.argumentative-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	padding: 10px 15px;
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.argumentative-performance-badge .badge-icon {
	font-size: 1.2rem;
}

.argumentative-performance-badge .badge-text {
	font-weight: 500;
	font-size: 1rem;
	color: white;
}

.argumentative-marks-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.argumentative-mark-category {
	background: #f8fafc;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
}

.argumentative-mark-category h4 {
	margin: 0 0 10px 0;
	font-size: 1.2rem;
	color: #2d3748;
	font-weight: 600;
}

.argumentative-mark-display {
	margin-bottom: 15px;
}

.argumentative-mark-score {
	font-size: 1.5rem;
	font-weight: bold;
	color: #667eea;
}

.argumentative-sub-elements {
	margin: 15px 0;
}

.argumentative-sub-element {
	margin: 10px 0;
}

.argumentative-sub-element label {
	display: block;
	font-size: 0.9rem;
	color: #4a5568;
	margin-bottom: 5px;
}

.argumentative-progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
}

.argumentative-progress-fill {
	height: 100%;
	width: 0%;
	transition: width 1s ease-in-out;
}

/* Language Section - Recount-style colors */
.argumentative-progress-grammar {
	background: linear-gradient(90deg, #ef4444, #dc2626);
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.argumentative-progress-vocabulary {
	background: linear-gradient(90deg, #8b5cf6, #7c3aed);
	box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.argumentative-progress-sentence {
	background: linear-gradient(90deg, #06b6d4, #0891b2);
	box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

.argumentative-progress-mechanics {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Content Section - Recount-style colors */
.argumentative-progress-task {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.argumentative-progress-organization {
	background: linear-gradient(90deg, #ec4899, #db2777);
	box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}

.argumentative-progress-argument {
	background: linear-gradient(90deg, #f97316, #ea580c);
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.argumentative-progress-counter {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.argumentative-band-descriptor {
	background: #edf2f7;
	padding: 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	margin-top: 15px;
	border-left: 3px solid #cbd5e0;
}

.progress-text {
	font-size: 0.85rem;
	color: #64748b;
	margin-top: 3px;
	display: inline-block;
}

/* ===================================
   TASK RELEVANCE SECTION
   =================================== */

.task-relevance-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.task-relevance-section h3 {
	margin: 0 0 18px 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.task-relevance-section .question-prompt-box {
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	padding: 12px 14px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.task-relevance-section .question-prompt-box:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.task-relevance-section .overall-message-box {
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	background: #f8fafc !important;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.task-relevance-section .overall-message-box:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.task-relevance-section .overall-message-box span[aria-hidden="true"] {
	filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15));
}

.task-relevance-section table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.task-relevance-section table thead th {
	background: #f8fafc;
	color: #0f172a;
	font-weight: 700;
	font-size: 0.95rem;
	border-bottom: 1px solid #e5e7eb;
}

.task-relevance-section table tbody td {
	vertical-align: top;
	font-size: 0.93rem;
	color: #334155;
}

.task-relevance-section table tbody tr {
	transition: background 0.2s ease, transform 0.2s ease;
}

.task-relevance-section table tbody tr:hover {
	background: #f8fafc !important;
	transform: translateY(-1px);
}

.task-relevance-section table tbody td:first-child {
	font-weight: 700;
	color: #0f172a;
}

.task-relevance-section table tbody td span {
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.task-relevance-section table tbody td:nth-child(3) > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.01em;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.task-relevance-section table tbody td:nth-child(3) > span:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.task-relevance-section table tbody td:nth-child(3) > span > span:first-child {
	font-size: 0.95rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.2));
}

.question-prompt {
	background: #f8fafc;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	border-left: 4px solid #667eea;
}

.question-prompt strong {
	display: block;
	margin-bottom: 8px;
	color: #2d3748;
}

.question-prompt p {
	margin: 0;
	font-style: italic;
	color: #4a5568;
}

/* Task Relevance Table - matches RWA exactly */
.task-relevance-section table tbody tr {
	cursor: default;
	transition: background 0.15s;
}

.task-relevance-section table tbody tr:hover {
	background: #f9fafb !important;
}

/* ===================================
   INTRO/CONCLUSION SECTION (Styled & Interactive)
   =================================== */

.argumentative-intro-conclusion {
	background: white;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.intro-conclusion-section-title {
	margin: 0 0 20px 0;
	font-size: 1.35rem;
	font-weight: 600;
	color: #111827;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
}

.intro-conclusion-subsection {
	margin-bottom: 20px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
}

.intro-conclusion-subsection:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.intro-conclusion-subsection-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 700;
	color: #111827;
	transition: background 0.2s ease;
}

.intro-conclusion-subsection-header:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.intro-conclusion-subsection-icon {
	font-size: 0.9rem;
	color: #64748b;
	transition: transform 0.2s ease;
}

.intro-conclusion-subsection-body {
	padding: 20px;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	animation: introConclusionSlideIn 0.3s ease;
}

/* ===================================
   BODY PARAGRAPHS (PEEL) SECTION
   =================================== */

.body-paragraphs-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.body-paragraphs-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.35rem !important;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.body-paragraphs-section > div {
	display: grid;
	gap: 16px;
}

.body-paragraphs-section > div > div {
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	padding: 16px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.body-paragraphs-section > div > div:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.body-paragraphs-section h4 {
	color: #0f172a !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
}

.body-paragraphs-section [style*="height: 10px"] {
	background: #e5e7eb !important;
	border-radius: 9999px !important;
}

.body-paragraphs-section [style*="height: 10px"] > div {
	border-radius: 9999px !important;
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
	background: #22c55e !important;
}

.body-paragraphs-section [style*="outline: rgb(229, 231, 235) solid 2px"] {
	outline: 2px solid #e2e8f0 !important;
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
	border-radius: 10px !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.body-paragraphs-section table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.body-paragraphs-section table thead th {
	background: #f8fafc !important;
	color: #0f172a !important;
	font-weight: 700 !important;
	font-size: 0.9rem;
	border-bottom: 1px solid #e5e7eb;
}

.body-paragraphs-section table tbody tr {
	transition: background 0.2s ease, transform 0.2s ease;
}

.body-paragraphs-section table tbody tr:hover {
	background: #f8fafc !important;
	transform: translateY(-1px);
}

.body-paragraphs-section table tbody td span[style*="border-radius: 9999px"] {
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

/* ===================================
   COUNTER-ARGUMENT SECTION
   =================================== */

.counter-argument-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.counter-argument-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.35rem !important;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.counter-argument-section > div {
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	padding: 16px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.counter-argument-section > div:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.counter-argument-section h4 {
	color: #0f172a !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
}

.counter-argument-section [style*="height: 10px"] {
	background: #e5e7eb !important;
	border-radius: 9999px !important;
}

.counter-argument-section [style*="height: 10px"] > div {
	border-radius: 9999px !important;
	box-shadow: 0 4px 10px rgba(249, 115, 22, 0.35);
	background: #22c55e !important;
}

.counter-argument-section [style*="outline: rgb(229, 231, 235) solid 2px"] {
	outline: 2px solid #e2e8f0 !important;
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
	border-radius: 10px !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.counter-argument-section table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.counter-argument-section table thead th {
	background: #f8fafc !important;
	color: #0f172a !important;
	font-weight: 700 !important;
	font-size: 0.9rem;
	border-bottom: 1px solid #e5e7eb;
}

.counter-argument-section table tbody tr {
	transition: background 0.2s ease, transform 0.2s ease;
}

.counter-argument-section table tbody tr:hover {
	background: #f8fafc !important;
	transform: translateY(-1px);
}

.counter-argument-section table tbody td span[style*="border-radius: 9999px"] {
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

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

.intro-conclusion-progress-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.intro-conclusion-progress-track {
	flex: 1;
	height: 14px;
	background: #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

.intro-conclusion-progress-fill {
	height: 100%;
	border-radius: 8px;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-conclusion-progress-icon {
	font-size: 1.1rem;
}

.intro-conclusion-checks-card {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.intro-conclusion-checks-title {
	font-weight: 700;
	color: #111827;
	margin-bottom: 12px;
	font-size: 1rem;
}

.intro-conclusion-table-wrap {
	overflow-x: auto;
}

.intro-conclusion-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	table-layout: fixed;
}

.intro-conclusion-table th {
	text-align: left;
	padding: 10px 12px;
	color: #111827;
	font-weight: 700;
	font-size: 0.9rem;
	border-bottom: 2px solid #e5e7eb;
}

.intro-conclusion-table th:nth-child(2) {
	text-align: center;
	width: 100px;
}

.intro-conclusion-table-row {
	transition: background 0.2s ease;
}

.intro-conclusion-table-row:hover {
	background: #f9fafb !important;
}

.intro-conclusion-table-row {
	border-top: 1px solid #e5e7eb;
}

.intro-conclusion-aspect-cell {
	padding: 12px 12px 12px 14px;
	font-weight: 700;
	border-left: 3px solid #06b6d4;
}

.intro-conclusion-aspect-icon {
	margin-right: 8px;
}

.intro-conclusion-status-cell {
	padding: 12px;
	text-align: center;
}

.intro-conclusion-feedback-cell-wrap {
	padding: 12px;
	color: #374151;
	font-size: 13px;
}

.intro-conclusion-feedback-cell {
	display: block;
}

.intro-conclusion-feedback-text {
	display: block;
	white-space: normal;
	max-height: 3.9em;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.intro-conclusion-feedback-text.is-expanded {
	max-height: none;
}

.intro-conclusion-toggle-btn {
	margin-left: 6px;
	border: none;
	background: transparent;
	color: #2563eb;
	cursor: pointer;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
}

.intro-conclusion-toggle-btn:hover {
	text-decoration: underline;
}

.intro-conclusion-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 9999px;
	font-size: 12px;
}

.intro-conclusion-status-successful {
	background: #dcfce7;
	color: #166534;
}

.intro-conclusion-status-adequate {
	background: #fef9c3;
	color: #854d0e;
}

.intro-conclusion-status-partial {
	background: #ffedd5;
	color: #9a3412;
}

.intro-conclusion-status-missing {
	background: #fee2e2;
	color: #991b1b;
}

.intro-conclusion-compare-block {
	margin-top: 16px;
}

.intro-conclusion-view-tabs {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.intro-conclusion-view-tab {
	padding: 8px 16px;
	border: 1px solid #e5e7eb;
	background: #fff;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
}

.intro-conclusion-view-tab:hover {
	background: #f9fafb;
	border-color: #3b82f6;
	color: #2563eb;
}

.intro-conclusion-view-tab.is-active {
	background: #3b82f6;
	border-color: #3b82f6;
	color: white;
}

.intro-conclusion-compare-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.intro-conclusion-compare-content.is-single-view {
	grid-template-columns: 1fr;
}

.intro-conclusion-text-card {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 16px;
	background: #fff;
	transition: box-shadow 0.2s ease;
}

.intro-conclusion-text-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.intro-conclusion-student-card {
	border-left: 4px solid #3b82f6;
}

.intro-conclusion-improved-card {
	border-left: 4px solid #10b981;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.intro-conclusion-text-label {
	font-weight: 700;
	color: #111827;
	margin-bottom: 12px;
	font-size: 1rem;
}

.intro-conclusion-text-body {
	color: #374151;
	font-size: 0.95rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

@media (max-width: 768px) {
	.intro-conclusion-compare-content {
		grid-template-columns: 1fr;
	}
}

/* Body & Counter-Argument keep old card style for now */
.body-paragraph-panel,
.counter-argument-panel {
	background: #f8fafc;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.panel-header h4 {
	margin: 0 0 15px 0;
	color: #1e293b;
	font-size: 1.2rem;
}

.checks-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: white;
	padding: 12px;
	border-radius: 6px;
	border-left: 3px solid #e2e8f0;
}

.check-item.status-successful {
	border-left-color: #10b981;
}

.check-item.status-adequate {
	border-left-color: #f59e0b;
}

.check-item.status-partial {
	border-left-color: #f59e0b;
}

.check-item.status-missing {
	border-left-color: #ef4444;
}

.check-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.check-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.check-content strong {
	font-size: 0.9rem;
	color: #1e293b;
}

.check-tip {
	font-size: 0.85rem;
	color: #64748b;
}

.student-text {
	background: white;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 15px;
	border-left: 4px solid #3b82f6;
}

.student-text h5 {
	margin: 0 0 10px 0;
	font-size: 0.95rem;
	color: #475569;
	font-weight: 600;
}

.text-content {
	margin: 0;
	line-height: 1.8;
	color: #334155;
}

.improved-version {
	margin-top: 15px;
}

.toggle-button {
	background: #667eea;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background 0.3s;
}

.toggle-button:hover {
	background: #5a67d8;
}

.improved-text {
	background: #ecfdf5;
	padding: 15px;
	border-radius: 6px;
	margin-top: 10px;
	border-left: 4px solid #10b981;
}

.improved-text p {
	margin: 0;
	line-height: 1.8;
	color: #134e4a;
}

.improved-text strong {
	color: #065f46;
	font-weight: 600;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
	.argumentative-marks-breakdown {
		grid-template-columns: 1fr;
	}
	
	.argumentative-total-marks {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
	
	.checks-list {
		grid-template-columns: 1fr;
	}
}


/* ========================================
   MARKING REPORT STICKER STYLES
   ======================================== */

.marking-report-sticker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem 2rem;
	margin-bottom: 2rem;
	border-radius: 16px;
	border: 3px solid;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	animation: stickerSlideIn 0.5s ease-out, stickerGlow 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.marking-report-sticker::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transform: rotate(45deg);
	animation: stickerShine 3s ease-in-out infinite;
}

.sticker-icon-large {
	font-size: 3.5rem;
	line-height: 1;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
	animation: stickerBounce 1s ease-in-out infinite;
	z-index: 1;
}

.sticker-message {
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.5px;
	z-index: 1;
}

/* Sticker Variants */
.marking-report-sticker.sticker-fire {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	border-color: #ff5252;
}

.marking-report-sticker.sticker-keep-trying {
	background: linear-gradient(135deg, #4ecdc4 0%, #44a3a0 100%);
	border-color: #3bb8af;
}

.marking-report-sticker.sticker-upset {
	background: linear-gradient(135deg, #ffd93d 0%, #f6c23e 100%);
	border-color: #f5b700;
}

/* Animations */
@keyframes stickerSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes stickerGlow {
	0%, 100% {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
	50% {
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	}
}

@keyframes stickerBounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-5px) scale(1.05);
	}
}

@keyframes stickerShine {
	0% {
		transform: translateX(-100%) translateY(-100%) rotate(45deg);
	}
	100% {
		transform: translateX(100%) translateY(100%) rotate(45deg);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.marking-report-sticker {
		flex-direction: column;
		padding: 1.25rem 1.5rem;
		gap: 0.75rem;
	}
	
	.sticker-icon-large {
		font-size: 2.5rem;
	}
	
	.sticker-message {
		font-size: 1.125rem;
		text-align: center;
	}
}
/**
 * Discursive Marking Report Styles
 * Mimics RWA plugin aesthetic
 */

/* ===================================
   MAIN CONTAINER
   =================================== */

.marking-report-container {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
}

/* ===================================
   LOADING STATE
   =================================== */

.marking-report-loading {
	text-align: center;
	padding: 60px 20px;
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-sub {
	color: #666;
	font-style: italic;
}

/* ===================================
   SECTIONS
   =================================== */

.marking-section {
	background: white;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.marking-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.marking-report-sticker {
	display: none !important;
}

/* ===================================
   MARKS SECTION (scoped — avoids overriding other papers e.g. situational writing)
   =================================== */

.marking-report-container .marks-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.marking-report-container .marks-section h3 {
	margin: 0 0 16px 0;
	font-size: 1.35rem !important;
	font-weight: 600;
	color: #111827;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Force discursive marks to match argumentative visual */
.marking-report-container .marks-section .total-marks {
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%) !important;
	color: #ffffff !important;
	padding: 16px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.marking-report-container .marks-section .score-label {
	font-size: 0.9rem !important;
	opacity: 0.9 !important;
}

.marking-report-container .marks-section .score-value {
	font-size: 1.75rem !important;
	font-weight: 700 !important;
}

.marking-report-container .marks-section .performance-badge {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	padding: 8px 12px !important;
	border-radius: 20px !important;
	backdrop-filter: blur(10px) !important;
}

.marking-report-container .marks-section .marks-breakdown {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 18px !important;
}

.marking-report-container .marks-section .mark-category {
	background: #f8fafc !important;
	padding: 16px !important;
	border-radius: 8px !important;
	border-left: 4px solid #667eea !important;
	box-shadow: none !important;
}

.marking-report-container .marks-section .mark-score {
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	color: #667eea !important;
}

.marking-report-container .marks-section .progress-bar,
.marking-report-container .marks-section .progress-fill {
	height: 10px !important;
	border-radius: 5px !important;
}

.marking-report-container .marks-section .sub-element {
	margin: 10px 0 !important;
}

.marking-report-container .marks-section .sub-element label {
	font-size: 0.85rem !important;
	margin-bottom: 4px !important;
}

.marking-report-container .marks-section .progress-text {
	font-size: 0.8rem !important;
	margin-top: 2px !important;
}

.argumentative-band-descriptor {
	margin-top: 10px;
	padding: 8px;
	font-size: 0.8rem;
}

.argumentative-band-descriptor {
	background: #edf2f7;
	padding: 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	margin-top: 15px;
	border-left: 3px solid #cbd5e0;
}

.total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
	color: white;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 25px;
	gap: 16px;
	flex-wrap: wrap;
}

.score-display {
	display: flex;
	flex-direction: column;
}

.score-label {
	font-size: 0.9rem;
	opacity: 0.9;
}

.score-row {
	display: flex;
	align-items: center;
	gap: 15px;
}

.score-value {
	font-size: 2rem;
	font-weight: bold;
}

.performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	padding: 10px 15px;
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.badge-icon {
	font-size: 1.2rem;
}

.marks-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

@media (max-width: 900px) {
	.marks-breakdown {
		grid-template-columns: 1fr;
	}
}

.mark-category {
	background: #f8fafc;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
	box-shadow: none;
	transition: none;
}

.mark-category h4 {
	margin: 0 0 10px 0;
	font-size: 1.2rem;
	color: #2d3748;
	font-weight: 600;
}

.mark-display {
	margin-bottom: 15px;
}

.mark-score {
	font-size: 1.5rem;
	font-weight: bold;
	color: #667eea;
}

.sub-elements {
	margin: 15px 0;
}

.sub-element {
	margin: 15px 0;
}

.sub-element label {
	display: block;
	font-size: 0.9rem;
	color: #4a5568;
	margin-bottom: 5px;
}

.progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}

.progress-fill {
	height: 100%;
	border-radius: 5px;
	transition: width 1s ease-in-out;
}

/* Ensure discursive progress bars match argumentative thickness */
.marking-report-container .marks-section .progress-bar,
.marking-report-container .marks-section .progress-fill {
	height: 10px;
}

.progress-text {
	font-size: 0.85rem;
	color: #64748b;
	margin-top: 3px;
	display: inline-block;
}

/* Progress bar colors */
.progress-grammar {
	background: linear-gradient(90deg, #8b5cf6, #7c3aed);
	box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.progress-vocabulary {
	background: linear-gradient(90deg, #06b6d4, #0891b2);
	box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

.progress-sentence {
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.progress-mechanics {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* IGCSE ESL Exercise 5/6 content rows (Purpose / Development); SW-style marks use same class names */
.progress-purpose {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.progress-development {
	background: linear-gradient(90deg, #f59e0b, #ea580c);
	box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.progress-task {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.progress-organization {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.progress-argument {
	background: linear-gradient(90deg, #ec4899, #db2777);
	box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}

.progress-counter {
	background: linear-gradient(90deg, #f97316, #ea580c);
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.progress-balanced {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

/* ===================================
   TASK RELEVANCE SECTION
   =================================== */

.task-relevance-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.task-relevance-section h3 {
	margin: 0 0 18px 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.task-relevance-section .question-prompt-box {
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	padding: 12px 14px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.task-relevance-section .question-prompt-box:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.task-relevance-section .overall-message-box {
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	background: #f8fafc !important;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.task-relevance-section .overall-message-box:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.task-relevance-section table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.task-relevance-section table thead th {
	background: #f8fafc;
	color: #0f172a;
	font-weight: 700;
	font-size: 0.95rem;
	border-bottom: 1px solid #e5e7eb;
}

.task-relevance-section table tbody td {
	vertical-align: top;
	font-size: 0.93rem;
	color: #334155;
}

.task-relevance-section table tbody tr {
	transition: background 0.2s ease, transform 0.2s ease;
}

.task-relevance-section table tbody tr:hover {
	background: #f8fafc !important;
	transform: translateY(-1px);
}

.task-relevance-section table tbody td span {
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

/* ===================================
   INTRO/CONCLUSION SECTION
   =================================== */

.intro-conclusion-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.intro-conclusion-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.35rem !important;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.intro-conclusion-section > div[style*="border: 1px solid"] {
	border-radius: 12px !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.intro-conclusion-section table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.intro-conclusion-section table thead th {
	background: #f8fafc !important;
	color: #0f172a !important;
	font-weight: 700 !important;
}

.intro-conclusion-section table tbody tr:hover {
	background: #f8fafc !important;
}

.intro-conclusion-section [style*="outline: rgb(229, 231, 235) solid 2px"] {
	outline: 2px solid #e2e8f0 !important;
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
	border-radius: 10px !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* ===================================
   BODY PARAGRAPHS (PEEL)
   =================================== */

.body-paragraphs-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.body-paragraphs-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.35rem !important;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.body-paragraphs-section > div {
	display: grid;
	gap: 16px;
}

.body-paragraphs-section > div > div {
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	padding: 16px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.body-paragraphs-section > div > div:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.body-paragraphs-section table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.body-paragraphs-section table thead th {
	background: #f8fafc !important;
	color: #0f172a !important;
	font-weight: 700 !important;
	font-size: 0.9rem;
	border-bottom: 1px solid #e5e7eb;
}

.body-paragraphs-section table tbody tr:hover {
	background: #f8fafc !important;
}

/* ===================================
   BALANCED ANALYSIS
   =================================== */

.balanced-analysis-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.balanced-analysis-section h3 {
	margin: 0 0 16px 0;
	font-size: 1.35rem !important;
	font-weight: 700;
	color: #0f172a;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.balanced-analysis-section .score-gauge {
	background: #e5e7eb;
	border-radius: 9999px;
	height: 10px;
	width: 100%;
	overflow: hidden;
}

.balanced-analysis-section .gauge-fill {
	background: linear-gradient(90deg, #22c55e, #10b981);
	height: 100%;
	border-radius: 9999px;
	box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
	transition: width 0.8s ease;
}

.balanced-analysis-section .point-card {
	border-radius: 10px !important;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.balanced-analysis-section .point-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.balanced-analysis-section .checks-table-container table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.balanced-analysis-section .checks-table-container table thead th {
	background: #f8fafc !important;
	color: #0f172a !important;
	font-weight: 700 !important;
}

.balanced-analysis-section .checks-table-container table tbody tr:hover {
	background: #f8fafc !important;
}

.question-prompt {
	background: #f8fafc;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	border-left: 4px solid #667eea;
}

.question-prompt strong {
	display: block;
	margin-bottom: 8px;
	color: #2d3748;
}

.question-prompt p {
	margin: 0;
	font-style: italic;
	color: #4a5568;
}

/* Task Relevance Table - matches RWA exactly */
.task-relevance-section table tbody tr {
	cursor: default;
	transition: background 0.15s;
}

.task-relevance-section table tbody tr:hover {
	background: #f9fafb !important;
}

/* ===================================
   INTRO/CONCLUSION, BODY, BALANCED
   =================================== */

/* Intro/Conclusion - mostly inline styles matching RWA */
.intro-conclusion-section table tbody tr {
	cursor: default;
	transition: background 0.15s;
}

/* Body & Balanced Analysis keep old card style for now */
.body-paragraph-panel,
.balanced-analysis-panel {
	background: #f8fafc;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.panel-header h4 {
	margin: 0 0 15px 0;
	color: #1e293b;
	font-size: 1.2rem;
}

.checks-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: white;
	padding: 12px;
	border-radius: 6px;
	border-left: 3px solid #e2e8f0;
}

.check-item.status-successful {
	border-left-color: #10b981;
}

.check-item.status-adequate {
	border-left-color: #f59e0b;
}

.check-item.status-partial {
	border-left-color: #f59e0b;
}

.check-item.status-missing {
	border-left-color: #ef4444;
}

.check-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.check-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.check-content strong {
	font-size: 0.9rem;
	color: #1e293b;
}

.check-tip {
	font-size: 0.85rem;
	color: #64748b;
}

.student-text {
	background: white;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 15px;
	border-left: 4px solid #3b82f6;
}

.student-text h5 {
	margin: 0 0 10px 0;
	font-size: 0.95rem;
	color: #475569;
	font-weight: 600;
}

.text-content {
	margin: 0;
	line-height: 1.8;
	color: #334155;
}

.improved-version {
	margin-top: 15px;
}

.toggle-button {
	background: #667eea;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background 0.3s;
}

.toggle-button:hover {
	background: #5a67d8;
}

.improved-text {
	background: #ecfdf5;
	padding: 15px;
	border-radius: 6px;
	margin-top: 10px;
	border-left: 4px solid #10b981;
}

.improved-text p {
	margin: 0;
	line-height: 1.8;
	color: #134e4a;
}

.improved-text strong {
	color: #065f46;
	font-weight: 600;
}

/* ===================================
   BALANCED ANALYSIS - TWO COLUMN LAYOUT
   =================================== */

/* Score Header */
.score-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding: 14px;
	background: #f9fafb;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.score-gauge {
	flex: 1;
	height: 12px;
	background: #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

.gauge-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	transition: width 0.8s ease;
	box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.paragraph-info {
	font-size: 13px;
	color: #6b7280;
	white-space: nowrap;
	font-weight: 500;
}

/* Two-Column Point Layout */
.two-column-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 20px 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px;
	background: #fff;
}

.point-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.point-column h4 {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 8px 0;
	padding-bottom: 8px;
	border-bottom: 2px solid #e5e7eb;
}

.point-card {
	background: #f9fafb;
	border-radius: 6px;
	padding: 12px;
	border-left: 3px solid #e5e7eb;
	transition: all 0.2s;
}

.point-card:hover {
	background: #f3f4f6;
	transform: translateX(2px);
}

.point-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.point-number {
	font-weight: 700;
	color: #374151;
	font-size: 14px;
}

.point-text {
	color: #1f2937;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 6px;
}

.point-meta {
	font-size: 12px;
	color: #6b7280;
	font-style: italic;
}

.point-meta.missing {
	color: #991b1b;
	font-weight: 600;
}

/* Checks Table Container */
.checks-table-container {
	margin-top: 24px;
}

.checks-table-container h4 {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 12px;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
	.marks-breakdown {
		grid-template-columns: 1fr;
	}
	
	.checks-list {
		grid-template-columns: 1fr;
	}
	
	.total-marks {
		flex-direction: column;
		gap: 15px;
	}
	
	/* Balanced Analysis responsive */
	.two-column-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.score-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.paragraph-info {
		white-space: normal;
	}
}



/* ========================================
   MARKING REPORT STICKER STYLES
   ======================================== */

.marking-report-sticker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem 2rem;
	margin-bottom: 2rem;
	border-radius: 16px;
	border: 3px solid;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	animation: stickerSlideIn 0.5s ease-out, stickerGlow 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.marking-report-sticker::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transform: rotate(45deg);
	animation: stickerShine 3s ease-in-out infinite;
}

.sticker-icon-large {
	font-size: 3.5rem;
	line-height: 1;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
	animation: stickerBounce 1s ease-in-out infinite;
	z-index: 1;
}

.sticker-message {
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.5px;
	z-index: 1;
}

/* Sticker Variants */
.marking-report-sticker.sticker-fire {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	border-color: #ff5252;
}

.marking-report-sticker.sticker-keep-trying {
	background: linear-gradient(135deg, #4ecdc4 0%, #44a3a0 100%);
	border-color: #3bb8af;
}

.marking-report-sticker.sticker-upset {
	background: linear-gradient(135deg, #ffd93d 0%, #f6c23e 100%);
	border-color: #f5b700;
}

/* Animations */
@keyframes stickerSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes stickerGlow {
	0%, 100% {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
	50% {
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	}
}

@keyframes stickerBounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-5px) scale(1.05);
	}
}

@keyframes stickerShine {
	0% {
		transform: translateX(-100%) translateY(-100%) rotate(45deg);
	}
	100% {
		transform: translateX(100%) translateY(100%) rotate(45deg);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.marking-report-sticker {
		flex-direction: column;
		padding: 1.25rem 1.5rem;
		gap: 0.75rem;
	}
	
	.sticker-icon-large {
		font-size: 2.5rem;
	}
	
	.sticker-message {
		font-size: 1.125rem;
		text-align: center;
	}
}
/**
 * Recount Marking Report Styles
 * Adapted from RWA plugin recount report aesthetic
 */

/* ===================================
   MAIN CONTAINER
   =================================== */

.recount-marking-report-container {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
}

.recount-report-header {
	margin-bottom: 30px;
	text-align: center;
}

/* ===================================
   LOADING STATE
   =================================== */

.marking-report-loading {
	text-align: center;
	padding: 60px 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ===================================
   SECTIONS
   =================================== */

.recount-report-section {
	background: white;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.marking-report-sticker {
	display: none !important;
}

.recount-marking-report .section-title {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: #111827;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 12px;
}

/* ===================================
   MARKS SECTION
   =================================== */

.recount-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
	color: white;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 16px;
}

.recount-score-display {
	display: flex;
	flex-direction: column;
}

.recount-score-label {
	font-size: 0.9rem;
	opacity: 0.9;
}

.recount-score-value {
	font-size: 2rem;
	font-weight: bold;
}

.recount-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	padding: 10px 15px;
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.recount-performance-badge .badge-icon {
	font-size: 1.2rem;
}

.recount-performance-badge .badge-text {
	font-weight: 500;
	font-size: 1rem;
	color: white;
}

/* Marks Breakdown */
.recount-marks-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.recount-mark-category {
	background: #f8fafc;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
}

.recount-mark-category h4 {
	margin: 0 0 10px 0;
	font-size: 1.2rem;
	color: #2d3748;
	font-weight: 600;
}

.recount-mark-display {
	margin-bottom: 15px;
}

.recount-mark-score {
	font-size: 1.5rem;
	font-weight: bold;
	color: #667eea;
}

/* Sub-elements */
.recount-sub-elements {
	margin: 15px 0;
}

.recount-sub-element {
	margin: 10px 0;
}

.recount-sub-element label {
	display: block;
	font-size: 0.9rem;
	color: #4a5568;
	margin-bottom: 5px;
}

.recount-progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
}

.recount-progress-fill {
	height: 100%;
	width: 0%;
	transition: width 1s ease-in-out;
}

/* Language Section - Individual Colors */
.recount-progress-grammar {
	background: linear-gradient(90deg, #ef4444, #dc2626);
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.recount-progress-vocabulary {
	background: linear-gradient(90deg, #8b5cf6, #7c3aed);
	box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.recount-progress-sentence {
	background: linear-gradient(90deg, #06b6d4, #0891b2);
	box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

.recount-progress-spelling {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Content Section - Individual Colors */
.recount-progress-task {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.recount-progress-structure {
	background: linear-gradient(90deg, #ec4899, #db2777);
	box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}

.recount-progress-engagement {
	background: linear-gradient(90deg, #f97316, #ea580c);
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.recount-progress-reflection {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

/* Band Descriptors */
.recount-band-descriptor {
	background: #edf2f7;
	padding: 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	margin-top: 15px;
	border-left: 3px solid #cbd5e0;
}

/* ===================================
   OVERVIEW SECTION (ACCORDION)
   =================================== */

.recount-accordion-section {
	margin-bottom: 16px;
}

.recount-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.recount-accordion-header:hover {
	background: #e5e7eb;
}

.recount-accordion-header.active {
	background: #3b82f6;
	color: white;
	border-color: #3b82f6;
}

.recount-accordion-header h4 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
}

.recount-accordion-icon {
	font-size: 1.2rem;
	font-weight: bold;
	transition: transform 0.2s ease;
}

.recount-accordion-content {
	padding: 20px;
	border: 1px solid #e5e7eb;
	border-top: none;
	border-radius: 0 0 8px 8px;
	background: white;
}

/* Sub-accordions */
.recount-sub-accordion {
	margin-bottom: 12px;
}

.recount-sub-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.recount-sub-accordion-header:hover {
	background: #f9fafb;
	border-color: #3b82f6;
}

.recount-sub-accordion-header.active {
	background: #eff6ff;
	border-color: #3b82f6;
}

.recount-sub-accordion-header h5 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #374151;
}

.recount-sub-accordion-icon {
	font-size: 1rem;
	color: #6b7280;
}

.recount-sub-accordion-content {
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-top: none;
	border-radius: 0 0 6px 6px;
	background: #fafafa;
}

.recount-feedback-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.recount-feedback-summary,
.recount-feedback-example,
.recount-feedback-advice {
	padding: 12px;
	background: white;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
}

.recount-feedback-summary strong,
.recount-feedback-advice strong {
	display: block;
	margin-bottom: 8px;
	color: #374151;
	font-size: 0.95rem;
}

.recount-feedback-summary span,
.recount-feedback-advice span {
	color: #6b7280;
	line-height: 1.6;
}

.recount-example-original,
.recount-example-improved {
	margin-bottom: 12px;
}

.recount-example-original strong,
.recount-example-improved strong {
	display: block;
	margin-bottom: 6px;
	color: #374151;
	font-size: 0.9rem;
}

.recount-example-original span {
	display: block;
	padding: 10px;
	background: #fef2f2;
	border-left: 3px solid #ef4444;
	border-radius: 4px;
	color: #991b1b;
	font-style: italic;
}

.recount-example-improved span {
	display: block;
	padding: 10px;
	background: #f0fdf4;
	border-left: 3px solid #10b981;
	border-radius: 4px;
	color: #065f46;
	font-style: italic;
}

/* ===================================
   STRUCTURE & PLOT CLARITY SECTION
   =================================== */

.structure-stage-labels {
	position: relative;
	margin: 20px 0 10px 0;
	padding: 0 20px;
	height: 45px;
}

.structure-stage-labels .stage-label-marker {
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
}

.structure-stage-labels .stage-label-name {
	font-weight: 600;
	color: #374151;
	font-size: 0.85rem;
	margin-bottom: 2px;
}

.structure-stage-labels .stage-label-target {
	font-size: 0.75rem;
	color: #6b7280;
}

/* Structure Evaluation Table */
.structure-evaluation-table {
	margin-top: 32px;
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
}

.evaluation-table-title {
	margin: 0 0 20px 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: #111827;
}

.evaluation-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
}

.evaluation-table thead {
	background: #f9fafb;
	border-bottom: 2px solid #e5e7eb;
}

.evaluation-table th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	font-size: 0.9rem;
	color: #374151;
}

.evaluation-table tbody tr {
	border-bottom: 1px solid #e5e7eb;
	transition: background-color 0.2s ease;
}

.evaluation-table tbody tr:last-child {
	border-bottom: none;
}

.evaluation-table tbody tr:hover {
	background: #f9fafb;
}

.evaluation-table td {
	padding: 16px;
	vertical-align: top;
}

.table-icon {
	font-size: 1.8rem;
	text-align: center;
}

.table-criterion .criterion-name {
	font-weight: 600;
	font-size: 0.95rem;
	color: #111827;
	margin-bottom: 4px;
}

.table-criterion .criterion-description {
	font-size: 0.85rem;
	color: #6b7280;
	line-height: 1.4;
}

.table-status {
	text-align: center;
}

.status-badge-icon {
	font-size: 1.8rem;
	display: inline-block;
}

.table-feedback {
	color: #374151;
	font-size: 0.9rem;
	line-height: 1.6;
}

.overall-assessment {
	margin-top: 24px;
	padding: 20px;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 10px;
	border: 2px solid #3b82f6;
}

.overall-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.overall-label {
	font-weight: 700;
	font-size: 1.1rem;
	color: #111827;
}

.overall-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.overall-badge {
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overall-feedback {
	color: #1e40af;
	font-size: 0.95rem;
	line-height: 1.6;
	font-weight: 500;
}

/* ===================================
   DESCRIPTIVE DETAIL & IMAGERY SECTION
   =================================== */

.descriptive-detail-section {
	margin-top: 32px;
}

/* Overall Score Banner */
.descriptive-overall-banner {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	border: 2px solid #3b82f6;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.descriptive-score-display {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.descriptive-score-label {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1e40af;
}

.descriptive-score-value {
	font-size: 1.8rem;
	font-weight: 700;
	color: #1e3a8a;
}

.descriptive-status-badge {
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	color: white;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Component Cards Grid */
.descriptive-components-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.descriptive-component-card {
	background: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.descriptive-component-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.component-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.component-icon {
	font-size: 1.5rem;
}

.component-label {
	font-size: 1rem;
	font-weight: 600;
	color: #111827;
	flex: 1;
}

.component-weight {
	font-size: 0.85rem;
	color: #6b7280;
	font-weight: 500;
}

.component-score-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.component-score {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1e3a8a;
}

.component-status-icon {
	font-size: 1.6rem;
}

.component-progress-bar {
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 12px;
}

.component-progress-fill {
	height: 100%;
	transition: width 0.5s ease;
	border-radius: 4px;
}

.component-feedback {
	font-size: 0.9rem;
	color: #4b5563;
	line-height: 1.5;
	margin: 0;
}

/* Before/After Examples Section */
.descriptive-examples-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
	margin-bottom: 24px;
}

.examples-title {
	margin: 0 0 8px 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: #111827;
}

.examples-intro {
	margin: 0 0 24px 0;
	font-size: 0.95rem;
	color: #6b7280;
}

.before-after-card {
	background: #f9fafb;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #e5e7eb;
}

.before-after-card:last-child {
	margin-bottom: 0;
}

.example-type-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e5e7eb;
}

.example-type-icon {
	font-size: 1.3rem;
}

.example-type-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #374151;
}

.example-comparison {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
}

.example-before,
.example-after {
	background: white;
	border-radius: 8px;
	padding: 16px;
	border: 2px solid #e5e7eb;
}

.example-before {
	border-color: #fecaca;
	background: #fef2f2;
}

.example-after {
	border-color: #bbf7d0;
	background: #f0fdf4;
}

.example-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.label-icon {
	font-size: 1rem;
}

.label-text {
	font-size: 0.85rem;
	font-weight: 600;
	color: #374151;
}

.example-text {
	margin: 0;
	font-size: 0.95rem;
	color: #111827;
	line-height: 1.6;
	font-style: italic;
}

.example-arrow {
	font-size: 1.5rem;
	color: #3b82f6;
	font-weight: 700;
}

.example-explanation {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: white;
	padding: 12px;
	border-radius: 6px;
	border-left: 3px solid #3b82f6;
}

.explanation-icon {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 2px;
}

.explanation-text {
	font-size: 0.9rem;
	color: #374151;
	line-height: 1.5;
}

/* Overall Feedback */
.descriptive-overall-feedback {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border-radius: 12px;
	padding: 24px;
	border: 2px solid #f59e0b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.descriptive-overall-feedback .feedback-title {
	margin: 0 0 12px 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: #92400e;
}

.descriptive-overall-feedback .feedback-text {
	margin: 0;
	font-size: 1rem;
	color: #78350f;
	line-height: 1.7;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
	.descriptive-components-grid {
		grid-template-columns: 1fr;
	}
	
	.example-comparison {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	
	.example-arrow {
		transform: rotate(90deg);
		justify-self: center;
	}
	
	.descriptive-score-display {
		flex-direction: column;
		align-items: flex-start;
	}
}

.structure-stats-table {
	margin-top: 24px;
}

.structure-stats-table h4 {
	margin: 0 0 12px 0;
	font-size: 1.1rem;
	color: #111827;
}

.structure-stats-table table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.structure-stats-table thead {
	background: #f9fafb;
}

.structure-stats-table th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	color: #374151;
	font-size: 0.9rem;
	border-bottom: 2px solid #e5e7eb;
}

.structure-stats-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f3f4f6;
	color: #4b5563;
	font-size: 0.95rem;
}

.structure-stats-table tbody tr:last-child td {
	border-bottom: none;
}

.structure-stats-table tbody tr:hover {
	background: #f9fafb;
}

.structure-stage-comparison {
	background: #f9fafb;
	padding: 16px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.structure-stage-comparison .comparison-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e5e7eb;
}

.structure-stage-comparison .comparison-row:last-child {
	border-bottom: none;
}

.structure-stage-comparison .comparison-label {
	font-weight: 500;
	color: #6b7280;
}

.structure-stage-comparison .comparison-value {
	font-weight: 600;
	color: #111827;
	font-size: 1.1rem;
}

.structure-stage-feedback {
	padding: 16px;
	background: white;
	border-radius: 8px;
	border-left: 4px solid #8b5cf6;
}

.structure-stage-feedback p {
	margin: 0;
	line-height: 1.6;
	color: #374151;
}

.recount-chart-instruction {
	background: #eff6ff;
	border-left: 4px solid #3b82f6;
	padding: 16px;
	border-radius: 6px;
	margin-bottom: 24px;
}

.recount-chart-instruction p {
	margin: 0 0 4px 0;
	color: #1e40af;
	font-size: 0.95rem;
}

.recount-chart-instruction ul {
	margin: 8px 0 0 0;
	color: #1e40af;
	font-size: 0.9rem;
}

.recount-story-graph-container {
	background: white;
	padding: 24px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	margin-bottom: 20px;
	width: 100%;
	box-sizing: border-box;
}

.recount-story-graph-container canvas {
	width: 100% !important;
	height: 350px !important;
	cursor: pointer;
}

.recount-story-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.recount-story-tag {
	display: inline-block;
	padding: 8px 16px;
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: white;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Modal */
.recount-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}

.recount-modal-content {
	background: white;
	border-radius: 12px;
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.recount-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: white;
	border-radius: 12px 12px 0 0;
}

.recount-modal-header h4 {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
}

.recount-modal-close {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	font-size: 1.8rem;
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.recount-modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.recount-modal-body {
	padding: 24px;
}

.recount-stage-score {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	background: #f9fafb;
	border-radius: 8px;
	margin-bottom: 20px;
}

.recount-power-level {
	font-size: 1.8rem;
	font-weight: 700;
}

.recount-score-number {
	font-size: 1.5rem;
	font-weight: 600;
	color: #3b82f6;
}

.recount-stage-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ===================================
   EXPRESS IT BETTER SECTION
   =================================== */

.recount-section-header {
	margin-bottom: 24px;
}

.recount-section-subtitle {
	color: #6b7280;
	font-size: 1rem;
	margin-top: 8px;
}

.recount-express-suggestions {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.recount-suggestion-category {
	margin-bottom: 20px;
}

.recount-category-title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #111827;
	margin-bottom: 8px;
}

.recount-category-description {
	color: #6b7280;
	font-size: 0.95rem;
	margin-bottom: 16px;
}

.recount-suggestion-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.recount-suggestion-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 20px;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.recount-suggestion-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.recount-suggestion-header {
	margin-bottom: 16px;
}

.recount-category-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	color: white;
	text-transform: capitalize;
}

.recount-suggestion-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.recount-suggestion-original,
.recount-suggestion-improved {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.recount-suggestion-original label,
.recount-suggestion-improved label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.recount-suggestion-original p {
	padding: 10px;
	background: #fef2f2;
	border-left: 3px solid #ef4444;
	border-radius: 4px;
	color: #7f1d1d;
	margin: 0;
	font-style: italic;
	line-height: 1.5;
}

.recount-suggestion-improved p {
	padding: 10px;
	background: #f0fdf4;
	border-left: 3px solid #10b981;
	border-radius: 4px;
	color: #065f46;
	margin: 0;
	font-style: italic;
	line-height: 1.5;
}

.recount-suggestion-arrow {
	text-align: center;
	font-size: 1.5rem;
	color: #3b82f6;
	font-weight: bold;
}

.recount-suggestion-explanation {
	padding: 12px;
	background: #f9fafb;
	border-radius: 6px;
}

.recount-suggestion-explanation strong {
	display: block;
	margin-bottom: 6px;
	color: #374151;
	font-size: 0.9rem;
}

.recount-suggestion-explanation p {
	margin: 0;
	color: #6b7280;
	font-size: 0.9rem;
	line-height: 1.6;
}

.recount-empty-suggestions {
	text-align: center;
	padding: 40px 20px;
	background: #f9fafb;
	border-radius: 8px;
	color: #6b7280;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
	.recount-total-marks {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
	
	.recount-marks-breakdown {
		grid-template-columns: 1fr;
	}
	
	.recount-suggestion-grid {
		grid-template-columns: 1fr;
	}
	
	.recount-modal-content {
		margin: 20px;
		max-height: calc(100vh - 40px);
	}
	
	.task-breakdown-table {
		display: block;
		overflow-x: auto;
	}
}

/* ===================================
   TASK RELEVANCE CARD
   =================================== */

.task-relevance-card {
	margin-bottom: 24px;
}

.question-prompt-box {
	background: #f0f9ff;
	border-left: 4px solid #3b82f6;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.task-breakdown-intro {
	padding: 12px 16px;
	background: #fef9c3;
	border-left: 4px solid #eab308;
	border-radius: 6px;
	margin-bottom: 20px;
}

.task-breakdown-intro p {
	margin: 0;
	color: #713f12;
	font-size: 0.95rem;
	font-weight: 500;
}

.question-prompt-box h4 {
	margin: 0 0 12px 0;
	font-size: 1rem;
	font-weight: 600;
	color: #1e40af;
}

.question-text {
	font-size: 1.1rem;
	font-style: italic;
	color: #374151;
	margin: 0;
	line-height: 1.6;
}

.task-breakdown-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

.task-breakdown-table thead {
	background: #f9fafb;
}

.task-breakdown-table th {
	padding: 12px 16px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #e5e7eb;
}

.task-breakdown-table tbody tr {
	border-bottom: 1px solid #e5e7eb;
}

.task-breakdown-table tbody tr:hover {
	background: #f9fafb;
}

.task-breakdown-table td {
	padding: 16px;
	vertical-align: top;
}

.aspect-cell {
	width: 30%;
}

.aspect-label {
	font-weight: 700;
	color: #1e40af;
	margin-bottom: 4px;
	font-size: 1.05rem;
	font-style: italic;
	padding: 2px 6px;
	background: #eff6ff;
	border-radius: 4px;
	display: inline-block;
}

.aspect-desc {
	font-size: 0.85rem;
	color: #6b7280;
	font-style: normal;
	margin-top: 6px;
}

.rating-cell {
	width: 20%;
	text-align: center;
}

.status-badge-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.rating-icon {
	font-size: 2rem;
	line-height: 1;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.feedback-cell {
	width: 50%;
	color: #374151;
	line-height: 1.6;
}




/* ===================================
   REFLECTION & INSIGHT SECTION
   =================================== */

.reflection-insight-section {
	margin-bottom: 24px;
}

/* Plant Growth Meter */
.reflection-growth-meter {
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	border: 2px solid #86efac;
}

.growth-title {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: #166534;
	margin: 0 0 20px 0;
}

.plant-progress-container {
	margin: 20px 0;
}

.plant-stages {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 12px;
	padding: 0 10px;
}

.plant-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0.3;
	transition: all 0.3s ease;
}

.plant-stage.completed {
	opacity: 1;
}

.plant-stage.current {
	opacity: 1;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.stage-emoji {
	font-size: 32px;
	margin-bottom: 4px;
}

.stage-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #166534;
	text-align: center;
}

.progress-bar-container {
	position: relative;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	margin: 0 10px;
}

.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #86efac 0%, #10b981 100%);
	border-radius: 4px;
	transition: width 0.5s ease;
}

.progress-marker {
	position: absolute;
	top: -8px;
	transform: translateX(-50%);
	transition: left 0.5s ease;
}

.marker-text {
	display: block;
	background: #3b82f6;
	color: white;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.growth-status {
	text-align: center;
	margin-top: 16px;
}

.status-text {
	font-size: 0.95rem;
	font-weight: 600;
	color: #166534;
	line-height: 1.5;
}

/* Reflection Breakdown Table */
.reflection-breakdown {
	margin-bottom: 24px;
}

.breakdown-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 16px;
}

.reflection-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reflection-table thead {
	background: #f9fafb;
}

.reflection-table th {
	padding: 12px 16px;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #e5e7eb;
}

.reflection-table tbody tr {
	border-bottom: 1px solid #e5e7eb;
}

.reflection-table tbody tr:last-child {
	border-bottom: none;
}

.reflection-table tbody tr:hover {
	background: #f9fafb;
}

.reflection-table td {
	padding: 16px;
	vertical-align: top;
}

.component-cell {
	width: 30%;
}

.component-icon {
	font-size: 20px;
	margin-right: 8px;
}

.component-name {
	font-weight: 600;
	color: #111827;
}

.rating-cell {
	width: 25%;
}

.rating-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.rating-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: #111827;
}

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}

.feedback-cell {
	width: 45%;
	color: #374151;
	line-height: 1.6;
}

/* Reflection Examples - Horizontal Layout */
.reflection-examples-section {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
	margin-top: 24px;
}


/* Responsive */
@media (max-width: 768px) {
	.plant-stages {
		padding: 0 5px;
	}
	
	.stage-emoji {
		font-size: 24px;
	}
	
	.stage-label {
		font-size: 0.65rem;
	}
	
	.reflection-table {
		display: block;
		overflow-x: auto;
	}
	
	.examples-grid {
		grid-template-columns: 1fr;
	}
}

/* ===================================
   DESCRIPTIVE DETAIL SECTION UPDATES
   =================================== */

.descriptive-components-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.descriptive-component-card {
	background: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
	transition: all 0.2s ease;
}

.descriptive-component-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.component-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.component-icon {
	font-size: 24px;
}

.component-label {
	font-weight: 700;
	font-size: 1rem;
	color: #111827;
}

.component-rating-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 12px 0;
}

.component-feedback {
	font-size: 0.9rem;
	color: #4b5563;
	line-height: 1.6;
	margin: 0;
}

/* Status Badge - shared styles already defined above */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ========================================
   MARKING REPORT STICKER STYLES
   ======================================== */

.marking-report-sticker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem 2rem;
	margin-bottom: 2rem;
	border-radius: 16px;
	border: 3px solid;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	animation: stickerSlideIn 0.5s ease-out, stickerGlow 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.marking-report-sticker::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transform: rotate(45deg);
	animation: stickerShine 3s ease-in-out infinite;
}

.sticker-icon-large {
	font-size: 3.5rem;
	line-height: 1;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
	animation: stickerBounce 1s ease-in-out infinite;
	z-index: 1;
}

.sticker-message {
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.5px;
	z-index: 1;
}

/* Sticker Variants */
.marking-report-sticker.sticker-fire {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	border-color: #ff5252;
}

.marking-report-sticker.sticker-keep-trying {
	background: linear-gradient(135deg, #4ecdc4 0%, #44a3a0 100%);
	border-color: #3bb8af;
}

.marking-report-sticker.sticker-upset {
	background: linear-gradient(135deg, #ffd93d 0%, #f6c23e 100%);
	border-color: #f5b700;
}

/* Animations */
@keyframes stickerSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes stickerGlow {
	0%, 100% {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
	50% {
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	}
}

@keyframes stickerBounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-5px) scale(1.05);
	}
}

@keyframes stickerShine {
	0% {
		transform: translateX(-100%) translateY(-100%) rotate(45deg);
	}
	100% {
		transform: translateX(100%) translateY(100%) rotate(45deg);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.marking-report-sticker {
		flex-direction: column;
		padding: 1.25rem 1.5rem;
		gap: 0.75rem;
	}
	
	.sticker-icon-large {
		font-size: 2.5rem;
	}
	
	.sticker-message {
		font-size: 1.125rem;
		text-align: center;
	}
}
/**
 * Interactive Review — Chapter 4
 * Two-column layout: essay on left, sticky review panel on right.
 */

/* ===================================
   CARD SHELL OVERRIDES
   `position: sticky` is broken by any ancestor with overflow != visible.
   CardShell sets overflow: hidden on .lj-card and overflow-x: hidden on
   .lj-card__body, which traps our sticky panel. Neutralize both, scoped
   to this card only.

   Note: CardShell.css is currently loaded twice in the bundle, so we need
   higher specificity than a single-class rule. Use compound selectors
   (.lj-card.ir-card-shell) — 2 classes always beats 1 class regardless
   of declaration order.
   =================================== */

.lj-card.ir-card-shell {
	overflow: visible;
}

.lj-card__body.ir-card-body {
	overflow: visible;
	overflow-x: visible;
}

/* ===================================
   CONTAINER — two-column grid
   =================================== */

.ir-container {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 32px;
	width: 100%;
	min-height: 500px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===================================
   LEFT COLUMN — essay
   =================================== */

.ir-essay-column {
	min-width: 0;
}

.ir-essay-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 2px solid #e5e7eb;
	/* Spans above both columns — the CardShell body flex-gap handles
	   vertical spacing to the grid below. */
}

.ir-essay-header__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
}

.ir-essay-header__badge {
	display: inline-block;
	padding: 4px 12px;
	background: #eff6ff;
	color: #1e40af;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
}

.ir-essay-body {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 28px 32px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.ir-essay-prompt {
	margin: 0 0 24px 0;
	padding: 14px 18px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.6;
	color: #1e293b;
}

.ir-essay-prompt strong {
	font-weight: 700;
	color: #0f172a;
}

.ir-essay-empty {
	margin: 0;
	padding: 24px 16px;
	text-align: center;
	color: #6b7280;
	font-style: italic;
	font-size: 0.95rem;
}

.ir-essay-paragraph {
	margin: 0 0 20px 0;
	font-size: 1.05rem;
	line-height: 1.85;
	color: #374151;
	padding: 8px 12px;
	border-radius: 6px;
	border-left: 3px solid transparent;
	transition: all 0.35s ease;
}

.ir-essay-paragraph:last-child {
	margin-bottom: 0;
}

.ir-essay-paragraph--highlighted {
	background: #fef9c3;
	border-left-color: #eab308;
	color: #1e293b;
	box-shadow: 0 2px 8px rgba(234, 179, 8, 0.15);
}

/* Sentence-level highlight — wraps just the sentence span inside a paragraph,
   rather than recolouring the whole paragraph. */
.ir-essay-sentence {
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
	border-radius: 3px;
	padding: 0 1px;
}

.ir-essay-sentence--highlighted {
	background: #fef08a;
	box-shadow: inset 0 -2px 0 #eab308;
	color: #1e293b;
}

/* ===================================
   RIGHT COLUMN — sticky review panel
   =================================== */

.ir-review-column {
	min-width: 0;
}

.ir-review-sticky {
	position: sticky;
	top: 40px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	/* Cap height to the viewport so the top group (avatar / speech bubble / controls)
	   stays pinned while the segment list scrolls internally. */
	max-height: calc(100vh - 60px);
}

/* ===================================
   ADMIN BAR (dev affordance)
   =================================== */

/* Compact admin-only strip above the avatar. Purposefully muted styling so it
   doesn't compete with the student-facing UI but is still tappable for quick
   regen while iterating on the prompt / pipeline. */
.ir-admin-bar {
	display: flex;
	justify-content: center;
	margin-bottom: 6px;
	flex: 0 0 auto;
}

.ir-admin-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: #f3f4f6;
	color: #4b5563;
	border: 1px dashed #d1d5db;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ir-admin-bar__btn:hover:not(:disabled) {
	background: #e5e7eb;
	color: #1f2937;
	border-color: #9ca3af;
}

.ir-admin-bar__btn:active:not(:disabled) {
	background: #d1d5db;
}

.ir-admin-bar__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ir-admin-bar__spin {
	animation: ir-admin-bar-spin 0.9s linear infinite;
}

@keyframes ir-admin-bar-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ===================================
   AVATAR
   =================================== */

.ir-avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.ir-avatar {
	position: relative;
	width: 115px;
	height: 115px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.3s ease;
}

.ir-avatar--speaking {
	filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.35));
	animation: ir-avatar-pulse 2s ease-in-out infinite;
}

@keyframes ir-avatar-pulse {
	0%, 100% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3)); }
	50% { filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.5)); }
}

.ir-avatar__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ir-avatar__fallback {
	font-size: 3rem;
}

.ir-avatar__name {
	font-size: 0.95rem;
	font-weight: 700;
	color: #374151;
	text-align: center;
}

/* Speaking indicator dots */
.ir-avatar__speaking-indicator {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 3px;
	padding: 3px 8px;
	background: rgba(59, 130, 246, 0.9);
	border-radius: 10px;
}

.ir-avatar__speaking-indicator span {
	display: block;
	width: 5px;
	height: 5px;
	background: white;
	border-radius: 50%;
	animation: ir-dot-bounce 1.2s ease-in-out infinite;
}

.ir-avatar__speaking-indicator span:nth-child(2) {
	animation-delay: 0.15s;
}

.ir-avatar__speaking-indicator span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes ir-dot-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-6px); }
}

/* ===================================
   SPEECH BUBBLE
   =================================== */

.ir-speech-bubble {
	position: relative;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px 16px;
	transition: all 0.3s ease;
	flex: 0 0 auto;
}

.ir-speech-bubble--active {
	background: #eff6ff;
	border-color: #93c5fd;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.ir-speech-bubble::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 8px;
	background: inherit;
	border-left: 1px solid;
	border-top: 1px solid;
	border-color: inherit;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ir-speech-bubble__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #374151;
	/* The bubble swaps one sentence at a time in sync with TTS. React re-keys
	   this <p> on every sentence change so this animation fires fresh each
	   time — a gentle fade + tiny rise keeps the swap from feeling abrupt. */
	animation: ir-speech-bubble-fade 260ms ease-out both;
}

@keyframes ir-speech-bubble-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===================================
   PLAYBACK CONTROLS
   =================================== */

.ir-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 4px 0;
	flex: 0 0 auto;
}

.ir-controls__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #374151;
	background: #f3f4f6;
}

.ir-controls__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.ir-controls__btn--prev,
.ir-controls__btn--next {
	width: 36px;
	height: 36px;
}

.ir-controls__btn--prev:hover:not(:disabled),
.ir-controls__btn--next:hover:not(:disabled) {
	background: #e5e7eb;
}

.ir-controls__btn--play {
	width: 44px;
	height: 44px;
	background: #3b82f6;
	color: white;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.ir-controls__btn--play:hover {
	background: #2563eb;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
	transform: scale(1.05);
}

.ir-controls__btn--playing {
	background: #f59e0b;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.ir-controls__btn--playing:hover {
	background: #d97706;
}

/* ===================================
   SEGMENT LIST
   =================================== */

.ir-segment-list {
	/* Outer wrapper: holds the pinned title + the scrollable button area.
	   Consumes remaining sticky-panel height. */
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-height: 0;
}

.ir-segment-list__title {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex: 0 0 auto;
}

.ir-segment-list__scroll {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-right: 6px;
	/* Soft fade at the bottom so users can see content extends below the cut. */
	mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - 22px),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - 22px),
		transparent 100%
	);
	/* Make the vertical scrollbar more visible so users know there's more. */
	scrollbar-width: thin;
	scrollbar-color: #9ca3af transparent;
}

.ir-segment-list__scroll::-webkit-scrollbar {
	width: 8px;
}
.ir-segment-list__scroll::-webkit-scrollbar-track {
	background: transparent;
}
.ir-segment-list__scroll::-webkit-scrollbar-thumb {
	background: #9ca3af;
	border-radius: 4px;
}
.ir-segment-list__scroll::-webkit-scrollbar-thumb:hover {
	background: #6b7280;
}

.ir-hidden-audio {
	display: none;
}

.ir-segment-list__empty {
	margin: 0;
	padding: 12px;
	font-size: 0.85rem;
	color: #6b7280;
	text-align: center;
}

.ir-segment-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	font-family: inherit;
	font-size: 0.9rem;
	color: #374151;
	width: 100%;
	flex: 0 0 auto;
}

.ir-segment-item:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	transform: translateX(2px);
}

.ir-segment-item--active {
	background: #eff6ff;
	border-color: var(--segment-color, #3b82f6);
	border-left-width: 4px;
	font-weight: 600;
	color: #111827;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ir-segment-item--visited {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.ir-segment-item__icon {
	font-size: 1.15rem;
	flex-shrink: 0;
}

.ir-segment-item__label {
	flex: 1;
	min-width: 0;
}

/* Mini equalizer bars for playing segment */
.ir-segment-item__playing {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
	flex-shrink: 0;
}

.ir-segment-item__playing span {
	display: block;
	width: 3px;
	background: #3b82f6;
	border-radius: 1px;
	animation: ir-eq-bar 0.8s ease-in-out infinite alternate;
}

.ir-segment-item__playing span:nth-child(1) {
	height: 8px;
	animation-delay: 0s;
}

.ir-segment-item__playing span:nth-child(2) {
	height: 14px;
	animation-delay: 0.2s;
}

.ir-segment-item__playing span:nth-child(3) {
	height: 10px;
	animation-delay: 0.4s;
}

@keyframes ir-eq-bar {
	0% { height: 4px; }
	100% { height: 16px; }
}

.ir-segment-item__check {
	flex-shrink: 0;
}

/* ===================================
   LOADING / ERROR / WAITING STATES
   =================================== */

.ir-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 56px 24px;
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
}

/* Larger variant of .ir-avatar used in the loading screen. Reuses the sidebar
   avatar's position/image/indicator styles and just bumps the size and adds a
   soft pulsing glow so it feels like Akami is actively thinking on the page. */
.ir-avatar--loading {
	width: 140px;
	height: 140px;
	margin-bottom: 4px;
	border-radius: 50%;
	animation: ir-avatar-loading-glow 2.4s ease-in-out infinite;
}

@keyframes ir-avatar-loading-glow {
	0%, 100% {
		box-shadow:
			0 0 0 0    rgba(59, 130, 246, 0.35),
			0 0 18px   rgba(59, 130, 246, 0.25);
	}
	50% {
		box-shadow:
			0 0 0 12px rgba(59, 130, 246, 0.05),
			0 0 28px   rgba(59, 130, 246, 0.45);
	}
}

.ir-loading__name {
	font-size: 1rem;
	font-weight: 700;
	color: #1f2937;
	letter-spacing: 0.2px;
}

.ir-loading__text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #111827;
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0;
}

.ir-loading__subtext {
	color: #6b7280;
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.5;
}

/* Three bouncing dots trailing after the loading headline. */
.ir-loading__dots {
	display: inline-flex;
	gap: 3px;
	align-items: flex-end;
	height: 1em;
	margin-left: 2px;
}

.ir-loading__dots span {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #3b82f6;
	animation: ir-loading-bounce 1.2s ease-in-out infinite;
}

.ir-loading__dots span:nth-child(2) { animation-delay: 0.15s; }
.ir-loading__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ir-loading-bounce {
	0%, 80%, 100% { transform: translateY(0);    opacity: 0.5; }
	40%           { transform: translateY(-4px); opacity: 1;   }
}

.ir-error {
	text-align: center;
	padding: 60px 20px;
}

.ir-error__icon {
	font-size: 48px;
	display: block;
	margin-bottom: 16px;
}

.ir-error__title {
	color: #dc2626;
	font-size: 1.25rem;
	margin: 0 0 8px 0;
}

.ir-error__message {
	color: #6b7280;
	margin: 0 0 20px 0;
}

.ir-error__retry {
	padding: 10px 24px;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 600;
	transition: background 0.2s ease;
}

.ir-error__retry:hover {
	background: #2563eb;
}

/* First-time generation CTA for older submissions that predate the auto-release
   hook. Rendered when the backend returns status=not_generated. */
.ir-generate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 72px 24px;
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
}

.ir-generate__icon {
	font-size: 56px;
	line-height: 1;
}

.ir-generate__title {
	color: #111827;
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0;
}

.ir-generate__message {
	color: #6b7280;
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}

.ir-generate__btn {
	margin-top: 8px;
	padding: 12px 32px;
	background: #3b82f6;
	color: #fff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.1s ease;
}

.ir-generate__btn:hover:not(:disabled) {
	background: #2563eb;
}

.ir-generate__btn:active:not(:disabled) {
	transform: translateY(1px);
}

.ir-generate__btn:disabled {
	background: #93c5fd;
	cursor: not-allowed;
}

.ir-generate__error {
	margin: 4px 0 0 0;
	color: #dc2626;
	font-size: 0.85rem;
}

.ir-waiting {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 20px;
	text-align: center;
}

.ir-waiting__icon {
	font-size: 48px;
}

.ir-waiting__title {
	color: #92400e;
	font-size: 1.25rem;
	margin: 0;
}

.ir-waiting__message {
	color: #6b7280;
	max-width: 400px;
	line-height: 1.6;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 900px) {
	.ir-container {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ir-review-sticky {
		position: static;
		max-height: none;
	}

	.ir-segment-list__scroll {
		overflow-y: visible;
		padding-right: 0;
		mask-image: none;
		-webkit-mask-image: none;
	}

	.ir-avatar {
		width: 90px;
		height: 90px;
	}

	.ir-essay-body {
		padding: 20px 24px;
	}
}

@media (max-width: 640px) {
	.ir-essay-paragraph {
		font-size: 0.95rem;
		line-height: 1.7;
		padding: 6px 10px;
	}

	.ir-segment-item {
		padding: 10px 12px;
		font-size: 0.85rem;
	}

	.ir-speech-bubble {
		padding: 12px 16px;
	}
}
/* GP Marking Report Styles - Match RWA Plugin Design */

.spm-marking-report-container {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.spm-marking-report-header {
	text-align: center;
	margin-bottom: 25px;
}

.spm-marking-report-header h2 {
	color: #2d3748;
	font-size: 1.5rem;
	margin: 0 0 10px 0;
}

.spm-marking-report-header p {
	color: #666;
	font-size: 1rem;
	margin: 0;
}

/* Loading & Error States */
.spm-report-loading-container,
.spm-report-error-container {
	text-align: center;
	padding: 60px 20px;
}

.spm-report-loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: 50%;
	animation: spm-spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spm-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.spm-report-loading-sub {
	color: #666;
	font-style: italic;
}

.spm-report-error-icon {
	font-size: 4rem;
	margin-bottom: 20px;
}

.spm-report-retry-btn {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.spm-report-retry-btn:hover:not(:disabled) {
	background: #5a67d8;
}

.spm-report-retry-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Small inline spinner for buttons */
.lj-spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spm-spin 0.8s linear infinite;
	display: inline-block;
	vertical-align: middle;
}

/* Report Sections - Match RWA Card Style */
.spm-report-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
	border: 1px solid #e2e8f0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.spm-report-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.spm-report-section-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.spm-report-section-header .section-title {
	margin: 0;
	font-size: 1.4rem;
}

.spm-badge-header {
	text-align: center;
}

.spm-badge-cell {
	text-align: center;
}

.spm-badge-display {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
}

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

.spm-marks-section-header h3 {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Cards - Match RWA Style */
.spm-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	margin-bottom: 20px;
}

.spm-kv {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 10px 16px;
}

.spm-kv .k, .spm-k {
	color: #4a5568;
	font-weight: 600;
}

.spm-kv .v, .spm-v {
	color: #1f2937;
}

/* Marks Section - Match RWA Blue Gradient */
.spm-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 25px;
}

.spm-score-display {
	display: flex;
	flex-direction: column;
}

.spm-score-label {
	font-size: .9rem;
	opacity: .9;
}

.spm-score-value {
	font-size: 2rem;
	font-weight: 700;
}

.spm-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.12);
	padding: 10px 15px;
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.spm-badge-icon {
	font-size: 1.2rem;
}

.spm-badge-text {
	font-weight: 500;
}

.spm-performance-badge[data-performance="excellent"] {
	background: rgba(34,197,94,.2);
}

.spm-performance-badge[data-performance="good"] {
	background: rgba(59,130,246,.2);
}

.spm-performance-badge[data-performance="needs-improvement"] {
	background: rgba(245,158,11,.2);
}

.spm-marks-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.spm-mark-category {
	background: #f8fafc;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
}

.spm-mark-category h4 {
	font-size: 1.1rem;
	color: #2d3748;
	margin: 0 0 12px 0;
}

.spm-mark-display {
	font-size: 1.5rem;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 15px;
}

.spm-progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
}

.spm-progress-fill {
	height: 100%;
	width: 0%;
	transition: width 1s ease-in-out;
}

/* Language Criterion Colors - Match RWA Schema */
.spm-progress-fill[data-progress="language"] {
	background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
	box-shadow: 0 2px 4px rgba(59,130,246,.3);
}

.spm-progress-fill[data-progress="accuracy"] {
	background: linear-gradient(90deg, #ef4444, #dc2626);
	box-shadow: 0 2px 4px rgba(239,68,68,.3);
}

.spm-progress-fill[data-progress="sentence-structure"] {
	background: linear-gradient(90deg, #06b6d4, #0891b2);
	box-shadow: 0 2px 4px rgba(6,182,212,.3);
}

.spm-progress-fill[data-progress="vocabulary"] {
	background: linear-gradient(90deg, #8b5cf6, #7c3aed);
	box-shadow: 0 2px 4px rgba(139,92,246,.3);
}

.spm-progress-fill[data-progress="organisation"] {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	box-shadow: 0 2px 4px rgba(245,158,11,.3);
}

.spm-progress-fill[data-progress="articulation"] {
	background: linear-gradient(90deg, #22c55e, #16a34a);
	box-shadow: 0 2px 4px rgba(34,197,94,.3);
}

/* Content Criterion Colors */
.spm-progress-fill[data-progress="question-alignment"] {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16,185,129,.3);
}

.spm-progress-fill[data-progress="thesis-quality"] {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99,102,241,.3);
}

.spm-progress-fill[data-progress="argument-depth"] {
	background: linear-gradient(90deg, #ec4899, #db2777);
	box-shadow: 0 2px 4px rgba(236,72,153,.3);
}

.spm-progress-fill[data-progress="evidence-quality"] {
	background: linear-gradient(90deg, #f97316, #ea580c);
	box-shadow: 0 2px 4px rgba(249,115,22,.3);
}

.spm-progress-fill[data-progress="evaluation-balance"] {
	background: linear-gradient(90deg, #0ea5e9, #0284c7);
	box-shadow: 0 2px 4px rgba(14,165,233,.3);
}

/* Band Descriptor */
.spm-band-descriptor {
	background: #edf2f7;
	padding: 10px;
	border-radius: 6px;
	font-size: .85rem;
	margin-top: 15px;
	border-left: 3px solid #cbd5e0;
}

/* Question Analysis */
.spm-question-prompt {
	font-style: italic;
	font-size: 1rem;
	color: #1f2937;
	padding: 16px;
	background: #fff;
	border-left: 4px solid #667eea;
	border-radius: 6px;
	margin-bottom: 20px;
}

/* Progress bar for question engagement */
.spm-progress {
	height: 10px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}

.spm-progress .spm-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	width: 0%;
	transition: width .8s ease-in-out;
}

.spm-progress-text {
	font-size: .9rem;
	color: #4a5568;
	margin-top: 6px;
}

/* Table styles - Match RWA */
.spm-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	table-layout: auto;
}

.spm-table th,
.spm-table td {
	border: 1px solid #e2e8f0;
	padding: 10px 12px;
	vertical-align: top;
}

.spm-table th {
	background: #f8fafc;
	text-align: left;
	color: #2d3748;
	font-weight: 600;
}

.spm-table .ok {
	color: #1f2937;
	font-weight: 600;
}

.spm-table .warn {
	color: #1f2937;
	font-weight: 600;
}

.spm-table .bad {
	color: #1f2937;
	font-weight: 600;
}

.spm-feedback-cell {
	font-size: .9rem;
	color: #4a5568;
	line-height: 1.5;
}

/* Key Terms Mobile Cards - Hidden by default */
.spm-key-terms-cards {
	display: none;
}

.spm-key-term-mobile-card {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	margin-bottom: 10px;
	line-height: 1.5;
}

/* Mobile: Show cards, hide table */
@media (max-width: 640px) {
	.spm-key-terms {
		display: none;
	}
	
	.spm-key-terms-cards {
		display: block;
	}
}

/* Status Badges - Match RWA with Emoji Circles */
.spm-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
}

.spm-status-badge.spm-status-successful {
	background: #dcfce7;
	color: #166534;
}

.spm-status-badge.spm-status-adequate {
	background: #fef9c3;
	color: #854d0e;
}

.spm-status-badge.spm-status-partial {
	background: #ffedd5;
	color: #9a3412;
}

.spm-status-badge.spm-status-missing {
	background: #fee2e2;
	color: #991b1b;
}

/* Dimensions - Ring Chart Style */
.spm-dimensions {
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
	align-items: stretch;
}

.spm-dimension-card {
	flex: 1;
	min-width: 240px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin: 6px;
}

/* Ring Chart Container */
.spm-ring-container {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto;
}

.spm-ring-center-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.spm-dimension-title {
	font-weight: 700;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 16px;
	color: #111827;
}

.spm-dimension-badge-center {
	text-align: center;
	margin-top: 6px;
	margin-bottom: 6px;
}

.spm-dimension-suggestion {
	color: #374151;
	font-size: 0.9rem;
	text-align: center;
	margin-top: 6px;
	line-height: 1.5;
}

/* Student Text - Match RWA Style */
.spm-student-text {
	background: #fff;
	border: 1px solid #e2e8f0;
	padding: 12px;
	border-radius: 6px;
	margin-top: 10px;
	white-space: pre-wrap;
	line-height: 1.6;
	color: #1f2937;
}

/* OLD - No longer needed with new table layout
.spm-student-text-container {
	margin-bottom: 20px;
}
*/

/* Alternative suggestion styling */
.spm-alt {
	background: #f0fff4;
	border-left: 3px solid #38a169;
	padding: 12px;
	border-radius: 6px;
	margin-top: 10px;
}

/* Thesis Box - Match RWA Style */
.spm-thesis-box {
	margin-top: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.spm-thesis-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.spm-thesis-label {
	font-weight: 700;
	color: #111827;
}

.spm-thesis-text {
	margin-top: 6px;
	color: #374151;
}

.spm-thesis-feedback {
	margin: 6px 0 0 16px;
	padding: 0;
	list-style: disc;
	color: #374151;
}

.spm-thesis-feedback li {
	margin-bottom: 4px;
}

.spm-thesis-better {
	margin-top: 10px;
}

.spm-thesis-better-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.spm-thesis-better-text {
	color: #1f2937;
}

/* Introduction Section - Compact Spacing */
.spm-introduction-section .spm-card > * + * {
	margin-top: 10px;
}

.spm-introduction-section .spm-table {
	margin-top: 12px;
}

.spm-introduction-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-introduction-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

/* Aspects Grid - OLD (now using table) */
/* .spm-aspects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	background: white;
	padding: 20px;
	border-radius: 8px;
}

.spm-aspect-item {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px;
	background: #f9fafb;
}

.spm-aspect-header {
	margin-bottom: 12px;
} */

.spm-aspect-header h4,
.spm-aspect-header h5 {
	font-size: 16px;
	color: #111827;
	margin: 0 0 8px 0;
}

.spm-star-rating {
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
}

.star-filled {
	color: #fbbf24;
	font-size: 20px;
}

.star-empty {
	color: #d1d5db;
	font-size: 20px;
}

/* Thesis Box - Match RWA Style */
.spm-thesis-box {
	margin-top: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.spm-thesis-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.spm-thesis-label {
	font-weight: 700;
	color: #111827;
}

.spm-thesis-text {
	margin-top: 6px;
	color: #374151;
}

.spm-thesis-feedback {
	margin: 6px 0 0 16px;
	padding: 0;
	list-style: disc;
	color: #374151;
}

.spm-thesis-feedback li {
	margin-bottom: 4px;
}

.spm-thesis-better {
	margin-top: 10px;
}

.spm-thesis-better-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.spm-thesis-better-text {
	color: #1f2937;
}

/* Stars - Enhanced for colored display */
.spm-stars {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
}

.spm-stars span {
	transition: color 0.2s ease;
}

/* Introduction Section - Table layout specifics */
.spm-introduction-section .spm-card > * + * {
	margin-top: 10px;
}

.spm-introduction-section .spm-table {
	margin-top: 12px;
}

.spm-introduction-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-introduction-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

.spm-band-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	margin-top: 4px;
}

.spm-band-badge.band-good {
	background: #dcfce7;
	color: #166534;
}

.spm-band-badge.band-adequate {
	background: #dbeafe;
	color: #1e40af;
}

.spm-band-badge.band-limited {
	background: #fef3c7;
	color: #92400e;
}

.spm-band-badge.band-missing {
	background: #fee2e2;
	color: #991b1b;
}

.spm-aspect-feedback {
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
}

/* OLD - Checks no longer displayed in body paragraphs
.spm-checks-container,
.spm-checks-list {
	margin-top: 20px;
}

.spm-check-item,
.spm-check {
	background: #f8fafc;
	border-left: 3px solid #667eea;
	padding: 10px;
	border-radius: 6px;
	margin: 8px 0;
}

.spm-check-item-title {
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 8px;
}

.spm-check-observation,
.spm-check-tip {
	font-size: .9rem;
	color: #4a5568;
	margin-bottom: 6px;
	line-height: 1.5;
}
*/

/* Body Paragraphs - Match RWA */
.spm-body-paragraphs-section .spm-card {
	margin-bottom: 20px;
}

.spm-body-paragraph-label {
	font-weight: 700;
	margin-bottom: 8px;
}

/* Progress bar for body paragraph overall score */
.spm-body-paragraphs-section .spm-progress {
	height: 10px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}

.spm-body-paragraphs-section .spm-progress .spm-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	width: 0%;
	transition: width .8s ease-in-out;
}

/* Student paragraph text */
.spm-body-paragraphs-section .spm-student-text {
	margin-top: 10px;
	margin-bottom: 12px;
}

/* Table alignment for body paragraphs */
.spm-body-paragraphs-section .spm-table {
	margin-top: 12px;
}

.spm-body-paragraphs-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-body-paragraphs-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

/* Conclusion - Match RWA */
.spm-conclusion-section .spm-card {
	margin-bottom: 20px;
}

/* Table alignment for conclusion */
.spm-conclusion-section .spm-table {
	margin-top: 12px;
}

.spm-conclusion-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-conclusion-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

/* Tags - Match RWA Style */
.spm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.spm-tag {
	background: #edf2f7;
	color: #2d3748;
	padding: 6px 10px;
	border-radius: 14px;
	font-size: .85rem;
	border: 1px solid #e2e8f0;
}

/* Star Ratings - Match RWA with Band Colors */
.spm-stars {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
}

.spm-stars span {
	transition: color 0.2s ease;
}

.star-filled {
	color: #fbbf24;
	font-size: 18px;
}

.star-empty {
	color: #e2e8f0;
	font-size: 18px;
}

/* Reference Banner */
.spm-reference-banner {
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #2d3748;
	font-weight: 500;
	text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
	.spm-marks-breakdown {
		grid-template-columns: 1fr;
	}
	
	.spm-dimensions,
	.spm-aspects-grid {
		grid-template-columns: 1fr;
	}
	
	.spm-total-marks {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}
	
	.spm-kv {
		grid-template-columns: 1fr;
	}
}

/* Teacher Override Styles */
.spm-paper2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spm-paper2-question-result__header h4 {
	margin: 0;
	flex: 0 0 auto;
}

.spm-paper2-question-result__header .header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.teacher-adjusted-indicator {
	color: #f59e0b;
	margin-left: 6px;
	font-size: 16px;
}

.ai-score-comparison-row {
	margin-bottom: 12px;
}

.ai-score-comparison {
	font-size: 0.85em;
	color: #64748b;
	font-weight: normal;
}

.question-edit-btn {
	padding: 6px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	transition: all 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
}

.question-edit-btn:hover {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
}

.question-edit-btn:active {
	background-color: #e2e8f0;
}

/* English SCM + shared — BM K1 B Isi Kandungan feedback table layout (pill badges, band chat grid) */

.bm-k1-isi-kandungan-card {
	display: grid;
	gap: 12px;
}

.bm-k1-isi-kandungan-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.bm-k1-isi-kandungan-card__score-line {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bm-k1-isi-kandungan-card__score {
	font-size: 1.25rem;
	font-weight: 700;
	color: #4f46e5;
}

.bm-k1-isi-feedback-table {
	margin-top: 0;
}

.spm-table.bm-k1-isi-feedback-table th,
.spm-table.bm-k1-isi-feedback-table td {
	border: none;
}

.bm-k1-isi-kandungan-card .spm-table.bm-k1-isi-feedback-table tbody td:first-child,
.spm-table.bm-k1-isi-feedback-table tbody td:first-child {
	vertical-align: middle;
}

.bm-k1-isi-feedback-table th {
	background: #f8fafc;
	font-size: 0.83rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bm-k1-isi-kandungan-card .spm-table.bm-k1-isi-feedback-table thead th.spm-badge-header,
.spm-table.bm-k1-isi-feedback-table thead th.spm-badge-header {
	text-align: center;
}

.bm-k1-isi-kandungan-card__badge-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bm-k1-isi-kandungan-card .spm-badge-cell,
.spm-table.bm-k1-isi-feedback-table td.spm-badge-cell {
	vertical-align: middle;
}

.bm-k1-isi-kandungan-card .status-badge-container,
.spm-table.bm-k1-isi-feedback-table .status-badge-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 1;
}

.bm-k1-isi-kandungan-card .rating-icon,
.spm-table.bm-k1-isi-feedback-table .rating-icon {
	font-size: 1.875rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bm-k1-isi-kandungan-card .status-badge,
.spm-table.bm-k1-isi-feedback-table .status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 5px 13px;
	border-radius: 9999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bm-k1-isi-kandungan-card__desc {
	margin: 4px 0 0;
	font-size: 0.86rem;
}

.bm-k1-isi-kandungan-card .bm-k1-isi-kandungan-card__maklum-balas,
.spm-table.bm-k1-isi-feedback-table .bm-k1-isi-kandungan-card__maklum-balas {
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 900px) {
	.bm-k1-isi-feedback-table th,
	.bm-k1-isi-feedback-table td {
		padding: 9px 10px;
	}

	.bm-k1-isi-kandungan-card__score-line {
		width: 100%;
		justify-content: flex-start;
	}
}

.spm-band-descriptor.bm-k1-isi-band-chat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem 1.25rem;
	align-items: center;
}

.bm-k1-isi-band-chat__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	min-width: 5.5rem;
	max-width: 7.5rem;
}

.bm-k1-isi-band-chat__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bm-k1-isi-band-chat__avatar-img {
	width: 4.375rem;
	height: auto;
	max-height: 4.375rem;
	object-fit: contain;
	display: block;
}

.bm-k1-isi-band-chat__avatar-fallback {
	font-size: 2.1875rem;
	line-height: 1;
}

.bm-k1-isi-band-chat__name {
	font-size: 0.8rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	word-wrap: break-word;
}

.bm-k1-isi-band-chat__body {
	min-width: 0;
}

.bm-k1-isi-band-chat__band-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0.5rem;
}

.bm-k1-isi-band-chat__band-icon {
	font-size: 1.3rem;
	line-height: 1;
}

.spm-band-descriptor.bm-k1-isi-band-chat .bm-k1-isi-band-chat__feedback {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: #475569;
}

.spm-band-descriptor.bm-k1-isi-band-chat .bm-k1-isi-band-chat__feedback + .bm-k1-isi-band-chat__feedback {
	margin-top: 0.5rem;
}

@media (max-width: 720px) {
	.spm-band-descriptor.bm-k1-isi-band-chat {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.bm-k1-isi-band-chat__body {
		width: 100%;
		text-align: left;
	}

	.bm-k1-isi-band-chat__band-row {
		justify-content: center;
	}
}

.sw-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sw-card__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	color: #475569;
}

.sw-card__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	min-height: 480px;
}

.sw-card__source-panel,
.sw-card__response-panel {
	border-radius: 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 1.25rem;
	box-sizing: border-box;
}

.sw-card__source-panel {
	border: none;
	box-shadow: none;
}

.sw-card__response-panel {
	border: none;
	box-shadow: none;
}

.sw-card__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
}

.sw-card__tab {
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1.4rem;
	color: #1d4ed8;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.2s ease;
	box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.2);
}

.sw-card__tab.is-active {
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.sw-card__panel {
	flex: 1;
	background: #fbfbff;
	border-radius: 12px;
	padding: 1.5rem;
	overflow-y: auto;
	min-height: 320px;
	border: 1px solid #e2e8f0;
	box-sizing: border-box;
}

/* Insert tab: infographic-only — image only, fills panel width and available height */
.sw-card__panel:has(.sw-card__insert--poster-only) {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.sw-card__insert--poster-only {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.sw-card__insert--poster-only .sw-card__insert-poster {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	margin: 0;
	background: #f8fafc;
	border-radius: 10px;
	max-height: min(75vh, 900px);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.sw-card__insert--poster-only .sw-card__insert-poster img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: unset;
	display: block;
}

.sw-card__insert--poster-only .sw-card__insert-sections:empty {
	display: none;
}

.sw-card__question-title {
	margin: 0 0 0.75rem 0;
	color: #0f172a;
	font-size: 1.15rem;
	line-height: 1.5;
	font-weight: 500;
}

.sw-card__instructions {
	color: #475569;
	margin: 0 0 1rem 0;
	font-style: italic;
	font-size: 15px;
}

.sw-card__bullet-list {
	margin: 0;
	padding-left: 1.25rem;
	color: #1f2937;
	line-height: 1.6;
}

.sw-card__bullet-list li + li {
	margin-top: 0.35rem;
}

.sw-card__context {
	margin: 0 0 1rem 0;
	line-height: 1.6;
}

.sw-card__insert-sections {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sw-card__insert-section {
	display: flex;
	gap: 1rem;
	align-items: center;
	border-radius: 10px;
	padding: 1rem;
}

.sw-card__insert-section.is-left {
	flex-direction: row-reverse;
}

.sw-card__insert-copy {
	flex: 1;
	color: #0f172a;
}

.sw-card__insert-copy strong {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 1rem;
}

.sw-card__insert-dashlist {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: #0f172a;
	line-height: 1.6;
}

.sw-card__insert-dashlist-item {
	display: flex;
	gap: 0.65rem;
}

.sw-card__insert-dashlist-bullet {
	color: #475569;
	font-weight: 600;
	flex-shrink: 0;
}

.sw-card__insert-media {
	width: 220px;
	flex-shrink: 0;
}

.sw-card__insert-media img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 15px 35px rgba(15, 23, 42, 0.2);
	object-fit: cover;
}

.sw-card__placeholder {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #94a3b8;
	font-weight: 500;
}

.sw-card__response-panel {
	background: #ffffff;
}

.sw-card__response-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	background: #3b82f6;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	box-shadow: none;
}

.sw-card__response-header h4 {
	margin: 0;
	font-size: 16px;
	color: inherit;
	font-weight: 600;
}

.sw-card__response-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sw-card__textarea {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	border: 1.5px solid #cbd5e1;
	padding: 1rem;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
	background: #fff;
	color: #0f172a;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-sizing: border-box;
}

.sw-card__textarea::placeholder {
	color: #94a3b8;
	font-family: inherit;
}

.sw-card__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.sw-card__textarea:disabled {
	background: #f5f7fb;
	color: #94a3b8;
	cursor: not-allowed;
}

.sw-card__word-count {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #6b21a8;
	text-align: right;
}

.sw-card__actions {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sw-card__submit,
.sw-card__secondary {
	padding: 0.95rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.sw-card__submit {
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.sw-card__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.sw-card__submit:not(:disabled):hover {
	transform: translateY(-1px);
}

.sw-card__secondary {
	background: #f5f3ff;
	color: #6b21a8;
	border: 1px solid rgba(139, 92, 246, 0.4);
}

.sw-card__secondary:hover {
	background: #ede9fe;
}

.sw-card__status {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	font-weight: 600;
}

.sw-card__status--success {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.1);
}

.sw-card__status--pending {
	background: #fef9c3;
	border: 1px solid #fde68a;
	color: #854d0e;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.sw-card__status--info {
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	color: #312e81;
}

.sw-card__status--info p {
	margin: 0 0 0.25rem 0;
}

.sw-card__status-icon {
	font-size: 1.4rem;
	line-height: 1;
	margin-top: 0.1rem;
}

.sw-card__error {
	padding: 0.85rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecdd3;
	border-radius: 10px;
	color: #b91c1c;
	font-weight: 500;
}

@media (max-width: 1024px) {
	.sw-card__split {
		grid-template-columns: 1fr;
	}

	.sw-card__insert-section,
	.sw-card__insert-section.is-left {
		flex-direction: column;
	}

	.sw-card__insert-media {
		width: 100%;
	}
}
.sw-report {
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 17px;
}

.sw-report__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.sw-report__format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.sw-report__format-check {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sw-report__format-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.sw-report__format-icon.success {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.sw-report__format-icon.warning {
  background: rgba(248, 113, 113, 0.18);
  color: #b91c1c;
}

.sw-report__coverage-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sw-report__coverage-item {
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-report__coverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.sw-report__coverage-status {
  font-size: 17px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: capitalize;
  font-weight: 600;
}

.sw-report__coverage-status.addressed {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.sw-report__coverage-status.partial {
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.sw-report__coverage-status.missing {
  background: rgba(248, 113, 113, 0.18);
  color: #b91c1c;
}

.sw-report__pending,
.sw-report__loading,
.sw-report__error {
  text-align: center;
  padding: 60px 20px;
  font-size: 17px;
}

.sw-report__pending h3 {
  font-size: 1.2rem;
  color: #1d4ed8;
}

.sw-report__pending-card {
  background: #fef9c3;
  border: 2px solid #fcd34d;
  border-radius: 1rem;
  padding: 2.5rem;
  text-align: center;
  color: #713f12;
}

.sw-report__pending-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.sw-report__refresh-button {
  margin-top: 1rem;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sw-report__refresh-button:hover {
  background: #1e40af;
}

.sw-report__error h3 {
  font-size: 1.2rem;
  color: #b91c1c;
}

.sw-report__spinner {
  width: 52px;
  height: 52px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: sw-report-spin 1s linear infinite;
}

@keyframes sw-report-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Marks Section Styles */
.marking-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

/* Base size for the whole marks card (works even when not inside `.sw-report`) */
.marks-section {
  font-size: 17px;
}

.marks-section h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
}

/* Total marks bar — mirrors recount markup/styles (`RecountMarkingReport.css`); duplicated here so SW entry (CSS-only import) stays self-contained */
.marks-section .recount-total-marks {
  --sw-total-grade-circle-size: 56px;
  --sw-total-marks-figure-font-size: calc(var(--sw-total-grade-circle-size) * 0.78);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 16px;
}

.marks-section .recount-score-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marks-section .recount-total-marks .recount-score-label {
  font-size: 17px;
  opacity: 0.9;
}

.marks-section .recount-total-marks .recount-score-value {
  font-size: var(--sw-total-marks-figure-font-size);
  font-weight: 700;
  line-height: 1;
}

.marks-section .recount-performance-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.marks-section .recount-performance-badge .badge-icon {
  font-size: 1.2rem;
}

.marks-section .recount-performance-badge .badge-text {
  font-weight: 500;
  font-size: 1rem;
}

.marks-section .recount-performance-badge .marks-section__total-grade.badge-text {
  font-size: var(--sw-total-marks-figure-font-size);
  font-weight: 700;
  line-height: 1;
}

.marks-section .marks-section__total-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  transition: color 0.25s ease;
}

.marks-section .marks-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.marks-section .mark-category {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  background: #f9fafb;
}

.marks-section .mark-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.marks-section .mark-category-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
}

.marks-section .mark-display__scores {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.marks-section .mark-score {
  font-size: 17px;
  font-weight: 700;
  color: #3b82f6;
}

.marks-section .sub-elements {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.marks-section .sub-elements--grade-rings {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 8px;
  margin-top: 5px;
}

.marks-section .sw-sub-grade {
  flex: 1 1 0;
  min-width: 7.5rem;
  max-width: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.marks-section .sw-sub-grade__ring-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}

.marks-section .sw-sub-grade__ring-wrap svg {
  display: block;
}

.marks-section .sw-sub-grade__track {
  stroke: #e5e7eb;
}

.marks-section .sw-sub-grade__arc {
  transition: stroke-dashoffset 0.45s ease, stroke 0.25s ease;
}

.marks-section .sw-sub-grade__grade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: color 0.25s ease;
}

.marks-section .sw-sub-grade__caption {
  margin: 0;
  font-size: 17px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .marks-section .sub-elements--grade-rings {
    justify-content: center;
  }

  .marks-section .sw-sub-grade {
    min-width: calc(50% - 12px);
    max-width: none;
  }
}

/* Content Aspect Cards */
.content-aspect-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.content-aspect-card .aspect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
}

.content-aspect-card .aspect-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-aspect-card .aspect-icon {
  font-size: 2rem;
}

.content-aspect-card .aspect-title h3 {
  margin: 0;
  font-size: 17px;
  color: #1f2937;
}

.content-aspect-card .aspect-score {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #f9fafb;
  border-radius: 12px;
  border: 2px solid currentColor;
}

.content-aspect-card .score-icon {
  font-size: 1.25rem;
}

.content-aspect-card .score-value {
  font-size: calc(1.5rem * 1.25);
  font-weight: 700;
}

.content-aspect-card .score-label {
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.content-aspect-card .aspect-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* PAC table — aligned with recount `task-breakdown-table` (IGCSE EFL Paper 2 composition report) */
.content-aspect-card .pac-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.content-aspect-card .pac-table__header {
  display: grid;
  grid-template-columns: 120px 130px 1fr 1.2fr 1.2fr 1fr;
  background: #f9fafb;
}

.content-aspect-card .pac-table__header .pac-table__cell {
  padding: 12px 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e5e7eb;
}

.content-aspect-card .pac-table__row {
  display: grid;
  grid-template-columns: 120px 130px 1fr 1.2fr 1.2fr 1fr;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.content-aspect-card .pac-table__row:last-child {
  border-bottom: none;
}

.content-aspect-card .pac-table__row:hover {
  background: #f9fafb;
}

.content-aspect-card .pac-table__cell {
  padding: 16px;
  display: flex;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.6;
  color: #374151;
  vertical-align: top;
}

.content-aspect-card .pac-table__cell--aspect {
  align-items: center;
}

.content-aspect-card .pac-table__cell--aspect strong {
  font-weight: 700;
  color: #1e40af;
  font-size: 17px;
  font-style: italic;
  padding: 2px 6px;
  background: #eff6ff;
  border-radius: 4px;
  display: inline-block;
}

.content-aspect-card .pac-table__cell--tier {
  justify-content: center;
  align-items: center;
}

.content-aspect-card .pac-table__cell--expected {
  align-items: center;
}

/* Tier column: same pattern as `task-breakdown-table` .status-badge-container */
.content-aspect-card .pac-tier-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.content-aspect-card .pac-tier-rating-icon {
  font-size: 2rem;
  line-height: 1;
}

.content-aspect-card .pac-tier-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
}

/* Tier pills in IGCSE Paper 1 marks section (same PAC grid; no vertical borders) */
.content-aspect-card .pac-table__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.content-aspect-card .pac-table__badge.good {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.content-aspect-card .pac-table__badge.warn {
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.content-aspect-card .pac-table__badge.bad {
  background: rgba(248, 113, 113, 0.18);
  color: #b91c1c;
}

.content-aspect-card .pac-table__badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
}

.content-aspect-card .pac-table__text {
  margin: 0;
  line-height: 1.6;
  font-size: 17px;
  color: #6b7280;
}

.content-aspect-card .pac-table__bullets {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  font-size: 17px;
  color: #6b7280;
}

.content-aspect-card .pac-table__bullets li {
  margin-bottom: 6px;
}

.content-aspect-card .pac-table__bullets li:last-child {
  margin-bottom: 0;
}

.content-aspect-card .pac-table__example {
  margin: 0;
  font-style: italic;
  font-size: 17px;
  color: #374151;
  line-height: 1.6;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Responsive behaviour for PAC table */
@media (max-width: 1200px) {
  .content-aspect-card .pac-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .content-aspect-card .pac-table__header,
  .content-aspect-card .pac-table__row {
    min-width: 720px;
    grid-template-columns: 100px 110px 1fr 1fr 1fr 0.8fr;
  }
}

@media (max-width: 900px) {
  .content-aspect-card .pac-table {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
  }

  .content-aspect-card .pac-table__header,
  .content-aspect-card .pac-table__row {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .content-aspect-card .pac-table__header {
    display: none;
  }

  .content-aspect-card .pac-table__row {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
  }

  .content-aspect-card .pac-table__row:last-child {
    margin-bottom: 0;
  }

  .content-aspect-card .pac-table__cell {
    padding: 12px 0;
    border-bottom: none;
  }

  .content-aspect-card .pac-table__cell:last-child {
    padding-bottom: 0;
  }

  .content-aspect-card .pac-table__cell--aspect {
    font-size: 17px;
    color: #1e40af;
    padding-bottom: 8px;
  }

  .content-aspect-card .pac-table__cell--tier {
    justify-content: flex-start;
    padding-bottom: 12px;
  }

  .content-aspect-card .pac-table__cell::before {
    content: attr(data-label);
    display: block;
    font-size: 17px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .content-aspect-card .pac-table__cell--aspect::before {
    content: none;
  }
}

/* Task Coverage & Support card */
.task-coverage-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.task-coverage-card__header h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  color: #1f2937;
}

.task-coverage-card__header p {
  margin: 0;
  color: #64748b;
  font-size: 17px;
}

.task-coverage-card__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-coverage-card__item {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: #f9fafb;
}

.task-coverage-card__item-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.task-coverage-card__item-index {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366f1;
  font-weight: 700;
}

.task-coverage-card__item h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.5;
}

/* Mirrors recount `task-breakdown-table` (Task Relevance card) — horizontal rules only.
   Column widths: Check + Status shrink to content (widest cell in that column); Feedback takes the rest. */
.task-coverage-card .task-coverage-breakdown-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin-top: 4px;
}

.task-coverage-card .task-coverage-breakdown-table thead {
  background: #f9fafb;
}

.task-coverage-card .task-coverage-breakdown-table th {
  padding: 12px 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e5e7eb;
}

.task-coverage-card .task-coverage-breakdown-table th:nth-child(1),
.task-coverage-card .task-coverage-breakdown-table th:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

.task-coverage-card .task-coverage-breakdown-table th:nth-child(3) {
  width: auto;
}

.task-coverage-card .task-coverage-breakdown-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.task-coverage-card .task-coverage-breakdown-table tbody tr:hover {
  background: #f9fafb;
}

.task-coverage-card .task-coverage-breakdown-table td {
  padding: 16px;
  vertical-align: top;
}

.task-coverage-card .task-coverage-check-cell {
  width: 1%;
  white-space: nowrap;
}

.task-coverage-card .task-coverage-check-label {
  font-weight: 700;
  color: #1e40af;
  font-size: 17px;
  font-style: italic;
  padding: 2px 6px;
  background: #eff6ff;
  border-radius: 4px;
  display: inline-block;
}

.task-coverage-card .task-coverage-rating-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.task-coverage-card .task-coverage-feedback-cell {
  width: auto;
  min-width: 45%;
  font-size: 17px;
  color: #374151;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.task-coverage-card .task-coverage-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.task-coverage-card .task-coverage-rating-icon {
  font-size: 2rem;
  line-height: 1;
}

.task-coverage-card .task-coverage-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
}

/* Organisation & Clarity card */
.organization-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.organization-card__header h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  color: #1f2937;
}

.organization-card__header p {
  margin: 0;
  color: #64748b;
  font-size: 17px;
}

/* Same pattern as Task Coverage `task-coverage-breakdown-table` / recount task-breakdown-table */
.organization-card .organization-breakdown-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin-top: 16px;
}

.organization-card .organization-breakdown-table thead {
  background: #f9fafb;
}

.organization-card .organization-breakdown-table th {
  padding: 12px 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e5e7eb;
}

.organization-card .organization-breakdown-table th:nth-child(1),
.organization-card .organization-breakdown-table th:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

.organization-card .organization-breakdown-table th:nth-child(3) {
  width: auto;
}

.organization-card .organization-breakdown-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.organization-card .organization-breakdown-table tbody tr:hover {
  background: #f9fafb;
}

.organization-card .organization-breakdown-table td {
  padding: 16px;
  vertical-align: top;
}

.organization-card .organization-check-cell {
  width: 1%;
  white-space: nowrap;
}

.organization-card .organization-check-label {
  font-weight: 700;
  color: #1e40af;
  font-size: 17px;
  font-style: italic;
  padding: 2px 6px;
  background: #eff6ff;
  border-radius: 4px;
  display: inline-block;
}

.organization-card .organization-rating-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.organization-card .organization-feedback-cell {
  width: auto;
  min-width: 45%;
  font-size: 17px;
  color: #374151;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.organization-card .organization-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.organization-card .organization-rating-icon {
  font-size: 2rem;
  line-height: 1;
}

.organization-card .organization-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
}

.organization-card__next-steps {
  margin-top: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
}

.organization-card__next-label {
  display: inline-block;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 6px;
}

.organization-card__next-steps ul {
  margin: 0 0 0 18px;
  padding: 0;
  color: #1f2937;
  line-height: 1.5;
  font-size: 17px;
}


.content-aspect-card .aspect-evaluation h4 {
  margin: 0 0 12px 0;
  font-size: 17px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.content-aspect-card .aspect-evaluation p {
  margin: 0;
  font-size: 17px;
  color: #1f2937;
  line-height: 1.6;
}

.content-aspect-card .aspect-examples h4 {
  margin: 0 0 12px 0;
  font-size: 17px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.content-aspect-card .examples-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  font-size: 17px;
  color: #475569;
  line-height: 1.6;
  font-style: italic;
}

/* Teacher dashboard overrides to match student report styling */
.teacher-card-wrapper .sw-report .marking-section,
.teacher-card-wrapper .sw-report .content-aspect-card,
.teacher-card-wrapper .sw-report .task-coverage-card,
.teacher-card-wrapper .sw-report .organization-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.teacher-card-wrapper .marks-section .progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.teacher-card-wrapper .marks-section .progress-fill {
  display: block;
  height: 100%;
  min-height: 8px;
}

@media (max-width: 768px) {
  .sw-report {
    padding: 16px 12px;
  }

  .sw-report__card {
    padding: 18px;
  }

  .marks-section .marks-breakdown {
    grid-template-columns: 1fr;
  }

  .marks-section .recount-total-marks {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .content-aspect-card .aspect-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .content-aspect-card .aspect-score {
    width: 100%;
    justify-content: center;
  }

  .content-aspect-card .pac-grid {
    grid-template-columns: 1fr;
  }

  .content-aspect-card .pac-row {
    flex-direction: column;
  }

  .task-coverage-card .task-coverage-breakdown-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .organization-card .organization-breakdown-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}
.lj-card--custom-worksheet .lj-card__subtitle {
	color: #6b7280;
	margin-top: 6px;
}

.lj-card--custom-worksheet .lj-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e5e7eb;
}

.lj-card--custom-worksheet .lj-card__meta {
	font-size: calc(0.875rem + 2.5px);
	color: #6b7280;
	font-weight: 500;
}

.lj-card--custom-worksheet .lj-card__content {
	padding: 30px;
}

.lj-card--custom-worksheet .worksheet-split {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-left: 0;
	padding-right: 0;
	font-size: calc(1em + 2.5px);
}

.lj-card--custom-worksheet .worksheet-split-row {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lj-card--custom-worksheet .worksheet-split-row:not(:first-child) {
	border-top: 1px solid #e2e8f0;
	padding-top: 2rem;
	margin-top: 2rem;
}

.lj-card--custom-worksheet .worksheet-split-passage-header {
	margin-bottom: 1rem;
	padding-left: 20px;
	padding-right: 20px;
}

.lj-card--custom-worksheet .worksheet-split-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.lj-card--custom-worksheet .worksheet-split-passage,
.lj-card--custom-worksheet .worksheet-split-questions {
	min-width: 0;
}

.lj-card--custom-worksheet .worksheet-split-questions {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.lj-card--custom-worksheet .worksheet-split-questions--full-width {
	grid-column: 1 / -1;
}

.lj-card--custom-worksheet-grammar .worksheet-split {
	padding-left: 0;
	padding-right: 0;
}

.lj-card--custom-worksheet-grammar .worksheet-split-questions {
	margin-top: 0;
}

/* Submit button per passage group */
.lj-card--custom-worksheet .worksheet-split-submit {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lj-card--custom-worksheet .worksheet-split-submit__btn {
	padding: 10px 24px;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: calc(15px + 2.5px);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.lj-card--custom-worksheet .worksheet-split-submit__btn:hover {
	background: #2563eb;
}

.lj-card--custom-worksheet .worksheet-split-submit__btn:active {
	background: #1d4ed8;
}

.lj-card--custom-worksheet .worksheet-split-submit__btn:disabled {
	background: #94a3b8;
	cursor: not-allowed;
}

.lj-card--custom-worksheet .worksheet-split-submit__btn--submitted:disabled {
	background: #16a34a;
	color: #ffffff;
}

.lj-card--custom-worksheet .worksheet-split-submit__error {
	margin-top: 0.5rem;
	color: #dc2626;
	font-size: calc(0.875rem + 2.5px);
}

/* Passage styling (matches English Paper 2) */
.lj-card--custom-worksheet .english-paper2-passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.lj-card--custom-worksheet .english-paper2-passage:last-child {
	margin-bottom: 0;
}

/* Body-only: no header, first paragraph aligns with first question */
.lj-card--custom-worksheet .english-paper2-passage--body-only {
	padding-top: 0;
}

.lj-card--custom-worksheet .english-paper2-passage__header {
	margin-bottom: 12px;
}

.lj-card--custom-worksheet .english-paper2-passage__number {
	display: inline-block;
	padding: 4px 12px;
	background: #3b82f6;
	color: white;
	border-radius: 6px;
	font-weight: 600;
	font-size: calc(14px + 2.5px);
}

.lj-card--custom-worksheet .english-paper2-passage__title {
	margin: 0 0 12px 0;
	font-size: calc(1.25rem + 2.5px);
	font-weight: 600;
	color: #0f172a;
}

.lj-card--custom-worksheet .english-paper2-passage__description {
	font-style: italic;
	color: #64748b;
	margin: 12px 0;
	font-size: calc(15px + 2.5px);
}

.lj-card--custom-worksheet .english-paper2-passage__text {
	line-height: 1.8;
	color: #1e293b;
}

/* Paragraph numbering (match resource generation style) */
.lj-card--custom-worksheet .arg-passage-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lj-card--custom-worksheet .arg-passage-paragraph {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.lj-card--custom-worksheet .arg-passage-paragraph-number {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	color: #64748b;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: calc(1rem + 2.5px);
	margin-top: 0.125rem;
}

.lj-card--custom-worksheet .arg-passage-paragraph p {
	flex: 1;
	margin: 0;
	line-height: 1.8;
	color: #334155;
	font-size: calc(1rem + 2.5px);
	text-align: justify;
}

.lj-card--custom-worksheet .english-paper2-passage__word-count {
	font-size: calc(0.875rem + 2.5px);
	color: #6b7280;
	margin-top: 1rem;
	font-style: italic;
}

@media (max-width: 900px) {
	.lj-card--custom-worksheet .worksheet-split-row {
		grid-template-columns: 1fr;
	}
}

/* Question card styling (matches English Paper 2) */
.lj-card--custom-worksheet .english-paper2-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.lj-card--custom-worksheet .english-paper2-question:last-child {
	margin-bottom: 0;
}

.lj-card--custom-worksheet .english-paper2-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.lj-card--custom-worksheet .english-paper2-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: calc(16px + 2.5px);
}

.lj-card--custom-worksheet .english-paper2-question__marks {
	font-size: calc(14px + 2.5px);
	color: #64748b;
	font-weight: 600;
}

.lj-card--custom-worksheet .english-paper2-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

.lj-card--custom-worksheet-reading .worksheet-question__instruction-label {
	margin: 0 0 10px 0;
	padding: 10px 12px;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 8px;
	color: #3730a3;
	font-size: calc(0.9rem + 2.5px);
	font-weight: 500;
}

.lj-card--custom-worksheet-grammar .worksheet-question__instruction-label {
	margin: 0 0 10px 0;
	padding: 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid #e2e8f0;
	border-radius: 0;
	color: #000000;
	font-size: calc(0.9rem + 2.5px);
	font-weight: 500;
	padding-bottom: 0.6rem;
	margin-bottom: 0.8rem;
}

.lj-card--custom-worksheet .english-paper2-question__marking-guide {
	margin: 0 0 12px 0;
	padding: 12px;
	background: #f1f5f9;
	border-radius: 6px;
	border-left: 4px solid #3b82f6;
	font-size: calc(14px + 2.5px);
	color: #475569;
}

.lj-card--custom-worksheet .english-paper2-question__marking-guide ul {
	margin: 0.5rem 0 0 1rem;
	padding-left: 0;
}

.lj-card--custom-worksheet .english-paper2-question__marking-guide li {
	margin-bottom: 0.25rem;
}

.lj-card--custom-worksheet .english-paper2-question__answer {
	width: 100%;
	padding: 12px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: calc(15px + 2.5px);
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.lj-card--custom-worksheet .english-paper2-question__answer:focus {
	outline: none;
	border-color: #3b82f6;
}

.lj-card--custom-worksheet .english-paper2-question__dialogue-list {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	color: #1e293b;
	line-height: 1.6;
}

/* MCQ choice styling */
.lj-card--custom-worksheet .worksheet-mcq__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.lj-card--custom-worksheet .worksheet-mcq__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.lj-card--custom-worksheet .worksheet-mcq__choice:hover {
	border-color: #94a3b8;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.lj-card--custom-worksheet .worksheet-mcq__choice--selected {
	border-color: #3b82f6;
	background: #eff6ff;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.lj-card--custom-worksheet .worksheet-mcq__choice input[type="radio"] {
	margin: 0;
}

.lj-card--custom-worksheet .worksheet-mcq__choice-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: #f1f5f9;
	font-weight: 600;
	color: #0f172a;
	font-size: calc(0.85rem + 2.5px);
	flex-shrink: 0;
}

.lj-card--custom-worksheet .worksheet-mcq__choice--selected .worksheet-mcq__choice-letter {
	background: #3b82f6;
	color: white;
}

.lj-card--custom-worksheet .worksheet-mcq__choice-text {
	color: #1e293b;
	font-size: calc(0.95rem + 2.5px);
}

/* Identify error word card */
.lj-card--custom-worksheet .worksheet-identify-error__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.lj-card--custom-worksheet .worksheet-identify-error__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-card--custom-worksheet .worksheet-identify-error__label {
	font-size: calc(0.85rem + 2.5px);
	font-weight: 600;
	color: #334155;
}

.lj-card--custom-worksheet .worksheet-identify-error__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.lj-card--custom-worksheet .worksheet-identify-error__col-header {
	font-size: calc(0.85rem + 2.5px);
	font-weight: 600;
	color: #334155;
}

.lj-card--custom-worksheet .worksheet-identify-error__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-card--custom-worksheet .worksheet-identify-error__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.lj-card--custom-worksheet .worksheet-identify-error__inline-input {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: calc(0.95rem + 2.5px);
	line-height: 1.4;
	box-sizing: border-box;
}

.lj-card--custom-worksheet .worksheet-identify-error__inline-input:focus {
	outline: none;
	border-color: #3b82f6;
}

.lj-card--custom-worksheet .worksheet-identify-error__inline-input:disabled {
	background: #f8fafc;
	color: #64748b;
	cursor: not-allowed;
}

.lj-card--custom-worksheet .worksheet-identify-error__prompt {
	padding: 0.75rem 1rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.lj-card--custom-worksheet .worksheet-fill-blank__wrapper {
	margin-top: 0.25rem;
}

.lj-card--custom-worksheet .worksheet-fill-blank__inline-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.lj-card--custom-worksheet .worksheet-fill-blank__input {
	min-width: 120px;
	max-width: 180px;
	padding: 6px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: calc(0.92rem + 2.5px);
	line-height: 1.3;
	font-family: inherit;
	background: #ffffff;
}

.lj-card--custom-worksheet .worksheet-fill-blank__input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.lj-card--custom-worksheet .worksheet-fill-blank__input:disabled {
	background: #f8fafc;
	color: #64748b;
	cursor: not-allowed;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer {
	background: #ffffff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__header {
	margin-bottom: 0.75rem;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__eyebrow {
	margin: 0 0 0.2rem 0;
	font-size: calc(0.72rem + 2.5px);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1d4ed8;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__title {
	margin: 0;
	font-size: calc(1rem + 2.5px);
	font-weight: 600;
	color: #0f172a;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__subtitle {
	margin: 0.35rem 0 0 0;
	font-size: calc(0.86rem + 2.5px);
	color: #475569;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__section h5 {
	margin: 0 0 0.35rem 0;
	font-size: calc(0.8rem + 2.5px);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #1e40af;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__section p {
	margin: 0 0 0.5rem 0;
	font-size: calc(0.9rem + 2.5px);
	color: #1e293b;
	line-height: 1.55;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__section ul {
	margin: 0 0 0.65rem 1rem;
	padding-left: 0;
}

.lj-card--custom-worksheet-writing .worksheet-writing-explainer__section li {
	font-size: calc(0.9rem + 2.5px);
	color: #1e293b;
	line-height: 1.5;
	margin-bottom: 0.25rem;
}

/* Grammar skill guide: match resource-generation SkillGuideCard; Akami beside example */
.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar {
	background: #ffffff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 1rem 1.1rem;
	box-shadow: 0 10px 30px rgba(30, 58, 138, 0.06);
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__header {
	margin-bottom: 1rem;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__eyebrow {
	margin: 0 0 0.2rem 0;
	font-size: calc(0.72rem + 2.5px);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1d4ed8;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__title {
	margin: 0;
	font-size: calc(1rem + 2.5px);
	font-weight: 600;
	color: #0f172a;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__subtitle {
	margin: 0.35rem 0 0 0;
	font-size: calc(0.86rem + 2.5px);
	color: #475569;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__section h5 {
	margin: 0 0 0.35rem 0;
	font-size: calc(0.8rem + 2.5px);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #1e40af;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__section p {
	margin: 0 0 0.5rem 0;
	font-size: calc(0.9rem + 2.5px);
	color: #1e293b;
	line-height: 1.55;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__section ul {
	margin: 0 0 0.65rem 1rem;
	padding-left: 0;
}

.lj-card--custom-worksheet-grammar .worksheet-writing-explainer--grammar .worksheet-writing-explainer__section li {
	font-size: calc(0.9rem + 2.5px);
	color: #1e293b;
	line-height: 1.5;
	margin-bottom: 0.25rem;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
	align-items: start;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__column--guide {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__column--aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__example-section {
	margin-bottom: 0;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__example-with-avatar {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.85rem;
	margin-top: 0.15rem;
	min-width: 0;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__example-avatar.lj-marking-modal-akami-host {
	margin-bottom: 0;
	animation: none;
	justify-content: flex-start;
	align-items: flex-start;
	flex-shrink: 0;
	padding-top: 0.15rem;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__example-avatar .lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 56px;
	height: 56px;
	max-width: 56px;
	max-height: 56px;
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__example-avatar .lj-marking-modal-akami-emoji {
	font-size: calc(2.5rem + 2.5px);
}

.lj-card--custom-worksheet-grammar .worksheet-skill-guide__example-box {
	flex: 1;
	min-width: 0;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	background-color: #ffffff;
	border: 1px solid #dbeafe;
	font-size: calc(0.94rem + 2.5px);
	line-height: 1.65;
	color: #0f172a;
	white-space: pre-line;
}
/* ─── Speaking Card Shell ─────────────────────────────────────────────────── */

.lj-card--speaking {
	font-family: inherit;
	color: var(--lj-text, #1a202c);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lj-card--speaking-empty {
	padding: 2rem;
	text-align: center;
	color: var(--lj-text-muted, #718096);
}

/* ─── Shared Buttons ─────────────────────────────────────────────────────── */

.speaking-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
	padding: 0.5rem 1rem;
	transition: background 0.15s, opacity 0.15s;
	white-space: nowrap;
}

.speaking-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.speaking-btn--sm {
	font-size: 0.8rem;
	padding: 0.375rem 0.75rem;
}

.speaking-btn--lg {
	font-size: 1rem;
	padding: 0.75rem 1.75rem;
}

.speaking-btn--primary {
	background: #4f46e5;
	color: #fff;
}
.speaking-btn--primary:hover:not(:disabled) {
	background: #4338ca;
}

.speaking-btn--secondary {
	background: #10b981;
	color: #fff;
}
.speaking-btn--secondary:hover:not(:disabled) {
	background: #059669;
}

.speaking-btn--ghost {
	background: transparent;
	color: #4f46e5;
	border: 1px solid #c7d2fe;
}
.speaking-btn--ghost:hover:not(:disabled) {
	background: #eef2ff;
}

.speaking-btn--danger {
	background: #ef4444;
	color: #fff;
}
.speaking-btn--danger:hover:not(:disabled) {
	background: #dc2626;
}

.speaking-btn--tts {
	background: #f0f9ff;
	color: #0284c7;
	border: 1px solid #bae6fd;
	padding: 0.375rem 0.75rem;
	font-size: 0.8rem;
}
.speaking-btn--tts:hover:not(:disabled) {
	background: #e0f2fe;
}
.speaking-btn--tts-active {
	background: #e0f2fe;
	color: #0369a1;
}

/* ─── Intro Screen ───────────────────────────────────────────────────────── */

.speaking-intro {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.speaking-intro__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	width: min(100%, 40rem);
	margin-inline: auto;
	box-sizing: border-box;
}

.speaking-intro__badge {
	display: inline-flex;
	align-items: center;
	background: #eef2ff;
	color: #4f46e5;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	align-self: center;
}

.speaking-intro__title {
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
	width: 100%;
	text-align: center;
}

.speaking-intro__scenario {
	color: var(--lj-text-muted, #718096);
	font-size: 0.95rem;
	margin: 0;
	width: 100%;
	text-align: center;
}

.speaking-intro__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7.5rem;
	height: 7.5rem;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	background: #e2e8f0;
	border: 2px solid #cbd5e1;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.speaking-intro__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.speaking-intro__meta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	align-content: center;
	width: min(100%, 40rem);
	margin-inline: auto;
	box-sizing: border-box;
}

.speaking-intro__meta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 0.625rem;
	padding: 0.75rem 1.25rem;
	min-width: 6rem;
	text-align: center;
}

.speaking-intro__meta-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9ca3af;
	margin-bottom: 0.25rem;
}

.speaking-intro__meta-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1a202c;
}

.speaking-intro__instructions {
	background: #fefce8;
	border: 1px solid #fde68a;
	border-radius: 0.625rem;
	padding: 1rem 1.25rem;
	align-self: stretch;
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
	box-sizing: border-box;
}

/* Beat theme / reset rules that left-align headings and paragraphs */
.lj-card--speaking .speaking-intro__header,
.lj-card--speaking .speaking-intro__header .speaking-intro__title,
.lj-card--speaking .speaking-intro__header .speaking-intro__scenario {
	text-align: center;
}

.speaking-intro__instructions h4 {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: #92400e;
}

.speaking-intro__instructions ol {
	margin: 0;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.speaking-intro__instructions li {
	font-size: 0.875rem;
	color: #78350f;
}

/* ─── Conversation chat (vendor left / student right) ───────────────────── */

.speaking-chat {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.25rem 1.5rem 1.5rem;
	max-width: 52rem;
	margin: 0 auto;
}

.speaking-chat--stacked {
	gap: 0;
	padding-bottom: 0.5rem;
}

.speaking-chat__turn {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid #e5e7eb;
}

.speaking-chat__turn:last-of-type {
	border-bottom: none;
	padding-bottom: 0.25rem;
}

.speaking-chat__turn-meta {
	font-size: 0.7rem;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.25rem 0.15rem;
}

.speaking-chat-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 1.5rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	background: #fafafa;
}

.speaking-chat-footer__error {
	margin: 0;
	font-size: 0.85rem;
	color: #b91c1c;
	text-align: center;
}

.speaking-chat-footer__status {
	margin: 0;
	font-size: 0.9rem;
	color: #475569;
	text-align: center;
}

.speaking-chat__row {
	display: flex;
	align-items: flex-end;
	gap: 0.625rem;
}

.speaking-chat__row--vendor {
	justify-content: flex-start;
}

.speaking-chat__row--student {
	justify-content: flex-end;
}

.speaking-chat__avatar {
	width: 6.1875rem;
	height: 6.1875rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 2.35rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.speaking-chat__avatar--vendor {
	background: linear-gradient(145deg, #6366f1, #4f46e5);
	color: #fff;
}

.speaking-chat__avatar--student {
	background: #e5e7eb;
	color: #374151;
	border: 2px solid #fff;
}

.speaking-chat__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.speaking-chat__stack {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	max-width: min(100%, 36rem);
}

.speaking-chat__stack--student {
	align-items: flex-end;
}

.speaking-chat__speaker-name {
	font-size: 0.7rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0 0.15rem;
}

.speaking-chat__speaker-name--student {
	text-align: right;
}

.speaking-chat__bubble {
	position: relative;
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	overflow: visible;
}

/* Vendor bubble: tail toward avatar (bottom-left) */
.speaking-chat__bubble--vendor {
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 0.25rem 1rem 1rem 1rem;
}

.speaking-chat__bubble--vendor::before {
	content: '';
	position: absolute;
	left: -6px;
	bottom: 10px;
	width: 12px;
	height: 12px;
	background: #f3f4f6;
	border-left: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	transform: rotate(45deg);
	border-radius: 0 0 0 2px;
}

/* Student bubble: tail toward avatar (bottom-right) */
.speaking-chat__bubble--student {
	background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
	border: 1px solid #c7d2fe;
	border-radius: 1rem 1rem 0.25rem 1rem;
}

.speaking-chat__bubble--student::after {
	content: '';
	position: absolute;
	right: -6px;
	bottom: 10px;
	width: 12px;
	height: 12px;
	background: #e0e7ff;
	border-right: 1px solid #c7d2fe;
	border-bottom: 1px solid #c7d2fe;
	transform: rotate(-45deg);
	border-radius: 0 0 2px 0;
}

.speaking-chat__bubble-text {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.6;
	color: #111827;
}

.speaking-chat__bubble-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.speaking-chat__bubble-footer .speaking-btn--tts {
	font-size: 0.96rem;
	padding: 0.45rem 0.9rem;
}

.speaking-btn__tts-error {
	display: inline-flex;
	align-items: center;
	margin-left: 0.6rem;
	padding: 0.25rem 0.6rem;
	font-size: 0.78rem;
	color: #b45309;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: 0.4rem;
	line-height: 1.2;
	cursor: pointer;
	font-family: inherit;
}
.speaking-btn__tts-error:hover {
	background: #fde68a;
}
.speaking-btn__tts-error:focus-visible {
	outline: 2px solid #f59e0b;
	outline-offset: 1px;
}

/* Analysis row: Akami / chatbot avatar left + speech bubble (same geometry as vendor) */
.speaking-chat__row--analysis {
	justify-content: flex-start;
	margin-top: 0.5rem;
}

.speaking-chat__stack--analysis {
	align-items: flex-start;
}

.speaking-chat__speaker-name--analysis {
	text-align: left;
}

/* Akami: no circular frame — flat mascot like the chat widget */
.speaking-chat__avatar--analysis {
	width: auto;
	height: auto;
	min-width: 0;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: visible;
	padding: 0;
}

.speaking-chat__analysis-akami.lj-marking-modal-akami-host {
	margin-bottom: 0;
	animation: none;
	width: auto;
	height: auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.speaking-chat__avatar--analysis .lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 4.5rem;
	height: 4.5rem;
	max-width: 5rem;
	max-height: 5rem;
	object-fit: contain;
}

.speaking-chat__avatar--analysis .lj-marking-modal-akami-emoji {
	font-size: 2.75rem;
	line-height: 1;
}

/* Akami analysis bubble: vendor-style tail toward avatar (bottom-left) */
.speaking-chat__bubble--analysis {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0.25rem 1rem 1rem 1rem;
}

.speaking-chat__bubble--analysis::before {
	content: '';
	position: absolute;
	left: -6px;
	bottom: 10px;
	width: 12px;
	height: 12px;
	background: #f8fafc;
	border-left: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	transform: rotate(45deg);
	border-radius: 0 0 0 2px;
}

/* ─── Recording State ────────────────────────────────────────────────────── */

.speaking-record {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.speaking-record--in-bubble {
	width: 100%;
	align-items: center;
	padding: 1rem;
	box-sizing: border-box;
}

/* Single style used for both recording and transcribing */
.speaking-record--capturing {
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid #c7d2fe;
}

.speaking-record__wave {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 4px;
	height: 2.5rem;
}

.speaking-record__wave span {
	display: block;
	width: 4px;
	background: #6366f1;
	border-radius: 2px;
	animation: speaking-wave 0.9s ease-in-out infinite alternate;
}

.speaking-record__wave span:nth-child(1) { height: 0.5rem;   animation-delay: 0s; }
.speaking-record__wave span:nth-child(2) { height: 1.375rem; animation-delay: 0.12s; }
.speaking-record__wave span:nth-child(3) { height: 2rem;     animation-delay: 0.24s; }
.speaking-record__wave span:nth-child(4) { height: 1.375rem; animation-delay: 0.36s; }
.speaking-record__wave span:nth-child(5) { height: 0.5rem;   animation-delay: 0.48s; }

@keyframes speaking-wave {
	from { transform: scaleY(0.35); }
	to   { transform: scaleY(1); }
}

.speaking-record__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.speaking-record__processing {
	margin: 0;
	font-size: 0.8rem;
	color: #6366f1;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ─── Reply Area ─────────────────────────────────────────────────────────── */

.speaking-reply {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.speaking-reply--in-bubble {
	width: 100%;
	align-items: stretch;
}

.speaking-reply--idle {
	align-items: flex-start;
}

.speaking-reply__cta {
	font-size: 0.875rem;
	color: #6b7280;
	margin: 0;
}

.speaking-reply__idle-actions {
	display: flex;
	justify-content: center;
	width: 100%;
}

.speaking-reply__transcript-readonly {
	width: 100%;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	padding: 0.625rem 0.75rem;
	font-size: 1.2rem;
	font-family: inherit;
	line-height: 1.6;
	color: #111827;
	background: #fff;
	box-sizing: border-box;
}

.speaking-reply__actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.speaking-reply__error {
	font-size: 0.8rem;
	color: #dc2626;
	margin: 0;
}

/* ─── Temporary Metrics Preview (conversation testing) ───────────────────── */

.speaking-metrics-preview {
	width: 100%;
	margin-top: 0.625rem;
	background: #f8fafc;
	border: 1px solid #dbeafe;
	border-radius: 0.75rem;
	padding: 0.75rem;
}

/* Nested inside Akami speech bubble — no second card chrome */
.speaking-metrics-preview--in-bubble {
	margin-top: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	width: 100%;
	max-width: min(100%, 36rem);
}

/* Simplified speech-bubble review */
.speaking-metrics-preview__feedback--primary-row {
	margin: 0 0 0.9rem 0;
	padding: 0.65rem 0.75rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.625rem;
}

.speaking-metrics-preview__feedback--primary-row strong {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.78rem;
	color: #1e293b;
}

.speaking-metrics-preview__feedback--primary-row p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.45;
	color: #475569;
}

.speaking-metrics-preview__score-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.55rem;
}

.speaking-metrics-preview__score-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.25rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.625rem;
}

.speaking-metrics-preview__score-label {
	font-size: 1.2rem;
	font-weight: 600;
	color: #334155;
}

.speaking-metrics-preview__score-ring {
	--score-pct: 0%;
	--ring-accent: #6366f1;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--ring-accent) var(--score-pct), #e2e8f0 0);
	position: relative;
}

/* Ring accent by letter grade (A = strongest green → F = low) */
.speaking-metrics-preview__score-ring--a {
	--ring-accent: #22c55e;
}
.speaking-metrics-preview__score-ring--b {
	--ring-accent: #84cc16;
}
.speaking-metrics-preview__score-ring--c {
	--ring-accent: #eab308;
}
.speaking-metrics-preview__score-ring--d {
	--ring-accent: #f97316;
}
.speaking-metrics-preview__score-ring--e {
	--ring-accent: #ef4444;
}
.speaking-metrics-preview__score-ring--f {
	--ring-accent: #64748b;
}

.speaking-metrics-preview__score-ring::before {
	content: '';
	position: absolute;
	inset: 3px;
	background: #fff;
	border-radius: 9999px;
}

.speaking-metrics-preview__score-letter {
	position: relative;
	z-index: 1;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1f2937;
}

.speaking-metrics-preview__score-letter--a {
	color: #15803d;
}
.speaking-metrics-preview__score-letter--b {
	color: #4d7c0f;
}
.speaking-metrics-preview__score-letter--c {
	color: #a16207;
}
.speaking-metrics-preview__score-letter--d {
	color: #c2410c;
}
.speaking-metrics-preview__score-letter--e {
	color: #b91c1c;
}
.speaking-metrics-preview__score-letter--f {
	color: #475569;
}

.speaking-metrics-preview__note {
	margin: 0;
	font-size: 0.72rem;
	color: #94a3b8;
	font-style: italic;
}

/* ── Scoring loader ── */
.speaking-metrics-preview__scoring {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	color: #64748b;
	padding: 0.5rem 0 0.25rem;
}

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

.speaking-metrics-preview__scoring-spinner {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid #e2e8f0;
	border-top-color: #6366f1;
	border-radius: 50%;
	animation: speaking-spin 0.75s linear infinite;
	flex-shrink: 0;
}

/* ── Rubric rows inside preview ── */
.speaking-metrics-preview__rubric {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-top: 0.5rem;
	border-top: 1px solid #f1f5f9;
	margin-top: 0.375rem;
}

.speaking-metrics-preview__rubric-row {
	display: grid;
	grid-template-columns: 4.5rem 1fr 2.25rem;
	align-items: center;
	gap: 0.5rem;
}

.speaking-metrics-preview__rubric-label {
	font-size: 0.75rem;
	color: #334155;
	font-weight: 500;
}

.speaking-metrics-preview__rubric-track {
	height: 0.45rem;
	background: #e2e8f0;
	border-radius: 9999px;
	overflow: hidden;
}

.speaking-metrics-preview__rubric-fill {
	height: 100%;
	background: #6366f1;
	border-radius: 9999px;
	transition: width 0.5s ease;
}

.speaking-metrics-preview__rubric-score {
	font-size: 0.72rem;
	color: #334155;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.speaking-metrics-preview__feedback {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: #475569;
	padding-top: 0.375rem;
	border-top: 1px solid #f1f5f9;
}

@media (max-width: 720px) {
	.speaking-chat__avatar--analysis .lj-marking-modal-akami-emoji {
		font-size: 2.25rem;
	}

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

/* ─── Review Screen ──────────────────────────────────────────────────────── */

.speaking-review {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
}

.speaking-review__header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.speaking-review__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.speaking-review__subtitle {
	font-size: 0.875rem;
	color: #6b7280;
	margin: 0;
}

.speaking-review__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.speaking-review__item {
	border: 1px solid #e5e7eb;
	border-radius: 0.625rem;
	padding: 1rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.speaking-review__item--answered {
	border-color: #a7f3d0;
	background: #f0fdf4;
}

.speaking-review__item--empty {
	border-color: #fde68a;
	background: #fffbeb;
}

.speaking-review__item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.speaking-review__q-number {
	font-size: 0.8rem;
	font-weight: 700;
	color: #374151;
	background: #e5e7eb;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

.speaking-review__marks {
	font-size: 0.75rem;
	color: #9ca3af;
}

.speaking-review__prompt {
	font-size: 0.9rem;
	color: #374151;
	margin: 0;
	font-style: italic;
}

.speaking-review__answer {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.speaking-review__transcript {
	font-size: 0.9rem;
	color: #111827;
	margin: 0;
	background: #fff;
	border: 1px solid #d1fae5;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
}

.speaking-review__empty {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: #92400e;
}

.speaking-review__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.5rem;
	gap: 0.75rem;
}

.speaking-review__error {
	font-size: 0.85rem;
	color: #dc2626;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	margin: 0;
}

.speaking-review__hint {
	font-size: 0.8rem;
	color: #9ca3af;
	text-align: center;
	margin: 0;
}

/* ─── Submitted Screen ───────────────────────────────────────────────────── */

.speaking-submitted {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2.5rem 2rem;
	text-align: center;
}

.speaking-submitted__icon {
	width: 3rem;
	height: 3rem;
	background: #d1fae5;
	color: #059669;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
}

.speaking-submitted__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	color: #065f46;
}

.speaking-submitted__body {
	font-size: 0.925rem;
	color: #374151;
	margin: 0;
	max-width: 28rem;
}

.speaking-submitted__report-hint {
	font-size: 0.8rem;
	color: #6b7280;
	margin: 0;
}

/* Brief placeholder while navigating to Marking Report chapter */
.speaking-submitted.speaking-submitted--redirecting {
	padding: 2rem 1.5rem;
	align-items: center;
	text-align: center;
}

.speaking-submitted.speaking-submitted--redirecting .speaking-submitted__body {
	max-width: none;
}
/* English Paper 2 Marking Report Styles */

.igcse-esl-paper1-marking-report , .igcse-efl-paper1-marking-report , .igcse-efl-paper2-marking-report {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Loading State */
.igcse-esl-paper1-marking-report__loading , .igcse-efl-paper1-marking-report__loading , .igcse-efl-paper2-marking-report__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.igcse-esl-paper1-marking-report__spinner , .igcse-efl-paper1-marking-report__spinner , .igcse-efl-paper2-marking-report__spinner {
	margin-bottom: 20px;
}

.igcse-esl-paper1-marking-report__spinner .spinner , .igcse-efl-paper1-marking-report__spinner .spinner , .igcse-efl-paper2-marking-report__spinner .spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e2e8f0;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Small inline spinner for buttons */
.spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

.igcse-esl-paper1-marking-report__loading h3 , .igcse-efl-paper1-marking-report__loading h3 , .igcse-efl-paper2-marking-report__loading h3 {
	margin: 0 0 8px 0;
	color: #1e293b;
	font-size: 20px;
}

.igcse-esl-paper1-marking-report__loading p , .igcse-efl-paper1-marking-report__loading p , .igcse-efl-paper2-marking-report__loading p {
	margin: 0;
	color: #64748b;
	font-size: 15px;
}

/* Pending Review State */
.igcse-esl-paper1-marking-report__pending-review , .igcse-efl-paper1-marking-report__pending-review , .igcse-efl-paper2-marking-report__pending-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.igcse-esl-paper1-marking-report__pending-review .pending-review-icon , .igcse-efl-paper1-marking-report__pending-review .pending-review-icon , .igcse-efl-paper2-marking-report__pending-review .pending-review-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.igcse-esl-paper1-marking-report__pending-review h3 , .igcse-efl-paper1-marking-report__pending-review h3 , .igcse-efl-paper2-marking-report__pending-review h3 {
	margin: 0 0 8px 0;
	color: #78350f;
	font-size: 20px;
	font-weight: 600;
}

.igcse-esl-paper1-marking-report__pending-review p , .igcse-efl-paper1-marking-report__pending-review p , .igcse-efl-paper2-marking-report__pending-review p {
	margin: 0;
	color: #92400e;
	font-size: 15px;
	max-width: 500px;
}

/* Error State */
.igcse-esl-paper1-marking-report__error , .igcse-efl-paper1-marking-report__error , .igcse-efl-paper2-marking-report__error {
	padding: 40px 20px;
	text-align: center;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 12px;
}

.igcse-esl-paper1-marking-report__error h3 , .igcse-efl-paper1-marking-report__error h3 , .igcse-efl-paper2-marking-report__error h3 {
	margin: 0 0 12px 0;
	color: #991b1b;
	font-size: 20px;
}

.igcse-esl-paper1-marking-report__error p , .igcse-efl-paper1-marking-report__error p , .igcse-efl-paper2-marking-report__error p {
	margin: 0;
	color: #991b1b;
	font-size: 15px;
}

/* Retry Button */
.igcse-esl-paper1-marking-report .retry-button , .igcse-efl-paper1-marking-report .retry-button , .igcse-efl-paper2-marking-report .retry-button {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.igcse-esl-paper1-marking-report .retry-button:hover:not(:disabled) , .igcse-efl-paper1-marking-report .retry-button:hover:not(:disabled) {
	background: #5a67d8;
}

.igcse-esl-paper1-marking-report .retry-button:disabled , .igcse-efl-paper1-marking-report .retry-button:disabled , .igcse-efl-paper2-marking-report .retry-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Marks Section Styles - also for igcse-paper1 (EFL Text B breakdown), igcse-efl-paper2 (Directed Writing) */
.igcse-paper1-marks-section,
.igcse-esl-paper1-marks-section , .igcse-efl-paper1-marks-section , .igcse-efl-paper2-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.igcse-paper1-marks-section h3,
.igcse-esl-paper1-marks-section h3 , .igcse-efl-paper1-marks-section h3 , .igcse-efl-paper2-marks-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.igcse-paper1-total-marks,
.igcse-esl-paper1-total-marks , .igcse-efl-paper1-total-marks , .igcse-efl-paper2-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	margin-bottom: 24px;
	color: white;
}

.igcse-paper1-score-display,
.igcse-esl-paper1-score-display , .igcse-efl-paper1-score-display , .igcse-efl-paper2-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.igcse-paper1-score-label,
.igcse-esl-paper1-score-label , .igcse-efl-paper1-score-label , .igcse-efl-paper2-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
}

.igcse-paper1-score-value,
.igcse-esl-paper1-score-value , .igcse-efl-paper1-score-value , .igcse-efl-paper2-score-value {
	font-size: 32px;
	font-weight: 700;
}

.igcse-paper1-performance-badge,
.igcse-esl-paper1-performance-badge , .igcse-efl-paper1-performance-badge , .igcse-efl-paper2-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.igcse-paper1-badge-icon,
.igcse-esl-paper1-badge-icon , .igcse-efl-paper1-badge-icon , .igcse-efl-paper2-badge-icon {
	font-size: 24px;
}

.igcse-paper1-badge-text,
.igcse-esl-paper1-badge-text , .igcse-efl-paper1-badge-text , .igcse-efl-paper2-badge-text {
	font-size: 16px;
	font-weight: 600;
}

.igcse-esl-paper1-performance-badge.excellent , .igcse-efl-paper1-performance-badge.excellent , .igcse-efl-paper2-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.2);
}

.igcse-esl-paper1-performance-badge.good , .igcse-efl-paper1-performance-badge.good , .igcse-efl-paper2-performance-badge.good {
	background: rgba(59, 130, 246, 0.2);
}

.igcse-efl-paper2-q1a-feedback {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.igcse-efl-paper2-q1a-feedback__summary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
}

.igcse-efl-paper2-q1a-feedback__summary-card {
	padding: 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #ffffff;
}

.igcse-efl-paper2-q1a-feedback__summary-card strong,
.igcse-efl-paper2-q1a-feedback__skills > strong {
	display: block;
	margin-bottom: 0.55rem;
	color: #0f172a;
}

.igcse-efl-paper2-q1a-feedback__summary-card ul {
	margin: 0;
	padding-left: 1.1rem;
	color: #475569;
	line-height: 1.55;
}

.igcse-efl-paper2-q1a-feedback__skills {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.igcse-efl-paper2-q1a-feedback__skill {
	display: grid;
	grid-template-columns: 124px minmax(0, 1fr);
	gap: 0.95rem;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-left-width: 4px;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
}

.igcse-efl-paper2-q1a-feedback__skill.level-5,
.igcse-efl-paper2-q1a-feedback__skill.level-4 {
	border-left-color: #22c55e;
}

.igcse-efl-paper2-q1a-feedback__skill.level-3,
.igcse-efl-paper2-q1a-feedback__skill.level-2 {
	border-left-color: #f59e0b;
}

.igcse-efl-paper2-q1a-feedback__skill.level-1,
.igcse-efl-paper2-q1a-feedback__skill.level-0 {
	border-left-color: #ef4444;
}

.igcse-efl-paper2-q1a-feedback__skill-header {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	align-items: flex-start;
}

.igcse-efl-paper2-q1a-feedback__skill-header > span {
	color: #0f172a;
	font-weight: 700;
}

.igcse-efl-paper2-q1a-feedback__skill-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 1.15rem;
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid #e2e8f0;
}

.igcse-efl-paper2-q1a-feedback__skill-column {
	min-width: 0;
}

.igcse-efl-paper2-q1a-feedback__skill-column-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #64748b;
	margin-bottom: 0.35rem;
}

.igcse-efl-paper2-q1a-feedback__skill-column-body {
	color: #475569;
	font-size: 0.9rem;
	line-height: 1.55;
}

.igcse-efl-paper2-q1a-feedback__level-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 0.7rem;
	--q1a-level-color: #ef4444;
	--q1a-level-track: #e2e8f0;
	color: #475569;
	font-weight: 800;
	text-align: center;
	align-self: stretch;
}

.igcse-efl-paper2-q1a-feedback__skill.level-5 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-efl-paper2-q1a-feedback__skill.level-4 .igcse-efl-paper2-q1a-feedback__level-badge {
	--q1a-level-color: #22c55e;
}

.igcse-efl-paper2-q1a-feedback__skill.level-3 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-efl-paper2-q1a-feedback__skill.level-2 .igcse-efl-paper2-q1a-feedback__level-badge {
	--q1a-level-color: #f59e0b;
}

.igcse-efl-paper2-q1a-feedback__level-ring {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.12rem;
	width: 86px;
	height: 86px;
	aspect-ratio: 1 / 1;
	flex: 0 0 86px;
	padding: 0.45rem;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, #ffffff 0 58%, transparent 59%),
		conic-gradient(var(--q1a-level-color) var(--q1a-level-progress, 0%), var(--q1a-level-track) 0);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.igcse-efl-paper2-q1a-feedback__level-ring span {
	font-size: 1.65rem;
	line-height: 1;
}

.igcse-efl-paper2-q1a-feedback__level-ring small {
	max-width: 58px;
	font-size: 0.62rem;
	line-height: 1.1;
}

.igcse-efl-paper2-q1a-feedback__level-ring em {
	font-size: 0.58rem;
	font-style: normal;
	line-height: 1;
	color: #64748b;
}

.igcse-efl-paper2-q1a-feedback__skill-body {
	padding: 0.9rem 1rem 0.9rem 0;
}

.igcse-efl-paper2-q1a-feedback__skill p {
	margin: 0.35rem 0 0;
	color: #475569;
	line-height: 1.55;
}

/* Q1(a) / Q1(b) overall feedback: chatbot column + text column (shared; not tied to reportPrefix) */
.igcse-q1-feedback-chat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem 1.25rem;
	align-items: start;
	padding: 1rem;
	border-radius: 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	margin-top: 0.5rem;
}

.igcse-q1-feedback-chat__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	min-width: 5.5rem;
	max-width: 7.5rem;
}

.igcse-q1-feedback-chat__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.igcse-q1-feedback-chat__avatar-img {
	width: 4.375rem;
	height: auto;
	max-height: 4.375rem;
	object-fit: contain;
	display: block;
}

.igcse-q1-feedback-chat__avatar-fallback {
	font-size: 2.1875rem;
	line-height: 1;
}

.igcse-q1-feedback-chat__name {
	font-size: 0.8rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	word-wrap: break-word;
}

.igcse-q1-feedback-chat__body p {
	margin: 0;
	color: #475569;
	line-height: 1.6;
	font-size: 0.95rem;
}

@media (max-width: 720px) {
	.igcse-efl-paper2-q1a-feedback__summary-grid {
		grid-template-columns: 1fr;
	}

	.igcse-efl-paper2-q1a-feedback__skill {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.igcse-efl-paper2-q1a-feedback__skill-columns {
		grid-template-columns: 1fr;
	}

	.igcse-q1-feedback-chat {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.igcse-q1-feedback-chat__body {
		width: 100%;
		text-align: left;
	}
}

.igcse-esl-paper1-performance-badge.satisfactory , .igcse-efl-paper1-performance-badge.satisfactory , .igcse-efl-paper2-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.2);
}

.igcse-paper1-performance-badge.needs-improvement,
.igcse-esl-paper1-performance-badge.needs-improvement , .igcse-efl-paper1-performance-badge.needs-improvement , .igcse-efl-paper2-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.2);
}

.igcse-paper1-marks-breakdown,
.igcse-esl-paper1-marks-breakdown , .igcse-efl-paper1-marks-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.igcse-paper1-mark-category,
.igcse-esl-paper1-mark-category , .igcse-efl-paper1-mark-category {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	border-left: 4px solid #667eea;
}

.igcse-paper1-mark-category h4,
.igcse-esl-paper1-mark-category h4 , .igcse-efl-paper1-mark-category h4 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 600;
	color: #2d3748;
}

.igcse-paper1-mark-display,
.igcse-esl-paper1-mark-display , .igcse-efl-paper1-mark-display {
	margin-top: 8px;
}

.igcse-paper1-mark-score,
.igcse-esl-paper1-mark-score , .igcse-efl-paper1-mark-score {
	font-size: 24px;
	font-weight: 700;
	color: #667eea;
}

/* igcse-paper1 progress bars (EFL Text B breakdown) */
.igcse-paper1-progress-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

.igcse-paper1-progress-row label {
	font-size: 14px;
	font-weight: 500;
	color: #64748b;
	min-width: 60px;
}

.igcse-paper1-progress-bar {
	flex: 1;
	height: 12px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
}

.igcse-paper1-progress-fill {
	height: 100%;
	border-radius: 6px;
	transition: width 0.3s ease;
}

.igcse-paper1-progress-language {
	background: linear-gradient(90deg, #667eea, #764ba2);
}

.igcse-paper1-progress-content {
	background: linear-gradient(90deg, #667eea, #764ba2);
}

.igcse-paper1-progress-text {
	font-size: 14px;
	font-weight: 600;
	color: #475569;
	min-width: 36px;
}

.igcse-paper1-ai-score-comparison {
	font-size: 0.75rem;
	opacity: 0.9;
	margin-left: 0.5rem;
}

/* Header */
.igcse-esl-paper1-marking-report__header , .igcse-efl-paper1-marking-report__header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 24px;
	border-radius: 12px;
	color: white;
}

.igcse-esl-paper1-marking-report__header h2 , .igcse-efl-paper1-marking-report__header h2 {
	margin: 0 0 16px 0;
	font-size: 24px;
	font-weight: 700;
}

/* Score Card */
.igcse-esl-paper1-marking-report__score-card , .igcse-efl-paper1-marking-report__score-card , .igcse-efl-paper2-marking-report__score-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.igcse-esl-paper1-marking-report__score-main , .igcse-efl-paper1-marking-report__score-main {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.igcse-esl-paper1-marking-report__score-value , .igcse-efl-paper1-marking-report__score-value {
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
}

.igcse-esl-paper1-marking-report__score-divider , .igcse-efl-paper1-marking-report__score-divider {
	font-size: 28px;
	opacity: 0.7;
}

.igcse-esl-paper1-marking-report__score-total , .igcse-efl-paper1-marking-report__score-total {
	font-size: 28px;
	opacity: 0.9;
}

.igcse-esl-paper1-marking-report__score-percentage , .igcse-efl-paper1-marking-report__score-percentage , .igcse-efl-paper2-marking-report__score-percentage {
	margin-left: auto;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 20px;
	font-weight: 700;
}

/* Overall Feedback */
.igcse-esl-paper1-marking-report__overall-feedback , .igcse-efl-paper1-marking-report__overall-feedback {
	padding: 20px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 12px;
}

.igcse-esl-paper1-marking-report__overall-feedback h3 , .igcse-efl-paper1-marking-report__overall-feedback h3 {
	margin: 0 0 12px 0;
	color: #0c4a6e;
	font-size: 18px;
}

.igcse-esl-paper1-marking-report__overall-feedback p , .igcse-efl-paper1-marking-report__overall-feedback p {
	margin: 0;
	color: #0369a1;
	line-height: 1.6;
}

/* Questions Section */
.igcse-esl-paper1-marking-report__questions , .igcse-efl-paper1-marking-report__questions , .igcse-efl-paper2-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.igcse-esl-paper1-marking-report__questions > h3 , .igcse-efl-paper1-marking-report__questions > h3 , .igcse-efl-paper2-marking-report__questions > h3 {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* Individual Question Result */
.igcse-esl-paper1-question-result , .igcse-efl-paper1-question-result , .igcse-efl-paper2-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.igcse-esl-paper1-question-result:hover , .igcse-efl-paper1-question-result:hover , .igcse-efl-paper2-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.igcse-esl-paper1-question-result__header , .igcse-efl-paper1-question-result__header , .igcse-efl-paper2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

/* Question Number Pill Badge */
.question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.igcse-esl-paper1-question-result__score , .igcse-efl-paper1-question-result__score , .igcse-efl-paper2-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.igcse-esl-paper1-question-result__score.full , .igcse-efl-paper1-question-result__score.full , .igcse-efl-paper2-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.igcse-esl-paper1-question-result__score.partial , .igcse-efl-paper1-question-result__score.partial , .igcse-efl-paper2-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.igcse-esl-paper1-question-result__score.zero , .igcse-efl-paper1-question-result__score.zero , .igcse-efl-paper2-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

/* Question Text */
.igcse-esl-paper1-question-result__question , .igcse-efl-paper1-question-result__question , .igcse-efl-paper2-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.igcse-esl-paper1-question-result__question strong , .igcse-efl-paper1-question-result__question strong , .igcse-efl-paper2-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

/* Answer */
.igcse-esl-paper1-question-result__answer , .igcse-efl-paper1-question-result__answer , .igcse-efl-paper2-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.igcse-esl-paper1-question-result__answer strong , .igcse-efl-paper1-question-result__answer strong , .igcse-efl-paper2-question-result__answer strong {
	color: #1e293b;
}

.igcse-esl-paper1-question-result__answer-text , .igcse-efl-paper1-question-result__answer-text , .igcse-efl-paper2-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
}

.igcse-esl-paper1-question-result__answer-text em , .igcse-efl-paper1-question-result__answer-text em , .igcse-efl-paper2-question-result__answer-text em {
	color: #94a3b8;
}

/* Marking Criteria */
.igcse-esl-paper1-question-result__criteria , .igcse-efl-paper1-question-result__criteria , .igcse-efl-paper2-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.igcse-esl-paper1-question-result__criteria strong , .igcse-efl-paper1-question-result__criteria strong , .igcse-efl-paper2-question-result__criteria strong {
	color: #1e293b;
}

.igcse-esl-paper1-criteria-list , .igcse-efl-paper1-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.igcse-esl-paper1-criteria-item , .igcse-efl-paper1-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.igcse-esl-paper1-criteria-item.awarded , .igcse-efl-paper1-criteria-item.awarded , .igcse-efl-paper2-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.igcse-esl-paper1-criteria-item.not-awarded , .igcse-efl-paper1-criteria-item.not-awarded , .igcse-efl-paper2-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.igcse-esl-paper1-criteria-icon , .igcse-efl-paper1-criteria-icon , .igcse-efl-paper2-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.igcse-esl-paper1-criteria-item.awarded .igcse-esl-paper1-criteria-icon , .igcse-efl-paper1-criteria-item.awarded .igcse-esl-paper1-criteria-icon {
	background: #22c55e;
	color: white;
}

.igcse-esl-paper1-criteria-item.not-awarded .igcse-esl-paper1-criteria-icon , .igcse-efl-paper1-criteria-item.not-awarded .igcse-esl-paper1-criteria-icon {
	background: #ef4444;
	color: white;
}

.igcse-esl-paper1-criteria-content , .igcse-efl-paper1-criteria-content , .igcse-efl-paper2-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.igcse-esl-paper1-criteria-text , .igcse-efl-paper1-criteria-text , .igcse-efl-paper2-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.igcse-esl-paper1-criteria-comment , .igcse-efl-paper1-criteria-comment , .igcse-efl-paper2-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

/* Hidden criterion styling for students */
.igcse-esl-paper1-criteria-item.hidden-criterion , .igcse-efl-paper1-criteria-item.hidden-criterion , .igcse-efl-paper2-criteria-item.hidden-criterion {
	opacity: 0.6;
}

.igcse-esl-paper1-criteria-hidden , .igcse-efl-paper1-criteria-hidden , .igcse-efl-paper2-criteria-hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

/* Question Feedback */
.igcse-esl-paper1-question-result__feedback , .igcse-efl-paper1-question-result__feedback , .igcse-efl-paper2-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
}

.igcse-esl-paper1-question-result__feedback strong , .igcse-efl-paper1-question-result__feedback strong , .igcse-efl-paper2-question-result__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.igcse-esl-paper1-question-result__feedback p , .igcse-efl-paper1-question-result__feedback p , .igcse-efl-paper2-question-result__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px) {
	.igcse-esl-paper1-marking-report__score-card , .igcse-efl-paper1-marking-report__score-card , .igcse-efl-paper2-marking-report__score-card {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.igcse-esl-paper1-marking-report__score-percentage , .igcse-efl-paper1-marking-report__score-percentage , .igcse-efl-paper2-marking-report__score-percentage {
		margin-left: 0;
	}
	
	.igcse-esl-paper1-question-result__header , .igcse-efl-paper1-question-result__header , .igcse-efl-paper2-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ============================================
   CORRECTIONS FEATURE STYLES
   ============================================ */

/* Corrections Overview (Progress Tracker) */
.corrections-overview {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 1.5rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.corrections-overview h4 {
	margin: 0 0 1rem 0;
	font-size: 18px;
	font-weight: 600;
}

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

.progress-stat {
	background: rgba(255, 255, 255, 0.2);
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	backdrop-filter: blur(10px);
}

.progress-stat.need-help {
	background: rgba(239, 68, 68, 0.3);
}

.progress-stat.not-started {
	background: rgba(148, 163, 184, 0.3);
}

.stat-value {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	display: block;
	font-size: 13px;
	opacity: 0.9;
	font-weight: 500;
}

.deadline-info {
	text-align: center;
	font-size: 14px;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	font-weight: 500;
}

/* Question Correction Section */
.question-correction-section {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: #f8fafc;
	border-left: 4px solid #667eea;
	border-radius: 8px;
}

.correction-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.correction-header h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.deadline-badge {
	background: #dbeafe;
	color: #1e40af;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

.deadline-passed-badge {
	background: #fee2e2;
	color: #991b1b;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

/* Status Indicators */
.need-help-status {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.need-help-status .status-icon {
	font-size: 24px;
	line-height: 1;
}

.need-help-status .status-content {
	flex: 1;
}

.need-help-status strong {
	display: block;
	color: #92400e;
	margin-bottom: 0.25rem;
	font-size: 15px;
}

.need-help-status p {
	margin: 0;
	color: #78350f;
	font-size: 14px;
}

.attempts-info {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: #e0e7ff;
	border-radius: 6px;
}

.attempts-badge {
	font-weight: 600;
	color: #3730a3;
	font-size: 14px;
}

.attempts-remaining {
	font-size: 13px;
	color: #4338ca;
}

/* Previous Attempts */
.previous-attempts {
	margin-bottom: 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
}

.previous-attempts summary {
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 14px;
	user-select: none;
}

.previous-attempts summary:hover {
	background: #e2e8f0;
}

.attempts-list {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.attempt-item {
	padding: 1rem;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.attempt-date {
	font-size: 12px;
	color: #64748b;
}

.attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
}

/* Correction Form */
.correction-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.correction-textarea {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
}

.correction-textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.correction-textarea::placeholder {
	color: #94a3b8;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.word-count {
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}

.word-count.insufficient {
	color: #dc2626;
}

.button-group {
	display: flex;
	gap: 0.75rem;
}

.btn-need-help,
.btn-submit-correction {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-need-help {
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.btn-need-help:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.btn-submit-correction {
	background: #667eea;
	color: white;
}

.btn-submit-correction:hover:not(:disabled) {
	background: #5a67d8;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-need-help:disabled,
.btn-submit-correction:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Responsive */
@media (max-width: 640px) {
	.progress-grid {
		grid-template-columns: 1fr;
	}
	
	.correction-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.form-footer {
		flex-direction: column;
		align-items: stretch;
	}
	
	.button-group {
		flex-direction: column;
	}
	
	.btn-need-help,
	.btn-submit-correction {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   TEACHER CORRECTIONS VIEW
   ============================================ */

.teacher-corrections-view {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border: 2px solid #3b82f6;
	border-radius: 8px;
}

.teacher-corrections-view .correction-header.teacher-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #bfdbfe;
}

.teacher-corrections-view .correction-header.teacher-header h5 {
	margin: 0;
	color: #1e40af;
	font-size: 16px;
	font-weight: 600;
}

.need-help-badge-teacher {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 1px solid #ef4444;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #991b1b;
	animation: pulse 2s ease-in-out infinite;
}

.correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: white;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

.correction-status-summary .status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-status-summary .status-item .label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.correction-status-summary .status-item .value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.correction-status-summary .status-item .value.status-in_progress {
	color: #f59e0b;
}

.correction-status-summary .status-item .value.status-need_help {
	color: #ef4444;
}

.correction-status-summary .status-item .value.status-not_started {
	color: #64748b;
}

.teacher-attempts-list {
	margin-top: 1rem;
}

.teacher-attempts-list h6 {
	margin: 0 0 0.75rem 0;
	color: #475569;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 0.75rem;
	transition: all 0.2s;
}

.teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.teacher-attempt-item .attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.teacher-attempt-item .attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.teacher-attempt-item .attempt-date {
	font-size: 12px;
	color: #64748b;
}

.teacher-attempt-item .attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.no-attempts {
	padding: 1.5rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	text-align: center;
}

.no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
	.teacher-corrections-view {
		padding: 1rem;
	}
	
	.correction-status-summary {
		grid-template-columns: 1fr;
	}
	
	.teacher-attempt-item {
		padding: 0.875rem;
	}
}


/* AI Feedback Panel */
.ai-feedback-panel {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
	border: 1px solid #bae6fd;
	border-radius: 8px;
}

.ai-feedback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #bae6fd;
}

.ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: white;
	border: 1px solid #38bdf8;
	border-radius: 6px;
	color: #0284c7;
	font-size: 13px;
	font-weight: 600;
}

.quality-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.quality-badge.quality-excellent {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.quality-badge.quality-good {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

.quality-badge.quality-partial {
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fcd34d;
}

.quality-badge.quality-minimal {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.feedback-section {
	margin-bottom: 1rem;
}

.feedback-section:last-child {
	margin-bottom: 0;
}

.feedback-section h6 {
	margin: 0 0 0.5rem 0;
	color: #0c4a6e;
	font-size: 14px;
	font-weight: 600;
}

.feedback-section.improvements h6 {
	color: #15803d;
}

.feedback-section.still-missing h6 {
	color: #b45309;
}

.feedback-section.next-steps h6 {
	color: #7c3aed;
}

.feedback-section ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: disc;
}

.feedback-section li {
	margin-bottom: 0.375rem;
	color: #334155;
	font-size: 14px;
	line-height: 1.6;
}

.feedback-section.main-feedback p {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-wrap;
}

.feedback-section.next-steps p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
	line-height: 1.6;
	font-style: italic;
	padding-left: 1rem;
	border-left: 3px solid #c4b5fd;
}

/* AI Feedback Loading */
.ai-feedback-loading {
	margin-top: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #fde68a;
	border-top-color: #f59e0b;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.ai-feedback-loading span {
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
}

/* Make previous attempts expanded by default when they have feedback */
.previous-attempts[open] summary {
	margin-bottom: 1rem;
}

/* Model Answer Section */
.model-answer-section {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #86efac;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.model-answer-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #86efac;
}

.model-answer-icon {
	font-size: 1.5rem;
}

.model-answer-header h5 {
	margin: 0;
	color: #15803d;
	font-size: 1.25rem;
	font-weight: 700;
}

.model-answer-intro {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: white;
	border-left: 4px solid #22c55e;
	border-radius: 6px;
}

.model-answer-intro p {
	margin: 0;
	color: #166534;
	font-size: 0.938rem;
	font-weight: 500;
}

.model-answer-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.model-answer-text,
.model-answer-points,
.model-answer-explanation {
	padding: 1.25rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.model-answer-text strong,
.model-answer-points strong,
.model-answer-explanation strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #15803d;
	font-size: 1rem;
	font-weight: 600;
}

.model-answer-text p,
.model-answer-explanation p {
	margin: 0;
	color: #334155;
	font-size: 0.938rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.model-answer-points ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: none;
}

.model-answer-points li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.5rem;
	color: #475569;
	font-size: 0.938rem;
	line-height: 1.6;
}

.model-answer-points li:before {
	content: "→";
	position: absolute;
	left: 0;
	color: #22c55e;
	font-weight: 700;
}

.model-answer-points li:last-child {
	margin-bottom: 0;
}

/* Criteria Hint */
.igcse-esl-paper1-criteria-hint , .igcse-efl-paper1-criteria-hint , .igcse-efl-paper2-criteria-hint {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-left: 3px solid #94a3b8;
	border-radius: 4px;
}

.igcse-esl-paper1-criteria-hint p , .igcse-efl-paper1-criteria-hint p , .igcse-efl-paper2-criteria-hint p {
	margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
	.model-answer-section {
		padding: 1rem;
	}
	
	.model-answer-text,
	.model-answer-points,
	.model-answer-explanation {
		padding: 1rem;
	}
}

/* Teacher View - Hide CardShell border and header */
.teacher-view-no-shell {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: transparent !important;
}

.teacher-view-no-shell .lj-card__header {
	display: none !important;
}

.teacher-view-no-shell .lj-card__body {
	padding: 0 !important;
}

/* Correction Criteria Section */
.correction-criteria-section {
	margin-top: 1rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.correction-criteria-section strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.correction-criteria-section .igcse-esl-paper1-criteria-list , .igcse-efl-paper1-criteria-list {
	margin: 0;
}

.criteria-hint-correction {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: #fef3c7;
	border-radius: 6px;
	border: 1px solid #fbbf24;
}

/* Teacher AI Feedback in Attempts */
.teacher-ai-feedback {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.teacher-feedback-text {
	margin-top: 0.75rem;
}

.teacher-feedback-text strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.teacher-feedback-text p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Correction Improvements Indicator */
.correction-improvements-indicator {
	padding: 0.75rem;
	background: #d1fae5;
	border-radius: 8px;
	border: 1px solid #10b981;
}

.correction-improvements-indicator strong {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #065f46;
}

.correction-improvements-indicator .igcse-esl-paper1-criteria-list , .igcse-efl-paper1-criteria-list {
	margin-top: 0.5rem;
}

.correction-improvements-indicator .igcse-esl-paper1-criteria-item , .igcse-efl-paper1-criteria-item {
	background: white;
	border-color: #10b981;
}

/* Via Correction Pill Badge */
.via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

/* Successful Correction Display (Teacher View) */
.successful-correction-display {
	margin-top: 1rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border: 1px solid #86efac;
	border-radius: 8px;
	overflow: hidden;
}

.successful-correction-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(34, 197, 94, 0.1);
	border-bottom: 1px solid #86efac;
}

.successful-correction-header .success-icon {
	font-size: 1.125rem;
}

.successful-correction-header strong {
	flex: 1;
	font-size: 0.875rem;
	color: #166534;
}

.successful-correction-header .correction-date {
	font-size: 0.75rem;
	color: #15803d;
}

.successful-correction-content {
	padding: 1rem;
}

.successful-correction-content .correction-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #1e293b;
	white-space: pre-wrap;
}

/* Correction Header Info */
.correction-header-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Criteria Completion Badge */
.criteria-completion-badge {
	background: #e0f2fe;
	color: #0369a1;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid #7dd3fc;
}

/* Student Correction Button Section */
.question-correction-button-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

.btn-open-correction-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-open-correction-modal:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attempts-badge-inline {
	padding: 0.5rem 1rem;
	background: white;
	color: #0369a1;
	border: 1px solid #7dd3fc;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Teacher Help Notification (Student View - shown in marking report) */
/* Correction Completed Banner */
.correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.correction-completed-icon {
	font-size: 2rem;
	line-height: 1;
}

.correction-completed-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-completed-content strong {
	font-size: 1rem;
	color: #166534;
}

.correction-completed-content span {
	font-size: 0.875rem;
	color: #15803d;
}

.teacher-help-notification {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.teacher-help-notification__icon {
	font-size: 1.5rem;
	line-height: 1;
	animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.teacher-help-notification__title {
	font-size: 1rem;
	font-weight: 700;
	color: #065f46;
}

.teacher-help-notification__content {
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.teacher-help-notification__message {
	font-size: 0.9375rem;
	color: #047857;
	line-height: 1.6;
	margin: 0 0 0.75rem 0;
}

.teacher-help-notification__hint {
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	color: #78350f;
	margin-bottom: 0.75rem;
}

.teacher-help-notification__hint strong {
	color: #b45309;
}

.teacher-help-notification__reset {
	font-size: 0.875rem;
	color: #0369a1;
	background: rgba(224, 242, 254, 0.7);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	margin: 0;
	font-weight: 500;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta {
	margin-left: 2.25rem;
	background: #10b981;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta:hover {
	background: #059669;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Question Action Buttons */
.header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.question-edit-btn,
.question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.question-corrections-btn .help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.question-corrections-btn .attempts-badge {
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* ============================================
   Language Assessment Section (Phase 5)
   ============================================ */

.igcse-esl-paper1-language-feedback , .igcse-efl-paper1-language-feedback {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 12px;
	border-left: 4px solid #0284c7;
}

.igcse-esl-paper1-language-feedback h3 , .igcse-efl-paper1-language-feedback h3 {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	color: #0369a1;
}

.igcse-esl-paper1-language-feedback__content , .igcse-efl-paper1-language-feedback__content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.igcse-esl-paper1-language-feedback__score , .igcse-efl-paper1-language-feedback__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.igcse-esl-paper1-language-feedback__score .label , .igcse-efl-paper1-language-feedback__score .label {
	color: #64748b;
}

.igcse-esl-paper1-language-feedback__score .value , .igcse-efl-paper1-language-feedback__score .value {
	font-size: 1.25rem;
	color: #0284c7;
}

.igcse-esl-paper1-language-feedback__text , .igcse-efl-paper1-language-feedback__text {
	color: #334155;
	line-height: 1.6;
}

/* Language row in marks breakdown */
.igcse-esl-paper1-mark-category--language , .igcse-efl-paper1-mark-category--language {
	border-top: 2px dashed #e2e8f0;
	padding-top: 1rem;
}

.igcse-esl-paper1-mark-category--language h4 , .igcse-efl-paper1-mark-category--language h4 {
	color: #0284c7;
}


/* Responsive adjustments */
@media (max-width: 640px) {
	.header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.5rem;
	}
	
	.question-edit-btn,
	.question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
	
	.igcse-esl-paper1-language-feedback , .igcse-efl-paper1-language-feedback {
		padding: 1rem;
	}
	
	.igcse-esl-paper1-language-feedback__score .value , .igcse-efl-paper1-language-feedback__score .value {
		font-size: 1.125rem;
	}
}

/* English Paper 2 Question 14 card */
.narrative-question14-card__answers {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.narrative-question14-card__answer-row {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.5rem 0.75rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.narrative-question14-card__answer-label {
	font-weight: 600;
	color: #1e293b;
	min-width: 72px;
}

.narrative-question14-card__answer-value {
	color: #334155;
}

.narrative-question14-card__phrases {
	margin-top: 0.5rem;
	padding-left: 1.1rem;
	color: #1f2937;
}

.narrative-question14-card__phrases li {
	line-height: 1.4;
}

/* ESL Exercise 5/6 container (SW-style layout) */
.esl-essay-report {
	width: 100%;
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* IGCSE EFL Paper 2 Marking Report – own naming, same style as situational writing (image 2) */
.igcse-efl-paper2-marking-report {
	width: 100%;
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.igcse-efl-paper2-marking-report__marks-section {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

/* Blue banner for total score (like situational writing) */
.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__total-marks {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__total-marks .score-label {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.9;
	color: white;
}

.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__total-marks .score-value {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: white;
}

/* Teacher view: ensure white text when inside teacher-card-wrapper (parent may set dark color) */
.teacher-card-wrapper .igcse-efl-paper2-marking-report__total-marks .score-label,
.teacher-card-wrapper .igcse-efl-paper2-marking-report__total-marks .score-value {
	color: white;
}

/* Semi-transparent white badge on blue banner */
.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.2);
	padding: 16px 24px;
	border-radius: 12px;
	backdrop-filter: blur(10px);
	color: white;
}

.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge .badge-icon {
	font-size: 2rem;
}

.igcse-efl-paper2-marking-report__marks-section .igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge .badge-text {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Two-column grid for Language | Content */
.igcse-efl-paper2-marking-report__marks-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.igcse-efl-paper2-marking-report__mark-category {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	background: #f9fafb;
}

.igcse-efl-paper2-marking-report__mark-category h4 {
	margin: 0 0 12px 0;
	font-size: 1.125rem;
	color: #1f2937;
}

.igcse-efl-paper2-marking-report__mark-display {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.igcse-efl-paper2-marking-report__mark-score {
	font-size: 1.5rem;
	font-weight: 700;
	color: #3b82f6;
}

/* Vertical layout: label above, progress bar + % on same row */
.igcse-efl-paper2-marking-report__sub-elements {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 16px;
}

.igcse-efl-paper2-marking-report__sub-element {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 6px;
}

.igcse-efl-paper2-marking-report__sub-element label {
	grid-column: 1 / -1;
	font-size: 0.875rem;
	color: #64748b;
	font-weight: 500;
}

.igcse-efl-paper2-marking-report__sub-element small {
	grid-column: 1 / -1;
	color: #64748b;
	font-size: 0.78rem;
	line-height: 1.35;
}

.igcse-efl-paper2-marking-report__sub-element .igcse-efl-paper2-marking-report__progress-bar {
	grid-column: 1;
}

.igcse-efl-paper2-marking-report__sub-element .progress-text {
	grid-column: 2;
	align-self: center;
}

.igcse-efl-paper2-marking-report__progress-bar {
	min-width: 0;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.igcse-efl-paper2-marking-report__progress-bar .progress-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.3s ease;
}

.igcse-efl-paper2-marking-report__progress-grammar {
	background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.igcse-efl-paper2-marking-report__progress-vocabulary {
	background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.igcse-efl-paper2-marking-report__progress-sentence {
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.igcse-efl-paper2-marking-report__progress-mechanics {
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.igcse-efl-paper2-marking-report__progress-tone {
	background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.igcse-efl-paper2-marking-report__progress-purpose {
	background: linear-gradient(90deg, #10b981, #34d399);
}

.igcse-efl-paper2-marking-report__progress-relevance {
	background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.igcse-efl-paper2-marking-report__progress-development {
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.igcse-efl-paper2-marking-report__progress-r1,
.igcse-efl-paper2-marking-report__progress-w1 {
	background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.igcse-efl-paper2-marking-report__progress-r2,
.igcse-efl-paper2-marking-report__progress-w2 {
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.igcse-efl-paper2-marking-report__progress-r3,
.igcse-efl-paper2-marking-report__progress-w3 {
	background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.igcse-efl-paper2-marking-report__progress-r5,
.igcse-efl-paper2-marking-report__progress-w4 {
	background: linear-gradient(90deg, #10b981, #34d399);
}

.igcse-efl-paper2-marking-report__progress-w5 {
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.igcse-efl-paper2-marking-report__sub-element .progress-text {
	font-size: 0.875rem;
	color: #1f2937;
	font-weight: 600;
}

.igcse-efl-paper2-marking-report__band-descriptor {
	background: #f1f5f9;
	border-left: 4px solid #3b82f6;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.5;
}

.igcse-efl-paper2-marking-report__band-descriptor strong {
	color: #1f2937;
}

/* Override badge colors when inside blue banner - keep white */
.igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge.excellent,
.igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge.good,
.igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge.satisfactory,
.igcse-efl-paper2-marking-report__total-marks .igcse-efl-paper2-marking-report__performance-badge.needs-improvement {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

.igcse-efl-paper2-marking-report__detailed-breakdown {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.igcse-efl-paper2-marking-report__questions {
	margin-bottom: 0;
}

.igcse-efl-paper2-marking-report__questions h3 {
	margin: 0 0 16px 0;
	font-size: 1.25rem;
	color: #1e293b;
	font-weight: 700;
}

/* EFL Text B Q2(a): two-column content points + language feedback */
.igcse-efl-paper1-textb-2a-split,
.igcse-esl-paper1-textb-2a-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
	align-items: start;
}

.igcse-efl-paper1-textb-2a-split__heading,
.igcse-esl-paper1-textb-2a-split__heading {
	margin: 0 0 0.75rem 0;
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
}

.igcse-efl-paper1-textb-2a-split__note,
.igcse-esl-paper1-textb-2a-split__note {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.5;
}

.igcse-efl-paper1-textb-2a-split__points,
.igcse-esl-paper1-textb-2a-split__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.igcse-efl-paper1-textb-2a-split__point,
.igcse-esl-paper1-textb-2a-split__point {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid #fecaca;
	border-radius: 10px;
	background: #fef2f2;
	font-size: 0.875rem;
	line-height: 1.45;
}

.igcse-efl-paper1-textb-2a-split__point--met,
.igcse-esl-paper1-textb-2a-split__point--met {
	color: #0f172a;
	border-color: #bbf7d0;
	background: #f0fdf4;
}

.igcse-efl-paper1-textb-2a-split__point--unmet,
.igcse-esl-paper1-textb-2a-split__point--unmet {
	color: #b91c1c;
}

.igcse-efl-paper1-textb-2a-split__point-icon,
.igcse-esl-paper1-textb-2a-split__point-icon {
	flex: 0 0 1.25rem;
	font-weight: 800;
	font-size: 0.9rem;
	line-height: 1.45;
}

.igcse-efl-paper1-textb-2a-split__point--met .igcse-efl-paper1-textb-2a-split__point-icon,
.igcse-esl-paper1-textb-2a-split__point--met .igcse-esl-paper1-textb-2a-split__point-icon {
	color: #15803d;
}

.igcse-efl-paper1-textb-2a-split__point--unmet .igcse-efl-paper1-textb-2a-split__point-icon,
.igcse-esl-paper1-textb-2a-split__point--unmet .igcse-esl-paper1-textb-2a-split__point-icon {
	color: #b91c1c;
}

.igcse-efl-paper1-textb-2a-split__point-text,
.igcse-esl-paper1-textb-2a-split__point-text {
	flex: 1;
	min-width: 0;
}

.igcse-efl-paper1-textb-2a-split__language-body,
.igcse-esl-paper1-textb-2a-split__language-body {
	color: #334155;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.igcse-efl-paper1-textb-2a-split__language-stack,
.igcse-esl-paper1-textb-2a-split__language-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: stretch;
}

.igcse-efl-paper1-textb-2a-split__language-badges-grid,
.igcse-esl-paper1-textb-2a-split__language-badges-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.85rem 0.65rem;
	align-items: start;
	justify-items: center;
}

.igcse-efl-paper1-textb-2a-split__language-badge-item,
.igcse-esl-paper1-textb-2a-split__language-badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.45rem;
	min-width: 0;
	width: 100%;
}

.igcse-efl-paper1-textb-2a-split__language-badge-item .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item .igcse-efl-paper2-q1a-feedback__level-badge {
	align-self: center;
	width: 100%;
	max-width: 124px;
}

.igcse-efl-paper1-textb-2a-split__language-badge-item.level-5 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-efl-paper1-textb-2a-split__language-badge-item.level-4 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item.level-5 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item.level-4 .igcse-efl-paper2-q1a-feedback__level-badge {
	--q1a-level-color: #22c55e;
}

.igcse-efl-paper1-textb-2a-split__language-badge-item.level-3 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-efl-paper1-textb-2a-split__language-badge-item.level-2 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item.level-3 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item.level-2 .igcse-efl-paper2-q1a-feedback__level-badge {
	--q1a-level-color: #f59e0b;
}

.igcse-efl-paper1-textb-2a-split__language-badge-item.level-1 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-efl-paper1-textb-2a-split__language-badge-item.level-0 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item.level-1 .igcse-efl-paper2-q1a-feedback__level-badge,
.igcse-esl-paper1-textb-2a-split__language-badge-item.level-0 .igcse-efl-paper2-q1a-feedback__level-badge {
	--q1a-level-color: #ef4444;
}

.igcse-efl-paper1-textb-2a-split__language-badge-title,
.igcse-esl-paper1-textb-2a-split__language-badge-title {
	font-size: 0.72rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
	max-width: 11rem;
}

.igcse-efl-paper1-textb-2a-split__language-feedback,
.igcse-esl-paper1-textb-2a-split__language-feedback {
	padding: 0;
	border: none;
	background: transparent;
}

.igcse-efl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-efl-paper1-textb-2a-split__language-body,
.igcse-efl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-esl-paper1-textb-2a-split__language-body,
.igcse-esl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-efl-paper1-textb-2a-split__language-body,
.igcse-esl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-esl-paper1-textb-2a-split__language-body {
	white-space: normal;
}

.igcse-efl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-efl-paper1-textb-2a-split__language-body p,
.igcse-efl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-esl-paper1-textb-2a-split__language-body p,
.igcse-esl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-efl-paper1-textb-2a-split__language-body p,
.igcse-esl-paper1-textb-2a-split__language-feedback .igcse-q1-feedback-chat__body.igcse-esl-paper1-textb-2a-split__language-body p {
	font-size: 16px;
}

.igcse-efl-paper1-textb-2a-split__language-scores,
.igcse-esl-paper1-textb-2a-split__language-scores {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.55rem;
}

.igcse-efl-paper1-textb-2a-split__score-card,
.igcse-esl-paper1-textb-2a-split__score-card {
	padding: 0.65rem 0.75rem;
	border: 1px solid #dbeafe;
	border-radius: 10px;
	background: #f8fbff;
}

.igcse-efl-paper1-textb-2a-split__score-title,
.igcse-esl-paper1-textb-2a-split__score-title {
	font-size: 0.78rem;
	font-weight: 700;
	color: #334155;
	margin-bottom: 0.2rem;
}

.igcse-efl-paper1-textb-2a-split__score-value,
.igcse-esl-paper1-textb-2a-split__score-value {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: #0f172a;
}

.igcse-efl-paper1-textb-2a-split__score-icon,
.igcse-esl-paper1-textb-2a-split__score-icon {
	font-size: 0.95rem;
	line-height: 1;
}

.igcse-efl-paper1-textb-2a-split__score-label,
.igcse-esl-paper1-textb-2a-split__score-label {
	font-size: 0.75rem;
	color: #64748b;
	margin-top: 0.15rem;
}

.igcse-efl-paper1-textb-2a-split__empty,
.igcse-esl-paper1-textb-2a-split__empty {
	color: #94a3b8;
	font-style: normal;
}

@media (max-width: 768px) {
	.igcse-efl-paper1-textb-2a-split,
	.igcse-esl-paper1-textb-2a-split {
		grid-template-columns: 1fr;
	}

	.igcse-efl-paper1-textb-2a-split__points,
	.igcse-esl-paper1-textb-2a-split__points {
		grid-template-columns: 1fr;
	}

	.igcse-efl-paper1-textb-2a-split__language-badges-grid,
	.igcse-esl-paper1-textb-2a-split__language-badges-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* IGCSE EFL/ESL Paper 1 Marking Progress Modal - same styling as English Paper 2 */
.igcse-eflesl-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: igcseEfleslModalFadeIn 0.3s ease;
}

@keyframes igcseEfleslModalFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.igcse-eflesl-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: igcseEfleslModalSlideUp 0.4s ease;
}

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

.igcse-eflesl-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.igcse-eflesl-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.igcse-eflesl-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.igcse-eflesl-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.igcse-eflesl-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.igcse-eflesl-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

/* Phase indicators */
.igcse-eflesl-marking-modal__phases {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}

.igcse-eflesl-marking-modal__phases .phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.igcse-eflesl-marking-modal__phases .phase.active {
	opacity: 1;
}

.igcse-eflesl-marking-modal__phases .phase.complete {
	opacity: 1;
}

.igcse-eflesl-marking-modal__phases .phase-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.igcse-eflesl-marking-modal__phases .phase.active .phase-icon {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: igcseEfleslModalPulse 2s ease-in-out infinite;
}

.igcse-eflesl-marking-modal__phases .phase.complete .phase-icon {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes igcseEfleslModalPulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.igcse-eflesl-marking-modal__phases .phase-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

.igcse-eflesl-marking-modal__hint {
	font-size: 0.875rem;
	color: #475569;
	margin: 2rem 0 0 0;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.igcse-eflesl-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.5rem;
}

.igcse-eflesl-marking-modal__spinner .lj-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: igcseEfleslModalSpin 1s linear infinite;
}

@keyframes igcseEfleslModalSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.igcse-eflesl-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}
	
	.igcse-eflesl-marking-modal__title {
		font-size: 1.25rem;
	}
	
	.igcse-eflesl-marking-modal__phases .phase-icon {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}
	
	.igcse-eflesl-marking-modal__phases .phase-label {
		font-size: 0.7rem;
	}
}
/* Modal Overlay */
.adjustment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

/* Modal Container */
.adjustment-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Modal Header */
.adjustment-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adjustment-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.modal-close-btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background-color: #f1f5f9;
}

/* Modal Body */
.adjustment-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Context Section */
.adjustment-context {
	margin-bottom: 20px;
}

.context-section {
	margin-bottom: 16px;
}

.context-section h4 {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text,
.student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.student-answer {
	border-left-color: #3b82f6;
}

/* AI Assessment Box */
.ai-assessment-box {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}

.ai-assessment-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 12px;
}

.ai-icon {
	font-size: 18px;
}

.ai-assessment-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-score {
	font-size: 14px;
	color: #78350f;
}

.ai-feedback-preview {
	font-size: 13px;
	color: #78350f;
	line-height: 1.5;
}

/* Divider */
.adjustment-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 20px 0;
}

/* Adjustment Fields */
.adjustment-field {
	margin-bottom: 20px;
}

.adjustment-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

/* Current Score Display */
.current-score-display {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-display-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.score-display-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
	display: flex;
	align-items: center;
	gap: 8px;
}

.score-change-indicator {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
	background: #f0f9ff;
	color: #1e40af;
	border: 1px solid #3b82f6;
}

/* Criteria Header with Hint */
.criteria-header-with-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criteria-hint:hover {
	background-color: #f1f5f9;
}

.hint-icon {
	font-size: 14px;
}

.hint-text {
	font-weight: 500;
}

/* Criteria List */
.criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.criterion-item {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.criterion-label {
	cursor: pointer;
	user-select: none;
}

.criterion-item:last-child {
	margin-bottom: 0;
}

.criterion-item.awarded {
	background-color: #f0fdf4;
	border-left: 3px solid #22c55e;
}

.criterion-item.not-awarded {
	background-color: #fef2f2;
	border-left: 3px solid #ef4444;
}

.criterion-item:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #334155;
	user-select: none;
	transition: opacity 0.1s ease;
}

.criterion-label:active {
	opacity: 0.8;
}

.criterion-label input[type="checkbox"] {
	margin-top: 2px;
	cursor: pointer;
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
	flex-shrink: 0;
}

.criterion-icon {
	font-size: 16px;
	font-weight: bold;
	flex-shrink: 0;
	width: 20px;
}

.criterion-item.awarded .criterion-icon {
	color: #16a34a;
}

.criterion-item.not-awarded .criterion-icon {
	color: #dc2626;
}

.criterion-text {
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.criterion-comment {
	margin: 6px 0 0 46px;
	font-size: 13px;
	color: #64748b;
	font-style: italic;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Feedback Input */
.feedback-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.feedback-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modal Footer */
.adjustment-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.btn-secondary,
.btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

.btn-secondary {
	background: white;
	border: 1px solid #cbd5e1;
	color: #334155;
}

.btn-secondary:hover {
	background-color: #f8fafc;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

.btn-primary:hover {
	background: #2563eb;
}

/* Responsive */
@media (max-width: 768px) {
	.adjustment-modal {
		max-width: 95%;
		max-height: 95vh;
	}

	.adjustment-modal-body {
		padding: 16px;
	}

	.adjustment-modal-header {
		padding: 16px;
	}
}
/* Modal Overlay */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	backdrop-filter: blur(2px);
}

/* Modal Content */
.modal-content {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Modal Header */
.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.modal-title {
	flex: 1;
}

.modal-title h3 {
	margin: 0 0 0.5rem 0;
	color: #1e40af;
	font-size: 1.25rem;
	font-weight: 700;
}

.modal-title .question-preview {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.modal-close-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: white;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1rem;
}

.modal-close-btn:hover {
	background: #fee2e2;
	color: #991b1b;
}

/* Modal Body */
.modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

/* Need Help Banner */
.need-help-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2px solid #ef4444;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.need-help-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.need-help-content {
	flex: 1;
}

.need-help-content strong {
	display: block;
	color: #991b1b;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.need-help-content p {
	margin: 0;
	color: #b91c1c;
	font-size: 0.875rem;
}

/* Correction Status Summary */
.student-corrections-modal .correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

/* Teacher Attempts List */
.student-corrections-modal .teacher-attempts-list {
	margin-top: 0;
}

.student-corrections-modal .teacher-attempts-list h4 {
	margin: 0 0 1rem 0;
	color: #1e293b;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.student-corrections-modal .teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
	transition: all 0.2s;
}

.student-corrections-modal .teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.student-corrections-modal .teacher-attempt-item:last-child {
	margin-bottom: 0;
}

/* No Attempts */
.student-corrections-modal .no-attempts {
	padding: 2rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	text-align: center;
}

.student-corrections-modal .no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

/* ============================================
   TEACHER HELP SECTION STYLES
   ============================================ */

/* Teacher Help Section (Form for teachers) */
.teacher-help-section {
	background: #f8fafc;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.teacher-help-header {
	margin-bottom: 1rem;
}

.teacher-help-header h4 {
	margin: 0 0 0.25rem 0;
	color: #1e40af;
	font-size: 1.1rem;
	font-weight: 700;
}

.teacher-help-header p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

/* Help Error/Success Messages */
.help-error-message {
	background: #fee2e2;
	border: 1px solid #fecaca;
	color: #991b1b;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.help-success-message {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Teacher Help Form */
.teacher-help-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.help-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.help-input-group label {
	font-size: 0.875rem;
	color: #374151;
}

.help-input-group label strong {
	font-weight: 600;
}

.teacher-help-textarea {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.875rem;
	resize: vertical;
	min-height: 60px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.teacher-help-textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.teacher-help-textarea::placeholder {
	color: #9ca3af;
}

.char-count {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: right;
}

/* Help Options */
.help-options {
	padding: 0.75rem 0;
}

.checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	margin-top: 0.125rem;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.checkbox-text {
	font-size: 0.875rem;
	line-height: 1.4;
	color: #374151;
}

/* Help Actions */
.help-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

.btn-generate-help {
	background: #eef2ff;
	color: #3730a3;
	border: 1px solid #c7d2fe;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.btn-generate-help:hover:not(:disabled) {
	background: #e0e7ff;
	transform: translateY(-1px);
}

.btn-generate-help:active:not(:disabled) {
	transform: translateY(0);
}

.btn-generate-help:disabled {
	background: #f3f4f6;
	border-color: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

.btn-provide-help {
	background: #3b82f6;
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.btn-provide-help:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
}

.btn-provide-help:active:not(:disabled) {
	transform: translateY(0);
}

.btn-provide-help:disabled {
	background: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

/* Previous Teacher Help Display */
.previous-teacher-help {
	background: #ecfdf5;
	border: 1px solid #10b981;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.teacher-help-display-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #a7f3d0;
}

.teacher-help-display-header h5 {
	margin: 0;
	color: #065f46;
	font-size: 1rem;
	font-weight: 600;
}

.help-meta {
	font-size: 0.75rem;
	color: #047857;
}

.teacher-help-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.teacher-message-display,
.teacher-hint-display {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.teacher-message-display strong,
.teacher-hint-display strong {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #047857;
}

.teacher-message-display p,
.teacher-hint-display p {
	margin: 0;
	background: white;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border-left: 3px solid #10b981;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #1f2937;
}

.reset-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #059669;
	font-weight: 500;
	padding: 0.5rem 0;
}

.reset-icon {
	font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
	.modal-overlay {
		padding: 10px;
	}
	
	.modal-content {
		max-height: 95vh;
	}
	
	.modal-header {
		padding: 1rem;
	}
	
	.modal-body {
		padding: 1rem;
	}
	
	.student-corrections-modal .correction-status-summary {
		grid-template-columns: 1fr;
	}
	
	.teacher-help-section {
		padding: 1rem;
	}
	
	.teacher-help-display-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.help-actions {
		justify-content: stretch;
	}
	
	.btn-generate-help,
	.btn-provide-help {
		width: 100%;
	}
}
/* FlowChart Drag & Drop Card Styles */

.flowchart-dragdrop {
	padding: 1.5rem;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.flowchart-dragdrop--disabled {
	opacity: 0.85;
	pointer-events: none;
}

/* Instruction */
.flowchart-dragdrop__instruction {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 4px solid #3b82f6;
}

.flowchart-dragdrop__instruction p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #334155;
}

/* Phrases Section */
.flowchart-dragdrop__phrases-section {
	margin-bottom: 1.5rem;
}

.flowchart-dragdrop__phrases-title {
	margin: 0 0 0.75rem 0;
	font-size: 1rem;
	font-weight: 600;
	color: #1e293b;
}

.flowchart-dragdrop__phrases-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.flowchart-dragdrop__phrases-empty {
	color: #64748b;
	font-style: italic;
	font-size: 0.9rem;
	margin: 0;
	padding: 0.5rem;
}

/* Draggable Phrase */
.flowchart-phrase {
	display: inline-block;
	padding: 0.625rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.9rem;
	cursor: grab;
	user-select: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.flowchart-phrase:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.flowchart-phrase:active {
	cursor: grabbing;
}

.flowchart-phrase--dragging {
	opacity: 0.5;
	transform: scale(1.02);
}

.flowchart-phrase--overlay {
	cursor: grabbing;
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
	z-index: 1000;
}

.flowchart-phrase--disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* Flow Indicator */
.flowchart-dragdrop__flow-indicator {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
	font-size: 1.5rem;
	color: #94a3b8;
}

/* Stages Container */
.flowchart-dragdrop__stages {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.flowchart-dragdrop__arrow {
	display: flex;
	justify-content: center;
	padding: 0.5rem 0;
	font-size: 1.25rem;
	color: #94a3b8;
}

/* Stage (Drop Zone) */
.flowchart-stage {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.flowchart-stage__label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
}

.flowchart-stage__label-text {
	font-weight: 600;
	font-size: 0.95rem;
	color: #1e293b;
}

.flowchart-stage__marks {
	font-size: 0.85rem;
	color: #64748b;
}

.flowchart-stage__dropzone {
	min-height: 60px;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed transparent;
	border-radius: 0 0 6px 6px;
	transition: all 0.2s ease;
}

.flowchart-stage__dropzone--over {
	background: #eff6ff;
	border-color: #3b82f6;
}

.flowchart-stage__dropzone--filled {
	background: #f0fdf4;
	border-style: solid;
	border-color: #22c55e;
}

.flowchart-stage__dropzone--disabled {
	cursor: not-allowed;
}

.flowchart-stage__placeholder {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.9rem;
}

.flowchart-stage__answer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: white;
	border: 1px solid #22c55e;
	border-radius: 6px;
}

.flowchart-stage__answer-text {
	flex: 1;
	font-size: 0.95rem;
	color: #166534;
	font-weight: 500;
}

.flowchart-stage__remove {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fee2e2;
	border: none;
	border-radius: 50%;
	color: #dc2626;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.flowchart-stage__remove:hover {
	background: #fecaca;
}

/* Progress */
.flowchart-dragdrop__progress {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
	text-align: center;
	font-size: 0.9rem;
	color: #64748b;
}

.flowchart-dragdrop__progress--complete {
	color: #16a34a;
	font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.flowchart-dragdrop {
		padding: 1rem;
	}

	.flowchart-phrase {
		padding: 0.5rem 0.75rem;
		font-size: 0.85rem;
	}

	.flowchart-stage__label {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.flowchart-stage__answer {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.flowchart-stage__remove {
		align-self: flex-end;
	}
}
.q14-special-note {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.3));
	border: 1px solid rgba(59, 130, 246, 0.4);
}

.q14-special-note h5 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: #1d4ed8;
}

.q14-special-note p {
	margin: 0;
	color: #1e293b;
	font-size: 0.875rem;
}
/* Student Correction Modal Overlay */
.student-correction-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	backdrop-filter: blur(2px);
}

/* Modal Container */
.student-correction-modal {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 95%;
	max-width: 1400px;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Modal Header */
.student-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #2079b0;
	flex-shrink: 0;
}

.student-modal-header .modal-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
}

.student-modal-header h3 {
	margin: 0;
	color: white;
	font-size: 1.25rem;
	font-weight: 700;
}

.modal-close-btn {
	background: transparent;
	border: none;
	color: white;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.criteria-progress-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Split-Screen Body */
.student-modal-body-split {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

/* LEFT PANEL - PASSAGE */
.passage-panel {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	border-right: 2px solid #e2e8f0;
	background: #f8fafc;
	overflow: hidden;
}

.passage-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	background: #f1f5f9;
	flex-shrink: 0;
}

.passage-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.passage-header h4 {
	margin: 0;
	color: #334155;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.passage-content {
	flex: 1;
	padding: 1.5rem;
	overflow-y: auto;
	line-height: 1.8;
}

.passage-content p {
	margin: 0 0 1rem 0;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* Passage paragraph styling to match Chapter 1 */
.passage-content .arg-passage-paragraph {
	position: relative;
	margin-bottom: 1.5rem;
	padding-left: 3rem;
}

/* Passage container styles */
.passage-content .english-paper2-passage {
	margin: 0;
	padding: 0;
}

.passage-content .english-paper2-passage__text {
	margin: 0;
	padding: 0;
}

.passage-content .arg-passage-content {
	margin: 0;
	padding: 0;
}

.passage-content .arg-passage-paragraph {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.passage-content .arg-passage-paragraph p {
	margin: 0;
	flex: 1;
	line-height: 1.6;
}

.passage-content .arg-passage-paragraph-number {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	margin-top: 0.125rem;
}

/* Part 2: hide paragraph numbering in passage */
.spm-paper1-part2-marking-report .student-correction-modal .arg-passage-paragraph-number {
	display: none;
}

.spm-paper1-part2-marking-report .student-correction-modal .arg-passage-paragraph {
	padding-left: 0;
	gap: 0;
}

.passage-content .arg-passage-paragraph p {
	margin: 0;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.8;
	text-align: justify;
}

.passage-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	color: #64748b;
}

.passage-loading p {
	margin: 0.5rem 0;
}

.passage-note {
	font-size: 0.875rem;
	font-style: italic;
}

/* RIGHT PANEL - CORRECTION INTERFACE */
.correction-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: white;
}

/* Correction Tabs Navigation */
.correction-tabs {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem 0 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #f8fafc;
	flex-shrink: 0;
}

.correction-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
	transition: all 0.2s;
	position: relative;
	top: 2px;
}

.correction-tab:hover {
	color: #334155;
	background: rgba(59, 130, 246, 0.05);
}

.correction-tab.active {
	color: #3b82f6;
	border-bottom-color: #3b82f6;
	background: white;
}

.correction-tab .tab-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.correction-tab .tab-label {
	font-size: 0.875rem;
}

/* Tab Content Container */
.correction-tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Tab Panels */
.current-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.history-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.help-tab-panel {
	display: flex;
	flex-direction: column;
}

/* Question Context Section */
.question-context-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.context-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.context-item h5 {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* BM Tatabahasa / grammar-style: instruction line above cloze prompt in correction modal */
.student-correction-modal .worksheet-question__instruction-label.correction-modal__bm-instruction {
	margin: 0 0 0.65rem 0;
	padding: 0 0 0.6rem 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid #e2e8f0;
	border-radius: 0;
	color: #000000;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.45;
}

/* MCQ cloze (BM Tatabahasa / grammar-style stems): visible blank slot; avoids whitespace collapse in plain <p> */
.student-correction-modal .correction-modal__mcq-cloze-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}

.student-correction-modal .correction-modal__mcq-cloze-segment {
	white-space: pre-wrap;
	color: inherit;
}

.student-correction-modal .correction-modal__mcq-cloze-blank {
	display: inline;
	padding: 0 0.2em;
	color: #0f172a;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	user-select: none;
}

.question-text-display,
.original-answer-display {
	margin: 0;
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
}

/* BM Tatabahasa: inline fill-blank in modal — match worksheet; inner .bm-worksheet keeps layout */
.question-text-display--bm-fillblank,
.original-answer-display--bm-fillblank,
.attempt-text--bm-fillblank {
	padding: 0.75rem 0.875rem 0.875rem;
}

.question-text-display--bm-fillblank .bm-worksheet-question__label {
	margin-bottom: 0.5rem;
}

/* Identify-error: arahan (instruction) vs petikan / ayat (sentence) */
.question-text-display--identify-split {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.question-text-display--identify-split .question-text-display__identify-section {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.question-text-display--identify-split .question-text-display__identify-kicker {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.question-text-display--identify-split .question-text-display__identify-para {
	margin: 0;
	white-space: pre-wrap;
}

.grammar-fillblank-editor--bm-inline {
	padding: 0;
}

.original-answer-display {
	border-left-color: #3b82f6;
	background: #eff6ff;
}

/* Identify-error: label row, then value row (atas–bawah) */
.original-answer-display--identify-stack,
.attempt-text.original-answer-display--identify-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	white-space: normal;
}

.identify-answer-pair {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #e2e8f0;
}

.identify-answer-pair:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.original-answer-display--identify-fallback,
.attempt-text.original-answer-display--identify-fallback {
	white-space: pre-wrap;
}

.identify-answer-row {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.identify-answer-row__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #64748b;
	line-height: 1.3;
}

.identify-answer-row__value {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #1e293b;
	white-space: pre-wrap;
	word-break: break-word;
}

.attempt-text.original-answer-display--identify-stack .identify-answer-row__value {
	font-size: 0.875rem;
}

.feedback-display {
	margin: 0;
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #92400e;
}

/* Criteria Status Section */
.criteria-status-section {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.criteria-status-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #15803d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.criteria-status-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.criteria-status-list-full {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.criteria-status-list li,
.criteria-status-list-full li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
}

.criterion-met {
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.criterion-not-met {
	color: #dc2626;
	border-left: 3px solid #ef4444;
}

.criterion-icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
}

.criterion-text {
	flex: 1;
}

/* Attempt Drawer (History Tab) */
.attempt-drawer {
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
	margin-bottom: 1rem;
}

.attempt-drawer:last-child {
	margin-bottom: 0;
}

.attempt-drawer-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.attempt-drawer-summary::-webkit-details-marker {
	display: none;
}

.attempt-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.attempt-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.attempt-badge.original {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.attempt-title {
	flex: 1;
	font-size: 0.9375rem;
	color: #1e293b;
}

.attempt-criteria-badge {
	padding: 0.25rem 0.625rem;
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.attempt-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
}

.attempt-drawer[open] .attempt-toggle {
	transform: rotate(180deg);
}

.attempt-drawer-content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
}

.attempt-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.attempt-section h6 {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.attempt-text {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border-left: 3px solid #cbd5e1;
	border-radius: 4px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.attempt-feedback-text {
	margin: 0;
	padding: 0.75rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 4px;
	color: #92400e;
	font-size: 0.875rem;
	line-height: 1.6;
}

.attempt-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.attempt-criteria-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
}

.attempt-criteria-list li.met {
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.attempt-criteria-list li .icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
}

.no-criteria-met-message {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 4px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

.attempt-error-notice,
.attempt-pending-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
}

.attempt-pending-notice {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.attempt-error-notice {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.no-attempts-message {
	padding: 2rem;
	text-align: center;
	color: #64748b;
}

.no-attempts-message p {
	margin: 0.5rem 0;
	font-size: 0.9375rem;
}

.no-attempts-message strong {
	color: #3b82f6;
}

/* Previous Attempts Drawer */
.previous-attempts-drawer {
	margin-bottom: 1.5rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
}

.attempts-drawer-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.attempts-drawer-summary::-webkit-details-marker {
	display: none;
}

.attempts-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.drawer-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.drawer-title {
	flex: 1;
	font-size: 0.9375rem;
}

.drawer-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
}

.previous-attempts-drawer[open] .drawer-toggle {
	transform: rotate(180deg);
}

.attempts-drawer-content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
	max-height: 320px;
	overflow-y: auto;
}

.attempt-card {
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.attempt-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f1f5f9;
}

.attempt-number-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.attempt-date {
	font-size: 0.8125rem;
	color: #64748b;
	font-weight: 500;
}

.attempt-answer {
	margin-bottom: 0.75rem;
}

.attempt-answer strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
	font-weight: 600;
}

.attempt-answer p {
	margin: 0;
	padding: 0.75rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 4px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
}

.attempt-ai-feedback {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.attempt-criteria-progress {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 6px;
}

.attempt-criteria-progress .criteria-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	background: #22c55e;
	color: white;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
}

.attempt-criteria-progress .criteria-text {
	font-size: 0.875rem;
	font-weight: 600;
	color: #15803d;
}

.attempt-feedback-box {
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
}

.attempt-feedback-box strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #92400e;
	font-size: 0.875rem;
	font-weight: 600;
}

.attempt-feedback-box p {
	margin: 0;
	color: #78350f;
	font-size: 0.875rem;
	line-height: 1.6;
}

.attempt-pending,
.attempt-error {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
}

.attempt-pending {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.attempt-error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.pending-icon,
.error-icon {
	font-size: 1rem;
	line-height: 1;
}

/* Old previous attempts section styles (keep for backward compatibility) */
.previous-attempts-section {
	margin-bottom: 1.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.previous-attempts-section summary {
	padding: 0.875rem 1rem;
	background: #f8fafc;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 0.875rem;
	user-select: none;
	list-style: none;
}

.previous-attempts-section summary:hover {
	background: #f1f5f9;
}

.previous-attempts-section summary::-webkit-details-marker {
	display: none;
}

.attempts-list-modal {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: white;
}

.attempt-item-modal {
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #3b82f6;
	border-radius: 6px;
}

.attempt-header-modal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

.attempt-header-modal strong {
	color: #1e293b;
}

.attempt-date-modal {
	color: #64748b;
	font-size: 0.8125rem;
}

.attempt-text-modal {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.5;
}

.attempt-feedback-modal {
	padding-top: 0.5rem;
	border-top: 1px solid #e2e8f0;
	font-size: 0.8125rem;
}

.attempt-criteria-modal {
	color: #0369a1;
	margin-bottom: 0.5rem;
}

.attempt-feedback-text {
	margin: 0;
	color: #64748b;
	font-style: italic;
	line-height: 1.5;
}

/* Help Requested Banner */
.help-requested-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	color: #92400e;
	font-weight: 500;
	font-size: 0.875rem;
}

.help-icon {
	font-size: 1.25rem;
}

/* Correction Form Section */
.correction-form-section {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 2px solid #e2e8f0;
}

.correction-form-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
}

.correction-textarea-modal {
	width: 100%;
	padding: 0.875rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.correction-textarea-modal:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.grammar-fillblank-editor {
	background: #f8fafc;
	border: 1px solid #dbeafe;
	border-radius: 8px;
	padding: 0.875rem;
}

.grammar-fillblank-editor__inputs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.grammar-fillblank-editor__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.grammar-fillblank-editor__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #334155;
}

.grammar-fillblank-editor__input,
.grammar-identify-error-editor__input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.9375rem;
	color: #0f172a;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.grammar-fillblank-editor__input:focus,
.grammar-identify-error-editor__input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.grammar-identify-error-editor {
	background: #f8fafc;
	border: 1px solid #dbeafe;
	border-radius: 8px;
	padding: 0.875rem;
}

.grammar-identify-error-editor__header {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #334155;
}

.grammar-identify-error-editor__rows {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.grammar-identify-error-editor__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.correction-form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
	gap: 1rem;
}

.word-count-modal {
	font-size: 0.875rem;
	color: #64748b;
	font-weight: 500;
}

.word-count-modal.insufficient {
	color: #dc2626;
}

.button-group-modal {
	display: flex;
	gap: 0.75rem;
}

.btn-need-help-modal {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-submit-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-need-help-modal {
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.btn-need-help-modal:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.btn-submit-modal:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-need-help-modal:disabled,
.btn-submit-modal:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Scrollbar Styling */
.passage-content::-webkit-scrollbar,
.correction-panel::-webkit-scrollbar {
	width: 8px;
}

.passage-content::-webkit-scrollbar-track,
.correction-panel::-webkit-scrollbar-track {
	background: #f1f5f9;
}

.passage-content::-webkit-scrollbar-thumb,
.correction-panel::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.passage-content::-webkit-scrollbar-thumb:hover,
.correction-panel::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* ============================================
   TEACHER HELP TAB (Full View)
   ============================================ */

.teacher-help-full {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.teacher-help-header-full {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: 12px;
}

.teacher-avatar {
	font-size: 2.5rem;
	line-height: 1;
}

.teacher-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.teacher-info h4 {
	margin: 0;
	color: #92400e;
	font-size: 1.25rem;
	font-weight: 700;
}

.help-date {
	font-size: 0.875rem;
	color: #b45309;
	font-weight: 500;
}

.teacher-guidance-full {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.guidance-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.guidance-section h5 {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.guidance-content {
	padding: 1rem;
	background: #f8fafc;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.hint-section {
	background: #fffbeb;
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid #fbbf24;
}

.hint-content-full {
	padding: 1rem;
	background: white;
	border-left: 4px solid #f59e0b;
	border-radius: 6px;
	color: #78350f;
	font-size: 0.9375rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.reset-notice-full {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #d1fae5;
	border: 1px solid #10b981;
	border-radius: 8px;
	color: #065f46;
	font-weight: 600;
	font-size: 0.9375rem;
}

.help-action {
	display: flex;
	justify-content: center;
	padding-top: 0.5rem;
}

.btn-go-to-correction {
	padding: 0.875rem 2rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-go-to-correction:hover {
	background: #2563eb;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* ============================================
   TEACHER HELP RECEIVED SECTION (Student View)
   ============================================ */

.teacher-help-received {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.teacher-help-notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border: 2px solid #10b981;
	border-radius: 8px;
	margin-bottom: 1rem;
	color: #065f46;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.teacher-help-notice:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.notice-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.notice-arrow {
	margin-left: auto;
	font-size: 1.25rem;
	color: #059669;
}

.teacher-help-received .teacher-help-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #fbbf24;
}

.teacher-help-received .teacher-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.teacher-help-received .teacher-help-header h5 {
	margin: 0;
	flex: 1;
	color: #92400e;
	font-size: 1.1rem;
	font-weight: 700;
}

.teacher-help-received .help-timestamp {
	font-size: 0.75rem;
	color: #b45309;
}

/* Teacher Guidance Content */
.teacher-help-received .teacher-guidance {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.teacher-help-received .teacher-message,
.teacher-help-received .teacher-hint {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.teacher-help-received .teacher-message strong,
.teacher-help-received .teacher-hint strong {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #92400e;
}

.teacher-help-received .message-content,
.teacher-help-received .hint-content {
	background: white;
	padding: 0.875rem 1rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	font-size: 0.9rem;
	line-height: 1.6;
	color: #1f2937;
}

.teacher-help-received .hint-content {
	border-left: 4px solid #f59e0b;
	background: #fffbeb;
}

/* Acknowledgment Section */
.teacher-help-received .help-acknowledgment {
	border-top: 1px solid #fbbf24;
	padding-top: 0.875rem;
}

.teacher-help-received .help-acknowledgment p {
	margin: 0.25rem 0;
	font-size: 0.875rem;
	color: #78350f;
}

.teacher-help-received .reset-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #059669;
	font-weight: 600;
	margin: 0.5rem 0;
}

.teacher-help-received .encouragement {
	font-weight: 600;
	color: #92400e;
	margin-top: 0.5rem !important;
}

/* Responsive - Stack on Mobile */
@media (max-width: 768px) {
	.student-correction-modal {
		width: 100%;
		height: 95vh;
	}
	
	.student-modal-body-split {
		flex-direction: column;
	}
	
	.passage-panel {
		flex: 0 0 40%;
		border-right: none;
		border-bottom: 2px solid #e2e8f0;
	}
	
	.correction-panel {
		flex: 1;
	}
	
	.button-group-modal {
		flex-direction: column;
		width: 100%;
	}
	
	.btn-need-help-modal,
	.btn-submit-modal {
		width: 100%;
	}

	.grammar-fillblank-editor__inputs,
	.grammar-identify-error-editor__header,
	.grammar-identify-error-editor__row {
		grid-template-columns: 1fr;
	}
	
	.teacher-help-received {
		padding: 1rem;
	}
	
	.teacher-help-received .teacher-help-header {
		flex-direction: column;
		align-items: flex-start;
	}
}


.spm-paper1-part3-mcq {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.spm-paper1-part3-mcq__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.spm-paper1-part3-mcq__split-panel {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
}

@media (max-width: 960px) {
	.spm-paper1-part3-mcq__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}

	.spm-paper1-part3-mcq__passages,
	.spm-paper1-part3-mcq__questions {
		height: 50vh;
		min-height: 400px;
	}
}

.spm-paper1-part3-mcq__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part3-mcq__passages-header {
	padding: 16px 20px;
	background: #1e293b;
	color: white;
	border-bottom: 1px solid #334155;
	border-radius: 12px 12px 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.spm-paper1-part3-mcq__passage-label {
	padding: 4px 16px;
    border-radius: 6px;
    background: #3b82f6;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
	margin-bottom: 12px;
}

.spm-paper1-part3-mcq__passages-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.spm-paper1-part3-mcq__passages-content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	min-height: 0;
}

.spm-paper1-part3-passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.spm-paper1-part3-passage:last-child {
	margin-bottom: 0;
}

.spm-paper1-part3-passage__description {
	font-style: italic;
	color: #64748b;
	margin: 12px 0;
	font-size: 15px;
}

.spm-paper1-part3-passage__text {
	line-height: 1.8;
	color: #1e293b;
}

.spm-paper1-part3-passage__text p {
	margin-bottom: 16px;
	text-align: justify;
}

.spm-paper1-part3-passage__text p:last-child {
	margin-bottom: 0;
}

.arg-passage-paragraph {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.arg-passage-paragraph:last-child {
	margin-bottom: 0;
}

.arg-passage-paragraph-number {
	flex-shrink: 0;
	font-weight: 700;
	color: #1e293b;
}

.arg-passage-paragraph p {
	margin: 0;
	flex: 1;
}

.spm-paper1-part3-mcq__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part3-mcq__questions-header {
	padding: 16px 20px;
	background: linear-gradient(135deg, #6d28d9, #a855f7);
	color: white;
	border-radius: 0 0 16px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 0;
	box-shadow: 0 10px 25px rgba(109, 40, 217, 0.35);
}

.spm-paper1-part3-mcq__questions-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

.spm-paper1-part3-mcq__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
}

.spm-paper1-part3-mcq__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

.spm-paper1-part3-question-section {
	margin-bottom: 32px;
}

.spm-paper1-part3-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.spm-paper1-part3-question:last-child {
	margin-bottom: 0;
}

.spm-paper1-part3-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spm-paper1-part3-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.spm-paper1-part3-question__marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.spm-paper1-part3-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

.spm-paper1-part3-mcq__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spm-paper1-part3-mcq__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

.spm-paper1-part3-mcq__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.spm-paper1-part3-mcq__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.spm-paper1-part3-mcq__submit:active:not(:disabled) {
	transform: translateY(0);
}

.spm-paper1-part3-mcq__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.spm-paper1-part3-mcq__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

.spm-paper1-part3-mcq__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.spm-paper1-part3-mcq__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

.spm-paper1-part3-mcq__passages-content::-webkit-scrollbar,
.spm-paper1-part3-mcq__questions-content::-webkit-scrollbar {
	width: 8px;
}

.spm-paper1-part3-mcq__passages-content::-webkit-scrollbar-track,
.spm-paper1-part3-mcq__questions-content::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 4px;
}

.spm-paper1-part3-mcq__passages-content::-webkit-scrollbar-thumb,
.spm-paper1-part3-mcq__questions-content::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.spm-paper1-part3-mcq__passages-content::-webkit-scrollbar-thumb:hover,
.spm-paper1-part3-mcq__questions-content::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

.spm-paper1-part3-mcq__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.spm-paper1-part3-mcq__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.spm-paper1-part3-mcq__choice:hover {
	border-color: #94a3b8;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.spm-paper1-part3-mcq__choice input[type="radio"] {
	margin: 0;
}

.spm-paper1-part3-mcq__choice-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: #f1f5f9;
	font-weight: 600;
	color: #0f172a;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.spm-paper1-part3-mcq__choice-text {
	color: #1e293b;
	font-size: 0.95rem;
}

/* English Paper 2 Marking Report Styles */

.english-paper2-marking-report {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Loading State */
.english-paper2-marking-report__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.english-paper2-marking-report__spinner {
	margin-bottom: 20px;
}

.english-paper2-marking-report__spinner .spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e2e8f0;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Small inline spinner for buttons */
.spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

.english-paper2-marking-report__loading h3 {
	margin: 0 0 8px 0;
	color: #1e293b;
	font-size: 20px;
}

.english-paper2-marking-report__loading p {
	margin: 0;
	color: #64748b;
	font-size: 15px;
}

/* Pending Review State */
.english-paper2-marking-report__pending-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.english-paper2-marking-report__pending-review .pending-review-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.english-paper2-marking-report__pending-review h3 {
	margin: 0 0 8px 0;
	color: #78350f;
	font-size: 20px;
	font-weight: 600;
}

.english-paper2-marking-report__pending-review p {
	margin: 0;
	color: #92400e;
	font-size: 15px;
	max-width: 500px;
}

/* Student empty state — Ask Akami style (matches sidebar chat bubble + flat logo) */
.english-paper2-marking-report__akami-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 28px 24px 32px;
	background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.english-paper2-marking-report__akami-row {
	max-width: 560px;
	margin: 0 auto;
	align-items: flex-end;
}

.english-paper2-marking-report__akami-prompt .lj-chat-message-content {
	max-width: 100%;
}

.english-paper2-marking-report__akami-prompt .lj-chat-message-content p {
	font-size: 15px;
}

.english-paper2-marking-report__akami-prompt .lj-chat-message-content p + p {
	margin-top: 12px;
}

/* Flat Akami logo outside sidebar (same idea as .lj-sidebar__chat-container .lj-chat-avatar-akami) */
.english-paper2-marking-report__akami-avatar {
	width: 40px;
	height: 40px;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	object-fit: contain;
	object-position: center bottom;
}

.english-paper2-marking-report .english-paper2-marking-report__akami-refresh {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
}

/* Error State */
.english-paper2-marking-report__error {
	padding: 40px 20px;
	text-align: center;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 12px;
}

.english-paper2-marking-report__error h3 {
	margin: 0 0 12px 0;
	color: #991b1b;
	font-size: 20px;
}

.english-paper2-marking-report__error p {
	margin: 0;
	color: #991b1b;
	font-size: 15px;
}

/* Retry Button */
.english-paper2-marking-report .retry-button {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.english-paper2-marking-report .retry-button:hover:not(:disabled) {
	background: #5a67d8;
}

.english-paper2-marking-report .retry-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Marks Section Styles */
.english-paper2-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.english-paper2-marks-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.english-paper2-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	margin-bottom: 24px;
	color: white;
}

.english-paper2-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.english-paper2-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
}

.english-paper2-score-value {
	font-size: 32px;
	font-weight: 700;
}

.english-paper2-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.english-paper2-badge-icon {
	font-size: 24px;
}

.english-paper2-badge-text {
	font-size: 16px;
	font-weight: 600;
}

.english-paper2-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.2);
}

.english-paper2-performance-badge.good {
	background: rgba(59, 130, 246, 0.2);
}

.english-paper2-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.2);
}

.english-paper2-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.2);
}

.english-paper2-marks-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.english-paper2-mark-category {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	border-left: 4px solid #667eea;
}

.english-paper2-mark-category h4 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 600;
	color: #2d3748;
}

.english-paper2-mark-display {
	margin-top: 8px;
}

.english-paper2-mark-score {
	font-size: 24px;
	font-weight: 700;
	color: #667eea;
}

/* Header */
.english-paper2-marking-report__header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 24px;
	border-radius: 12px;
	color: white;
}

.english-paper2-marking-report__header h2 {
	margin: 0 0 16px 0;
	font-size: 24px;
	font-weight: 700;
}

/* Score Card */
.english-paper2-marking-report__score-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.english-paper2-marking-report__score-main {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.english-paper2-marking-report__score-value {
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
}

.english-paper2-marking-report__score-divider {
	font-size: 28px;
	opacity: 0.7;
}

.english-paper2-marking-report__score-total {
	font-size: 28px;
	opacity: 0.9;
}

.english-paper2-marking-report__score-percentage {
	margin-left: auto;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 20px;
	font-weight: 700;
}

/* Overall Feedback */
.english-paper2-marking-report__overall-feedback {
	padding: 20px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 12px;
}

.english-paper2-marking-report__overall-feedback h3 {
	margin: 0 0 12px 0;
	color: #0c4a6e;
	font-size: 18px;
}

.english-paper2-marking-report__overall-feedback p {
	margin: 0;
	color: #0369a1;
	line-height: 1.6;
}

/* Questions Section */
.english-paper2-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.english-paper2-marking-report__questions > h3 {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* Individual Question Result */
.english-paper2-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.english-paper2-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.english-paper2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

/* Question Number Pill Badge */
.question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.english-paper2-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.english-paper2-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.english-paper2-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.english-paper2-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

/* Question Text */
.english-paper2-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.english-paper2-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

/* Answer */
.english-paper2-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.english-paper2-question-result__answer strong {
	color: #1e293b;
}

.english-paper2-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
}

.english-paper2-question-result__answer-text em {
	color: #94a3b8;
}

/* Marking Criteria */
.english-paper2-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.english-paper2-question-result__criteria strong {
	color: #1e293b;
}

.english-paper2-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.english-paper2-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.english-paper2-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.english-paper2-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.english-paper2-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.english-paper2-criteria-item.awarded .english-paper2-criteria-icon {
	background: #22c55e;
	color: white;
}

.english-paper2-criteria-item.not-awarded .english-paper2-criteria-icon {
	background: #ef4444;
	color: white;
}

.english-paper2-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.english-paper2-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.english-paper2-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

/* Hidden criterion styling for students */
.english-paper2-criteria-item.hidden-criterion {
	opacity: 0.6;
}

.english-paper2-criteria-hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

/* Question Feedback */
.english-paper2-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
}

.english-paper2-question-result__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.english-paper2-question-result__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px) {
	.english-paper2-marking-report__score-card {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.english-paper2-marking-report__score-percentage {
		margin-left: 0;
	}
	
	.english-paper2-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ============================================
   CORRECTIONS FEATURE STYLES
   ============================================ */

/* Corrections Overview (Progress Tracker) */
.corrections-overview {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 1.5rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.corrections-overview h4 {
	margin: 0 0 1rem 0;
	font-size: 18px;
	font-weight: 600;
}

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

.progress-stat {
	background: rgba(255, 255, 255, 0.2);
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	backdrop-filter: blur(10px);
}

.progress-stat.need-help {
	background: rgba(239, 68, 68, 0.3);
}

.progress-stat.not-started {
	background: rgba(148, 163, 184, 0.3);
}

.stat-value {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	display: block;
	font-size: 13px;
	opacity: 0.9;
	font-weight: 500;
}

.deadline-info {
	text-align: center;
	font-size: 14px;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	font-weight: 500;
}

/* Question Correction Section */
.question-correction-section {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: #f8fafc;
	border-left: 4px solid #667eea;
	border-radius: 8px;
}

.correction-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.correction-header h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.deadline-badge {
	background: #dbeafe;
	color: #1e40af;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

.deadline-passed-badge {
	background: #fee2e2;
	color: #991b1b;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

/* Status Indicators */
.need-help-status {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.need-help-status .status-icon {
	font-size: 24px;
	line-height: 1;
}

.need-help-status .status-content {
	flex: 1;
}

.need-help-status strong {
	display: block;
	color: #92400e;
	margin-bottom: 0.25rem;
	font-size: 15px;
}

.need-help-status p {
	margin: 0;
	color: #78350f;
	font-size: 14px;
}

.attempts-info {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: #e0e7ff;
	border-radius: 6px;
}

.attempts-badge {
	font-weight: 600;
	color: #3730a3;
	font-size: 14px;
}

.attempts-remaining {
	font-size: 13px;
	color: #4338ca;
}

/* Previous Attempts */
.previous-attempts {
	margin-bottom: 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
}

.previous-attempts summary {
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 14px;
	user-select: none;
}

.previous-attempts summary:hover {
	background: #e2e8f0;
}

.attempts-list {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.attempt-item {
	padding: 1rem;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.attempt-date {
	font-size: 12px;
	color: #64748b;
}

.attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
}

/* Correction Form */
.correction-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.correction-textarea {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
}

.correction-textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.correction-textarea::placeholder {
	color: #94a3b8;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.word-count {
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}

.word-count.insufficient {
	color: #dc2626;
}

.button-group {
	display: flex;
	gap: 0.75rem;
}

.btn-need-help,
.btn-submit-correction {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-need-help {
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.btn-need-help:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.btn-submit-correction {
	background: #667eea;
	color: white;
}

.btn-submit-correction:hover:not(:disabled) {
	background: #5a67d8;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-need-help:disabled,
.btn-submit-correction:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Responsive */
@media (max-width: 640px) {
	.progress-grid {
		grid-template-columns: 1fr;
	}
	
	.correction-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.form-footer {
		flex-direction: column;
		align-items: stretch;
	}
	
	.button-group {
		flex-direction: column;
	}
	
	.btn-need-help,
	.btn-submit-correction {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   TEACHER CORRECTIONS VIEW
   ============================================ */

.teacher-corrections-view {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border: 2px solid #3b82f6;
	border-radius: 8px;
}

.teacher-corrections-view .correction-header.teacher-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #bfdbfe;
}

.teacher-corrections-view .correction-header.teacher-header h5 {
	margin: 0;
	color: #1e40af;
	font-size: 16px;
	font-weight: 600;
}

.need-help-badge-teacher {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 1px solid #ef4444;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #991b1b;
	animation: pulse 2s ease-in-out infinite;
}

.correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: white;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

.correction-status-summary .status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-status-summary .status-item .label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.correction-status-summary .status-item .value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.correction-status-summary .status-item .value.status-in_progress {
	color: #f59e0b;
}

.correction-status-summary .status-item .value.status-need_help {
	color: #ef4444;
}

.correction-status-summary .status-item .value.status-not_started {
	color: #64748b;
}

.teacher-attempts-list {
	margin-top: 1rem;
}

.teacher-attempts-list h6 {
	margin: 0 0 0.75rem 0;
	color: #475569;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 0.75rem;
	transition: all 0.2s;
}

.teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.teacher-attempt-item .attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.teacher-attempt-item .attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.teacher-attempt-item .attempt-date {
	font-size: 12px;
	color: #64748b;
}

.teacher-attempt-item .attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.no-attempts {
	padding: 1.5rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	text-align: center;
}

.no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
	.teacher-corrections-view {
		padding: 1rem;
	}
	
	.correction-status-summary {
		grid-template-columns: 1fr;
	}
	
	.teacher-attempt-item {
		padding: 0.875rem;
	}
}


/* AI Feedback Panel */
.ai-feedback-panel {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
	border: 1px solid #bae6fd;
	border-radius: 8px;
}

.ai-feedback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #bae6fd;
}

.ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: white;
	border: 1px solid #38bdf8;
	border-radius: 6px;
	color: #0284c7;
	font-size: 13px;
	font-weight: 600;
}

.quality-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.quality-badge.quality-excellent {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.quality-badge.quality-good {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

.quality-badge.quality-partial {
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fcd34d;
}

.quality-badge.quality-minimal {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.feedback-section {
	margin-bottom: 1rem;
}

.feedback-section:last-child {
	margin-bottom: 0;
}

.feedback-section h6 {
	margin: 0 0 0.5rem 0;
	color: #0c4a6e;
	font-size: 14px;
	font-weight: 600;
}

.feedback-section.improvements h6 {
	color: #15803d;
}

.feedback-section.still-missing h6 {
	color: #b45309;
}

.feedback-section.next-steps h6 {
	color: #7c3aed;
}

.feedback-section ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: disc;
}

.feedback-section li {
	margin-bottom: 0.375rem;
	color: #334155;
	font-size: 14px;
	line-height: 1.6;
}

.feedback-section.main-feedback p {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-wrap;
}

.feedback-section.next-steps p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
	line-height: 1.6;
	font-style: italic;
	padding-left: 1rem;
	border-left: 3px solid #c4b5fd;
}

/* AI Feedback Loading */
.ai-feedback-loading {
	margin-top: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #fde68a;
	border-top-color: #f59e0b;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.ai-feedback-loading span {
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
}

/* Make previous attempts expanded by default when they have feedback */
.previous-attempts[open] summary {
	margin-bottom: 1rem;
}

/* Model Answer Section */
.model-answer-section {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #86efac;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.model-answer-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #86efac;
}

.model-answer-icon {
	font-size: 1.5rem;
}

.model-answer-header h5 {
	margin: 0;
	color: #15803d;
	font-size: 1.25rem;
	font-weight: 700;
}

.model-answer-intro {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: white;
	border-left: 4px solid #22c55e;
	border-radius: 6px;
}

.model-answer-intro p {
	margin: 0;
	color: #166534;
	font-size: 0.938rem;
	font-weight: 500;
}

.model-answer-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.model-answer-text,
.model-answer-points,
.model-answer-explanation {
	padding: 1.25rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.model-answer-text strong,
.model-answer-points strong,
.model-answer-explanation strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #15803d;
	font-size: 1rem;
	font-weight: 600;
}

.model-answer-text p,
.model-answer-explanation p {
	margin: 0;
	color: #334155;
	font-size: 0.938rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.model-answer-points ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: none;
}

.model-answer-points li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.5rem;
	color: #475569;
	font-size: 0.938rem;
	line-height: 1.6;
}

.model-answer-points li:before {
	content: "→";
	position: absolute;
	left: 0;
	color: #22c55e;
	font-weight: 700;
}

.model-answer-points li:last-child {
	margin-bottom: 0;
}

/* Criteria Hint */
.english-paper2-criteria-hint {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-left: 3px solid #94a3b8;
	border-radius: 4px;
}

.english-paper2-criteria-hint p {
	margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
	.model-answer-section {
		padding: 1rem;
	}
	
	.model-answer-text,
	.model-answer-points,
	.model-answer-explanation {
		padding: 1rem;
	}
}

/* Teacher View - Hide CardShell border and header */
.teacher-view-no-shell {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: transparent !important;
}

.teacher-view-no-shell .lj-card__header {
	display: none !important;
}

.teacher-view-no-shell .lj-card__body {
	padding: 0 !important;
}

/* Correction Criteria Section */
.correction-criteria-section {
	margin-top: 1rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.correction-criteria-section strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.correction-criteria-section .english-paper2-criteria-list {
	margin: 0;
}

.criteria-hint-correction {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: #fef3c7;
	border-radius: 6px;
	border: 1px solid #fbbf24;
}

/* Teacher AI Feedback in Attempts */
.teacher-ai-feedback {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.teacher-feedback-text {
	margin-top: 0.75rem;
}

.teacher-feedback-text strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.teacher-feedback-text p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Correction Improvements Indicator */
.correction-improvements-indicator {
	padding: 0.75rem;
	background: #d1fae5;
	border-radius: 8px;
	border: 1px solid #10b981;
}

.correction-improvements-indicator strong {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #065f46;
}

.correction-improvements-indicator .english-paper2-criteria-list {
	margin-top: 0.5rem;
}

.correction-improvements-indicator .english-paper2-criteria-item {
	background: white;
	border-color: #10b981;
}

/* Via Correction Pill Badge */
.via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

/* Successful Correction Display (Teacher View) */
.successful-correction-display {
	margin-top: 1rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border: 1px solid #86efac;
	border-radius: 8px;
	overflow: hidden;
}

.successful-correction-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(34, 197, 94, 0.1);
	border-bottom: 1px solid #86efac;
}

.successful-correction-header .success-icon {
	font-size: 1.125rem;
}

.successful-correction-header strong {
	flex: 1;
	font-size: 0.875rem;
	color: #166534;
}

.successful-correction-header .correction-date {
	font-size: 0.75rem;
	color: #15803d;
}

.successful-correction-content {
	padding: 1rem;
}

.successful-correction-content .correction-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #1e293b;
	white-space: pre-wrap;
}

/* Correction Header Info */
.correction-header-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Criteria Completion Badge */
.criteria-completion-badge {
	background: #e0f2fe;
	color: #0369a1;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid #7dd3fc;
}

/* Student Correction Button Section */
.question-correction-button-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

.btn-open-correction-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-open-correction-modal:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attempts-badge-inline {
	padding: 0.5rem 1rem;
	background: white;
	color: #0369a1;
	border: 1px solid #7dd3fc;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Teacher Help Notification (Student View - shown in marking report) */
/* Correction Completed Banner */
.correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.correction-completed-icon {
	font-size: 2rem;
	line-height: 1;
}

.correction-completed-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-completed-content strong {
	font-size: 1rem;
	color: #166534;
}

.correction-completed-content span {
	font-size: 0.875rem;
	color: #15803d;
}

.teacher-help-notification {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.teacher-help-notification__icon {
	font-size: 1.5rem;
	line-height: 1;
	animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.teacher-help-notification__title {
	font-size: 1rem;
	font-weight: 700;
	color: #065f46;
}

.teacher-help-notification__content {
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.teacher-help-notification__message {
	font-size: 0.9375rem;
	color: #047857;
	line-height: 1.6;
	margin: 0 0 0.75rem 0;
}

.teacher-help-notification__hint {
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	color: #78350f;
	margin-bottom: 0.75rem;
}

.teacher-help-notification__hint strong {
	color: #b45309;
}

.teacher-help-notification__reset {
	font-size: 0.875rem;
	color: #0369a1;
	background: rgba(224, 242, 254, 0.7);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	margin: 0;
	font-weight: 500;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta {
	margin-left: 2.25rem;
	background: #10b981;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta:hover {
	background: #059669;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Question Action Buttons */
.header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.question-edit-btn,
.question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.question-corrections-btn .help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.question-corrections-btn .attempts-badge {
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* ============================================
   Language Assessment Section (Phase 5)
   ============================================ */

.english-paper2-language-feedback {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 12px;
	border-left: 4px solid #0284c7;
}

.english-paper2-language-feedback h3 {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	color: #0369a1;
}

.english-paper2-language-feedback__content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.english-paper2-language-feedback__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.english-paper2-language-feedback__score .label {
	color: #64748b;
}

.english-paper2-language-feedback__score .value {
	font-size: 1.25rem;
	color: #0284c7;
}

.english-paper2-language-feedback__text {
	color: #334155;
	line-height: 1.6;
}

/* Language row in marks breakdown */
.english-paper2-mark-category--language {
	border-top: 2px dashed #e2e8f0;
	padding-top: 1rem;
}

.english-paper2-mark-category--language h4 {
	color: #0284c7;
}


/* Responsive adjustments */
@media (max-width: 640px) {
	.header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.5rem;
	}
	
	.question-edit-btn,
	.question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
	
	.english-paper2-language-feedback {
		padding: 1rem;
	}
	
	.english-paper2-language-feedback__score .value {
		font-size: 1.125rem;
	}
}

/* English Paper 2 Question 14 card */
.narrative-question14-card__answers {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.narrative-question14-card__answer-row {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.5rem 0.75rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.narrative-question14-card__answer-label {
	font-weight: 600;
	color: #1e293b;
	min-width: 72px;
}

.narrative-question14-card__answer-value {
	color: #334155;
}

.narrative-question14-card__phrases {
	margin-top: 0.5rem;
	padding-left: 1.1rem;
	color: #1f2937;
}

.narrative-question14-card__phrases li {
	line-height: 1.4;
}
/* Modal Overlay */
.adjustment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

/* Modal Container */
.adjustment-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Modal Header */
.adjustment-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adjustment-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.modal-close-btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background-color: #f1f5f9;
}

/* Modal Body */
.adjustment-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Context Section */
.adjustment-context {
	margin-bottom: 20px;
}

.context-section {
	margin-bottom: 16px;
}

.context-section h4 {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text,
.student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.student-answer {
	border-left-color: #3b82f6;
}

/* AI Assessment Box */
.ai-assessment-box {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}

.ai-assessment-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 12px;
}

.ai-icon {
	font-size: 18px;
}

.ai-assessment-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-score {
	font-size: 14px;
	color: #78350f;
}

.ai-feedback-preview {
	font-size: 13px;
	color: #78350f;
	line-height: 1.5;
}

/* Divider */
.adjustment-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 20px 0;
}

/* Adjustment Fields */
.adjustment-field {
	margin-bottom: 20px;
}

.adjustment-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

/* Current Score Display */
.current-score-display {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-display-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.score-display-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
	display: flex;
	align-items: center;
	gap: 8px;
}

.score-change-indicator {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
	background: #f0f9ff;
	color: #1e40af;
	border: 1px solid #3b82f6;
}

/* Criteria Header with Hint */
.criteria-header-with-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criteria-hint:hover {
	background-color: #f1f5f9;
}

.hint-icon {
	font-size: 14px;
}

.hint-text {
	font-weight: 500;
}

/* Criteria List */
.criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.criterion-item {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.criterion-label {
	cursor: pointer;
	user-select: none;
}

.criterion-item:last-child {
	margin-bottom: 0;
}

.criterion-item.awarded {
	background-color: #f0fdf4;
	border-left: 3px solid #22c55e;
}

.criterion-item.not-awarded {
	background-color: #fef2f2;
	border-left: 3px solid #ef4444;
}

.criterion-item:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #334155;
	user-select: none;
	transition: opacity 0.1s ease;
}

.criterion-label:active {
	opacity: 0.8;
}

.criterion-label input[type="checkbox"] {
	margin-top: 2px;
	cursor: pointer;
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
	flex-shrink: 0;
}

.criterion-icon {
	font-size: 16px;
	font-weight: bold;
	flex-shrink: 0;
	width: 20px;
}

.criterion-item.awarded .criterion-icon {
	color: #16a34a;
}

.criterion-item.not-awarded .criterion-icon {
	color: #dc2626;
}

.criterion-text {
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.criterion-comment {
	margin: 6px 0 0 46px;
	font-size: 13px;
	color: #64748b;
	font-style: italic;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Feedback Input */
.feedback-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.feedback-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modal Footer */
.adjustment-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.btn-secondary,
.btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

.btn-secondary {
	background: white;
	border: 1px solid #cbd5e1;
	color: #334155;
}

.btn-secondary:hover {
	background-color: #f8fafc;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

.btn-primary:hover {
	background: #2563eb;
}

/* Responsive */
@media (max-width: 768px) {
	.adjustment-modal {
		max-width: 95%;
		max-height: 95vh;
	}

	.adjustment-modal-body {
		padding: 16px;
	}

	.adjustment-modal-header {
		padding: 16px;
	}
}
.sw-marking-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10001;
	animation: sw-fade-in 0.3s ease;
}

@keyframes sw-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.sw-marking-modal {
	width: min(550px, 92vw);
	/* Match .lj-sidebar rail (neutral white) */
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	text-align: center;
	color: #0f172a;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: sw-slide-up 0.4s ease;
}

@keyframes sw-slide-up {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

.sw-marking-modal__icon.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.sw-marking-modal h3 {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
}

.sw-marking-modal__status {
	margin: 0 0 2rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #475569;
}

/* Progress bar + phases identical to GP */
.sw-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.sw-marking-modal__progress-fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.sw-marking-modal__progress-fill--pulse {
	transform-origin: left;
	animation: sw-progress-pulse 1.5s ease-in-out infinite;
}

@keyframes sw-progress-pulse {
	0% { transform: scaleX(0.2); }
	50% { transform: scaleX(0.85); }
	100% { transform: scaleX(0.2); }
}

.sw-marking-modal__steps {
	display: flex;
	gap: 1rem;
	margin: 2rem 0;
}

.sw-marking-modal__step {
	flex: 1;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #64748b;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.45;
	transition: opacity 0.3s ease;
}

.sw-marking-modal__step.is-active,
.sw-marking-modal__step.is-complete {
	opacity: 1;
}

.sw-marking-modal__step span {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
}

.sw-marking-modal__step.is-active span {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: sw-pulse 2s ease-in-out infinite;
}

.sw-marking-modal__step.is-complete span {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes sw-pulse {
	0%,100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.sw-marking-modal__spinner .lj-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: sw-spin 1s linear infinite;
}

.sw-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.5rem;
}

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

.sw-marking-modal__note {
	margin-top: 2rem;
	font-size: 0.875rem;
	color: #475569;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

/* responsive tweaks */
@media (max-width: 768px) {
	.sw-marking-modal {
		padding: 2rem 1.5rem;
	}
	.sw-marking-modal__step span {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}
}
/* GP Paper 2 Comprehension Card Styles */

.english-paper2-comprehension {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Theme Display */
.english-paper2-comprehension__theme {
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	color: white;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.english-paper2-comprehension__theme-item {
	flex: 1;
	min-width: 200px;
}

.english-paper2-comprehension__theme-item strong {
	display: block;
	margin-bottom: 4px;
	opacity: 0.9;
	font-size: 14px;
}

/* Progress Indicator */
.english-paper2-comprehension__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

/* Split Panel Container */
.english-paper2-comprehension__split-panel {
	display: grid;
	grid-template-columns: 3fr 2fr; /* 60% passages, 40% questions */
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
}

/* Mobile: Stack vertically */
@media (max-width: 960px) {
	.english-paper2-comprehension__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}
	
	.english-paper2-comprehension__passages,
	.english-paper2-comprehension__questions {
		height: 50vh;
		min-height: 400px;
	}
}

/* Left Panel - Passages */
.english-paper2-comprehension__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.english-paper2-comprehension__passages-header {
	padding: 16px 20px;
	background: #1e293b;
	color: white;
	border-bottom: 1px solid #334155;
}

.english-paper2-comprehension__passages-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.english-paper2-comprehension__passages-content {
	flex: 1;
	overflow-y: auto; /* Passages scroll internally */
	padding: 0;
	min-height: 0;
}

/* Individual Passage */
.english-paper2-passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.english-paper2-passage:last-child {
	margin-bottom: 0;
}

.english-paper2-passage__header {
	margin-bottom: 12px;
}

.english-paper2-passage__number {
	display: inline-block;
	padding: 4px 12px;
	background: #3b82f6;
	color: white;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
}

.english-paper2-passage__description {
	font-style: italic;
	color: #64748b;
	margin: 12px 0;
	font-size: 15px;
}

.english-paper2-passage__text {
	line-height: 1.8;
	color: #1e293b;
}

.english-paper2-passage__text p {
	margin-bottom: 16px;
	text-align: justify;
}

.english-paper2-passage__text p:last-child {
	margin-bottom: 0;
}

/* Argumentative Passage Paragraphs with Numbers */
.arg-passage-paragraph {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.arg-passage-paragraph:last-child {
	margin-bottom: 0;
}

.arg-passage-paragraph-number {
	flex-shrink: 0;
	font-weight: 700;
	color: #1e293b;
}

.arg-passage-paragraph p {
	margin: 0;
	flex: 1;
}

/* Right Panel - Questions */
.english-paper2-comprehension__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.english-paper2-comprehension__questions-header {
	padding: 16px 20px;
	background: #0f172a;
	color: white;
	border-bottom: 1px solid #1e293b;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.english-paper2-comprehension__questions-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.english-paper2-comprehension__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
}

.english-paper2-comprehension__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

/* Question Section */
.english-paper2-question-section {
	margin-bottom: 32px;
}

.english-paper2-question-section:last-of-type {
	margin-bottom: 0;
}

.english-paper2-question-section__title {
	margin: 0 0 20px 0;
	padding: 12px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
}

/* Individual Question */
.english-paper2-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.english-paper2-question__dialogue-list {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	color: #1e293b;
	line-height: 1.6;
}

.english-paper2-dialogue-subquestion {
	margin-top: 0.75rem;
}

.english-paper2-question:last-child {
	margin-bottom: 0;
}

.english-paper2-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.english-paper2-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.english-paper2-question__marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.english-paper2-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

.english-paper2-question__answer {
	width: 100%;
	padding: 12px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.english-paper2-question__answer:focus {
	outline: none;
	border-color: #3b82f6;
}

.english-paper2-question__answer:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
}

/* MCQ choices (Exercise 2 multiple matching) */
.english-paper2-question__mcq-choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.english-paper2-question__mcq-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.english-paper2-question__mcq-choice:hover {
	border-color: #cbd5e1;
	background-color: #f8fafc;
}

.english-paper2-question__mcq-choice--selected {
	border-color: #3b82f6;
	background-color: #eff6ff;
}

.english-paper2-question__mcq-choice input[type="radio"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.english-paper2-question__mcq-choice-letter {
	font-weight: 700;
	color: #0f172a;
	min-width: 1.5rem;
}

.english-paper2-question__mcq-choice-text {
	flex: 1;
	line-height: 1.5;
	color: #334155;
}

/* Submit Container */
.english-paper2-comprehension__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Submit Button */
.english-paper2-comprehension__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.english-paper2-comprehension__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.english-paper2-comprehension__submit:active:not(:disabled) {
	transform: translateY(0);
}

.english-paper2-comprehension__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hint Message */
.english-paper2-comprehension__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

/* Error Message */
.english-paper2-comprehension__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

/* Submitted Status */
.english-paper2-comprehension__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.english-paper2-comprehension__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

/* Empty State */
.english-paper2-comprehension__empty {
	padding: 40px 20px;
	text-align: center;
	color: #64748b;
}

.english-paper2-comprehension__empty p {
	margin: 0;
	font-size: 16px;
}

/* Scrollbar Styling */
.english-paper2-comprehension__passages-content::-webkit-scrollbar,
.english-paper2-comprehension__questions-content::-webkit-scrollbar {
	width: 8px;
}

.english-paper2-comprehension__passages-content::-webkit-scrollbar-track,
.english-paper2-comprehension__questions-content::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 4px;
}

.english-paper2-comprehension__passages-content::-webkit-scrollbar-thumb,
.english-paper2-comprehension__questions-content::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.english-paper2-comprehension__passages-content::-webkit-scrollbar-thumb:hover,
.english-paper2-comprehension__questions-content::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Section B summary textarea gets extra height */
.english-paper2-question__answer--section-b-summary {
	min-height: 200px;
}

/* Section C Last Question - Larger textarea for essay-type questions */
.english-paper2-question__answer--section-c-last {
	min-height: 200px;
}

/* Answer container for word count positioning */
.english-paper2-question__answer-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Word count display */
.english-paper2-question__word-count {
	align-self: flex-end;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
	padding: 2px 8px;
	background: #f1f5f9;
	border-radius: 4px;
	font-weight: 500;
}

/* GP Paper 2 Marking Progress Modal */
.english-paper2-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.english-paper2-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: slideUp 0.4s ease;
}

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

.english-paper2-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.english-paper2-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.english-paper2-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.english-paper2-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.english-paper2-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.english-paper2-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

/* Phase indicators */
.english-paper2-marking-modal__phases {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}

.english-paper2-marking-modal__phases .phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.english-paper2-marking-modal__phases .phase.active {
	opacity: 1;
}

.english-paper2-marking-modal__phases .phase.complete {
	opacity: 1;
}

.english-paper2-marking-modal__phases .phase-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.english-paper2-marking-modal__phases .phase.active .phase-icon {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: pulse 2s ease-in-out infinite;
}

.english-paper2-marking-modal__phases .phase.complete .phase-icon {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.english-paper2-marking-modal__phases .phase-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

.english-paper2-marking-modal__hint {
	font-size: 0.875rem;
	color: #475569;
	margin: 2rem 0 0 0;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.english-paper2-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.5rem;
}

.english-paper2-marking-modal__spinner .lj-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
	.english-paper2-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}
	
	.english-paper2-marking-modal__title {
		font-size: 1.25rem;
	}
	
	.english-paper2-marking-modal__phases .phase-icon {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}
	
	.english-paper2-marking-modal__phases .phase-label {
		font-size: 0.7rem;
	}
}







/* GP Paper 2 Comprehension Card Styles */

.igcse-efl-paper1-comprehension {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Theme Display */
.igcse-efl-paper1-comprehension__theme {
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	color: white;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.igcse-efl-paper1-comprehension__theme-item {
	flex: 1;
	min-width: 200px;
}

.igcse-efl-paper1-comprehension__theme-item strong {
	display: block;
	margin-bottom: 4px;
	opacity: 0.9;
	font-size: 14px;
}

/* Progress Indicator */
.igcse-efl-paper1-comprehension__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

/* Split Panel Container */
.igcse-efl-paper1-comprehension__split-panel {
	display: grid;
	grid-template-columns: 55fr 45fr; /* 55% passages, 45% questions */
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
}

/* Mobile: Stack vertically */
@media (max-width: 960px) {
	.igcse-efl-paper1-comprehension__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}
	
	.igcse-efl-paper1-comprehension__passages,
	.igcse-efl-paper1-comprehension__questions {
		height: 50vh;
		min-height: 400px;
	}
}

/* Left Panel - Passages */
.igcse-efl-paper1-comprehension__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.igcse-efl-paper1-comprehension__passages-header {
	padding: 16px 20px;
	background: #1e293b;
	color: white;
	border-bottom: 1px solid #334155;
}

.igcse-efl-paper1-comprehension__passages-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.igcse-efl-paper1-comprehension__passages-content {
	flex: 1;
	overflow-y: auto; /* Passages scroll internally */
	padding: 0;
	min-height: 0;
}

/* Individual Passage */
.igcse-efl-paper1-passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.igcse-efl-paper1-passage:last-child {
	margin-bottom: 0;
}

.igcse-efl-paper1-passage__header {
	margin-bottom: 12px;
}

.igcse-efl-paper1-passage__number {
	display: inline-block;
	padding: 4px 12px;
	background: #3b82f6;
	color: white;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
}

.igcse-efl-paper1-passage__description {
	font-style: italic;
	color: #64748b;
	margin: 12px 0;
	font-size: 15px;
}

.igcse-efl-paper1-passage__text {
	line-height: 1.8;
	color: #1e293b;
}

.igcse-efl-paper1-passage__text p {
	margin-bottom: 16px;
	text-align: justify;
}

.igcse-efl-paper1-passage__text p:last-child {
	margin-bottom: 0;
}

/* Argumentative Passage Paragraphs with Numbers */
.arg-passage-paragraph {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.arg-passage-paragraph:last-child {
	margin-bottom: 0;
}

.arg-passage-paragraph-number {
	flex-shrink: 0;
	font-weight: 700;
	color: #1e293b;
}

.arg-passage-paragraph p {
	margin: 0;
	flex: 1;
}

/* Right Panel - Questions */
.igcse-efl-paper1-comprehension__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.igcse-efl-paper1-comprehension__questions-header {
	padding: 16px 20px;
	background: #0f172a;
	color: white;
	border-bottom: 1px solid #1e293b;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.igcse-efl-paper1-comprehension__questions-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.igcse-efl-paper1-comprehension__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
}

.igcse-efl-paper1-comprehension__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

/* Question Section */
.igcse-efl-paper1-question-section {
	margin-bottom: 32px;
}

.igcse-efl-paper1-question-section:last-of-type {
	margin-bottom: 0;
}

.igcse-efl-paper1-question-section__title {
	margin: 0 0 20px 0;
	padding: 12px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
}

/* Individual Question */
.igcse-efl-paper1-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.igcse-efl-paper1-question__dialogue-list {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	color: #1e293b;
	line-height: 1.6;
}

.igcse-efl-paper1-dialogue-subquestion {
	margin-top: 0.75rem;
}

.igcse-efl-paper1-question:last-child {
	margin-bottom: 0;
}

.igcse-efl-paper1-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.igcse-efl-paper1-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.igcse-efl-paper1-question__marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.igcse-efl-paper1-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

/* Bold line above inserted passage (Text C Q3(c)/(d) etc.) */
.igcse-efl-paper1-question__quoted-passage-label {
	margin: 0 0 6px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #0f172a;
}

.igcse-efl-paper1-question__quoted-passage {
	margin-top: 0;
}

/* Text C Q3(c): stem includes task + insert; +50% bottom margin vs default 12px → 18px */
.igcse-efl-paper1-question__text--text-c-3c {
	margin-bottom: 18px;
}

.igcse-efl-paper1-question__answer {
	width: 100%;
	padding: 12px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.igcse-efl-paper1-question__answer:focus {
	outline: none;
	border-color: #3b82f6;
}

.igcse-efl-paper1-question__answer:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
}

/* MCQ choices (Exercise 2 multiple matching) */
.igcse-efl-paper1-question__mcq-choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.igcse-efl-paper1-question__mcq-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.igcse-efl-paper1-question__mcq-choice:hover {
	border-color: #cbd5e1;
	background-color: #f8fafc;
}

.igcse-efl-paper1-question__mcq-choice--selected {
	border-color: #3b82f6;
	background-color: #eff6ff;
}

.igcse-efl-paper1-question__mcq-choice input[type="radio"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.igcse-efl-paper1-question__mcq-choice-letter {
	font-weight: 700;
	color: #0f172a;
	min-width: 1.5rem;
}

.igcse-efl-paper1-question__mcq-choice-text {
	flex: 1;
	line-height: 1.5;
	color: #334155;
}

/* Submit Container */
.igcse-efl-paper1-comprehension__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Submit Button */
.igcse-efl-paper1-comprehension__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.igcse-efl-paper1-comprehension__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.igcse-efl-paper1-comprehension__submit:active:not(:disabled) {
	transform: translateY(0);
}

.igcse-efl-paper1-comprehension__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hint Message */
.igcse-efl-paper1-comprehension__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

/* Error Message */
.igcse-efl-paper1-comprehension__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

/* Submitted Status */
.igcse-efl-paper1-comprehension__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.igcse-efl-paper1-comprehension__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

/* Empty State */
.igcse-efl-paper1-comprehension__empty {
	padding: 40px 20px;
	text-align: center;
	color: #64748b;
}

.igcse-efl-paper1-comprehension__empty p {
	margin: 0;
	font-size: 16px;
}

/* Scrollbar Styling */
.igcse-efl-paper1-comprehension__passages-content::-webkit-scrollbar,
.igcse-efl-paper1-comprehension__questions-content::-webkit-scrollbar {
	width: 8px;
}

.igcse-efl-paper1-comprehension__passages-content::-webkit-scrollbar-track,
.igcse-efl-paper1-comprehension__questions-content::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 4px;
}

.igcse-efl-paper1-comprehension__passages-content::-webkit-scrollbar-thumb,
.igcse-efl-paper1-comprehension__questions-content::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.igcse-efl-paper1-comprehension__passages-content::-webkit-scrollbar-thumb:hover,
.igcse-efl-paper1-comprehension__questions-content::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Section B summary textarea gets extra height */
.igcse-efl-paper1-question__answer--section-b-summary {
	min-height: 200px;
}

/* Section C Last Question - Larger textarea for essay-type questions */
.igcse-efl-paper1-question__answer--section-c-last {
	min-height: 200px;
}

/* Answer container for word count positioning */
.igcse-efl-paper1-question__answer-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Word count display */
.igcse-efl-paper1-question__word-count {
	align-self: flex-end;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
	padding: 2px 8px;
	background: #f1f5f9;
	border-radius: 4px;
	font-weight: 500;
}

/* Per-question submit (Text A / Text C split panel) */
.igcse-efl-paper1-question__submit-wrap {
	display: flex;
	justify-content: center;
	margin-top: 12px;
	width: 100%;
}

.igcse-efl-paper1-question__submit-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 140px;
	max-width: 100%;
	padding: 10px 22px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: #2563eb;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.igcse-efl-paper1-question__submit-btn:hover:not(:disabled) {
	background: #1d4ed8;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.igcse-efl-paper1-question__submit-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.igcse-efl-paper1-comprehension__split-progress {
	margin-top: 1rem;
	padding: 12px 16px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	font-size: 14px;
	color: #1e3a5f;
}

.igcse-efl-paper1-comprehension__split-progress p {
	margin: 0;
}

/* ============================================
   IGCSE EFL Text B - Situational-writing-style layout
   (Question | Passage tabs + Student Response panel)
   ============================================ */

.igcse-efl-text-b-card__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	min-height: 400px;
	height: min(75vh, 880px);
	max-height: min(75vh, 880px);
	min-width: 0;
	align-items: stretch;
}

.igcse-efl-text-b-card__source-panel,
.igcse-efl-text-b-card__response-panel {
	border-radius: 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	padding: 1.25rem;
	box-sizing: border-box;
}

.igcse-efl-text-b-card__source-panel {
	border: none;
	box-shadow: none;
}

.igcse-efl-text-b-card__response-panel {
	border: none;
	box-shadow: none;
}

.igcse-efl-text-b-card__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
	flex-shrink: 0;
}

.igcse-efl-text-b-card__tab {
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1.4rem;
	color: #1d4ed8;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.2s ease;
	box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.2);
}

.igcse-efl-text-b-card__tab.is-active {
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.igcse-efl-text-b-card__panel {
	flex: 1 1 0;
	background: #fbfbff;
	border-radius: 12px;
	padding: 1.5rem;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	border: 1px solid #e2e8f0;
	box-sizing: border-box;
}

.igcse-efl-text-b-card__question-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.65rem 1rem;
	background: #f1f5f9;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	box-sizing: border-box;
}

.igcse-efl-text-b-card__question-number {
	font-weight: 700;
	color: #0f172a;
	font-size: 1rem;
}

.igcse-efl-text-b-card__question-marks {
	color: #64748b;
	font-size: 0.9rem;
}

.igcse-efl-text-b-card__question-content {
	color: #1f2937;
	line-height: 1.6;
}

.igcse-efl-text-b-card__question-content p {
	margin: 0 0 0.75rem 0;
}

.igcse-efl-text-b-card__passage-title {
	margin: 0 0 0.75rem 0;
	color: #0f172a;
	font-size: 1.15rem;
	line-height: 1.5;
	font-weight: 500;
}

.igcse-efl-text-b-card__passage-description {
	font-style: italic;
	color: #64748b;
	margin: 0 0 1rem 0;
	font-size: 15px;
}

.igcse-efl-text-b-card__passage-text {
	line-height: 1.8;
	color: #1e293b;
}

.igcse-efl-text-b-card__passage-text p {
	margin-bottom: 16px;
	text-align: justify;
}

.igcse-efl-text-b-card__passage-text p:last-child {
	margin-bottom: 0;
}

.igcse-efl-text-b-card__placeholder {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #94a3b8;
	font-weight: 500;
}

.igcse-efl-text-b-card__response-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	background: #3b82f6;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	box-shadow: none;
}

.igcse-efl-text-b-card__response-header h4 {
	margin: 0;
	font-size: 16px;
	color: inherit;
	font-weight: 600;
}

.igcse-efl-text-b-card__response-body {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.igcse-efl-text-b-card__textarea {
	width: 100%;
	min-height: 320px;
	border-radius: 12px;
	border: 1.5px solid #cbd5e1;
	padding: 1rem;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
	background: #fff;
	color: #0f172a;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-sizing: border-box;
}

.igcse-efl-text-b-card__textarea::placeholder {
	color: #94a3b8;
	font-family: inherit;
}

.igcse-efl-text-b-card__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.igcse-efl-text-b-card__textarea:disabled {
	background: #f5f7fb;
	color: #94a3b8;
	cursor: not-allowed;
}

.igcse-efl-text-b-card__word-count {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #6b21a8;
	text-align: right;
}

.igcse-efl-text-b-card__actions {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.igcse-efl-text-b-card__submit {
	width: 100%;
	max-width: 220px;
	padding: 0.95rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.igcse-efl-text-b-card__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.igcse-efl-text-b-card__submit:not(:disabled):hover {
	transform: translateY(-1px);
}

.igcse-efl-text-b-card__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

.igcse-efl-text-b-card__error {
	padding: 0.85rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecdd3;
	border-radius: 10px;
	color: #b91c1c;
	font-weight: 500;
}

.igcse-efl-text-b-card__submitted {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	font-weight: 600;
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	margin-top: 1rem;
}

.igcse-efl-text-b-card__submitted p {
	margin: 0;
}

@media (max-width: 1024px) {
	.igcse-efl-text-b-card__split,
	.igcse-efl-paper2-card__split {
		grid-template-columns: 1fr;
		height: auto;
		max-height: none;
		min-height: 0;
	}
	.igcse-efl-text-b-card__source-panel,
	.igcse-efl-text-b-card__response-panel,
	.igcse-efl-paper2-card__source-panel,
	.igcse-efl-paper2-card__response-panel {
		max-height: none;
		overflow: visible;
	}
	.igcse-efl-text-b-card__panel,
	.igcse-efl-paper2-card__panel {
		min-height: 240px;
		max-height: min(50vh, 420px);
	}
	.igcse-efl-text-b-card__response-body,
	.igcse-efl-paper2-card__response-body {
		max-height: min(50vh, 480px);
	}
}

/* ============================================
   IGCSE EFL Paper 2 - Own block naming
   (Question | Text A | Text B tabs + Student Response panel)
   ============================================ */

.igcse-efl-paper2-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.igcse-efl-paper2-card__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.igcse-efl-paper2-card__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	min-height: 400px;
	height: min(75vh, 880px);
	max-height: min(75vh, 880px);
	min-width: 0;
	align-items: stretch;
}

.igcse-efl-paper2-card__source-panel,
.igcse-efl-paper2-card__response-panel {
	border-radius: 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	padding: 1.25rem;
	box-sizing: border-box;
}

.igcse-efl-paper2-card__source-panel {
	border: none;
	box-shadow: none;
}

.igcse-efl-paper2-card__response-panel {
	border: none;
	box-shadow: none;
}

.igcse-efl-paper2-card__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
	flex-shrink: 0;
}

.igcse-efl-paper2-card__tab {
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1.4rem;
	color: #1d4ed8;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.2s ease;
	box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.2);
}

.igcse-efl-paper2-card__tab.is-active {
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.igcse-efl-paper2-card__panel {
	flex: 1 1 0;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-sizing: border-box;
}

.igcse-efl-paper2-card__question-list {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* EFL Paper 2 Section A: Q1(a) and Q1(b) each get their own bordered block + independent submit */
.igcse-efl-paper2-card__part-section {
	margin-bottom: 1.5rem;
	padding: 1rem 1rem 1.1rem;
	border: 1px solid #cbd5e1;
	border-radius: 14px;
	background: #fafbfc;
	box-sizing: border-box;
}

.igcse-efl-paper2-card__part-section:last-child {
	margin-bottom: 0;
}

.igcse-efl-paper2-card__question-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1rem;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.igcse-efl-paper2-card__q1b-teacher-meta {
	margin-bottom: 0.85rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
}

.igcse-efl-paper2-card__q1b-teacher-meta-label {
	margin: 0 0 0.5rem 0;
	font-size: 0.8rem;
	color: #64748b;
	font-weight: 600;
}

.igcse-efl-paper2-card__q1b-teacher-meta-line {
	margin: 0 0 0.25rem 0;
	font-size: 0.95rem;
	color: #334155;
	line-height: 1.5;
}

.igcse-efl-paper2-card__q1b-teacher-meta-line:last-of-type {
	margin-bottom: 0;
}

.igcse-efl-paper2-card__question-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.65rem 1rem;
	background: #f1f5f9;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	box-sizing: border-box;
}

.igcse-efl-paper2-card__question-number {
	font-weight: 700;
	color: #0f172a;
	font-size: 1rem;
}

.igcse-efl-paper2-card__question-marks {
	color: #64748b;
	font-size: 0.9rem;
}

.igcse-efl-paper2-card__question-content {
	color: #1f2937;
	line-height: 1.6;
}

.igcse-efl-paper2-card__question-content p {
	margin: 0 0 0.75rem 0;
}

.igcse-efl-paper2-card__passage-title {
	margin: 0 0 0.75rem 0;
	color: #0f172a;
	font-size: 1.15rem;
	line-height: 1.5;
	font-weight: 500;
}

.igcse-efl-paper2-card__passage-description {
	font-style: italic;
	color: #64748b;
	margin: 0 0 1rem 0;
	font-size: 15px;
}

.igcse-efl-paper2-card__passage-text {
	line-height: 1.8;
	color: #1e293b;
}

.igcse-efl-paper2-card__passage-text p {
	margin-bottom: 16px;
	text-align: justify;
}

.igcse-efl-paper2-card__passage-text p:last-child {
	margin-bottom: 0;
}

.igcse-efl-paper2-card__placeholder {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #94a3b8;
	font-weight: 500;
}

.igcse-efl-paper2-card__response-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	background: #3b82f6;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	box-shadow: none;
}

.igcse-efl-paper2-card__response-header h4 {
	margin: 0;
	font-size: 16px;
	color: inherit;
	font-weight: 600;
}

.igcse-efl-paper2-card__response-body {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.igcse-efl-paper2-card__textarea {
	width: 100%;
	min-height: 220px;
	border-radius: 12px;
	border: 1.5px solid #cbd5e1;
	padding: 1rem;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
	background: #fff;
	color: #0f172a;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-sizing: border-box;
}

.igcse-efl-paper2-card__textarea::placeholder {
	color: #94a3b8;
	font-family: inherit;
}

.igcse-efl-paper2-card__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.igcse-efl-paper2-card__textarea:disabled {
	background: #f5f7fb;
	color: #94a3b8;
	cursor: not-allowed;
}

.igcse-efl-paper2-card__word-count {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #6b21a8;
	text-align: right;
}

.igcse-efl-paper2-card__actions {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.igcse-efl-paper2-card__submit {
	width: 100%;
	max-width: 220px;
	padding: 0.95rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.igcse-efl-paper2-card__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.igcse-efl-paper2-card__submit:not(:disabled):hover {
	transform: translateY(-1px);
}

.igcse-efl-paper2-card__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

.igcse-efl-paper2-card__error {
	padding: 0.85rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecdd3;
	border-radius: 10px;
	color: #b91c1c;
	font-weight: 500;
}

.igcse-efl-paper2-card__submitted {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	font-weight: 600;
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	margin-top: 1rem;
}

.igcse-efl-paper2-card__submitted p {
	margin: 0;
}

/* GP Paper 2 Comprehension Card Styles */

.igcse-esl-paper1-comprehension {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Theme Display */
.igcse-esl-paper1-comprehension__theme {
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	color: white;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.igcse-esl-paper1-comprehension__theme-item {
	flex: 1;
	min-width: 200px;
}

.igcse-esl-paper1-comprehension__theme-item strong {
	display: block;
	margin-bottom: 4px;
	opacity: 0.9;
	font-size: 14px;
}

/* Progress Indicator */
.igcse-esl-paper1-comprehension__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

/* Split Panel Container */
.igcse-esl-paper1-comprehension__split-panel {
	display: grid;
	grid-template-columns: 3fr 2fr; /* 60% passages, 40% questions */
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
}

/* Mobile: Stack vertically */
@media (max-width: 960px) {
	.igcse-esl-paper1-comprehension__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}
	
	.igcse-esl-paper1-comprehension__passages,
	.igcse-esl-paper1-comprehension__questions {
		height: 50vh;
		min-height: 400px;
	}
}

/* Left Panel - Passages */
.igcse-esl-paper1-comprehension__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.igcse-esl-paper1-comprehension__passages-header {
	padding: 16px 20px;
	background: #1e293b;
	color: white;
	border-bottom: 1px solid #334155;
}

.igcse-esl-paper1-comprehension__passages-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.igcse-esl-paper1-comprehension__passages-content {
	flex: 1;
	overflow-y: auto; /* Passages scroll internally */
	padding: 0;
	min-height: 0;
}

/* Individual Passage */
.igcse-esl-paper1-passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.igcse-esl-paper1-passage:last-child {
	margin-bottom: 0;
}

.igcse-esl-paper1-passage__header {
	margin-bottom: 12px;
}

.igcse-esl-paper1-passage__number {
	display: inline-block;
	padding: 4px 12px;
	background: #3b82f6;
	color: white;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
}

.igcse-esl-paper1-passage__description {
	font-style: italic;
	color: #64748b;
	margin: 12px 0;
	font-size: 15px;
}

.igcse-esl-paper1-passage__text {
	line-height: 1.8;
	color: #1e293b;
}

.igcse-esl-paper1-passage__text p {
	margin-bottom: 16px;
	text-align: justify;
}

.igcse-esl-paper1-passage__text p:last-child {
	margin-bottom: 0;
}

/* Argumentative Passage Paragraphs with Numbers */
.arg-passage-paragraph {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.arg-passage-paragraph:last-child {
	margin-bottom: 0;
}

.arg-passage-paragraph-number {
	flex-shrink: 0;
	font-weight: 700;
	color: #1e293b;
}

.arg-passage-paragraph p {
	margin: 0;
	flex: 1;
}

/* Right Panel - Questions */
.igcse-esl-paper1-comprehension__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.igcse-esl-paper1-comprehension__questions-header {
	padding: 16px 20px;
	background: #0f172a;
	color: white;
	border-bottom: 1px solid #1e293b;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.igcse-esl-paper1-comprehension__questions-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.igcse-esl-paper1-comprehension__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
}

.igcse-esl-paper1-comprehension__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

/* Question Section */
.igcse-esl-paper1-question-section {
	margin-bottom: 32px;
}

.igcse-esl-paper1-question-section:last-of-type {
	margin-bottom: 0;
}

.igcse-esl-paper1-question-section__title {
	margin: 0 0 20px 0;
	padding: 12px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
}

/* Individual Question */
.igcse-esl-paper1-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.igcse-esl-paper1-question__dialogue-list {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	color: #1e293b;
	line-height: 1.6;
}

.igcse-esl-paper1-dialogue-subquestion {
	margin-top: 0.75rem;
}

.igcse-esl-paper1-question:last-child {
	margin-bottom: 0;
}

.igcse-esl-paper1-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.igcse-esl-paper1-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.igcse-esl-paper1-question__marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.igcse-esl-paper1-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

.igcse-esl-paper1-question__answer {
	width: 100%;
	padding: 12px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.igcse-esl-paper1-question__answer:focus {
	outline: none;
	border-color: #3b82f6;
}

.igcse-esl-paper1-question__answer:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
}

/* MCQ choices (Exercise 2 multiple matching) */
.igcse-esl-paper1-question__mcq-choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.igcse-esl-paper1-question__mcq-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.igcse-esl-paper1-question__mcq-choice:hover {
	border-color: #cbd5e1;
	background-color: #f8fafc;
}

.igcse-esl-paper1-question__mcq-choice--selected {
	border-color: #3b82f6;
	background-color: #eff6ff;
}

.igcse-esl-paper1-question__mcq-choice input[type="radio"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.igcse-esl-paper1-question__mcq-choice-letter {
	font-weight: 700;
	color: #0f172a;
	min-width: 1.5rem;
}

.igcse-esl-paper1-question__mcq-choice-text {
	flex: 1;
	line-height: 1.5;
	color: #334155;
}

/* Submit Container */
.igcse-esl-paper1-comprehension__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Submit Button */
.igcse-esl-paper1-comprehension__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.igcse-esl-paper1-comprehension__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.igcse-esl-paper1-comprehension__submit:active:not(:disabled) {
	transform: translateY(0);
}

.igcse-esl-paper1-comprehension__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hint Message */
.igcse-esl-paper1-comprehension__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

/* Error Message */
.igcse-esl-paper1-comprehension__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

/* Submitted Status */
.igcse-esl-paper1-comprehension__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.igcse-esl-paper1-comprehension__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

/* Empty State */
.igcse-esl-paper1-comprehension__empty {
	padding: 40px 20px;
	text-align: center;
	color: #64748b;
}

.igcse-esl-paper1-comprehension__empty p {
	margin: 0;
	font-size: 16px;
}

/* Scrollbar Styling */
.igcse-esl-paper1-comprehension__passages-content::-webkit-scrollbar,
.igcse-esl-paper1-comprehension__questions-content::-webkit-scrollbar {
	width: 8px;
}

.igcse-esl-paper1-comprehension__passages-content::-webkit-scrollbar-track,
.igcse-esl-paper1-comprehension__questions-content::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 4px;
}

.igcse-esl-paper1-comprehension__passages-content::-webkit-scrollbar-thumb,
.igcse-esl-paper1-comprehension__questions-content::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.igcse-esl-paper1-comprehension__passages-content::-webkit-scrollbar-thumb:hover,
.igcse-esl-paper1-comprehension__questions-content::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Section B summary textarea gets extra height */
.igcse-esl-paper1-question__answer--section-b-summary {
	min-height: 200px;
}

/* Section C Last Question - Larger textarea for essay-type questions */
.igcse-esl-paper1-question__answer--section-c-last {
	min-height: 200px;
}

/* Answer container for word count positioning */
.igcse-esl-paper1-question__answer-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Word count display */
.igcse-esl-paper1-question__word-count {
	align-self: flex-end;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
	padding: 2px 8px;
	background: #f1f5f9;
	border-radius: 4px;
	font-weight: 500;
}

/* ESL Exercise 5 & 6: Own naming (esl-card) - same layout as situational writing but independent */

.esl-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.esl-card__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	color: #475569;
}

.esl-card__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	min-height: 480px;
}

.esl-card__source-panel,
.esl-card__response-panel {
	border-radius: 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 1.25rem;
	box-sizing: border-box;
}

.esl-card__source-panel {
	border: none;
	box-shadow: none;
}

.esl-card__response-panel {
	border: none;
	box-shadow: none;
}

.esl-card__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
}

.esl-card__tab {
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1.4rem;
	color: #1d4ed8;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.2s ease;
	box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.2);
}

.esl-card__tab.is-active {
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.esl-card__panel {
	flex: 1;
	background: #fbfbff;
	border-radius: 12px;
	padding: 1.5rem;
	overflow-y: auto;
	min-height: 320px;
	border: 1px solid #e2e8f0;
	box-sizing: border-box;
}

.esl-card__question {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.esl-card__instructions {
	color: #475569;
	margin: 0 0 1rem 0;
	font-style: italic;
	font-size: 15px;
}

.esl-card__question-content {
	font-size: 15px;
	line-height: 1.6;
	color: #1e293b;
}

.esl-card__question-content ul {
	margin: 0 0 0.75rem 1.5rem;
	padding: 0;
	list-style: disc;
}

.esl-card__question-content li {
	margin-bottom: 0.25rem;
}

.esl-card__question-content .esl-card__survey-list {
	margin-top: 0.5rem;
	margin-bottom: 0.75rem;
}

.esl-card__insert-content {
	line-height: 1.6;
	color: #0f172a;
	margin-bottom: 1rem;
}

/* Image in Question: show only image; hide passage paragraphs */
.esl-card__insert-content.esl-insert-html .arg-passage-paragraph {
	display: none !important;
}

.esl-card__insert-content.esl-insert-html figure {
	margin: 0 0 1rem 0;
}

.esl-card__insert-content.esl-insert-html img {
	max-width: 40%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.esl-card__response-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	background: #3b82f6;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	box-shadow: none;
}

.esl-card__response-header h4 {
	margin: 0;
	font-size: 16px;
	color: inherit;
	font-weight: 600;
}

.esl-card__response-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.esl-card__textarea {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	border: 1.5px solid #cbd5e1;
	padding: 1rem;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
	background: #fff;
	color: #0f172a;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-sizing: border-box;
}

.esl-card__textarea::placeholder {
	color: #94a3b8;
	font-family: inherit;
}

.esl-card__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.esl-card__textarea:disabled {
	background: #f5f7fb;
	color: #94a3b8;
	cursor: not-allowed;
}

.esl-card__word-count {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #6b21a8;
	text-align: right;
}

.esl-card__actions {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.esl-card__submit {
	padding: 0.95rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.esl-card__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.esl-card__submit:not(:disabled):hover {
	transform: translateY(-1px);
}

.esl-card__status {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	font-weight: 600;
}

.esl-card__status--success {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.1);
}

.esl-card__status--pending {
	background: #fef9c3;
	border: 1px solid #fde68a;
	color: #854d0e;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.esl-card__error {
	padding: 0.85rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecdd3;
	border-radius: 10px;
	color: #b91c1c;
	font-weight: 500;
}

@media (max-width: 1024px) {
	.esl-card__split {
		grid-template-columns: 1fr;
	}
}
/* Modal Overlay */
.adjustment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

/* Modal Container */
.adjustment-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Modal Header */
.adjustment-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adjustment-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.modal-close-btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background-color: #f1f5f9;
}

/* Modal Body */
.adjustment-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Context Section */
.adjustment-context {
	margin-bottom: 20px;
}

.context-section {
	margin-bottom: 16px;
}

.context-section h4 {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text,
.student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.student-answer {
	border-left-color: #3b82f6;
}

/* AI Assessment Box */
.ai-assessment-box {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}

.ai-assessment-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 12px;
}

.ai-icon {
	font-size: 18px;
}

.ai-assessment-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-score {
	font-size: 14px;
	color: #78350f;
}

.ai-feedback-preview {
	font-size: 13px;
	color: #78350f;
	line-height: 1.5;
}

/* Divider */
.adjustment-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 20px 0;
}

/* Adjustment Fields */
.adjustment-field {
	margin-bottom: 20px;
}

.adjustment-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

/* Current Score Display */
.current-score-display {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-display-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.score-display-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
	display: flex;
	align-items: center;
	gap: 8px;
}

.score-change-indicator {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
	background: #f0f9ff;
	color: #1e40af;
	border: 1px solid #3b82f6;
}

/* Criteria Header with Hint */
.criteria-header-with-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criteria-hint:hover {
	background-color: #f1f5f9;
}

.hint-icon {
	font-size: 14px;
}

.hint-text {
	font-weight: 500;
}

/* Criteria List */
.criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.criterion-item {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.criterion-label input[type="checkbox"] {
	margin-top: 3px;
	cursor: pointer;
}

.criterion-icon {
	font-size: 14px;
	min-width: 16px;
}

.criterion-text {
	flex: 1;
	font-size: 14px;
	color: #334155;
}

.criterion-comment {
	margin: 8px 0 0 28px;
	font-size: 12px;
	color: #64748b;
	font-style: italic;
}

.criterion-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.criterion-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

/* Feedback Input */
.feedback-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
	min-height: 100px;
	transition: border-color 0.2s;
}

.feedback-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.grade-letter-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
	color: #1e293b;
}

.grade-letter-select:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Save error banner */
.adjustment-modal-error {
	margin: 0 24px 12px;
	padding: 10px 14px;
	border-radius: 6px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 14px;
	line-height: 1.4;
}

/* Modal Footer */
.adjustment-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.btn-secondary,
.btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
}

.btn-secondary {
	background: #f1f5f9;
	color: #475569;
}

.btn-secondary:hover {
	background: #e2e8f0;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

.btn-primary:hover {
	background: #2563eb;
}

.btn-primary:disabled,
.btn-secondary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
	.adjustment-modal {
		max-height: 95vh;
	}

	.current-score-display {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}

	.criteria-header-with-hint {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}
/* Custom Worksheet Marking Report Styles (mirrors English Paper 2 layout) */

.custom-worksheet-marking-report {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 1.5rem;
}

/* Loading State */
.custom-worksheet-marking-report__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.custom-worksheet-marking-report__spinner {
	margin-bottom: 20px;
}

.custom-worksheet-marking-report__spinner .spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e2e8f0;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

.custom-worksheet-marking-report__loading h3 {
	margin: 0 0 8px 0;
	color: #1e293b;
	font-size: 20px;
}

.custom-worksheet-marking-report__loading p {
	margin: 0;
	color: #64748b;
	font-size: 15px;
}

/* Pending Review State */
.custom-worksheet-marking-report__pending-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.custom-worksheet-pending-review-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.custom-worksheet-marking-report__pending-review h3 {
	margin: 0 0 8px 0;
	color: #78350f;
	font-size: 20px;
	font-weight: 600;
}

.custom-worksheet-marking-report__pending-review p {
	margin: 0;
	color: #92400e;
	font-size: 15px;
	max-width: 500px;
}

/* Error State */
.custom-worksheet-marking-report__error {
	padding: 40px 20px;
	text-align: center;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 12px;
}

.custom-worksheet-marking-report__error h3 {
	margin: 0 0 12px 0;
	color: #991b1b;
	font-size: 20px;
}

.custom-worksheet-marking-report__error p {
	margin: 0;
	color: #991b1b;
	font-size: 15px;
}

.custom-worksheet-retry-button {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.custom-worksheet-retry-button:hover:not(:disabled) {
	background: #5a67d8;
}

.custom-worksheet-retry-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Marks Section */
.custom-worksheet-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.custom-worksheet-marks-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.custom-worksheet-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	margin-bottom: 24px;
	color: white;
}

.custom-worksheet-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
}

.custom-worksheet-score-value {
	font-size: 32px;
	font-weight: 700;
}

.custom-worksheet-teacher-adjusted-indicator {
	font-size: 0.75em;
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

/* Custom Worksheet MCQ choices inside StudentCorrectionModal (mimics SPM Paper 1 MCQ modal UI) */
.custom-worksheet-marking-report .custom-worksheet-correction-mcq__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.custom-worksheet-marking-report .custom-worksheet-correction-mcq__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-worksheet-marking-report .custom-worksheet-correction-mcq__choice:hover {
	border-color: #94a3b8;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.custom-worksheet-marking-report .custom-worksheet-correction-mcq__choice input[type="radio"] {
	margin: 0;
}

.custom-worksheet-marking-report .custom-worksheet-correction-mcq__choice-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: #f1f5f9;
	font-weight: 600;
	color: #0f172a;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.custom-worksheet-marking-report .custom-worksheet-correction-mcq__choice-text {
	color: #1e293b;
	font-size: 0.95rem;
}

.custom-worksheet-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.custom-worksheet-badge-icon {
	font-size: 24px;
}

.custom-worksheet-badge-text {
	font-size: 16px;
	font-weight: 600;
}

.custom-worksheet-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.2);
}

.custom-worksheet-performance-badge.good {
	background: rgba(59, 130, 246, 0.2);
}

.custom-worksheet-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.2);
}

.custom-worksheet-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.2);
}

/* ─── Speaking overall activity grade ──────────────────────────────────── */
.custom-worksheet-marks-section--speaking .custom-worksheet-speaking-activity-grade {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 1rem 1.25rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.custom-worksheet-speaking-activity-grade__ring {
	width: 4.5rem;
	height: 4.5rem;
	min-width: 4.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid currentColor;
}

.custom-worksheet-speaking-activity-grade__letter {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
}

.custom-worksheet-speaking-activity-grade__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
}

.custom-worksheet-speaking-activity-grade__label {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
}

.custom-worksheet-speaking-activity-grade__sub {
	font-size: 0.875rem;
	color: #64748b;
}

/* ─── Per-question speaking grade badge ─────────────────────────────────── */
.speaking-grade-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	font-size: 1.1rem;
	font-weight: 800;
	border: 3px solid currentColor;
	line-height: 1;
}
.speaking-grade-badge--a { color: #16a34a; background: #f0fdf4; }
.speaking-grade-badge--b { color: #2563eb; background: #eff6ff; }
.speaking-grade-badge--c { color: #d97706; background: #fffbeb; }
.speaking-grade-badge--d { color: #ea580c; background: #fff7ed; }
.speaking-grade-badge--e { color: #dc2626; background: #fef2f2; }
.speaking-grade-badge--f { color: #7f1d1d; background: #fee2e2; }

/* Overall Feedback */
.custom-worksheet-marking-report__overall-feedback {
	padding: 20px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 12px;
}

.custom-worksheet-marking-report__overall-feedback h3 {
	margin: 0 0 12px 0;
	color: #0c4a6e;
	font-size: 18px;
}

.custom-worksheet-marking-report__overall-feedback p {
	margin: 0;
	color: #0369a1;
	line-height: 1.6;
}

/* Questions Section */
.custom-worksheet-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.custom-worksheet-marking-report__questions > h3 {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* Question Result Cards */
.custom-worksheet-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.custom-worksheet-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.custom-worksheet-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

.custom-worksheet-question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.custom-worksheet-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.custom-worksheet-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.custom-worksheet-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.custom-worksheet-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

.custom-worksheet-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.custom-worksheet-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

.custom-worksheet-question-result__audio {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

.custom-worksheet-question-result__audio strong {
	color: #1e293b;
}

.custom-worksheet-question-result__audio-player {
	width: 100%;
	height: 2.5rem;
	border-radius: 0.375rem;
}

/* ─── Speaking rubric breakdown ─────────────────────────── */
.custom-worksheet-speaking-rubric {
	font-size: 1.2rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	margin-bottom: 0.875rem;
}

.custom-worksheet-speaking-rubric__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin-bottom: 0.625rem;
}

.custom-worksheet-speaking-rubric__header strong {
	font-size: 1rem;
	color: #0f172a;
}

.custom-worksheet-speaking-rubric__evidence {
	font-size: 1rem;
	color: #64748b;
}

.custom-worksheet-speaking-rubric__widgets {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.custom-worksheet-speaking-rubric__widget {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: start;
	gap: 0.65rem 0.85rem;
	padding: 0.65rem 0.75rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
}

.custom-worksheet-speaking-rubric__grade-col {
	display: flex;
	justify-content: center;
	padding-top: 0.1rem;
}

.custom-worksheet-speaking-rubric__grade-ring {
	--score-pct: 0%;
	--ring-accent: #6366f1;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--ring-accent) var(--score-pct), #e2e8f0 0);
	position: relative;
	flex-shrink: 0;
}

.custom-worksheet-speaking-rubric__grade-ring::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: inherit;
	background: #ffffff;
}

.custom-worksheet-speaking-rubric__grade-ring--a {
	--ring-accent: #22c55e;
}
.custom-worksheet-speaking-rubric__grade-ring--b {
	--ring-accent: #84cc16;
}
.custom-worksheet-speaking-rubric__grade-ring--c {
	--ring-accent: #eab308;
}
.custom-worksheet-speaking-rubric__grade-ring--d {
	--ring-accent: #f97316;
}
.custom-worksheet-speaking-rubric__grade-ring--e {
	--ring-accent: #ef4444;
}
.custom-worksheet-speaking-rubric__grade-ring--f {
	--ring-accent: #64748b;
}

.custom-worksheet-speaking-rubric__grade-letter {
	position: relative;
	z-index: 1;
	font-size: 1rem;
	font-weight: 800;
	color: #1f2937;
	line-height: 1;
}

.custom-worksheet-speaking-rubric__grade-letter--a {
	color: #15803d;
}
.custom-worksheet-speaking-rubric__grade-letter--b {
	color: #4d7c0f;
}
.custom-worksheet-speaking-rubric__grade-letter--c {
	color: #a16207;
}
.custom-worksheet-speaking-rubric__grade-letter--d {
	color: #c2410c;
}
.custom-worksheet-speaking-rubric__grade-letter--e {
	color: #b91c1c;
}
.custom-worksheet-speaking-rubric__grade-letter--f {
	color: #475569;
}

.custom-worksheet-speaking-rubric__detail-col {
	min-width: 0;
}

.custom-worksheet-speaking-rubric__criterion-head {
	margin-bottom: 0.35rem;
}

.custom-worksheet-speaking-rubric__criterion-label {
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
}

.custom-worksheet-speaking-rubric__criterion-body {
	font-size: 1rem;
	color: #475569;
	line-height: 1.45;
}

.custom-worksheet-speaking-rubric__detail-text {
	margin: 0;
	font-size: 1rem;
}

.custom-worksheet-speaking-rubric__detail-text strong {
	font-size: 1rem;
}

.custom-worksheet-speaking-rubric__detail-text--model {
	margin-top: 0.45rem;
	padding: 0.45rem 0.55rem;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 0.45rem;
	color: #1e3a8a;
	font-size: 1rem;
}

.custom-worksheet-speaking-rubric__detail-text--quote,
.custom-worksheet-speaking-rubric__detail-text--quote span {
	font-size: 1rem;
	color: #334155;
}

.custom-worksheet-speaking-rubric__detail-meta {
	margin: 0.35rem 0 0;
	font-size: 1rem;
	color: #64748b;
}

.custom-worksheet-speaking-rubric__detail-list {
	margin: 0;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 1rem;
}

.custom-worksheet-speaking-rubric__grammar-errors-list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.custom-worksheet-speaking-rubric__grammar-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.55rem;
	padding: 0.45rem 0.55rem;
	background: #fff7ed;
	border: 1px solid #fdba74;
	border-radius: 0.5rem;
}

.custom-worksheet-speaking-rubric__grammar-error-type {
	display: inline-flex;
	align-items: center;
	padding: 0.18rem 0.45rem;
	border-radius: 9999px;
	background: #ffedd5;
	color: #9a3412;
	font-size: 1rem;
	font-weight: 700;
	text-transform: capitalize;
}

.custom-worksheet-speaking-rubric__grammar-error-text {
	font-size: 1rem;
	color: #7c2d12;
	line-height: 1.45;
}

.custom-worksheet-speaking-rubric__grammar-error-text mark {
	font-size: 1rem;
	background: #fef08a;
	color: #78350f;
	padding: 0.08rem 0.22rem;
	border-radius: 0.22rem;
}

.custom-worksheet-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-question-result__answer strong {
	color: #1e293b;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__answer-text em {
	color: #94a3b8;
}

.custom-worksheet-grammar-answer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}

.custom-worksheet-grammar-answer-grid__header {
	font-size: 0.8rem;
	font-weight: 700;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-bottom: 4px;
	border-bottom: 1px solid #cbd5e1;
}

.custom-worksheet-grammar-answer-grid__cell {
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #ffffff;
	color: #334155;
	min-height: 38px;
	display: flex;
	align-items: center;
}

.custom-worksheet-grammar-fillblank-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-grammar-fillblank-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.custom-worksheet-grammar-fillblank-item__label {
	font-size: 0.8rem;
	font-weight: 700;
	color: #475569;
	min-width: 62px;
}

.custom-worksheet-grammar-fillblank-item__value {
	padding: 6px 10px;
	border-radius: 9999px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	color: #0f172a;
}

.custom-worksheet-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__feedback--akami {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.65rem 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.custom-worksheet-question-result__feedback-col--avatar {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Override global marking-modal bounce — keep avatar static in report rows */
.custom-worksheet-question-result__feedback--akami .lj-marking-modal-akami-host {
	animation: none;
	margin-bottom: 0;
	transform: none;
}

.custom-worksheet-question-result__feedback--akami .lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 3.7125rem;
	height: 3.7125rem;
	max-width: 3.7125rem;
	max-height: 3.7125rem;
	object-fit: contain;
	object-position: center center;
}

.custom-worksheet-question-result__feedback--akami .lj-marking-modal-akami-emoji {
	font-size: 2.4975rem;
	line-height: 1;
	display: block;
}

.custom-worksheet-question-result__feedback-col--body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.custom-worksheet-question-result__feedback-head {
	display: block;
}

.custom-worksheet-question-result__feedback-head strong {
	margin-bottom: 0;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-question-result__criteria strong {
	color: #1e293b;
}

.custom-worksheet-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.custom-worksheet-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.custom-worksheet-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.custom-worksheet-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.custom-worksheet-criteria-item.awarded .custom-worksheet-criteria-icon {
	background: #22c55e;
	color: white;
}

.custom-worksheet-criteria-item.not-awarded .custom-worksheet-criteria-icon {
	background: #ef4444;
	color: white;
}

.custom-worksheet-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.custom-worksheet-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.custom-worksheet-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.custom-worksheet-criteria-item.hidden-criterion {
	opacity: 0.6;
}

.custom-worksheet-criteria-hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

@media (max-width: 640px) {
	.custom-worksheet-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.custom-worksheet-question-result__actions {
		flex-direction: column;
		width: 100%;
	}

	.custom-worksheet-question-action {
		width: 100%;
	}
}

.custom-worksheet-marking-report__section {
	margin-top: 20px;
}

.custom-worksheet-marking-report__section .custom-worksheet-question-result + .custom-worksheet-question-result {
	margin-top: 16px;
}

.custom-worksheet-marking-report__section-header {
	padding: 12px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-bottom: 16px;
}

.custom-worksheet-marking-report__section-header h4 {
	margin: 0;
	font-size: 1.1rem;
	color: #1e293b;
}

.custom-worksheet-marking-report__section-title {
	margin: 6px 0 0 0;
	color: #64748b;
	font-size: 0.95rem;
}

.custom-worksheet-marking-report__no-submission {
	padding: 14px 16px;
	border: 1px dashed #cbd5f5;
	border-radius: 8px;
	color: #64748b;
	background: #f8fafc;
	margin-bottom: 16px;
}

.custom-worksheet-question-result__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.custom-worksheet-question-action {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	background: #fff;
	color: #1e293b;
	border: 1px solid #cbd5f5;
}

.custom-worksheet-question-action.custom-worksheet-question-action--adjust {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
	position: relative;
}

.custom-worksheet-question-action.custom-worksheet-question-action--correction {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.custom-worksheet-question-action:hover:not(:disabled) {
	transform: translateY(-1px);
}

.custom-worksheet-question-action.custom-worksheet-question-action--correction:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.custom-worksheet-question-action.custom-worksheet-question-action--correction.custom-worksheet-question-action--correction-completed:disabled {
	background: #16a34a;
	color: #ffffff;
	opacity: 1;
	border: none;
	box-shadow: none;
}

.teacher-help-notification {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.teacher-help-notification__icon {
	font-size: 1.5rem;
	line-height: 1;
	animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.teacher-help-notification__title {
	font-size: 1rem;
	font-weight: 700;
	color: #065f46;
}

.teacher-help-notification__content {
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.teacher-help-notification__message {
	font-size: 0.9375rem;
	color: #047857;
	line-height: 1.6;
	margin: 0 0 0.75rem 0;
}

.teacher-help-notification__hint {
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	color: #78350f;
	margin-bottom: 0.75rem;
}

.teacher-help-notification__hint strong {
	color: #b45309;
}

.teacher-help-notification__reset {
	font-size: 0.875rem;
	color: #065f46;
	margin: 0 0 0.75rem 0;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta {
	margin-left: 2.25rem;
	background: #10b981;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta:hover {
	background: #059669;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Custom worksheet correction modal paragraph numbering */
.custom-worksheet-marking-report .passage-content .arg-passage-paragraph-number {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	color: #64748b;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 1rem;
	margin-top: 0.125rem;
}

.custom-worksheet-teacher-view {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.custom-worksheet-release-banner {
	background-color: #d1fae5;
	border-radius: 8px;
	padding: 1rem 1.5rem;
	margin-top: 4px;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.custom-worksheet-release-banner__icon {
	font-size: 2rem;
}

.custom-worksheet-release-banner__title {
	font-weight: 600;
	color: #065f46;
	margin-bottom: 0.25rem;
}

.custom-worksheet-release-banner__subtitle {
	font-size: 0.875rem;
	color: #047857;
}

.custom-worksheet-teacher-view__questions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 20px;
}

.custom-worksheet-teacher-question {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.custom-worksheet-teacher-question:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.custom-worksheet-teacher-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 2px solid #f1f5f9;
	gap: 16px;
}

.custom-worksheet-teacher-question__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.custom-worksheet-teacher-question__score.full {
	background: #d1fae5;
	color: #065f46;
}

.custom-worksheet-teacher-question__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.custom-worksheet-teacher-question__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

.custom-worksheet-teacher-question__edit-btn,
.custom-worksheet-teacher-question__feedback-btn,
.custom-worksheet-teacher-question__corrections-btn {
	padding: 0.5rem 1rem;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.custom-worksheet-teacher-question__edit-btn {
	background: #dbeafe;
	color: #1d4ed8;
}

.custom-worksheet-teacher-question__feedback-btn {
	background: #ede9fe;
	color: #5b21b6;
}

.custom-worksheet-teacher-question__corrections-btn {
	background: #d1fae5;
	color: #065f46;
}

.custom-worksheet-teacher-question__edit-btn:hover,
.custom-worksheet-teacher-question__feedback-btn:hover,
.custom-worksheet-teacher-question__corrections-btn:hover {
	transform: translateY(-1px);
}

.custom-worksheet-question-result__teacher-feedback {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0.75rem 0 0.5rem;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	border: 1px solid #ddd6fe;
	background: #f5f3ff;
}

/* Same footprint as AI feedback avatar in this report (.feedback--akami .lj-marking-modal-akami) */
.custom-worksheet-question-result__teacher-feedback-col--avatar {
	flex-shrink: 0;
	width: 3.7125rem;
	height: 3.7125rem;
	border-radius: 50%;
	overflow: hidden;
	background: #e9d5ff;
	border: 2px solid #c4b5fd;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-worksheet-question-result__teacher-avatar-img {
	width: 3.7125rem;
	height: 3.7125rem;
	max-width: 3.7125rem;
	max-height: 3.7125rem;
	object-fit: contain;
	object-position: center center;
}

.custom-worksheet-question-result__teacher-avatar-placeholder {
	font-size: 2.4975rem;
	font-weight: 700;
	color: #5b21b6;
	line-height: 1;
}

@media (max-width: 768px) {
	.custom-worksheet-question-result__teacher-feedback-col--avatar {
		width: 3.5rem;
		height: 3.5rem;
	}

	.custom-worksheet-question-result__teacher-avatar-img {
		width: 3.5rem;
		height: 3.5rem;
		max-width: 3.5rem;
		max-height: 3.5rem;
	}

	.custom-worksheet-question-result__teacher-avatar-placeholder {
		font-size: 2rem;
	}
}

.custom-worksheet-question-result__teacher-feedback-col--body {
	flex: 1;
	min-width: 0;
}

.custom-worksheet-question-result__teacher-feedback strong {
	display: block;
	margin-bottom: 0.35rem;
	color: #5b21b6;
	font-size: 1.2rem;
}

.custom-worksheet-question-result__teacher-feedback p {
	margin: 0;
	color: #4c1d95;
	font-size: 1.2rem;
	line-height: 1.5;
}

.custom-worksheet-teacher-question__question,
.custom-worksheet-teacher-question__answer {
	margin-top: 12px;
	color: #475569;
	line-height: 1.6;
	font-size: 1.2rem;
}

.custom-worksheet-teacher-question__answer strong {
	font-size: 1.2rem;
}

.custom-worksheet-teacher-question__answer-text {
	margin-top: 6px;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	font-size: 1.2rem;
	color: #334155;
}

/* Teacher view criteria list (custom worksheet-prefixed copy of GP P2 styles) */
.custom-worksheet-teacher-criteria-list {
	list-style: none;
	margin: 16px 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-teacher-criteria-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.custom-worksheet-teacher-criteria-item.awarded {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.custom-worksheet-teacher-criteria-item.not-awarded {
	background: #fef2f2;
	border-color: #fecaca;
}

.custom-worksheet-teacher-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.custom-worksheet-teacher-criteria-item.awarded .custom-worksheet-teacher-criteria-icon {
	background: #22c55e;
	color: #fff;
}

.custom-worksheet-teacher-criteria-item.not-awarded .custom-worksheet-teacher-criteria-icon {
	background: #ef4444;
	color: #fff;
}

.custom-worksheet-teacher-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.custom-worksheet-teacher-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.custom-worksheet-teacher-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.custom-worksheet-teacher-question__criteria-list {
	list-style: none;
	margin: 16px 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.custom-worksheet-teacher-question__criteria-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.custom-worksheet-teacher-question__criteria-item.awarded {
	border-color: #d1fae5;
	background: #ecfdf5;
}

.custom-worksheet-teacher-question__criteria-item.not-awarded {
	border-color: #fee2e2;
	background: #fef2f2;
}

.custom-worksheet-teacher-question__criteria-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e0f2fe;
	color: #1d4ed8;
	font-weight: 700;
}

.custom-worksheet-teacher-question__criteria-content {
	flex: 1;
}

.custom-worksheet-teacher-question__criteria-text {
	font-weight: 600;
	color: #1e293b;
}

.custom-worksheet-teacher-question__criteria-comment {
	font-size: 0.9rem;
	color: #475569;
	margin-top: 4px;
}
.custom-worksheet-question-action:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
.spm-split-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  background: #f7f8fb;
  border-radius: 24px;
}

.spm-split-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 2rem;
  display: grid;
  grid-template-columns: minmax(320px, 0.58fr) minmax(280px, 0.42fr);
  gap: 1.25rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.spm-passage-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.spm-passage-column {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
}

.spm-question-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  background: #f8f9fb;
  border-radius: 20px;
  padding: 1.5rem;
}


.spm-question-card {
  background: #f8f9fb;
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spm-question-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.spm-question-card__number {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.spm-question-card__marks {
  font-size: 0.95rem;
  color: #475569;
}

.spm-question-card__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #111827;
}

.spm-submit-container {
  margin-top: 2rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.spm-submit-button {
  width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.spm-submit-button:disabled {
  opacity: 0.6;
  box-shadow: none;
  cursor: not-allowed;
}

.spm-submit-button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45);
}

.spm-submit-hint {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  text-align: center;
}

.spm-error-message {
  width: 100%;
  background: #fee2e2;
  color: #b91c1c;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  border: 1px solid #fecaca;
  text-align: center;
}

.spm-submitted-message {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #dbeafe;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  text-align: center;
}

@media (max-width: 960px) {
  .spm-split-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
}
/* SPM Paper 1 Part 1 Comprehension Card Styles */
.smp-paper1-part1-card {
  max-width: 100%;
}

.smp-passage-header-bar {
  padding: 0;
}

.smp-passage-label {
  display: inline-flex;
  background: #3b82f6;
  color: white;
  padding: 4px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.smp-passage {
  background: #f9fbff;
  padding: 1.5rem;
}

.smp-passage-subtitle {
  font-style: italic;
  color: #4b5563;
  margin-bottom: 1rem;
}

.smp-passage-text {
  line-height: 1.65;
  color: #111827;
  text-align: justify;
}

.smp-passage-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.smp-question-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

/* Activity Footer (GP Style) */
.smp-activity-footer {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  padding: 1rem;
  border-top: 2px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Edit Controls */
.smp-edit-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #007cba;
}

/* Editing Mode */
.spm-paper1-part1-editing {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid #ddd;
}

.smp-editing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #007cba;
}

.smp-editing-header h3 {
  margin: 0;
  color: #007cba;
}

.smp-editing-actions {
  display: flex;
  gap: 1rem;
}

.smp-theme-editing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.smp-form-group {
  margin-bottom: 1rem;
}

.smp-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.smp-form-group input,
.smp-form-group textarea,
.smp-form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
}

.smp-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Section Headers */
.smp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
}

.smp-section-header h4 {
  margin: 0;
  color: #333;
}

/* Passage Editor */
.smp-passage-editor {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.smp-passage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.smp-passage-header h5 {
  margin: 0;
  color: #007cba;
}

/* Question Editor */
.smp-question-editor {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.smp-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.smp-question-header h5 {
  margin: 0;
  color: #007cba;
}

/* Choice Editor */
.smp-choice-editor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
}

.smp-choice-editor input[type="text"] {
  flex: 1;
  margin: 0;
}

.smp-choice-editor label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  color: #007cba;
  font-weight: 600;
}

/* Student View */
.smp-paper1-part1-student {
  max-width: 100%;
}

.smp-paper-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
  color: white;
  border-radius: 8px;
}

.smp-paper-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.smp-theme,
.smp-sub-theme {
  margin: 0.25rem 0;
  opacity: 0.9;
  font-size: 0.9rem;
}

/* Passage Section */
.smp-passage-section {
  margin-bottom: 3rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.smp-passage {
  background: #f8f9fa;
  padding: 1.5rem;
}

.smp-passage h3 {
  margin: 0 0 0.5rem 0;
  color: #007cba;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smp-passage h4 {
  margin: 0 0 1rem 0;
  color: #333;
  font-size: 1.2rem;
}

.smp-passage-text p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #333;
}

.smp-passage-text p:last-child {
  margin-bottom: 0;
}

/* Questions */
.smp-questions {
  padding: 1.5rem;
  background: white;
}

.smp-questions h4 {
  margin: 0 0 1.5rem 0;
  color: #007cba;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smp-question {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}

.smp-question:last-child {
  margin-bottom: 0;
}

.smp-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.smp-question-number {
  background: #007cba;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.smp-marks {
  background: #28a745;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.smp-question-text {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  font-weight: 500;
}

/* Choices */
.smp-choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.smp-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.smp-choice:hover {
  border-color: #007cba;
  box-shadow: 0 2px 8px rgba(0, 124, 186, 0.1);
}

.smp-choice input[type="radio"] {
  margin: 0;
  margin-top: 0.1rem;
}

.smp-choice input[type="radio"]:checked + .smp-choice-letter {
  background: #007cba;
  color: white;
}

.smp-choice-letter {
  background: #f0f0f0;
  color: #666;
  padding: 0.5rem;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 2rem;
  text-align: center;
  transition: all 0.2s ease;
}

.smp-choice-text {
  flex: 1;
  line-height: 1.4;
  color: #333;
}

/* Submit Section */
.smp-submit-section {
  margin-top: 3rem;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #ddd;
}

.smp-progress {
  margin-bottom: 1rem;
}

.smp-progress p {
  margin: 0;
  font-size: 1rem;
  color: #666;
}

.smp-error {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8d7da;
  color: #721c24;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
}

.smp-error p {
  margin: 0;
}

.smp-warning {
  margin-top: 1rem;
  color: #856404;
  font-size: 0.9rem;
}

/* Submitted State */
.smp-submitted {
  margin-top: 3rem;
  padding: 2rem;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  text-align: center;
}

.smp-submitted p {
  margin: 0.5rem 0;
  color: #155724;
}

.smp-submitted p:first-child {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Button Styles (matching GP style) */
.lj-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 0.5rem;
}

.lj-button--primary {
  background: #007cba;
  color: white;
}

.lj-button--primary:hover {
  background: #005a87;
}

.lj-button--secondary {
  background: #6c757d;
  color: white;
}

.lj-button--secondary:hover {
  background: #545b62;
}

.lj-button--danger {
  background: #dc3545;
  color: white;
}

.lj-button--danger:hover {
  background: #c82333;
}

.lj-button--small {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.lj-button--large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.lj-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
  .smp-theme-editing {
    grid-template-columns: 1fr;
  }
  
  .smp-editing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .smp-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .smp-passage-header,
  .smp-question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .smp-choice-editor {
    flex-direction: column;
    align-items: stretch;
  }
  
  .smp-question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}/* English Paper 2 Marking Report Styles */

.spm-english-paper1-marking-report {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Loading State */
.spm-english-paper1-marking-report__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.spm-english-paper1-marking-report__spinner {
	margin-bottom: 20px;
}

.spm-english-paper1-marking-report__spinner .spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e2e8f0;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Small inline spinner for buttons */
.spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

.spm-english-paper1-marking-report__loading h3 {
	margin: 0 0 8px 0;
	color: #1e293b;
	font-size: 20px;
}

.spm-english-paper1-marking-report__loading p {
	margin: 0;
	color: #64748b;
	font-size: 15px;
}

/* Pending Review State */
.spm-english-paper1-marking-report__pending-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.spm-english-paper1-marking-report__pending-review .pending-review-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.spm-english-paper1-marking-report__pending-review h3 {
	margin: 0 0 8px 0;
	color: #78350f;
	font-size: 20px;
	font-weight: 600;
}

.spm-english-paper1-marking-report__pending-review p {
	margin: 0;
	color: #92400e;
	font-size: 15px;
	max-width: 500px;
}

/* Error State */
.spm-english-paper1-marking-report__error {
	padding: 40px 20px;
	text-align: center;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 12px;
}

.spm-english-paper1-marking-report__error h3 {
	margin: 0 0 12px 0;
	color: #991b1b;
	font-size: 20px;
}

.spm-english-paper1-marking-report__error p {
	margin: 0;
	color: #991b1b;
	font-size: 15px;
}

/* Retry Button */
.spm-english-paper1-marking-report .retry-button {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.spm-english-paper1-marking-report .retry-button:hover:not(:disabled) {
	background: #5a67d8;
}

.spm-english-paper1-marking-report .retry-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Marks Section Styles */
.spm-english-paper1-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.spm-english-paper1-marks-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.spm-english-paper1-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	margin-bottom: 24px;
	color: white;
}

.spm-english-paper1-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spm-english-paper1-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
}

.spm-english-paper1-score-value {
	font-size: 32px;
	font-weight: 700;
}

.spm-english-paper1-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.spm-english-paper1-badge-icon {
	font-size: 24px;
}

.spm-english-paper1-badge-text {
	font-size: 16px;
	font-weight: 600;
}

.spm-english-paper1-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.2);
}

.spm-english-paper1-performance-badge.good {
	background: rgba(59, 130, 246, 0.2);
}

.spm-english-paper1-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.2);
}

.spm-english-paper1-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.2);
}

.spm-english-paper1-marks-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.spm-english-paper1-mark-category {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	border-left: 4px solid #667eea;
}

.spm-english-paper1-mark-category h4 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 600;
	color: #2d3748;
}

.spm-english-paper1-mark-display {
	margin-top: 8px;
}

.spm-english-paper1-mark-score {
	font-size: 24px;
	font-weight: 700;
	color: #667eea;
}

/* Header */
.spm-english-paper1-marking-report__header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 24px;
	border-radius: 12px;
	color: white;
}

.spm-english-paper1-marking-report__header h2 {
	margin: 0 0 16px 0;
	font-size: 24px;
	font-weight: 700;
}

/* Score Card */
.spm-english-paper1-marking-report__score-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.spm-english-paper1-marking-report__score-main {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.spm-english-paper1-marking-report__score-value {
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
}

.spm-english-paper1-marking-report__score-divider {
	font-size: 28px;
	opacity: 0.7;
}

.spm-english-paper1-marking-report__score-total {
	font-size: 28px;
	opacity: 0.9;
}

.spm-english-paper1-marking-report__score-percentage {
	margin-left: auto;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 20px;
	font-weight: 700;
}

/* Overall Feedback */
.spm-english-paper1-marking-report__overall-feedback {
	padding: 20px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 12px;
}

.spm-english-paper1-marking-report__overall-feedback h3 {
	margin: 0 0 12px 0;
	color: #0c4a6e;
	font-size: 18px;
}

.spm-english-paper1-marking-report__overall-feedback p {
	margin: 0;
	color: #0369a1;
	line-height: 1.6;
}

/* Questions Section */
.spm-english-paper1-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.spm-english-paper1-marking-report__questions > h3 {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* Individual Question Result */
.spm-english-paper1-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.spm-english-paper1-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.spm-english-paper1-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

/* Question Number Pill Badge */
.question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.spm-english-paper1-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.spm-english-paper1-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.spm-english-paper1-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.spm-english-paper1-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

/* Question Text */
.spm-english-paper1-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.spm-english-paper1-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

/* Answer */
.spm-english-paper1-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spm-english-paper1-question-result__answer strong {
	color: #1e293b;
}

.spm-english-paper1-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
}

.spm-english-paper1-question-result__answer-text em {
	color: #94a3b8;
}

/* Marking Criteria */
.spm-english-paper1-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spm-english-paper1-question-result__criteria strong {
	color: #1e293b;
}

.spm-english-paper1-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spm-english-paper1-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.spm-english-paper1-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.spm-english-paper1-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.spm-english-paper1-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.spm-english-paper1-criteria-item.awarded .spm-english-paper1-criteria-icon {
	background: #22c55e;
	color: white;
}

.spm-english-paper1-criteria-item.not-awarded .spm-english-paper1-criteria-icon {
	background: #ef4444;
	color: white;
}

.spm-english-paper1-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.spm-english-paper1-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.spm-english-paper1-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

/* Hidden criterion styling for students */
.spm-english-paper1-criteria-item.hidden-criterion {
	opacity: 0.6;
}

.spm-english-paper1-criteria-hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

/* Question Feedback */
.spm-english-paper1-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
}

.spm-english-paper1-question-result__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.spm-english-paper1-question-result__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px) {
	.spm-english-paper1-marking-report__score-card {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.spm-english-paper1-marking-report__score-percentage {
		margin-left: 0;
	}
	
	.spm-english-paper1-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ============================================
   CORRECTIONS FEATURE STYLES
   ============================================ */

/* Corrections Overview (Progress Tracker) */
.corrections-overview {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 1.5rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.corrections-overview h4 {
	margin: 0 0 1rem 0;
	font-size: 18px;
	font-weight: 600;
}

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

.progress-stat {
	background: rgba(255, 255, 255, 0.2);
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	backdrop-filter: blur(10px);
}

.progress-stat.need-help {
	background: rgba(239, 68, 68, 0.3);
}

.progress-stat.not-started {
	background: rgba(148, 163, 184, 0.3);
}

.stat-value {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	display: block;
	font-size: 13px;
	opacity: 0.9;
	font-weight: 500;
}

.deadline-info {
	text-align: center;
	font-size: 14px;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	font-weight: 500;
}

/* Question Correction Section */
.question-correction-section {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: #f8fafc;
	border-left: 4px solid #667eea;
	border-radius: 8px;
}

.correction-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.correction-header h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.deadline-badge {
	background: #dbeafe;
	color: #1e40af;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

.deadline-passed-badge {
	background: #fee2e2;
	color: #991b1b;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

/* Status Indicators */
.need-help-status {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.need-help-status .status-icon {
	font-size: 24px;
	line-height: 1;
}

.need-help-status .status-content {
	flex: 1;
}

.need-help-status strong {
	display: block;
	color: #92400e;
	margin-bottom: 0.25rem;
	font-size: 15px;
}

.need-help-status p {
	margin: 0;
	color: #78350f;
	font-size: 14px;
}

.attempts-info {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: #e0e7ff;
	border-radius: 6px;
}

.attempts-badge {
	font-weight: 600;
	color: #3730a3;
	font-size: 14px;
}

.attempts-remaining {
	font-size: 13px;
	color: #4338ca;
}

/* Previous Attempts */
.previous-attempts {
	margin-bottom: 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
}

.previous-attempts summary {
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 14px;
	user-select: none;
}

.previous-attempts summary:hover {
	background: #e2e8f0;
}

.attempts-list {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.attempt-item {
	padding: 1rem;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.attempt-date {
	font-size: 12px;
	color: #64748b;
}

.attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
}

/* Correction Form */
.correction-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.correction-textarea {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
}

.correction-textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.correction-textarea::placeholder {
	color: #94a3b8;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.word-count {
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}

.word-count.insufficient {
	color: #dc2626;
}

.button-group {
	display: flex;
	gap: 0.75rem;
}

.btn-need-help,
.btn-submit-correction {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-need-help {
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.btn-need-help:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.btn-submit-correction {
	background: #667eea;
	color: white;
}

.btn-submit-correction:hover:not(:disabled) {
	background: #5a67d8;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-need-help:disabled,
.btn-submit-correction:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Responsive */
@media (max-width: 640px) {
	.progress-grid {
		grid-template-columns: 1fr;
	}
	
	.correction-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.form-footer {
		flex-direction: column;
		align-items: stretch;
	}
	
	.button-group {
		flex-direction: column;
	}
	
	.btn-need-help,
	.btn-submit-correction {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   TEACHER CORRECTIONS VIEW
   ============================================ */

.teacher-corrections-view {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border: 2px solid #3b82f6;
	border-radius: 8px;
}

.teacher-corrections-view .correction-header.teacher-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #bfdbfe;
}

.teacher-corrections-view .correction-header.teacher-header h5 {
	margin: 0;
	color: #1e40af;
	font-size: 16px;
	font-weight: 600;
}

.need-help-badge-teacher {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 1px solid #ef4444;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #991b1b;
	animation: pulse 2s ease-in-out infinite;
}

.correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: white;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

.correction-status-summary .status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-status-summary .status-item .label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.correction-status-summary .status-item .value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.correction-status-summary .status-item .value.status-in_progress {
	color: #f59e0b;
}

.correction-status-summary .status-item .value.status-need_help {
	color: #ef4444;
}

.correction-status-summary .status-item .value.status-not_started {
	color: #64748b;
}

.teacher-attempts-list {
	margin-top: 1rem;
}

.teacher-attempts-list h6 {
	margin: 0 0 0.75rem 0;
	color: #475569;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 0.75rem;
	transition: all 0.2s;
}

.teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.teacher-attempt-item .attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.teacher-attempt-item .attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.teacher-attempt-item .attempt-date {
	font-size: 12px;
	color: #64748b;
}

.teacher-attempt-item .attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.no-attempts {
	padding: 1.5rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	text-align: center;
}

.no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
	.teacher-corrections-view {
		padding: 1rem;
	}
	
	.correction-status-summary {
		grid-template-columns: 1fr;
	}
	
	.teacher-attempt-item {
		padding: 0.875rem;
	}
}


/* AI Feedback Panel */
.ai-feedback-panel {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
	border: 1px solid #bae6fd;
	border-radius: 8px;
}

.ai-feedback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #bae6fd;
}

.ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: white;
	border: 1px solid #38bdf8;
	border-radius: 6px;
	color: #0284c7;
	font-size: 13px;
	font-weight: 600;
}

.quality-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.quality-badge.quality-excellent {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.quality-badge.quality-good {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

.quality-badge.quality-partial {
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fcd34d;
}

.quality-badge.quality-minimal {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.feedback-section {
	margin-bottom: 1rem;
}

.feedback-section:last-child {
	margin-bottom: 0;
}

.feedback-section h6 {
	margin: 0 0 0.5rem 0;
	color: #0c4a6e;
	font-size: 14px;
	font-weight: 600;
}

.feedback-section.improvements h6 {
	color: #15803d;
}

.feedback-section.still-missing h6 {
	color: #b45309;
}

.feedback-section.next-steps h6 {
	color: #7c3aed;
}

.feedback-section ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: disc;
}

.feedback-section li {
	margin-bottom: 0.375rem;
	color: #334155;
	font-size: 14px;
	line-height: 1.6;
}

.feedback-section.main-feedback p {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-wrap;
}

.feedback-section.next-steps p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
	line-height: 1.6;
	font-style: italic;
	padding-left: 1rem;
	border-left: 3px solid #c4b5fd;
}

/* AI Feedback Loading */
.ai-feedback-loading {
	margin-top: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #fde68a;
	border-top-color: #f59e0b;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.ai-feedback-loading span {
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
}

/* Make previous attempts expanded by default when they have feedback */
.previous-attempts[open] summary {
	margin-bottom: 1rem;
}

/* Model Answer Section */
.model-answer-section {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #86efac;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.model-answer-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #86efac;
}

.model-answer-icon {
	font-size: 1.5rem;
}

.model-answer-header h5 {
	margin: 0;
	color: #15803d;
	font-size: 1.25rem;
	font-weight: 700;
}

.model-answer-intro {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: white;
	border-left: 4px solid #22c55e;
	border-radius: 6px;
}

.model-answer-intro p {
	margin: 0;
	color: #166534;
	font-size: 0.938rem;
	font-weight: 500;
}

.model-answer-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.model-answer-text,
.model-answer-points,
.model-answer-explanation {
	padding: 1.25rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.model-answer-text strong,
.model-answer-points strong,
.model-answer-explanation strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #15803d;
	font-size: 1rem;
	font-weight: 600;
}

.model-answer-text p,
.model-answer-explanation p {
	margin: 0;
	color: #334155;
	font-size: 0.938rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.model-answer-points ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: none;
}

.model-answer-points li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.5rem;
	color: #475569;
	font-size: 0.938rem;
	line-height: 1.6;
}

.model-answer-points li:before {
	content: "→";
	position: absolute;
	left: 0;
	color: #22c55e;
	font-weight: 700;
}

.model-answer-points li:last-child {
	margin-bottom: 0;
}

/* Criteria Hint */
.spm-english-paper1-criteria-hint {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-left: 3px solid #94a3b8;
	border-radius: 4px;
}

.spm-english-paper1-criteria-hint p {
	margin: 0;
	font-size: 0.875rem;
	color: #64748b;
	margin-top: 0.5rem;
	font-style: italic;
}

/* ============================================================
   Teacher banners + controls (GP Paper 2 structure, SPM classes)
   ============================================================ */

.spm-english-paper1-release-banner {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #d1fae5;
	border-radius: 8px;
	padding: 1rem 1.5rem;
	margin: 4px 2px 0.75rem;
}

.spm-english-paper1-release-banner__icon {
	font-size: 2rem;
}

.spm-english-paper1-release-banner__title {
	font-weight: 600;
	color: #065f46;
	margin-bottom: 0.25rem;
}

.spm-english-paper1-release-banner__subtitle {
	font-size: 0.875rem;
	color: #047857;
}

.spm-english-paper1-marking-report__questions-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.75rem;
}

.allow-corrections-control {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}

.allow-corrections-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #334155;
	user-select: none;
	cursor: pointer;
	position: relative;
}

.allow-corrections-toggle__label {
	white-space: nowrap;
}

.allow-corrections-toggle input {
	/* Visually hidden but still clickable (overlay the switch) */
	position: absolute;
	opacity: 0;
	width: 40px;
	height: 22px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.allow-corrections-toggle__switch {
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: #cbd5e1;
	position: relative;
	transition: background 0.2s;
	flex: 0 0 auto;
	cursor: pointer;
	z-index: 1;
}

.allow-corrections-toggle input:disabled + .allow-corrections-toggle__switch {
	opacity: 0.6;
	cursor: not-allowed;
}

.allow-corrections-toggle__switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: transform 0.2s;
}

.allow-corrections-toggle input:checked + .allow-corrections-toggle__switch {
	background: #10b981;
}

.allow-corrections-toggle input:checked + .allow-corrections-toggle__switch::after {
	transform: translateX(18px);
}

.allow-corrections-error {
	color: #b91c1c;
	font-size: 0.8125rem;
}

.corrections-disabled-banner {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin: 0.5rem 0 1rem;
	font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 640px) {
	.model-answer-section {
		padding: 1rem;
	}
	
	.model-answer-text,
	.model-answer-points,
	.model-answer-explanation {
		padding: 1rem;
	}
}

/* Teacher View - Hide CardShell border and header */
.teacher-view-no-shell {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: transparent !important;
}

.teacher-view-no-shell .lj-card__header {
	display: none !important;
}

.teacher-view-no-shell .lj-card__body {
	padding: 0 !important;
}

/* Correction Criteria Section */
.correction-criteria-section {
	margin-top: 1rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.correction-criteria-section strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.correction-criteria-section .spm-english-paper1-criteria-list {
	margin: 0;
}

.criteria-hint-correction {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: #fef3c7;
	border-radius: 6px;
	border: 1px solid #fbbf24;
}

/* Teacher AI Feedback in Attempts */
.teacher-ai-feedback {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.teacher-feedback-text {
	margin-top: 0.75rem;
}

.teacher-feedback-text strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.teacher-feedback-text p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Correction Improvements Indicator */
.correction-improvements-indicator {
	padding: 0.75rem;
	background: #d1fae5;
	border-radius: 8px;
	border: 1px solid #10b981;
}

.correction-improvements-indicator strong {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #065f46;
}

.correction-improvements-indicator .spm-english-paper1-criteria-list {
	margin-top: 0.5rem;
}

.correction-improvements-indicator .spm-english-paper1-criteria-item {
	background: white;
	border-color: #10b981;
}

/* Via Correction Pill Badge */
.via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

/* Successful Correction Display (Teacher View) */
.successful-correction-display {
	margin-top: 1rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border: 1px solid #86efac;
	border-radius: 8px;
	overflow: hidden;
}

.successful-correction-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(34, 197, 94, 0.1);
	border-bottom: 1px solid #86efac;
}

.successful-correction-header .success-icon {
	font-size: 1.125rem;
}

.successful-correction-header strong {
	flex: 1;
	font-size: 0.875rem;
	color: #166534;
}

.successful-correction-header .correction-date {
	font-size: 0.75rem;
	color: #15803d;
}

.successful-correction-content {
	padding: 1rem;
}

.successful-correction-content .correction-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #1e293b;
	white-space: pre-wrap;
}

/* Correction Header Info */
.correction-header-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Criteria Completion Badge */
.criteria-completion-badge {
	background: #e0f2fe;
	color: #0369a1;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid #7dd3fc;
}

/* Student Correction Button Section */
.question-correction-button-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

.btn-open-correction-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-open-correction-modal:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attempts-badge-inline {
	padding: 0.5rem 1rem;
	background: white;
	color: #0369a1;
	border: 1px solid #7dd3fc;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Teacher Help Notification (Student View - shown in marking report) */
/* Correction Completed Banner */
.correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.correction-completed-icon {
	font-size: 2rem;
	line-height: 1;
}

.correction-completed-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-completed-content strong {
	font-size: 1rem;
	color: #166534;
}

.correction-completed-content span {
	font-size: 0.875rem;
	color: #15803d;
}

.teacher-help-notification {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.teacher-help-notification__icon {
	font-size: 1.5rem;
	line-height: 1;
	animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.teacher-help-notification__title {
	font-size: 1rem;
	font-weight: 700;
	color: #065f46;
}

.teacher-help-notification__content {
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.teacher-help-notification__message {
	font-size: 0.9375rem;
	color: #047857;
	line-height: 1.6;
	margin: 0 0 0.75rem 0;
}

.teacher-help-notification__hint {
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	color: #78350f;
	margin-bottom: 0.75rem;
}

.teacher-help-notification__hint strong {
	color: #b45309;
}

.teacher-help-notification__reset {
	font-size: 0.875rem;
	color: #0369a1;
	background: rgba(224, 242, 254, 0.7);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	margin: 0;
	font-weight: 500;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta {
	margin-left: 2.25rem;
	background: #10b981;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta:hover {
	background: #059669;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Question Action Buttons */
.header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.question-edit-btn,
.question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.question-corrections-btn .help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.question-corrections-btn .attempts-badge {
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* ============================================
   Language Assessment Section (Phase 5)
   ============================================ */

.spm-english-paper1-language-feedback {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 12px;
	border-left: 4px solid #0284c7;
}

.spm-english-paper1-language-feedback h3 {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	color: #0369a1;
}

.spm-english-paper1-language-feedback__content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.spm-english-paper1-language-feedback__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.spm-english-paper1-language-feedback__score .label {
	color: #64748b;
}

.spm-english-paper1-language-feedback__score .value {
	font-size: 1.25rem;
	color: #0284c7;
}

.spm-english-paper1-language-feedback__text {
	color: #334155;
	line-height: 1.6;
}

/* Language row in marks breakdown */
.spm-english-paper1-mark-category--language {
	border-top: 2px dashed #e2e8f0;
	padding-top: 1rem;
}

.spm-english-paper1-mark-category--language h4 {
	color: #0284c7;
}


/* Responsive adjustments */
@media (max-width: 640px) {
	.header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.5rem;
	}
	
	.question-edit-btn,
	.question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
	
	.spm-english-paper1-language-feedback {
		padding: 1rem;
	}
	
	.spm-english-paper1-language-feedback__score .value {
		font-size: 1.125rem;
	}
}

/* English Paper 2 Question 14 card */
.narrative-question14-card__answers {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.narrative-question14-card__answer-row {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.5rem 0.75rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.narrative-question14-card__answer-label {
	font-weight: 600;
	color: #1e293b;
	min-width: 72px;
}

.narrative-question14-card__answer-value {
	color: #334155;
}

.narrative-question14-card__phrases {
	margin-top: 0.5rem;
	padding-left: 1.1rem;
	color: #1f2937;
}

.narrative-question14-card__phrases li {
	line-height: 1.4;
}
.spm-paper1-part2-cloze {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.spm-paper1-part2-cloze__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.spm-paper1-part2-cloze__split-panel {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 8px;
	height: calc(100vh - 220px);
	min-height: 520px;
}

@media (max-width: 960px) {
	.spm-paper1-part2-cloze__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}

	.spm-paper1-part2-cloze__passages,
	.spm-paper1-part2-cloze__questions {
		height: 50vh;
		min-height: 420px;
	}
}

.spm-paper1-part2-cloze__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}


/* Part 2: reading passage label color */
.spm-paper1-part2-cloze .smp-passage-label {
	background: #3b82f6;
}

.spm-paper1-part2-cloze__passages-content {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	min-height: 0;
}

.spm-paper1-part2-cloze .smp-passage-text {
	text-align: justify;
	font-size: 16px;
	line-height: 2.2;
}

/* Override `.smp-passage-text p` from SpmPaper1Part1Comprehension.css (1.6) */
.spm-paper1-part2-cloze .smp-passage-text p {
	line-height: 2.2;
}

.spm-paper1-part2-cloze__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part2-cloze__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

.spm-paper1-part2-question-section {
	margin-bottom: 32px;
}

.spm-paper1-part2-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.spm-paper1-part2-question:last-child {
	margin-bottom: 0;
}

.spm-paper1-part2-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spm-paper1-part2-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.spm-paper1-part2-question__marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.spm-paper1-part2-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

.spm-paper1-part2-cloze__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spm-paper1-part2-cloze__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

.spm-paper1-part2-cloze__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.spm-paper1-part2-cloze__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.spm-paper1-part2-cloze__submit:active:not(:disabled) {
	transform: translateY(0);
}

.spm-paper1-part2-cloze__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.spm-paper1-part2-cloze__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

.spm-paper1-part2-cloze__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.spm-paper1-part2-cloze__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

.spm-paper1-part2-cloze__passages-content::-webkit-scrollbar,
.spm-paper1-part2-cloze__questions-content::-webkit-scrollbar {
	width: 8px;
}

.spm-paper1-part2-cloze__passages-content::-webkit-scrollbar-track,
.spm-paper1-part2-cloze__questions-content::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 8px;
}

.spm-paper1-part2-cloze__passages-content::-webkit-scrollbar-thumb,
.spm-paper1-part2-cloze__questions-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
}

.spm-paper1-part2-cloze__passages-content::-webkit-scrollbar-thumb:hover,
.spm-paper1-part2-cloze__questions-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

.spm-paper1-part4-gap__options-bank {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1.5rem;
}

.spm-paper1-part4-gap__options-bank h4 {
	margin: 0 0 0.75rem 0;
	font-size: 0.95rem;
	color: #1e293b;
}

.spm-paper1-part4-gap__options-bank ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.spm-paper1-part4-gap__options-bank li {
	font-size: 0.95rem;
	color: #334155;
	line-height: 1.6;
}

.spm-paper1-part4-gap__choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.spm-paper1-part4-gap__choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.spm-paper1-part4-gap__choice:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

.spm-paper1-part4-gap__choice input {
	margin: 0.25rem 0 0 0;
	flex-shrink: 0;
}

.spm-paper1-part4-gap__choice-letter {
	font-weight: 600;
	color: #1e3a5f;
	flex-shrink: 0;
}

.spm-paper1-part4-gap__choice-text {
	flex: 1;
	color: #334155;
}

.spm-paper1-part4-gap__blank {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.1rem 0.4rem;
	margin: 0 0.2rem;
	background: #f1f5f9;
	border: 1px dashed #94a3b8;
	border-radius: 6px;
	font-weight: 600;
	color: #0f172a;
}

.spm-paper1-part4-gap__blank-number {
	font-size: 0.85rem;
	color: #64748b;
}

.spm-paper1-part4-gap__blank-value {
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}

.spm-paper1-part4-gap__text {
	white-space: pre-wrap;
	text-align: justify;
}

.spm-paper1-part4-gap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.spm-paper1-part4-gap__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.spm-paper1-part4-gap__split-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
	background: #ffffff;
}

@media (max-width: 960px) {
	.spm-paper1-part4-gap__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}

	.spm-paper1-part4-gap__passages,
	.spm-paper1-part4-gap__questions {
		height: 50vh;
		min-height: 400px;
	}
}

.spm-paper1-part4-gap__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part4-gap__passages-header {
	padding: 16px 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.spm-paper1-part4-gap__passages-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.spm-paper1-part4-gap__passages-content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	min-height: 0;
	background: #ffffff;
}

.spm-paper1-part4-gap__passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin: 0;
}

.spm-paper1-part4-gap__passage-label {
	display: inline-flex;
	align-items: center;
	padding: 6px 20px;
    border-radius: 6px;
    background: #3b82f6;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
	margin-bottom: 12px;
}

.spm-paper1-part4-gap__title {
	font-style: italic;
	color: #64748b;
	margin-bottom: 1rem;
	font-size: 1rem;
}

.spm-paper1-part4-gap__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part4-gap__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
	white-space: nowrap;
}

.spm-paper1-part4-gap__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
	background: #ffffff;
}

.spm-paper1-part4-gap__questions-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #0f172a;
	color: white;
	border-radius: 12px 12px 0 0;
	padding: 16px 20px;
	gap: 16px;
	margin-bottom: 16px;
}

.spm-paper1-part4-gap__questions-label h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.spm-paper1-part4-gap__question-section {
	margin-bottom: 32px;
}

.spm-paper1-part4-gap__question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.spm-paper1-part4-gap__question:last-child {
	margin-bottom: 0;
}

.spm-paper1-part4-gap__question-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spm-paper1-part4-gap__question-number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.spm-paper1-part4-gap__question-marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.spm-paper1-part4-gap__question-text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
}

.spm-paper1-part4-gap__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spm-paper1-part4-gap__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

.spm-paper1-part4-gap__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.spm-paper1-part4-gap__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.spm-paper1-part4-gap__submit:active:not(:disabled) {
	transform: translateY(0);
}

.spm-paper1-part4-gap__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.spm-paper1-part4-gap__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

.spm-paper1-part4-gap__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.spm-paper1-part4-gap__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}
/* GP Paper 2 Comprehension Card Styles */

.gp-paper2-comprehension {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Theme Display */
.gp-paper2-comprehension__theme {
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	color: white;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.gp-paper2-comprehension__theme-item {
	flex: 1;
	min-width: 200px;
}

.gp-paper2-comprehension__theme-item strong {
	display: block;
	margin-bottom: 4px;
	opacity: 0.9;
	font-size: 14px;
}

/* Progress Indicator */
.gp-paper2-comprehension__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

/* Split Panel Container */
.gp-paper2-comprehension__split-panel {
	display: grid;
	grid-template-columns: 3fr 2fr; /* 60% passages, 40% questions */
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
}

/* Mobile: Stack vertically */
@media (max-width: 960px) {
	.gp-paper2-comprehension__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}
	
	.gp-paper2-comprehension__passages,
	.gp-paper2-comprehension__questions {
		height: 50vh;
		min-height: 400px;
	}
}

/* Left Panel - Passages */
.gp-paper2-comprehension__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.gp-paper2-comprehension__passages-header {
	padding: 16px 20px;
	background: #1e293b;
	color: white;
	border-bottom: 1px solid #334155;
}

.gp-paper2-comprehension__passages-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.gp-paper2-comprehension__passages-content {
	flex: 1;
	overflow-y: auto; /* Passages scroll internally */
	padding: 0;
	min-height: 0;
}

/* Individual Passage */
.gp-paper2-passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.gp-paper2-passage:last-child {
	margin-bottom: 0;
}

.gp-paper2-passage__header {
	margin-bottom: 12px;
}

.gp-paper2-passage__number {
	display: inline-block;
	padding: 4px 12px;
	background: #3b82f6;
	color: white;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
}

.gp-paper2-passage__description {
	font-style: italic;
	color: #64748b;
	margin: 12px 0;
	font-size: 15px;
}

.gp-paper2-passage__text {
	line-height: 1.8;
	color: #1e293b;
}

.gp-paper2-passage__text p {
	margin-bottom: 16px;
	text-align: justify;
}

.gp-paper2-passage__text p:last-child {
	margin-bottom: 0;
}

/* Argumentative Passage Paragraphs with Numbers */
.arg-passage-paragraph {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.arg-passage-paragraph:last-child {
	margin-bottom: 0;
}

.arg-passage-paragraph-number {
	flex-shrink: 0;
	font-weight: 700;
	color: #1e293b;
}

.arg-passage-paragraph p {
	margin: 0;
	flex: 1;
}

/* Right Panel - Questions */
.gp-paper2-comprehension__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.gp-paper2-comprehension__questions-header {
	padding: 16px 20px;
	background: #0f172a;
	color: white;
	border-bottom: 1px solid #1e293b;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.gp-paper2-comprehension__questions-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.gp-paper2-comprehension__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
}

.gp-paper2-comprehension__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

/* Question Section */
.gp-paper2-question-section {
	margin-bottom: 32px;
}

.gp-paper2-question-section:last-of-type {
	margin-bottom: 0;
}

.gp-paper2-question-section__title {
	margin: 0 0 20px 0;
	padding: 12px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
}

/* Individual Question */
.gp-paper2-question {
	margin-bottom: 24px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.gp-paper2-question:last-child {
	margin-bottom: 0;
}

.gp-paper2-question__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.gp-paper2-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: 16px;
}

.gp-paper2-question__marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.gp-paper2-question__text {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #1e293b;
	white-space: pre-line;
}

.gp-paper2-question__answer {
	width: 100%;
	padding: 12px;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.gp-paper2-question__answer:focus {
	outline: none;
	border-color: #3b82f6;
}

.gp-paper2-question__answer:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
}

/* Submit Container */
.gp-paper2-comprehension__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Submit Button */
.gp-paper2-comprehension__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.gp-paper2-comprehension__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.gp-paper2-comprehension__submit:active:not(:disabled) {
	transform: translateY(0);
}

.gp-paper2-comprehension__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hint Message */
.gp-paper2-comprehension__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

/* Error Message */
.gp-paper2-comprehension__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

/* Submitted Status */
.gp-paper2-comprehension__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.gp-paper2-comprehension__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

/* Empty State */
.gp-paper2-comprehension__empty {
	padding: 40px 20px;
	text-align: center;
	color: #64748b;
}

.gp-paper2-comprehension__empty p {
	margin: 0;
	font-size: 16px;
}

/* Scrollbar Styling */
.gp-paper2-comprehension__passages-content::-webkit-scrollbar,
.gp-paper2-comprehension__questions-content::-webkit-scrollbar {
	width: 8px;
}

.gp-paper2-comprehension__passages-content::-webkit-scrollbar-track,
.gp-paper2-comprehension__questions-content::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 4px;
}

.gp-paper2-comprehension__passages-content::-webkit-scrollbar-thumb,
.gp-paper2-comprehension__questions-content::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.gp-paper2-comprehension__passages-content::-webkit-scrollbar-thumb:hover,
.gp-paper2-comprehension__questions-content::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Section B - Larger textarea for summary questions */
.gp-paper2-question__answer--section-b {
	min-height: 200px;
}

/* Section C Last Question - Larger textarea for essay-type questions */
.gp-paper2-question__answer--section-c-last {
	min-height: 200px;
}

/* Answer container for word count positioning */
.gp-paper2-question__answer-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Word count display */
.gp-paper2-question__word-count {
	align-self: flex-end;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
	padding: 2px 8px;
	background: #f1f5f9;
	border-radius: 4px;
	font-weight: 500;
}

.spm-paper1-part5-multi {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.spm-paper1-part5-multi__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.spm-paper1-part5-multi__split-panel {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 5px;
	height: calc(100vh - 200px);
	min-height: 500px;
}

@media (max-width: 960px) {
	.spm-paper1-part5-multi__split-panel {
		grid-template-columns: 1fr;
		height: auto;
	}

	.spm-paper1-part5-multi__passages,
	.spm-paper1-part5-multi__questions {
		height: 50vh;
		min-height: 400px;
	}
}

.spm-paper1-part5-multi__passages {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part5-multi__passages-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

.spm-paper1-part5-multi__passage {
	background: white;
	border: none;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 18px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.spm-paper1-part5-multi__passage-header {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	align-items: baseline;
}

.spm-paper1-part5-multi__passage-key {
	display: inline-flex;
	align-items: center;
	padding: 2px 12px;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
	font-weight: 600;
	font-size: 0.75rem;
}

.spm-paper1-part5-multi__passage-title {
	font-weight: 600;
	color: #0f172a;
}

.spm-paper1-part5-multi__passage-text {
	margin: 0;
	line-height: 1.7;
	color: #1e293b;
	text-align: justify;
}

.spm-paper1-part5-multi__questions {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.spm-paper1-part5-multi__questions-heading {
	padding: 16px 20px;
	background: #0f172a;
	color: white;
	border-bottom: 1px solid #1e293b;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.spm-paper1-part5-multi__questions-heading h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.spm-paper1-part5-multi__marks-total {
	font-size: 14px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-weight: 600;
	white-space: nowrap;
}

.spm-paper1-part5-multi__questions-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	min-height: 0;
}

.spm-paper1-part5-multi__question-section {
	margin-bottom: 32px;
}

.spm-paper1-part5-multi__section-title {
	margin: 0 0 12px;
	padding-bottom: 8px;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px dashed #e2e8f0;
}

.spm-paper1-part5-multi__question {
	margin-bottom: 20px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.spm-paper1-part5-multi__question-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spm-paper1-part5-multi__question-number {
	font-weight: 700;
	color: #0f172a;
}

.spm-paper1-part5-multi__question-marks {
	font-size: 14px;
	color: #64748b;
	font-weight: 600;
}

.spm-paper1-part5-multi__question-text {
	margin: 0 0 8px;
	color: #1e293b;
}

.spm-paper1-part5-multi__select,
.spm-paper1-part5-multi__input {
	width: 90%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	font-size: 0.95rem;
}

.spm-paper1-part5-multi__notes-intro {
	margin: 0 0 10px;
	color: #475569;
	font-size: 0.95rem;
}

.spm-paper1-part5-multi__submit-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spm-paper1-part5-multi__error {
	padding: 12px;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 14px;
}

.spm-paper1-part5-multi__submit {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.spm-paper1-part5-multi__submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

.spm-paper1-part5-multi__submit:active:not(:disabled) {
	transform: translateY(0);
}

.spm-paper1-part5-multi__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.spm-paper1-part5-multi__hint {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	margin: 0;
}

.spm-paper1-part5-multi__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.spm-paper1-part5-multi__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}
.spm-part1-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 1rem 0;
}

.spm-part1-text {
  border-right: 1px solid #e0e0e0;
  padding-right: 2rem;
}

.spm-part1-question {
  padding-left: 1rem;
}

.question-content h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.choice-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.choice-option:hover {
  background-color: #f5f5f5;
}

.choice-option input[type="radio"] {
  margin-top: 0.25rem;
  cursor: pointer;
}

.choice-letter {
  font-weight: 600;
  color: #333;
  min-width: 1.5rem;
}

.choice-text {
  flex: 1;
}

.spm-part1-error {
  padding: 2rem;
  text-align: center;
  color: #d32f2f;
}

.lj-card--content-examples {
  margin-top: 2rem;
}

.lj-card__header h3 {
  margin-bottom: 0.5rem;
}

.lj-card__header h4 {
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .spm-part1-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .spm-part1-text {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }

  .spm-part1-question {
    padding-left: 0;
  }
}/* GP Marking Report Styles - Match RWA Plugin Design */

.gp-marking-report-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
}

.gp-marking-report-header {
	text-align: center;
	margin-bottom: 25px;
}

.gp-marking-report-header h2 {
	color: #2d3748;
	font-size: 1.5rem;
	margin: 0 0 10px 0;
}

.gp-marking-report-header p {
	color: #666;
	font-size: 1rem;
	margin: 0;
}

/* Loading & Error States */
.gp-report-loading-container,
.gp-report-error-container {
	text-align: center;
	padding: 60px 20px;
}

.gp-report-loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: 50%;
	animation: gp-spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes gp-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.gp-report-loading-sub {
	color: #666;
	font-style: italic;
}

.gp-report-error-icon {
	font-size: 4rem;
	margin-bottom: 20px;
}

.gp-report-retry-btn {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.gp-report-retry-btn:hover:not(:disabled) {
	background: #5a67d8;
}

.gp-report-retry-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Small inline spinner for buttons */
.lj-spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gp-spin 0.8s linear infinite;
	display: inline-block;
	vertical-align: middle;
}

/* Report Sections - Match RWA Card Style */
.gp-report-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
	border: 1px solid #e2e8f0;
}

.gp-report-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

/* Cards - Match RWA Style */
.gp-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	margin-bottom: 20px;
}

.gp-kv {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 10px 16px;
}

.gp-kv .k, .gp-k {
	color: #4a5568;
	font-weight: 600;
}

.gp-kv .v, .gp-v {
	color: #1f2937;
}

/* Marks Section - Match RWA Blue Gradient */
.gp-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 25px;
}

.gp-score-display {
	display: flex;
	flex-direction: column;
}

.gp-score-label {
	font-size: .9rem;
	opacity: .9;
}

.gp-score-value {
	font-size: 2rem;
	font-weight: 700;
}

.gp-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.12);
	padding: 10px 15px;
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.gp-badge-icon {
	font-size: 1.2rem;
}

.gp-badge-text {
	font-weight: 500;
}

.gp-performance-badge[data-performance="excellent"] {
	background: rgba(34,197,94,.2);
}

.gp-performance-badge[data-performance="good"] {
	background: rgba(59,130,246,.2);
}

.gp-performance-badge[data-performance="needs-improvement"] {
	background: rgba(245,158,11,.2);
}

.gp-marks-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.gp-mark-category {
	background: #f8fafc;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
}

.gp-mark-category h4 {
	font-size: 1.1rem;
	color: #2d3748;
	margin: 0 0 12px 0;
}

.gp-mark-display {
	font-size: 1.5rem;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 15px;
}

.gp-sub-elements {
	margin: 15px 0;
}

.gp-sub-element {
	margin: 10px 0;
}

.gp-sub-element label {
	display: block;
	font-size: .9rem;
	color: #4a5568;
	margin-bottom: 6px;
}

.gp-progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
}

.gp-progress-fill {
	height: 100%;
	width: 0%;
	transition: width 1s ease-in-out;
}

/* Language Criterion Colors - Match RWA Schema */
.gp-progress-fill[data-progress="accuracy"] {
	background: linear-gradient(90deg, #ef4444, #dc2626);
	box-shadow: 0 2px 4px rgba(239,68,68,.3);
}

.gp-progress-fill[data-progress="sentence-structure"] {
	background: linear-gradient(90deg, #06b6d4, #0891b2);
	box-shadow: 0 2px 4px rgba(6,182,212,.3);
}

.gp-progress-fill[data-progress="vocabulary"] {
	background: linear-gradient(90deg, #8b5cf6, #7c3aed);
	box-shadow: 0 2px 4px rgba(139,92,246,.3);
}

.gp-progress-fill[data-progress="organisation"] {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	box-shadow: 0 2px 4px rgba(245,158,11,.3);
}

.gp-progress-fill[data-progress="articulation"] {
	background: linear-gradient(90deg, #22c55e, #16a34a);
	box-shadow: 0 2px 4px rgba(34,197,94,.3);
}

/* Content Criterion Colors */
.gp-progress-fill[data-progress="question-alignment"] {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16,185,129,.3);
}

.gp-progress-fill[data-progress="thesis-quality"] {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99,102,241,.3);
}

.gp-progress-fill[data-progress="argument-depth"] {
	background: linear-gradient(90deg, #ec4899, #db2777);
	box-shadow: 0 2px 4px rgba(236,72,153,.3);
}

.gp-progress-fill[data-progress="evidence-quality"] {
	background: linear-gradient(90deg, #f97316, #ea580c);
	box-shadow: 0 2px 4px rgba(249,115,22,.3);
}

.gp-progress-fill[data-progress="evaluation-balance"] {
	background: linear-gradient(90deg, #0ea5e9, #0284c7);
	box-shadow: 0 2px 4px rgba(14,165,233,.3);
}

/* Band Descriptor */
.gp-band-descriptor {
	background: #edf2f7;
	padding: 10px;
	border-radius: 6px;
	font-size: .85rem;
	margin-top: 15px;
	border-left: 3px solid #cbd5e0;
}

/* Question Analysis */
.gp-question-prompt {
	font-style: italic;
	font-size: 1rem;
	color: #1f2937;
	padding: 16px;
	background: #fff;
	border-left: 4px solid #667eea;
	border-radius: 6px;
	margin-bottom: 20px;
}

/* Progress bar for question engagement */
.gp-progress {
	height: 10px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}

.gp-progress .gp-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	width: 0%;
	transition: width .8s ease-in-out;
}

.gp-progress-text {
	font-size: .9rem;
	color: #4a5568;
	margin-top: 6px;
}

/* Table styles - Match RWA */
.gp-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	table-layout: auto;
}

.gp-table th,
.gp-table td {
	border: 1px solid #e2e8f0;
	padding: 10px 12px;
	vertical-align: top;
}

.gp-table th {
	background: #f8fafc;
	text-align: left;
	color: #2d3748;
	font-weight: 600;
}

.gp-table .ok {
	color: #1f2937;
	font-weight: 600;
}

.gp-table .warn {
	color: #1f2937;
	font-weight: 600;
}

.gp-table .bad {
	color: #1f2937;
	font-weight: 600;
}

.gp-feedback-cell {
	font-size: .9rem;
	color: #4a5568;
	line-height: 1.5;
}

/* Key Terms Mobile Cards - Hidden by default */
.gp-key-terms-cards {
	display: none;
}

.gp-key-term-mobile-card {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	margin-bottom: 10px;
	line-height: 1.5;
}

/* Mobile: Show cards, hide table */
@media (max-width: 640px) {
	.gp-key-terms {
		display: none;
	}
	
	.gp-key-terms-cards {
		display: block;
	}
}

/* Status Badges - Match RWA with Emoji Circles */
.gp-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
}

.gp-status-badge.gp-status-successful {
	background: #dcfce7;
	color: #166534;
}

.gp-status-badge.gp-status-adequate {
	background: #fef9c3;
	color: #854d0e;
}

.gp-status-badge.gp-status-partial {
	background: #ffedd5;
	color: #9a3412;
}

.gp-status-badge.gp-status-missing {
	background: #fee2e2;
	color: #991b1b;
}

/* Dimensions - Ring Chart Style */
.gp-dimensions {
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
	align-items: stretch;
}

.gp-dimension-card {
	flex: 1;
	min-width: 240px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin: 6px;
}

/* Ring Chart Container */
.gp-ring-container {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto;
}

.gp-ring-center-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.gp-dimension-title {
	font-weight: 700;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 16px;
	color: #111827;
}

.gp-dimension-badge-center {
	text-align: center;
	margin-top: 6px;
	margin-bottom: 6px;
}

.gp-dimension-suggestion {
	color: #374151;
	font-size: 0.9rem;
	text-align: center;
	margin-top: 6px;
	line-height: 1.5;
}

/* Student Text - Match RWA Style */
.gp-student-text {
	background: #fff;
	border: 1px solid #e2e8f0;
	padding: 12px;
	border-radius: 6px;
	margin-top: 10px;
	white-space: pre-wrap;
	line-height: 1.6;
	color: #1f2937;
}

/* OLD - No longer needed with new table layout
.gp-student-text-container {
	margin-bottom: 20px;
}
*/

/* Alternative suggestion styling */
.gp-alt {
	background: #f0fff4;
	border-left: 3px solid #38a169;
	padding: 12px;
	border-radius: 6px;
	margin-top: 10px;
}

/* Thesis Box - Match RWA Style */
.gp-thesis-box {
	margin-top: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.gp-thesis-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.gp-thesis-label {
	font-weight: 700;
	color: #111827;
}

.gp-thesis-text {
	margin-top: 6px;
	color: #374151;
}

.gp-thesis-feedback {
	margin: 6px 0 0 16px;
	padding: 0;
	list-style: disc;
	color: #374151;
}

.gp-thesis-feedback li {
	margin-bottom: 4px;
}

.gp-thesis-better {
	margin-top: 10px;
}

.gp-thesis-better-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.gp-thesis-better-text {
	color: #1f2937;
}

/* Introduction Section - Compact Spacing */
.gp-introduction-section .gp-card > * + * {
	margin-top: 10px;
}

.gp-introduction-section .gp-table {
	margin-top: 12px;
}

.gp-introduction-section .gp-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.gp-introduction-section .gp-table td:nth-child(3) {
	vertical-align: top;
}

/* Aspects Grid - OLD (now using table) */
/* .gp-aspects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	background: white;
	padding: 20px;
	border-radius: 8px;
}

.gp-aspect-item {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px;
	background: #f9fafb;
}

.gp-aspect-header {
	margin-bottom: 12px;
} */

.gp-aspect-header h4,
.gp-aspect-header h5 {
	font-size: 16px;
	color: #111827;
	margin: 0 0 8px 0;
}

.gp-star-rating {
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
}

.star-filled {
	color: #fbbf24;
	font-size: 20px;
}

.star-empty {
	color: #d1d5db;
	font-size: 20px;
}

/* Thesis Box - Match RWA Style */
.gp-thesis-box {
	margin-top: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.gp-thesis-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.gp-thesis-label {
	font-weight: 700;
	color: #111827;
}

.gp-thesis-text {
	margin-top: 6px;
	color: #374151;
}

.gp-thesis-feedback {
	margin: 6px 0 0 16px;
	padding: 0;
	list-style: disc;
	color: #374151;
}

.gp-thesis-feedback li {
	margin-bottom: 4px;
}

.gp-thesis-better {
	margin-top: 10px;
}

.gp-thesis-better-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.gp-thesis-better-text {
	color: #1f2937;
}

/* Stars - Enhanced for colored display */
.gp-stars {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
}

.gp-stars span {
	transition: color 0.2s ease;
}

/* Introduction Section - Table layout specifics */
.gp-introduction-section .gp-card > * + * {
	margin-top: 10px;
}

.gp-introduction-section .gp-table {
	margin-top: 12px;
}

.gp-introduction-section .gp-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.gp-introduction-section .gp-table td:nth-child(3) {
	vertical-align: top;
}

.gp-band-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	margin-top: 4px;
}

.gp-band-badge.band-good {
	background: #dcfce7;
	color: #166534;
}

.gp-band-badge.band-adequate {
	background: #dbeafe;
	color: #1e40af;
}

.gp-band-badge.band-limited {
	background: #fef3c7;
	color: #92400e;
}

.gp-band-badge.band-missing {
	background: #fee2e2;
	color: #991b1b;
}

.gp-aspect-feedback {
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
}

/* OLD - Checks no longer displayed in body paragraphs
.gp-checks-container,
.gp-checks-list {
	margin-top: 20px;
}

.gp-check-item,
.gp-check {
	background: #f8fafc;
	border-left: 3px solid #667eea;
	padding: 10px;
	border-radius: 6px;
	margin: 8px 0;
}

.gp-check-item-title {
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 8px;
}

.gp-check-observation,
.gp-check-tip {
	font-size: .9rem;
	color: #4a5568;
	margin-bottom: 6px;
	line-height: 1.5;
}
*/

/* Body Paragraphs - Match RWA */
.gp-body-paragraphs-section .gp-card {
	margin-bottom: 20px;
}

.gp-body-paragraph-label {
	font-weight: 700;
	margin-bottom: 8px;
}

/* Progress bar for body paragraph overall score */
.gp-body-paragraphs-section .gp-progress {
	height: 10px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}

.gp-body-paragraphs-section .gp-progress .gp-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	width: 0%;
	transition: width .8s ease-in-out;
}

/* Student paragraph text */
.gp-body-paragraphs-section .gp-student-text {
	margin-top: 10px;
	margin-bottom: 12px;
}

/* Table alignment for body paragraphs */
.gp-body-paragraphs-section .gp-table {
	margin-top: 12px;
}

.gp-body-paragraphs-section .gp-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.gp-body-paragraphs-section .gp-table td:nth-child(3) {
	vertical-align: top;
}

/* Conclusion - Match RWA */
.gp-conclusion-section .gp-card {
	margin-bottom: 20px;
}

/* Table alignment for conclusion */
.gp-conclusion-section .gp-table {
	margin-top: 12px;
}

.gp-conclusion-section .gp-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.gp-conclusion-section .gp-table td:nth-child(3) {
	vertical-align: top;
}

/* Tags - Match RWA Style */
.gp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.gp-tag {
	background: #edf2f7;
	color: #2d3748;
	padding: 6px 10px;
	border-radius: 14px;
	font-size: .85rem;
	border: 1px solid #e2e8f0;
}

/* Star Ratings - Match RWA with Band Colors */
.gp-stars {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
}

.gp-stars span {
	transition: color 0.2s ease;
}

.star-filled {
	color: #fbbf24;
	font-size: 18px;
}

.star-empty {
	color: #e2e8f0;
	font-size: 18px;
}

/* Reference Banner */
.gp-reference-banner {
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #2d3748;
	font-weight: 500;
	text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
	.gp-marks-breakdown {
		grid-template-columns: 1fr;
	}
	
	.gp-dimensions,
	.gp-aspects-grid {
		grid-template-columns: 1fr;
	}
	
	.gp-total-marks {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}
	
	.gp-kv {
		grid-template-columns: 1fr;
	}
}

/* Teacher Override Styles */
.gp-paper2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.gp-paper2-question-result__header h4 {
	margin: 0;
	flex: 0 0 auto;
}

.gp-paper2-question-result__header .header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.teacher-adjusted-indicator {
	color: #f59e0b;
	margin-left: 6px;
	font-size: 16px;
}

.ai-score-comparison-row {
	margin-bottom: 12px;
}

.ai-score-comparison {
	font-size: 0.85em;
	color: #64748b;
	font-weight: normal;
}

.question-edit-btn {
	padding: 6px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	transition: all 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
}

.question-edit-btn:hover {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
}

.question-edit-btn:active {
	background-color: #e2e8f0;
}

/* GP Paper 2 Marking Progress Modal */
.gp-paper2-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.gp-paper2-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: slideUp 0.4s ease;
}

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

.gp-paper2-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.gp-paper2-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.gp-paper2-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.gp-paper2-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.gp-paper2-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.gp-paper2-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

/* Phase indicators */
.gp-paper2-marking-modal__phases {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}

.gp-paper2-marking-modal__phases .phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.gp-paper2-marking-modal__phases .phase.active {
	opacity: 1;
}

.gp-paper2-marking-modal__phases .phase.complete {
	opacity: 1;
}

.gp-paper2-marking-modal__phases .phase-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.gp-paper2-marking-modal__phases .phase.active .phase-icon {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: pulse 2s ease-in-out infinite;
}

.gp-paper2-marking-modal__phases .phase.complete .phase-icon {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.gp-paper2-marking-modal__phases .phase-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

.gp-paper2-marking-modal__hint {
	font-size: 0.875rem;
	color: #475569;
	margin: 2rem 0 0 0;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.gp-paper2-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.5rem;
}

.gp-paper2-marking-modal__spinner .lj-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
	.gp-paper2-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}
	
	.gp-paper2-marking-modal__title {
		font-size: 1.25rem;
	}
	
	.gp-paper2-marking-modal__phases .phase-icon {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}
	
	.gp-paper2-marking-modal__phases .phase-label {
		font-size: 0.7rem;
	}
}







/* Modal Overlay */
.adjustment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

/* Modal Container */
.adjustment-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Modal Header */
.adjustment-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adjustment-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.modal-close-btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background-color: #f1f5f9;
}

/* Modal Body */
.adjustment-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Context Section */
.adjustment-context {
	margin-bottom: 20px;
}

.context-section {
	margin-bottom: 16px;
}

.context-section h4 {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text,
.student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.student-answer {
	border-left-color: #3b82f6;
}

/* AI Assessment Box */
.ai-assessment-box {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}

.ai-assessment-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 12px;
}

.ai-icon {
	font-size: 18px;
}

.ai-assessment-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-score {
	font-size: 14px;
	color: #78350f;
}

.ai-feedback-preview {
	font-size: 13px;
	color: #78350f;
	line-height: 1.5;
}

/* Divider */
.adjustment-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 20px 0;
}

/* Adjustment Fields */
.adjustment-field {
	margin-bottom: 20px;
}

.adjustment-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

/* Current Score Display */
.current-score-display {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-display-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.score-display-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
}

/* Criteria Header with Hint */
.criteria-header-with-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criteria-hint:hover {
	background-color: #f1f5f9;
}

.hint-icon {
	font-size: 14px;
}

.hint-text {
	font-weight: 500;
}

/* Criteria List */
.criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.criterion-item {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criterion-item:last-child {
	margin-bottom: 0;
}

.criterion-item.awarded {
	background-color: #f0fdf4;
	border-left: 3px solid #22c55e;
}

.criterion-item.not-awarded {
	background-color: #fef2f2;
	border-left: 3px solid #ef4444;
}

.criterion-item:hover {
	opacity: 0.9;
}

.criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #334155;
}

.criterion-label input[type="checkbox"] {
	margin-top: 2px;
	cursor: pointer;
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
	flex-shrink: 0;
}

.criterion-icon {
	font-size: 16px;
	font-weight: bold;
	flex-shrink: 0;
	width: 20px;
}

.criterion-item.awarded .criterion-icon {
	color: #16a34a;
}

.criterion-item.not-awarded .criterion-icon {
	color: #dc2626;
}

.criterion-text {
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.criterion-comment {
	margin: 6px 0 0 46px;
	font-size: 13px;
	color: #64748b;
	font-style: italic;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Feedback Input */
.feedback-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.feedback-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modal Footer */
.adjustment-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.btn-secondary,
.btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

.btn-secondary {
	background: white;
	border: 1px solid #cbd5e1;
	color: #334155;
}

.btn-secondary:hover {
	background-color: #f8fafc;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

.btn-primary:hover {
	background: #2563eb;
}

/* Responsive */
@media (max-width: 768px) {
	.adjustment-modal {
		max-width: 95%;
		max-height: 95vh;
	}

	.adjustment-modal-body {
		padding: 16px;
	}

	.adjustment-modal-header {
		padding: 16px;
	}
}
/* Modal Overlay */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	backdrop-filter: blur(2px);
}

/* Modal Content */
.modal-content {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Modal Header */
.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.modal-title {
	flex: 1;
}

.modal-title h3 {
	margin: 0 0 0.5rem 0;
	color: #1e40af;
	font-size: 1.25rem;
	font-weight: 700;
}

.modal-title .question-preview {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.modal-close-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: white;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1rem;
}

.modal-close-btn:hover {
	background: #fee2e2;
	color: #991b1b;
}

/* Modal Body */
.modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

/* Need Help Banner */
.need-help-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2px solid #ef4444;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.need-help-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.need-help-content {
	flex: 1;
}

.need-help-content strong {
	display: block;
	color: #991b1b;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.need-help-content p {
	margin: 0;
	color: #b91c1c;
	font-size: 0.875rem;
}

/* Correction Status Summary */
.student-corrections-modal .correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

/* Teacher Attempts List */
.student-corrections-modal .teacher-attempts-list {
	margin-top: 0;
}

.student-corrections-modal .teacher-attempts-list h4 {
	margin: 0 0 1rem 0;
	color: #1e293b;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.student-corrections-modal .teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
	transition: all 0.2s;
}

.student-corrections-modal .teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.student-corrections-modal .teacher-attempt-item:last-child {
	margin-bottom: 0;
}

/* No Attempts */
.student-corrections-modal .no-attempts {
	padding: 2rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	text-align: center;
}

.student-corrections-modal .no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

/* ============================================
   TEACHER HELP SECTION STYLES
   ============================================ */

/* Teacher Help Section (Form for teachers) */
.teacher-help-section {
	background: #f8fafc;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.teacher-help-header {
	margin-bottom: 1rem;
}

.teacher-help-header h4 {
	margin: 0 0 0.25rem 0;
	color: #1e40af;
	font-size: 1.1rem;
	font-weight: 700;
}

.teacher-help-header p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

/* Help Error/Success Messages */
.help-error-message {
	background: #fee2e2;
	border: 1px solid #fecaca;
	color: #991b1b;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.help-success-message {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Teacher Help Form */
.teacher-help-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.help-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.help-input-group label {
	font-size: 0.875rem;
	color: #374151;
}

.help-input-group label strong {
	font-weight: 600;
}

.teacher-help-textarea {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.875rem;
	resize: vertical;
	min-height: 60px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.teacher-help-textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.teacher-help-textarea::placeholder {
	color: #9ca3af;
}

.char-count {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: right;
}

/* Help Options */
.help-options {
	padding: 0.75rem 0;
}

.checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	margin-top: 0.125rem;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.checkbox-text {
	font-size: 0.875rem;
	line-height: 1.4;
	color: #374151;
}

/* Help Actions */
.help-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.5rem;
}

.btn-provide-help {
	background: #3b82f6;
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.btn-provide-help:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
}

.btn-provide-help:active:not(:disabled) {
	transform: translateY(0);
}

.btn-provide-help:disabled {
	background: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

/* Previous Teacher Help Display */
.previous-teacher-help {
	background: #ecfdf5;
	border: 1px solid #10b981;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.teacher-help-display-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #a7f3d0;
}

.teacher-help-display-header h5 {
	margin: 0;
	color: #065f46;
	font-size: 1rem;
	font-weight: 600;
}

.help-meta {
	font-size: 0.75rem;
	color: #047857;
}

.teacher-help-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.teacher-message-display,
.teacher-hint-display {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.teacher-message-display strong,
.teacher-hint-display strong {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #047857;
}

.teacher-message-display p,
.teacher-hint-display p {
	margin: 0;
	background: white;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border-left: 3px solid #10b981;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #1f2937;
}

.reset-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #059669;
	font-weight: 500;
	padding: 0.5rem 0;
}

.reset-icon {
	font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
	.modal-overlay {
		padding: 10px;
	}
	
	.modal-content {
		max-height: 95vh;
	}
	
	.modal-header {
		padding: 1rem;
	}
	
	.modal-body {
		padding: 1rem;
	}
	
	.student-corrections-modal .correction-status-summary {
		grid-template-columns: 1fr;
	}
	
	.teacher-help-section {
		padding: 1rem;
	}
	
	.teacher-help-display-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.help-actions {
		justify-content: stretch;
	}
	
	.btn-provide-help {
		width: 100%;
	}
}
/* Student Correction Modal Overlay */
.student-correction-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	backdrop-filter: blur(2px);
}

/* Modal Container */
.student-correction-modal {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 95%;
	max-width: 1400px;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Modal Header */
.student-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #2079b0;
	flex-shrink: 0;
}

.student-modal-header .modal-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
}

.student-modal-header h3 {
	margin: 0;
	color: white;
	font-size: 1.25rem;
	font-weight: 700;
}

.modal-close-btn {
	background: transparent;
	border: none;
	color: white;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.criteria-progress-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Split-Screen Body */
.student-modal-body-split {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

/* LEFT PANEL - PASSAGE */
.passage-panel {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	border-right: 2px solid #e2e8f0;
	background: #f8fafc;
	overflow: hidden;
}

.passage-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	background: #f1f5f9;
	flex-shrink: 0;
}

.passage-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.passage-header h4 {
	margin: 0;
	color: #334155;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.passage-content {
	flex: 1;
	padding: 1.5rem;
	overflow-y: auto;
	line-height: 1.8;
}

.passage-content p {
	margin: 0 0 1rem 0;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* Passage paragraph styling to match Chapter 1 */
.passage-content .arg-passage-paragraph {
	position: relative;
	margin-bottom: 1.5rem;
	padding-left: 3rem;
}

.passage-content .arg-passage-paragraph-number {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
}

.passage-content .arg-passage-paragraph p {
	margin: 0;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.8;
	text-align: justify;
}

.passage-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	color: #64748b;
}

.passage-loading p {
	margin: 0.5rem 0;
}

.passage-note {
	font-size: 0.875rem;
	font-style: italic;
}

/* RIGHT PANEL - CORRECTION INTERFACE */
.correction-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: white;
}

/* Correction Tabs Navigation */
.correction-tabs {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem 0 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #f8fafc;
	flex-shrink: 0;
}

.correction-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
	transition: all 0.2s;
	position: relative;
	top: 2px;
}

.correction-tab:hover {
	color: #334155;
	background: rgba(59, 130, 246, 0.05);
}

.correction-tab.active {
	color: #3b82f6;
	border-bottom-color: #3b82f6;
	background: white;
}

.correction-tab .tab-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.correction-tab .tab-label {
	font-size: 0.875rem;
}

/* Tab Content Container */
.correction-tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Tab Panels */
.current-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.history-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.help-tab-panel {
	display: flex;
	flex-direction: column;
}

/* Question Context Section */
.question-context-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.context-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.context-item h5 {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text-display,
.original-answer-display {
	margin: 0;
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
}

.original-answer-display {
	border-left-color: #3b82f6;
	background: #eff6ff;
}

.feedback-display {
	margin: 0;
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #92400e;
}

/* Criteria Status Section */
.criteria-status-section {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.criteria-status-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #15803d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.criteria-status-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.criteria-status-list-full {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.criteria-status-list li,
.criteria-status-list-full li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
}

.criterion-met {
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.criterion-not-met {
	color: #dc2626;
	border-left: 3px solid #ef4444;
}

.criterion-icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
}

.criterion-text {
	flex: 1;
}

/* Attempt Drawer (History Tab) */
.attempt-drawer {
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
	margin-bottom: 1rem;
}

.attempt-drawer:last-child {
	margin-bottom: 0;
}

.attempt-drawer-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.attempt-drawer-summary::-webkit-details-marker {
	display: none;
}

.attempt-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.attempt-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.attempt-badge.original {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.attempt-title {
	flex: 1;
	font-size: 0.9375rem;
	color: #1e293b;
}

.attempt-criteria-badge {
	padding: 0.25rem 0.625rem;
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.attempt-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
}

.attempt-drawer[open] .attempt-toggle {
	transform: rotate(180deg);
}

.attempt-drawer-content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
}

.attempt-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.attempt-section h6 {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.attempt-text {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border-left: 3px solid #cbd5e1;
	border-radius: 4px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.attempt-feedback-text {
	margin: 0;
	padding: 0.75rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 4px;
	color: #92400e;
	font-size: 0.875rem;
	line-height: 1.6;
}

.attempt-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.attempt-criteria-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
}

.attempt-criteria-list li.met {
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.attempt-criteria-list li .icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
}

.no-criteria-met-message {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 4px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

.attempt-error-notice,
.attempt-pending-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
}

.attempt-pending-notice {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.attempt-error-notice {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.no-attempts-message {
	padding: 2rem;
	text-align: center;
	color: #64748b;
}

.no-attempts-message p {
	margin: 0.5rem 0;
	font-size: 0.9375rem;
}

.no-attempts-message strong {
	color: #3b82f6;
}

/* Previous Attempts Drawer */
.previous-attempts-drawer {
	margin-bottom: 1.5rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
}

.attempts-drawer-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.attempts-drawer-summary::-webkit-details-marker {
	display: none;
}

.attempts-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.drawer-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.drawer-title {
	flex: 1;
	font-size: 0.9375rem;
}

.drawer-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
}

.previous-attempts-drawer[open] .drawer-toggle {
	transform: rotate(180deg);
}

.attempts-drawer-content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
	max-height: 320px;
	overflow-y: auto;
}

.attempt-card {
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.attempt-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f1f5f9;
}

.attempt-number-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.attempt-date {
	font-size: 0.8125rem;
	color: #64748b;
	font-weight: 500;
}

.attempt-answer {
	margin-bottom: 0.75rem;
}

.attempt-answer strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
	font-weight: 600;
}

.attempt-answer p {
	margin: 0;
	padding: 0.75rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 4px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
}

.attempt-ai-feedback {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.attempt-criteria-progress {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 6px;
}

.attempt-criteria-progress .criteria-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	background: #22c55e;
	color: white;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
}

.attempt-criteria-progress .criteria-text {
	font-size: 0.875rem;
	font-weight: 600;
	color: #15803d;
}

.attempt-feedback-box {
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
}

.attempt-feedback-box strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #92400e;
	font-size: 0.875rem;
	font-weight: 600;
}

.attempt-feedback-box p {
	margin: 0;
	color: #78350f;
	font-size: 0.875rem;
	line-height: 1.6;
}

.attempt-pending,
.attempt-error {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
}

.attempt-pending {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.attempt-error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.pending-icon,
.error-icon {
	font-size: 1rem;
	line-height: 1;
}

/* Old previous attempts section styles (keep for backward compatibility) */
.previous-attempts-section {
	margin-bottom: 1.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}

.previous-attempts-section summary {
	padding: 0.875rem 1rem;
	background: #f8fafc;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 0.875rem;
	user-select: none;
	list-style: none;
}

.previous-attempts-section summary:hover {
	background: #f1f5f9;
}

.previous-attempts-section summary::-webkit-details-marker {
	display: none;
}

.attempts-list-modal {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: white;
}

.attempt-item-modal {
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #3b82f6;
	border-radius: 6px;
}

.attempt-header-modal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

.attempt-header-modal strong {
	color: #1e293b;
}

.attempt-date-modal {
	color: #64748b;
	font-size: 0.8125rem;
}

.attempt-text-modal {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.5;
}

.attempt-feedback-modal {
	padding-top: 0.5rem;
	border-top: 1px solid #e2e8f0;
	font-size: 0.8125rem;
}

.attempt-criteria-modal {
	color: #0369a1;
	margin-bottom: 0.5rem;
}

.attempt-feedback-text {
	margin: 0;
	color: #64748b;
	font-style: italic;
	line-height: 1.5;
}

/* Help Requested Banner */
.help-requested-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	color: #92400e;
	font-weight: 500;
	font-size: 0.875rem;
}

.help-icon {
	font-size: 1.25rem;
}

/* Correction Form Section */
.correction-form-section {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 2px solid #e2e8f0;
}

.correction-form-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
}

.correction-textarea-modal {
	width: 100%;
	padding: 0.875rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.correction-textarea-modal:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.correction-form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
	gap: 1rem;
}

.word-count-modal {
	font-size: 0.875rem;
	color: #64748b;
	font-weight: 500;
}

.word-count-modal.insufficient {
	color: #dc2626;
}

.button-group-modal {
	display: flex;
	gap: 0.75rem;
}

.btn-need-help-modal,
.btn-submit-modal {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-need-help-modal {
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.btn-need-help-modal:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.btn-submit-modal {
	background: #3b82f6;
	color: white;
}

.btn-submit-modal:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-need-help-modal:disabled,
.btn-submit-modal:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Scrollbar Styling */
.passage-content::-webkit-scrollbar,
.correction-panel::-webkit-scrollbar {
	width: 8px;
}

.passage-content::-webkit-scrollbar-track,
.correction-panel::-webkit-scrollbar-track {
	background: #f1f5f9;
}

.passage-content::-webkit-scrollbar-thumb,
.correction-panel::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.passage-content::-webkit-scrollbar-thumb:hover,
.correction-panel::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* ============================================
   TEACHER HELP TAB (Full View)
   ============================================ */

.teacher-help-full {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.teacher-help-header-full {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: 12px;
}

.teacher-avatar {
	font-size: 2.5rem;
	line-height: 1;
}

.teacher-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.teacher-info h4 {
	margin: 0;
	color: #92400e;
	font-size: 1.25rem;
	font-weight: 700;
}

.help-date {
	font-size: 0.875rem;
	color: #b45309;
	font-weight: 500;
}

.teacher-guidance-full {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.guidance-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.guidance-section h5 {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.guidance-content {
	padding: 1rem;
	background: #f8fafc;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.hint-section {
	background: #fffbeb;
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid #fbbf24;
}

.hint-content-full {
	padding: 1rem;
	background: white;
	border-left: 4px solid #f59e0b;
	border-radius: 6px;
	color: #78350f;
	font-size: 0.9375rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.reset-notice-full {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #d1fae5;
	border: 1px solid #10b981;
	border-radius: 8px;
	color: #065f46;
	font-weight: 600;
	font-size: 0.9375rem;
}

.help-action {
	display: flex;
	justify-content: center;
	padding-top: 0.5rem;
}

.btn-go-to-correction {
	padding: 0.875rem 2rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-go-to-correction:hover {
	background: #2563eb;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* ============================================
   TEACHER HELP RECEIVED SECTION (Student View)
   ============================================ */

.teacher-help-received {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.teacher-help-notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border: 2px solid #10b981;
	border-radius: 8px;
	margin-bottom: 1rem;
	color: #065f46;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.teacher-help-notice:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.notice-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.notice-arrow {
	margin-left: auto;
	font-size: 1.25rem;
	color: #059669;
}

.teacher-help-received .teacher-help-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #fbbf24;
}

.teacher-help-received .teacher-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.teacher-help-received .teacher-help-header h5 {
	margin: 0;
	flex: 1;
	color: #92400e;
	font-size: 1.1rem;
	font-weight: 700;
}

.teacher-help-received .help-timestamp {
	font-size: 0.75rem;
	color: #b45309;
}

/* Teacher Guidance Content */
.teacher-help-received .teacher-guidance {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.teacher-help-received .teacher-message,
.teacher-help-received .teacher-hint {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.teacher-help-received .teacher-message strong,
.teacher-help-received .teacher-hint strong {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #92400e;
}

.teacher-help-received .message-content,
.teacher-help-received .hint-content {
	background: white;
	padding: 0.875rem 1rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	font-size: 0.9rem;
	line-height: 1.6;
	color: #1f2937;
}

.teacher-help-received .hint-content {
	border-left: 4px solid #f59e0b;
	background: #fffbeb;
}

/* Acknowledgment Section */
.teacher-help-received .help-acknowledgment {
	border-top: 1px solid #fbbf24;
	padding-top: 0.875rem;
}

.teacher-help-received .help-acknowledgment p {
	margin: 0.25rem 0;
	font-size: 0.875rem;
	color: #78350f;
}

.teacher-help-received .reset-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #059669;
	font-weight: 600;
	margin: 0.5rem 0;
}

.teacher-help-received .encouragement {
	font-weight: 600;
	color: #92400e;
	margin-top: 0.5rem !important;
}

/* Responsive - Stack on Mobile */
@media (max-width: 768px) {
	.student-correction-modal {
		width: 100%;
		height: 95vh;
	}
	
	.student-modal-body-split {
		flex-direction: column;
	}
	
	.passage-panel {
		flex: 0 0 40%;
		border-right: none;
		border-bottom: 2px solid #e2e8f0;
	}
	
	.correction-panel {
		flex: 1;
	}
	
	.button-group-modal {
		flex-direction: column;
		width: 100%;
	}
	
	.btn-need-help-modal,
	.btn-submit-modal {
		width: 100%;
	}
	
	.teacher-help-received {
		padding: 1rem;
	}
	
	.teacher-help-received .teacher-help-header {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* GP Paper 2 Marking Report Styles */

.gp-paper2-marking-report {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.gp-paper2-marking-report__questions-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.allow-corrections-control {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.allow-corrections-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: #334155;
}

.allow-corrections-toggle__label {
	font-size: 0.9rem;
}

.allow-corrections-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.allow-corrections-toggle__switch {
	width: 44px;
	height: 24px;
	background: #cbd5e1;
	border-radius: 999px;
	position: relative;
	transition: background 0.2s;
}

.allow-corrections-toggle__switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.allow-corrections-toggle input:checked + .allow-corrections-toggle__switch {
	background: #2563eb;
}

.allow-corrections-toggle input:checked + .allow-corrections-toggle__switch::after {
	transform: translateX(20px);
}

.allow-corrections-toggle input:disabled + .allow-corrections-toggle__switch {
	opacity: 0.6;
}

.allow-corrections-error {
	margin: 0;
	font-size: 0.75rem;
	color: #b91c1c;
}

.corrections-disabled-banner {
	background: #fefce8;
	border: 1px solid #fde68a;
	border-left: 4px solid #f97316;
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 600;
	color: #92400e;
}

/* Loading State */
.gp-paper2-marking-report__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.gp-paper2-marking-report__spinner {
	margin-bottom: 20px;
}

.gp-paper2-marking-report__spinner .spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e2e8f0;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

/* Small inline spinner for buttons */
.spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}

.gp-paper2-marking-report__loading h3 {
	margin: 0 0 8px 0;
	color: #1e293b;
	font-size: 20px;
}

.gp-paper2-marking-report__loading p {
	margin: 0;
	color: #64748b;
	font-size: 15px;
}

/* Pending Review State */
.gp-paper2-marking-report__pending-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.gp-paper2-marking-report__pending-review .pending-review-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.gp-paper2-marking-report__pending-review h3 {
	margin: 0 0 8px 0;
	color: #78350f;
	font-size: 20px;
	font-weight: 600;
}

.gp-paper2-marking-report__pending-review p {
	margin: 0;
	color: #92400e;
	font-size: 15px;
	max-width: 500px;
}

/* Error State */
.gp-paper2-marking-report__error {
	padding: 40px 20px;
	text-align: center;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 12px;
}

.gp-paper2-marking-report__error h3 {
	margin: 0 0 12px 0;
	color: #991b1b;
	font-size: 20px;
}

.gp-paper2-marking-report__error p {
	margin: 0;
	color: #991b1b;
	font-size: 15px;
}

/* Retry Button */
.gp-paper2-marking-report .retry-button {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.gp-paper2-marking-report .retry-button:hover:not(:disabled) {
	background: #5a67d8;
}

.gp-paper2-marking-report .retry-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Marks Section Styles */
.gp-paper2-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.gp-paper2-marks-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.gp-paper2-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	margin-bottom: 24px;
	color: white;
}

.gp-paper2-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gp-paper2-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
}

.gp-paper2-score-value {
	font-size: 32px;
	font-weight: 700;
}

.gp-paper2-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.gp-paper2-badge-icon {
	font-size: 24px;
}

.gp-paper2-badge-text {
	font-size: 16px;
	font-weight: 600;
}

.gp-paper2-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.2);
}

.gp-paper2-performance-badge.good {
	background: rgba(59, 130, 246, 0.2);
}

.gp-paper2-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.2);
}

.gp-paper2-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.2);
}

.gp-paper2-marks-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.gp-paper2-mark-category {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	border-left: 4px solid #667eea;
}

.gp-paper2-mark-category h4 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 600;
	color: #2d3748;
}

.gp-paper2-mark-display {
	margin-top: 8px;
}

.gp-paper2-mark-score {
	font-size: 24px;
	font-weight: 700;
	color: #667eea;
}

/* Header */
.gp-paper2-marking-report__header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 24px;
	border-radius: 12px;
	color: white;
}

.gp-paper2-marking-report__header h2 {
	margin: 0 0 16px 0;
	font-size: 24px;
	font-weight: 700;
}

/* Score Card */
.gp-paper2-marking-report__score-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.gp-paper2-marking-report__score-main {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.gp-paper2-marking-report__score-value {
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
}

.gp-paper2-marking-report__score-divider {
	font-size: 28px;
	opacity: 0.7;
}

.gp-paper2-marking-report__score-total {
	font-size: 28px;
	opacity: 0.9;
}

.gp-paper2-marking-report__score-percentage {
	margin-left: auto;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 20px;
	font-weight: 700;
}

/* Overall Feedback */
.gp-paper2-marking-report__overall-feedback {
	padding: 20px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 12px;
}

.gp-paper2-marking-report__overall-feedback h3 {
	margin: 0 0 12px 0;
	color: #0c4a6e;
	font-size: 18px;
}

.gp-paper2-marking-report__overall-feedback p {
	margin: 0;
	color: #0369a1;
	line-height: 1.6;
}

/* Questions Section */
.gp-paper2-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.gp-paper2-marking-report__questions > h3 {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* Individual Question Result */
.gp-paper2-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.gp-paper2-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.gp-paper2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

/* Question Number Pill Badge */
.question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.gp-paper2-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.gp-paper2-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.gp-paper2-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.gp-paper2-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

/* Question Text */
.gp-paper2-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.gp-paper2-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

/* Answer */
.gp-paper2-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gp-paper2-question-result__answer strong {
	color: #1e293b;
}

.gp-paper2-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
}

.gp-paper2-question-result__answer-text em {
	color: #94a3b8;
}

/* Marking Criteria */
.gp-paper2-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gp-paper2-question-result__criteria strong {
	color: #1e293b;
}

.gp-paper2-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gp-paper2-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.gp-paper2-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.gp-paper2-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.gp-paper2-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.gp-paper2-criteria-item.awarded .gp-paper2-criteria-icon {
	background: #22c55e;
	color: white;
}

.gp-paper2-criteria-item.not-awarded .gp-paper2-criteria-icon {
	background: #ef4444;
	color: white;
}

.gp-paper2-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gp-paper2-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.gp-paper2-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

/* Hidden criterion styling for students */
.gp-paper2-criteria-item.hidden-criterion {
	opacity: 0.6;
}

.gp-paper2-criteria-hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

/* Question Feedback */
.gp-paper2-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
}

.gp-paper2-question-result__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.gp-paper2-question-result__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px) {
	.gp-paper2-marking-report__score-card {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.gp-paper2-marking-report__score-percentage {
		margin-left: 0;
	}
	
	.gp-paper2-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ============================================
   CORRECTIONS FEATURE STYLES
   ============================================ */

/* Corrections Overview (Progress Tracker) */
.corrections-overview {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 1.5rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.corrections-overview h4 {
	margin: 0 0 1rem 0;
	font-size: 18px;
	font-weight: 600;
}

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

.progress-stat {
	background: rgba(255, 255, 255, 0.2);
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	backdrop-filter: blur(10px);
}

.progress-stat.need-help {
	background: rgba(239, 68, 68, 0.3);
}

.progress-stat.not-started {
	background: rgba(148, 163, 184, 0.3);
}

.stat-value {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	display: block;
	font-size: 13px;
	opacity: 0.9;
	font-weight: 500;
}

.deadline-info {
	text-align: center;
	font-size: 14px;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	font-weight: 500;
}

/* Question Correction Section */
.question-correction-section {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: #f8fafc;
	border-left: 4px solid #667eea;
	border-radius: 8px;
}

.correction-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.correction-header h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.deadline-badge {
	background: #dbeafe;
	color: #1e40af;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

.deadline-passed-badge {
	background: #fee2e2;
	color: #991b1b;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

/* Status Indicators */
.need-help-status {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.need-help-status .status-icon {
	font-size: 24px;
	line-height: 1;
}

.need-help-status .status-content {
	flex: 1;
}

.need-help-status strong {
	display: block;
	color: #92400e;
	margin-bottom: 0.25rem;
	font-size: 15px;
}

.need-help-status p {
	margin: 0;
	color: #78350f;
	font-size: 14px;
}

.attempts-info {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: #e0e7ff;
	border-radius: 6px;
}

.attempts-badge {
	font-weight: 600;
	color: #3730a3;
	font-size: 14px;
}

.attempts-remaining {
	font-size: 13px;
	color: #4338ca;
}

/* Previous Attempts */
.previous-attempts {
	margin-bottom: 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
}

.previous-attempts summary {
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 14px;
	user-select: none;
}

.previous-attempts summary:hover {
	background: #e2e8f0;
}

.attempts-list {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.attempt-item {
	padding: 1rem;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.attempt-date {
	font-size: 12px;
	color: #64748b;
}

.attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
}

/* Correction Form */
.correction-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.correction-textarea {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
}

.correction-textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.correction-textarea::placeholder {
	color: #94a3b8;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.word-count {
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}

.word-count.insufficient {
	color: #dc2626;
}

.button-group {
	display: flex;
	gap: 0.75rem;
}

.btn-need-help,
.btn-submit-correction {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-need-help {
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.btn-need-help:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.btn-submit-correction {
	background: #667eea;
	color: white;
}

.btn-submit-correction:hover:not(:disabled) {
	background: #5a67d8;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-need-help:disabled,
.btn-submit-correction:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Responsive */
@media (max-width: 640px) {
	.progress-grid {
		grid-template-columns: 1fr;
	}
	
	.correction-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.form-footer {
		flex-direction: column;
		align-items: stretch;
	}
	
	.button-group {
		flex-direction: column;
	}
	
	.btn-need-help,
	.btn-submit-correction {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   TEACHER CORRECTIONS VIEW
   ============================================ */

.teacher-corrections-view {
	margin-top: 1.5rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border: 2px solid #3b82f6;
	border-radius: 8px;
}

.teacher-corrections-view .correction-header.teacher-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #bfdbfe;
}

.teacher-corrections-view .correction-header.teacher-header h5 {
	margin: 0;
	color: #1e40af;
	font-size: 16px;
	font-weight: 600;
}

.need-help-badge-teacher {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 1px solid #ef4444;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #991b1b;
	animation: pulse 2s ease-in-out infinite;
}

.correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: white;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

.correction-status-summary .status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-status-summary .status-item .label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.correction-status-summary .status-item .value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.correction-status-summary .status-item .value.status-in_progress {
	color: #f59e0b;
}

.correction-status-summary .status-item .value.status-need_help {
	color: #ef4444;
}

.correction-status-summary .status-item .value.status-not_started {
	color: #64748b;
}

.teacher-attempts-list {
	margin-top: 1rem;
}

.teacher-attempts-list h6 {
	margin: 0 0 0.75rem 0;
	color: #475569;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 0.75rem;
	transition: all 0.2s;
}

.teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.teacher-attempt-item .attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.teacher-attempt-item .attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.teacher-attempt-item .attempt-date {
	font-size: 12px;
	color: #64748b;
}

.teacher-attempt-item .attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.no-attempts {
	padding: 1.5rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	text-align: center;
}

.no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
	.teacher-corrections-view {
		padding: 1rem;
	}
	
	.correction-status-summary {
		grid-template-columns: 1fr;
	}
	
	.teacher-attempt-item {
		padding: 0.875rem;
	}
}


/* AI Feedback Panel */
.ai-feedback-panel {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
	border: 1px solid #bae6fd;
	border-radius: 8px;
}

.ai-feedback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #bae6fd;
}

.ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: white;
	border: 1px solid #38bdf8;
	border-radius: 6px;
	color: #0284c7;
	font-size: 13px;
	font-weight: 600;
}

.quality-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.quality-badge.quality-excellent {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.quality-badge.quality-good {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

.quality-badge.quality-partial {
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fcd34d;
}

.quality-badge.quality-minimal {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.feedback-section {
	margin-bottom: 1rem;
}

.feedback-section:last-child {
	margin-bottom: 0;
}

.feedback-section h6 {
	margin: 0 0 0.5rem 0;
	color: #0c4a6e;
	font-size: 14px;
	font-weight: 600;
}

.feedback-section.improvements h6 {
	color: #15803d;
}

.feedback-section.still-missing h6 {
	color: #b45309;
}

.feedback-section.next-steps h6 {
	color: #7c3aed;
}

.feedback-section ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: disc;
}

.feedback-section li {
	margin-bottom: 0.375rem;
	color: #334155;
	font-size: 14px;
	line-height: 1.6;
}

.feedback-section.main-feedback p {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-wrap;
}

.feedback-section.next-steps p {
	margin: 0;
	color: #64748b;
	font-size: 14px;
	line-height: 1.6;
	font-style: italic;
	padding-left: 1rem;
	border-left: 3px solid #c4b5fd;
}

/* AI Feedback Loading */
.ai-feedback-loading {
	margin-top: 1rem;
	padding: 1rem;
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #fde68a;
	border-top-color: #f59e0b;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.ai-feedback-loading span {
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
}

/* Make previous attempts expanded by default when they have feedback */
.previous-attempts[open] summary {
	margin-bottom: 1rem;
}

/* Model Answer Section */
.model-answer-section {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #86efac;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.model-answer-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #86efac;
}

.model-answer-icon {
	font-size: 1.5rem;
}

.model-answer-header h5 {
	margin: 0;
	color: #15803d;
	font-size: 1.25rem;
	font-weight: 700;
}

.model-answer-intro {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: white;
	border-left: 4px solid #22c55e;
	border-radius: 6px;
}

.model-answer-intro p {
	margin: 0;
	color: #166534;
	font-size: 0.938rem;
	font-weight: 500;
}

.model-answer-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.model-answer-text,
.model-answer-points,
.model-answer-explanation {
	padding: 1.25rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.model-answer-text strong,
.model-answer-points strong,
.model-answer-explanation strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #15803d;
	font-size: 1rem;
	font-weight: 600;
}

.model-answer-text p,
.model-answer-explanation p {
	margin: 0;
	color: #334155;
	font-size: 0.938rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.model-answer-points ul {
	margin: 0;
	padding-left: 1.5rem;
	list-style: none;
}

.model-answer-points li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.5rem;
	color: #475569;
	font-size: 0.938rem;
	line-height: 1.6;
}

.model-answer-points li:before {
	content: "→";
	position: absolute;
	left: 0;
	color: #22c55e;
	font-weight: 700;
}

.model-answer-points li:last-child {
	margin-bottom: 0;
}

/* Criteria Hint */
.gp-paper2-criteria-hint {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-left: 3px solid #94a3b8;
	border-radius: 4px;
}

.gp-paper2-criteria-hint p {
	margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
	.model-answer-section {
		padding: 1rem;
	}
	
	.model-answer-text,
	.model-answer-points,
	.model-answer-explanation {
		padding: 1rem;
	}
}

/* Teacher View - Hide CardShell border and header */
.teacher-view-no-shell {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: transparent !important;
}

.teacher-view-no-shell .lj-card__header {
	display: none !important;
}

.teacher-view-no-shell .lj-card__body {
	padding: 0 !important;
}

/* Correction Criteria Section */
.correction-criteria-section {
	margin-top: 1rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.correction-criteria-section strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.correction-criteria-section .gp-paper2-criteria-list {
	margin: 0;
}

.criteria-hint-correction {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: #fef3c7;
	border-radius: 6px;
	border: 1px solid #fbbf24;
}

/* Teacher AI Feedback in Attempts */
.teacher-ai-feedback {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.teacher-feedback-text {
	margin-top: 0.75rem;
}

.teacher-feedback-text strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.teacher-feedback-text p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Correction Improvements Indicator */
.correction-improvements-indicator {
	padding: 0.75rem;
	background: #d1fae5;
	border-radius: 8px;
	border: 1px solid #10b981;
}

.correction-improvements-indicator strong {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #065f46;
}

.correction-improvements-indicator .gp-paper2-criteria-list {
	margin-top: 0.5rem;
}

.correction-improvements-indicator .gp-paper2-criteria-item {
	background: white;
	border-color: #10b981;
}

/* Via Correction Pill Badge */
.via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

/* Successful Correction Display (Teacher View) */
.successful-correction-display {
	margin-top: 1rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border: 1px solid #86efac;
	border-radius: 8px;
	overflow: hidden;
}

.successful-correction-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(34, 197, 94, 0.1);
	border-bottom: 1px solid #86efac;
}

.successful-correction-header .success-icon {
	font-size: 1.125rem;
}

.successful-correction-header strong {
	flex: 1;
	font-size: 0.875rem;
	color: #166534;
}

.successful-correction-header .correction-date {
	font-size: 0.75rem;
	color: #15803d;
}

.successful-correction-content {
	padding: 1rem;
}

.successful-correction-content .correction-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #1e293b;
	white-space: pre-wrap;
}

/* Correction Header Info */
.correction-header-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Criteria Completion Badge */
.criteria-completion-badge {
	background: #e0f2fe;
	color: #0369a1;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid #7dd3fc;
}

/* Student Correction Button Section */
.question-correction-button-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

.btn-open-correction-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-open-correction-modal:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.attempts-badge-inline {
	padding: 0.5rem 1rem;
	background: white;
	color: #0369a1;
	border: 1px solid #7dd3fc;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Teacher Help Notification (Student View - shown in marking report) */
/* Correction Completed Banner */
.correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.correction-completed-icon {
	font-size: 2rem;
	line-height: 1;
}

.correction-completed-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.correction-completed-content strong {
	font-size: 1rem;
	color: #166534;
}

.correction-completed-content span {
	font-size: 0.875rem;
	color: #15803d;
}

.teacher-help-notification {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.teacher-help-notification__icon {
	font-size: 1.5rem;
	line-height: 1;
	animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.teacher-help-notification__title {
	font-size: 1rem;
	font-weight: 700;
	color: #065f46;
}

.teacher-help-notification__content {
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.teacher-help-notification__message {
	font-size: 0.9375rem;
	color: #047857;
	line-height: 1.6;
	margin: 0 0 0.75rem 0;
}

.teacher-help-notification__hint {
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	color: #78350f;
	margin-bottom: 0.75rem;
}

.teacher-help-notification__hint strong {
	color: #b45309;
}

.teacher-help-notification__reset {
	font-size: 0.875rem;
	color: #0369a1;
	background: rgba(224, 242, 254, 0.7);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	margin: 0;
	font-weight: 500;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta {
	margin-left: 2.25rem;
	background: #10b981;
}

.teacher-help-notification .btn-open-correction-modal.teacher-help-cta:hover {
	background: #059669;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Question Action Buttons */
.header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.question-edit-btn,
.question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.question-corrections-btn .help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.question-corrections-btn .attempts-badge {
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* ============================================
   Language Assessment Section (Phase 5)
   ============================================ */

.gp-paper2-language-feedback {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 12px;
	border-left: 4px solid #0284c7;
}

.gp-paper2-language-feedback h3 {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	color: #0369a1;
}

.gp-paper2-language-feedback__content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.gp-paper2-language-feedback__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.gp-paper2-language-feedback__score .label {
	color: #64748b;
}

.gp-paper2-language-feedback__score .value {
	font-size: 1.25rem;
	color: #0284c7;
}

.gp-paper2-language-feedback__text {
	color: #334155;
	line-height: 1.6;
}

/* Language row in marks breakdown */
.gp-paper2-mark-category--language {
	border-top: 2px dashed #e2e8f0;
	padding-top: 1rem;
}

.gp-paper2-mark-category--language h4 {
	color: #0284c7;
}


/* Responsive adjustments */
@media (max-width: 640px) {
	.header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.5rem;
	}
	
	.question-edit-btn,
	.question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
	
	.gp-paper2-language-feedback {
		padding: 1rem;
	}
	
	.gp-paper2-language-feedback__score .value {
		font-size: 1.125rem;
	}
}

/* English Paper 2 Question 14 card */
.narrative-question14-card__answers {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.narrative-question14-card__answer-row {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.5rem 0.75rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}

.narrative-question14-card__answer-label {
	font-weight: 600;
	color: #1e293b;
	min-width: 72px;
}

.narrative-question14-card__answer-value {
	color: #334155;
}

.narrative-question14-card__phrases {
	margin-top: 0.5rem;
	padding-left: 1.1rem;
	color: #1f2937;
}

.narrative-question14-card__phrases li {
	line-height: 1.4;
}
.lj-gp-banner {
	position: relative;
	overflow: hidden;
	color: #041316;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

.lj-gp-banner__bg {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	/* Warmer, more muted palette than English */
	background: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 40%, #fef3c7 100%);
	animation: lj-biology-banner-bg 14s ease-in-out infinite;
	z-index: -2;
}

.lj-gp-banner__shapes {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	z-index: -1;
}

.lj-gp-banner__shape {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0) 70%);
	animation: lj-float 10s ease-in-out infinite;
}

.lj-gp-banner__shape:nth-child(1) { top: -32px; left: -28px; animation-delay: .2s; }
.lj-gp-banner__shape:nth-child(2) { bottom: -30px; right: -32px; animation-delay: .9s; }
.lj-gp-banner__shape:nth-child(3) { top: 20%; right: 18%; width: 120px; height: 120px; animation-delay: 1.7s; }

.lj-gp-banner__content {
	text-align: center;
}

.lj-gp-banner__top {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: #022c22;
	opacity: .95;
	transform: translateY(6px);
	animation: lj-slide-up .6s ease-out .05s both;
}

.lj-gp-banner__top span {
	background: linear-gradient(90deg, #047857, #0f172a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lj-gp-banner__main {
	margin: 6px 0 4px 0;
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	background: linear-gradient(90deg, #047857, #0ea5e9, #f97316);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lj-fade-in .55s ease-out .15s both;
}

.lj-gp-banner__subtitle {
	margin-top: 8px;
	color: #022c22;
	opacity: .96;
}

/* ============================
   General Paper – Card Variants
   ============================ */

.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* ============================
   General Paper – AI Practice
   ============================ */

.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(16, 185, 129, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #065f46; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__sentence { color: #0f172a; padding: 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}

/* ============================
   General Paper – AI Open-Ended
   ============================ */

.lj-ai-open-ended {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-ai-open-ended__instructions {
	margin-bottom: 16px;
	color: #0f172a;
}

.lj-ai-open-ended__question {
	margin-bottom: 16px;
}

.lj-ai-open-ended__answer textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}

.lj-ai-open-ended__feedback {
	padding: 14px;
	border-radius: 10px;
	margin-top: 12px;
}

.lj-ai-open-ended__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-ai-open-ended__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

.lj-ai-open-ended__actions {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

/* Error Highlighting for AI Open-Ended Questions */
.lj-card__feedback .error-highlight {
	background: #fee;
	color: #c00;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: 600;
	display: inline;
	margin: 0;
}

/* ============================
   General Paper – Quick Check
   ============================ */

.lj-quick-check {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-quick-check__question {
	margin-bottom: 8px;
}

.lj-quick-check__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-quick-check__option {
	padding: 12px 16px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.lj-quick-check__option:hover:not(:disabled) {
	background: rgba(16, 185, 129, 0.05);
	border-color: rgba(16, 185, 129, 0.3);
	transform: none;
}

.lj-quick-check__option.is-selected {
	background: rgba(16, 185, 129, 0.1);
	border-color: rgba(16, 185, 129, 0.5);
}

.lj-quick-check__option.is-correct {
	background: rgba(22, 163, 74, 0.12);
	border-color: #16a34a;
	color: #0f766e;
}

.lj-quick-check__option.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	border-color: #f43f5e;
	color: #be123c;
}

.lj-quick-check__feedback {
	margin-top: 12px;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
}

.lj-quick-check__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-quick-check__rationale {
	margin-top: 12px;
	padding: 12px;
	border-radius: 8px;
}

.lj-quick-check__rationale.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-quick-check__rationale.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

/* Quick Check Completion Screen */
.lj-quickcheck-completion {
	text-align: center;
	padding: 32px 16px;
}

.lj-quickcheck-completion__icon {
	font-size: 64px;
	margin-bottom: 16px;
}

.lj-quickcheck-completion__title {
	font-size: 24px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 12px;
}

.lj-quickcheck-completion__message {
	font-size: 16px;
	color: #475569;
	margin-bottom: 24px;
}

.lj-quickcheck-completion__button {
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
}

/* ============================
   General Paper – Example Spotlight (Worked Example)
   No levels; visually rich “model answer” card
   ============================ */

.lj-card.lj-card--example-spotlight {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.25);
}

.lj-gp-exampleSpotlight {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-gp-exampleSpotlight__top {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
	padding: 12px;
	border-radius: 14px;
	background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.10), transparent 55%),
		radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 55%),
		#ffffff;
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.lj-gp-exampleSpotlight__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.lj-gp-exampleSpotlight__prompt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.lj-gp-exampleSpotlight__promptLabel {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #065f46;
}

.lj-gp-exampleSpotlight__promptText {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 650;
	color: #0f172a;
}

.lj-gp-exampleSpotlight__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 2px;
}

.lj-gp-exampleSpotlight__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 650;
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: rgba(248, 250, 252, 1);
	color: #0f172a;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-gp-exampleSpotlight__chip.tone-emerald {
	border-color: rgba(16, 185, 129, 0.28);
	background: rgba(16, 185, 129, 0.08);
	color: #065f46;
}

.lj-gp-exampleSpotlight__chip.tone-blue {
	border-color: rgba(59, 130, 246, 0.28);
	background: rgba(59, 130, 246, 0.08);
	color: #1e3a8a;
}

.lj-gp-exampleSpotlight__chip.tone-amber {
	border-color: rgba(245, 158, 11, 0.28);
	background: rgba(245, 158, 11, 0.09);
	color: #78350f;
}

.lj-gp-exampleSpotlight__chip.tone-purple {
	border-color: rgba(168, 85, 247, 0.28);
	background: rgba(168, 85, 247, 0.09);
	color: #581c87;
}

.lj-gp-exampleSpotlight__chip.tone-slate {
	border-color: rgba(148, 163, 184, 0.7);
	background: rgba(248, 250, 252, 1);
	color: #0f172a;
}

.lj-gp-exampleSpotlight__sectionTitle {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #334155;
	margin: 0 2px 12px 2px;
}

.lj-gp-exampleSpotlight__model {
	padding: 12px;
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.lj-gp-exampleSpotlight__model .lj-card__html p {
	margin: 0 0 10px 0;
}

.lj-gp-exampleSpotlight__model .lj-card__html p:last-child {
	margin-bottom: 0;
}

.lj-gp-exampleSpotlight__annotations {
	padding: 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.lj-gp-exampleSpotlight__annotationGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

@media (max-width: 520px) {
	.lj-gp-exampleSpotlight__annotationGrid {
		grid-template-columns: 1fr;
	}
}

.lj-gp-exampleSpotlight__annotation {
	padding: 10px;
	border-radius: 12px;
	background: rgba(248, 250, 252, 1);
	border: 1px solid rgba(148, 163, 184, 0.45);
}

.lj-gp-exampleSpotlight__annotationLabel {
	font-weight: 800;
	color: #0f172a;
	font-size: 13px;
	margin-bottom: 6px;
}

.lj-gp-exampleSpotlight__annotationDetail {
	color: #475569;
	font-size: 13px;
	line-height: 1.45;
}

.lj-gp-exampleSpotlight__footer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(16, 185, 129, 0.08);
	border: 1px solid rgba(16, 185, 129, 0.22);
	color: #065f46;
}

.lj-gp-exampleSpotlight__footerIcon {
	font-size: 18px;
	line-height: 1;
	margin-top: 1px;
}

.lj-gp-exampleSpotlight__footerText {
	font-size: 13px;
	font-weight: 650;
	line-height: 1.45;
}

.lj-gp-exampleSpotlight__actions {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(148, 163, 184, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* ============================
   General Paper – DragDrop Builder (Micro-answer Builder)
   GP-scoped styling for .lj-dragdrop (do not rely on English Base.css)
   ============================ */

.lj-gp-builder {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-gp-builder__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lj-gp-builder__pill {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 14px;
	background: rgba(16, 185, 129, 0.10);
	border: 1px solid rgba(16, 185, 129, 0.22);
	color: #065f46;
}

.lj-gp-builder__pill.is-secondary {
	background: rgba(59, 130, 246, 0.08);
	border-color: rgba(59, 130, 246, 0.22);
	color: #1e3a8a;
}

.lj-gp-builder__pillLabel {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.lj-gp-builder__pillValue {
	font-size: 13px;
	font-weight: 700;
}

.lj-gp-builder__instructions {
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.06);
	color: #0f172a;
}

.lj-gp-builder__prompt {
	margin: 0;
	font-weight: 650;
	color: #0f172a;
}

.lj-gp-builder__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

/* Drag-and-Drop Layout */
.lj-dragdrop {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-dragdrop__prompt {
	font-weight: 500;
	color: #0f172a;
}

.lj-dragdrop__bank {
	background: rgba(16, 185, 129, 0.06);
	border: 1px dashed rgba(16, 185, 129, 0.55);
	border-radius: 12px;
	padding: 12px;
}

.lj-dragdrop__tokens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lj-dragdrop__token {
	padding: 8px 12px;
	border-radius: 10px;
	background: #047857;
	color: #ffffff;
	font-weight: 650;
	cursor: grab;
	box-shadow: 0 6px 16px rgba(4, 120, 87, 0.22);
	user-select: none;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-dragdrop__token:active {
	cursor: grabbing;
}

.lj-dragdrop__token.is-assigned {
	background: #1d4ed8;
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.22);
}

.lj-dragdrop__hint {
	color: #0f172a;
}

.lj-dragdrop__board {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.lj-dragdrop__bin {
	background: #ffffff;
	border: 1px solid rgba(148, 163, 184, 0.55);
	border-radius: 12px;
	padding: 12px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.lj-dragdrop__heading {
	margin: 5px;
	font-weight: 500;
	color: #0f172a;
}

.lj-dragdrop__binTokens {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-content: flex-start;
}

.lj-dragdrop__placeholder {
	color: #64748b;
}


/* ============================
   General Paper – Content Examples
   Make the examples column wider (GP only)
   ============================ */

@media (min-width: 960px) {
	.lj-card.lj-card--content-examples .lj-content-card__layout.has-examples {
		/* Slightly favour the examples column without making it too wide */
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr);
	}
}

/* ============================
   AI Feedback Styling (GP-specific)
   ============================ */

.lj-ai-feedback {
	margin-top: 16px;
	padding: 16px;
	border-radius: 8px;
	border-left: 4px solid;
}

.lj-ai-feedback.is-correct {
	background: #f0fdf4;
	border-left-color: #10b981;
}

.lj-ai-feedback.is-incorrect {
	background: #fef2f2;
	border-left-color: #ef4444;
}

.lj-ai-feedback__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.lj-ai-feedback__title {
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
}

.lj-ai-feedback__content {
	color: #334155;
	line-height: 1.6;
}

.lj-ai-feedback__content p {
	margin: 0 0 12px 0;
}

.lj-ai-feedback__content p:last-child {
	margin-bottom: 0;
}

.lj-ai-feedback__content ul,
.lj-ai-feedback__content ol {
	margin: 8px 0 12px 20px;
	padding: 0;
}

.lj-ai-feedback__content li {
	margin-bottom: 6px;
	line-height: 1.5;
}

.lj-ai-feedback__content strong {
	color: #0f172a;
	font-weight: 600;
}

.lj-ai-feedback__content em {
	font-style: italic;
	color: #475569;
}



/* BM K1 Bahagian A - Split layout: left = Soalan, right = Jawapan (matches BM K2 Bahagian C style) */
.bm-k1-bahagian-a-card {
	font-size: 1rem;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.bm-k1-bahagian-a-card__progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	color: #475569;
}

.bm-k1-bahagian-a-card__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	min-height: 480px;
}

.bm-k1-bahagian-a-card__source-panel,
.bm-k1-bahagian-a-card__response-panel {
	border-radius: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 1.25rem;
	box-sizing: border-box;
}

.bm-k1-bahagian-a-card__source-panel {
	overflow-y: auto;
	border: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Soalan label - matches BM K2 style */
.bm-k1-bahagian-a-card__source-label {
	display: inline-flex;
	align-self: flex-start;
	background: #3b82f6;
	color: white;
	padding: 6px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
}

/* Instruction block - distinct box */
.bm-k1-bahagian-a-card__instruction-block {
	padding: 1rem 1.25rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	border-left: 4px solid #3b82f6;
}

.bm-k1-bahagian-a-card__instruction {
	margin: 0;
	font-weight: 500;
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.65;
}

/* Petikan block */
.bm-k1-bahagian-a-card__petikan {
	padding: 1.25rem 1.5rem;
	background: #f9fbff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

/* Kontena 2: grafik tunggal (full width under arahan) */
.bm-k1-bahagian-a-card__pure-graphic {
	width: 100%;
}

.bm-k1-bahagian-a-card__pure-graphic .bm-k1-bahagian-a-image-wrap {
	max-width: 100%;
}

/* Kontena 3: visual kiri + teks kanan */
.bm-k1-bahagian-a-card__two-column-stimulus {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.bm-k1-bahagian-a-card__two-column-stimulus-visual .bm-k1-bahagian-a-image-wrap {
	max-width: 100%;
}

.bm-k1-bahagian-a-card__two-column-stimulus-text .bm-k1-bahagian-a-card__petikan {
	height: 100%;
	box-sizing: border-box;
}

.bm-k1-bahagian-a-card__petikan-title {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
	color: #1e293b;
	line-height: 1.4;
}

.bm-k1-bahagian-a-card__content {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #111827;
	text-align: justify;
	word-spacing: 0.02em;
}

.bm-k1-bahagian-a-card__source {
	margin: 1rem 0 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid #e2e8f0;
	font-size: 0.875rem;
	color: #64748b;
	font-style: italic;
}

/* Images section */
.bm-k1-bahagian-a-card__images-section {
	display: flex;
	flex-direction: column;
}

.bm-k1-bahagian-a-card__images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	align-items: start;
}

.bm-k1-bahagian-a-card__images .bm-k1-bahagian-a-image-wrap {
	max-width: 100%;
}

.bm-k1-bahagian-a-image-wrap {
	position: relative;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: #f1f5f9;
}

.bm-k1-bahagian-a-image {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: top;
}

/* Clickable stimulus infographic → lightbox */
.bm-k1-bahagian-a-image-expand-trigger {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: zoom-in;
	text-align: left;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bm-k1-bahagian-a-image-expand-trigger:hover {
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
	transform: translateY(-1px);
}

.bm-k1-bahagian-a-image-expand-trigger:focus-visible {
	outline: 3px solid #3b82f6;
	outline-offset: 3px;
}

.bm-k1-bahagian-a-image-expand-trigger .bm-k1-bahagian-a-image {
	border-radius: 8px;
}

.bm-k1-bahagian-a-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 100060;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
		max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	background: rgba(15, 23, 42, 0.88);
	cursor: zoom-out;
	box-sizing: border-box;
}

.bm-k1-bahagian-a-lightbox-close {
	position: fixed;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	z-index: 100061;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #1e293b;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bm-k1-bahagian-a-lightbox-close:hover {
	background: #fff;
}

.bm-k1-bahagian-a-lightbox-close:focus-visible {
	outline: 3px solid #93c5fd;
	outline-offset: 2px;
}

.bm-k1-bahagian-a-lightbox-frame {
	max-width: min(96vw, 1600px);
	max-height: min(92vh, 1200px);
	margin: auto;
	cursor: default;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.bm-k1-bahagian-a-lightbox-img {
	max-width: 100%;
	max-height: min(92vh, 1200px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	background: #fff;
	/* Exact +15% visual size in modal (transform does not change intrinsic layout caps above). */
	transform: scale(1.15);
	transform-origin: center center;
}

/* Match resource preview: dim base image only when poster text overlay is shown */
.bm-k1-bahagian-a-image-wrap--poster-text .bm-k1-bahagian-a-image {
	opacity: 0.7;
}

.bm-k1-bahagian-a-image-placeholder {
	width: 100%;
	aspect-ratio: 16/10;
	background: #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: #64748b;
	font-size: 0.875rem;
}

.bm-k1-bahagian-a-speech-bubble {
	position: absolute;
	max-width: 70%;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 2px solid #334155;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	font-size: 0.9rem;
	line-height: 1.4;
}

.bm-k1-bahagian-a-speech-bubble--top-right {
	top: 8%;
	right: 8%;
}

.bm-k1-bahagian-a-speech-bubble--top-left {
	top: 8%;
	left: 8%;
}

.bm-k1-bahagian-a-speech-bubble--bottom-right {
	bottom: 8%;
	right: 8%;
}

.bm-k1-bahagian-a-speech-bubble--bottom-left {
	bottom: 8%;
	left: 8%;
}

.bm-k1-bahagian-a-informational-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 1rem 1.25rem;
	pointer-events: none;
}

.bm-k1-bahagian-a-informational-sentence {
	background-color: rgb(68 65 65 / 75%);
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.9);
	font-family: "Noto Serif", "Noto Sans Malay", Georgia, serif;
	line-height: 1.3;
	padding: 0.6rem 1.25rem;
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
}

.bm-k1-bahagian-a-poster-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: #fff;
	font-family: "Noto Sans", "Noto Sans Malay", sans-serif;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

.bm-k1-bahagian-a-poster-overlay-inner {
	background-color: rgba(15, 23, 42, 0.55);
	padding: 0.9rem 1rem;
	border-radius: 10px;
	width: 100%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.bm-k1-bahagian-a-poster-title {
	font-weight: 800;
	font-size: 1.25rem;
	margin-bottom: 0.35rem;
	text-align: center;
	letter-spacing: 0.02em;
}

.bm-k1-bahagian-a-poster-subtitle {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
	opacity: 1;
}

.bm-k1-bahagian-a-poster-meta {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
	text-align: center;
}

.bm-k1-bahagian-a-poster-activities {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: left;
	max-width: 90%;
}

/* Response panel (right side - Jawapan) */
.bm-k1-bahagian-a-card__response-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	background: #3b82f6;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.bm-k1-bahagian-a-card__response-header h4 {
	margin: 0;
	font-size: 16px;
	color: inherit;
	font-weight: 600;
}

.bm-k1-bahagian-a-card__response-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.bm-k1-bahagian-a-card__textarea {
	width: 100%;
	flex: 1;
	min-height: 280px;
	border-radius: 12px;
	border: 1.5px solid #cbd5e1;
	padding: 1rem;
	font-size: 17px;
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
	background: #fff;
	color: #0f172a;
	box-sizing: border-box;
}

.bm-k1-bahagian-a-card__textarea::placeholder {
	color: #94a3b8;
}

.bm-k1-bahagian-a-card__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.bm-k1-bahagian-a-card__textarea:disabled {
	background: #f6f7f7;
	cursor: not-allowed;
}

/* Selaras dengan BM K2 Bahagian C — mesej selepas hantar */
.bm-k1-bahagian-a-card .bm-k2-bahagian-c-rumusan__submitted {
	margin-top: 0.5rem;
}

.bm-k1-bahagian-a-card .bm-k2-bahagian-c-feedback {
	margin: 0.75rem 0 0 0;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 1rem;
	line-height: 1.5;
}

.bm-k1-bahagian-a-card .bm-k2-bahagian-c-feedback--correct {
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	font-weight: 600;
}

.bm-k1-bahagian-a-card__word-count {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #64748b;
}

.bm-k1-bahagian-a-card__actions {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.bm-k1-bahagian-a-submit {
	width: 100%;
	max-width: 320px;
	padding: 14px 24px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.bm-k1-bahagian-a-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45);
}

.bm-k1-bahagian-a-submit:disabled {
	opacity: 0.6;
	box-shadow: none;
	cursor: not-allowed;
}

.bm-k1-bahagian-a-hint {
	margin: 0;
	font-size: 0.9rem;
	color: #475569;
	text-align: center;
}

.bm-k1-bahagian-a-empty {
	padding: 2rem;
	text-align: center;
	color: #64748b;
}

.bm-k1-bahagian-a-practice-gen {
	max-width: 520px;
	margin: 0 auto;
	padding: 1.5rem 1rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	text-align: left;
}

.bm-k1-bahagian-a-practice-gen__lead {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #475569;
}

.bm-k1-bahagian-a-practice-gen__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-k1-bahagian-a-practice-gen__field label {
	font-weight: 600;
	font-size: 0.9rem;
	color: #334155;
}

.bm-k1-bahagian-a-practice-gen__input {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 0.95rem;
	box-sizing: border-box;
}

.bm-k1-bahagian-a-practice-gen__input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.bm-k1-bahagian-a-practice-gen__btn {
	align-self: flex-start;
}

@media (max-width: 960px) {
	.bm-k1-bahagian-a-card__split {
		grid-template-columns: 1fr;
	}

	.bm-k1-bahagian-a-card__two-column-stimulus {
		grid-template-columns: 1fr;
	}

	.bm-k1-bahagian-a-card__images {
		grid-template-columns: 1fr;
	}
}

/* Single image in source panel - full width */
.bm-k1-bahagian-a-card__images .bm-k1-bahagian-a-image-wrap:only-child {
	grid-column: 1 / -1;
	max-width: 320px;
	margin: 0 auto;
}
/**
 * BM SPM Kertas 1 — modal pemarkahan (Bahagian A & B).
 * Gaya putih selaras dengan modal BM (rujuk BmK1BahagianBMarkingModal.css).
 */

.bm-spm-k1-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: bmSpmK1Kertas1ModalFadeIn 0.3s ease;
}

@keyframes bmSpmK1Kertas1ModalFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.bm-spm-k1-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: bmSpmK1Kertas1ModalSlideUp 0.4s ease;
}

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

.bm-spm-k1-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.bm-spm-k1-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.bm-spm-k1-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.bm-spm-k1-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.bm-spm-k1-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.bm-spm-k1-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.bm-spm-k1-marking-modal__hint {
	font-size: 0.875rem;
	color: #475569;
	margin: 2rem 0 0 0;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.bm-spm-k1-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.5rem;
}

.bm-spm-k1-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: bmSpmK1Kertas1ModalSpin 1s linear infinite;
}

@keyframes bmSpmK1Kertas1ModalSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 768px) {
	.bm-spm-k1-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}

	.bm-spm-k1-marking-modal__title {
		font-size: 1.25rem;
	}
}
/**
 * BM K1 Bahagian B Essay Card Styles
 * Copied from EssayPracticeQuestion.css for BM-specific use
 */

/* Combined Argumentative Essay Question Card */
.bm-spm-k1-essay-combined {
	padding: 1rem 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.bm-spm-k1-essay-combined * {
	box-sizing: border-box;
}

.bm-spm-k1-essay-combined__generator {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 2px solid #e0e0e0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.bm-spm-k1-essay-combined__answer {
	margin-top: 2rem;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Part A & B Section Titles */
.bm-spm-k1-essay-section-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #2271b1;
}

/* Two-Column Layout for Question Generator */
.bm-spm-k1-essay-generator__two-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 1.5rem;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

.bm-spm-k1-essay-generator__column-left {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	flex: 1;
	min-height: 0;
	align-self: stretch;
	box-sizing: border-box;
	padding-right: 1.5rem;
	border-right: 1px solid #e2e8f0;
}

.bm-spm-k1-essay-generator__column-header {
	flex-shrink: 0;
	width: 100%;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid #e2e8f0;
	box-sizing: border-box;
}

.bm-spm-k1-essay-generator__column-heading {
	display: block;
	margin: 0;
	font-weight: 600;
	color: #1d2327;
	font-size: 0.9rem;
	line-height: 1.35;
	cursor: default;
}

.bm-spm-k1-essay-generator__column-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	min-width: 0;
}

.bm-spm-k1-essay-generator__column-actions {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	min-height: 0;
	padding-top: 0;
	box-sizing: border-box;
	width: 100%;
}

/* Match Bahagian A question-tab chrome; keep primary button fill (Akademi tokens). */
/* Essay submit row — centered like generator tabs; primary matches Jana Soalan */
.bm-spm-k1-essay-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1rem;
	padding-top: 0.25rem;
}

.bm-spm-k1-essay-generator__column-actions .button.button-primary,
.bm-spm-k1-essay-actions .button.button-primary,
#lj-runner .bm-spm-k1-essay-generator__column-actions .button.button-primary,
#lj-runner .bm-spm-k1-essay-actions .button.button-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: auto;
	margin: 0.75rem 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	font-size: 0.95rem;
	min-height: 52px;
	flex: 0 0 auto;
	box-sizing: border-box;
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 15%);
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
		'Liberation Sans', sans-serif;
	font-weight: 700;
	text-align: center;
	line-height: 1.25;
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background 160ms ease,
		color 160ms ease,
		filter 160ms ease,
		transform 160ms ease;

	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	border: 1px solid color-mix(in srgb, var(--akademi-sidebar-font-color, #ffffff) 20%, transparent);
	transform: none;
}

.bm-spm-k1-essay-generator__column-actions .button.button-primary:hover:not(:disabled),
.bm-spm-k1-essay-actions .button.button-primary:hover:not(:disabled),
#lj-runner .bm-spm-k1-essay-generator__column-actions .button.button-primary:hover:not(:disabled),
#lj-runner .bm-spm-k1-essay-actions .button.button-primary:hover:not(:disabled) {
	border-color: rgb(31 56 82 / 25%);
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 20%);
	filter: brightness(1.08);
	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	transform: none;
}

.bm-spm-k1-essay-generator__column-actions .button.button-primary:focus-visible,
.bm-spm-k1-essay-actions .button.button-primary:focus-visible,
#lj-runner .bm-spm-k1-essay-generator__column-actions .button.button-primary:focus-visible,
#lj-runner .bm-spm-k1-essay-actions .button.button-primary:focus-visible {
	outline: 2px solid var(--akademi-sidebar-overlay-color, #0984e3);
	outline-offset: 2px;
}

.bm-spm-k1-essay-generator__column-actions .button.button-primary:active:not(:disabled),
.bm-spm-k1-essay-actions .button.button-primary:active:not(:disabled),
#lj-runner .bm-spm-k1-essay-generator__column-actions .button.button-primary:active:not(:disabled),
#lj-runner .bm-spm-k1-essay-actions .button.button-primary:active:not(:disabled) {
	filter: brightness(0.95);
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 15%);
	background: var(--akademi-sidebar-overlay-color, #f5a925);
	color: var(--akademi-sidebar-font-color, #ffffff);
	transform: none;
}

.bm-spm-k1-essay-generator__column-actions .button.button-primary:disabled,
.bm-spm-k1-essay-actions .button.button-primary:disabled,
#lj-runner .bm-spm-k1-essay-generator__column-actions .button.button-primary:disabled,
#lj-runner .bm-spm-k1-essay-actions .button.button-primary:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.bm-spm-k1-essay-generator__column-actions--lock {
	justify-content: center;
}

.bm-spm-k1-essay-generator__column-actions--lock:empty {
	min-height: 2.875rem;
}

.bm-spm-k1-essay-generator__column-actions.bm-spm-k1-essay-selector__question-tabs {
	justify-content: center;
	align-items: center;
}

.bm-spm-k1-essay-generator__intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem 1rem;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
	padding: 0.9rem 1rem;
	margin-bottom: 1.25rem;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.bm-spm-k1-essay-generator__intro-identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
	min-width: 4.75rem;
	max-width: 6rem;
	flex-shrink: 0;
}

.bm-spm-k1-essay-generator__intro-akami {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bm-spm-k1-essay-generator__intro-akami-img.lj-chat-avatar-akami {
	max-width: 52px;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center bottom;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: block;
	flex-shrink: 0;
}

.bm-spm-k1-essay-generator__intro-akami-emoji {
	font-size: 2rem;
	line-height: 1;
}

.bm-spm-k1-essay-generator__intro-ai-name {
	font-size: 0.75rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	word-wrap: break-word;
}

.bm-spm-k1-essay-generator__intro-text {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #334155;
	margin: 0;
	min-width: 0;
}

.bm-spm-k1-essay-generator__intro-text p {
	margin: 0;
}

/* Theme Input Field */
.bm-spm-k1-essay-generator__theme-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-spm-k1-essay-generator__theme-label {
	font-weight: 600;
	color: #1d2327;
	font-size: 0.9rem;
}

.bm-spm-k1-essay-generator__theme-input {
	display: block;
	width: 100%;
	min-height: 0;
	padding: 0.625rem;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	vertical-align: top;
	resize: none;
	overflow: hidden;
}

.bm-spm-k1-essay-generator__theme-input:focus {
	border-color: #2271b1;
	outline: none;
	box-shadow: 0 0 0 1px #2271b1;
}

.bm-spm-k1-essay-generator__column-right {
	background: #f9fafb;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1.5rem;
	min-width: 0;
	flex: 1;
	min-height: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	overflow: hidden;
	box-sizing: border-box;
}

.bm-spm-k1-essay-generator__column-right--manual-entry {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* Manual column body mirrors left column-body + sibling footer for equal main heights */
.bm-spm-k1-essay-generator__column-body--manual .bm-spm-k1-essay-generator__manual-textarea-wrap.bm-spm-k1-essay-answer__question-input-wrapper {
	flex: 1;
	min-height: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.bm-spm-k1-essay-generator__column-body--manual .bm-spm-k1-essay-generator__manual-textarea-wrap .bm-spm-k1-essay-answer__question-textarea {
	flex: 0 1 auto;
	align-self: flex-start;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	/* Match #theme-input metrics so autosized two-row heights align */
	padding: 0.625rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.bm-spm-k1-essay-generator__column-body--manual
	.bm-spm-k1-essay-generator__manual-textarea-wrap
	.bm-spm-k1-essay-answer__question-textarea.is-locked:disabled {
	padding: 0.625rem;
	line-height: 1.5;
}

.bm-spm-k1-essay-generator__column-body--manual .bm-spm-k1-essay-answer__marks {
	flex-shrink: 0;
	margin-top: 0.35rem;
}

.bm-spm-k1-essay-generator__questions-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Clickable Question Buttons */
.bm-spm-k1-essay-generator__question-button {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	line-height: 1.6;
	width: 100%;
	max-width: 100%;
	padding: 1rem;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	font-size: inherit;
	box-sizing: border-box;
	overflow: hidden;
}

.bm-spm-k1-essay-generator__question-button:hover {
	border-color: #2271b1;
	background: #f0f6fc;
	box-shadow: 0 2px 4px rgba(34, 113, 177, 0.1);
}

.bm-spm-k1-essay-generator__question-button:active {
	transform: translateY(1px);
}

.bm-spm-k1-essay-generator__question-number {
	font-weight: 600;
	color: #2271b1;
	flex-shrink: 0;
}

.bm-spm-k1-essay-generator__question-text {
	color: #1d2327;
	font-size: 1rem;
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

.bm-spm-k1-essay-generator__placeholder {
	color: #6b7280;
	font-style: italic;
	text-align: center;
	margin: 2rem 0;
}

/* Essay Student Answer */
.bm-spm-k1-essay-answer {
	padding: 1rem 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Manual Entry in Part B */
.bm-spm-k1-essay-answer__manual-entry {
	margin-bottom: 2rem;
}

.bm-spm-k1-essay-answer__label {
	display: block;
	margin-bottom: 0.75rem;
	font-weight: 600;
	color: #1d2327;
	font-size: 0.95rem;
}

.bm-spm-k1-essay-answer__question-input-wrapper {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.bm-spm-k1-essay-answer__question-textarea {
	flex: 1;
	padding: 0.875rem;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.bm-spm-k1-essay-answer__question-textarea:focus {
	border-color: #2271b1;
	outline: none;
	box-shadow: 0 0 0 1px #2271b1;
}

.bm-spm-k1-essay-answer__question-textarea:disabled {
	background: #f9fafb;
	color: #6b7280;
	cursor: not-allowed;
}

/* Override disabled styling when question is locked - keep it looking normal */
.bm-spm-k1-essay-answer__question-textarea.is-locked:disabled {
	background: #ffffff;
	color: #1d2327;
	cursor: default;
	border-color: #2271b1;
	opacity: 1;
	padding-bottom: 0.875rem;
	line-height: 1.5;
}

.bm-spm-k1-essay-answer__marks {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #50575e;
	font-weight: 600;
}

.bm-spm-k1-essay-answer__editor {
	margin-bottom: 1rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.bm-spm-k1-essay-answer__textarea {
	width: 100%;
	max-width: 100%;
	min-height: 400px;
	padding: 1rem;
	border: 2px solid #ddd;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 1.2rem;
	line-height: 1.8;
	resize: vertical;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.bm-spm-k1-essay-answer__textarea:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.bm-spm-k1-essay-answer__textarea:disabled {
	background: #f6f7f7;
	cursor: not-allowed;
}

.bm-spm-k1-essay-answer__word-count {
	margin-top: 0.5rem;
	text-align: right;
	font-size: 0.9rem;
	color: #50575e;
}

.bm-spm-k1-essay-answer__word-count.is-over-limit {
	color: #d63638;
	font-weight: 600;
}

.bm-spm-k1-essay-answer__word-count.is-under-minimum {
	color: #dba617;
}

.bm-spm-k1-essay-answer__warning {
	font-weight: 600;
}

/* Extended Writing Question Selector (BM uses same layout) */
.bm-spm-k1-essay-selector {
	padding: 1.5rem 0;
}

.bm-spm-k1-essay-selector__instruction-banner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem 1.25rem;
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.bm-spm-k1-essay-selector__instruction-banner--question-locked {
	align-items: center;
}

.bm-spm-k1-essay-selector__instruction-banner-identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	min-width: 5.5rem;
	max-width: 7.5rem;
	flex-shrink: 0;
}

.bm-spm-k1-essay-selector__instruction-akami {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Same asset URL as sidebar (LJ_CFG.chatIcon); ~25% larger than welcome-state Akami (56px → 70px) */
.bm-spm-k1-essay-selector__instruction-akami-img.lj-chat-avatar-akami {
	max-width: 70px;
	max-height: 70px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center bottom;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: block;
	flex-shrink: 0;
}

.bm-spm-k1-essay-selector__instruction-akami-emoji {
	font-size: 2.734375rem;
	line-height: 1;
}

.bm-spm-k1-essay-selector__instruction-ai-name {
	font-size: 0.8rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	word-wrap: break-word;
}

.bm-spm-k1-essay-selector__instruction-banner-text .bm-spm-k1-essay-selector__instruction {
	margin-bottom: 0.35rem;
	text-align: left;
}

.bm-spm-k1-essay-selector__instruction-banner-text .bm-spm-k1-essay-selector__instruction-detail {
	margin: 0;
	max-width: none;
	text-align: left;
}

.bm-spm-k1-essay-selector__instruction-banner-text .bm-spm-k1-essay-selector__instruction-detail--locked-intro {
	font-weight: 600;
}

.bm-spm-k1-essay-selector__instruction {
	font-size: 18px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 0.5rem;
	text-align: center;
}

.bm-spm-k1-essay-selector__instruction-detail {
	font-size: 17px;
	color: #3b4251;
	line-height: 1.6;
	text-align: center;
	margin: 0 auto 1.5rem auto;
	max-width: 720px;
}

.bm-spm-k1-essay-selector__instruction-detail--locked-intro {
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.bm-spm-k1-essay-selector__assignment-instructions {
	margin: 0 auto 1.5rem auto;
	max-width: 720px;
	color: #3b4251;
	line-height: 1.6;
	text-align: center;
	font-size: 0.95rem;
	white-space: pre-line;
}

.bm-spm-k1-essay-selector__questions {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

.bm-spm-k1-essay-selector__question-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	align-items: stretch;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.bm-spm-k1-essay-selector__question-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid rgb(31 56 82 / 15%);
	cursor: pointer;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
	font-size: 0.95rem;
	min-height: 52px;
	width: auto;
	flex: 0 0 auto;
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 15%);
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
	font-weight: 700;
	color: #475569;
	text-align: center;
}

.bm-spm-k1-essay-selector__question-tab:hover {
	border-color: rgb(31 56 82 / 25%);
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 20%);
	color: #0f172a;
}

.bm-spm-k1-essay-selector__question-tab:focus-visible {
	outline: 2px solid var(--akademi-sidebar-overlay-color, #0984e3);
	outline-offset: 2px;
}

.bm-spm-k1-essay-selector__question-tab.is-active {
	border-color: var(--akademi-sidebar-overlay-color, #0984e3);
	background: color-mix(in srgb, var(--akademi-sidebar-overlay-color, #0984e3) 14%, #ffffff);
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 15%);
	color: #0f172a;
}

.bm-spm-k1-essay-selector__question-tab.is-active:hover {
	border-color: var(--akademi-sidebar-overlay-color, #0984e3);
	background: color-mix(in srgb, var(--akademi-sidebar-overlay-color, #0984e3) 18%, #ffffff);
	box-shadow: 4px 5px 1px 0 rgb(31 56 82 / 20%);
}

.bm-spm-k1-essay-selector__question-tab--regenerate {
	font-weight: 600;
	font-size: 0.88rem;
	border-style: dashed;
	color: #64748b;
}

.bm-spm-k1-essay-selector__question-tab--regenerate:hover:not(:disabled) {
	color: #0f172a;
}

.bm-spm-k1-essay-selector__question-tab:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.bm-spm-k1-essay-selector__preview-panel {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 1.25rem;
	transition: border-color 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bm-spm-k1-essay-selector__preview-full {
	font-size: 17px;
	line-height: 1.7;
	color: #1f2937;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	margin-bottom: 1rem;
}

/* Passage + Sumber only (bordered, not full panel width). Task prompt sits below. */
.bm-spm-k1-essay-selector__preview-passage-box {
	max-width: 40rem;
	width: 100%;
	margin: 0 auto 1rem auto;
	padding: 1rem 1.15rem;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.bm-spm-k1-essay-selector__preview-passage-box .bm-spm-k1-essay-selector__preview-stimulus {
	font-size: 17px;
	line-height: 1.7;
	color: #1f2937;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	margin: 0;
}

/* Pin “Sumber” to the visual right (flex cross-axis); avoids RTL/text-align quirks */
.bm-spm-k1-essay-selector .bm-spm-k1-essay-selector__preview-passage-box .bm-spm-k1-essay-selector__preview-source {
	font-size: 0.95rem;
	font-weight: 600;
	color: #334155;
	margin: 0.75rem 0 0 0;
	line-height: 1.55;
	max-width: 100%;
	text-align: right;
	align-self: flex-end;
}

.bm-spm-k1-essay-selector__preview-task {
	font-size: 17px;
	line-height: 1.65;
	font-weight: 600;
	color: #0f172a;
	max-width: 40rem;
	width: 100%;
	margin: 0 auto 1rem auto;
}

.bm-spm-k1-essay-selector__question-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f0f0f0;
}

.bm-spm-k1-essay-selector__question-number {
	font-size: 1.1rem;
	font-weight: 700;
	color: #2271b1;
}

.bm-spm-k1-essay-selector__question-preview {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #374151;
	margin-bottom: 1.5rem;
	min-height: 4.8rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bm-spm-k1-essay-selector__preview-actions {
	display: flex;
	justify-content: center;
}

.bm-spm-k1-essay-selector__select-button--button {
	border: none;
	cursor: pointer;
}

.bm-spm-k1-essay-selector__select-button--button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.bm-spm-k1-essay-selector__select-button {
	background: linear-gradient(135deg, #2271b1 0%, #1e5a8a 100%);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.2s ease;
	margin-top: auto;
}

.bm-spm-k1-essay-selector__question-card:hover .bm-spm-k1-essay-selector__select-button {
	background: linear-gradient(135deg, #1e5a8a 0%, #1a4f7a 100%);
	transform: scale(1.02);
}

.bm-spm-k1-essay-selector__chosen-panel {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid #c3d9ed;
	border-radius: 12px;
	background: #f6f9fc;
	text-align: left;
}

.bm-spm-k1-essay-selector__chosen-panel-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
}

.bm-spm-k1-essay-selector__chosen-panel-label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #2271b1;
}

.bm-spm-k1-essay-selector__chosen-panel-marks {
	font-size: 0.9rem;
	font-weight: 600;
	color: #50575e;
}

.bm-spm-k1-essay-selector__chosen-panel-body {
	font-size: 1rem;
	line-height: 1.65;
	color: #1d2327;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* Action buttons group */
.bm-spm-k1-essay-actions__group {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.bm-spm-k1-essay-generator__two-column {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 1.5rem;
	}

	.bm-spm-k1-essay-generator__column-left,
	.bm-spm-k1-essay-generator__column-right {
		flex: 0 1 auto;
	}

	.bm-spm-k1-essay-generator__column-left {
		padding-right: 0;
		border-right: none;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid #e2e8f0;
	}

	.bm-spm-k1-essay-generator__intro {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.bm-spm-k1-essay-generator__intro-text {
		text-align: center;
	}

	.bm-spm-k1-essay-answer__question-input-wrapper {
		flex-direction: column;
	}
	
	.bm-spm-k1-essay-answer__question-input-wrapper .button {
		width: 100%;
	}

	.bm-spm-k1-essay-answer__textarea {
		min-height: 300px;
		font-size: 0.95rem;
	}

	.bm-spm-k1-essay-selector__questions {
		gap: 0.65rem;
	}

	.bm-spm-k1-essay-selector__instruction-banner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.bm-spm-k1-essay-selector__instruction-banner-text .bm-spm-k1-essay-selector__instruction,
	.bm-spm-k1-essay-selector__instruction-banner-text .bm-spm-k1-essay-selector__instruction-detail {
		text-align: center;
	}

	.bm-spm-k1-essay-selector__question-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.bm-spm-k1-essay-selector__question-preview {
		min-height: 3.6rem;
		font-size: 0.9rem;
	}

	.bm-spm-k1-essay-selector__preview-panel {
		padding: 1rem;
	}

	.bm-spm-k1-essay-selector__select-button {
		padding: 0.625rem 1.25rem;
		font-size: 0.85rem;
	}
	
	.bm-spm-k1-essay-actions__group {
		flex-direction: column;
	}
	
	.bm-spm-k1-essay-actions__group .button {
		width: 100%;
	}
}
/* GP Marking Report Styles - Match RWA Plugin Design */

.spm-marking-report-container {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	color: #333;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.spm-marking-report-header {
	text-align: center;
	margin-bottom: 25px;
}

.spm-marking-report-header h2 {
	color: #2d3748;
	font-size: 1.5rem;
	margin: 0 0 10px 0;
}

.spm-marking-report-header p {
	color: #666;
	font-size: 1rem;
	margin: 0;
}

/* Loading & Error States */
.spm-report-loading-container,
.spm-report-error-container {
	text-align: center;
	padding: 60px 20px;
}

.spm-report-loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: 50%;
	animation: spm-spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spm-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.spm-report-loading-sub {
	color: #666;
	font-style: italic;
}

.spm-report-error-icon {
	font-size: 4rem;
	margin-bottom: 20px;
}

.spm-report-retry-btn {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color .3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.spm-report-retry-btn:hover:not(:disabled) {
	background: #5a67d8;
}

.spm-report-retry-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Small inline spinner for buttons */
.lj-spinner-small {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spm-spin 0.8s linear infinite;
	display: inline-block;
	vertical-align: middle;
}

/* Report Sections - Match RWA Card Style */
.spm-report-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
	border: 1px solid #e2e8f0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.spm-report-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.spm-report-section-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.spm-report-section-header .section-title {
	margin: 0;
	font-size: 1.4rem;
}

.spm-badge-header {
	text-align: center;
}

.spm-badge-cell {
	text-align: center;
}

.spm-th-jawapan {
	width: 28%;
}

.spm-jawapan-cell {
	margin: 0;
	font-size: 0.95rem;
	color: #334155;
	font-style: italic;
	white-space: pre-wrap;
}

.spm-badge-display {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
}

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

.spm-marks-section-header h3 {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Cards - Match RWA Style */
.spm-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	margin-bottom: 20px;
}

.spm-kv {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 10px 16px;
}

.spm-kv .k, .spm-k {
	color: #4a5568;
	font-weight: 600;
}

.spm-kv .v, .spm-v {
	color: #1f2937;
}

/* Marks Section - Match RWA Blue Gradient */
.spm-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	background: linear-gradient(135deg, #4285f4 0%, #1565c0 100%);
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 25px;
}

.spm-score-display {
	display: flex;
	flex-direction: column;
}

.spm-score-label {
	font-size: .9rem;
	opacity: .9;
}

.spm-score-value {
	font-size: 2rem;
	font-weight: 700;
}

.spm-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.12);
	padding: 10px 15px;
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

.spm-badge-icon {
	font-size: 1.2rem;
}

.spm-badge-text {
	font-weight: 500;
}

.spm-performance-badge[data-performance="excellent"] {
	background: rgba(34,197,94,.2);
}

.spm-performance-badge[data-performance="good"] {
	background: rgba(59,130,246,.2);
}

.spm-performance-badge[data-performance="needs-improvement"] {
	background: rgba(245,158,11,.2);
}

.spm-performance-badge[data-performance="weak"] {
	background: rgba(239,68,68,.22);
}

/* LP K1 Bahagian A — peringkat berteks panjang */
.spm-performance-badge--lp-peringkat {
	flex: 1 1 220px;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	max-width: min(100%, 300px);
	padding: 12px 14px;
}

.spm-performance-badge--lp-peringkat .spm-badge-text {
	font-size: 0.72rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.spm-marks-breakdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.spm-mark-category {
	background: #f8fafc;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
}

.spm-mark-category h4 {
	font-size: 1.1rem;
	color: #2d3748;
	margin: 0 0 12px 0;
}

.spm-mark-display {
	font-size: 1.5rem;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 15px;
}

.spm-progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
}

.spm-progress-fill {
	height: 100%;
	width: 0%;
	transition: width 1s ease-in-out;
}

.spm-sub-elements {
	margin-top: 14px;
	display: grid;
	gap: 10px;
}

.spm-sub-element {
	display: grid;
	gap: 6px;
}

.spm-sub-element-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.spm-sub-element-label {
	font-size: 17px;
	font-weight: 600;
	color: #334155;
}

.spm-progress-bar--sub {
	height: 8px;
	border-radius: 999px;
}

/* Language Criterion Colors - Match RWA Schema */
.spm-progress-fill[data-progress="language"] {
	background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
	box-shadow: 0 2px 4px rgba(59,130,246,.3);
}

.spm-progress-fill[data-progress="accuracy"] {
	background: linear-gradient(90deg, #ef4444, #dc2626);
	box-shadow: 0 2px 4px rgba(239,68,68,.3);
}

.spm-progress-fill[data-progress="sentence-structure"] {
	background: linear-gradient(90deg, #06b6d4, #0891b2);
	box-shadow: 0 2px 4px rgba(6,182,212,.3);
}

.spm-progress-fill[data-progress="vocabulary"] {
	background: linear-gradient(90deg, #8b5cf6, #7c3aed);
	box-shadow: 0 2px 4px rgba(139,92,246,.3);
}

.spm-progress-fill[data-progress="organisation"] {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	box-shadow: 0 2px 4px rgba(245,158,11,.3);
}

.spm-progress-fill[data-progress="articulation"] {
	background: linear-gradient(90deg, #22c55e, #16a34a);
	box-shadow: 0 2px 4px rgba(34,197,94,.3);
}

/* Content Criterion Colors */
.spm-progress-fill[data-progress="question-alignment"] {
	background: linear-gradient(90deg, #10b981, #059669);
	box-shadow: 0 2px 4px rgba(16,185,129,.3);
}

.spm-progress-fill[data-progress="thesis-quality"] {
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	box-shadow: 0 2px 4px rgba(99,102,241,.3);
}

.spm-progress-fill[data-progress="argument-depth"] {
	background: linear-gradient(90deg, #ec4899, #db2777);
	box-shadow: 0 2px 4px rgba(236,72,153,.3);
}

.spm-progress-fill[data-progress="evidence-quality"] {
	background: linear-gradient(90deg, #f97316, #ea580c);
	box-shadow: 0 2px 4px rgba(249,115,22,.3);
}

.spm-progress-fill[data-progress="evaluation-balance"] {
	background: linear-gradient(90deg, #0ea5e9, #0284c7);
	box-shadow: 0 2px 4px rgba(14,165,233,.3);
}

/* BM K1 B — Isi Kandungan card (recount-style compact breakdown) */
.bm-k1-isi-kandungan-card {
	display: grid;
	gap: 12px;
}

.bm-k1-isi-kandungan-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.bm-k1-isi-kandungan-card__score-line {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bm-k1-isi-kandungan-card__score {
	font-size: 1.25rem;
	font-weight: 700;
	color: #4f46e5;
}

.bm-k1-isi-feedback-table {
	margin-top: 0;
}

.spm-table.bm-k1-isi-feedback-table th,
.spm-table.bm-k1-isi-feedback-table td {
	border: none;
}

.bm-k1-isi-kandungan-card .spm-table.bm-k1-isi-feedback-table tbody td:first-child,
.spm-table.bm-k1-isi-feedback-table tbody td:first-child {
	vertical-align: middle;
}

.bm-k1-isi-feedback-table th {
	background: #f8fafc;
	font-size: 0.83rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bm-k1-isi-kandungan-card .spm-table.bm-k1-isi-feedback-table thead th.spm-badge-header,
.spm-table.bm-k1-isi-feedback-table thead th.spm-badge-header {
	text-align: center;
}

.bm-k1-isi-kandungan-card__row-score {
	font-size: 0.8rem;
	font-weight: 600;
	color: #64748b;
	white-space: nowrap;
}

.bm-k1-isi-kandungan-card__badge-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bm-k1-isi-kandungan-card .spm-badge-cell,
.spm-table.bm-k1-isi-feedback-table td.spm-badge-cell {
	vertical-align: middle;
}

.bm-k1-isi-kandungan-card .status-badge-container,
.spm-table.bm-k1-isi-feedback-table .status-badge-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 1;
}

.bm-k1-isi-kandungan-card .rating-icon,
.spm-table.bm-k1-isi-feedback-table .rating-icon {
	font-size: 1.875rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bm-k1-isi-kandungan-card .status-badge,
.spm-table.bm-k1-isi-feedback-table .status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 5px 13px;
	border-radius: 9999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bm-k1-isi-kandungan-card__desc {
	margin: 4px 0 0;
	font-size: 0.86rem;
}

.bm-k1-isi-kandungan-card .bm-k1-isi-kandungan-card__maklum-balas,
.spm-table.bm-k1-isi-feedback-table .bm-k1-isi-kandungan-card__maklum-balas {
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 900px) {
	.bm-k1-isi-feedback-table th,
	.bm-k1-isi-feedback-table td {
		padding: 9px 10px;
	}

	.bm-k1-isi-kandungan-card__score-line {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Isi Kandungan — ringkasan keseluruhan: avatar + maklum balas (IGCSE-style grid) */
.spm-band-descriptor.bm-k1-isi-band-chat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem 1.25rem;
	align-items: center;
}

.bm-k1-isi-band-chat__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	min-width: 5.5rem;
	max-width: 7.5rem;
}

.bm-k1-isi-band-chat__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bm-k1-isi-band-chat__avatar-img {
	width: 4.375rem;
	height: auto;
	max-height: 4.375rem;
	object-fit: contain;
	display: block;
}

.bm-k1-isi-band-chat__avatar-fallback {
	font-size: 2.1875rem;
	line-height: 1;
}

.bm-k1-isi-band-chat__name {
	font-size: 0.8rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	word-wrap: break-word;
}

.bm-k1-isi-band-chat__body {
	min-width: 0;
}

.bm-k1-isi-band-chat__band-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0.5rem;
}

.bm-k1-isi-band-chat__band-icon {
	font-size: 1.3rem;
	line-height: 1;
}

.spm-band-descriptor.bm-k1-isi-band-chat .bm-k1-isi-band-chat__feedback {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: #475569;
}

@media (max-width: 720px) {
	.spm-band-descriptor.bm-k1-isi-band-chat {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.bm-k1-isi-band-chat__body {
		width: 100%;
		text-align: left;
	}

	.bm-k1-isi-band-chat__band-row {
		justify-content: center;
	}
}

/* Band Descriptor */
.spm-band-descriptor {
	background: #edf2f7;
	padding: 10px;
	border-radius: 6px;
	font-size: .85rem;
	margin-top: 15px;
	border-left: 3px solid #cbd5e0;
}

/* Question Analysis */
.spm-question-prompt {
	font-style: italic;
	font-size: 1rem;
	color: #1f2937;
	padding: 16px;
	background: #fff;
	border-left: 4px solid #667eea;
	border-radius: 6px;
	margin-bottom: 20px;
}

/* Progress bar for question engagement */
.spm-progress {
	height: 10px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}

.spm-progress .spm-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	width: 0%;
	transition: width .8s ease-in-out;
}

.spm-progress-text {
	font-size: .9rem;
	color: #4a5568;
	margin-top: 6px;
}

/* Table styles - Match RWA */
.spm-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	table-layout: auto;
}

.spm-table th,
.spm-table td {
	border: 1px solid #e2e8f0;
	padding: 10px 12px;
	vertical-align: top;
}

.spm-table th {
	background: #f8fafc;
	text-align: left;
	color: #2d3748;
	font-weight: 600;
}

.spm-table .ok {
	color: #1f2937;
	font-weight: 600;
}

.spm-table .warn {
	color: #1f2937;
	font-weight: 600;
}

.spm-table .bad {
	color: #1f2937;
	font-weight: 600;
}

.spm-feedback-cell {
	font-size: .9rem;
	color: #4a5568;
	line-height: 1.5;
}

/* Key Terms Mobile Cards - Hidden by default */
.spm-key-terms-cards {
	display: none;
}

.spm-key-term-mobile-card {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	margin-bottom: 10px;
	line-height: 1.5;
}

/* Mobile: Show cards, hide table */
@media (max-width: 640px) {
	.spm-key-terms {
		display: none;
	}
	
	.spm-key-terms-cards {
		display: block;
	}
}

/* Status Badges - Match RWA with Emoji Circles */
.spm-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
}

.spm-status-badge.spm-status-successful {
	background: #dcfce7;
	color: #166534;
}

.spm-status-badge.spm-status-adequate {
	background: #fef9c3;
	color: #854d0e;
}

.spm-status-badge.spm-status-partial {
	background: #ffedd5;
	color: #9a3412;
}

.spm-status-badge.spm-status-missing {
	background: #fee2e2;
	color: #991b1b;
}

/* Dimensions - Ring Chart Style */
.spm-dimensions {
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
	align-items: stretch;
}

.spm-dimension-card {
	flex: 1;
	min-width: 240px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin: 6px;
}

/* Ring Chart Container */
.spm-ring-container {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto;
}

.spm-ring-center-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.spm-dimension-title {
	font-weight: 700;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 16px;
	color: #111827;
}

.spm-dimension-badge-center {
	text-align: center;
	margin-top: 6px;
	margin-bottom: 6px;
}

.spm-dimension-suggestion {
	color: #374151;
	font-size: 0.9rem;
	text-align: center;
	margin-top: 6px;
	line-height: 1.5;
}

/* Student Text - Match RWA Style */
.spm-student-text {
	background: #fff;
	border: 1px solid #e2e8f0;
	padding: 12px;
	border-radius: 6px;
	margin-top: 10px;
	white-space: pre-wrap;
	line-height: 1.6;
	color: #1f2937;
}

/* OLD - No longer needed with new table layout
.spm-student-text-container {
	margin-bottom: 20px;
}
*/

/* Alternative suggestion styling */
.spm-alt {
	background: #f0fff4;
	border-left: 3px solid #38a169;
	padding: 12px;
	border-radius: 6px;
	margin-top: 10px;
}

/* Thesis Box - Match RWA Style */
.spm-thesis-box {
	margin-top: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.spm-thesis-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.spm-thesis-label {
	font-weight: 700;
	color: #111827;
}

.spm-thesis-text {
	margin-top: 6px;
	color: #374151;
}

.spm-thesis-feedback {
	margin: 6px 0 0 16px;
	padding: 0;
	list-style: disc;
	color: #374151;
}

.spm-thesis-feedback li {
	margin-bottom: 4px;
}

.spm-thesis-better {
	margin-top: 10px;
}

.spm-thesis-better-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.spm-thesis-better-text {
	color: #1f2937;
}

/* Introduction Section - Compact Spacing */
.spm-introduction-section .spm-card > * + * {
	margin-top: 10px;
}

.spm-introduction-section .spm-table {
	margin-top: 12px;
}

.spm-introduction-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-introduction-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

/* Aspects Grid - OLD (now using table) */
/* .spm-aspects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	background: white;
	padding: 20px;
	border-radius: 8px;
}

.spm-aspect-item {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px;
	background: #f9fafb;
}

.spm-aspect-header {
	margin-bottom: 12px;
} */

.spm-aspect-header h4,
.spm-aspect-header h5 {
	font-size: 16px;
	color: #111827;
	margin: 0 0 8px 0;
}

.spm-star-rating {
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
}

.star-filled {
	color: #fbbf24;
	font-size: 20px;
}

.star-empty {
	color: #d1d5db;
	font-size: 20px;
}

/* Thesis Box - Match RWA Style */
.spm-thesis-box {
	margin-top: 12px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
}

.spm-thesis-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.spm-thesis-label {
	font-weight: 700;
	color: #111827;
}

.spm-thesis-text {
	margin-top: 6px;
	color: #374151;
}

.spm-thesis-feedback {
	margin: 6px 0 0 16px;
	padding: 0;
	list-style: disc;
	color: #374151;
}

.spm-thesis-feedback li {
	margin-bottom: 4px;
}

.spm-thesis-better {
	margin-top: 10px;
}

.spm-thesis-better-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.spm-thesis-better-text {
	color: #1f2937;
}

/* Stars - Enhanced for colored display */
.spm-stars {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
}

.spm-stars span {
	transition: color 0.2s ease;
}

/* Introduction Section - Table layout specifics */
.spm-introduction-section .spm-card > * + * {
	margin-top: 10px;
}

.spm-introduction-section .spm-table {
	margin-top: 12px;
}

.spm-introduction-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-introduction-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

.spm-band-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	margin-top: 4px;
}

.spm-band-badge.band-good {
	background: #dcfce7;
	color: #166534;
}

.spm-band-badge.band-adequate {
	background: #dbeafe;
	color: #1e40af;
}

.spm-band-badge.band-limited {
	background: #fef3c7;
	color: #92400e;
}

.spm-band-badge.band-missing {
	background: #fee2e2;
	color: #991b1b;
}

.spm-aspect-feedback {
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
}

/* OLD - Checks no longer displayed in body paragraphs
.spm-checks-container,
.spm-checks-list {
	margin-top: 20px;
}

.spm-check-item,
.spm-check {
	background: #f8fafc;
	border-left: 3px solid #667eea;
	padding: 10px;
	border-radius: 6px;
	margin: 8px 0;
}

.spm-check-item-title {
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 8px;
}

.spm-check-observation,
.spm-check-tip {
	font-size: .9rem;
	color: #4a5568;
	margin-bottom: 6px;
	line-height: 1.5;
}
*/

/* Body Paragraphs - Match RWA */
.spm-body-paragraphs-section .spm-card {
	margin-bottom: 20px;
}

.spm-body-paragraph-label {
	font-weight: 700;
	margin-bottom: 8px;
}

/* Progress bar for body paragraph overall score */
.spm-body-paragraphs-section .spm-progress {
	height: 10px;
	background: #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}

.spm-body-paragraphs-section .spm-progress .spm-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	width: 0%;
	transition: width .8s ease-in-out;
}

/* Student paragraph text */
.spm-body-paragraphs-section .spm-student-text {
	margin-top: 10px;
	margin-bottom: 12px;
}

/* Table alignment for body paragraphs */
.spm-body-paragraphs-section .spm-table {
	margin-top: 12px;
}

.spm-body-paragraphs-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-body-paragraphs-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

/* Conclusion - Match RWA */
.spm-conclusion-section .spm-card {
	margin-bottom: 20px;
}

/* Table alignment for conclusion */
.spm-conclusion-section .spm-table {
	margin-top: 12px;
}

.spm-conclusion-section .spm-table td:nth-child(2) {
	text-align: center;
	vertical-align: middle;
}

.spm-conclusion-section .spm-table td:nth-child(3) {
	vertical-align: top;
}

/* Tags - Match RWA Style */
.spm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.spm-tag {
	background: #edf2f7;
	color: #2d3748;
	padding: 6px 10px;
	border-radius: 14px;
	font-size: .85rem;
	border: 1px solid #e2e8f0;
}

/* Star Ratings - Match RWA with Band Colors */
.spm-stars {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
}

.spm-stars span {
	transition: color 0.2s ease;
}

.star-filled {
	color: #fbbf24;
	font-size: 18px;
}

.star-empty {
	color: #e2e8f0;
	font-size: 18px;
}

/* Reference Banner */
.spm-reference-banner {
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #2d3748;
	font-weight: 500;
	text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
	.spm-marks-breakdown {
		grid-template-columns: 1fr;
	}
	
	.spm-dimensions,
	.spm-aspects-grid {
		grid-template-columns: 1fr;
	}
	
	.spm-total-marks {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}
	
	.spm-kv {
		grid-template-columns: 1fr;
	}
}

/* Teacher Override Styles */
.spm-paper2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.spm-paper2-question-result__header h4 {
	margin: 0;
	flex: 0 0 auto;
}

.spm-paper2-question-result__header .header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.teacher-adjusted-indicator {
	color: #f59e0b;
	margin-left: 6px;
	font-size: 16px;
}

.ai-score-comparison-row {
	margin-bottom: 12px;
}

.ai-score-comparison {
	font-size: 0.85em;
	color: #64748b;
	font-weight: normal;
}

.question-edit-btn {
	padding: 6px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	transition: all 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
}

.question-edit-btn:hover {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
}

.question-edit-btn:active {
	background-color: #e2e8f0;
}

/* BM correction modal — layout mirrors English lj-correction-modal; BM class names only */

.bm-correction-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 100020;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	pointer-events: auto;
}

.bm-correction-modal {
	background: #fff;
	border-radius: 12px;
	width: 90%;
	max-width: 800px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	position: relative;
}

.bm-correction-modal--success {
	animation: bmCorrectionModalSuccess 0.5s ease-out;
}

@keyframes bmCorrectionModalSuccess {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.03);
	}
	100% {
		transform: scale(1);
	}
}

.bm-correction-modal__fireworks {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: 12px;
	z-index: 0;
}

.bm-correction-modal__firework {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: bmCorrectionFirework 1s ease-out infinite;
}

.bm-correction-modal__firework:nth-child(1) {
	top: 28%;
	left: 28%;
	background: #f59e0b;
	animation-delay: 0s;
}

.bm-correction-modal__firework:nth-child(2) {
	top: 48%;
	left: 72%;
	background: #3b82f6;
	animation-delay: 0.3s;
}

.bm-correction-modal__firework:nth-child(3) {
	top: 68%;
	left: 48%;
	background: #ec4899;
	animation-delay: 0.6s;
}

@keyframes bmCorrectionFirework {
	0% {
		transform: scale(1);
		opacity: 1;
		box-shadow: 0 0 20px currentColor;
	}
	50% {
		transform: scale(28);
		opacity: 0.45;
	}
	100% {
		transform: scale(48);
		opacity: 0;
	}
}

.bm-correction-modal__header,
.bm-correction-modal__body,
.bm-correction-modal__footer {
	position: relative;
	z-index: 1;
}

.bm-correction-modal__success-message {
	text-align: center;
	padding: 1.75rem 1.5rem;
	margin: 0 0 0.5rem 0;
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border-radius: 12px;
	border: 1px solid #6ee7b7;
}

.bm-correction-modal__success-message h3 {
	margin: 0 0 0.65rem 0;
	color: #065f46;
	font-size: 1.45rem;
	font-weight: 700;
}

.bm-correction-modal__success-message p {
	margin: 0;
	color: #166534;
	font-size: 1.05rem;
	line-height: 1.65;
}

.bm-correction-modal__success-message--banner {
	margin: 0 1.5rem 1rem;
	flex-shrink: 0;
}

.bm-correction-modal__header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.bm-correction-modal__header h3 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1f2937;
}

.bm-correction-modal__body {
	padding: 1.5rem;
}

.bm-correction-modal__section {
	margin-bottom: 1.5rem;
}

.bm-correction-modal__section:last-of-type {
	margin-bottom: 0;
}

.bm-correction-modal__section h4 {
	margin: 0 0 0.75rem 0;
	font-size: 1rem;
	font-weight: 600;
	color: #374151;
}

.bm-correction-modal__section--teacher-help .bm-correction-modal__teacher-help {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 2px solid #f59e0b;
	border-radius: 10px;
	padding: 1rem 1.1rem;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}

.bm-correction-modal__teacher-help-meta {
	margin: 0 0 0.5rem 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: #92400e;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bm-correction-modal__teacher-help-text {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.65;
	color: #78350f;
	white-space: pre-wrap;
}

.bm-correction-modal__context {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1rem;
	font-size: 1rem;
	line-height: 1.75;
}

.bm-correction-modal__context-before,
.bm-correction-modal__context-after {
	opacity: 0.65;
	font-style: italic;
	margin-bottom: 0.5rem;
	color: #4b5563;
}

.bm-correction-modal__context-after {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.bm-correction-modal__context-main {
	font-weight: 500;
	padding: 0.75rem;
	background: #fff;
	border: 2px solid #3b82f6;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	color: #1f2937;
}

.bm-correction-modal__highlight {
	background: rgba(139, 92, 246, 0.22);
	color: #7c3aed;
	font-weight: 700;
	padding: 1px 3px;
	border-radius: 3px;
}

.bm-correction-modal__highlight--multi {
	font-weight: 600;
	padding: 1px 3px;
	border-radius: 3px;
	cursor: help;
	background: var(--bm-soft-bg, rgba(139, 92, 246, 0.22));
	color: var(--bm-soft-text, #7c3aed);
}

.bm-correction-modal__guidance {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 10px;
	padding: 1rem;
}

.bm-correction-modal__guidance-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.bm-correction-modal__guidance-item p {
	margin: 0;
	color: #166534;
	line-height: 1.6;
	flex: 1;
}

/* AI feedback tied to the latest Hantar — updates on each wrong attempt */
.bm-correction-modal__guidance-item--fromAttempt {
	padding: 0.85rem 0.95rem;
	margin-bottom: 0.85rem;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(245, 158, 11, 0.12);
}

.bm-correction-modal__guidance-item--fromAttempt p {
	color: #78350f;
}

.bm-correction-modal__guidance-refLabel {
	margin: 0 0 0.5rem 0;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

.bm-correction-modal__type-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--bm-chip-active-bg, #7c3aed);
	color: #fff;
	flex-shrink: 0;
}

.bm-correction-modal__textarea {
	width: 100%;
	min-height: 110px;
	padding: 0.75rem;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.6;
	resize: vertical;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.bm-correction-modal__textarea:focus {
	outline: none;
	border-color: #3b82f6;
}

.bm-correction-modal__textarea:disabled {
	opacity: 0.75;
	background: #f9fafb;
}

.bm-correction-modal__instruction {
	margin-top: 0.5rem;
	color: #6b7280;
	font-size: 0.875rem;
	font-style: italic;
}

.bm-correction-modal__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	background: #f9fafb;
	border-radius: 0 0 12px 12px;
	position: sticky;
	bottom: 0;
}

.bm-correction-modal__attempt-counter {
	color: #6b7280;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.bm-correction-modal__footer-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.bm-correction-modal__btn {
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	border: none;
	white-space: nowrap;
}

.bm-correction-modal__btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.bm-correction-modal__btn--later {
	background: #3b82f6;
	color: #fff;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
}

.bm-correction-modal__btn--later:hover:not(:disabled) {
	background: #2563eb;
}

.bm-correction-modal__btn--help {
	background: #a855f7;
	color: #fff;
	box-shadow: 0 2px 4px rgba(168, 85, 247, 0.25);
}

.bm-correction-modal__btn--help:hover:not(:disabled) {
	background: #9333ea;
}

.bm-correction-modal__btn--submit {
	background: #f59e0b;
	color: #fff;
	box-shadow: 0 2px 4px rgba(245, 158, 11, 0.35);
}

.bm-correction-modal__btn--submit:hover:not(:disabled) {
	background: #d97706;
}

@media (max-width: 640px) {
	.bm-correction-modal__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.bm-correction-modal__attempt-counter {
		text-align: center;
	}

	.bm-correction-modal__footer-actions {
		justify-content: stretch;
	}

	.bm-correction-modal__footer-actions .bm-correction-modal__btn {
		flex: 1;
	}
}
/* BM Semakan Bahasa — layout & tokens; all classes `bm-semakan-bahasa__*` */

.bm-semakan-bahasa {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #0f172a;
}

.bm-semakan-bahasa--lr-style {
	margin: 0;
}

.bm-semakan-bahasa__loading,
.bm-semakan-bahasa__muted {
	color: #64748b;
}

/* —— Top: Bahasa | second domain (label via nonBahasaDomainLabel; e.g. Ayat on BM K1) + status —— */
.bm-semakan-bahasa__lr-top {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px 10px 0 0;
	border-bottom: none;
	overflow: hidden;
}

.bm-semakan-bahasa__lr-topBar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 6px 8px 0;
}

.bm-semakan-bahasa__lr-domainTabs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px;
	position: relative;
}

.bm-semakan-bahasa__lr-domainTab {
	padding: 8px 24px;
	background: transparent;
	color: #64748b;
	border: none;
	border-radius: 6px 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	z-index: 2;
	position: relative;
}

.bm-semakan-bahasa__lr-domainTab--active {
	background: #499add;
	color: #fff;
}

.bm-semakan-bahasa__lr-statusRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 8px 4px 10px 4px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.bm-semakan-bahasa__lr-statusLabel {
	color: #64748b;
	margin-right: 4px;
}

.bm-semakan-bahasa__lr-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
}

.bm-semakan-bahasa__lr-pill--warn {
	background: #fef3c7;
	color: #92400e;
}

.bm-semakan-bahasa__lr-pill--ok {
	background: #d1fae5;
	color: #065f46;
}

/* Task — English LR–style amber strip (Writing Task analogue) */
.bm-semakan-bahasa__lr-task {
	margin-top: 0;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: #fefdf8;
	border-width: 2px 1px 1px;
	border-style: solid;
	border-color: #f59e0b #e5e7eb #e5e7eb;
}

.bm-semakan-bahasa__lr-taskIcon {
	font-size: 20px;
	line-height: 1;
	margin-top: 2px;
	flex-shrink: 0;
}

.bm-semakan-bahasa__lr-taskBody {
	flex: 1 1 0%;
	min-width: 0;
}

.bm-semakan-bahasa__lr-taskHeading {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: #92400e;
}

.bm-semakan-bahasa__lr-taskText {
	font-size: 16px;
	line-height: 1.6;
	color: #451a03;
	font-style: italic;
}

/* BM K1 Bahagian A: petikan headline only — tulisan senget (italic) */
.bm-semakan-bahasa.bm-k1-bahagian-a-semakan-bahasa .bm-k1-bahagian-a-card__petikan-title {
	font-weight: 400;
	font-style: italic;
	font-size: 1.1rem;
	margin: 0;
	color: #1e293b;
	line-height: 1.4;
}

/* BM K1 Bahagian B: full soalan text + word-limit line — preserve newlines */
.bm-semakan-bahasa.bm-k1-bahagian-b-semakan-bahasa .bm-semakan-bahasa__lr-taskText {
	white-space: pre-wrap;
}

/* Focus row — grey bar, “📝 Fokus pada:”, chips with bm-cat border colours */
.bm-semakan-bahasa__lr-focusBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 9px;
	background: #f8f9fa;
	border: 1px solid #e5e7eb;
	border-top: none;
}

.bm-semakan-bahasa__lr-focusLabel {
	font-size: 14px;
	font-weight: 600;
	color: #499add;
	margin-right: 8px;
}

.bm-semakan-bahasa__lr-chipGroup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bm-semakan-bahasa__lr-chip {
	padding: 6px 12px;
	background: #fff;
	color: #64748b;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.bm-semakan-bahasa__lr-chip--all:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: #cbd5e1;
}

/* Inactive category chips — border matches Jenis Kesalahan / bm-cat-* */
.bm-semakan-bahasa__lr-chip--cat-bm-cat-0:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: #8b5cf6;
}

.bm-semakan-bahasa__lr-chip--cat-bm-cat-1:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: #ef4444;
}

.bm-semakan-bahasa__lr-chip--cat-bm-cat-2:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: #10b981;
}

.bm-semakan-bahasa__lr-chip--cat-bm-cat-3:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: #f59e0b;
}

.bm-semakan-bahasa__lr-chip--cat-bm-cat-4:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: #3b82f6;
}

.bm-semakan-bahasa__lr-chip--active {
	background: #499add;
	color: #fff;
	border-color: #499add;
}

/* Category chip — per-error fixed palette via CSS vars from bmSemakanCategoryHueVars() */
.bm-semakan-bahasa__lr-chip--err-hue.bm-semakan-bahasa__lr-chip--active {
	background: var(--bm-chip-active-bg, #7c3aed);
	color: #fff;
	border-color: var(--bm-chip-active-border, #6d28d9);
}

.bm-semakan-bahasa__lr-chip--err-hue:not(.bm-semakan-bahasa__lr-chip--active) {
	border-color: var(--bm-chip-border, #c4b5fd);
	color: #475569;
}

/* Passage */
.bm-semakan-bahasa__lr-passageWrap {
	padding: 0;
	background: #fff;
	border: 2px solid #499add;
	border-top: none;
	border-color: #499add #e5e7eb #e5e7eb;
	border-style: solid;
	border-width: 2px 1px 1px;
	border-radius: 0 0 10px 10px;
}

.bm-semakan-bahasa__lr-passage {
	padding: 28px 24px;
	font-size: 1.05rem;
	line-height: 1.85;
	color: #374151;
	text-align: justify;
	white-space: pre-wrap;
}

/* No highlights when active domain (Bahasa / second domain) has zero errors in that tab */
.bm-semakan-bahasa__lr-passage--plain {
	cursor: default;
	user-select: text;
}

.bm-semakan-bahasa__hl {
	display: inline;
	margin: 0;
	padding: 1px 2px;
	border: none;
	border-radius: 3px;
	font: inherit;
	font-weight: 600;
	vertical-align: baseline;
	text-align: left;
	cursor: pointer;
	transition: opacity 0.2s, background 0.2s;
}

.bm-semakan-bahasa__hl--bm-cat-0 {
	background: rgba(139, 92, 246, 0.2);
	color: #7c3aed;
}

.bm-semakan-bahasa__hl--bm-cat-1 {
	background: rgba(239, 68, 68, 0.2);
	color: #dc2626;
}

.bm-semakan-bahasa__hl--bm-cat-2 {
	background: rgba(16, 185, 129, 0.25);
	color: #059669;
}

.bm-semakan-bahasa__hl--bm-cat-3 {
	background: rgba(245, 158, 11, 0.25);
	color: #d97706;
}

.bm-semakan-bahasa__hl--bm-cat-4 {
	background: rgba(59, 130, 246, 0.22);
	color: #2563eb;
}

/* Per-error-id hue (replaces bm-cat-* on passage for pending errors).
   Include :disabled so teacher / read-only view (highlights non-interactive) keeps the same tints. */
.bm-semakan-bahasa__hl--by-error:not(.bm-semakan-bahasa__hl--done):not(.bm-semakan-bahasa__hl--need-help) {
	background: var(--bm-soft-bg, rgba(139, 92, 246, 0.22));
	color: var(--bm-soft-text, #7c3aed);
}

.bm-semakan-bahasa__hl:hover:not(:disabled) {
	filter: brightness(0.97);
}

.bm-semakan-bahasa__hl--dim {
	opacity: 0.35;
	cursor: default;
}

.bm-semakan-bahasa__hl--done {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 3px;
	background: transparent !important;
	color: #047857 !important;
	border-bottom: 2px solid #10b981 !important;
	box-shadow: none !important;
	cursor: default;
	vertical-align: baseline;
}

/* Minta bantuan — peach/yellow band + siren after the word (also when disabled / teacher view) */
.bm-semakan-bahasa__hl--need-help {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 2px;
	background: rgba(254, 243, 199, 0.98) !important;
	color: #78350f !important;
	border-bottom: 2px solid #f59e0b !important;
	box-shadow: inset 0 -1px 0 rgba(245, 158, 11, 0.35);
	vertical-align: baseline;
}

.bm-semakan-bahasa__hl-word {
	display: inline;
	font-weight: 600;
	color: inherit;
}

.bm-semakan-bahasa__hl-doneTick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82em;
	font-weight: 800;
	color: #059669;
	line-height: 1;
	margin-left: 1px;
	flex-shrink: 0;
}

.bm-semakan-bahasa__hl-helpIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95em;
	line-height: 1;
	margin-left: 2px;
	flex-shrink: 0;
}

.bm-semakan-bahasa__hl-teacherIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95em;
	line-height: 1;
	margin-left: 2px;
	flex-shrink: 0;
}

.bm-semakan-bahasa__hl:disabled {
	cursor: default;
	/* Keep highlight colours visible; browsers default disabled buttons to greyed-out opacity */
	opacity: 1;
	-webkit-text-fill-color: currentColor;
}

/* Table */
.bm-semakan-bahasa__lr-tableWrap {
	margin-top: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}

.bm-semakan-bahasa__lr-tableHead {
	padding: 16px 20px;
	background: #499add;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

/* Status filter row */
.bm-semakan-bahasa__lr-tableFilters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: #f8f9fa;
	border-bottom: 1px solid #e5e7eb;
}

.bm-semakan-bahasa__lr-tableFiltersLabel {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin-right: 4px;
}

.bm-semakan-bahasa__lr-tableFilterChips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.bm-semakan-bahasa__lr-filterChip {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: inherit;
	border-radius: 999px;
	border: 1px solid transparent;
	line-height: 1.25;
}

.bm-semakan-bahasa__lr-filterBang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.95em;
	line-height: 1;
}

/* “Semua status” — neutral; active = slate */
.bm-semakan-bahasa__lr-filterChip--all:not(.bm-semakan-bahasa__lr-filterChip--active) {
	background: #fff;
	color: #64748b;
	border-color: #e5e7eb;
}

.bm-semakan-bahasa__lr-filterChip--all:not(.bm-semakan-bahasa__lr-filterChip--active):hover {
	background: #f8fafc;
}

.bm-semakan-bahasa__lr-filterChip--all.bm-semakan-bahasa__lr-filterChip--active {
	background: #6b7280;
	color: #fff;
	border-color: #6b7280;
}

/* Tinted idle filter chips */
.bm-semakan-bahasa__lr-filterChip--toneWarn:not(.bm-semakan-bahasa__lr-filterChip--active) {
	background: #ffedd5;
	color: #c2410c;
	border-color: #fdba74;
}

.bm-semakan-bahasa__lr-filterChip--toneWarn:not(.bm-semakan-bahasa__lr-filterChip--active):hover {
	filter: brightness(0.98);
}

.bm-semakan-bahasa__lr-filterChip--toneWarn.bm-semakan-bahasa__lr-filterChip--active {
	background: #ea580c;
	color: #fff;
	border-color: #ea580c;
}

.bm-semakan-bahasa__lr-filterChip--toneProgress:not(.bm-semakan-bahasa__lr-filterChip--active) {
	background: #eff6ff;
	color: #1d4ed8;
	border-color: #bfdbfe;
}

.bm-semakan-bahasa__lr-filterChip--toneProgress:not(.bm-semakan-bahasa__lr-filterChip--active):hover {
	filter: brightness(0.98);
}

.bm-semakan-bahasa__lr-filterChip--toneProgress.bm-semakan-bahasa__lr-filterChip--active {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}

.bm-semakan-bahasa__lr-filterChip--toneHelp:not(.bm-semakan-bahasa__lr-filterChip--active) {
	background: #fef2f2;
	color: #b91c1c;
	border-color: #fecaca;
}

.bm-semakan-bahasa__lr-filterChip--toneHelp:not(.bm-semakan-bahasa__lr-filterChip--active):hover {
	filter: brightness(0.98);
}

.bm-semakan-bahasa__lr-filterChip--toneHelp.bm-semakan-bahasa__lr-filterChip--active {
	background: #dc2626;
	color: #fff;
	border-color: #dc2626;
}

.bm-semakan-bahasa__lr-filterChip--toneOk:not(.bm-semakan-bahasa__lr-filterChip--active) {
	background: #ecfdf5;
	color: #047857;
	border-color: #a7f3d0;
}

.bm-semakan-bahasa__lr-filterChip--toneOk:not(.bm-semakan-bahasa__lr-filterChip--active):hover {
	filter: brightness(0.98);
}

.bm-semakan-bahasa__lr-filterChip--toneOk.bm-semakan-bahasa__lr-filterChip--active {
	background: #059669;
	color: #fff;
	border-color: #059669;
}

.bm-semakan-bahasa__lr-tableScroll {
	overflow-x: auto;
}

.bm-semakan-bahasa__lr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bm-semakan-bahasa__lr-table thead tr {
	background: #f8f9fa;
	border-bottom: 2px solid #e5e7eb;
}

.bm-semakan-bahasa__lr-th {
	padding: 12px 16px;
	text-align: center;
	font-weight: 600;
	color: #475569;
}

.bm-semakan-bahasa__lr-table th:nth-child(1) {
	width: 120px;
}

.bm-semakan-bahasa__lr-table th:nth-child(2),
.bm-semakan-bahasa__lr-table th:nth-child(3) {
	width: 35%;
}

.bm-semakan-bahasa__lr-table th:nth-child(4) {
	width: 120px;
}

.bm-semakan-bahasa__lr-tr {
	border-bottom: 1px solid #e5e7eb;
	cursor: pointer;
	transition: background 0.15s;
}

.bm-semakan-bahasa__lr-tr:hover:not(.bm-semakan-bahasa__lr-tr--done) {
	background: #f8fafc;
}

.bm-semakan-bahasa__lr-tr--done {
	cursor: default;
}

.bm-semakan-bahasa__lr-tr--done:hover {
	background: #fff;
}

.bm-semakan-bahasa__lr-table td {
	padding: 12px 16px;
	vertical-align: top;
	color: #374151;
	line-height: 1.55;
}

.bm-semakan-bahasa__lr-table td:nth-child(1),
.bm-semakan-bahasa__lr-table td:nth-child(4) {
	text-align: center;
	vertical-align: middle;
}

.bm-semakan-bahasa__lr-table td:nth-child(2),
.bm-semakan-bahasa__lr-table td:nth-child(3) {
	text-align: left;
}

.bm-semakan-bahasa__lr-tableEmpty {
	text-align: center !important;
	padding: 1.5rem 1rem !important;
	color: #64748b;
	font-size: 14px;
}

/* Jenis Kesalahan — coloured pills (`bm-cat-*` from `bmSemakanTableCategoryClass`) */
.bm-semakan-bahasa__lr-typePill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
	border: 1px solid transparent;
}

.bm-semakan-bahasa__lr-typePill--bm-cat-0 {
	background: rgba(139, 92, 246, 0.125);
	color: #7c3aed;
	border-color: rgba(139, 92, 246, 0.25);
}

.bm-semakan-bahasa__lr-typePill--bm-cat-1 {
	background: rgba(239, 68, 68, 0.125);
	color: #dc2626;
	border-color: rgba(239, 68, 68, 0.25);
}

.bm-semakan-bahasa__lr-typePill--bm-cat-2 {
	background: rgba(16, 185, 129, 0.15);
	color: #059669;
	border-color: rgba(16, 185, 129, 0.28);
}

.bm-semakan-bahasa__lr-typePill--bm-cat-3 {
	background: rgba(245, 158, 11, 0.15);
	color: #d97706;
	border-color: rgba(245, 158, 11, 0.3);
}

.bm-semakan-bahasa__lr-typePill--bm-cat-4 {
	background: rgba(59, 130, 246, 0.14);
	color: #2563eb;
	border-color: rgba(59, 130, 246, 0.28);
}

.bm-semakan-bahasa__lr-typePill--by-error {
	background: var(--bm-soft-bg, rgba(139, 92, 246, 0.22));
	color: var(--bm-soft-text, #7c3aed);
	border-color: var(--bm-soft-border, rgba(139, 92, 246, 0.35));
}

.bm-semakan-bahasa__lr-petikanBlock {
	min-width: 0;
}

.bm-semakan-bahasa__lr-errorSentence {
	display: block;
	color: #374151;
	line-height: 1.6;
	cursor: default;
}

.bm-semakan-bahasa__lr-errorWord {
	font-weight: 600;
	padding: 1px 3px;
	border-radius: 3px;
	cursor: help;
}

/* Ayat Kesalahan + Pembetulan draft word — same `bm-cat-*` tint (type colour + ~20% fill; status uses icons in column 4) */
.bm-semakan-bahasa__lr-errorWord--bm-cat-0,
.bm-semakan-bahasa__lr-pembetulanDraftWord--bm-cat-0 {
	background: rgba(139, 92, 246, 0.2);
	color: #7c3aed;
}

.bm-semakan-bahasa__lr-errorWord--bm-cat-1,
.bm-semakan-bahasa__lr-pembetulanDraftWord--bm-cat-1 {
	background: rgba(239, 68, 68, 0.2);
	color: #dc2626;
}

.bm-semakan-bahasa__lr-errorWord--bm-cat-2,
.bm-semakan-bahasa__lr-pembetulanDraftWord--bm-cat-2 {
	background: rgba(16, 185, 129, 0.25);
	color: #059669;
}

.bm-semakan-bahasa__lr-errorWord--bm-cat-3,
.bm-semakan-bahasa__lr-pembetulanDraftWord--bm-cat-3 {
	background: rgba(245, 158, 11, 0.25);
	color: #d97706;
}

.bm-semakan-bahasa__lr-errorWord--bm-cat-4,
.bm-semakan-bahasa__lr-pembetulanDraftWord--bm-cat-4 {
	background: rgba(59, 130, 246, 0.22);
	color: #2563eb;
}

.bm-semakan-bahasa__lr-errorWord--by-error,
.bm-semakan-bahasa__lr-pembetulanDraftWord--by-error {
	background: var(--bm-soft-bg, rgba(139, 92, 246, 0.22));
	color: var(--bm-soft-text, #7c3aed);
}

.bm-semakan-bahasa__lr-pembetulanDraftWord {
	font-weight: 600;
	padding: 1px 3px;
	border-radius: 3px;
}

.bm-semakan-bahasa__lr-petikanFallback {
	display: block;
}

.bm-semakan-bahasa__lr-petikanWord {
	display: block;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 4px;
}

.bm-semakan-bahasa__lr-petikanHint {
	margin: 0.4rem 0 0 0;
	font-size: 13px;
	color: #64748b;
	font-weight: 400;
}

.bm-semakan-bahasa__lr-statusCell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 2rem;
}

.bm-semakan-bahasa__lr-dash {
	color: #9ca3af;
	font-style: italic;
}

.bm-semakan-bahasa__lr-fixWrap {
	display: inline;
}

.bm-semakan-bahasa__lr-fixWrap--done {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
}

.bm-semakan-bahasa__lr-fixText {
	color: #047857;
	font-weight: 600;
	border-bottom: 2px solid #10b981;
	padding-bottom: 1px;
}

.bm-semakan-bahasa__lr-fixTick {
	font-size: 0.85em;
	font-weight: 800;
	color: #059669;
	line-height: 1;
	margin-left: 1px;
}

.bm-semakan-bahasa__lr-statusTag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
}

.bm-semakan-bahasa__lr-statusBang {
	font-weight: 800;
	margin-right: 1px;
}

.bm-semakan-bahasa__lr-statusTag--ok {
	background: #d1fae5;
	color: #065f46;
}

.bm-semakan-bahasa__lr-statusTag--pending {
	background: #fef3c7;
	color: #92400e;
}

.bm-semakan-bahasa__lr-statusTag--help {
	background: #dc2626;
	color: #fff;
}

.bm-semakan-bahasa__lr-statusTag--later {
	background: #dbeafe;
	color: #1e40af;
}

.bm-semakan-bahasa__lr-statusTag--progress {
	background: #dbeafe;
	color: #1e40af;
}

.bm-semakan-bahasa__lr-statusTeacherStack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.bm-semakan-bahasa__lr-statusTag--teacherHelp {
	background: #ffedd5;
	color: #c2410c;
	font-weight: 500;
}

.bm-semakan-bahasa__lr-statusByline {
	font-size: 11px;
	color: #9ca3af;
	font-style: italic;
}

.bm-semakan-bahasa__lr-metaBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding: 0.75rem 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.bm-semakan-bahasa__lr-metaLabel {
	font-weight: 600;
	color: #475569;
}

.bm-semakan-bahasa__lr-metaValue {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f766e;
}

.bm-semakan-bahasa__section {
	margin-top: 1rem;
}

.bm-semakan-bahasa__h {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #1e293b;
}

.bm-semakan-bahasa__text {
	margin: 0;
	white-space: pre-wrap;
}

.bm-semakan-bahasa__list {
	margin: 0;
	padding-left: 1.2rem;
}

.bm-semakan-bahasa__retry {
	margin-top: 0.5rem;
	padding: 0.4rem 0.9rem;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
}

.bm-semakan-bahasa__empty,
.bm-semakan-bahasa__error,
.bm-semakan-bahasa__pending {
	padding: 0.5rem 0;
}

.bm-k2-preview-card {
	font-size: 1rem;
	line-height: 1.6;
}

/* Submitted banner — same look as English Paper 2 comprehension (class name matches for parity) */
.english-paper2-comprehension__submitted {
	margin-top: 20px;
	padding: 16px;
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	text-align: center;
}

.english-paper2-comprehension__submitted p {
	margin: 0;
	color: #065f46;
	font-weight: 600;
}

/* Split layout - matches English Paper 1 Part 1 style */
.bm-k2-split-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1rem;
	background: #f7f8fb;
	border-radius: 24px;
}

.bm-k2-progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

.bm-k2-split-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 24px;
	padding: 2rem;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 1.25rem;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

/* BM K2 Bahagian A — Soalan 1–5 split cards: passage + jawapan at 17px (not Bahagian B/C layouts). */
.bm-k2-split-layout > .bm-k2-split-card:not(.bm-k2-split-card--bahagian-b) {
	font-size: 17px;
	line-height: 1.65;
}

.bm-k2-split-layout > .bm-k2-split-card:not(.bm-k2-split-card--bahagian-b) .bm-k2-answer-textarea {
	font-size: 17px;
}

.bm-k2-split-layout > .bm-k2-split-card:not(.bm-k2-split-card--bahagian-b) .bm-k2-question-card__label,
.bm-k2-split-layout > .bm-k2-split-card:not(.bm-k2-split-card--bahagian-b) .bm-k2-question-card__marks {
	font-size: 17px;
}

.bm-k2-split-layout > .bm-k2-split-card:not(.bm-k2-split-card--bahagian-b) .bm-k2-passage-label {
	font-size: 17px;
}

.bm-k2-split-layout > .bm-k2-split-card:not(.bm-k2-split-card--bahagian-b) .bm-k2-preview-source {
	font-size: 17px;
}

/* BM K2 Bahagian B — Soalan 6/7/8 split cards: all body/UI copy at 17px */
.bm-k2-split-card.bm-k2-split-card--bahagian-b {
	font-size: 17px;
	line-height: 1.65;
}

.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-passage-label,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-question-card__label,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-question-card__marks,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-question-text,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-preview-source,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-preview-instruction,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-preview-section-title,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-poem-title,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-poem-author-name,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-answer-textarea,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-novel-list,
.bm-k2-split-card.bm-k2-split-card--bahagian-b .bm-k2-novel-list li {
	font-size: 17px;
}

.bm-k2-passage-column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fff;
	border-radius: 20px;
}

.bm-k2-passage-header-bar {
	padding: 0;
}

.bm-k2-passage-label {
	display: inline-flex;
	background: #3b82f6;
	color: white;
	padding: 4px 18px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.95rem;
}

.bm-k2-passage {
	background: #f9fbff;
	padding: 1.5rem;
	border-radius: 12px;
}

.bm-k2-passage-content {
	line-height: 1.65;
	color: #111827;
	text-align: justify;
}

.bm-k2-question-section {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	align-self: stretch;
	gap: 1rem;
	background: #f8f9fb;
	border-radius: 20px;
	padding: 1.5rem;
}

.bm-k2-question-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.bm-k2-question-card__label {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1e293b;
	flex-shrink: 0;
}

.bm-k2-question-card__marks {
	font-size: 0.95rem;
	font-weight: 500;
	color: #64748b;
	flex-shrink: 0;
	margin-left: auto;
}

/* Submit section - same visual as English SPM */
.bm-k2-submit-container {
	margin-top: 2rem;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.bm-k2-submit-button {
	width: 100%;
	max-width: 320px;
	padding: 14px 24px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-size: 16px;
	font-weight: 600;
	transition: transform 0.2s, box-shadow 0.2s;
}

.bm-k2-submit-button:disabled {
	opacity: 0.6;
	box-shadow: none;
	cursor: not-allowed;
}

.bm-k2-submit-button:not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45);
}

.bm-k2-submit-hint {
	margin: 0;
	font-size: 0.9rem;
	color: #475569;
	text-align: center;
}

.bm-k2-answer-textarea {
	width: 100%;
	max-width: 100%;
	min-height: 90px;
	padding: 0.75rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	font-size: 1rem;
	line-height: 1.6;
	font-family: inherit;
	resize: vertical;
	background: #fff;
	color: #64748b;
	box-sizing: border-box;
}

.bm-k2-answer-textarea:disabled {
	cursor: not-allowed;
	opacity: 0.8;
}

.bm-k2-answer-textarea:not(:disabled) {
	color: #111827;
}

/* Bahagian B: 50-50 split - left = Bahan, right = Soalan + Jawapan. Same height, scrollable when long. */
.bm-k2-split-card--bahagian-b {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
	max-height: 80vh;
	min-height: 400px;
	overflow: hidden;
}

.bm-k2-split-card--bahagian-b .bm-k2-passage-column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-height: 0;
	overflow-y: auto;
}

.bm-k2-split-card--bahagian-b .bm-k2-questions-column {
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Ensure scrollbars are visible when content overflows */
.bm-k2-split-card--bahagian-b .bm-k2-passage-column::-webkit-scrollbar,
.bm-k2-split-card--bahagian-b .bm-k2-questions-column::-webkit-scrollbar {
	width: 8px;
}
.bm-k2-split-card--bahagian-b .bm-k2-passage-column::-webkit-scrollbar-thumb,
.bm-k2-split-card--bahagian-b .bm-k2-questions-column::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.bm-k2-bahan-block {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Poem/sajak/pantun layout - title, stanzas, author (ref: Kabut Persembunyian) */
.bm-k2-bahan-block--poem .bm-k2-passage {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bm-k2-poem-title {
	margin: 0 0 1rem 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.4;
}

.bm-k2-bahan-block--poem .bm-k2-passage-content {
	line-height: 1.8;
	white-space: pre-line;
}

.bm-k2-poem-author {
	margin-top: 1.25rem;
	text-align: right;
}

.bm-k2-poem-author-name {
	font-weight: 600;
	color: #1e293b;
	font-size: 0.95rem;
}

.bm-k2-bahan-instruction {
	margin-bottom: 0.5rem;
}

.bm-k2-questions-column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
	width: 100%;
}

/* Header at top of questions column - aligns with passage column, fills white space */
.bm-k2-questions-column-header {
	flex-shrink: 0;
	padding-top: 0;
	padding-bottom: 1rem;
	/* Matches height of Soalan header + instruction on left for alignment with Bahan 1 */
	min-height: 7.5rem;
	display: flex;
	align-items: flex-end;
}

.bm-k2-question-block {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #f8f9fb;
	border-radius: 16px;
	padding: 1.25rem;
}

.bm-k2-question-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #1e293b;
}

.bm-k2-question-block .bm-k2-submit-container {
	margin-top: 0.5rem;
}

@media (max-width: 960px) {
	.bm-k2-split-card {
		grid-template-columns: 1fr;
		padding: 1.5rem;
	}

	.bm-k2-split-card--bahagian-b {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}

	.bm-k2-split-card--bahagian-b .bm-k2-passage-column,
	.bm-k2-split-card--bahagian-b .bm-k2-questions-column {
		overflow-y: visible;
	}

	.bm-k2-questions-column {
		max-width: none;
	}

	.bm-k2-questions-column-header {
		min-height: 0;
		padding-bottom: 0.5rem;
	}
}

.bm-k2-preview-section {
	margin-bottom: 1.5rem;
}

.bm-k2-preview-section-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
	color: var(--lj-text-primary, #1a1a1a);
}

.bm-k2-preview-section-body {
	margin-left: 0;
}

.bm-k2-preview-passage {
	margin: 0 0 0.75rem 0;
}

.bm-k2-preview-passage p {
	margin-bottom: 1rem;
}

.bm-k2-preview-instruction {
	margin: 0.5rem 0;
	font-weight: 500;
	color: var(--lj-text-secondary, #444);
}

.bm-k2-preview-source {
	margin: 1rem 0 0 0;
	font-size: 0.9rem;
	color: #64748b;
	font-style: italic;
}

/* Soalan 8 (ii): preamble, senarai novel a–h, nota panjang jawapan */
.bm-k2-bahan-block > .bm-k2-novel-list-card {
	margin-top: 0;
}

.bm-k2-novel-list-card {
	margin-top: 1rem;
	padding: 1.25rem;
	background: #f9fbff;
	border-radius: 12px;
}

.bm-k2-novel-list-card__lead {
	margin: 0 0 0.75rem !important;
	font-weight: 600;
	color: rgb(51, 65, 85);
}

.bm-k2-novel-list-card .bm-k2-novel-list {
	color: rgb(51, 65, 85);
	list-style: none;
}

.bm-k2-novel-list-card__note {
	margin: 0 !important;
}

.bm-k2-preview-item {
	margin: 0.5rem 0;
	padding: 0.25rem 0;
}

.bm-k2-preview-empty {
	color: var(--lj-text-muted, #666);
	font-style: italic;
	margin: 1rem 0;
}

/* BM K2 Bahagian C: Situational-writing style (tabs Bahan 1/2/3, response panel) */
.bm-k2-rumusan-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	font-size: 17px;
	line-height: 1.65;
	min-height: 0;
}

/* Bahagian C — match Kertas 2 A/B: explicit rem/px sizes reset to 17px */
.bm-k2-rumusan-card .bm-k2-rumusan-card__instruction,
.bm-k2-rumusan-card .bm-k2-rumusan-card__tab,
.bm-k2-rumusan-card .bm-k2-rumusan-card__panel-title,
.bm-k2-rumusan-card .bm-k2-rumusan-card__response-header,
.bm-k2-rumusan-card .bm-k2-rumusan-card__response-header h4,
.bm-k2-rumusan-card .bm-k2-bahagian-c-rumusan__textarea,
.bm-k2-rumusan-card .bm-k2-bahagian-c-feedback,
.bm-k2-rumusan-card .bm-k2-rumusan-card__word-count,
.bm-k2-rumusan-card .bm-k2-preview-source,
.bm-k2-rumusan-card .bm-k2-rumusan-card__actions .bm-k2-submit-button,
.bm-k2-rumusan-card .bm-k2-submit-hint {
	font-size: 17px;
}

.bm-k2-rumusan-card__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 1rem;
	/* Allow grid row to shrink for overflow; keep a modest floor when viewport allows */
	min-height: min(480px, 55vh);
	max-height: min(82vh, calc(100dvh - 10rem));
	min-width: 0;
	overflow: hidden;
	align-items: stretch;
}

/* First grid cell: bounded height from __split; scrolls entire left stack (white source card) */
.bm-k2-rumusan-card__split-column--left {
	min-height: 0;
	min-width: 0;
	height: 100%;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.bm-k2-rumusan-card__source-panel {
	border-radius: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding: 1.25rem;
	box-sizing: border-box;
	overflow: visible;
}

.bm-k2-rumusan-card__response-panel {
	border-radius: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding: 1.25rem;
	box-sizing: border-box;
	overflow: hidden;
}

.bm-k2-rumusan-card__instruction {
	margin: 0 0 1rem 0;
	font-weight: 500;
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.6;
}

.bm-k2-rumusan-card__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.bm-k2-rumusan-card__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: none;
	border-radius: 999px;
	padding: 0.5rem 1.2rem;
	color: #1d4ed8;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.2s ease;
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.bm-k2-rumusan-card__tab.is-active {
	background: #3b82f6;
	color: #fff;
	box-shadow: none;
}

.bm-k2-rumusan-card__panel {
	flex: 0 1 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fbfbff;
	border-radius: 12px;
	padding: 1.5rem;
	/* Clip to rounded border; column scroll stays on __source-panel */
	overflow: hidden;
	border: 1px solid #e2e8f0;
}

/* Keep long petikan / poster / table inside the panel width */
.bm-k2-rumusan-card__panel .bm-k2-passage-content,
.bm-k2-rumusan-card__panel .bm-k2-preview-source,
.bm-k2-rumusan-card__panel .bm-k2-rumusan-card__content {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-wrap: break-word;
	word-break: break-word;
}

.bm-k2-rumusan-card__panel img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.bm-k2-rumusan-card__panel table {
	max-width: 100%;
}

.bm-k2-rumusan-card__panel-title {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #1e293b;
}

.bm-k2-rumusan-card__content {
	line-height: 1.65;
	color: #111827;
	text-align: justify;
}

.bm-k2-rumusan-card__content p {
	margin: 0 0 1rem 0;
}

.bm-k2-rumusan-card__response-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	background: #3b82f6;
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.bm-k2-rumusan-card__response-header h4 {
	margin: 0;
	font-size: 16px;
	color: inherit;
	font-weight: 600;
}

.bm-k2-rumusan-card__response-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Bahagian C rumusan editor — parity with essay-style inputs (BM-specific class names; lj-input is global). */
.bm-k2-bahagian-c-rumusan__editor {
	margin-bottom: 1rem;
	flex: 1;
	min-height: 0;
	display: flex;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.bm-k2-bahagian-c-rumusan__textarea {
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 0;
	padding: 1rem;
	border: 2px solid #ddd;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
	font-size: 1.2rem;
	line-height: 1.8;
	resize: vertical;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	color: #0f172a;
}

.bm-k2-bahagian-c-rumusan__textarea:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.bm-k2-bahagian-c-rumusan__textarea:disabled {
	background: #f6f7f7;
	cursor: not-allowed;
}

.bm-k2-bahagian-c-rumusan__textarea::placeholder {
	color: #94a3b8;
}

.bm-k2-bahagian-c-rumusan__submitted {
	margin-top: 0.5rem;
}

.bm-k2-bahagian-c-feedback {
	margin: 0.75rem 0 0 0;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 1rem;
	line-height: 1.5;
}

.bm-k2-bahagian-c-feedback--correct {
	background: #d1fae5;
	border: 1px solid #a7f3d0;
	color: #065f46;
	font-weight: 600;
}

.bm-k2-rumusan-card__word-count {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #64748b;
}

.bm-k2-rumusan-card__actions {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.bm-k2-rumusan-card__actions .bm-k2-submit-button {
	width: 100%;
	max-width: 320px;
	background: #16a34a;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bm-k2-rumusan-card__actions .bm-k2-submit-button:not(:disabled):hover {
	background: #15803d;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(22, 163, 74, 0.4);
}

.bm-k2-rumusan-card__actions .bm-k2-submit-button:disabled {
	background: #94a3b8;
	opacity: 0.85;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media (max-width: 960px) {
	.bm-k2-rumusan-card__split {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		/* Stacked layout: do not cap whole card; let each column scroll on its own */
		max-height: none;
		overflow: visible;
	}

	.bm-k2-rumusan-card__split-column--left {
		height: auto;
		max-height: min(58vh, 26rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.bm-k2-rumusan-card__response-panel {
		max-height: min(58vh, 26rem);
		overflow: hidden;
	}

	.bm-k2-rumusan-card__source-panel {
		overflow: visible;
	}

	.bm-k2-rumusan-card__panel {
		flex: 0 1 auto;
		min-height: 0;
		min-width: 0;
		overflow: hidden;
	}
}

/* BM K2 Bahagian C — poster / infografik: tap to enlarge (portal modal) */
.bm-k2-bahan-image-thumb {
	display: block;
	width: 100%;
	margin: 0 0 0.75rem 0;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 0.375rem;
	cursor: zoom-in;
	text-align: center;
	box-sizing: border-box;
}

.bm-k2-bahan-image-thumb:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
}

.bm-k2-bahan-image-thumb__img {
	display: block;
	width: 100%;
	max-height: 400px;
	object-fit: contain;
	border-radius: 0.375rem;
	vertical-align: middle;
}

.bm-k2-bahan-image-modal {
	position: fixed;
	inset: 0;
	z-index: 100100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.bm-k2-bahan-image-modal__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(15, 23, 42, 0.82);
	cursor: pointer;
}

.bm-k2-bahan-image-modal__frame {
	position: relative;
	z-index: 1;
	max-width: min(95vw, 1200px);
	max-height: 90vh;
	margin: 0;
	padding: 0.5rem;
	box-sizing: border-box;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.bm-k2-bahan-image-modal__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.75);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bm-k2-bahan-image-modal__close:hover {
	background: rgba(15, 23, 42, 0.95);
}

.bm-k2-bahan-image-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bm-k2-bahan-image-modal__img {
	display: block;
	max-width: 100%;
	max-height: min(85vh, 900px);
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 8px;
}

.bm-k2-marking-banner {
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.bm-k2-marking-banner--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.bm-k2-marking-banner--progress {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}
/*
 * BM K2 Bahagian A — marking modal
 * Visual parity with English Paper 2 (EnglishPaper2MarkingModal.css); BM-only class prefix .bm-k2-marking-modal-*
 */

.bm-k2-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: bm-k2-marking-modal-fadeIn 0.3s ease;
}

@keyframes bm-k2-marking-modal-fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.bm-k2-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: bm-k2-marking-modal-slideUp 0.4s ease;
}

@keyframes bm-k2-marking-modal-slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bm-k2-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.bm-k2-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.bm-k2-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.bm-k2-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.bm-k2-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.bm-k2-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

/* Phase indicators — same structure as English */
.bm-k2-marking-modal__phases {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}

.bm-k2-marking-modal__phases .phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.bm-k2-marking-modal__phases .phase.active {
	opacity: 1;
}

.bm-k2-marking-modal__phases .phase.complete {
	opacity: 1;
}

.bm-k2-marking-modal__phases .phase-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.bm-k2-marking-modal__phases .phase.active .phase-icon {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: bm-k2-marking-modal-pulse 2s ease-in-out infinite;
}

.bm-k2-marking-modal__phases .phase.complete .phase-icon {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes bm-k2-marking-modal-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.bm-k2-marking-modal__phases .phase-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

@media (max-width: 768px) {
	.bm-k2-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}

	.bm-k2-marking-modal__title {
		font-size: 1.25rem;
	}

	.bm-k2-marking-modal__phases .phase-icon {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}

	.bm-k2-marking-modal__phases .phase-label {
		font-size: 0.7rem;
	}
}
/* BM K2 correction modal — mirrors English StudentCorrectionModal layout/colors (scoped) */

.bm-k2-scm-overlay {
	position: fixed;
	inset: 0;
	z-index: 100050;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(2px);
}

.bm-k2-scm {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 95%;
	max-width: 1400px;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bm-k2-scm__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #2079b0;
	flex-shrink: 0;
}

.bm-k2-scm__title-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	flex-wrap: wrap;
}

.bm-k2-scm__title-row h3 {
	margin: 0;
	color: white;
	font-size: 1.25rem;
	font-weight: 700;
}

.bm-k2-scm__criteria-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.bm-k2-scm__close {
	background: transparent;
	border: none;
	color: white;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.bm-k2-scm__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.bm-k2-scm__split {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.bm-k2-scm__split--single .bm-k2-scm__panel {
	flex: 1;
	min-width: 0;
}

.bm-k2-scm__passage {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	border-right: 2px solid #e2e8f0;
	background: #f8fafc;
	overflow: hidden;
}

.bm-k2-scm__passage-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	background: #f1f5f9;
	flex-shrink: 0;
}

.bm-k2-scm__passage-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.bm-k2-scm__passage-head h4 {
	margin: 0;
	color: #334155;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bm-k2-scm__passage-body {
	flex: 1;
	padding: 1.5rem;
	overflow-y: auto;
	line-height: 1.8;
}

.bm-k2-scm__bahan-section {
	margin-bottom: 1.5rem;
}

.bm-k2-scm__bahan-section:last-child {
	margin-bottom: 0;
}

.bm-k2-scm__bahan-title {
	margin: 0 0 0.75rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #cbd5e1;
	color: #334155;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bm-k2-scm__para {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.bm-k2-scm__para-num {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.875rem;
	margin-top: 0.125rem;
}

.bm-k2-scm__para p {
	margin: 0;
	flex: 1;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.8;
	text-align: justify;
}

/* Frasa ditebalkan — match preview card (Petikan) */
.bm-k2-scm__para p b,
.bm-k2-scm__para p strong {
	font-weight: 700;
	color: #0f172a;
}

.bm-k2-scm__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: white;
	min-width: 0;
}

.bm-k2-scm__tabs {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem 0 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #f8fafc;
	flex-shrink: 0;
}

.bm-k2-scm__tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
	transition: all 0.2s;
	position: relative;
	top: 2px;
}

.bm-k2-scm__tab:hover {
	color: #334155;
	background: rgba(59, 130, 246, 0.05);
}

.bm-k2-scm__tab.is-active {
	color: #3b82f6;
	border-bottom-color: #3b82f6;
	background: white;
}

.bm-k2-scm__tab-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.bm-k2-scm__tab-label {
	font-size: 0.875rem;
}

.bm-k2-scm__tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.bm-k2-scm__ctx {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.bm-k2-scm__ctx h5 {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bm-k2-scm__qtext {
	margin: 0;
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
	white-space: pre-wrap;
}

.bm-k2-scm__orig-answer {
	margin: 0;
	padding: 0.875rem;
	background: #eff6ff;
	border-left: 3px solid #3b82f6;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
	white-space: pre-wrap;
}

.bm-k2-scm__feedback {
	margin: 0;
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #92400e;
	white-space: pre-wrap;
}

.bm-k2-scm__criteria-status {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.bm-k2-scm__criteria-status h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #15803d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bm-k2-scm__criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-k2-scm__criteria-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.bm-k2-scm__criteria-list .bm-k2-scm__crit-icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.bm-k2-scm__no-criteria {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 4px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

.bm-k2-scm__form-section {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 2px solid #e2e8f0;
}

.bm-k2-scm__form-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
}

.bm-k2-scm__textarea {
	width: 100%;
	padding: 0.875rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
	min-height: 140px;
}

.bm-k2-scm__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.bm-k2-scm__form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.bm-k2-scm__word-count {
	font-size: 0.875rem;
	color: #64748b;
	font-weight: 500;
}

.bm-k2-scm__word-count.is-low {
	color: #dc2626;
}

.bm-k2-scm__btn-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bm-k2-scm__btn-help {
	padding: 0.625rem 1.25rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.bm-k2-scm__btn-help:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.bm-k2-scm__btn-submit {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bm-k2-scm__btn-submit:hover:not(:disabled) {
	background: #2563eb;
}

.bm-k2-scm__btn-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.bm-k2-scm__banner {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	color: #92400e;
	font-weight: 500;
}

/* Help requested (aligned with English StudentCorrectionModal .help-requested-banner) */
.bm-k2-scm .help-requested-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
	color: #92400e;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.45;
}

.bm-k2-scm .help-requested-banner .help-icon {
	font-size: 1.25rem;
}

/* Sejarah tab — drawer layout (aligned with English StudentCorrectionModal) */
.bm-k2-scm__tab-content--history {
	display: flex;
	flex-direction: column;
}

.bm-k2-scm__history-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-k2-scm__attempt-drawer {
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
}

.bm-k2-scm__attempt-drawer-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.bm-k2-scm__attempt-drawer-summary::-webkit-details-marker {
	display: none;
}

.bm-k2-scm__attempt-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.bm-k2-scm__attempt-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	flex-shrink: 0;
}

.bm-k2-scm__attempt-badge--original {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.bm-k2-scm__attempt-title {
	flex: 1;
	font-size: 0.9375rem;
	color: #1e293b;
	font-weight: 600;
	min-width: 0;
}

.bm-k2-scm__attempt-criteria-badge {
	padding: 0.25rem 0.625rem;
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	flex-shrink: 0;
}

.bm-k2-scm__attempt-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
	flex-shrink: 0;
}

.bm-k2-scm__attempt-drawer[open] .bm-k2-scm__attempt-toggle {
	transform: rotate(180deg);
}

.bm-k2-scm__attempt-drawer-content {
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
}

.bm-k2-scm__attempt-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-k2-scm__attempt-section h6 {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bm-k2-scm__attempt-text {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.bm-k2-scm__attempt-feedback-text {
	margin: 0;
	padding: 0.75rem;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
	color: #92400e;
	font-size: 0.875rem;
	line-height: 1.6;
	font-style: italic;
}

.bm-k2-scm__attempt-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-k2-scm__attempt-criteria-list .bm-k2-scm__crit-met {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	background: white;
	border-radius: 4px;
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.bm-k2-scm__crit-icon {
	font-weight: 700;
	width: 1.25rem;
	text-align: center;
	flex-shrink: 0;
}

.bm-k2-scm__no-criteria-msg {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

.bm-k2-scm__attempt-error-notice,
.bm-k2-scm__attempt-pending-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
}

.bm-k2-scm__attempt-pending-notice {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.bm-k2-scm__attempt-error-notice {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.bm-k2-scm__history-empty {
	padding: 1.5rem 1rem;
	text-align: center;
	color: #64748b;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	background: #f8fafc;
}

.bm-k2-scm__history-empty p {
	margin: 0.35rem 0;
	font-size: 0.9375rem;
}

.bm-k2-scm__history-empty strong {
	color: #3b82f6;
}

@media (max-width: 900px) {
	.bm-k2-scm__split {
		flex-direction: column;
		overflow-y: auto;
	}

	.bm-k2-scm__passage {
		flex: 0 0 auto;
		max-height: 40vh;
		border-right: none;
		border-bottom: 2px solid #e2e8f0;
	}
}

/* -------------------------------------------------------------------------- */
/* Guru: paparan “Lihat pembetulan” — sama struktur seperti English           */
/* StudentCorrectionsModal (semua di-scope di bawah .bm-k2-tcm)             */
/* -------------------------------------------------------------------------- */

.bm-k2-tcm {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bm-k2-tcm .modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.bm-k2-tcm .modal-title {
	flex: 1;
}

.bm-k2-tcm .modal-title h3 {
	margin: 0 0 0.5rem 0;
	color: #1e40af;
	font-size: 1.25rem;
	font-weight: 700;
}

.bm-k2-tcm .modal-title .question-preview {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.bm-k2-tcm .modal-close-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: white;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1rem;
}

.bm-k2-tcm .modal-close-btn:hover {
	background: #fee2e2;
	color: #991b1b;
}

.bm-k2-tcm .modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

.bm-k2-tcm .correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.bm-k2-tcm .correction-status-summary .status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bm-k2-tcm .correction-status-summary .status-item .label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bm-k2-tcm .correction-status-summary .status-item .value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.bm-k2-tcm .correction-status-summary .status-item .value.status-in_progress {
	color: #f59e0b;
}

.bm-k2-tcm .correction-status-summary .status-item .value.status-need_help {
	color: #ef4444;
}

.bm-k2-tcm .correction-status-summary .status-item .value.status-not_started {
	color: #64748b;
}

.bm-k2-tcm .correction-status-summary .status-item .value.status-completed {
	color: #059669;
}

.bm-k2-tcm .need-help-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2px solid #ef4444;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.bm-k2-tcm .need-help-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.bm-k2-tcm .need-help-content strong {
	display: block;
	color: #991b1b;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.bm-k2-tcm .need-help-content p {
	margin: 0;
	color: #b91c1c;
	font-size: 0.875rem;
}

/* Borang bimbingan guru (BM) — sama struktur seperti English StudentCorrectionsModal, scoped */
.bm-k2-tcm .teacher-help-section {
	background: #f8fafc;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.bm-k2-tcm .teacher-help-header {
	margin-bottom: 1rem;
}

.bm-k2-tcm .teacher-help-header h4 {
	margin: 0 0 0.25rem 0;
	color: #1e40af;
	font-size: 1.1rem;
	font-weight: 700;
}

.bm-k2-tcm .teacher-help-header p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

.bm-k2-tcm .help-error-message {
	background: #fee2e2;
	border: 1px solid #fecaca;
	color: #991b1b;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.bm-k2-tcm .help-success-message {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.bm-k2-tcm .teacher-help-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-k2-tcm .help-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.bm-k2-tcm .help-input-group label {
	font-size: 0.875rem;
	color: #374151;
}

.bm-k2-tcm .help-input-group label strong {
	font-weight: 600;
}

.bm-k2-tcm .teacher-help-textarea {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.875rem;
	resize: vertical;
	min-height: 60px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bm-k2-tcm .teacher-help-textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.bm-k2-tcm .teacher-help-textarea::placeholder {
	color: #9ca3af;
}

.bm-k2-tcm .char-count {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: right;
}

.bm-k2-tcm .help-options {
	padding: 0.75rem 0;
}

.bm-k2-tcm .checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.bm-k2-tcm .checkbox-label input[type="checkbox"] {
	margin-top: 0.125rem;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.bm-k2-tcm .checkbox-text {
	font-size: 0.875rem;
	line-height: 1.4;
	color: #374151;
}

.bm-k2-tcm .help-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

.bm-k2-tcm .btn-provide-help {
	background: #3b82f6;
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.bm-k2-tcm .btn-provide-help:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
}

.bm-k2-tcm .btn-provide-help:active:not(:disabled) {
	transform: translateY(0);
}

.bm-k2-tcm .btn-provide-help:disabled {
	background: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

.bm-k2-tcm .previous-teacher-help {
	background: #ecfdf5;
	border: 1px solid #10b981;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.bm-k2-tcm .teacher-help-display-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #a7f3d0;
}

.bm-k2-tcm .teacher-help-display-header h5 {
	margin: 0;
	color: #065f46;
	font-size: 1rem;
	font-weight: 600;
}

.bm-k2-tcm .help-meta {
	font-size: 0.75rem;
	color: #047857;
}

.bm-k2-tcm .teacher-help-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bm-k2-tcm .teacher-message-display strong,
.bm-k2-tcm .teacher-hint-display strong {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #047857;
}

.bm-k2-tcm .teacher-message-display p,
.bm-k2-tcm .teacher-hint-display p {
	margin: 0;
	background: white;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border-left: 3px solid #10b981;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #1f2937;
}

.bm-k2-tcm .reset-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #059669;
	font-weight: 500;
}

.bm-k2-tcm .teacher-attempts-list {
	margin-top: 0;
}

.bm-k2-tcm .teacher-attempts-list h4 {
	margin: 0 0 1rem 0;
	color: #1e293b;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bm-k2-tcm .teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
	transition: all 0.2s;
}

.bm-k2-tcm .teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.bm-k2-tcm .teacher-attempt-item:last-child {
	margin-bottom: 0;
}

.bm-k2-tcm .teacher-attempt-item .attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.bm-k2-tcm .teacher-attempt-item .attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.bm-k2-tcm .teacher-attempt-item .attempt-date {
	font-size: 12px;
	color: #64748b;
}

.bm-k2-tcm .teacher-attempt-item .attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.bm-k2-tcm .no-attempts {
	padding: 2rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	text-align: center;
}

.bm-k2-tcm .no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

.bm-k2-tcm .teacher-ai-feedback {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.bm-k2-tcm .correction-criteria-section {
	margin-bottom: 1rem;
}

.bm-k2-tcm .correction-criteria-section strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.bm-k2-tcm .bm-k2-tcm-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-k2-tcm .bm-k2-tcm-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
}

.bm-k2-tcm .bm-k2-tcm-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.bm-k2-tcm .bm-k2-tcm-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.bm-k2-tcm .bm-k2-tcm-criteria-icon {
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
	font-weight: 700;
}

.bm-k2-tcm .bm-k2-tcm-criteria-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bm-k2-tcm .bm-k2-tcm-criteria-text {
	color: #1e293b;
	line-height: 1.45;
}

.bm-k2-tcm .bm-k2-tcm-criteria-comment {
	color: #64748b;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.bm-k2-tcm .teacher-feedback-text {
	margin-top: 0.75rem;
}

.bm-k2-tcm .teacher-feedback-text strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.bm-k2-tcm .teacher-feedback-text p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.bm-k2-tcm .ai-feedback-error {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 0.875rem;
	line-height: 1.45;
}

.bm-k2-tcm .ai-feedback-error strong {
	display: block;
	margin-bottom: 0.35rem;
}

.bm-k2-tcm .ai-feedback-error p {
	margin: 0;
}

@media (max-width: 768px) {
	.bm-k2-tcm {
		max-height: 95vh;
	}

	.bm-k2-tcm .modal-header {
		padding: 1rem;
	}

	.bm-k2-tcm .modal-body {
		padding: 1rem;
	}

	.bm-k2-tcm .correction-status-summary {
		grid-template-columns: 1fr;
	}
}
/* Modal Overlay */
.adjustment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

/* Modal Container */
.adjustment-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Modal Header */
.adjustment-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adjustment-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.modal-close-btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background-color: #f1f5f9;
}

/* Modal Body */
.adjustment-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Context Section */
.adjustment-context {
	margin-bottom: 20px;
}

.context-section {
	margin-bottom: 16px;
}

.context-section h4 {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text,
.student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.student-answer {
	border-left-color: #3b82f6;
}

/* AI Assessment Box */
.ai-assessment-box {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}

.ai-assessment-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 12px;
}

.ai-icon {
	font-size: 18px;
}

.ai-assessment-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ai-score {
	font-size: 14px;
	color: #78350f;
}

.ai-feedback-preview {
	font-size: 13px;
	color: #78350f;
	line-height: 1.5;
}

/* Divider */
.adjustment-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 20px 0;
}

/* Adjustment Fields */
.adjustment-field {
	margin-bottom: 20px;
}

.adjustment-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

/* Current Score Display */
.current-score-display {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-display-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.score-display-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
	display: flex;
	align-items: center;
	gap: 8px;
}

.score-change-indicator {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
	background: #f0f9ff;
	color: #1e40af;
	border: 1px solid #3b82f6;
}

/* Criteria Header with Hint */
.criteria-header-with-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criteria-hint:hover {
	background-color: #f1f5f9;
}

.hint-icon {
	font-size: 14px;
}

.hint-text {
	font-weight: 500;
}

/* Criteria List */
.criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.criterion-item {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.criterion-label {
	cursor: pointer;
	user-select: none;
}

.criterion-item:last-child {
	margin-bottom: 0;
}

.criterion-item.awarded {
	background-color: #f0fdf4;
	border-left: 3px solid #22c55e;
}

.criterion-item.not-awarded {
	background-color: #fef2f2;
	border-left: 3px solid #ef4444;
}

.criterion-item:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #334155;
	user-select: none;
	transition: opacity 0.1s ease;
}

.criterion-label:active {
	opacity: 0.8;
}

.criterion-label input[type="checkbox"] {
	margin-top: 2px;
	cursor: pointer;
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
	flex-shrink: 0;
}

.criterion-icon {
	font-size: 16px;
	font-weight: bold;
	flex-shrink: 0;
	width: 20px;
}

.criterion-item.awarded .criterion-icon {
	color: #16a34a;
}

.criterion-item.not-awarded .criterion-icon {
	color: #dc2626;
}

.criterion-text {
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.criterion-comment {
	margin: 6px 0 0 46px;
	font-size: 13px;
	color: #64748b;
	font-style: italic;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Feedback Input */
.feedback-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.feedback-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Modal Footer */
.adjustment-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.btn-secondary,
.btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

.btn-secondary {
	background: white;
	border: 1px solid #cbd5e1;
	color: #334155;
}

.btn-secondary:hover {
	background-color: #f8fafc;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

.btn-primary:hover {
	background: #2563eb;
}

/* Responsive */
@media (max-width: 768px) {
	.adjustment-modal {
		max-width: 95%;
		max-height: 95vh;
	}

	.adjustment-modal-body {
		padding: 16px;
	}

	.adjustment-modal-header {
		padding: 16px;
	}
}
/* BM Kertas 2 marking report — scoped under .bm-kertas-2-marking-report only */

.bm-kertas-2-marking-report {
	padding: 1.5rem;
	max-width: 960px;
	margin: 0 auto;
}

.bm-kertas-2-marking-report__loading,
.bm-kertas-2-marking-report__error {
	padding: 2rem;
	border-radius: 16px;
	text-align: center;
}

.bm-kertas-2-marking-report__loading {
	background: #f8fafc;
	color: #475569;
}

.bm-kertas-2-marking-report__error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.bm-kertas-2-marking-report__retry {
	margin-top: 1rem;
	padding: 0.5rem 1.25rem;
	border-radius: 8px;
	border: none;
	background: #0f172a;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.bm-kertas-2-marking-report__empty {
	text-align: center;
	padding: 3rem 2rem;
	background: #f8fafc;
	border-radius: 16px;
	border: 1px dashed #e2e8f0;
}

.bm-kertas-2-marking-report__icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.bm-kertas-2-marking-report__empty h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
	color: #1e293b;
}

.bm-kertas-2-marking-report__empty p {
	margin: 0;
	color: #64748b;
	font-size: 1rem;
}

/* Outer card: white (English Paper 2 marks section). Inner strip: purple gradient + badge tints unchanged. */
.bm-kertas-2-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	color: #2d3748;
}

.bm-kertas-2-marks-section__title {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

/* Same inner bar as .english-paper2-total-marks — score + performance badge */
.bm-kertas-2-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 20px;
	background: #193852;
	border-radius: 12px;
	margin-bottom: 0;
	color: #fff;
}

.bm-kertas-2-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bm-kertas-2-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
	color: #fff;
}

.bm-kertas-2-score-value {
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: #fff;
}

.bm-kertas-2-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.bm-kertas-2-badge-icon {
	font-size: 24px;
	line-height: 1;
}

.bm-kertas-2-badge-text {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.bm-kertas-2-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.5);
}

.bm-kertas-2-performance-badge.good {
	background: rgba(59, 130, 246, 0.5);
}

.bm-kertas-2-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.5);
}

.bm-kertas-2-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.5);
}

/* Detailed breakdown — aligned with GP Paper 2 / English P2 cards */
.bm-kertas-2-marking-report__questions-header h3 {
	margin: 0 0 0.5rem 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

.bm-kertas-2-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 0.25rem;
	font-size: calc(1rem + 2.5px);
}

.bm-kertas-2-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.bm-kertas-2-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.bm-kertas-2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

.bm-kertas-2-question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Mirrors English SPM Paper 1 header-right: score + teacher actions on one row */
.bm-kertas-2-question-result__header-right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.75rem;
}

.bm-kertas-2-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.bm-kertas-2-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.bm-kertas-2-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.bm-kertas-2-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

.bm-kertas-2-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.bm-kertas-2-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

.bm-kertas-2-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bm-kertas-2-question-result__answer strong {
	color: #1e293b;
}

.bm-kertas-2-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
	white-space: pre-wrap;
}

.bm-kertas-2-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bm-kertas-2-question-result__criteria strong {
	color: #1e293b;
}

.bm-kertas-2-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bm-kertas-2-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.bm-kertas-2-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.bm-kertas-2-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.bm-kertas-2-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.bm-kertas-2-criteria-item.awarded .bm-kertas-2-criteria-icon {
	background: #22c55e;
	color: white;
}

.bm-kertas-2-criteria-item.not-awarded .bm-kertas-2-criteria-icon {
	background: #ef4444;
	color: white;
}

.bm-kertas-2-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bm-kertas-2-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.bm-kertas-2-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.bm-kertas-2-criteria-item.hidden-criterion {
	opacity: 0.6;
}

.bm-kertas-2-criteria-text--hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

/* Same visual as English .via-correction-pill — BM-scoped class name */
.bm-kertas-2-via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

.bm-kertas-2-criteria-hint p {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: #64748b;
	font-style: italic;
}

.bm-kertas-2-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
}

.bm-kertas-2-question-result__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.bm-kertas-2-question-result__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
}

.bm-kertas-2-correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.bm-kertas-2-correction-completed-banner__icon {
	font-size: 2rem;
	line-height: 1;
}

.bm-kertas-2-correction-completed-banner__content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bm-kertas-2-correction-completed-banner__content strong {
	font-size: 1rem;
	color: #166534;
}

.bm-kertas-2-correction-completed-banner__content span {
	font-size: 0.875rem;
	color: #15803d;
}

.bm-kertas-2-teacher-help-notification {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: #fffbeb;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.bm-kertas-2-teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #92400e;
}

.bm-kertas-2-teacher-help-notification__content p {
	margin: 0;
	color: #78350f;
	font-size: 0.9rem;
	line-height: 1.5;
}

.bm-kertas-2-teacher-help-notification__hint {
	margin-top: 0.5rem;
}

.bm-kertas-2-question-correction-button-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

.bm-kertas-2-btn-open-correction-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bm-kertas-2-btn-open-correction-modal:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.bm-kertas-2-attempts-badge-inline {
	padding: 0.5rem 1rem;
	background: white;
	color: #0369a1;
	border: 1px solid #7dd3fc;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Guru: terbitkan laporan, pembetulan, ubah markah */
.bm-kertas-2-teacher-toolbar {
	margin-bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-kertas-2-release-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
}

.bm-kertas-2-release-banner--pending {
	background: #fffbeb;
	border-color: #fde68a;
}

.bm-kertas-2-release-banner--released {
	background: #ecfdf5;
	border-color: #6ee7b7;
}

.bm-kertas-2-release-banner__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.bm-kertas-2-release-banner__title {
	font-weight: 700;
	color: #0f172a;
	font-size: 1rem;
}

.bm-kertas-2-release-banner__subtitle {
	color: #475569;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.bm-kertas-2-release-banner__btn {
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: none;
	background: #0f172a;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.bm-kertas-2-release-banner__btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.bm-kertas-2-release-banner__err {
	display: block;
	margin-top: 0.5rem;
	color: #b91c1c;
	font-size: 0.8125rem;
}

.bm-kertas-2-teacher-corrections-toggle {
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.bm-kertas-2-corrections-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: #334155;
	cursor: pointer;
}

.bm-kertas-2-corrections-toggle-err {
	display: block;
	margin-top: 0.5rem;
	color: #b91c1c;
	font-size: 0.8125rem;
}

.bm-kertas-2-teacher-adjusted-pill {
	margin-left: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: #e0e7ff;
	color: #3730a3;
	vertical-align: middle;
}

/* Teacher question actions — same look as English .question-edit-btn / .question-corrections-btn */
.bm-kertas-2-question-edit-btn,
.bm-kertas-2-question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.bm-kertas-2-question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.bm-kertas-2-question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.bm-kertas-2-question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.bm-kertas-2-question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.bm-kertas-2-help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.bm-kertas-2-question-corrections-btn .bm-kertas-2-attempts-badge {
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 640px) {
	.bm-kertas-2-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.bm-kertas-2-question-result__header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.5rem;
	}

	.bm-kertas-2-question-edit-btn,
	.bm-kertas-2-question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
}
/* Section headers — title left, score right */
.bm-k2-bahagian-c-marking-report .spm-report-section-header {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

.bm-k2-bahagian-c-marking-report .spm-report-section-header .section-title {
	margin: 0;
	font-size: 17px;
}

.bm-k2-bahagian-c-marking-report .spm-report-section-header .spm-score-label {
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 1;
}



.bm-k2-bahagian-c-marking-report {
	padding: 2rem;
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

.bm-k2-bahagian-c-marking-report__loading {
	color: #475569;
	margin: 0;
}

.bm-k2-bahagian-c-marking-report__empty {
	text-align: center;
	padding: 3rem 2rem;
	background: #f8fafc;
	border-radius: 16px;
	border: 1px dashed #e2e8f0;
}

.bm-k2-bahagian-c-marking-report__icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.bm-k2-bahagian-c-marking-report__empty h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
	color: #1e293b;
}

.bm-k2-bahagian-c-marking-report__empty p {
	margin: 0;
	color: #64748b;
	font-size: 1rem;
}

.bm-k2-bahagian-c-marking-report__retry {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
}

.bm-k2-bahagian-c-marking-report__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	border: 1px solid #c7d2fe;
	background: #eef2ff;
}

.bm-k2-bahagian-c-marking-report__banner--pending {
	border-color: #fcd34d;
	background: #fffbeb;
}

.bm-k2-bahagian-c-marking-report__banner-title {
	font-weight: 700;
	color: #78350f;
}

.bm-k2-bahagian-c-marking-report__banner-sub {
	font-size: 0.9rem;
	color: #92400e;
}

.bm-k2-bahagian-c-marking-report__banner-btn {
	margin-left: auto;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: none;
	background: #4338ca;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.bm-k2-bahagian-c-marking-report__banner-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bm-k2-bahagian-c-marking-report__banner-err {
	flex-basis: 100%;
	color: #b91c1c;
	font-size: 0.9rem;
}

/* Rumusan: Isi + Bahasa only (K1 LP uses two). */
.bm-k2-bahagian-c-marking-report .spm-marks-breakdown.bm-k2-c-marks-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 25px;
}

@media (min-width: 900px) {
	.bm-k2-bahagian-c-marking-report .spm-marks-breakdown.bm-k2-c-marks-breakdown {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bm-k2-bahagian-c-marking-report .bm-k2-c-marks-breakdown .spm-mark-category:nth-child(1) {
	border-left-color: #10b981;
}

.bm-k2-bahagian-c-marking-report .bm-k2-c-marks-breakdown .spm-mark-category:nth-child(1) .spm-mark-display {
	color: #059669;
}

.bm-k2-bahagian-c-marking-report .bm-k2-c-marks-breakdown .spm-mark-category:nth-child(2) {
	border-left-color: #3b82f6;
}

.bm-k2-bahagian-c-marking-report .bm-k2-c-marks-breakdown .spm-mark-category:nth-child(2) .spm-mark-display {
	color: #2563eb;
}

/* Tier text (e.g. ⭐ TERBAIK) in Tahap column */
.bm-k2-c-tier-badge {
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
	padding: 8px 10px;
}

.bm-k2-c-tier-badge .spm-badge-text {
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.bm-k2-c-overall-feedback {
	margin: 0;
	white-space: pre-wrap;
}

/* Isi — tajuk kolum + sel 17px, lebar kolum konsisten */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-section {
	font-size: 17px;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-section .section-title,
.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-section .spm-score-label {
	font-size: 17px;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-section__note {
	margin: 0 0 0.85rem 0;
	font-size: 17px;
	line-height: 1.55;
	color: #64748b;
	font-style: italic;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-fokus-block {
	margin-bottom: 1.35rem;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-fokus-label {
	margin: 0 0 0.55rem 0;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.45;
	color: #1e3a5f;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-isi-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan {
	table-layout: fixed;
	width: 100%;
	min-width: 800px;
	font-size: 17px;
	border-collapse: collapse;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan thead th {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
	padding: 12px 14px;
	white-space: normal;
	vertical-align: bottom;
	color: #1e293b;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-th--center {
	text-align: center;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan tbody td {
	font-size: 17px;
	line-height: 1.55;
	padding: 12px 14px;
	vertical-align: top;
	color: #1e293b;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-td--id {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 17px;
	white-space: nowrap;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-td--center {
	text-align: center;
	white-space: nowrap;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-star {
	color: #b45309;
	font-weight: 700;
	font-size: 17px;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-evidence {
	color: #1e3a5f;
	font-style: italic;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-miss {
	color: #4b5563;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan .bm-k2-bc-isi-dash {
	color: #9ca3af;
}

/* Isi — jadual tiga bahan: zon baris */
.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan tbody .bm-k2-bc-tr-isi-bahan td {
	background: #fafbfc;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan tbody .bm-k2-bc-tr-isi-bahan--fokus2 td {
	background: #f8fafc;
}

.bm-k2-bahagian-c-marking-report .spm-table.bm-k2-bc-table--isi-bahan tbody .bm-k2-bc-tr-isi-bahan:not(.bm-k2-bc-tr-isi-bahan--fokus2) td {
	border-top-width: 2px;
	border-top-color: #cbd5e1;
}

.bm-k2-bc-cell-sub--bahan-continue {
	margin: 0;
	font-weight: 600;
	color: #475569;
}

/* Pendahuluan — two columns: static Akami (no global bounce) + feedback */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 1rem;
	row-gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 12px 14px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 8px;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback__avatar {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-shrink: 0;
	padding-top: 2px;
}

/* Override global lj-sidebar bounce on .lj-marking-modal-akami-host */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback .bm-k2-bc-pendahuluan-feedback__akami-host.lj-marking-modal-akami-host {
	animation: none;
	margin-bottom: 0;
	transform: none;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback .lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 3.7125rem;
	height: 3.7125rem;
	max-width: 3.7125rem;
	max-height: 3.7125rem;
	object-fit: contain;
	object-position: center center;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback .lj-marking-modal-akami-emoji {
	font-size: 2.4975rem;
	line-height: 1;
	display: block;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback__body {
	min-width: 0;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-pendahuluan-feedback__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: #713f12;
}

/* ── Bahasa section ──────────────────────────────────────────────────────── */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-section {
	font-size: 17px;
	line-height: 1.65;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-reasoning {
	font-size: 17px;
	line-height: 1.65;
	color: #1e293b;
	margin-bottom: 0.85rem;
}

/* Dimensions table */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-dims-table {
	min-width: 560px;
	margin-bottom: 0.85rem;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-dims-table th,
.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-dims-table td {
	font-size: 17px;
	line-height: 1.55;
	padding: 0.35rem 0.6rem;
	vertical-align: top;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-dims-table td:nth-child(2) {
	vertical-align: middle;
	line-height: 1.3;
}

.bm-k2-bahagian-c-marking-report col.bm-k2-bc-bahasa-dims-col--tahap {
	width: 132px;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-star-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin-top: 6px;
	line-height: 1;
	flex-wrap: nowrap;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-star {
	font-size: 1.1rem;
	font-weight: 700;
	user-select: none;
	line-height: 1;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-star--empty {
	font-weight: 600;
}

/* Key issue chips */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-issues {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-issues__label {
	font-size: 17px;
	color: #1e293b;
	white-space: nowrap;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-issues__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-chip {
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 0.35rem;
	padding: 0.1rem 0.55rem;
	font-size: 17px;
	color: #92400e;
}

/* Evidence footer */
.bm-k2-bahagian-c-marking-report .bm-k2-bc-bahasa-evidence {
	font-size: 17px;
	color: #475569;
	margin-top: 0.5rem;
	font-style: italic;
}
.bm-k2-bahagian-c-semakan-bahasa {
	padding: 1.25rem 1.5rem 2rem;
	max-width: 720px;
}

.bm-k2-bahagian-c-semakan-bahasa__loading,
.bm-k2-bahagian-c-semakan-bahasa__empty,
.bm-k2-bahagian-c-semakan-bahasa__pending {
	color: #475569;
	font-size: 1rem;
	line-height: 1.5;
}

.bm-k2-bahagian-c-semakan-bahasa__error {
	color: #b91c1c;
}

.bm-k2-bahagian-c-semakan-bahasa__retry {
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
}

.bm-k2-bahagian-c-semakan-bahasa__header {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
	border-radius: 12px;
	border: 1px solid #e2e8f0;
}

.bm-k2-bahagian-c-semakan-bahasa__mark {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.bm-k2-bahagian-c-semakan-bahasa__mark-label {
	font-weight: 600;
	color: #1e293b;
}

.bm-k2-bahagian-c-semakan-bahasa__mark-value {
	font-size: 1.35rem;
	font-weight: 700;
	color: #4338ca;
}

.bm-k2-bahagian-c-semakan-bahasa__section {
	margin-bottom: 1.25rem;
}

.bm-k2-bahagian-c-semakan-bahasa__h {
	margin: 0 0 0.5rem 0;
	font-size: 1rem;
	color: #0f172a;
}

.bm-k2-bahagian-c-semakan-bahasa__text {
	margin: 0;
	color: #334155;
	line-height: 1.6;
	white-space: pre-wrap;
}

.bm-k2-bahagian-c-semakan-bahasa__list {
	margin: 0;
	padding-left: 1.25rem;
	color: #334155;
	line-height: 1.55;
}

.bm-k2-bahagian-c-semakan-bahasa__muted {
	color: #94a3b8;
	font-size: 0.95rem;
	margin: 0;
}
.lj-card--bm-custom-worksheet-tatabahasa {
	background: #ffffff;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-subtitle {
	color: #64748b;
	font-size: calc(0.95rem + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-meta {
	font-size: calc(0.875rem + 2.5px);
	font-weight: 600;
	color: #475569;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-split {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: calc(1em + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-split-row {
	display: flex;
	flex-direction: column;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-split-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	min-width: 0;
}

/* Panduan tatabahasa — grid dua kolum mengisi lebar (serupa Resource App) */
.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-skill-guide {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	box-sizing: border-box;
	padding: 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid #bfdbfe;
	background-color: #ffffff;
	box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);
	margin-bottom: 1.25rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-skill-guide__grid {
	display: grid;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	min-width: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-skill-guide__left {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

@media (max-width: 720px) {
	.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-skill-guide__grid {
		grid-template-columns: 1fr;
	}
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota {
	background: #ffffff;
	border: 1px solid #1b64a1;
	border-radius: 10px;
	padding: 1.15rem 1.2rem;
	margin-bottom: 0;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		0 6px 20px rgba(15, 23, 42, 0.06);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota:hover {
	box-shadow:
		0 4px 12px rgba(27, 100, 161, 0.18),
		0 12px 32px rgba(15, 23, 42, 0.08);
	transform: translateY(-2px);
	border-color: #155a94;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__head {
	margin-bottom: 0.5rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
	margin-bottom: 0.35rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__paras {
	margin: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__para {
	margin: 0 0 0.65rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #1e293b;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__para:last-child {
	margin-bottom: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__sections {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 0.35rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__section {
	margin: 0;
	padding: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__section-title {
	margin: 0 0 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #475569;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__section-body {
	margin: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__section-body .bm-worksheet-nota__paras {
	margin: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-list {
	margin: 0;
	padding-left: 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-item {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #1e293b;
	padding-left: 0.25rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-item::marker {
	color: #64748b;
	font-weight: 600;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-kata {
	margin: 0.85rem 0 0;
	padding: 0.65rem 0.75rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #334155;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-kata-label {
	font-weight: 600;
	margin-right: 0.2rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-kata-sep {
	color: #64748b;
	font-weight: 500;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__fokus {
	font-weight: 700;
	color: #0f172a;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__fokus-pinggir {
	color: #475569;
	font-size: 0.92em;
	white-space: normal;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__contoh-ayat-text {
	white-space: pre-wrap;
	word-break: break-word;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__pasangan {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	width: 100%;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__pasangan-step {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__pasangan-step-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.02em;
	color: #475569;
	margin-bottom: 0.05rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__pasangan-divider {
	align-self: flex-start;
	font-size: 1rem;
	line-height: 1;
	color: #64748b;
	padding: 0.05rem 0;
	user-select: none;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-questions {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 1.1rem 1.15rem;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.05),
		0 4px 14px rgba(15, 23, 42, 0.05);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__number {
	font-weight: 700;
	color: #0f172a;
	font-size: calc(1rem + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__marks {
	font-size: calc(0.85rem + 2.5px);
	color: #64748b;
	font-weight: 600;
}

/* Match English grammar `.worksheet-question__instruction-label`: rule under the full instruction line. */
.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__label {
	font-size: calc(0.9rem + 2.5px);
	color: #000000;
	font-weight: 500;
	margin: 0 0 0.8rem 0;
	padding: 0 0 0.6rem 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid #cbd5e1;
	border-radius: 0;
}

/* Task verb (Isikan / Lengkapkan / Pilih …) — exam-style emphasis, same intent as English grammar MCQ label. */
.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__label-verb {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.18em;
	text-decoration-skip-ink: none;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__text {
	margin: 0 0 0.5rem 0;
	color: #1e293b;
	line-height: 1.6;
	font-size: calc(1rem + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-question__text:last-child {
	margin-bottom: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-answer {
	width: 100%;
	max-width: 100%;
	margin-top: 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 0.75rem;
	font: inherit;
	font-size: calc(1rem + 2.5px);
	box-sizing: border-box;
	resize: vertical;
	background: #ffffff;
	min-height: 84px;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-fillblank__inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-fillblank__input {
	width: 140px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 0.45rem 0.55rem;
	font: inherit;
	font-size: calc(0.95rem + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-fillblank__textarea {
	flex: 1 1 14rem;
	min-width: min(100%, 14rem);
	max-width: 100%;
	min-height: 2.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 0.45rem 0.55rem;
	font: inherit;
	font-size: calc(0.95rem + 2.5px);
	line-height: 1.45;
	resize: vertical;
	box-sizing: border-box;
	background: #ffffff;
	align-self: flex-end;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-fillblank__textarea:read-only {
	background: #f8fafc;
	color: #64748b;
	cursor: default;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__stem-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: calc(1rem + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__stem-segment {
	white-space: pre-wrap;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__stem-blank {
	display: inline;
	padding: 0 0.2em;
	color: #0f172a;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	user-select: none;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	cursor: pointer;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__choice--selected {
	border-color: #3b82f6;
	background: #eff6ff;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__choice-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: #e2e8f0;
	font-weight: 700;
	font-size: max(17px, 0.8rem);
	color: #334155;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-mcq__choice-text {
	font-size: calc(1rem + 2.5px);
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__fields {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: calc(0.95rem + 2.5px);
	line-height: 1.4;
	background: #ffffff;
}

@media (max-width: 900px) {
	.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-nota__sections {
		grid-template-columns: 1fr;
	}
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__input:focus {
	outline: none;
	border-color: #3b82f6;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-identify__input:disabled {
	background: #f8fafc;
	color: #64748b;
	cursor: not-allowed;
}

/* Match English custom worksheet submit row (worksheet-split-submit) */
.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit__btn {
	padding: 10px 24px;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	max-width: 100%;
}

.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit__btn:hover {
	background: #2563eb;
}

.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit__btn:active {
	background: #1d4ed8;
}

.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit__btn:disabled {
	background: #94a3b8;
	cursor: not-allowed;
}

.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit__btn--submitted:disabled {
	background: #334155;
	color: #ffffff;
}

.lj-card--custom-worksheet.lj-card--bm-custom-worksheet-tatabahasa .worksheet-split-submit__error {
	margin-top: 0.5rem;
	color: #dc2626;
	font-size: 0.875rem;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-status {
	font-size: 0.875rem;
	color: #64748b;
}

.lj-card--bm-custom-worksheet-tatabahasa .bm-worksheet-status--ready {
	color: #475569;
}
/**
 * BM custom worksheet (Tatabahasa) — per-soalan laporan pemarkahan.
 * Scoped to BM marking card; BEM: bm-cw-qr*
 */

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__student-questions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr {
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(5, 150, 105, 0.25);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__score--full {
	background: #d1fae5;
	color: #065f46;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__score--partial {
	background: #fef3c7;
	color: #92400e;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__score--zero {
	background: #fee2e2;
	color: #991b1b;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__stem {
	color: #475569;
	line-height: 1.6;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__stem strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__stem-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__stem-blank {
	display: inline;
	padding: 0 0.2em;
	color: #0f172a;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	user-select: none;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__answer strong {
	color: #1e293b;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__answer-text em {
	color: #94a3b8;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-grammar-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-grammar-grid__header {
	font-size: 0.8rem;
	font-weight: 700;
	color: #1e293b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-bottom: 4px;
	border-bottom: 1px solid #cbd5e1;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-grammar-grid__cell {
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #334155;
	min-height: 38px;
	display: flex;
	align-items: center;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-fillblank-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-fillblank-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-fillblank-item__label {
	font-size: 0.8rem;
	font-weight: 700;
	color: #475569;
	min-width: 7.5rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-fillblank-item__value {
	padding: 6px 10px;
	border-radius: 9999px;
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #0f172a;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	border: 1px solid #ddd6fe;
	background: #f5f3ff;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher-col--avatar {
	flex-shrink: 0;
	width: 3.7125rem;
	height: 3.7125rem;
	border-radius: 50%;
	overflow: hidden;
	background: #e9d5ff;
	border: 2px solid #c4b5fd;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher-avatar-ph {
	font-size: 1.5rem;
	font-weight: 700;
	color: #5b21b6;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher-col--body {
	flex: 1;
	min-width: 0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher strong {
	color: #5b21b6;
	display: block;
	margin-bottom: 0.35rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__teacher p {
	margin: 0;
	color: #4c1d95;
	line-height: 1.5;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback--akami {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.65rem 1rem;
	margin-top: 0.25rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback--akami .lj-marking-modal-akami-host {
	animation: none;
	margin-bottom: 0;
	transform: none;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback--akami .lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 3.7125rem;
	height: 3.7125rem;
	max-width: 3.7125rem;
	max-height: 3.7125rem;
	object-fit: contain;
	object-position: center center;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback-col--body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback-head strong {
	color: #854d0e;
	margin-bottom: 0;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__criteria strong {
	color: #1e293b;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-item--awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-item--not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-item--awarded .bm-cw-qr-criteria-icon {
	background: #22c55e;
	color: #fff;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-item--not-awarded .bm-cw-qr-criteria-icon {
	background: #ef4444;
	color: #fff;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-item--hidden {
	opacity: 0.6;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-criteria-hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help {
	margin-top: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__title {
	font-size: 1rem;
	font-weight: 700;
	color: #065f46;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__content {
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__message {
	font-size: 0.9375rem;
	color: #047857;
	line-height: 1.6;
	margin: 0 0 0.75rem 0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__hint {
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	color: #78350f;
	margin-bottom: 0.75rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__hint strong {
	color: #b45309;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__reset {
	font-size: 0.875rem;
	color: #065f46;
	margin: 0 0 0.75rem 0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__cta {
	margin-left: 2.25rem;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 8px;
	background: #10b981;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr-help__cta:hover {
	background: #059669;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action {
	padding: 0.5rem 0.875rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	background: #fff;
	color: #1e293b;
	border: 1px solid #a7f3d0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action--adjust {
	background: #f0fdfa;
	color: #0f766e;
	border: 1px solid #99f6e4;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action--correction {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: #fff;
	border: none;
	font-size: 0.9375rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action--correction:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action--correction-done:disabled {
	background: #16a34a;
	color: #fff;
	opacity: 1;
	cursor: default;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action:hover:not(:disabled) {
	transform: translateY(-1px);
}

@media (max-width: 640px) {
	.lj-card--bm-custom-worksheet-marking .bm-cw-qr__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.lj-card--bm-custom-worksheet-marking .bm-cw-qr__actions {
		flex-direction: column;
		width: 100%;
	}

	.lj-card--bm-custom-worksheet-marking .bm-cw-qr__action {
		width: 100%;
	}
}
.bm-custom-worksheet-correction-mcq__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.bm-custom-worksheet-correction-mcq__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bm-custom-worksheet-correction-mcq__choice:hover {
	border-color: #94a3b8;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.bm-custom-worksheet-correction-mcq__choice input[type='radio'] {
	margin: 0;
}

.bm-custom-worksheet-correction-mcq__choice-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: #f1f5f9;
	font-weight: 600;
	color: #0f172a;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.bm-custom-worksheet-correction-mcq__choice-text {
	color: #1e293b;
	font-size: 0.95rem;
}
/* Modal Overlay */
.adjustment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

/* Modal Container */
.adjustment-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Modal Header */
.adjustment-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adjustment-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.modal-close-btn {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.modal-close-btn:hover {
	background-color: #f1f5f9;
}

/* Modal Body */
.adjustment-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

/* Context Section */
.adjustment-context {
	margin-bottom: 20px;
}

.context-section {
	margin-bottom: 16px;
}

.context-section h4 {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.question-text,
.student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.student-answer {
	border-left-color: #3b82f6;
}

/* Adjustment Fields */
.adjustment-field {
	margin-bottom: 20px;
}

.adjustment-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

/* Current Score Display */
.current-score-display {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-display-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.score-display-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
	display: flex;
	align-items: center;
	gap: 8px;
}

.score-change-indicator {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
	background: #f0f9ff;
	color: #1e40af;
	border: 1px solid #3b82f6;
}

/* Criteria Header with Hint */
.criteria-header-with-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.criteria-hint:hover {
	background-color: #f1f5f9;
}

.hint-icon {
	font-size: 14px;
}

.hint-text {
	font-weight: 500;
}

/* Criteria List */
.criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.criterion-item {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.criterion-label input[type='checkbox'] {
	margin-top: 3px;
	cursor: pointer;
}

.criterion-icon {
	font-size: 14px;
	min-width: 16px;
}

.criterion-text {
	flex: 1;
	font-size: 14px;
	color: #334155;
}

.criterion-comment {
	margin: 8px 0 0 28px;
	font-size: 12px;
	color: #64748b;
	font-style: italic;
}

.criterion-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.criterion-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

/* Feedback Input */
.feedback-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
	min-height: 100px;
	transition: border-color 0.2s;
}

.feedback-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.grade-letter-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
	color: #1e293b;
}

.grade-letter-select:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Save error banner */
.adjustment-modal-error {
	margin: 0 24px 12px;
	padding: 10px 14px;
	border-radius: 6px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 14px;
	line-height: 1.4;
}

/* Modal Footer */
.adjustment-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.btn-secondary,
.btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
}

.btn-secondary {
	background: #f1f5f9;
	color: #475569;
}

.btn-secondary:hover {
	background: #e2e8f0;
}

.btn-primary {
	background: #3b82f6;
	color: white;
}

.btn-primary:hover {
	background: #2563eb;
}

.btn-primary:disabled,
.btn-secondary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
	.adjustment-modal {
		max-height: 95vh;
	}

	.current-score-display {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}

	.criteria-header-with-hint {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}
/**
 * Bahasa Melayu — Custom Worksheet Tatabahasa marking report (ringkasan markah, guru, dsb.).
 * Pecahan soalan pelajar: `BmCustomWorksheetMarkingReportQuestionCard.css` (bm-cw-qr*).
 */

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__loading,
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__empty {
	color: #475569;
	padding: 0.5rem 0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__error {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__error button {
	width: fit-content;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	border: 0;
	background: #2563eb;
	color: #fff;
	cursor: pointer;
}

/* ─── Root layout ─────────────────────────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ─── Release banner ─────────────────────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release {
	background-color: #d1fae5;
	border-radius: 8px;
	padding: 1rem 1.5rem;
	margin-top: 4px;
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-icon {
	font-size: 2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-title {
	font-weight: 600;
	color: #065f46;
	margin-bottom: 0.25rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-subtitle {
	font-size: 0.875rem;
	color: #047857;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-content {
	min-width: 0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release--pending {
	background-color: #fef3c7;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release--pending .bm-cw-marking-report__release-title {
	color: #92400e;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release--pending .bm-cw-marking-report__release-subtitle {
	color: #a16207;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-btn {
	margin-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	border: 0;
	background: #2563eb;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__release-err {
	margin-top: 0.5rem;
	color: #b91c1c;
	font-size: 0.85rem;
}

/* ─── Teacher view shell (English custom worksheet teacher parity) ───── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-view {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-questions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 4px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-questions-title {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* ─── Marks section ───────────────────────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__marks {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__marks-title {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__marks-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	margin-bottom: 24px;
	color: white;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__marks-score {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__marks-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__marks-value {
	font-size: 32px;
	font-weight: 700;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge-icon {
	font-size: 24px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge-text {
	font-size: 16px;
	font-weight: 600;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge--excellent {
	background: rgba(34, 197, 94, 0.2);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge--good {
	background: rgba(59, 130, 246, 0.2);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge--satisfactory {
	background: rgba(245, 158, 11, 0.2);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__badge--needs-improvement {
	background: rgba(239, 68, 68, 0.2);
}

/* ─── Question breakdown (pelajar) ───────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__breakdown {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 20px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__breakdown-title {
	margin: 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

/* ─── Guru: kad soalan (selari dengan English teacher question card) ─── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 2px solid #f1f5f9;
	gap: 16px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-action-btn {
	padding: 0.5rem 1rem;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-action-btn--edit {
	background: #dbeafe;
	color: #1d4ed8;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-action-btn--feedback {
	background: #ede9fe;
	color: #5b21b6;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-action-btn--corrections {
	background: #d1fae5;
	color: #065f46;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-action-btn:hover {
	transform: translateY(-1px);
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-help-badge {
	font-size: 0.875rem;
	line-height: 1;
	margin-left: 0.125rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-attempts-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.4rem;
	border-radius: 10px;
	background: #15803d;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	margin-left: 0.25rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-q-score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-q-score--full {
	background: #d1fae5;
	color: #065f46;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-q-score--partial {
	background: #fef3c7;
	color: #92400e;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-q-score--zero {
	background: #fee2e2;
	color: #991b1b;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card-question,
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card-answer {
	margin-top: 12px;
	color: #475569;
	line-height: 1.6;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card-answer strong {
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-card-answer-text {
	margin-top: 6px;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	font-size: 1.2rem;
	color: #334155;
	white-space: pre-wrap;
}

/* ─── Teacher note row ───────────────────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0.75rem 0 0.5rem;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	border: 1px solid #ddd6fe;
	background: #f5f3ff;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-note-col--avatar {
	flex-shrink: 0;
	width: 3.7125rem;
	height: 3.7125rem;
	border-radius: 50%;
	overflow: hidden;
	background: #e9d5ff;
	border: 2px solid #c4b5fd;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-avatar {
	font-size: 2.4975rem;
	font-weight: 700;
	color: #5b21b6;
	line-height: 1;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-note-col--body {
	flex: 1;
	min-width: 0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-note strong {
	display: block;
	margin-bottom: 0.35rem;
	color: #5b21b6;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-note p {
	margin: 0;
	color: #4c1d95;
	font-size: 1.2rem;
	line-height: 1.5;
}

/* ─── Maklum balas AI (Akami), guru — selari English feedback--akami ─── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 8px;
	font-size: 1.2rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback strong {
	color: #854d0e;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback--akami {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.65rem 1rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback-col--avatar {
	display: flex;
	justify-content: center;
	align-items: center;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback--akami .bm-cw-marking-report__feedback-akami-host {
	animation: none;
	margin-bottom: 0;
	transform: none;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback--akami .lj-marking-modal-akami.lj-chat-avatar-akami {
	width: 3.7125rem;
	height: 3.7125rem;
	max-width: 3.7125rem;
	max-height: 3.7125rem;
	object-fit: contain;
	object-position: center center;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback--akami .lj-marking-modal-akami-emoji {
	font-size: 2.4975rem;
	line-height: 1;
	display: block;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback-col--body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback-head {
	display: block;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback-head strong {
	margin-bottom: 0;
	font-size: 1.2rem;
	color: #854d0e;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
	font-size: 1.2rem;
}

/* ─── Petunjuk penandaan (guru) ───────────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria {
	margin-top: 0.75rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria > strong {
	color: #1e293b;
	font-size: 1.05rem;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-list {
	list-style: none;
	margin: 16px 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-item--awarded {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-item--not-awarded {
	background: #fef2f2;
	border-color: #fecaca;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-item--hidden {
	opacity: 0.6;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.lj-card--bm-custom-worksheet-marking
	.bm-cw-marking-report__teacher-criteria-item--awarded
	.bm-cw-marking-report__teacher-criteria-icon {
	background: #22c55e;
	color: #fff;
}

.lj-card--bm-custom-worksheet-marking
	.bm-cw-marking-report__teacher-criteria-item--not-awarded
	.bm-cw-marking-report__teacher-criteria-icon {
	background: #ef4444;
	color: #fff;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-header-right {
		flex-direction: column;
		align-items: flex-end;
		width: 100%;
		gap: 0.5rem;
	}

	.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-action-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ─── Overall feedback ───────────────────────────────────────────────── */
.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__overall {
	padding: 20px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 12px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__overall h3 {
	margin: 0 0 12px 0;
	color: #0c4a6e;
	font-size: 18px;
}

.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__overall p {
	margin: 0;
	color: #0369a1;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-note-col--avatar {
		width: 3.5rem;
		height: 3.5rem;
	}

	.lj-card--bm-custom-worksheet-marking .bm-cw-marking-report__teacher-avatar {
		font-size: 2rem;
	}
}
/* Sejarah chapter hero — own file; colours evoke manuskrip/warisan (bukan English/Biology) */

.lj-sejarah-banner {
	position: relative;
	overflow: hidden;
	color: #1c1410;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

.lj-sejarah-banner__bg {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	background: linear-gradient(
		135deg,
		#fff7ed 0%,
		#ffedd5 38%,
		#fecaca 72%,
		#fee2e2 100%
	);
	animation: lj-sejarah-banner-bg 14s ease-in-out infinite;
	z-index: -2;
}

@keyframes lj-sejarah-banner-bg {
	0% {
		filter: hue-rotate(0deg) saturate(108%);
	}
	50% {
		filter: hue-rotate(-12deg) saturate(118%);
	}
	100% {
		filter: hue-rotate(0deg) saturate(108%);
	}
}

.lj-sejarah-banner__shapes {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	z-index: -1;
}

.lj-sejarah-banner__shape {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(185, 28, 28, 0.22), rgba(185, 28, 28, 0) 72%);
	animation: lj-sejarah-banner-float 9s ease-in-out infinite;
}

.lj-sejarah-banner__shape:nth-child(1) {
	top: -36px;
	left: -32px;
	animation-delay: 0.15s;
}
.lj-sejarah-banner__shape:nth-child(2) {
	bottom: -30px;
	right: -28px;
	animation-delay: 0.85s;
}
.lj-sejarah-banner__shape:nth-child(3) {
	top: 18%;
	right: 20%;
	width: 120px;
	height: 120px;
	animation-delay: 1.5s;
}

@keyframes lj-sejarah-banner-float {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-10px) scale(1.03);
	}
}

.lj-sejarah-banner__content {
	text-align: center;
}

.lj-sejarah-banner__top {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	color: #451a03;
	opacity: 0.96;
	transform: translateY(6px);
	animation: lj-sejarah-banner-slide-up 0.6s ease-out 0.05s both;
}

.lj-sejarah-banner__top span {
	background: linear-gradient(90deg, #9a3412, #7f1d1d);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lj-sejarah-banner__main {
	margin: 6px 0 4px 0;
	font-size: clamp(26px, 3.6vw, 40px);
	line-height: 1.12;
	font-weight: 800;
	background: linear-gradient(90deg, #b45309, #b91c1c, #7c2d12);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lj-sejarah-banner-fade-in 0.55s ease-out 0.15s both;
}

.lj-sejarah-banner__subtitle {
	margin-top: 8px;
	color: #431407;
	opacity: 0.95;
	max-width: 36em;
	margin-left: auto;
	margin-right: auto;
}

@keyframes lj-sejarah-banner-slide-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lj-sejarah-banner-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Match other subjects’ banner card chrome when variant="banner" */
.lj-card.lj-card--banner {
	border: 1px solid rgba(185, 28, 28, 0.2);
	box-shadow: 0 20px 45px -28px rgba(127, 29, 29, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.lj-sejarah-banner__bg,
	.lj-sejarah-banner__shape {
		animation: none;
	}
	.lj-sejarah-banner__top,
	.lj-sejarah-banner__main {
		animation: none;
		opacity: 1;
		transform: none;
	}
}
/* Scoped Sejarah content layouts (Bab 1 templates) */
.sj-content {
	font-size: 1rem;
	line-height: 1.6;
	color: #1e293b;
}

.sj-content__intro {
	margin: 0 0 1rem;
}

.sj-hub {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-hub__center {
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	color: #0f172a;
	padding: 0.75rem 1rem;
	background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);
	border-radius: 12px;
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.sj-hub__branches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.sj-hub__branch {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	background: #f8fafc;
}

.sj-hub__branch h4 {
	margin: 0 0 8px;
	font-size: 0.95rem;
	color: #b91c1c;
}

.sj-hub__branch p {
	margin: 0;
	font-size: 0.9rem;
}

.sj-hub__branch-html p:first-child {
	margin-top: 0;
}
.sj-hub__branch-html p:last-child {
	margin-bottom: 0;
}

.sj-step-body p:first-child {
	margin-top: 0;
}
.sj-step-body p:last-child {
	margin-bottom: 0;
}

.sj-profile__layout {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sj-profile__layout--with-portrait {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

@media (max-width: 560px) {
	.sj-profile__layout--with-portrait {
		flex-direction: column;
		align-items: center;
	}
}

.sj-profile__portrait {
	margin: 0;
	flex: 0 0 auto;
}

.sj-profile__portrait-img {
	width: 132px;
	max-width: min(100%, 200px);
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	object-fit: cover;
	display: block;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.sj-profile__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sj-profile__quote {
	margin: 0;
	padding: 12px 14px;
	background: #fffbeb;
	border-left: 4px solid #f59e0b;
	border-radius: 0 10px 10px 0;
	font-style: italic;
}

.sj-profile__list {
	margin: 0;
	padding-left: 1.25rem;
}

.sj-profile__list .sj-rich {
	display: inline;
}

.sj-profile__quote .sj-rich > p:first-child {
	margin-top: 0;
}
.sj-profile__quote .sj-rich > p:last-child {
	margin-bottom: 0;
}

.sj-panel {
	padding: 14px 16px;
	border-radius: 12px;
	background: #eff6ff;
	border: 1px solid rgba(59, 130, 246, 0.25);
	margin-bottom: 12px;
}

.sj-panel:last-child {
	margin-bottom: 0;
}

.sj-panel--amber {
	background: #fffbeb;
	border-color: rgba(245, 158, 11, 0.35);
}

.sj-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 640px) {
	.sj-compare {
		grid-template-columns: 1fr;
	}
}

.sj-compare__col {
	padding: 14px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, 0.4);
}

.sj-compare__col--a {
	border-top: 3px solid #7c3aed;
}

.sj-compare__col--b {
	border-top: 3px solid #0ea5e9;
}

.sj-compare__title {
	margin: 0 0 8px;
	font-size: 0.95rem;
	font-weight: 700;
}

.sj-spotlight {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sj-spotlight__img {
	max-width: 100%;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.sj-spotlight__caption {
	font-size: 0.85rem;
	color: #64748b;
	margin: 0;
}

.sj-spotlight__figures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}

@media (max-width: 640px) {
	.sj-spotlight__figures {
		grid-template-columns: 1fr;
	}
}

.sj-spotlight__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	align-items: center;
	text-align: center;
}

.sj-spotlight__figure-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
	width: 100%;
}

.sj-spotlight__figure-img {
	width: auto;
	max-width: 100%;
	max-height: 160px;
	height: auto;
	display: block;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	object-fit: contain;
	object-position: center;
}

.sj-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sj-step {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.sj-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #1e293b;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	margin-right: 8px;
}

.sj-step h4 {
	margin: 0 0 6px;
	font-size: 0.95rem;
}

.sj-step p {
	margin: 0;
	font-size: 0.9rem;
}

.sj-dyk {
	padding: 12px 14px;
	border-radius: 12px;
	background: #f0fdf4;
	border: 1px solid rgba(34, 197, 94, 0.35);
}

.sj-glossary {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sj-glossary li {
	padding: 10px 12px;
	background: #f1f5f9;
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.35);
}

.sj-glossary dt {
	font-weight: 700;
	color: #0f172a;
}

.sj-glossary dd {
	margin: 4px 0 0;
}

.sj-letters {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sj-letter {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding: 12px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid rgba(148, 163, 184, 0.35);
}

.sj-letter__badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #6366f1;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1rem;
}

.sj-rich {
	margin: 0;
}

.sj-rich p:first-child {
	margin-top: 0;
}

.sj-rich p:last-child {
	margin-bottom: 0;
}

.sj-activity__field {
	margin-bottom: 14px;
}

.sj-activity__field label {
	display: block;
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 6px;
	color: #334155;
}

.sj-activity__field input,
.sj-activity__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.6);
	font-family: inherit;
	font-size: 0.95rem;
}

.sj-activity__field textarea {
	min-height: 72px;
	resize: vertical;
}

.sj-activity__actions {
	margin-top: 16px;
}

.sj-btn-complete {
	appearance: none;
	padding: 10px 18px;
	border-radius: 10px;
	border: none;
	background: #0f766e;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
}

.sj-btn-complete:hover {
	background: #115e59;
}

.sj-btn-complete:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sj-labeled__labels {
	margin: 0;
	padding-left: 1.2rem;
}

.sj-fallback {
	margin: 0;
	color: #64748b;
}
/* Sejarah SPM Kertas 1 (Objektif) — Akami marking progress modal (layout aligned with english-paper2-marking-modal, Sejarah-specific BEM) */

.sj-k1-obj-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: sj-k1-obj-marking-fadeIn 0.3s ease;
}

@keyframes sj-k1-obj-marking-fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.sj-k1-obj-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: sj-k1-obj-marking-slideUp 0.4s ease;
}

@keyframes sj-k1-obj-marking-slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sj-k1-obj-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.sj-k1-obj-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.sj-k1-obj-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.sj-k1-obj-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.sj-k1-obj-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.sj-k1-obj-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.sj-k1-obj-marking-modal__phases {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}

.sj-k1-obj-marking-modal__phases .sj-k1-obj-marking-modal__phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.sj-k1-obj-marking-modal__phases .sj-k1-obj-marking-modal__phase--active {
	opacity: 1;
}

.sj-k1-obj-marking-modal__phases .sj-k1-obj-marking-modal__phase--complete {
	opacity: 1;
}

.sj-k1-obj-marking-modal__phase-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.sj-k1-obj-marking-modal__phases .sj-k1-obj-marking-modal__phase--active .sj-k1-obj-marking-modal__phase-icon {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: sj-k1-obj-marking-pulse 2s ease-in-out infinite;
}

.sj-k1-obj-marking-modal__phases .sj-k1-obj-marking-modal__phase--complete .sj-k1-obj-marking-modal__phase-icon {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes sj-k1-obj-marking-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.sj-k1-obj-marking-modal__phase-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

.sj-k1-obj-marking-modal__hint {
	font-size: 0.875rem;
	color: #475569;
	margin: 2rem 0 0 0;
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #22c55e;
}

.sj-k1-obj-marking-modal__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1.5rem;
}

.sj-k1-obj-marking-modal__spinner .lj-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(15, 23, 42, 0.1);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: sj-k1-obj-marking-spin 1s linear infinite;
}

@keyframes sj-k1-obj-marking-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 768px) {
	.sj-k1-obj-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}

	.sj-k1-obj-marking-modal__title {
		font-size: 1.25rem;
	}

	.sj-k1-obj-marking-modal__phase-icon {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}

	.sj-k1-obj-marking-modal__phase-label {
		font-size: 0.7rem;
	}
}
.sj-k1-obj__empty {
	margin: 0;
	color: #64748b;
	font-size: 1.1rem;
	line-height: 1.5;
}

.sj-k1-obj__intro {
	margin: 0 0 1.25rem;
	color: #334155;
	font-size: 1.1rem;
	line-height: 1.5;
}

.sj-k1-obj__pager-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	border-radius: 8px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	font-size: 1.1rem;
	color: #475569;
}

.sj-k1-obj__pager-range {
	font-weight: 600;
	color: #0f172a;
}

.sj-k1-obj__pager-part {
	color: #64748b;
}

.sj-k1-obj__pager-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

.sj-k1-obj__questions {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.sj-k1-obj__q {
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #e2e8f0;
}

.sj-k1-obj__q:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.sj-k1-obj__q-head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.sj-k1-obj__q-num {
	font-weight: 700;
	color: #0f172a;
	font-size: 1.1rem;
}

.sj-k1-obj__intro-text {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	color: #334155;
	line-height: 1.6;
}

.sj-k1-obj__stimulus {
	margin: 0.5rem 0 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #f8fafc;
	font-size: 1.1rem;
	line-height: 1.65;
	color: #334155;
}

.sj-k1-obj__stimulus-lines {
	margin: 0;
	padding-left: 1.25rem;
}

.sj-k1-obj__stimulus-lines li {
	margin-bottom: 0.25rem;
}

.sj-k1-obj__table-wrap {
	overflow-x: auto;
}

.sj-k1-obj__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1rem;
}

.sj-k1-obj__table th,
.sj-k1-obj__table td {
	border: 1px solid #94a3b8;
	padding: 0.35rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.sj-k1-obj__table th {
	background: #e2e8f0;
}

.sj-k1-obj__diagram-img-wrap {
	margin-bottom: 0.75rem;
}

.sj-k1-obj__diagram-img {
	display: block;
	max-width: min(100%, 280px);
	max-height: 220px;
	object-fit: contain;
	border-radius: 6px;
	border: 1px solid #94a3b8;
}

.sj-k1-obj__diagram-pre {
	margin: 0;
	white-space: pre-wrap;
	font-family: ui-monospace, monospace;
	font-size: 1.1rem;
	color: #334155;
}

.sj-k1-obj__roman {
	margin: 0.5rem 0 0.75rem;
	padding-left: 1.25rem;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #334155;
}

.sj-k1-obj__stem {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	color: #0f172a;
	line-height: 1.55;
}

.sj-k1-obj__choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k1-obj__choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1.45;
	transition: background 0.15s, border-color 0.15s;
}

.sj-k1-obj__choice:hover:not(.sj-k1-obj__choice--selected) {
	background: #f8fafc;
}

.sj-k1-obj__choice input {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.sj-k1-obj__choice--selected {
	border-color: #3b82f6;
	background: #eff6ff;
}

.sj-k1-obj__scroll-anchor {
	scroll-margin-top: 0.75rem;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.sj-k1-obj__choice--muted {
	opacity: 0.55;
	border-color: #e2e8f0;
	background: #f8fafc;
}

.sj-k1-obj__choice--answer-ok {
	border-color: #0d9488;
	background: #ecfdf5;
}

.sj-k1-obj__choice--wrong {
	border-color: #ef4444;
	background: #fef2f2;
}

.sj-k1-obj__letter {
	font-weight: 700;
	color: #475569;
	width: 1.25rem;
	flex-shrink: 0;
}

.sj-k1-obj__opt-text {
	flex: 1;
	color: #1e293b;
}

.sj-k1-obj__explain {
	margin: 0.75rem 0 0;
	font-size: 1.1rem;
	color: #475569;
	line-height: 1.45;
}

.sj-k1-obj__footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
}

.sj-k1-obj__btn {
	appearance: none;
	font: inherit;
	font-size: 1.1rem;
	padding: 0.55rem 1.25rem;
	border-radius: 8px;
	border: none;
	background: #0f766e;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
}

.sj-k1-obj__btn:hover:not(:disabled) {
	background: #0d9488;
}

.sj-k1-obj__btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sj-k1-obj__btn:disabled[aria-busy='true'] {
	opacity: 0.75;
	cursor: wait;
}

.sj-k1-obj__btn--secondary {
	background: #fff;
	color: #0f172a;
	border: 1px solid #cbd5e1;
}

.sj-k1-obj__btn--secondary:hover:not(:disabled) {
	background: #f8fafc;
	border-color: #94a3b8;
}

.sj-k1-obj__btn--secondary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sj-k1-obj__btn--next {
	background: #0f766e;
	color: #fff;
}

.sj-k1-obj__btn--next:hover {
	background: #0d9488;
}

.sj-k1-obj__footer-hint {
	margin: 0;
	font-size: 1.1rem;
	color: #64748b;
	line-height: 1.5;
}

.sj-k1-obj__footer-hint--complete {
	margin-top: 0.65rem;
	color: #92400e;
}

.sj-k1-obj__footer-hint--error {
	margin-top: 0.65rem;
	color: #b91c1c;
	font-weight: 600;
}

.sj-k1-obj__score-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 1.1rem;
}

.sj-k1-obj__report-hint {
	margin: 0.75rem 0 0;
	font-size: 1.1rem;
	color: #64748b;
	line-height: 1.45;
}

.sj-k1-obj__score {
	font-size: 1.1rem;
	color: #0f172a;
}
/**
 * Sejarah SPM K1 — modal pembetulan pelajar.
 * Rujuk susun English StudentCorrectionModal / SpmPaper1Part3MCQSplit; kelas scoped sj-k1-student-corr-*.
 */

.sj-k1-student-corr-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10050;
	padding: 20px;
	backdrop-filter: blur(2px);
}

.sj-k1-student-corr-modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 95%;
	max-width: 1400px;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sj-k1-student-corr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #2079b0;
	flex-shrink: 0;
}

.sj-k1-student-corr-modal-title-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
}

.sj-k1-student-corr-title {
	margin: 0;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.sj-k1-student-corr-criteria-progress-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.sj-k1-student-corr-close-btn {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
	flex-shrink: 0;
}

.sj-k1-student-corr-close-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.sj-k1-student-corr-body-split {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

/* LEFT — konteks / petikan */
.sj-k1-student-corr-passage-panel {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	border-right: 2px solid #e2e8f0;
	background: #f8fafc;
	overflow: hidden;
}

.sj-k1-student-corr-passage-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	background: #f1f5f9;
	flex-shrink: 0;
}

.sj-k1-student-corr-passage-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.sj-k1-student-corr-passage-header h4 {
	margin: 0;
	color: #334155;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.sj-k1-student-corr-passage-item h5 {
	margin: 0 0 0.75rem 0;
	color: #1e293b;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.sj-k1-student-corr-passage-prose {
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.75;
}

.sj-k1-student-corr-passage-prose p {
	margin: 0 0 1rem 0;
}

.sj-k1-student-corr-passage-prose p:last-child {
	margin-bottom: 0;
}

.sj-k1-student-corr-passage-content {
	flex: 1;
	padding: 1.5rem;
	overflow-y: auto;
	line-height: 1.8;
}

.sj-k1-student-corr-passage-list {
	margin: 0;
	padding: 0;
}

.sj-k1-student-corr-passage-item {
	margin: 0;
}

.sj-k1-student-corr-passage-fallback__stem {
	margin: 0;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.75;
	text-align: justify;
}

.sj-k1-student-corr-stimulus {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k1-student-corr-stimulus__topic {
	margin: 0;
	font-size: 0.9rem;
	color: #0f172a;
}

.sj-k1-student-corr-stimulus__intro {
	margin: 0;
	font-size: 0.9375rem;
	color: #334155;
}

.sj-k1-student-corr-stimulus__lines {
	margin: 0;
	padding-left: 1.25rem;
	color: #1e293b;
	font-size: 0.9375rem;
}

.sj-k1-student-corr-stimulus__table-wrap {
	overflow-x: auto;
}

.sj-k1-student-corr-stimulus__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	overflow: hidden;
}

.sj-k1-student-corr-stimulus__table th,
.sj-k1-student-corr-stimulus__table td {
	padding: 0.5rem 0.6rem;
	border: 1px solid #e2e8f0;
	text-align: left;
}

.sj-k1-student-corr-stimulus__table th {
	background: #e2e8f0;
	font-weight: 600;
}

.sj-k1-student-corr-stimulus__diagram {
	padding: 0.75rem;
	background: #fff;
	border: 1px dashed #94a3b8;
	border-radius: 8px;
	font-size: 0.875rem;
}

.sj-k1-student-corr-stimulus__statements {
	margin: 0;
	padding-left: 1.5rem;
}

/* Selaras .sj-k1-obj__roman + type="I" — pernyataan I, II, III, IV (bukan 1–4). */
.sj-k1-student-corr-stimulus__statements[type='I'] {
	list-style-type: upper-roman;
}

.sj-k1-student-corr-stimulus__stem strong {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sj-k1-student-corr-stimulus__stem p {
	margin: 0;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* RIGHT — pembetulan */
.sj-k1-student-corr-correction-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	min-width: 0;
}

.sj-k1-student-corr-tabs,
.sj-k1-student-corr-correction-tabs {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem 0 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #f8fafc;
	flex-shrink: 0;
}

.sj-k1-student-corr-correction-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
	transition: all 0.2s;
	position: relative;
	top: 2px;
}

.sj-k1-student-corr-correction-tab:hover {
	color: #334155;
	background: rgba(59, 130, 246, 0.05);
}

.sj-k1-student-corr-correction-tab.active {
	color: #3b82f6;
	border-bottom-color: #3b82f6;
	background: #fff;
}

.sj-k1-student-corr-correction-tab-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.sj-k1-student-corr-correction-tab-label {
	font-size: 0.875rem;
}

.sj-k1-student-corr-tab-content,
.sj-k1-student-corr-correction-tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
	min-height: 0;
}

.sj-k1-student-corr-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k1-student-corr-tab-panel--history {
	gap: 1rem;
}

.sj-k1-student-corr-context-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k1-student-corr-context-item h5 {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k1-student-corr-question-text-display,
.sj-k1-student-corr-original-answer-display {
	margin: 0;
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
}

.sj-k1-student-corr-original-answer-display {
	border-left-color: #3b82f6;
	background: #eff6ff;
}

.sj-k1-student-corr-feedback-display {
	margin: 0;
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #92400e;
}

.sj-k1-student-corr-criteria-status-section {
	margin-bottom: 0.5rem;
	padding: 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
}

.sj-k1-student-corr-criteria-status-section--met {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.sj-k1-student-corr-criteria-status-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #b91c1c;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k1-student-corr-criteria-status-section--met h5 {
	color: #15803d;
}

.sj-k1-student-corr-criteria-status-list {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k1-student-corr-criterion {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: #fff;
	border-radius: 4px;
}

.sj-k1-student-corr-criterion--met {
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.sj-k1-student-corr-criterion--not {
	color: #dc2626;
	border-left: 3px solid #ef4444;
}

.sj-k1-student-corr-criterion-icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.sj-k1-student-corr-criterion-text {
	flex: 1;
}

.sj-k1-student-corr-no-criteria-met-message {
	margin: 0;
	font-size: 0.875rem;
	color: #92400e;
	line-height: 1.5;
}

.sj-k1-student-corr-form-section {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 2px solid #e2e8f0;
}

.sj-k1-student-corr-form-section > h5:first-child {
	margin: 0 0 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
	text-transform: none;
	letter-spacing: normal;
}

.sj-k1-student-corr-mcq-section {
	margin-top: 0.25rem;
}

/* MCQ — cerminan SpmPaper1Part3 / part3-mcq */
.sj-k1-k1-mcq-corr__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.sj-k1-k1-mcq-corr__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sj-k1-k1-mcq-corr__choice:hover {
	border-color: #94a3b8;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.sj-k1-k1-mcq-corr__choice--selected,
.sj-k1-k1-mcq-corr__choice:has(input:checked) {
	border-color: #3b82f6;
	background: #eff6ff;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.sj-k1-k1-mcq-corr__choice input[type='radio'] {
	margin: 0;
	flex-shrink: 0;
}

.sj-k1-k1-mcq-corr__choice-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: #f1f5f9;
	font-weight: 600;
	color: #0f172a;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.sj-k1-k1-mcq-corr__choice--selected .sj-k1-k1-mcq-corr__choice-letter,
.sj-k1-k1-mcq-corr__choice:has(input:checked) .sj-k1-k1-mcq-corr__choice-letter {
	background: #3b82f6;
	color: #fff;
}

.sj-k1-k1-mcq-corr__choice-text {
	color: #1e293b;
	font-size: 0.95rem;
	flex: 1;
	line-height: 1.45;
}

.sj-k1-student-corr-form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.sj-k1-student-corr-word-hint {
	font-size: 0.875rem;
	color: #16a34a;
	font-weight: 500;
}

.sj-k1-student-corr-word-hint--insufficient {
	color: #dc2626;
}

.sj-k1-student-corr-button-group {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.sj-k1-student-corr-btn-need-help {
	padding: 0.625rem 1.25rem;
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.sj-k1-student-corr-btn-need-help:hover:not(:disabled) {
	background: #fde68a;
	transform: translateY(-1px);
}

.sj-k1-student-corr-btn-submit {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sj-k1-student-corr-btn-submit:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sj-k1-student-corr-btn-need-help:disabled,
.sj-k1-student-corr-btn-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.sj-k1-student-corr-history-empty {
	margin: 0;
	padding: 0.75rem 1rem;
	color: #64748b;
	font-size: 0.9375rem;
	line-height: 1.55;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
}

/* History — laci percubaan (rujuk English StudentCorrectionModal attempt-drawer) */
.sj-k1-student-corr-attempt-drawer {
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 1rem;
}

.sj-k1-student-corr-attempt-drawer:last-child {
	margin-bottom: 0;
}

.sj-k1-student-corr-attempt-drawer-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.sj-k1-student-corr-attempt-drawer-summary::-webkit-details-marker {
	display: none;
}

.sj-k1-student-corr-attempt-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.sj-k1-student-corr-attempt-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.sj-k1-student-corr-attempt-badge--original {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.sj-k1-student-corr-attempt-title {
	flex: 1;
	min-width: 120px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
}

.sj-k1-student-corr-attempt-criteria-badge {
	padding: 0.25rem 0.625rem;
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.sj-k1-student-corr-attempt-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
	margin-left: auto;
}

.sj-k1-student-corr-attempt-drawer[open] .sj-k1-student-corr-attempt-toggle {
	transform: rotate(180deg);
}

.sj-k1-student-corr-attempt-drawer-content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
}

.sj-k1-student-corr-attempt-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k1-student-corr-attempt-section h6 {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k1-student-corr-attempt-text {
	margin: 0;
	padding: 0.75rem;
	background: #fff;
	border-left: 3px solid #cbd5e1;
	border-radius: 4px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.sj-k1-student-corr-attempt-feedback-text {
	margin: 0;
	padding: 0.75rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 4px;
	color: #92400e;
	font-size: 0.875rem;
	line-height: 1.6;
}

.sj-k1-student-corr-attempt-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k1-student-corr-attempt-criteria-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: #fff;
	border-radius: 4px;
}

.sj-k1-student-corr-attempt-criteria-list li.met {
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.sj-k1-student-corr-attempt-criteria-list li .icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.sj-k1-student-corr-attempt-drawer .sj-k1-student-corr-no-criteria-met-message {
	margin: 0;
	padding: 0.75rem;
	background: #fff;
	border: 1px dashed #cbd5e1;
	border-radius: 4px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

@media (max-width: 900px) {
	.sj-k1-student-corr-modal {
		height: 92vh;
		max-width: 100%;
	}

	.sj-k1-student-corr-body-split {
		flex-direction: column;
		overflow-y: auto;
	}

	.sj-k1-student-corr-passage-panel {
		flex: none;
		max-height: 40vh;
		border-right: none;
		border-bottom: 2px solid #e2e8f0;
	}

	.sj-k1-student-corr-correction-panel {
		flex: 1;
		min-height: 45vh;
	}
}

/* —— Bantuan guru (server) —— */
.sj-k1-student-corr-help-pending-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
	color: #92400e;
	font-weight: 600;
	font-size: 0.875rem;
}

.sj-k1-student-corr-help-pending-banner__icon {
	font-size: 1.25rem;
	line-height: 1;
}

.sj-k1-student-corr-guru-help-notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 1rem;
	margin-bottom: 1rem;
	text-align: left;
	font: inherit;
	font-weight: 600;
	color: #065f46;
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border: 2px solid #10b981;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sj-k1-student-corr-guru-help-notice:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.sj-k1-student-corr-guru-help-notice__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.sj-k1-student-corr-guru-help-notice__text {
	flex: 1;
}

.sj-k1-student-corr-guru-help-notice__arrow {
	font-size: 1.25rem;
	color: #059669;
}

.sj-k1-student-corr-tab-panel--guru-help {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k1-student-corr-guru-help-panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sj-k1-student-corr-guru-help-panel__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: 12px;
}

.sj-k1-student-corr-guru-help-panel__avatar {
	font-size: 2.25rem;
	line-height: 1;
}

.sj-k1-student-corr-guru-help-panel__meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.sj-k1-student-corr-guru-help-panel__title {
	margin: 0;
	color: #92400e;
	font-size: 1.125rem;
	font-weight: 700;
}

.sj-k1-student-corr-guru-help-panel__date {
	font-size: 0.8125rem;
	color: #b45309;
	font-weight: 500;
}

.sj-k1-student-corr-guru-help-panel__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k1-student-corr-guru-help-panel__block-title {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k1-student-corr-guru-help-panel__message {
	padding: 1rem;
	background: #f8fafc;
	border-left: 4px solid #2079b0;
	border-radius: 6px;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.sj-k1-student-corr-guru-help-panel__block--hint {
	background: #fffbeb;
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid #fbbf24;
}

.sj-k1-student-corr-guru-help-panel__hint {
	padding: 0.75rem 1rem;
	background: #fff;
	border-left: 4px solid #f59e0b;
	border-radius: 6px;
	color: #78350f;
	font-size: 0.9375rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

.sj-k1-student-corr-guru-help-panel__reset-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	background: #e0f2fe;
	border: 1px solid #38bdf8;
	border-radius: 8px;
	color: #0c4a6e;
	font-size: 0.875rem;
	font-weight: 500;
}

.sj-k1-student-corr-guru-help-panel__actions {
	padding-top: 0.5rem;
}

.sj-k1-student-corr-guru-help-panel__back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #2079b0;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.sj-k1-student-corr-guru-help-panel__back-btn:hover {
	filter: brightness(1.05);
}
/* Sejarah SPM K1 — modal ubah markah guru (nama kelas tersendiri, corak seperti English Paper 1) */

.sj-k1-qam-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

.sj-k1-qam-modal {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

.sj-k1-qam-header {
	padding: 18px 22px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sj-k1-qam-header h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 650;
	color: #0f172a;
}

.sj-k1-qam-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #64748b;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
}
.sj-k1-qam-close:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.sj-k1-qam-body {
	padding: 20px 22px;
	overflow-y: auto;
	flex: 1;
}

.sj-k1-qam-context {
	margin-bottom: 18px;
}

.sj-k1-qam-section {
	margin-bottom: 14px;
}

.sj-k1-qam-section h4 {
	font-size: 0.72rem;
	font-weight: 700;
	color: #64748b;
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sj-k1-qam-q,
.sj-k1-qam-ans {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #334155;
	margin: 0;
	padding: 10px 12px;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #cbd5e1;
	word-break: break-word;
}

.sj-k1-qam-ans {
	border-left-color: #2563eb;
}

.sj-k1-qam-score {
	margin-bottom: 18px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}

.sj-k1-qam-score-label {
	font-size: 0.8rem;
	color: #475569;
	margin-bottom: 8px;
	font-weight: 600;
}

.sj-k1-qam-score-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.sj-k1-qam-step {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	background: #fff;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	color: #0f172a;
	transition: background 0.15s, border-color 0.15s;
}
.sj-k1-qam-step:hover:not(:disabled) {
	background: #e0f2fe;
	border-color: #38bdf8;
}
.sj-k1-qam-step:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sj-k1-qam-score-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	min-width: 160px;
	text-align: center;
}

.sj-k1-qam-delta {
	font-size: 0.95rem;
	font-weight: 600;
	color: #b45309;
	margin-left: 6px;
}

.sj-k1-qam-hint {
	margin: 10px 0 0;
	font-size: 0.78rem;
	color: #64748b;
	text-align: center;
}

.sj-k1-qam-field {
	margin-bottom: 18px;
}

.sj-k1-qam-crit-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.sj-k1-qam-tip {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: #64748b;
	max-width: 55%;
}

.sj-k1-qam-crit-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sj-k1-qam-crit-item {
	border-radius: 8px;
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	background: #fff;
}

.sj-k1-qam-crit-item--on {
	border-color: #86efac;
	background: #f0fdf4;
}

.sj-k1-qam-crit-item--off {
	border-color: #fecaca;
	background: #fef2f2;
}

.sj-k1-qam-crit-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 0.88rem;
	color: #1e293b;
	margin: 0;
}

.sj-k1-qam-crit-label input {
	margin-top: 3px;
}

.sj-k1-qam-crit-icon {
	font-weight: 700;
	flex-shrink: 0;
}

.sj-k1-qam-crit-note {
	margin: 6px 0 0 26px;
	font-size: 0.82rem;
	color: #64748b;
}

.sj-k1-qam-opt {
	font-weight: 400;
	color: #64748b;
	font-size: 0.85rem;
}

.sj-k1-qam-textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 0.9rem;
	font-family: inherit;
	resize: vertical;
	min-height: 96px;
}

.sj-k1-qam-footer {
	padding: 14px 22px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.sj-k1-qam-btn {
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
}
.sj-k1-qam-btn--secondary {
	background: #f1f5f9;
	color: #334155;
}
.sj-k1-qam-btn--secondary:hover:not(:disabled) {
	background: #e2e8f0;
}
.sj-k1-qam-btn--primary {
	background: #2563eb;
	color: #fff;
}
.sj-k1-qam-btn--primary:hover:not(:disabled) {
	background: #1d4ed8;
}
.sj-k1-qam-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
/**
 * Sejarah SPM Kertas 1 — blok soalan apabila pembetulan mencapai markah penuh.
 * (Penamaan sj-k1-mr-corr-done*, bukan kelas English SPM.)
 */

/* Petikan “melalui pembetulan” — gaya serupa BM K2 */
.sj-k1-mr__corr-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-right: 0.35rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

.sj-k1-mr-corr-done {
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sj-k1-mr-corr-done:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sj-k1-mr-corr-done__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
	gap: 8px;
	flex-wrap: wrap;
}

.sj-k1-mr-corr-done__header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
}

/* Selaras dengan .sj-k1-mr__q-pill */
.sj-k1-mr-corr-done__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.sj-k1-mr-corr-done__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

.sj-k1-mr-corr-done__score.full {
	background: #d1fae5;
	color: #065f46;
}

.sj-k1-mr-corr-done__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.sj-k1-mr-corr-done__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

.sj-k1-mr-corr-done__question {
	color: #475569;
	line-height: 1.6;
}

.sj-k1-mr-corr-done__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

.sj-k1-mr-corr-done__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k1-mr-corr-done__answer strong {
	color: #1e293b;
}

.sj-k1-mr-corr-done__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
}

.sj-k1-mr-corr-done__answer-text em {
	color: #94a3b8;
}

.sj-k1-mr-corr-done__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k1-mr-corr-done__criteria strong {
	color: #1e293b;
}

.sj-k1-mr-corr-done__criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k1-mr-corr-done__criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.sj-k1-mr-corr-done__criteria-item--awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.sj-k1-mr-corr-done__criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
	background: #22c55e;
	color: #fff;
}

.sj-k1-mr-corr-done__criteria-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sj-k1-mr-corr-done__criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.sj-k1-mr-corr-done__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
}

.sj-k1-mr-corr-done__feedback strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.sj-k1-mr-corr-done__feedback p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
}

.sj-k1-mr-corr-done-banner {
	margin-top: 4px;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12);
}

.sj-k1-mr-corr-done-banner__icon {
	font-size: 2rem;
	line-height: 1;
}

.sj-k1-mr-corr-done-banner__content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sj-k1-mr-corr-done-banner__content strong {
	font-size: 1rem;
	color: #166534;
}

.sj-k1-mr-corr-done-banner__content span {
	font-size: 0.875rem;
	color: #15803d;
}

@media (max-width: 640px) {
	.sj-k1-mr-corr-done__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.sj-k1-mr-corr-done__header-right {
		margin-left: 0;
	}
}

/*
 * Guru — gaya sejajar English SPM Paper 1 Part 2 (SpmEnglishPaper1MarkingReport.css),
 * dengan awalan sj-k1-mr-* untuk Sejarah sahaja.
 */

.sj-k1-mr-release-banner {
	display: flex;
	align-items: center;
	gap: 1rem;
	border-radius: 8px;
	padding: 1rem 1.5rem;
	margin: 4px 2px 0.75rem;
}

.sj-k1-mr-release-banner--released-ok {
	background: #d1fae5;
}

.sj-k1-mr-release-banner__icon {
	font-size: 2rem;
	line-height: 1;
}

.sj-k1-mr-release-banner__title {
	font-weight: 600;
	color: #065f46;
	margin-bottom: 0.25rem;
}

.sj-k1-mr-release-banner--released-ok .sj-k1-mr-release-banner__title {
	color: #065f46;
}

.sj-k1-mr-release-banner__subtitle {
	font-size: 0.875rem;
	color: #047857;
}

.sj-k1-mr-release-banner__actions {
	margin-top: 10px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.sj-k1-mr-release-report-btn {
	background: #667eea;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
}

.sj-k1-mr-release-report-btn:hover:not(:disabled) {
	background: #5a67d8;
}

.sj-k1-mr-release-report-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Soalan — header / skor / butang (pariti .spm-english-paper1-question-result__header + .header-right) */
.sj-k1-mr__q-head.sj-k1-mr-q-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

.sj-k1-mr-q-result__header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.sj-k1-mr-q-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1.2rem;
}

.sj-k1-mr-q-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.sj-k1-mr-q-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.sj-k1-mr-q-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

.sj-k1-mr-question-edit-btn,
.sj-k1-mr-question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.sj-k1-mr-question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.sj-k1-mr-question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.sj-k1-mr-question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.sj-k1-mr-question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.sj-k1-mr-question-corrections-btn .sj-k1-mr-help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.sj-k1-mr-question-corrections-btn .sj-k1-mr-attempts-badge {
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.sj-k1-mr-allow-corrections-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #475569;
	margin-bottom: 0.5rem;
}

.sj-k1-mr-allow-corrections-row label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
}

.sj-k1-mr-allow-corrections__err {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: #b91c1c;
}

@media (max-width: 640px) {
	.sj-k1-mr-q-result__header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0.5rem;
	}

	.sj-k1-mr-question-edit-btn,
	.sj-k1-mr-question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ——— BM K2 Bahagian B parity: pill + banner selepas pembetulan berjaya ——— */
.sj-k1-mr-via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

.sj-k1-mr-correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.sj-k1-mr-correction-completed-banner__icon {
	font-size: 2rem;
	line-height: 1;
}

.sj-k1-mr-correction-completed-banner__content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sj-k1-mr-correction-completed-banner__content strong {
	font-size: 1rem;
	color: #166534;
}

.sj-k1-mr-correction-completed-banner__content span {
	font-size: 0.875rem;
	color: #15803d;
}

.sj-k1-mr__criteria--via-correction .sj-k1-mr__criteria-list {
	border-color: #86efac;
	background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.sj-k1-mr__criteria-official-note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #64748b;
}
/**
 * Guru — modal pembetulan & ubah markah (struktur selaras English StudentCorrectionsModal + QuestionAdjustmentModal).
 * Semua kelas berawalan sj-k1-mr-tm-* (Sejarah SPM K1 teacher modals).
 */

/* ——— Shared overlay ——— */
.sj-k1-mr-tm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100050;
	padding: 20px;
	backdrop-filter: blur(2px);
}

/* ——— Student corrections modal ——— */
.sj-k1-mr-tm-corr {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sj-k1-mr-tm-corr__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.sj-k1-mr-tm-corr__title-block {
	flex: 1;
}

.sj-k1-mr-tm-corr__title-block h3 {
	margin: 0 0 0.5rem 0;
	color: #1e40af;
	font-size: 1.25rem;
	font-weight: 700;
}

.sj-k1-mr-tm-corr__preview {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.sj-k1-mr-tm-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: #fff;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1rem;
}

.sj-k1-mr-tm-close:hover {
	background: #fee2e2;
	color: #991b1b;
}

.sj-k1-mr-tm-corr__body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

/* Selaras corak GP/English: status ringkas, label atas, nilai bawah */
.sj-k1-mr-tm-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: #fff;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

.sj-k1-mr-tm-status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sj-k1-mr-tm-status-item .sj-k1-mr-tm-label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k1-mr-tm-status-item .sj-k1-mr-tm-value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.sj-k1-mr-tm-status-item .sj-k1-mr-tm-value--in_progress {
	color: #0369a1;
}

.sj-k1-mr-tm-status-item .sj-k1-mr-tm-value--need_help {
	color: #b91c1c;
}

.sj-k1-mr-tm-status-item .sj-k1-mr-tm-value--completed {
	color: #15803d;
}

.sj-k1-mr-tm-status-item .sj-k1-mr-tm-value--not_started {
	color: #64748b;
}

.sj-k1-mr-tm-need-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2px solid #ef4444;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.sj-k1-mr-tm-need-banner__icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.sj-k1-mr-tm-need-banner__content strong {
	display: block;
	color: #991b1b;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.sj-k1-mr-tm-need-banner__content p {
	margin: 0;
	color: #b91c1c;
	font-size: 0.875rem;
}

.sj-k1-mr-tm-help-section {
	background: #f8fafc;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.sj-k1-mr-tm-help-section__head {
	margin-bottom: 1rem;
}

.sj-k1-mr-tm-help-section__head h4 {
	margin: 0 0 0.25rem 0;
	color: #1e40af;
	font-size: 1.1rem;
	font-weight: 700;
}

.sj-k1-mr-tm-help-section__head p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

.sj-k1-mr-tm-help-err {
	background: #fee2e2;
	border: 1px solid #fecaca;
	color: #991b1b;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.sj-k1-mr-tm-help-ok {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.sj-k1-mr-tm-help-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k1-mr-tm-help-field label {
	font-size: 0.875rem;
	color: #374151;
}

.sj-k1-mr-tm-help-textarea {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.875rem;
	resize: vertical;
	width: 100%;
	box-sizing: border-box;
}

.sj-k1-mr-tm-help-textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sj-k1-mr-tm-char-count {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: right;
}

.sj-k1-mr-tm-help-options {
	padding: 0.75rem 0;
}

.sj-k1-mr-tm-help-options label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: #374151;
}

.sj-k1-mr-tm-help-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.5rem;
}

.sj-k1-mr-tm-btn-help {
	background: #3b82f6;
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}

.sj-k1-mr-tm-btn-help:hover:not(:disabled) {
	background: #2563eb;
}

.sj-k1-mr-tm-btn-help:disabled {
	background: #9ca3af;
	cursor: not-allowed;
}

.sj-k1-mr-tm-prev-help {
	background: #ecfdf5;
	border: 1px solid #10b981;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.sj-k1-mr-tm-prev-help h5 {
	margin: 0 0 0.5rem 0;
	color: #065f46;
}

.sj-k1-mr-tm-prev-help__meta {
	font-size: 0.8rem;
	color: #64748b;
	margin-bottom: 0.75rem;
}

/* Senarai percubaan — corak teacher-attempts-list (GP) */
.sj-k1-mr-tm-attempts-list {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.sj-k1-mr-tm-attempts-list__title {
	margin: 0 0 0.75rem 0;
	color: #475569;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k1-mr-tm-attempt-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 0.75rem;
	transition: box-shadow 0.2s, border-left-color 0.2s;
}

.sj-k1-mr-tm-attempt-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.sj-k1-mr-tm-attempt-card:last-child {
	margin-bottom: 0;
}

.sj-k1-mr-tm-attempt-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sj-k1-mr-tm-attempt-card__header strong {
	color: #1e293b;
	font-size: 14px;
}

.sj-k1-mr-tm-attempt-card__date {
	font-size: 12px;
	color: #64748b;
}

.sj-k1-mr-tm-attempt-card__answer {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Panel AI — selaras .teacher-ai-feedback */
.sj-k1-mr-tm-attempt-ai {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.sj-k1-mr-tm-pembetulan-kriteria {
	margin-top: 0;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.sj-k1-mr-tm-pembetulan-kriteria strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.sj-k1-mr-tm-krit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k1-mr-tm-krit-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.6rem 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	line-height: 1.45;
}

.sj-k1-mr-tm-krit-item--awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.sj-k1-mr-tm-krit-item--not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.sj-k1-mr-tm-krit-icon {
	font-weight: 700;
	flex-shrink: 0;
	line-height: 1.4;
}

.sj-k1-mr-tm-krit-item--awarded .sj-k1-mr-tm-krit-icon {
	color: #15803d;
}

.sj-k1-mr-tm-krit-item--not-awarded .sj-k1-mr-tm-krit-icon {
	color: #b91c1c;
}

.sj-k1-mr-tm-krit-content {
	flex: 1;
	min-width: 0;
}

.sj-k1-mr-tm-krit-text {
	color: #334155;
}

.sj-k1-mr-tm-krit-comment {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: #64748b;
	font-style: italic;
}

.sj-k1-mr-tm-ai-ulasan {
	margin-top: 0.75rem;
}

.sj-k1-mr-tm-ai-ulasan strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.sj-k1-mr-tm-ai-ulasan p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.sj-k1-mr-tm-attempt-ai > .sj-k1-mr-tm-ai-ulasan:first-child {
	margin-top: 0;
}

.sj-k1-mr-tm-no-attempts {
	padding: 2rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	text-align: center;
	color: #64748b;
	font-size: 0.875rem;
}

.sj-k1-mr-tm-ai-err {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: #b91c1c;
}

@media (max-width: 640px) {
	.sj-k1-mr-tm-corr__header {
		flex-direction: column;
	}

	.sj-k1-mr-tm-close {
		margin-left: 0;
		align-self: flex-end;
	}

	.sj-k1-mr-tm-status-summary {
		grid-template-columns: 1fr;
	}

	.sj-k1-mr-tm-attempt-card {
		padding: 0.875rem;
	}
}
/* Sejarah K2 marking report — BM layout/colour parity; scoped under .sj-k2-marking-report */

.sj-k2-marking-report {
	padding: 1.5rem;
	max-width: 960px;
	margin: 0 auto;
}

.sj-k2-marking-report__loading,
.sj-k2-marking-report__error {
	padding: 2rem;
	border-radius: 16px;
	text-align: center;
}

.sj-k2-marking-report__loading {
	background: #f8fafc;
	color: #475569;
}

.sj-k2-marking-report__error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.sj-k2-marking-report__retry {
	margin-top: 1rem;
	padding: 0.5rem 1.25rem;
	border-radius: 8px;
	border: none;
	background: #0f172a;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.sj-k2-marking-report__empty {
	text-align: center;
	padding: 3rem 2rem;
	background: #f8fafc;
	border-radius: 16px;
	border: 1px dashed #e2e8f0;
}

.sj-k2-marking-report__icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.sj-k2-marking-report__empty h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
	color: #1e293b;
}

.sj-k2-marking-report__empty p {
	margin: 0;
	color: #64748b;
	font-size: 1rem;
}

.sj-k2-marks-section {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	color: #2d3748;
}

.sj-k2-marks-section__title {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #2d3748;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 10px;
}

.sj-k2-total-marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 20px;
	background: #193852;
	border-radius: 12px;
	margin-bottom: 0;
	color: #fff;
}

.sj-k2-score-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k2-score-label {
	font-size: 14px;
	opacity: 0.9;
	font-weight: 500;
	color: #fff;
}

.sj-k2-score-value {
	font-size: 32px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: #fff;
}

.sj-k2-performance-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	backdrop-filter: blur(10px);
}

.sj-k2-badge-icon {
	font-size: 24px;
	line-height: 1;
}

.sj-k2-badge-text {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.sj-k2-performance-badge.excellent {
	background: rgba(34, 197, 94, 0.5);
}

.sj-k2-performance-badge.good {
	background: rgba(59, 130, 246, 0.5);
}

.sj-k2-performance-badge.satisfactory {
	background: rgba(245, 158, 11, 0.5);
}

.sj-k2-performance-badge.needs-improvement {
	background: rgba(239, 68, 68, 0.5);
}

.sj-k2-overall-ulasan {
	margin-top: 1.25rem;
	padding: 1rem 1.15rem;
	background: #fffbeb;
	border: 1px solid #fde047;
	border-radius: 8px;
}

.sj-k2-overall-ulasan strong {
	display: block;
	color: #854d0e;
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}

.sj-k2-overall-ulasan p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
	white-space: pre-wrap;
}

.sj-k2-marking-report__questions-header h3 {
	margin: 0 0 0.5rem 0;
	color: #1e293b;
	font-size: 20px;
	font-weight: 700;
}

.sj-k2-marking-report__questions {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 0.25rem;
}

.sj-k2-question-result {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.sj-k2-question-result:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.sj-k2-question-result__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

.sj-k2-question-number-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.sj-k2-question-result__header-right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.75rem;
}

.sj-k2-question-result__score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.sj-k2-question-result__score.full {
	background: #d1fae5;
	color: #065f46;
}

.sj-k2-question-result__score.partial {
	background: #fef3c7;
	color: #92400e;
}

.sj-k2-question-result__score.zero {
	background: #fee2e2;
	color: #991b1b;
}

.sj-k2-question-result__question {
	color: #475569;
	line-height: 1.6;
}

.sj-k2-question-result__question strong {
	color: #1e293b;
	display: block;
	margin-bottom: 4px;
}

.sj-k2-question-result__question--stem .sj-k2-question-stem-text {
	margin-top: 6px;
	color: #475569;
	line-height: 1.6;
	white-space: pre-wrap;
}

.sj-k2-question-result__answer {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k2-question-result__answer strong {
	color: #1e293b;
}

.sj-k2-question-result__answer-text {
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #475569;
	line-height: 1.6;
	white-space: pre-wrap;
}

.sj-k2-question-result__criteria {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k2-question-result__criteria strong {
	color: #1e293b;
}

.sj-k2-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sj-k2-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
}

.sj-k2-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.sj-k2-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.sj-k2-criteria-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.sj-k2-criteria-item.awarded .sj-k2-criteria-icon {
	background: #22c55e;
	color: white;
}

.sj-k2-criteria-item.not-awarded .sj-k2-criteria-icon {
	background: #ef4444;
	color: white;
}

.sj-k2-criteria-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sj-k2-criteria-text {
	color: #1e293b;
	line-height: 1.5;
}

.sj-k2-criteria-comment {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.sj-k2-criteria-item.hidden-criterion {
	opacity: 0.85;
}

.sj-k2-criteria-text--hidden {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.875rem;
}

.sj-k2-question-result__feedback {
	padding: 12px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.sj-k2-question-result__feedback-akami {
	flex-shrink: 0;
}

.sj-k2-question-result__feedback-akami.lj-marking-modal-akami-host {
	animation: none;
	margin-bottom: 0;
	justify-content: flex-start;
	align-items: flex-start;
}

.sj-k2-question-result__feedback-body {
	flex: 1;
}

.sj-k2-question-result__feedback-body strong {
	color: #854d0e;
	display: block;
	margin-bottom: 4px;
}

.sj-k2-question-result__feedback-body p {
	margin: 0;
	color: #713f12;
	line-height: 1.6;
	white-space: pre-wrap;
}

.sj-k2-question-result__feedback-hint {
	margin-top: 0.45rem !important;
	padding-top: 0.45rem;
	border-top: 1px dashed #eab308;
	color: #7c2d12;
}

.sj-k2-teacher-adjusted-pill {
	margin-left: 0.75rem;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #1e40af;
	background: #dbeafe;
	border-radius: 999px;
	vertical-align: middle;
}

.sj-k2-teacher-toolbar {
	margin-bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k2-release-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
}

.sj-k2-release-banner--pending {
	background: #fffbeb;
	border-color: #fde68a;
}

.sj-k2-release-banner--released {
	background: #ecfdf5;
	border-color: #6ee7b7;
}

.sj-k2-release-banner__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.sj-k2-release-banner__title {
	font-weight: 700;
	color: #0f172a;
	font-size: 1rem;
}

.sj-k2-release-banner__subtitle {
	color: #475569;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.sj-k2-release-banner__btn {
	margin-top: 0.75rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: none;
	background: #0f172a;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.sj-k2-release-banner__btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.sj-k2-release-banner__err {
	display: block;
	margin-top: 0.5rem;
	color: #b91c1c;
	font-size: 0.8125rem;
}

.sj-k2-teacher-corrections-toggle {
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.sj-k2-corrections-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: #0f172a;
	cursor: pointer;
}

.sj-k2-corrections-toggle-err {
	display: block;
	margin-top: 0.5rem;
	color: #b91c1c;
	font-size: 0.8125rem;
}

/* Guru: ubah markah + lihat pembetulan (BM K2 parity) */
.sj-k2-question-edit-btn,
.sj-k2-question-corrections-btn {
	padding: 0.5rem 0.875rem;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.sj-k2-question-edit-btn {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.sj-k2-question-edit-btn:hover {
	background: #e0f2fe;
	border-color: #7dd3fc;
	transform: translateY(-1px);
}

.sj-k2-question-corrections-btn {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	position: relative;
}

.sj-k2-question-corrections-btn:hover {
	background: #dcfce7;
	border-color: #86efac;
	transform: translateY(-1px);
}

.sj-k2-help-badge {
	font-size: 0.875rem;
	line-height: 1;
}

.sj-k2-question-corrections-btn .sj-k2-attempts-badge {
	min-width: unset;
	height: unset;
	background: #15803d;
	color: white;
	padding: 0.125rem 0.375rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Selaras Sejarah K1 — SejarahSpmK1MarkingReportServerSection.css .sj-k1-mr-via-correction-pill */
.sj-k2-marking-report .sj-k1-mr-via-correction-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	margin-left: 0.5rem;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
	vertical-align: middle;
}

.sj-k2-correction-completed-banner {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #22c55e;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.sj-k2-correction-completed-banner__icon {
	font-size: 2rem;
	line-height: 1;
}

.sj-k2-correction-completed-banner__content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sj-k2-correction-completed-banner__content strong {
	font-size: 1rem;
	color: #166534;
}

.sj-k2-correction-completed-banner__content span {
	font-size: 0.875rem;
	color: #15803d;
}

.sj-k2-teacher-help-notification {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: #fffbeb;
	border: 2px solid #fbbf24;
	border-radius: 12px;
}

.sj-k2-teacher-help-notification__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #92400e;
}

.sj-k2-teacher-help-notification__content p {
	margin: 0;
	color: #78350f;
	font-size: 0.9rem;
	line-height: 1.5;
}

.sj-k2-teacher-help-notification__hint {
	margin-top: 0.5rem;
}

.sj-k2-question-correction-button-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

.sj-k2-btn-open-correction-modal {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sj-k2-btn-open-correction-modal:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sj-k2-attempts-badge-inline {
	padding: 0.5rem 1rem;
	background: white;
	color: #0369a1;
	border: 1px solid #7dd3fc;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

@media (max-width: 640px) {
	.sj-k2-question-result__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.sj-k2-question-result__header-right {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		justify-content: flex-start;
		gap: 0.5rem;
	}

	.sj-k2-question-edit-btn,
	.sj-k2-question-corrections-btn {
		width: 100%;
		justify-content: center;
	}
}
/* Sejarah SPM K1 Objektif — Laporan pemarkahan (sj-k1-mr) */

.sj-k1-mr {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sj-k1-mr__empty {
	margin: 0;
	color: #64748b;
	font-size: 0.95rem;
}

.sj-k1-mr__pending {
	padding: 1.25rem 1.35rem;
	border-radius: 12px;
	background: #fefce8;
	border: 1px solid #facc15;
	color: #713f12;
}

.sj-k1-mr__pending-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
}

.sj-k1-mr__pending-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.sj-k1-mr__btn-retry {
	margin-top: 0.85rem;
	padding: 0.5rem 1rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background: #0f766e;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.sj-k1-mr__btn-retry:hover {
	background: #0d9488;
}

.sj-k1-mr__breakdown-header {
	margin-top: 0.25rem;
}

.sj-k1-mr__breakdown-title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: #0f172a;
}

.sj-k1-mr__ai-note {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: #64748b;
	line-height: 1.45;
}

.sj-k1-mr__questions {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.sj-k1-mr__q {
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	font-size: 1.2rem;
}

.sj-k1-mr__q-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #f1f5f9;
}

/* Soalan pill — gaya serupa kad soalan Sejarah / sj-k1-mr-corr-done__pill */
.sj-k1-mr__q-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Skor — selaras .sj-k1-mr-corr-done__score */
.sj-k1-mr__q-score {
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1.2rem;
}

.sj-k1-mr__q-score--full {
	background: #d1fae5;
	color: #065f46;
}

.sj-k1-mr__q-score--zero {
	background: #fee2e2;
	color: #991b1b;
}

.sj-k1-mr__q-stem,
.sj-k1-mr__q-answer,
.sj-k1-mr__criteria {
	color: #475569;
	line-height: 1.5;
}

.sj-k1-mr__q-stem strong,
.sj-k1-mr__q-answer strong,
.sj-k1-mr__criteria strong {
	color: #1e293b;
	display: block;
	margin-bottom: 0.35rem;
}

.sj-k1-mr__q-stem-text {
	color: #334155;
}

.sj-k1-mr__answer-text {
	padding: 0.65rem 0.85rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #334155;
}

.sj-k1-mr__criteria-list {
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
}

.sj-k1-mr__criteria-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.sj-k1-mr__criteria-item--awarded {
	background: #ecfdf5;
	border-color: #a7f3d0;
}

.sj-k1-mr__criteria-item--not-awarded {
	background: #fef2f2;
	border-color: #fecaca;
}

.sj-k1-mr__criteria-icon {
	font-weight: 800;
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
}

.sj-k1-mr__criteria-item--awarded .sj-k1-mr__criteria-icon {
	color: #059669;
}

.sj-k1-mr__criteria-item--not-awarded .sj-k1-mr__criteria-icon {
	color: #dc2626;
}

.sj-k1-mr__criteria-text--vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sj-k1-mr__criteria-text {
	color: #334155;
}

/* Maklum balas per soalan — pek struktur .sj-k2-question-result__feedback (Akami + badan) */

.sj-k1-mr .sj-k2-question-result__feedback-body strong,
.sj-k1-mr .sj-k2-question-result__feedback-body p {
	font-size: 1.2rem;
}

.sj-k1-mr .sj-k2-question-result__feedback-body p.sj-k1-mr__maklum-balas-p--loading {
	color: #64748b;
	font-style: italic;
}

.sj-k1-mr__feedback--hint {
	padding: 0.65rem 0.85rem;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 8px;
	color: #92400e;
}

.sj-k1-mr__feedback--hint p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
}

.sj-k1-mr__criteria-hint {
	margin: 0;
	padding: 0.65rem 0.85rem;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 8px;
	color: #92400e;
	font-size: 0.88rem;
	line-height: 1.45;
}

.sj-k1-mr__criteria-hint p {
	margin: 0;
}

.sj-k1-mr__help-waiting-hint {
	margin: 0 0 0.75rem 0;
	padding: 0.65rem 0.85rem;
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 8px;
	color: #92400e;
	font-size: 1.2rem;
	line-height: 1.45;
}

.sj-k1-mr__help-waiting-hint p {
	margin: 0;
}

/* Bahagian butang pembetulan — selaras .question-correction-button-section */
.sj-k1-mr__correction {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem;
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	margin-top: 1rem;
}

/* Butang — selaras .btn-open-correction-modal */
.sj-k1-mr__btn-open-correction {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	background: #3b82f6;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
}

.sj-k1-mr__btn-open-correction:hover {
	background: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sj-k1-mr__correction-saved {
	margin: 0.65rem 0 0;
	padding: 0.55rem 0.75rem;
	font-size: 0.88rem;
	color: #334155;
	background: #f1f5f9;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.sj-k1-mr__correction-limit-note {
	flex: 1 1 100%;
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: #475569;
	line-height: 1.45;
}
/* Sejarah K2 Bahagian B — pilih 3/5 (struktur rujukan BM K1 essay selector; kelas sj-k2-b-* sahaja) */

.sj-k2-b-essay-selector {
	padding: 1.5rem 0;
}

.sj-k2-b-essay-selector__instruction {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 0.5rem;
	text-align: center;
}

.sj-k2-b-essay-selector__instruction-detail {
	font-size: 1.1rem;
	color: #3b4251;
	line-height: 1.6;
	text-align: center;
	margin: 0 auto 1.5rem auto;
	max-width: 720px;
}

.sj-k2-b-essay-selector__instruction-detail--locked-intro {
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.sj-k2-b-essay-selector__pick-count {
	display: inline-block;
	margin-top: 0.35rem;
	font-weight: 700;
	color: #0f766e;
}

.sj-k2-b-essay-selector__questions {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

.sj-k2-b-essay-selector__question-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.sj-k2-b-essay-selector__question-tab {
	border: 1px solid #cbd5e1;
	background: #ffffff;
	color: #334155;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sj-k2-b-essay-selector__question-tab:hover {
	border-color: #2271b1;
	color: #2271b1;
}

/* Dipilih (salah satu daripada tiga) */
.sj-k2-b-essay-selector__question-tab.is-active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

/* Tab yang sedang dibaca (preview) */
.sj-k2-b-essay-selector__question-tab.is-previewing:not(.is-active) {
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.35);
	border-color: #2271b1;
}

.sj-k2-b-essay-selector__preview-panel {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 1.25rem;
	transition: border-color 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sj-k2-b-essay-selector__preview-structured {
	margin-bottom: 1rem;
}

.sj-k2-b-essay-selector__preview-topic {
	margin: 0 0 0.85rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #111827;
	line-height: 1.5;
	text-align: center;
}

/* Selaras dengan .sj-k2-passage / .sj-k2-passage-content / .sj-k2-preview-source pada kad utama */
.sj-k2-b-essay-selector__passage {
	background: #f3f4f6;
	padding: 1.5rem;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
}

.sj-k2-b-essay-selector__passage-content {
	line-height: 1.65;
	color: #111827;
	text-align: justify;
	font-size: 1.1rem;
}

.sj-k2-b-essay-selector__preview-source {
	margin: 1rem 0 0;
	font-size: 1.1rem;
	color: #64748b;
	font-style: italic;
}

/* Jadual — selaras dengan .sj-k2-stimulus pada kad utama */
.sj-k2-b-essay-selector__stimulus {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #111827;
}

.sj-k2-b-essay-selector__stimulus-intro {
	margin: 0 0 0.75rem;
	text-align: left;
}

.sj-k2-b-essay-selector__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sj-k2-b-essay-selector__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1rem;
}

.sj-k2-b-essay-selector__table th,
.sj-k2-b-essay-selector__table td {
	border: 1px solid #94a3b8;
	padding: 0.35rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.sj-k2-b-essay-selector__table th {
	background: #e2e8f0;
	font-weight: 600;
}

.sj-k2-b-essay-selector__preview-empty {
	color: #64748b;
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.5;
}

.sj-k2-b-essay-selector__preview-part-list {
	margin: 1rem 0 0;
	padding-left: 1.2rem;
	font-size: 1.1rem;
	line-height: 1.65;
	color: #1f2937;
}

.sj-k2-b-essay-selector__preview-part-item {
	margin-bottom: 0.85rem;
}

.sj-k2-b-essay-selector__preview-part-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-bottom: 0.35rem;
}

.sj-k2-b-essay-selector__preview-part-label {
	font-weight: 600;
	color: #1d2327;
	font-size: 1.1rem;
}

.sj-k2-b-essay-selector__preview-part-chip {
	font-size: 0.95rem;
	font-weight: 600;
	color: #2271b1;
	background: #eff6ff;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

.sj-k2-b-essay-selector__preview-part-lead {
	margin: 0 0 0.5rem;
	font-weight: 600;
	font-size: 1.1rem;
	color: #1f2937;
	line-height: 1.45;
}

.sj-k2-b-essay-selector__preview-part-prompt {
	margin: 0.5rem 0 0;
	font-size: 1.1rem;
	line-height: 1.55;
	color: #1f2937;
}

.sj-k2-b-essay-selector__passage--part {
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	padding: 1rem 1.1rem;
}

.sj-k2-b-essay-selector__stimulus--nested {
	font-size: 1.1rem;
}

.sj-k2-b-essay-selector__question-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f0f0f0;
}

.sj-k2-b-essay-selector__question-number {
	font-size: 1.1rem;
	font-weight: 700;
	color: #2271b1;
}

.sj-k2-b-essay-selector__question-type {
	font-size: 1.1rem;
	color: #6b7280;
	background: #f3f4f6;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-weight: 500;
	max-width: 55%;
	text-align: right;
}

.sj-k2-b-essay-selector__preview-actions {
	display: flex;
	justify-content: center;
}

.sj-k2-b-essay-selector__select-button--button {
	border: none;
	cursor: pointer;
}

.sj-k2-b-essay-selector__select-button--button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.sj-k2-b-essay-selector__select-button {
	background: linear-gradient(135deg, #2271b1 0%, #1e5a8a 100%);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.2s ease;
	margin-top: auto;
}

.sj-k2-b-essay-selector__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	background: #f6f9fc;
	border: 1px solid #c3d9ed;
	border-radius: 12px;
}

.sj-k2-b-essay-selector__toolbar-summary {
	margin: 0;
	font-size: 1.1rem;
	color: #1d2327;
	font-weight: 600;
}

.sj-k2-b-essay-selector__toolbar-button {
	background: #fff;
	border: 1px solid #2271b1;
	color: #2271b1;
	padding: 0.5rem 1.1rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.sj-k2-b-essay-selector__toolbar-button:hover {
	background: #2271b1;
	color: #fff;
}

@media (max-width: 768px) {
	.sj-k2-b-essay-selector__questions {
		gap: 0.65rem;
	}

	.sj-k2-b-essay-selector__question-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.sj-k2-b-essay-selector__preview-panel {
		padding: 1rem;
	}

	.sj-k2-b-essay-selector__select-button {
		padding: 0.625rem 1.25rem;
		font-size: 1.1rem;
	}

	.sj-k2-b-essay-selector__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
}
/**
 * Sejarah SPM Kertas 2 — Learning Node preview card.
 * Self-contained (no BM import). Prefix: sj-k2-
 * Visual parity with previous BM K2 Bahagian B reference layout.
 */

.sj-k2-preview-card {
	font-size: 1.1rem;
	line-height: 1.6;
}

.sj-k2-split-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1rem;
	background: #f7f8fb;
	border-radius: 24px;
}

.sj-k2-progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f1f5f9;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #475569;
}

.sj-k2-split-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 24px;
	padding: 2rem;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 1.25rem;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.sj-k2-passage-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #fff;
	border-radius: 20px;
}

/* Bertindih seperti reka bentuk: Soalan N, kemudian jenis bahan (Petikan, Jadual, …) */
.sj-k2-stimulus-badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex-shrink: 0;
}

.sj-k2-passage-label {
	display: inline-flex;
	background: #3b82f6;
	color: #fff;
	padding: 4px 18px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1.1rem;
}

.sj-k2-passage {
	background: #f3f4f6;
	padding: 1.5rem;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
}

.sj-k2-passage-content {
	font-size: 1.1rem;
	line-height: 1.65;
	color: #111827;
	text-align: justify;
}

/* Jadual — sama seperti Kertas 1 (.sj-k1-obj__table) */
.sj-k2-stimulus {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #111827;
}

.sj-k2-stimulus__intro {
	margin: 0 0 0.75rem;
	text-align: left;
}

.sj-k2-stimulus__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sj-k2-stimulus__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1rem;
}

.sj-k2-stimulus__table th,
.sj-k2-stimulus__table td {
	border: 1px solid #94a3b8;
	padding: 0.35rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.sj-k2-stimulus__table th {
	background: #e2e8f0;
	font-weight: 600;
}

.sj-k2-stimulus__source {
	margin: 1rem 0 0;
	font-size: 1.1rem;
	color: #64748b;
	font-style: italic;
}

.sj-k2-bahan-instruction {
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
	line-height: 1.55;
}

.sj-k2-preview-instruction {
	margin: 0.5rem 0;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--lj-text-secondary, #444);
	line-height: 1.55;
}

.sj-k2-preview-source {
	margin: 1rem 0 0;
	font-size: 1.1rem;
	color: #64748b;
	font-style: italic;
}

.sj-k2-preview-empty {
	font-size: 1.1rem;
	color: var(--lj-text-muted, #666);
	font-style: italic;
	margin: 1rem 0;
}

/* Petikan khusus bahagian (c) — di atas arahan analisis */
.sj-k2-part-lead-in {
	margin: 0 0 0.65rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--lj-text-secondary, #1f2937);
	line-height: 1.5;
}

.sj-k2-part-nested-stimulus {
	margin: 0.5rem 0 1rem;
}

.sj-k2-part-nested-stimulus__badge {
	margin-bottom: 0.45rem;
}

.sj-k2-part-nested-stimulus__label {
	font-size: 1.1rem;
	padding: 3px 14px;
}

/* Equal two-column panels + scroll (ex-BM Bahagian B behaviour) */
.sj-k2-split-card--two-column {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
	max-height: 80vh;
	min-height: 400px;
	overflow: hidden;
}

.sj-k2-split-card--two-column .sj-k2-passage-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 0;
	overflow-y: auto;
}

.sj-k2-split-card--two-column .sj-k2-questions-column {
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.sj-k2-split-card--two-column .sj-k2-passage-column::-webkit-scrollbar,
.sj-k2-split-card--two-column .sj-k2-questions-column::-webkit-scrollbar {
	width: 8px;
}

.sj-k2-split-card--two-column .sj-k2-passage-column::-webkit-scrollbar-thumb,
.sj-k2-split-card--two-column .sj-k2-questions-column::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.sj-k2-questions-column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
	width: 100%;
}

.sj-k2-questions-column-header {
	flex-shrink: 0;
	padding-top: 0;
	padding-bottom: 1rem;
	min-height: 7.5rem;
	display: flex;
	align-items: flex-end;
}

.sj-k2-question-block {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #f8f9fb;
	border-radius: 16px;
	padding: 1.25rem;
}

.sj-k2-question-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.sj-k2-question-card__label {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1e293b;
	flex-shrink: 0;
}

.sj-k2-question-card__marks {
	font-size: 1.1rem;
	font-weight: 500;
	color: #64748b;
	flex-shrink: 0;
	margin-left: auto;
}

.sj-k2-question-text {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #1e293b;
}

.sj-k2-subparts {
	margin: 0.25rem 0 0.5rem;
	padding-left: 1.25rem;
	line-height: 1.65;
	color: #334155;
	font-size: 1.1rem;
}

.sj-k2-answer-textarea {
	width: 100%;
	max-width: 100%;
	min-height: 90px;
	padding: 0.75rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	font-size: 1.1rem;
	line-height: 1.6;
	font-family: inherit;
	resize: vertical;
	background: #fff;
	color: #64748b;
	box-sizing: border-box;
}

.sj-k2-answer-textarea:disabled {
	cursor: not-allowed;
	opacity: 0.8;
}

.sj-k2-answer-textarea:not(:disabled) {
	color: #111827;
}

/* Bahagian B: expect perenggan esei — larger default height */
.sj-k2-answer-textarea--esei {
	min-height: 280px;
}

.sj-k2-submit-container {
	margin-top: 2rem;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.sj-k2-submit-button {
	width: 100%;
	max-width: 320px;
	padding: 14px 24px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sj-k2-submit-button:disabled {
	opacity: 0.6;
	box-shadow: none;
	cursor: not-allowed;
}

.sj-k2-submit-button:not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45);
}

.sj-k2-submit-hint {
	margin: 0;
	font-size: 1.1rem;
	color: #475569;
	text-align: center;
}

@media (max-width: 960px) {
	.sj-k2-split-card {
		grid-template-columns: 1fr;
		padding: 1.5rem;
	}

	.sj-k2-split-card--two-column {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}

	.sj-k2-split-card--two-column .sj-k2-passage-column,
	.sj-k2-split-card--two-column .sj-k2-questions-column {
		overflow-y: visible;
	}

	.sj-k2-questions-column {
		max-width: none;
	}

	.sj-k2-questions-column-header {
		min-height: 0;
		padding-bottom: 0.5rem;
	}
}

/* Marking modal: see sj-k2-marking-modal.css (BM parity, Sejarah-prefixed file). */
/*
 * Sejarah K2 — marking progress modal (structure parity with BM BmK2MarkingModal.css; sj-k2-* prefix only).
 */

.sj-k2-marking-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	animation: sj-k2-marking-modal-fadeIn 0.3s ease;
}

@keyframes sj-k2-marking-modal-fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.sj-k2-marking-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 20px;
	padding: 3rem 2rem;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	animation: sj-k2-marking-modal-slideUp 0.4s ease;
}

@keyframes sj-k2-marking-modal-slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sj-k2-marking-modal__content {
	text-align: center;
	color: #0f172a;
}

.sj-k2-marking-modal__robot.lj-marking-modal-akami-host {
	margin-bottom: 0;
}

.sj-k2-marking-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
	color: #0f172a;
}

.sj-k2-marking-modal__message {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem 0;
	color: #475569;
	font-weight: 500;
}

.sj-k2-marking-modal__progress-bar {
	width: 100%;
	height: 10px;
	background: #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	margin: 1.5rem 0;
}

.sj-k2-marking-modal__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
	border-radius: 5px;
	transition: width 0.8s ease;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.sj-k2-marking-modal__phases {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}

.sj-k2-marking-modal__phases .phase {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.sj-k2-marking-modal__phases .phase.active {
	opacity: 1;
}

.sj-k2-marking-modal__phases .phase.complete {
	opacity: 1;
}

.sj-k2-marking-modal__phases .phase-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.sj-k2-marking-modal__phases .phase.active .phase-icon {
	background: #e0e7ff;
	color: #3730a3;
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
	animation: sj-k2-marking-modal-pulse 2s ease-in-out infinite;
}

.sj-k2-marking-modal__phases .phase.complete .phase-icon {
	background: #22c55e;
	color: #fff;
	box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
}

@keyframes sj-k2-marking-modal-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.sj-k2-marking-modal__phases .phase-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

@media (max-width: 768px) {
	.sj-k2-marking-modal {
		padding: 2rem 1.5rem;
		max-width: 95%;
	}

	.sj-k2-marking-modal__title {
		font-size: 1.25rem;
	}

	.sj-k2-marking-modal__phases .phase-icon {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}

	.sj-k2-marking-modal__phases .phase-label {
		font-size: 0.7rem;
	}
}
/* Sejarah SPM Kertas 2 — pembetulan modal (sj-k2-*; not shared with BM) */

.sj-k2-scm-overlay {
	position: fixed;
	inset: 0;
	z-index: 100050;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(2px);
}

.sj-k2-scm {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: 95%;
	max-width: 1400px;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sj-k2-scm__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #2079b0;
	flex-shrink: 0;
}

.sj-k2-scm__title-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	flex-wrap: wrap;
}

.sj-k2-scm__title-row h3 {
	margin: 0;
	color: white;
	font-size: 1.25rem;
	font-weight: 700;
}

.sj-k2-scm__criteria-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.sj-k2-scm__close {
	background: transparent;
	border: none;
	color: white;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.sj-k2-scm__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.sj-k2-scm__split {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.sj-k2-scm__split--single .sj-k2-scm__panel {
	flex: 1;
	min-width: 0;
}

.sj-k2-scm__passage {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	border-right: 2px solid #e2e8f0;
	background: #f8fafc;
	overflow: hidden;
}

.sj-k2-scm__passage-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	background: #f1f5f9;
	flex-shrink: 0;
}

.sj-k2-scm__passage-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.sj-k2-scm__passage-head h4 {
	margin: 0;
	color: #334155;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k2-scm__passage-body {
	flex: 1;
	padding: 1.5rem;
	overflow-y: auto;
	line-height: 1.8;
}

.sj-k2-scm__bahan-section {
	margin-bottom: 1.5rem;
}

.sj-k2-scm__bahan-section:last-child {
	margin-bottom: 0;
}

.sj-k2-scm__bahan-title {
	margin: 0 0 0.75rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #cbd5e1;
	color: #334155;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* K1 passage/stimulus embed — elak padding berganda dengan .sj-k2-scm__passage-body */
.sj-k2-scm__passage-body .sj-k2-scm__k1-embed.sj-k1-student-corr-passage-content {
	padding: 0;
	overflow: visible;
}

.sj-k2-scm__k1-sumber-foot {
	font-size: 0.8125rem;
	font-style: italic;
	color: #64748b;
}

.sj-k2-scm__para {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.sj-k2-scm__para-num {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.875rem;
	margin-top: 0.125rem;
}

.sj-k2-scm__para p {
	margin: 0;
	flex: 1;
	color: #1e293b;
	font-size: 0.9375rem;
	line-height: 1.8;
	text-align: justify;
}

/* Frasa ditebalkan — match preview card (Petikan) */
.sj-k2-scm__para p b,
.sj-k2-scm__para p strong {
	font-weight: 700;
	color: #0f172a;
}

.sj-k2-scm__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: white;
	min-width: 0;
}

.sj-k2-scm__tabs {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem 0 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: #f8fafc;
	flex-shrink: 0;
}

.sj-k2-scm__tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
	transition: all 0.2s;
	position: relative;
	top: 2px;
}

.sj-k2-scm__tab:hover {
	color: #334155;
	background: rgba(59, 130, 246, 0.05);
}

.sj-k2-scm__tab.is-active {
	color: #3b82f6;
	border-bottom-color: #3b82f6;
	background: white;
}

.sj-k2-scm__tab-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.sj-k2-scm__tab-label {
	font-size: 0.875rem;
}

.sj-k2-scm__tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.sj-k2-scm__ctx {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.sj-k2-scm__ctx h5 {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k2-scm__qtext {
	margin: 0;
	padding: 0.875rem;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
	white-space: pre-wrap;
}

.sj-k2-scm__orig-answer {
	margin: 0;
	padding: 0.875rem;
	background: #eff6ff;
	border-left: 3px solid #3b82f6;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #334155;
	white-space: pre-wrap;
}

.sj-k2-scm__feedback {
	margin: 0;
	padding: 0.875rem;
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #92400e;
	white-space: pre-wrap;
}

.sj-k2-scm__criteria-status {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.sj-k2-scm__criteria-status h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #15803d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k2-scm__criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k2-scm__criteria-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem;
	background: white;
	border-radius: 4px;
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.sj-k2-scm__criteria-list .sj-k2-scm__crit-icon {
	font-weight: 700;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.sj-k2-scm__no-criteria {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 4px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

.sj-k2-scm__form-section {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 2px solid #e2e8f0;
}

.sj-k2-scm__form-section h5 {
	margin: 0 0 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
}

.sj-k2-scm__textarea {
	width: 100%;
	padding: 0.875rem;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
	min-height: 140px;
}

.sj-k2-scm__textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sj-k2-scm__form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.sj-k2-scm__word-count {
	font-size: 0.875rem;
	color: #64748b;
	font-weight: 500;
}

.sj-k2-scm__word-count.is-low {
	color: #dc2626;
}

.sj-k2-scm__btn-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.sj-k2-scm__btn-help {
	padding: 0.625rem 1.25rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	background: #fef3c7;
	color: #92400e;
	border: 2px solid #fbbf24;
}

.sj-k2-scm__btn-help:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sj-k2-scm__btn-submit {
	padding: 0.75rem 1.5rem;
	background: #3b82f6;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sj-k2-scm__btn-submit:hover:not(:disabled) {
	background: #2563eb;
}

.sj-k2-scm__btn-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sj-k2-scm__banner {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	color: #92400e;
	font-weight: 500;
}

/* Help requested (aligned with English StudentCorrectionModal .help-requested-banner) */
.sj-k2-scm .help-requested-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
	margin-bottom: 1rem;
	color: #92400e;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.45;
}

.sj-k2-scm .help-requested-banner .help-icon {
	font-size: 1.25rem;
}

/* Sejarah tab — drawer layout (aligned with English StudentCorrectionModal) */
.sj-k2-scm__tab-content--history {
	display: flex;
	flex-direction: column;
}

.sj-k2-scm__history-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k2-scm__attempt-drawer {
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: white;
}

.sj-k2-scm__attempt-drawer-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	cursor: pointer;
	user-select: none;
	font-weight: 600;
	color: #1e293b;
	transition: background 0.2s;
	list-style: none;
}

.sj-k2-scm__attempt-drawer-summary::-webkit-details-marker {
	display: none;
}

.sj-k2-scm__attempt-drawer-summary:hover {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.sj-k2-scm__attempt-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	flex-shrink: 0;
}

.sj-k2-scm__attempt-badge--original {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.sj-k2-scm__attempt-title {
	flex: 1;
	font-size: 0.9375rem;
	color: #1e293b;
	font-weight: 600;
	min-width: 0;
}

.sj-k2-scm__attempt-criteria-badge {
	padding: 0.25rem 0.625rem;
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	flex-shrink: 0;
}

.sj-k2-scm__attempt-toggle {
	font-size: 0.875rem;
	color: #64748b;
	transition: transform 0.2s;
	flex-shrink: 0;
}

.sj-k2-scm__attempt-drawer[open] .sj-k2-scm__attempt-toggle {
	transform: rotate(180deg);
}

.sj-k2-scm__attempt-drawer-content {
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: #fafbfc;
}

.sj-k2-scm__attempt-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k2-scm__attempt-section h6 {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sj-k2-scm__attempt-text {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #1e293b;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.sj-k2-scm__attempt-feedback-text {
	margin: 0;
	padding: 0.75rem;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 6px;
	color: #92400e;
	font-size: 0.875rem;
	line-height: 1.6;
	font-style: italic;
}

.sj-k2-scm__attempt-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k2-scm__attempt-criteria-list .sj-k2-scm__crit-met {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	background: white;
	border-radius: 4px;
	color: #15803d;
	border-left: 3px solid #22c55e;
}

.sj-k2-scm__crit-icon {
	font-weight: 700;
	width: 1.25rem;
	text-align: center;
	flex-shrink: 0;
}

.sj-k2-scm__no-criteria-msg {
	margin: 0;
	padding: 0.75rem;
	background: white;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	color: #64748b;
	font-size: 0.875rem;
	text-align: center;
	font-style: italic;
}

.sj-k2-scm__attempt-error-notice,
.sj-k2-scm__attempt-pending-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
}

.sj-k2-scm__attempt-pending-notice {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

.sj-k2-scm__attempt-error-notice {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.sj-k2-scm__history-empty {
	padding: 1.5rem 1rem;
	text-align: center;
	color: #64748b;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	background: #f8fafc;
}

.sj-k2-scm__history-empty p {
	margin: 0.35rem 0;
	font-size: 0.9375rem;
}

.sj-k2-scm__history-empty strong {
	color: #3b82f6;
}

@media (max-width: 900px) {
	.sj-k2-scm__split {
		flex-direction: column;
		overflow-y: auto;
	}

	.sj-k2-scm__passage {
		flex: 0 0 auto;
		max-height: 40vh;
		border-right: none;
		border-bottom: 2px solid #e2e8f0;
	}
}

/* -------------------------------------------------------------------------- */
/* Guru: paparan “Lihat pembetulan” — sama struktur seperti English           */
/* StudentCorrectionsModal (semua di-scope di bawah .sj-k2-tcm)             */
/* -------------------------------------------------------------------------- */

.sj-k2-tcm {
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sj-k2-tcm .modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.sj-k2-tcm .modal-title {
	flex: 1;
}

.sj-k2-tcm .modal-title h3 {
	margin: 0 0 0.5rem 0;
	color: #1e40af;
	font-size: 1.25rem;
	font-weight: 700;
}

.sj-k2-tcm .modal-title .question-preview {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.sj-k2-tcm .modal-close-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	background: white;
	color: #64748b;
	font-size: 24px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1rem;
}

.sj-k2-tcm .modal-close-btn:hover {
	background: #fee2e2;
	color: #991b1b;
}

.sj-k2-tcm .modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

.sj-k2-tcm .correction-status-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.sj-k2-tcm .correction-status-summary .status-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sj-k2-tcm .correction-status-summary .status-item .label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k2-tcm .correction-status-summary .status-item .value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.sj-k2-tcm .correction-status-summary .status-item .value.status-in_progress {
	color: #f59e0b;
}

.sj-k2-tcm .correction-status-summary .status-item .value.status-need_help {
	color: #ef4444;
}

.sj-k2-tcm .correction-status-summary .status-item .value.status-not_started {
	color: #64748b;
}

.sj-k2-tcm .correction-status-summary .status-item .value.status-completed {
	color: #059669;
}

.sj-k2-tcm .need-help-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2px solid #ef4444;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.sj-k2-tcm .need-help-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.sj-k2-tcm .need-help-content strong {
	display: block;
	color: #991b1b;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.sj-k2-tcm .need-help-content p {
	margin: 0;
	color: #b91c1c;
	font-size: 0.875rem;
}

/* Borang bimbingan guru (BM) — sama struktur seperti English StudentCorrectionsModal, scoped */
.sj-k2-tcm .teacher-help-section {
	background: #f8fafc;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.sj-k2-tcm .teacher-help-header {
	margin-bottom: 1rem;
}

.sj-k2-tcm .teacher-help-header h4 {
	margin: 0 0 0.25rem 0;
	color: #1e40af;
	font-size: 1.1rem;
	font-weight: 700;
}

.sj-k2-tcm .teacher-help-header p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

.sj-k2-tcm .help-error-message {
	background: #fee2e2;
	border: 1px solid #fecaca;
	color: #991b1b;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.sj-k2-tcm .help-success-message {
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	color: #166534;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.sj-k2-tcm .teacher-help-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-k2-tcm .help-input-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.sj-k2-tcm .help-input-group label {
	font-size: 0.875rem;
	color: #374151;
}

.sj-k2-tcm .help-input-group label strong {
	font-weight: 600;
}

.sj-k2-tcm .teacher-help-textarea {
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.875rem;
	resize: vertical;
	min-height: 60px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sj-k2-tcm .teacher-help-textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sj-k2-tcm .teacher-help-textarea::placeholder {
	color: #9ca3af;
}

.sj-k2-tcm .char-count {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: right;
}

.sj-k2-tcm .help-options {
	padding: 0.75rem 0;
}

.sj-k2-tcm .checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.sj-k2-tcm .checkbox-label input[type="checkbox"] {
	margin-top: 0.125rem;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.sj-k2-tcm .checkbox-text {
	font-size: 0.875rem;
	line-height: 1.4;
	color: #374151;
}

.sj-k2-tcm .help-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

.sj-k2-tcm .btn-provide-help {
	background: #3b82f6;
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.sj-k2-tcm .btn-provide-help:hover:not(:disabled) {
	background: #2563eb;
	transform: translateY(-1px);
}

.sj-k2-tcm .btn-provide-help:active:not(:disabled) {
	transform: translateY(0);
}

.sj-k2-tcm .btn-provide-help:disabled {
	background: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

.sj-k2-tcm .previous-teacher-help {
	background: #ecfdf5;
	border: 1px solid #10b981;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.sj-k2-tcm .teacher-help-display-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #a7f3d0;
}

.sj-k2-tcm .teacher-help-display-header h5 {
	margin: 0;
	color: #065f46;
	font-size: 1rem;
	font-weight: 600;
}

.sj-k2-tcm .help-meta {
	font-size: 0.75rem;
	color: #047857;
}

.sj-k2-tcm .teacher-help-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sj-k2-tcm .teacher-message-display strong,
.sj-k2-tcm .teacher-hint-display strong {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #047857;
}

.sj-k2-tcm .teacher-message-display p,
.sj-k2-tcm .teacher-hint-display p {
	margin: 0;
	background: white;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border-left: 3px solid #10b981;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #1f2937;
}

.sj-k2-tcm .reset-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #059669;
	font-weight: 500;
}

.sj-k2-tcm .teacher-attempts-list {
	margin-top: 0;
}

.sj-k2-tcm .teacher-attempts-list h4 {
	margin: 0 0 1rem 0;
	color: #1e293b;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k2-tcm .teacher-attempt-item {
	background: white;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #3b82f6;
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
	transition: all 0.2s;
}

.sj-k2-tcm .teacher-attempt-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-left-color: #2563eb;
}

.sj-k2-tcm .teacher-attempt-item:last-child {
	margin-bottom: 0;
}

.sj-k2-tcm .teacher-attempt-item .attempt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.sj-k2-tcm .teacher-attempt-item .attempt-header strong {
	color: #1e293b;
	font-size: 14px;
}

.sj-k2-tcm .teacher-attempt-item .attempt-date {
	font-size: 12px;
	color: #64748b;
}

.sj-k2-tcm .teacher-attempt-item .attempt-text {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.sj-k2-tcm .no-attempts {
	padding: 2rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	text-align: center;
}

.sj-k2-tcm .no-attempts p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
}

.sj-k2-tcm .teacher-ai-feedback {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f5f9;
	border-radius: 8px;
	border-left: 3px solid #667eea;
}

.sj-k2-tcm .correction-criteria-section {
	margin-bottom: 1rem;
}

.sj-k2-tcm .correction-criteria-section strong {
	display: block;
	margin-bottom: 0.75rem;
	color: #334155;
	font-size: 0.9375rem;
}

.sj-k2-tcm .sj-k2-tcm-criteria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sj-k2-tcm .sj-k2-tcm-criteria-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
}

.sj-k2-tcm .sj-k2-tcm-criteria-item.awarded {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.sj-k2-tcm .sj-k2-tcm-criteria-item.not-awarded {
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.sj-k2-tcm .sj-k2-tcm-criteria-icon {
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
	font-weight: 700;
}

.sj-k2-tcm .sj-k2-tcm-criteria-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sj-k2-tcm .sj-k2-tcm-criteria-text {
	color: #1e293b;
	line-height: 1.45;
}

.sj-k2-tcm .sj-k2-tcm-criteria-comment {
	color: #64748b;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.sj-k2-tcm .teacher-feedback-text {
	margin-top: 0.75rem;
}

.sj-k2-tcm .teacher-feedback-text strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #475569;
	font-size: 0.875rem;
}

.sj-k2-tcm .teacher-feedback-text p {
	margin: 0;
	color: #64748b;
	font-size: 0.875rem;
	line-height: 1.5;
}

.sj-k2-tcm .ai-feedback-error {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-size: 0.875rem;
	line-height: 1.45;
}

.sj-k2-tcm .ai-feedback-error strong {
	display: block;
	margin-bottom: 0.35rem;
}

.sj-k2-tcm .ai-feedback-error p {
	margin: 0;
}

@media (max-width: 768px) {
	.sj-k2-tcm {
		max-height: 95vh;
	}

	.sj-k2-tcm .modal-header {
		padding: 1rem;
	}

	.sj-k2-tcm .modal-body {
		padding: 1rem;
	}

	.sj-k2-tcm .correction-status-summary {
		grid-template-columns: 1fr;
	}
}
/* Sejarah K2 — ubah markah modal (scoped sj-k2-qadj-*) */

.sj-k2-qadj-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}

.sj-k2-qadj-modal {
	background: white;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 840px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	margin: auto;
}

.sj-k2-qadj-header {
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sj-k2-qadj-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}

.sj-k2-qadj-close {
	background: none;
	border: none;
	font-size: 28px;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.sj-k2-qadj-close:hover {
	background-color: #f1f5f9;
}

.sj-k2-qadj-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

.sj-k2-qadj-context {
	margin-bottom: 20px;
}

.sj-k2-qadj-context-section {
	margin-bottom: 16px;
}

.sj-k2-qadj-context-heading {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sj-k2-qadj-question-text,
.sj-k2-qadj-student-answer {
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	margin: 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.sj-k2-qadj-student-answer {
	border-left-color: #3b82f6;
}

.sj-k2-qadj-field {
	margin-bottom: 20px;
}

.sj-k2-qadj-field label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	margin-bottom: 8px;
}

.sj-k2-qadj-field-hint {
	font-weight: 400;
	color: #64748b;
	font-size: 13px;
	margin-left: 6px;
}

.sj-k2-qadj-score-box {
	background: #f0f9ff;
	border: 2px solid #3b82f6;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.sj-k2-qadj-score-label {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
}

.sj-k2-qadj-score-value {
	font-size: 20px;
	font-weight: 700;
	color: #1e40af;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sj-k2-qadj-score-delta {
	font-size: 14px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
	background: #f0f9ff;
	color: #1e40af;
	border: 1px solid #3b82f6;
}

.sj-k2-qadj-criteria-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.sj-k2-qadj-criteria-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #64748b;
	cursor: help;
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.sj-k2-qadj-criteria-hint:hover {
	background-color: #f1f5f9;
}

.sj-k2-qadj-hint-icon {
	font-size: 14px;
}

.sj-k2-qadj-hint-text {
	font-weight: 500;
}

.sj-k2-qadj-criteria-list {
	padding: 16px;
	background: #ffffff;
	border-radius: 6px;
	border: 2px solid #e2e8f0;
}

.sj-k2-qadj-criterion {
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.sj-k2-qadj-criterion:last-child {
	margin-bottom: 0;
}

.sj-k2-qadj-criterion--awarded {
	background-color: #f0fdf4;
	border-left: 3px solid #22c55e;
}

.sj-k2-qadj-criterion--not-awarded {
	background-color: #fef2f2;
	border-left: 3px solid #ef4444;
}

.sj-k2-qadj-criterion--award-capped {
	opacity: 0.72;
}

.sj-k2-qadj-criterion--award-capped .sj-k2-qadj-criterion-label {
	cursor: not-allowed;
}

.sj-k2-qadj-criterion-label input[type='checkbox']:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.sj-k2-qadj-criterion:hover {
	opacity: 0.95;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sj-k2-qadj-criterion-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #334155;
	user-select: none;
	transition: opacity 0.1s ease;
}

.sj-k2-qadj-criterion-label:active {
	opacity: 0.85;
}

.sj-k2-qadj-criterion-label input[type='checkbox'] {
	margin-top: 2px;
	cursor: pointer;
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
	flex-shrink: 0;
}

.sj-k2-qadj-criterion-icon {
	font-size: 16px;
	font-weight: bold;
	flex-shrink: 0;
	width: 20px;
}

.sj-k2-qadj-criterion--awarded .sj-k2-qadj-criterion-icon {
	color: #16a34a;
}

.sj-k2-qadj-criterion--not-awarded .sj-k2-qadj-criterion-icon {
	color: #dc2626;
}

.sj-k2-qadj-criterion-text {
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.sj-k2-qadj-criterion-comment {
	margin: 6px 0 0 46px;
	font-size: 13px;
	color: #64748b;
	font-style: italic;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.sj-k2-qadj-feedback {
	width: 100%;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.sj-k2-qadj-feedback:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sj-k2-qadj-footer {
	padding: 16px 24px;
	border-top: 1px solid #e2e8f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.sj-k2-qadj-btn-secondary,
.sj-k2-qadj-btn-primary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

.sj-k2-qadj-btn-secondary {
	background: white;
	border: 1px solid #cbd5e1;
	color: #334155;
}

.sj-k2-qadj-btn-secondary:hover:not(:disabled) {
	background-color: #f8fafc;
}

.sj-k2-qadj-btn-primary {
	background: #3b82f6;
	color: white;
}

.sj-k2-qadj-btn-primary:hover:not(:disabled) {
	background: #2563eb;
}

@media (max-width: 768px) {
	.sj-k2-qadj-modal {
		max-width: 95%;
		max-height: 95vh;
	}

	.sj-k2-qadj-body {
		padding: 16px;
	}

	.sj-k2-qadj-header {
		padding: 16px;
	}
}
/* Mathematics Card Variants */
.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* Shared Body Helpers */

/* AI Practice Specific */
.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(99, 102, 241, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #3730a3; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Mathematics Questions Card */
.lj-math-questions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-math-questions__question {
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-questions__prompt {
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 12px;
}

.lj-math-questions__options {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-math-questions__options li {
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

/* Step Order Card Styles */
.lj-math-step-order {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-math-step-order__equations {
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(251, 146, 60, 0.06) 100%);
	border: 2px solid rgba(236, 72, 153, 0.2);
	text-align: center;
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1);
}

.lj-math-step-order__label {
	margin: 0 0 12px 0;
	font-weight: 700;
	color: #be185d;
	font-size: 16px;
}

.lj-math-step-order__equation {
	margin: 8px 0;
	font-size: 20px;
	color: #9f1239;
	font-weight: 600;
}

.lj-math-step-order__bank,
.lj-math-step-order__order {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-step-order__heading {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #be185d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	display: inline-block;
}

.lj-math-step-order__bank .lj-math-step-order__heading {
	color: #c2410c;
}

.lj-math-step-order__order .lj-math-step-order__heading {
	color: #047857;
}

.lj-math-step-order__bank {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
    border: 3px dashed rgba(251, 146, 60, 0.4);
    min-height: 120px;
    box-shadow: 0 4px 16px rgba(251, 146, 60, 0.15);
    position: relative;
    overflow: hidden;
}

.lj-math-step-order__bank::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(251, 146, 60, 0.03) 10px,
        rgba(251, 146, 60, 0.03) 20px
    );
    animation: slidePattern 20s linear infinite;
    pointer-events: none;
}

@keyframes slidePattern {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

.lj-math-step-order__bank-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.lj-math-step-order__order {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    border: 3px solid rgba(16, 185, 129, 0.3);
    min-height: 180px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
    position: relative;
}

.lj-math-step-order__order::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(5, 150, 105, 0.05) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 16px;
}

.lj-math-step-order__order-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	min-height: 200px;
	padding-bottom: 60px;
}

.lj-math-step-order__step {
    padding: 14px 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 100%);
	border: 2px solid rgba(236, 72, 153, 0.25);
	cursor: move;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	gap: 12px;
    position: relative;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.1);
}

.lj-math-step-order__step:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.5);
    background: linear-gradient(135deg, #ffffff 0%, rgba(251, 146, 60, 0.05) 100%);
}

.lj-math-step-order__step--bank {
	cursor: grab;
}

.lj-math-step-order__step--bank:active {
	cursor: grabbing;
}

.lj-math-step-order__step--ordered {
	cursor: grab;
}

.lj-math-step-order__step--ordered:active {
	cursor: grabbing;
}

.lj-math-step-order__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
    background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
    color: #fff;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(236, 72, 153, 0.4);
    transform: rotate(-2deg);
    transition: transform 0.2s ease;
}

.lj-math-step-order__step:hover .lj-math-step-order__step-number {
    transform: rotate(2deg) scale(1.1);
}

.lj-math-step-order__step-text {
	flex: 1;
	color: #7c2d12;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
}

.lj-math-step-order__remove {
	background: transparent;
	border: none;
	color: #f97316;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: all 0.2s ease;
}

.lj-math-step-order__remove:hover {
	color: #dc2626;
	transform: scale(1.2);
}

.lj-math-step-order__empty,
.lj-math-step-order__placeholder {
	padding: 20px;
	text-align: center;
	color: #f97316;
	font-style: italic;
	margin: 0;
	font-weight: 500;
}

.lj-math-step-order__actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.lj-math-step-order__reset {
	background: transparent;
	border: 2px solid rgba(236, 72, 153, 0.3);
	color: #ec4899;
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 8px;
	transition: all 0.2s ease;
	font-weight: 600;
}

.lj-math-step-order__reset:hover {
	background: rgba(236, 72, 153, 0.1);
	color: #be185d;
	border-color: rgba(236, 72, 153, 0.5);
	transform: translateY(-1px);
}

.lj-math-step-order__feedback {
	padding: 14px;
	border-radius: 10px;
	text-align: center;
	font-weight: 500;
	animation: practiceFadeIn 0.4s ease-out;
}

.lj-math-step-order__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
	animation: practiceFadeIn 0.4s ease-out, practiceCorrectAnswer 0.6s ease-out;
}

.lj-math-step-order__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
	animation: practiceFadeIn 0.4s ease-out, practiceShake 0.5s ease-out;
}

.lj-math-step-order__instructions {
	margin-bottom: 16px;
	color: #9f1239;
	font-weight: 500;
}

.lj-math-step-order__step--ordered[data-just-dropped="true"] {
    animation: popIn 0.35s ease-out, glowPulseMath 1.2s ease-out;
    border-color: rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
}

@keyframes glowPulseMath {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.0); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.2); }
}

@keyframes popIn {
    0% { transform: scale(0.96); opacity: 0.6; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.0); }
    50% { box-shadow: 0 0 0 6px rgba(34,211,238,0.15); }
}

/* Step Fill Card Styles */
.lj-math-step-fill {
	display: flex;
	flex-direction: column;
	gap: 24px;
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-math-step-fill__instructions {
	margin-bottom: 16px;
	color: #475569;
	font-size: 15px;
	line-height: 1.6;
}

.lj-math-step-fill__equations {
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
	border: 2px solid rgba(99, 102, 241, 0.15);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: practiceFadeIn 0.6s ease-out;
}

.lj-math-step-fill__equations:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
}

.lj-math-step-fill__label {
	margin: 0 0 16px 0;
	font-weight: 700;
	color: #4f46e5;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-math-step-fill__equation {
	margin: 10px 0;
	font-size: 20px;
	color: #1e293b;
	font-weight: 500;
	text-align: center;
}

.lj-math-step-fill__steps-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-math-step-fill__step {
	padding: 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
	border: 2px solid rgba(99, 102, 241, 0.25);
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
	transition: all 0.3s ease;
	animation: practiceFadeIn 0.7s ease-out;
	position: relative;
	overflow: hidden;
}

.lj-math-step-fill__step-label {
	font-weight: 700;
	color: #6366f1;
	margin-bottom: 16px;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-math-step-fill__step-content {
	font-size: 19px;
	color: #1e293b;
	margin-bottom: 16px;
	line-height: 1.9;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-weight: 500;
}

.lj-math-step-fill__input {
	padding: 12px 16px;
	border: 3px solid rgba(99, 102, 241, 0.3);
	border-radius: 10px;
	font-size: 19px;
	min-width: 140px;
	text-align: center;
	background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 100%);
	color: #1e293b;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.lj-math-step-fill__input:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(99, 102, 241, 0.2);
	transform: scale(1.02);
	background: #ffffff;
}

.lj-math-step-fill__input.is-correct {
	border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
	color: #059669;
	animation: practiceCorrectAnswer 0.7s ease-out;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
	font-weight: 700;
}

.lj-math-step-fill__input.is-incorrect {
	border-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
	color: #dc2626;
	animation: practiceShake 0.6s ease-out;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.lj-math-step-fill__hint {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
	border: 2px solid rgba(251, 191, 36, 0.4);
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
	animation: practiceFadeIn 0.5s ease-out;
	box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-math-step-fill__feedback {
	padding: 18px 20px;
	border-radius: 14px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	animation: practiceFadeIn 0.5s ease-out;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.lj-math-step-fill__feedback.is-correct {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
	color: #047857;
	border: 2px solid rgba(16, 185, 129, 0.3);
	animation: practiceFadeIn 0.5s ease-out, practiceCorrectAnswer 0.7s ease-out;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.lj-math-step-fill__feedback.is-incorrect {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.12) 100%);
	color: #991b1b;
	border: 2px solid rgba(239, 68, 68, 0.3);
	animation: practiceFadeIn 0.5s ease-out, practiceShake 0.6s ease-out;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.lj-math-step-fill__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: practiceFadeIn 0.8s ease-out;
}

.lj-math-step-fill__main-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.lj-math-step-fill__reset {
	background: transparent;
	border: 2px solid rgba(100, 116, 139, 0.25);
	color: #64748b;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	font-size: 14px;
}

.lj-math-step-fill__reset:hover {
	background: rgba(100, 116, 139, 0.08);
	color: #475569;
	border-color: rgba(100, 116, 139, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(100, 116, 139, 0.15);
}

/* Step Fill Congratulations Styles */
.lj-math-step-fill__congratulations {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 400px;
	animation: mathStepFillFadeIn 0.4s ease-out;
}

.lj-math-step-fill__congratulations-content {
	position: relative;
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	text-align: center;
	width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	animation: mathStepFillCongratsPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	margin: 0 auto;
}

.lj-math-step-fill__congratulations-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 12px;
	animation: mathStepFillCongratsBounce 1s ease-out 0.3s both;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.lj-math-step-fill__congratulations-title {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #ec4899 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: mathStepFillCongratsSlideUp 0.6s ease-out 0.2s both;
}

.lj-math-step-fill__congratulations-message {
	margin: 0 0 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: #475569;
	animation: mathStepFillCongratsSlideUp 0.6s ease-out 0.4s both;
}

.lj-math-step-fill__congratulations-emoji {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	animation: mathStepFillCongratsSlideUp 0.6s ease-out 0.6s both;
}

.lj-math-step-fill__congratulations-emoji span {
	font-size: 24px;
	display: inline-block;
	animation: mathStepFillCongratsEmojiFloat 2s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.lj-math-step-fill__congratulations-emoji span:nth-child(1) { animation-delay: 0s; }
.lj-math-step-fill__congratulations-emoji span:nth-child(2) { animation-delay: 0.2s; }
.lj-math-step-fill__congratulations-emoji span:nth-child(3) { animation-delay: 0.4s; }
.lj-math-step-fill__congratulations-emoji span:nth-child(4) { animation-delay: 0.6s; }
.lj-math-step-fill__congratulations-emoji span:nth-child(5) { animation-delay: 0.8s; }

.lj-math-step-fill__try-again {
	appearance: none;
	border: none;
	background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
	animation: mathStepFillCongratsSlideUp 0.6s ease-out 0.8s both;
}

.lj-math-step-fill__try-again:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
	background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
}

.lj-math-step-fill__try-again:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

@keyframes mathStepFillFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mathStepFillCongratsPop {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mathStepFillCongratsBounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0) scale(1);
	}
	40% {
		transform: translateY(-8px) scale(1.05);
	}
	60% {
		transform: translateY(-4px) scale(1.02);
	}
}

@keyframes mathStepFillCongratsSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mathStepFillCongratsEmojiFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-4px) rotate(3deg);
	}
}

/* Animation Keyframes */
@keyframes practiceCorrectAnswer {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}
	50% {
		transform: translateY(-2px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes practiceShake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-8px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(8px);
	}
}

@keyframes practiceFadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------------------- */
/* Math Quick Check UX   */
/* ---------------------- */
.lj-quick-check--math {
	position: relative;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 32px !important;
	align-items: center !important;
}

@media (max-width: 768px) {
	.lj-quick-check--math {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
}

.lj-quick-check--math .lj-quick-check__question-label {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: #6366f1;
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-quick-check--math .lj-quick-check__question {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	grid-column: 1;
}

.lj-quick-check--math .lj-quick-check__question p {
	margin: 0;
	font-weight: 600;
	color: #0f172a;
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
}

.lj-quick-check--math .lj-quick-check__options {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-quick-check--math .lj-quick-check__option {
	appearance: none;
	border: 0;
	text-align: left;
	padding: 14px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(34,211,238,0.06));
	border: 2px solid rgba(99,102,241,0.25);
	color: #0f172a;
	font-weight: 600;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
	cursor: pointer;
}

.lj-quick-check--math .lj-quick-check__option:hover:not([disabled]) {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(15,23,42,0.12);
	border-color: rgba(99,102,241,0.45);
}

.lj-quick-check--math .lj-quick-check__option.is-selected {
	background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(34,211,238,0.12));
	border-color: rgba(99,102,241,0.55);
}

.lj-quick-check--math .lj-quick-check__option.is-correct {
	background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.12));
	border-color: rgba(16,185,129,0.5);
	box-shadow: 0 6px 16px rgba(16,185,129,0.25);
	animation: practiceCorrectAnswer .6s ease-out;
}

.lj-quick-check--math .lj-quick-check__option.is-incorrect {
	background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(220,38,38,0.12));
	border-color: rgba(239,68,68,0.5);
	box-shadow: 0 6px 16px rgba(239,68,68,0.25);
	animation: practiceShake .55s ease-out;
}

.lj-quick-check--math .lj-quick-check__rationale {
	grid-column: 1 / -1;
	margin-top: 16px;
	padding: 16px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
}

.lj-quick-check--math .lj-quick-check__rationale.is-correct {
	background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.08));
	border: 2px solid rgba(16,185,129,0.3);
	color: #047857;
}

.lj-quick-check--math .lj-quick-check__rationale.is-incorrect {
	background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(220,38,38,0.08));
	border: 2px solid rgba(239,68,68,0.3);
	color: #991b1b;
}

.lj-quick-check--math .lj-quick-check__retry-question {
	appearance: none;
	border: 2px solid rgba(239,68,68,0.5);
	background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.1));
	color: #991b1b;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 24px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-top: 12px;
	display: inline-block;
}

.lj-quick-check--math .lj-quick-check__retry-question:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
	background: linear-gradient(135deg, rgba(239,68,68,0.25), rgba(220,38,38,0.15));
	border-color: rgba(239,68,68,0.7);
}

.lj-quick-check--math .lj-quick-check__retry-question:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

/* Celebration burst */
.lj-quick-check--math .lj-quick-check__celebrate {
	position: absolute;
	top: 8px;
	right: 10px;
	display: flex;
	gap: 6px;
	pointer-events: none;
}

.lj-quick-check--math .lj-quick-check__celebrate span {
	animation: quickCheckFloat .8s ease-out forwards;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Level up ping */
.lj-quick-check--math .lj-quick-check__levelup {
	position: relative;
	margin-top: 16px;
	background: #ffffff;
	border: 2px solid rgba(99,102,241,0.35);
	border-radius: 999px;
	padding: 6px 12px;
	font-weight: 800;
	color: #4f46e5;
	box-shadow: 0 8px 18px rgba(79,70,229,0.18);
	animation: quickCheckPop .6s ease-out;
	display: inline-block;
}

@keyframes quickCheckPop {
	0% { transform: scale(.85); opacity: 0; }
	60% { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes quickCheckFloat {
	0% { transform: translateY(6px) scale(.9); opacity: .0; }
	60% { transform: translateY(-8px) scale(1.05); opacity: 1; }
	100% { transform: translateY(-14px) scale(1); opacity: 0; }
}

/* Congratulations Animation */
.lj-quick-check--math .lj-quick-check__congratulations {
	grid-column: 1 / -1 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 400px;
	animation: quickCheckFadeIn 0.4s ease-out;
}

.lj-quick-check--math .lj-quick-check__congratulations-content {
	position: relative;
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	text-align: center;
	width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	animation: quickCheckCongratsPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	margin: 0 auto;
}

.lj-quick-check--math .lj-quick-check__congratulations-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 12px;
	animation: quickCheckCongratsBounce 1s ease-out 0.3s both;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.lj-quick-check--math .lj-quick-check__congratulations-title {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #ec4899 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: quickCheckCongratsSlideUp 0.6s ease-out 0.2s both;
}

.lj-quick-check--math .lj-quick-check__congratulations-message {
	margin: 0 0 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: #475569;
	animation: quickCheckCongratsSlideUp 0.6s ease-out 0.4s both;
}

.lj-quick-check--math .lj-quick-check__congratulations-emoji {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	animation: quickCheckCongratsSlideUp 0.6s ease-out 0.6s both;
}

.lj-quick-check--math .lj-quick-check__congratulations-emoji span {
	font-size: 24px;
	display: inline-block;
	animation: quickCheckCongratsEmojiFloat 2s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.lj-quick-check--math .lj-quick-check__congratulations-emoji span:nth-child(1) { animation-delay: 0s; }
.lj-quick-check--math .lj-quick-check__congratulations-emoji span:nth-child(2) { animation-delay: 0.2s; }
.lj-quick-check--math .lj-quick-check__congratulations-emoji span:nth-child(3) { animation-delay: 0.4s; }
.lj-quick-check--math .lj-quick-check__congratulations-emoji span:nth-child(4) { animation-delay: 0.6s; }
.lj-quick-check--math .lj-quick-check__congratulations-emoji span:nth-child(5) { animation-delay: 0.8s; }

.lj-quick-check--math .lj-quick-check__try-again {
	appearance: none;
	border: none;
	background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
	animation: quickCheckCongratsSlideUp 0.6s ease-out 0.8s both;
}

.lj-quick-check--math .lj-quick-check__try-again:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
	background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
}

.lj-quick-check--math .lj-quick-check__try-again:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

@keyframes quickCheckFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes quickCheckCongratsPop {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes quickCheckCongratsBounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0) scale(1);
	}
	40% {
		transform: translateY(-8px) scale(1.05);
	}
	60% {
		transform: translateY(-4px) scale(1.02);
	}
}

@keyframes quickCheckCongratsSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes quickCheckCongratsEmojiFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-4px) rotate(3deg);
	}
}

/* Practice Questions Interactive Styles - Following English MCQ Design */
.lj-math-questions--interactive {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	max-width: 100%;
}

.lj-math-questions--interactive .lj-math-questions__question {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	background: #fff;
	border: none;
	border-radius: 0;
	padding: 0;
}

.lj-math-questions--interactive .lj-math-questions__question p {
	margin: 0;
	font-weight: 600;
	color: #0f172a;
	font-size: 18px;
	line-height: 1.6;
	text-align: left;
}

.lj-math-questions--interactive .lj-math-questions__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.lj-math-questions--interactive .lj-math-questions__option {
	appearance: none;
	border: 2px solid #2079b0;
	text-align: left;
	padding: 14px 18px;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	font-weight: 600;
	font-size: 16px;
	transition: all 0.2s ease;
	cursor: pointer;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-math-questions--interactive .lj-math-questions__option:hover:not([disabled]) {
	border-color: rgba(32, 121, 176, 0.75);
	box-shadow: 0 4px 16px rgba(32, 121, 176, 0.2);
	transform: translateY(-1px);
}

.lj-math-questions--interactive .lj-math-questions__option.is-selected {
	border-color: #2079b0;
	background: rgba(32, 121, 176, 0.08);
	box-shadow: 0 4px 16px rgba(32, 121, 176, 0.25);
}

.lj-math-questions--interactive .lj-math-questions__option.is-correct {
	border-color: #22c55e;
	background: rgba(34, 197, 94, 0.08);
	animation: mathQuestionsCorrectOptionAnimation 0.5s ease-out;
}

.lj-math-questions--interactive .lj-math-questions__option.is-incorrect {
	border-color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
}

@keyframes mathQuestionsCorrectOptionAnimation {
	0% {
		transform: scale(0.98);
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
	50% {
		transform: scale(1.02);
		box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

.lj-math-questions--interactive .lj-math-questions__rationale {
	margin-top: 16px;
	padding: 16px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	width: 100%;
}

.lj-math-questions--interactive .lj-math-questions__rationale.is-correct {
	background: rgba(34, 197, 94, 0.12);
	border: 2px solid rgba(34, 197, 94, 0.3);
	color: #047857;
}

.lj-math-questions--interactive .lj-math-questions__rationale.is-incorrect {
	background: rgba(239, 68, 68, 0.12);
	border: 2px solid rgba(239, 68, 68, 0.3);
	color: #991b1b;
}

.lj-math-questions--interactive .lj-math-questions__retry-question {
	appearance: none;
	border: 2px solid rgba(239,68,68,0.5);
	background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.1));
	color: #991b1b;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 24px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-top: 12px;
	display: inline-block;
}

.lj-math-questions--interactive .lj-math-questions__retry-question:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
	background: linear-gradient(135deg, rgba(239,68,68,0.25), rgba(220,38,38,0.15));
	border-color: rgba(239,68,68,0.7);
}

.lj-math-questions--interactive .lj-math-questions__retry-question:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

/* Celebration burst */
.lj-math-questions--interactive .lj-math-questions__celebrate {
	position: absolute;
	top: 8px;
	right: 10px;
	display: flex;
	gap: 6px;
	pointer-events: none;
}

.lj-math-questions--interactive .lj-math-questions__celebrate span {
	animation: mathQuestionsFloat .8s ease-out forwards;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Level up ping */
.lj-math-questions--interactive .lj-math-questions__levelup {
	position: relative;
	margin-top: 16px;
	background: rgba(32, 121, 176, 0.1);
	border: 2px solid rgba(32, 121, 176, 0.3);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 800;
	color: #1e40af;
	box-shadow: 0 4px 12px rgba(32, 121, 176, 0.15);
	animation: mathQuestionsPop .6s ease-out;
	display: inline-block;
}

@keyframes mathQuestionsPop {
	0% { transform: scale(.85); opacity: 0; }
	60% { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes mathQuestionsFloat {
	0% { transform: translateY(6px) scale(.9); opacity: .0; }
	60% { transform: translateY(-8px) scale(1.05); opacity: 1; }
	100% { transform: translateY(-14px) scale(1); opacity: 0; }
}

/* Congratulations Animation */
.lj-math-questions--interactive .lj-math-questions__congratulations {
	grid-column: 1 / -1 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 400px;
	animation: mathQuestionsFadeIn 0.4s ease-out;
}

.lj-math-questions--interactive .lj-math-questions__congratulations-content {
	position: relative;
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	text-align: center;
	width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	animation: mathQuestionsCongratsPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	margin: 0 auto;
}

.lj-math-questions--interactive .lj-math-questions__congratulations-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 12px;
	animation: mathQuestionsCongratsBounce 1s ease-out 0.3s both;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.lj-math-questions--interactive .lj-math-questions__congratulations-title {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #ec4899 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: mathQuestionsCongratsSlideUp 0.6s ease-out 0.2s both;
}

.lj-math-questions--interactive .lj-math-questions__congratulations-message {
	margin: 0 0 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: #475569;
	animation: mathQuestionsCongratsSlideUp 0.6s ease-out 0.4s both;
}

.lj-math-questions--interactive .lj-math-questions__congratulations-emoji {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	animation: mathQuestionsCongratsSlideUp 0.6s ease-out 0.6s both;
}

.lj-math-questions--interactive .lj-math-questions__congratulations-emoji span {
	font-size: 24px;
	display: inline-block;
	animation: mathQuestionsCongratsEmojiFloat 2s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.lj-math-questions--interactive .lj-math-questions__congratulations-emoji span:nth-child(1) { animation-delay: 0s; }
.lj-math-questions--interactive .lj-math-questions__congratulations-emoji span:nth-child(2) { animation-delay: 0.2s; }
.lj-math-questions--interactive .lj-math-questions__congratulations-emoji span:nth-child(3) { animation-delay: 0.4s; }
.lj-math-questions--interactive .lj-math-questions__congratulations-emoji span:nth-child(4) { animation-delay: 0.6s; }
.lj-math-questions--interactive .lj-math-questions__congratulations-emoji span:nth-child(5) { animation-delay: 0.8s; }

.lj-math-questions--interactive .lj-math-questions__try-again {
	appearance: none;
	border: none;
	background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
	animation: mathQuestionsCongratsSlideUp 0.6s ease-out 0.8s both;
}

.lj-math-questions--interactive .lj-math-questions__try-again:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
	background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
}

.lj-math-questions--interactive .lj-math-questions__try-again:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

@keyframes mathQuestionsFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mathQuestionsCongratsPop {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mathQuestionsCongratsBounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0) scale(1);
	}
	40% {
		transform: translateY(-8px) scale(1.05);
	}
	60% {
		transform: translateY(-4px) scale(1.02);
	}
}

@keyframes mathQuestionsCongratsSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mathQuestionsCongratsEmojiFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-4px) rotate(3deg);
	}
}

/* Step Order Congratulations Styles */
.lj-math-step-order__congratulations {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 400px;
	animation: stepOrderFadeIn 0.4s ease-out;
}

.lj-math-step-order__congratulations-content {
	position: relative;
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	text-align: center;
	width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	animation: stepOrderCongratsPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	margin: 0 auto;
}

.lj-math-step-order__congratulations-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 12px;
	animation: stepOrderCongratsBounce 1s ease-out 0.3s both;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.lj-math-step-order__congratulations-title {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, #ec4899 0%, #f97316 50%, #10b981 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: stepOrderCongratsSlideUp 0.6s ease-out 0.2s both;
}

.lj-math-step-order__congratulations-message {
	margin: 0 0 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: #9f1239;
	animation: stepOrderCongratsSlideUp 0.6s ease-out 0.4s both;
}

.lj-math-step-order__congratulations-emoji {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	animation: stepOrderCongratsSlideUp 0.6s ease-out 0.6s both;
}

.lj-math-step-order__congratulations-emoji span {
	font-size: 24px;
	display: inline-block;
	animation: stepOrderCongratsEmojiFloat 2s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.lj-math-step-order__congratulations-emoji span:nth-child(1) { animation-delay: 0s; }
.lj-math-step-order__congratulations-emoji span:nth-child(2) { animation-delay: 0.2s; }
.lj-math-step-order__congratulations-emoji span:nth-child(3) { animation-delay: 0.4s; }
.lj-math-step-order__congratulations-emoji span:nth-child(4) { animation-delay: 0.6s; }
.lj-math-step-order__congratulations-emoji span:nth-child(5) { animation-delay: 0.8s; }

.lj-math-step-order__try-again {
	appearance: none;
	border: none;
	background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
	animation: stepOrderCongratsSlideUp 0.6s ease-out 0.8s both;
}

.lj-math-step-order__try-again:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
	background: linear-gradient(135deg, #be185d 0%, #ea580c 100%);
}

.lj-math-step-order__try-again:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

@keyframes stepOrderFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes stepOrderCongratsPop {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes stepOrderCongratsBounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0) scale(1);
	}
	40% {
		transform: translateY(-8px) scale(1.05);
	}
	60% {
		transform: translateY(-4px) scale(1.02);
	}
}

@keyframes stepOrderCongratsSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes stepOrderCongratsEmojiFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-4px) rotate(3deg);
	}
}


/* Override all button margin-top globally */
#lj-runner button,
#lj-runner .button,
button.button,
button {
	margin-top: 0 !important;
}

/* Content Card Variants for Mathematics */
.lj-card.lj-card--content { background: inherit; }
.lj-card.lj-card--content-examples {
	background: inherit;
	border: 1px solid rgba(59, 130, 246, 0.12);
	box-shadow: 0 18px 45px -28px rgba(30, 64, 175, 0.3);
}
.lj-card.lj-card--example { background: inherit; border: 1px solid rgba(51, 92, 255, 0.15); }
.lj-card.lj-card--example .lj-card__body { text-align: left; }
.lj-card.lj-card--example .lj-card__list { align-items: flex-start; }
.lj-card.lj-card--concept-breakdown {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Step-by-Step Card for Mathematics */
.lj-math-step-by-step {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-math-step-by-step__problem {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	margin-bottom: 8px;
}

.lj-math-step-by-step__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	counter-reset: step-counter;
}

.lj-math-step-by-step__step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.04) 0%, rgba(99, 102, 241, 0.04) 100%);
	border: 1px solid rgba(139, 92, 246, 0.15);
	position: relative;
}

.lj-math-step-by-step__step-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.lj-math-step-by-step__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
}

.lj-math-step-by-step__step-label {
	color: #475569;
	font-weight: 500;
}

.lj-math-step-by-step__step-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-step-by-step__step-equation {
	margin-top: 8px;
	padding: 12px;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
	border: 2px solid rgba(99, 102, 241, 0.25);
	text-align: center;
	font-family: 'KaTeX_Main', 'Times New Roman', serif;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.lj-math-step-by-step__solution {
	padding: 16px;
	border-radius: 12px;
	background: rgba(22, 163, 74, 0.1);
	border: 1px solid rgba(22, 163, 74, 0.3);
	color: #15803d;
	font-weight: 500;
	margin-top: 8px;
}

/* Math Equation Styling */
.lj-math-step-by-step__step-equation,
.lj-math-step-by-step__problem,
.lj-math-questions__prompt,
.lj-math-questions__options li {
	/* Ensure MathJax renders properly */
	line-height: 1.6;
}

/* MathJax specific styling */
.MathJax,
.MathJax_Display {
	margin: 0.5em 0;
}

/* Concept Breakdown Card */
.lj-concept-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 900px) {
	.lj-concept-card.has-spotlights {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 24px;
	}
}

.lj-concept-card__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-concept-card__intro {
	padding: 16px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(59,130,246,0.03));
	border: 1px solid rgba(59,130,246,0.18);
	box-shadow: 0 10px 24px -18px rgba(59,130,246,0.45);
}

.lj-concept-card__sections {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-concept-card__section {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lj-concept-card__section:hover {
	border-color: rgba(59,130,246,0.25);
	box-shadow: 0 14px 36px -24px rgba(59,130,246,0.35);
	background: rgba(59,130,246,0.02);
}

.lj-concept-card__sectionSummary {
	padding: 14px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	background: rgba(255,255,255,0.9);
}

.lj-concept-card__sectionSummary::-webkit-details-marker {
	display: none;
}

.lj-concept-card__sectionTitle {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #1e293b;
	font-weight: 600;
}

.lj-concept-card__sectionTitleIcon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #3b82f6, #60a5fa);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
	animation: lj-pulse 2.2s ease-in-out infinite;
}

@keyframes lj-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.9; }
}

.lj-concept-card__sectionIndicator {
	width: 12px;
	height: 12px;
	border-right: 2px solid rgba(51,65,85,0.9);
	border-bottom: 2px solid rgba(51,65,85,0.9);
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
	flex: 0 0 auto;
}

.lj-concept-card__section[open] .lj-concept-card__sectionIndicator {
	transform: rotate(45deg);
}

.lj-concept-card__sectionBody {
	padding: 0 16px 16px 16px;
	margin-top: 8px;
}

/* Friendlier numbered steps */
.lj-concept-card__sectionBody ol {
	counter-reset: concept-step;
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-concept-card__sectionBody ol > li {
	counter-increment: concept-step;
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: start;
	gap: 10px;
}

.lj-concept-card__sectionBody ol > li::before {
	content: counter(concept-step);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(59,130,246,0.15);
	color: #3b82f6;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: inset 0 0 0 1px rgba(59,130,246,0.25);
}

/* Inline math samples inside sections */
.lj-concept-card__sectionBody .mvp-math {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-concept-card__spotlights {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
}

.lj-concept-card__spotlightsTitle {
	margin-bottom: 12px;
	color: #1e293b;
	font-weight: 600;
}

.lj-concept-card__spotlightsList {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-concept-card__spotlight {
	padding: 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-concept-card__spotlightTitle {
	margin-bottom: 6px;
	color: #3b82f6;
	font-weight: 600;
}

.lj-concept-card__spotlightBody {
	color: #475569;
}

/* Content Examples Card */
.lj-content-card__layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 900px) {
	.lj-content-card__layout.has-examples {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 24px;
	}
}

.lj-content-card__main {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-content-card__main.has-icon {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.lj-content-card__icon {
	font-size: 72px;
	line-height: 1;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-origin: center;
}

/* Different animation styles based on icon type */
.lj-content-card__icon span {
	display: inline-block;
	filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
}

/* Default animation: Float + Rotate */
.lj-content-card__icon span {
	animation: lj-math-icon-float 3s ease-in-out infinite, lj-math-icon-rotate 4s ease-in-out infinite;
}

/* Animation for calculator/number icons 🔢 */
.lj-content-card__icon[data-icon="🔢"] span {
	animation: lj-math-icon-pulse 2s ease-in-out infinite, lj-math-icon-float 3s ease-in-out infinite;
}

/* Animation for substitution/swap icons 🔄 */
.lj-content-card__icon[data-icon="🔄"] span {
	animation: lj-math-icon-spin-slow 6s linear infinite;
}

/* Animation for elimination/merge icons ➕ */
.lj-content-card__icon[data-icon="➕"] span {
	animation: lj-math-icon-bounce 2.5s ease-in-out infinite;
}

/* Animation for chart/graph icons 📊 */
.lj-content-card__icon[data-icon="📊"] span {
	animation: lj-math-icon-scale 2s ease-in-out infinite;
}

/* Animation for lightbulb/idea icons 💡 */
.lj-content-card__icon[data-icon="💡"] span {
	animation: lj-math-icon-glow 2s ease-in-out infinite, lj-math-icon-float 3s ease-in-out infinite;
}

/* Keyframe animations */
@keyframes lj-math-icon-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes lj-math-icon-rotate {
	0%, 100% {
		transform: rotate(0deg) scale(1);
	}
	25% {
		transform: rotate(5deg) scale(1.05);
	}
	75% {
		transform: rotate(-5deg) scale(1.05);
	}
}

@keyframes lj-math-icon-pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.9;
	}
}

@keyframes lj-math-icon-spin-slow {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes lj-math-icon-bounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	25% {
		transform: translateY(-15px) scale(1.1);
	}
	50% {
		transform: translateY(-5px) scale(1.05);
	}
	75% {
		transform: translateY(-12px) scale(1.08);
	}
}

@keyframes lj-math-icon-scale {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

@keyframes lj-math-icon-glow {
	0%, 100% {
		filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3)) drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
	}
	50% {
		filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.5)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lj-content-card__icon,
	.lj-content-card__icon span {
		animation: none !important;
	}
}

/* Math Examples Card Background - Solid Color (Math Only) */
.lj-math-content-examples,
.lj-card.lj-card--content-examples .lj-math-content-examples,
#lj-runner .lj-card.lj-card--content-examples .lj-math-content-examples {
	padding: 16px !important;
	border-radius: 12px !important;
	background: #53b4c4 !important;
	background-color: #53b4c4 !important;
	border: 1px solid rgba(83, 180, 196, 0.3) !important;
}

.lj-math-content-examples .lj-content-card__examplesTitle,
.lj-card.lj-card--content-examples .lj-math-content-examples .lj-content-card__examplesTitle,
#lj-runner .lj-card.lj-card--content-examples .lj-math-content-examples .lj-content-card__examplesTitle {
	margin-bottom: 12px;
	color: #ffffff;
	font-weight: 600;
}

.lj-content-card__examplesList {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-content-card__examplesList li {
	padding: 8px 12px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

/* Math Banner Card */
.lj-math-banner {
  position: relative;
  overflow: hidden;
  color: #0b1027;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  /* Remove padding - use CardShell body padding instead */
}

.lj-math-banner__bg {
  position: absolute;
  inset: 0;
  /* Extend background to fill CardShell body area */
  margin: -20px -24px -24px -24px;
  padding: 20px 24px 24px;
  background: linear-gradient(135deg, #ede9fe 0%, #cffafe 50%, #fce7f3 100%);
  animation: lj-math-banner-bg 12s ease-in-out infinite;
  z-index: -2;
}

@keyframes lj-math-banner-bg {
  0% { filter: hue-rotate(0deg) saturate(105%); }
  50% { filter: hue-rotate(25deg) saturate(115%); }
  100% { filter: hue-rotate(0deg) saturate(105%); }
}

.lj-math-banner__shapes { 
  position: absolute; 
  inset: 0;
  margin: -20px -24px -24px -24px;
  padding: 20px 24px 24px;
  z-index: -1; 
}
.lj-math-banner__shape {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,92,246,0.25), rgba(139,92,246,0) 70%);
  animation: lj-float 9s ease-in-out infinite;
}
.lj-math-banner__shape:nth-child(1) { top: -40px; left: -40px; animation-delay: .2s; }
.lj-math-banner__shape:nth-child(2) { bottom: -30px; right: -30px; animation-delay: .8s; }
.lj-math-banner__shape:nth-child(3) { top: 20%; right: 18%; width: 120px; height: 120px; animation-delay: 1.6s; }

@keyframes lj-float {
  0%,100% { transform: translateY(0) translateX(0) scale(1); opacity: .9; }
  50% { transform: translateY(-8px) translateX(6px) scale(1.03); opacity: 1; }
}

.lj-math-banner__content { text-align: center; }
.lj-math-banner__top {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #334155;
  opacity: .95;
  transform: translateY(6px);
  animation: lj-slide-up .6s ease-out .05s both;
}
.lj-math-banner__top span { background: linear-gradient(90deg, #475569, #1f2937); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lj-math-banner__main {
  margin: 6px 0 4px 0;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lj-fade-in .55s ease-out .15s both;
}

.lj-math-banner__subtitle { margin-top: 8px; color: #334155; opacity: .95; }

@keyframes lj-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lj-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* A thin border/glow to harmonise with Math theme */
.lj-card.lj-card--banner {
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: 0 20px 45px -30px rgba(99,102,241,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lj-math-banner__bg,
  .lj-math-banner__shape { animation: none; }
}

/* Math AI Substitution Card */
.lj-math-substitution__generator {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-substitution__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lj-math-substitution__control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-math-substitution__control span {
	font-size: 14px;
	font-weight: 500;
	color: #475569;
}

.lj-math-substitution__control select {
	padding: 8px 12px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}

.lj-math-substitution__loading,
.lj-math-substitution__error {
	padding: 12px;
	border-radius: 8px;
	text-align: center;
}

.lj-math-substitution__loading {
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	color: #1e293b;
}

.lj-math-substitution__error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #b91c1c;
}

/* Question Display */
.lj-math-substitution__question {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-substitution__question-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: #64748b;
}

.lj-math-substitution__question-difficulty {
	font-weight: 600;
	color: #475569;
}

.lj-math-substitution__question-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-substitution__question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-math-substitution__question-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
}

.lj-math-substitution__question-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

/* Solver Workspace */
.lj-math-substitution__solver {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-math-substitution__solver-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-substitution__solver-question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-math-substitution__solver-difficulty {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	font-size: 12px;
	font-weight: 600;
	width: fit-content;
}

.lj-math-substitution__solver-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-substitution__solver-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-substitution__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	counter-reset: step-counter;
}

.lj-math-substitution__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.lj-math-substitution__step:hover {
	border-color: rgba(59, 130, 246, 0.25);
	background: rgba(59, 130, 246, 0.02);
}

.lj-math-substitution__step.is-correct {
	border-color: rgba(22, 163, 74, 0.3);
	background: rgba(22, 163, 74, 0.05);
}

.lj-math-substitution__step.is-incorrect {
	border-color: rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.05);
}

.lj-math-substitution__step-label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lj-math-substitution__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.lj-math-substitution__step-input {
	flex: 1;
	font-family: 'KaTeX_Main', 'Times New Roman', serif;
	resize: vertical;
}

.lj-math-substitution__step-feedback {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-substitution__step-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.lj-math-substitution__step.is-correct .lj-math-substitution__step-status {
	background: rgba(22, 163, 74, 0.15);
	color: #16a34a;
}

.lj-math-substitution__step.is-incorrect .lj-math-substitution__step-status {
	background: rgba(239, 68, 68, 0.15);
	color: #dc2626;
}

.lj-math-substitution__step-message {
	flex: 1;
}

.lj-math-substitution__step-message p {
	margin: 0;
	font-size: 14px;
	color: #475569;
}

.lj-math-substitution__add-step {
	margin-top: 8px;
	width: fit-content;
}

.lj-math-substitution__overall-feedback {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	margin-top: 16px;
}

.lj-math-substitution__overall-header {
	margin-bottom: 8px;
}

.lj-math-substitution__overall-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.lj-math-substitution__overall-message {
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.lj-math-substitution__solver-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-substitution__solver-loading {
	padding: 12px;
	border-radius: 8px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	text-align: center;
	color: #1e293b;
}

.lj-math-substitution__solver-loading p {
	margin: 0;
}

/* Practice Cards Animations */

/* Quick Check Card Animations */
.lj-quick-check__option {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-quick-check__option:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.lj-quick-check__option:active:not(:disabled) {
	transform: scale(0.95);
}

.lj-quick-check__option.is-correct {
	animation: practiceCorrectAnswer 0.6s ease-out;
}

.lj-quick-check__option.is-incorrect {
	animation: practiceShake 0.5s ease-out;
}

.lj-quick-check__rationale {
	animation: practiceFadeIn 0.4s ease-out;
}

.lj-quick-check__rationale.is-correct {
	animation: practiceFadeIn 0.4s ease-out, practiceCorrectAnswer 0.6s ease-out;
}

.lj-quick-check__rationale.is-incorrect {
	animation: practiceFadeIn 0.4s ease-out, practiceShake 0.5s ease-out;
}

/* Level Progression Animation */
.lj-quick-check {
	position: relative;
}

.lj-quick-check__question,
.lj-quick-check__options {
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Answer Card Animations */
.lj-card.lj-card--answer .lj-input {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lj-card.lj-card--answer .lj-input:focus {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lj-card.lj-card--answer .button {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-card.lj-card--answer .button:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.lj-card.lj-card--answer .button:active:not(:disabled) {
	transform: scale(0.95);
}

.lj-card__feedback.is-correct {
	animation: practiceCorrectAnswer 0.6s ease-out;
}

/* Animation Keyframes */
@keyframes practiceCorrectAnswer {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}
	50% {
		transform: translateY(-2px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes practiceShake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-8px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(8px);
	}
}

@keyframes practiceFadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Level indicator animation */
.lj-dragdrop__level {
	display: flex;
	align-items: center;
	gap: 8px;
	animation: practiceFadeIn 0.4s ease-out;
}

/* Smooth level transition */
.lj-quick-check__question,
.lj-quick-check__options {
	animation: practiceFadeIn 0.4s ease-out;
}

/* Step Order Card Styles */
.lj-math-step-order {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-math-step-order__equations {
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	text-align: center;
}

.lj-math-step-order__label {
	margin: 0 0 12px 0;
	font-weight: 600;
	color: #1e293b;
}

.lj-math-step-order__equation {
	margin: 8px 0;
	font-size: 18px;
	color: #1e293b;
}

.lj-math-step-order__bank,
.lj-math-step-order__order {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-step-order__heading {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.lj-math-step-order__bank {
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(56,189,248,0.08), rgba(99,102,241,0.06));
    border: 2px dashed rgba(99, 102, 241, 0.25);
    min-height: 100px;
}

.lj-math-step-order__bank-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.lj-math-step-order__order {
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(34,211,238,0.06));
    border: 2px solid rgba(99, 102, 241, 0.25);
    min-height: 160px;
}

.lj-math-step-order__order-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	min-height: 200px;
	padding-bottom: 60px;
}

.lj-math-step-order__step {
    padding: 10px 14px;
	border-radius: 8px;
	background: #ffffff;
	border: 2px solid rgba(15, 23, 42, 0.15);
	cursor: move;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	align-items: center;
	gap: 12px;
    position: relative;
}

.lj-math-step-order__step:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
}

.lj-math-step-order__step--bank {
	cursor: grab;
}

.lj-math-step-order__step--bank:active {
	cursor: grabbing;
}

.lj-math-step-order__step--ordered {
	cursor: grab;
}

.lj-math-step-order__step--ordered:active {
	cursor: grabbing;
}

.lj-math-step-order__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    color: #fff;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}

.lj-math-step-order__step-text {
	flex: 1;
	color: #1e293b;
	font-size: 15px;
	line-height: 1.5;
}

.lj-math-step-order__remove {
	background: transparent;
	border: none;
	color: #64748b;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color 0.2s ease;
}

.lj-math-step-order__remove:hover {
	color: #dc2626;
}

.lj-math-step-order__empty,
.lj-math-step-order__placeholder {
	padding: 20px;
	text-align: center;
	color: #64748b;
	font-style: italic;
	margin: 0;
}

.lj-math-step-order__actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.lj-math-step-order__reset {
	background: transparent;
	border: none;
	color: #64748b;
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}

.lj-math-step-order__reset:hover {
	background: rgba(15, 23, 42, 0.05);
	color: #1e293b;
}

.lj-math-step-order__feedback {
	padding: 14px;
	border-radius: 10px;
	text-align: center;
	font-weight: 500;
	animation: practiceFadeIn 0.4s ease-out;
}

.lj-math-step-order__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
	animation: practiceFadeIn 0.4s ease-out, practiceCorrectAnswer 0.6s ease-out;
}

.lj-math-step-order__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
	animation: practiceFadeIn 0.4s ease-out, practiceShake 0.5s ease-out;
}

.lj-math-step-order__instructions {
	margin-bottom: 16px;
	color: #475569;
}

/* Fun pop animation when an item is dropped */
.lj-math-step-order__step--ordered[data-just-dropped="true"] {
    animation: popIn 0.35s ease-out, glowPulse 1.2s ease-out;
    border-color: rgba(34,211,238,0.6);
}

@keyframes popIn {
    0% { transform: scale(0.96); opacity: 0.6; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.0); }
    50% { box-shadow: 0 0 0 6px rgba(34,211,238,0.15); }
}

/* Step Fill Card Styles */
.lj-math-step-fill {
	display: flex;
	flex-direction: column;
	gap: 24px;
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-math-step-fill__level {
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(99, 102, 241, 0.1);
	color: #3730a3;
	font-weight: 600;
	font-size: 14px;
}

.lj-math-step-fill__instructions {
	margin-bottom: 16px;
	color: #475569;
	font-size: 15px;
	line-height: 1.6;
}

.lj-math-step-fill__equations {
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
	border: 2px solid rgba(99, 102, 241, 0.15);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: practiceFadeIn 0.6s ease-out;
}

.lj-math-step-fill__equations:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
}

.lj-math-step-fill__label {
	margin: 0 0 16px 0;
	font-weight: 700;
	color: #4f46e5;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-math-step-fill__equation {
	margin: 10px 0;
	font-size: 20px;
	color: #1e293b;
	font-weight: 500;
	text-align: center;
}

.lj-math-step-fill__progress {
	padding: 10px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.1) 100%);
	color: #4f46e5;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	border: 1px solid rgba(99, 102, 241, 0.2);
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-math-step-fill__steps-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-math-step-fill__step {
	padding: 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
	border: 2px solid rgba(99, 102, 241, 0.25);
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
	transition: all 0.3s ease;
	animation: practiceFadeIn 0.7s ease-out;
	position: relative;
	overflow: hidden;
}

.lj-math-step-fill__step::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s ease;
}

.lj-math-step-fill__step:hover::before {
	left: 100%;
}

.lj-math-step-fill__step:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
	border-color: rgba(99, 102, 241, 0.35);
}

.lj-math-step-fill__step-label {
	font-weight: 700;
	color: #6366f1;
	margin-bottom: 16px;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-math-step-fill__step-label::before {
	content: '📝';
	font-size: 20px;
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-math-step-fill__step-content {
	font-size: 19px;
	color: #1e293b;
	margin-bottom: 16px;
	line-height: 1.9;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-weight: 500;
}

.lj-math-step-fill__input {
	padding: 12px 16px;
	border: 3px solid rgba(99, 102, 241, 0.3);
	border-radius: 10px;
	font-size: 19px;
	min-width: 140px;
	text-align: center;
	background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 100%);
	color: #1e293b;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.lj-math-step-fill__input::placeholder {
	color: rgba(99, 102, 241, 0.4);
	font-weight: 400;
}

.lj-math-step-fill__input:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(99, 102, 241, 0.2);
	transform: scale(1.02);
	background: #ffffff;
}

.lj-math-step-fill__input.is-correct {
	border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
	color: #059669;
	animation: practiceCorrectAnswer 0.7s ease-out;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
	font-weight: 700;
}

.lj-math-step-fill__input.is-incorrect {
	border-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
	color: #dc2626;
	animation: practiceShake 0.6s ease-out;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.lj-math-step-fill__hint {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
	border: 2px solid rgba(251, 191, 36, 0.4);
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
	animation: practiceFadeIn 0.5s ease-out;
	box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-math-step-fill__hint::before {
	content: '💡';
	font-size: 18px;
	flex-shrink: 0;
}

.lj-math-step-fill__feedback {
	padding: 18px 20px;
	border-radius: 14px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	animation: practiceFadeIn 0.5s ease-out;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.lj-math-step-fill__feedback.is-correct {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
	color: #047857;
	border: 2px solid rgba(16, 185, 129, 0.3);
	animation: practiceFadeIn 0.5s ease-out, practiceCorrectAnswer 0.7s ease-out;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.lj-math-step-fill__feedback.is-correct::before {
	content: '🎉 ';
	font-size: 20px;
}

.lj-math-step-fill__feedback.is-incorrect {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.12) 100%);
	color: #991b1b;
	border: 2px solid rgba(239, 68, 68, 0.3);
	animation: practiceFadeIn 0.5s ease-out, practiceShake 0.6s ease-out;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.lj-math-step-fill__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: practiceFadeIn 0.8s ease-out;
}

.lj-math-step-fill__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.lj-math-step-fill__nav-button {
	padding: 10px 20px;
	border-radius: 10px;
	border: 2px solid rgba(99, 102, 241, 0.25);
	background: linear-gradient(135deg, #ffffff 0%, rgba(99, 102, 241, 0.03) 100%);
	color: #6366f1;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.1);
}

.lj-math-step-fill__nav-button:hover:not(:disabled) {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
	color: #4f46e5;
	border-color: rgba(99, 102, 241, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.lj-math-step-fill__nav-button:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.lj-math-step-fill__nav-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.lj-math-step-fill__main-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.lj-math-step-fill__reset {
	background: transparent;
	border: 2px solid rgba(100, 116, 139, 0.25);
	color: #64748b;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	font-size: 14px;
}

.lj-math-step-fill__reset:hover {
	background: rgba(100, 116, 139, 0.08);
	color: #475569;
	border-color: rgba(100, 116, 139, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(100, 116, 139, 0.15);
}

.lj-math-step-fill__reset:active {
	transform: translateY(0);
}

/* Did You Know Card */
.lj-card.lj-card--did-you-know {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.25);
}

/* Mathematics specific - scoped to prevent affecting English cards */
.lj-didyouknow.lj-didyouknow--math {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 8px !important;
	align-items: center !important;
}

@media (min-width: 900px) {
	.lj-didyouknow.lj-didyouknow--math {
		grid-template-columns: 1.2fr 1fr !important;
		gap: 12px !important;
		align-items: center !important;
	}
	
	.lj-didyouknow--math .lj-didyouknow__content {
		margin-left: -12px;
	}
}

/* Enhanced image styling for Math Did You Know card */
.lj-didyouknow--math .lj-didyouknow__imageWrapper {
	max-width: 400px !important;
	border-radius: 20px !important;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);
	border: 3px solid rgba(99, 102, 241, 0.3);
	box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	transform: perspective(1000px) rotateY(-2deg);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.lj-didyouknow--math .lj-didyouknow__imageWrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: 1;
}

.lj-didyouknow--math .lj-didyouknow__imageWrapper:hover {
	transform: perspective(1000px) rotateY(0deg) scale(1.02);
	box-shadow: 0 12px 48px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
	border-color: rgba(139, 92, 246, 0.5);
}

.lj-didyouknow--math .lj-didyouknow__image {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lj-didyouknow--math .lj-didyouknow__imageWrapper:hover .lj-didyouknow__image {
	transform: scale(1.05);
}

/* Enhanced content styling */
.lj-didyouknow--math .lj-didyouknow__content {
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
	border: 2px solid rgba(139, 92, 246, 0.2);
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
	position: relative;
	overflow: hidden;
}

.lj-didyouknow--math .lj-didyouknow__content::before {
	content: '💡';
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 80px;
	opacity: 0.1;
	z-index: 0;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10px) rotate(5deg);
	}
}

.lj-didyouknow--math .lj-didyouknow__content .lj-card__html {
	position: relative;
	z-index: 1;
	color: #1e293b;
	font-size: 16px;
	line-height: 1.7;
}

.lj-didyouknow--math .lj-didyouknow__content .lj-card__html p {
	margin: 0;
	font-weight: 500;
}

@media (max-width: 899px) {
	.lj-didyouknow--math .lj-didyouknow__imageWrapper {
		max-width: 100% !important;
		transform: none;
	}
	
	.lj-didyouknow--math .lj-didyouknow__imageWrapper:hover {
		transform: scale(1.01);
	}
}

/* Math Info Card */
.lj-math-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-info--learning-standards {
	padding: 16px;
	border-radius: 12px;
	background: rgba(251, 191, 36, 0.1);
	border: 1px solid rgba(251, 191, 36, 0.3);
}

.lj-math-info--smart-tips {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
}

.lj-math-info--info {
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

/* Math Example Card - Horizontal Steps Layout */
.lj-math-example-steps {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: flex-start;
}

@media (min-width: 768px) {
	.lj-math-example-steps {
		flex-wrap: nowrap;
		gap: 24px;
	}
}

.lj-math-example-step {
	flex: 1;
	min-width: 200px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-math-example-step:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.lj-math-example-step .lj-card__html {
	text-align: left;
}

.lj-math-example-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #6366f1;
	animation: lj-math-arrow-pulse 2s ease-in-out infinite;
}

.lj-math-example-arrow svg {
	width: 24px;
	height: 24px;
}

@keyframes lj-math-arrow-pulse {
	0%, 100% {
		transform: translateX(0);
		opacity: 0.7;
	}
	50% {
		transform: translateX(4px);
		opacity: 1;
	}
}

@media (max-width: 767px) {
	.lj-math-example-steps {
		flex-direction: column;
	}
	
	.lj-math-example-arrow {
		transform: rotate(90deg);
		margin: 8px 0;
	}
	
	@keyframes lj-math-arrow-pulse {
		0%, 100% {
			transform: rotate(90deg) translateY(0);
			opacity: 0.7;
		}
		50% {
			transform: rotate(90deg) translateY(4px);
			opacity: 1;
		}
	}
}

.lj-didyouknow__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-didyouknow__imageWrapper {
	position: relative;
	width: 100%;
	max-width: 200px !important;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(15, 23, 42, 0.06);
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-didyouknow__image {
	display: block;
	width: 100%;
	height: auto;
}

.lj-didyouknow__imageFallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	font-size: 48px;
	color: #0f172a;
}

.lj-didyouknow__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #53b4c4;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 6px 14px rgba(15, 23, 42, 0.2);
}

.lj-didyouknow__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.lj-didyouknow .lj-card__html p {
	text-align: justify;
}

/* Math AI Generation Card - Linear Equations */
.lj-math-linear-equations__generator {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-linear-equations__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lj-math-linear-equations__control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-math-linear-equations__control span {
	font-size: 14px;
	font-weight: 500;
	color: #475569;
}

.lj-math-linear-equations__control select {
	padding: 8px 12px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}

.lj-math-linear-equations__loading,
.lj-math-linear-equations__error {
	padding: 12px;
	border-radius: 8px;
	text-align: center;
}

.lj-math-linear-equations__loading {
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.2);
	color: #1e40af;
	padding: 20px;
	border-radius: 12px;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: fadeIn 0.3s ease-in;
}

.lj-math-linear-equations__loading p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #1e40af;
}

.lj-math-linear-equations__loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(59, 130, 246, 0.2);
	border-top-color: #3b82f6;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

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

.lj-math-linear-equations__error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #b91c1c;
}

/* Question Display */
.lj-math-linear-equations__question {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-linear-equations__question-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: #64748b;
}

.lj-math-linear-equations__question-difficulty {
	font-weight: 600;
	color: #475569;
}

.lj-math-linear-equations__question-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-linear-equations__question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-math-linear-equations__question-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lj-math-linear-equations__equation-line {
	display: block;
	width: 100%;
	text-align: center;
}

.lj-math-linear-equations__equation-math {
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
}

.lj-math-linear-equations__question-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

/* Solver Workspace */
.lj-math-linear-equations__solver {
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
	max-height: calc(100vh - 200px);
}

.lj-math-linear-equations__solver-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-linear-equations__solver-question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-math-linear-equations__solver-difficulty {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	font-size: 12px;
	font-weight: 600;
	width: fit-content;
}

.lj-math-linear-equations__solver-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	max-height: calc(100vh - 300px);
	transition: padding-bottom 0.3s ease;
}

.lj-math-linear-equations__solver-body.keyboard-visible {
	padding-bottom: 400px !important;
}

.lj-math-linear-equations__solver-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lj-math-linear-equations__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	counter-reset: step-counter;
}

.lj-math-linear-equations__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.lj-math-linear-equations__step:hover {
	border-color: rgba(59, 130, 246, 0.25);
	background: rgba(59, 130, 246, 0.02);
}

.lj-math-linear-equations__step.is-correct {
	border-color: rgba(22, 163, 74, 0.3);
	background: rgba(22, 163, 74, 0.05);
}

.lj-math-linear-equations__step.is-incorrect {
	border-color: rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.05);
}

.lj-math-linear-equations__step-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: flex-start;
	color: #64748b;
	font-size: 0.9rem;
}

.lj-math-linear-equations__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.lj-math-linear-equations__step-feedback {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-linear-equations__step-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.lj-math-linear-equations__step.is-correct .lj-math-linear-equations__step-status {
	background: rgba(22, 163, 74, 0.15);
	color: #16a34a;
}

.lj-math-linear-equations__step.is-incorrect .lj-math-linear-equations__step-status {
	background: rgba(239, 68, 68, 0.15);
	color: #dc2626;
}

.lj-math-linear-equations__step-message {
	flex: 1;
}

.lj-math-linear-equations__step-message p {
	margin: 0;
	font-size: 14px;
	color: #475569;
}

.lj-math-linear-equations__add-step {
	margin-top: 8px;
	width: fit-content;
}

.lj-math-linear-equations__overall-feedback {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	margin-top: 16px;
}

.lj-math-linear-equations__overall-header {
	margin-bottom: 8px;
}

.lj-math-linear-equations__overall-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.lj-math-linear-equations__overall-message {
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.lj-math-linear-equations__solver-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-linear-equations__solver-loading {
	padding: 20px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.2);
	text-align: center;
	color: #1e40af;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: fadeIn 0.3s ease-in;
}

.lj-math-linear-equations__solver-loading p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #1e40af;
}

/* MathLive Field Styles */
math-field.lj-math-linear-equations__step-input {
	display: block;
	width: 100%;
	min-height: 10px;
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	padding: 0.65rem 0.75rem;
	font-size: 1.3rem;
	color: #0f172a;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

math-field.lj-math-linear-equations__step-input::part(content) {
	min-height: 52px;
	padding: 0;
}

math-field.lj-math-linear-equations__step-input:focus-within {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

math-field.lj-math-linear-equations__step-input::part(placeholder) {
	color: #94a3b8;
	opacity: 0.8;
}

math-field.lj-math-linear-equations__step-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: #f1f5f9;
}

.lj-math-linear-equations__step.is-correct math-field.lj-math-linear-equations__step-input {
	border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
}

.lj-math-linear-equations__step.is-incorrect math-field.lj-math-linear-equations__step-input {
	border-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Ensure MathLive virtual keyboard is visible and not clipped */
.ML__virtual-keyboard {
	position: fixed !important;
	z-index: 9999 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #f8fafc !important;
	border-top: 1px solid rgba(148, 163, 184, 0.3) !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-height: 50vh !important;
	overflow-y: auto !important;
}

/* Add padding to content when keyboard is visible so it's not hidden */
body:has(.ML__virtual-keyboard:not([style*="display: none"])) .lj-math-linear-equations__solver-body,
body:has(.ML__virtual-keyboard[style*="display: block"]) .lj-math-linear-equations__solver-body {
	padding-bottom: 400px !important;
}

/* Alternative: use JavaScript to add class when keyboard is visible */
.lj-math-linear-equations__solver-body.keyboard-visible {
	padding-bottom: 400px !important;
}

/* Ensure the keyboard container is visible */
.ML__keyboard {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Math AI Practice Card Styles */
.lj-math-ai-practice__generator {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-ai-practice__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lj-math-ai-practice__loading,
.lj-math-ai-practice__error {
	padding: 12px;
	border-radius: 8px;
	text-align: center;
}

.lj-math-ai-practice__loading {
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.2);
	color: #1e40af;
	padding: 20px;
	border-radius: 12px;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: fadeIn 0.3s ease-in;
}

.lj-math-ai-practice__loading p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #1e40af;
}

.lj-math-ai-practice__loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(59, 130, 246, 0.2);
	border-top-color: #3b82f6;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.lj-math-ai-practice__error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #b91c1c;
}

/* Question Display */
.lj-math-ai-practice__question {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-math-ai-practice__question-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-math-ai-practice__question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-math-ai-practice__question-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lj-math-ai-practice__equation-line {
	display: block;
	width: 100%;
	text-align: center;
}

.lj-math-ai-practice__question-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

/* Solver Workspace */
.lj-math-ai-practice__solver {
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
	max-height: calc(100vh - 200px);
}

.lj-math-ai-practice__solver-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-ai-practice__solver-question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-math-ai-practice__solver-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	max-height: calc(100vh - 300px);
	transition: padding-bottom 0.3s ease;
}

.lj-math-ai-practice__solver-body.keyboard-visible {
	padding-bottom: 400px !important;
}

.lj-math-ai-practice__solver-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lj-math-ai-practice__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	counter-reset: step-counter;
}

.lj-math-ai-practice__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.lj-math-ai-practice__step:hover {
	border-color: rgba(59, 130, 246, 0.25);
	background: rgba(59, 130, 246, 0.02);
}

.lj-math-ai-practice__step.is-correct {
	border-color: rgba(22, 163, 74, 0.3);
	background: rgba(22, 163, 74, 0.05);
}

.lj-math-ai-practice__step.is-incorrect {
	border-color: rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.05);
}

.lj-math-ai-practice__step-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: flex-start;
	color: #64748b;
	font-size: 0.9rem;
}

.lj-math-ai-practice__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.lj-math-ai-practice__step-feedback {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-ai-practice__step-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.lj-math-ai-practice__step.is-correct .lj-math-ai-practice__step-status {
	background: rgba(22, 163, 74, 0.15);
	color: #16a34a;
}

.lj-math-ai-practice__step.is-incorrect .lj-math-ai-practice__step-status {
	background: rgba(239, 68, 68, 0.15);
	color: #dc2626;
}

.lj-math-ai-practice__step-message {
	flex: 1;
}

.lj-math-ai-practice__step-message p {
	margin: 0;
	font-size: 14px;
	color: #475569;
}

.lj-math-ai-practice__add-step {
	margin-top: 8px;
	width: fit-content;
}

.lj-math-ai-practice__overall-feedback {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	margin-top: 16px;
}

.lj-math-ai-practice__overall-header {
	margin-bottom: 8px;
}

.lj-math-ai-practice__overall-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.lj-math-ai-practice__overall-message {
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.lj-math-ai-practice__solver-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-math-ai-practice__solver-loading {
	padding: 12px;
	border-radius: 8px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	text-align: center;
	color: #1e293b;
}

.lj-math-ai-practice__solver-loading p {
	margin: 0;
}

/* MathLive Field Styles for Math AI Practice */
math-field.lj-math-ai-practice__step-input {
	display: block;
	width: 100%;
	min-height: 10px;
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	padding: 0.65rem 0.75rem;
	font-size: 1.3rem;
	color: #0f172a;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

math-field.lj-math-ai-practice__step-input::part(content) {
	min-height: 52px;
	padding: 0;
}

math-field.lj-math-ai-practice__step-input:focus-within {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

math-field.lj-math-ai-practice__step-input::part(placeholder) {
	color: #94a3b8;
	opacity: 0.8;
}

math-field.lj-math-ai-practice__step-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: #f1f5f9;
}

.lj-math-ai-practice__step.is-correct math-field.lj-math-ai-practice__step-input {
	border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
}

.lj-math-ai-practice__step.is-incorrect math-field.lj-math-ai-practice__step-input {
	border-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Add padding to content when keyboard is visible so it's not hidden */
body:has(.ML__virtual-keyboard:not([style*="display: none"])) .lj-math-ai-practice__solver-body,
body:has(.ML__virtual-keyboard[style*="display: block"]) .lj-math-ai-practice__solver-body {
	padding-bottom: 400px !important;
}

.lj-math-ai-practice__solver-body.keyboard-visible {
	padding-bottom: 400px !important;
}

/* Additional Mathematics Card Variants */
.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* Shared Body Helpers */

/* AI Practice Specific */
.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(99, 102, 241, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #3730a3; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Additional Mathematics Questions Card */
.lj-amath-questions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-amath-questions__question {
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-amath-questions__prompt {
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 12px;
}

.lj-amath-questions__options {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-amath-questions__options li {
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

/* AI Open-Ended Card */
.lj-ai-open-ended {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-ai-open-ended__instructions {
	margin-bottom: 16px;
	color: #0f172a;
}

.lj-ai-open-ended__question {
	margin-bottom: 16px;
}

.lj-ai-open-ended__answer {
	margin-bottom: 16px;
}

.lj-ai-open-ended__feedback {
	padding: 14px;
	border-radius: 10px;
	margin-top: 12px;
}

.lj-ai-open-ended__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-ai-open-ended__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

.lj-ai-open-ended__actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* Override all button margin-top globally */
#lj-runner button,
#lj-runner .button,
button.button,
button {
	margin-top: 0 !important;
}

/* Content Card Variants for Additional Mathematics */
.lj-card.lj-card--content { background: inherit; }
.lj-card.lj-card--content-examples {
	background: inherit;
	border: 1px solid rgba(59, 130, 246, 0.12);
	box-shadow: 0 18px 45px -28px rgba(30, 64, 175, 0.3);
}
.lj-card.lj-card--example { background: inherit; border: 1px solid rgba(51, 92, 255, 0.15); }
.lj-card.lj-card--example .lj-card__body { text-align: center; }
.lj-card.lj-card--example .lj-card__list { align-items: center; }
.lj-card.lj-card--concept-breakdown {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Step-by-Step Card for Additional Mathematics */
.lj-amath-step-by-step {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-amath-step-by-step__problem {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	margin-bottom: 8px;
}

.lj-amath-step-by-step__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	counter-reset: step-counter;
}

.lj-amath-step-by-step__step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	position: relative;
}

.lj-amath-step-by-step__step-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.lj-amath-step-by-step__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
}

.lj-amath-step-by-step__step-label {
	color: #475569;
	font-weight: 500;
}

.lj-amath-step-by-step__step-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-amath-step-by-step__step-equation {
	margin-top: 8px;
	padding: 12px;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.1);
	text-align: center;
	font-family: 'KaTeX_Main', 'Times New Roman', serif;
}

.lj-amath-step-by-step__solution {
	padding: 16px;
	border-radius: 12px;
	background: rgba(22, 163, 74, 0.1);
	border: 1px solid rgba(22, 163, 74, 0.3);
	color: #15803d;
	font-weight: 500;
	margin-top: 8px;
}

/* Math Equation Styling */
.lj-amath-step-by-step__step-equation,
.lj-amath-step-by-step__problem,
.lj-amath-questions__prompt,
.lj-amath-questions__options li {
	/* Ensure MathJax renders properly */
	line-height: 1.6;
}

/* MathJax specific styling */
.MathJax,
.MathJax_Display {
	margin: 0.5em 0;
}

/* Concept Breakdown Card */
.lj-concept-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 900px) {
	.lj-concept-card.has-spotlights {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 24px;
	}
}

.lj-concept-card__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-concept-card__intro {
	padding: 16px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(59,130,246,0.03));
	border: 1px solid rgba(59,130,246,0.18);
	box-shadow: 0 10px 24px -18px rgba(59,130,246,0.45);
}

.lj-concept-card__sections {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-concept-card__section {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lj-concept-card__section:hover {
	border-color: rgba(59,130,246,0.25);
	box-shadow: 0 14px 36px -24px rgba(59,130,246,0.35);
	background: rgba(59,130,246,0.02);
}

.lj-concept-card__sectionSummary {
	padding: 14px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	background: rgba(255,255,255,0.9);
}

.lj-concept-card__sectionSummary::-webkit-details-marker {
	display: none;
}

.lj-concept-card__sectionTitle {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #1e293b;
	font-weight: 600;
}

.lj-concept-card__sectionTitleIcon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #3b82f6, #60a5fa);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
	animation: lj-pulse 2.2s ease-in-out infinite;
}

@keyframes lj-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.9; }
}

.lj-concept-card__sectionIndicator {
	width: 12px;
	height: 12px;
	border-right: 2px solid rgba(51,65,85,0.9);
	border-bottom: 2px solid rgba(51,65,85,0.9);
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
	flex: 0 0 auto;
}

.lj-concept-card__section[open] .lj-concept-card__sectionIndicator {
	transform: rotate(45deg);
}

.lj-concept-card__sectionBody {
	padding: 0 16px 16px 16px;
	margin-top: 8px;
}

/* Friendlier numbered steps */
.lj-concept-card__sectionBody ol {
	counter-reset: concept-step;
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lj-concept-card__sectionBody ol > li {
	counter-increment: concept-step;
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: start;
	gap: 10px;
}

.lj-concept-card__sectionBody ol > li::before {
	content: counter(concept-step);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(59,130,246,0.15);
	color: #3b82f6;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: inset 0 0 0 1px rgba(59,130,246,0.25);
}

/* Inline math samples inside sections */
.lj-concept-card__sectionBody .mvp-math {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-concept-card__spotlights {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
}

.lj-concept-card__spotlightsTitle {
	margin-bottom: 12px;
	color: #1e293b;
	font-weight: 600;
}

.lj-concept-card__spotlightsList {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-concept-card__spotlight {
	padding: 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-concept-card__spotlightTitle {
	margin-bottom: 6px;
	color: #3b82f6;
	font-weight: 600;
}

.lj-concept-card__spotlightBody {
	color: #475569;
}

/* Content Examples Card */
.lj-content-card__layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 900px) {
	.lj-content-card__layout.has-examples {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 24px;
	}
}

.lj-content-card__main {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-content-card__main.has-icon {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.lj-content-card__icon {
	font-size: 72px;
	line-height: 1;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-origin: center;
}

/* Different animation styles based on icon type */
.lj-content-card__icon span {
	display: inline-block;
	filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
}

/* Default animation: Float + Rotate */
.lj-content-card__icon span {
	animation: lj-amath-icon-float 3s ease-in-out infinite, lj-amath-icon-rotate 4s ease-in-out infinite;
}

/* Animation for calculator/number icons 🔢 */
.lj-content-card__icon[data-icon="🔢"] span {
	animation: lj-amath-icon-pulse 2s ease-in-out infinite, lj-amath-icon-float 3s ease-in-out infinite;
}

/* Animation for substitution/swap icons 🔄 */
.lj-content-card__icon[data-icon="🔄"] span {
	animation: lj-amath-icon-spin-slow 6s linear infinite;
}

/* Animation for elimination/merge icons ➕ */
.lj-content-card__icon[data-icon="➕"] span {
	animation: lj-amath-icon-bounce 2.5s ease-in-out infinite;
}

/* Animation for chart/graph icons 📊 */
.lj-content-card__icon[data-icon="📊"] span {
	animation: lj-amath-icon-scale 2s ease-in-out infinite;
}

/* Animation for lightbulb/idea icons 💡 */
.lj-content-card__icon[data-icon="💡"] span {
	animation: lj-amath-icon-glow 2s ease-in-out infinite, lj-amath-icon-float 3s ease-in-out infinite;
}

/* Keyframe animations */
@keyframes lj-amath-icon-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes lj-amath-icon-rotate {
	0%, 100% {
		transform: rotate(0deg) scale(1);
	}
	25% {
		transform: rotate(5deg) scale(1.05);
	}
	75% {
		transform: rotate(-5deg) scale(1.05);
	}
}

@keyframes lj-amath-icon-pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.9;
	}
}

@keyframes lj-amath-icon-spin-slow {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes lj-amath-icon-bounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	25% {
		transform: translateY(-15px) scale(1.1);
	}
	50% {
		transform: translateY(-5px) scale(1.05);
	}
	75% {
		transform: translateY(-12px) scale(1.08);
	}
}

@keyframes lj-amath-icon-scale {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

@keyframes lj-amath-icon-glow {
	0%, 100% {
		filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3)) drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
	}
	50% {
		filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.5)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lj-content-card__icon,
	.lj-content-card__icon span {
		animation: none !important;
	}
}

.lj-card.lj-card--content-examples .lj-content-card__examples {
	padding: 16px;
	border-radius: 12px;
	border: 1px solid rgba(99, 102, 241, 0.18);
}

.lj-content-card__examplesTitle {
	margin-bottom: 12px;
	color: #1e293b;
	font-weight: 600;
}

.lj-content-card__examplesList {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-content-card__examplesList li {
	padding: 8px 12px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(15, 23, 42, 0.1);
}

/* AMath Banner Card */
.lj-amath-banner {
  position: relative;
  overflow: hidden;
  color: #0b1027;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  /* Remove padding - use CardShell body padding instead */
}

.lj-amath-banner__bg {
  position: absolute;
  inset: 0;
  /* Extend background to fill CardShell body area */
  margin: -20px -24px -24px -24px;
  padding: 20px 24px 24px;
  background: linear-gradient(135deg, #ede9fe 0%, #cffafe 50%, #fce7f3 100%);
  animation: lj-amath-banner-bg 12s ease-in-out infinite;
  z-index: -2;
}

@keyframes lj-amath-banner-bg {
  0% { filter: hue-rotate(0deg) saturate(105%); }
  50% { filter: hue-rotate(25deg) saturate(115%); }
  100% { filter: hue-rotate(0deg) saturate(105%); }
}

.lj-amath-banner__shapes { 
  position: absolute; 
  inset: 0;
  margin: -20px -24px -24px -24px;
  padding: 20px 24px 24px;
  z-index: -1; 
}
.lj-amath-banner__shape {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,92,246,0.25), rgba(139,92,246,0) 70%);
  animation: lj-float 9s ease-in-out infinite;
}
.lj-amath-banner__shape:nth-child(1) { top: -40px; left: -40px; animation-delay: .2s; }
.lj-amath-banner__shape:nth-child(2) { bottom: -30px; right: -30px; animation-delay: .8s; }
.lj-amath-banner__shape:nth-child(3) { top: 20%; right: 18%; width: 120px; height: 120px; animation-delay: 1.6s; }

@keyframes lj-float {
  0%,100% { transform: translateY(0) translateX(0) scale(1); opacity: .9; }
  50% { transform: translateY(-8px) translateX(6px) scale(1.03); opacity: 1; }
}

.lj-amath-banner__content { text-align: center; }
.lj-amath-banner__top {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #334155;
  opacity: .95;
  transform: translateY(6px);
  animation: lj-slide-up .6s ease-out .05s both;
}
.lj-amath-banner__top span { background: linear-gradient(90deg, #475569, #1f2937); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lj-amath-banner__main {
  margin: 6px 0 4px 0;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lj-fade-in .55s ease-out .15s both;
}

.lj-amath-banner__subtitle { margin-top: 8px; color: #334155; opacity: .95; }

@keyframes lj-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lj-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* A thin border/glow to harmonise with AMath theme */
.lj-card.lj-card--banner {
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: 0 20px 45px -30px rgba(99,102,241,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lj-amath-banner__bg,
  .lj-amath-banner__shape { animation: none; }
}

/* AMath AI Substitution Card */
.lj-amath-substitution__generator {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-amath-substitution__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lj-amath-substitution__control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lj-amath-substitution__control span {
	font-size: 14px;
	font-weight: 500;
	color: #475569;
}

.lj-amath-substitution__control select {
	padding: 8px 12px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}

.lj-amath-substitution__loading,
.lj-amath-substitution__error {
	padding: 12px;
	border-radius: 8px;
	text-align: center;
}

.lj-amath-substitution__loading {
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.2);
	color: #1e40af;
	padding: 20px;
	border-radius: 12px;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: fadeIn 0.3s ease-in;
}

.lj-amath-substitution__loading p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #1e40af;
}

.lj-amath-substitution__loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(59, 130, 246, 0.2);
	border-top-color: #3b82f6;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

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

.lj-amath-substitution__error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #b91c1c;
}

/* Question Display */
.lj-amath-substitution__question {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-amath-substitution__question-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: #64748b;
}

.lj-amath-substitution__question-difficulty {
	font-weight: 600;
	color: #475569;
}

.lj-amath-substitution__question-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-amath-substitution__question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-amath-substitution__question-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lj-amath-substitution__equation-line {
	display: block;
	width: 100%;
	text-align: center;
}

.lj-amath-substitution__equation-math {
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
}

.lj-amath-substitution__question-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

/* Solver Workspace */
.lj-amath-substitution__solver {
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
	max-height: calc(100vh - 200px);
}

.lj-amath-substitution__solver-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-amath-substitution__solver-question-text {
	font-weight: 500;
	color: #1e293b;
	margin: 0;
}

.lj-amath-substitution__solver-difficulty {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	font-size: 12px;
	font-weight: 600;
	width: fit-content;
}

.lj-amath-substitution__solver-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	max-height: calc(100vh - 300px);
	transition: padding-bottom 0.3s ease;
}

.lj-amath-substitution__solver-body.keyboard-visible {
	padding-bottom: 400px !important;
}

.lj-amath-substitution__solver-equation {
	text-align: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.03);
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.lj-amath-substitution__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	counter-reset: step-counter;
}

.lj-amath-substitution__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.lj-amath-substitution__step:hover {
	border-color: rgba(59, 130, 246, 0.25);
	background: rgba(59, 130, 246, 0.02);
}

.lj-amath-substitution__step.is-correct {
	border-color: rgba(22, 163, 74, 0.3);
	background: rgba(22, 163, 74, 0.05);
}

.lj-amath-substitution__step.is-incorrect {
	border-color: rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.05);
}

.lj-amath-substitution__step-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: flex-start;
	color: #64748b;
	font-size: 0.9rem;
}

.lj-amath-substitution__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 0.2rem;
}

/* Note: math-field.lj-amath-substitution__step-input styles are defined below */

.lj-amath-substitution__step-feedback {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-amath-substitution__step-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.lj-amath-substitution__step.is-correct .lj-amath-substitution__step-status {
	background: rgba(22, 163, 74, 0.15);
	color: #16a34a;
}

.lj-amath-substitution__step.is-incorrect .lj-amath-substitution__step-status {
	background: rgba(239, 68, 68, 0.15);
	color: #dc2626;
}

.lj-amath-substitution__step-message {
	flex: 1;
}

.lj-amath-substitution__step-message p {
	margin: 0;
	font-size: 14px;
	color: #475569;
}

.lj-amath-substitution__add-step {
	margin-top: 8px;
	width: fit-content;
}

.lj-amath-substitution__overall-feedback {
	padding: 16px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	margin-top: 16px;
}

.lj-amath-substitution__overall-header {
	margin-bottom: 8px;
}

.lj-amath-substitution__overall-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.lj-amath-substitution__overall-message {
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.lj-amath-substitution__solver-footer {
	display: flex;
	gap: 12px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-amath-substitution__solver-loading {
	padding: 12px;
	border-radius: 8px;
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.15);
	text-align: center;
	color: #1e293b;
}

.lj-amath-substitution__solver-loading p {
	margin: 0;
}

/* Practice Cards Animations */

/* Quick Check Card Animations */
.lj-quick-check__option {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-quick-check__option:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.lj-quick-check__option:active:not(:disabled) {
	transform: scale(0.95);
}

.lj-quick-check__option.is-correct {
	animation: practiceCorrectAnswer 0.6s ease-out;
}

.lj-quick-check__option.is-incorrect {
	animation: practiceShake 0.5s ease-out;
}

.lj-quick-check__rationale {
	animation: practiceFadeIn 0.4s ease-out;
}

.lj-quick-check__rationale.is-correct {
	animation: practiceFadeIn 0.4s ease-out, practiceCorrectAnswer 0.6s ease-out;
}

.lj-quick-check__rationale.is-incorrect {
	animation: practiceFadeIn 0.4s ease-out, practiceShake 0.5s ease-out;
}

/* Level Progression Animation */
.lj-quick-check {
	position: relative;
}

.lj-quick-check__question,
.lj-quick-check__options {
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Answer Card Animations */
.lj-card.lj-card--answer .lj-input {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lj-card.lj-card--answer .lj-input:focus {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lj-card.lj-card--answer .button {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lj-card.lj-card--answer .button:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.lj-card.lj-card--answer .button:active:not(:disabled) {
	transform: scale(0.95);
}

.lj-card__feedback.is-correct {
	animation: practiceCorrectAnswer 0.6s ease-out;
}

/* Animation Keyframes */
@keyframes practiceCorrectAnswer {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}
	50% {
		transform: translateY(-2px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes practiceShake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-8px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(8px);
	}
}

@keyframes practiceFadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Level indicator animation */
.lj-dragdrop__level {
	display: flex;
	align-items: center;
	gap: 8px;
	animation: practiceFadeIn 0.4s ease-out;
}

/* Smooth level transition */
.lj-quick-check__question,
.lj-quick-check__options {
	animation: practiceFadeIn 0.4s ease-out;
}

/* Step Order Card Styles */
.lj-amath-step-order {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-amath-step-order__equations {
	padding: 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.1);
	text-align: center;
}

.lj-amath-step-order__label {
	margin: 0 0 12px 0;
	font-weight: 600;
	color: #1e293b;
}

.lj-amath-step-order__equation {
	margin: 8px 0;
	font-size: 18px;
	color: #1e293b;
}

.lj-amath-step-order__bank,
.lj-amath-step-order__order {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-amath-step-order__heading {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
}

.lj-amath-step-order__bank {
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(56,189,248,0.08), rgba(99,102,241,0.06));
    border: 2px dashed rgba(99, 102, 241, 0.25);
    min-height: 100px;
}

.lj-amath-step-order__bank-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.lj-amath-step-order__order {
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(34,211,238,0.06));
    border: 2px solid rgba(99, 102, 241, 0.25);
    min-height: 160px;
}

.lj-amath-step-order__order-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	min-height: 200px;
	padding-bottom: 60px;
}

.lj-amath-step-order__step {
    padding: 10px 14px;
	border-radius: 8px;
	background: #ffffff;
	border: 2px solid rgba(15, 23, 42, 0.15);
	cursor: move;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	align-items: center;
	gap: 12px;
    position: relative;
}

.lj-amath-step-order__step:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
}

.lj-amath-step-order__step--bank {
	cursor: grab;
}

.lj-amath-step-order__step--bank:active {
	cursor: grabbing;
}

.lj-amath-step-order__step--ordered {
	cursor: grab;
}

.lj-amath-step-order__step--ordered:active {
	cursor: grabbing;
}

.lj-amath-step-order__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    color: #fff;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}

.lj-amath-step-order__step-text {
	flex: 1;
	color: #1e293b;
	font-size: 15px;
	line-height: 1.5;
}

.lj-amath-step-order__remove {
	background: transparent;
	border: none;
	color: #64748b;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color 0.2s ease;
}

.lj-amath-step-order__remove:hover {
	color: #dc2626;
}

.lj-amath-step-order__empty,
.lj-amath-step-order__placeholder {
	padding: 20px;
	text-align: center;
	color: #64748b;
	font-style: italic;
	margin: 0;
}

.lj-amath-step-order__actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.lj-amath-step-order__reset {
	background: transparent;
	border: none;
	color: #64748b;
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}

.lj-amath-step-order__reset:hover {
	background: rgba(15, 23, 42, 0.05);
	color: #1e293b;
}

.lj-amath-step-order__feedback {
	padding: 14px;
	border-radius: 10px;
	text-align: center;
	font-weight: 500;
	animation: practiceFadeIn 0.4s ease-out;
}

.lj-amath-step-order__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
	animation: practiceFadeIn 0.4s ease-out, practiceCorrectAnswer 0.6s ease-out;
}

.lj-amath-step-order__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
	animation: practiceFadeIn 0.4s ease-out, practiceShake 0.5s ease-out;
}

.lj-amath-step-order__instructions {
	margin-bottom: 16px;
	color: #475569;
}

/* Fun pop animation when an item is dropped */
.lj-amath-step-order__step--ordered[data-just-dropped="true"] {
    animation: popIn 0.35s ease-out, glowPulse 1.2s ease-out;
    border-color: rgba(34,211,238,0.6);
}

@keyframes popIn {
    0% { transform: scale(0.96); opacity: 0.6; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.0); }
    50% { box-shadow: 0 0 0 6px rgba(34,211,238,0.15); }
}

/* Step Fill Card Styles */
.lj-amath-step-fill {
	display: flex;
	flex-direction: column;
	gap: 24px;
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-amath-step-fill__level {
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(99, 102, 241, 0.1);
	color: #3730a3;
	font-weight: 600;
	font-size: 14px;
}

.lj-amath-step-fill__instructions {
	margin-bottom: 16px;
	color: #475569;
	font-size: 15px;
	line-height: 1.6;
}

.lj-amath-step-fill__equations {
	padding: 20px;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.1);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: practiceFadeIn 0.6s ease-out;
}

.lj-amath-step-fill__equations:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.lj-amath-step-fill__label {
	margin: 0 0 16px 0;
	font-weight: 700;
	color: #1e293b;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.lj-amath-step-fill__equation {
	margin: 10px 0;
	font-size: 20px;
	color: #1e293b;
	font-weight: 500;
	text-align: center;
}

.lj-amath-step-fill__progress {
	padding: 10px 16px;
	border-radius: 12px;
	background: #ffffff;
	color: #1e293b;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	border: 1px solid rgba(15, 23, 42, 0.1);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-amath-step-fill__steps-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-amath-step-fill__step {
	padding: 24px;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.1);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
	transition: all 0.3s ease;
	animation: practiceFadeIn 0.7s ease-out;
	position: relative;
	overflow: hidden;
}

.lj-amath-step-fill__step::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s ease;
}

.lj-amath-step-fill__step:hover::before {
	left: 100%;
}

.lj-amath-step-fill__step:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
	border-color: rgba(15, 23, 42, 0.15);
}

.lj-amath-step-fill__step-label {
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 16px;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-amath-step-fill__step-label::before {
	content: '📝';
	font-size: 20px;
	animation: practiceFadeIn 0.5s ease-out;
}

.lj-amath-step-fill__step-content {
	font-size: 19px;
	color: #1e293b;
	margin-bottom: 16px;
	line-height: 1.9;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-weight: 500;
}

.lj-amath-step-fill__input {
	padding: 12px 16px;
	border: 2px solid rgba(15, 23, 42, 0.15);
	border-radius: 10px;
	font-size: 19px;
	min-width: 140px;
	text-align: center;
	background: #ffffff;
	color: #1e293b;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.lj-amath-step-fill__input::placeholder {
	color: rgba(15, 23, 42, 0.4);
	font-weight: 400;
}

.lj-amath-step-fill__input:focus {
	outline: none;
	border-color: rgba(15, 23, 42, 0.3);
	box-shadow: 0 4px 8px rgba(15, 23, 42, 0.1);
	transform: scale(1.02);
	background: #ffffff;
}

.lj-amath-step-fill__input.is-correct {
	border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
	color: #059669;
	animation: practiceCorrectAnswer 0.7s ease-out;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
	font-weight: 700;
}

.lj-amath-step-fill__input.is-incorrect {
	border-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
	color: #dc2626;
	animation: practiceShake 0.6s ease-out;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.lj-amath-step-fill__hint {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
	border: 2px solid rgba(251, 191, 36, 0.4);
	color: #92400e;
	font-size: 14px;
	font-weight: 500;
	animation: practiceFadeIn 0.5s ease-out;
	box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
	display: flex;
	align-items: center;
	gap: 8px;
}

.lj-amath-step-fill__hint::before {
	content: '💡';
	font-size: 18px;
	flex-shrink: 0;
}

.lj-amath-step-fill__feedback {
	padding: 18px 20px;
	border-radius: 14px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	animation: practiceFadeIn 0.5s ease-out;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.lj-amath-step-fill__feedback.is-correct {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.12) 100%);
	color: #047857;
	border: 2px solid rgba(16, 185, 129, 0.3);
	animation: practiceFadeIn 0.5s ease-out, practiceCorrectAnswer 0.7s ease-out;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.lj-amath-step-fill__feedback.is-correct::before {
	content: '🎉 ';
	font-size: 20px;
}

.lj-amath-step-fill__feedback.is-incorrect {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.12) 100%);
	color: #991b1b;
	border: 2px solid rgba(239, 68, 68, 0.3);
	animation: practiceFadeIn 0.5s ease-out, practiceShake 0.6s ease-out;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
}

.lj-amath-step-fill__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: practiceFadeIn 0.8s ease-out;
}

.lj-amath-step-fill__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.lj-amath-step-fill__nav-button {
	padding: 10px 20px;
	border-radius: 10px;
	border: 2px solid rgba(99, 102, 241, 0.25);
	background: linear-gradient(135deg, #ffffff 0%, rgba(99, 102, 241, 0.03) 100%);
	color: #6366f1;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.1);
}

.lj-amath-step-fill__nav-button:hover:not(:disabled) {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
	color: #4f46e5;
	border-color: rgba(99, 102, 241, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.lj-amath-step-fill__nav-button:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.lj-amath-step-fill__nav-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.lj-amath-step-fill__main-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.lj-amath-step-fill__reset {
	background: transparent;
	border: 2px solid rgba(100, 116, 139, 0.25);
	color: #64748b;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	font-size: 14px;
}

.lj-amath-step-fill__reset:hover {
	background: rgba(100, 116, 139, 0.08);
	color: #475569;
	border-color: rgba(100, 116, 139, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(100, 116, 139, 0.15);
}

.lj-amath-step-fill__reset:active {
	transform: translateY(0);
}

/* Did You Know Card */
.lj-card.lj-card--did-you-know {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.25);
}

/* Additional Mathematics specific - scoped to prevent affecting English cards */
.lj-didyouknow--amath {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 3px !important;
	align-items: center !important;
}

@media (min-width: 900px) {
	.lj-didyouknow--amath {
		grid-template-columns: 1fr 1.3fr !important;
		gap: 10px !important;
		align-items: center !important;
	}
}

.lj-didyouknow__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lj-didyouknow__imageWrapper {
	position: relative;
	width: 100%;
	max-width: 200px !important;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(15, 23, 42, 0.06);
	border: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-didyouknow__image {
	display: block;
	width: 100%;
	height: auto;
}

.lj-didyouknow__imageFallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	font-size: 48px;
	color: #0f172a;
}

.lj-didyouknow__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #53b4c4;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 6px 14px rgba(15, 23, 42, 0.2);
}

.lj-didyouknow__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.lj-didyouknow .lj-card__html p {
	text-align: justify;
}

/* MathLive field styles for Additional Mathematics step-by-step solving */
/* MathLive field styles - must come after any class-based styles */
math-field.lj-amath-substitution__step-input {
	display: block;
	width: 100%;
	min-height: 10px;
	border-radius: 8px;
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	padding: 0.65rem 0.75rem;
	font-size: 1.3rem;
	color: #0f172a;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

math-field.lj-amath-substitution__step-input::part(content) {
	min-height: 52px;
	padding: 0;
}

math-field.lj-amath-substitution__step-input:focus-within {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

math-field.lj-amath-substitution__step-input::part(placeholder) {
	color: #94a3b8;
	opacity: 0.8;
}

math-field.lj-amath-substitution__step-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: #f1f5f9;
}

.lj-amath-substitution__step.is-correct math-field.lj-amath-substitution__step-input {
	border-color: #10b981;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
}

.lj-amath-substitution__step.is-incorrect math-field.lj-amath-substitution__step-input {
	border-color: #ef4444;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Ensure MathLive virtual keyboard is visible and not clipped */
.ML__virtual-keyboard {
	position: fixed !important;
	z-index: 9999 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #f8fafc !important;
	border-top: 1px solid rgba(148, 163, 184, 0.3) !important;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-height: 50vh !important;
	overflow-y: auto !important;
}

/* Add padding to content when keyboard is visible so it's not hidden */
body:has(.ML__virtual-keyboard:not([style*="display: none"])) .lj-amath-substitution__solver-body,
body:has(.ML__virtual-keyboard[style*="display: block"]) .lj-amath-substitution__solver-body {
	padding-bottom: 400px !important;
}

/* Alternative: use JavaScript to add class when keyboard is visible */
.lj-amath-substitution__solver-body.keyboard-visible {
	padding-bottom: 400px !important;
}

/* Ensure the keyboard container is visible */
.ML__keyboard {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Card Variants */
.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* Shared Body Helpers */

/* AI Practice Specific */
.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(99, 102, 241, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #3730a3; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__sentence { color: #0f172a; padding: 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Error Highlighting for AI Open-Ended Questions */
.lj-card__feedback .error-highlight {
	background: #fee;
	color: #c00;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: 600;
	display: inline;
	margin: 0;
}

/* AI Open-Ended Card */
.lj-ai-open-ended {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-ai-open-ended__instructions {
	margin-bottom: 16px;
	color: #0f172a;
}

.lj-ai-open-ended__question {
	margin-bottom: 16px;
}

.lj-ai-open-ended__answer textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}

.lj-ai-open-ended__feedback {
	padding: 14px;
	border-radius: 10px;
	margin-top: 12px;
}

.lj-ai-open-ended__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-ai-open-ended__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

.lj-ai-open-ended__actions {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

/* Quick Check Card */
.lj-quick-check {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-quick-check__question {
	margin-bottom: 8px;
}

.lj-quick-check__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-quick-check__option {
	padding: 12px 16px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
}

.lj-quick-check__option:hover:not(:disabled) {
	background: rgba(99, 102, 241, 0.05);
	border-color: rgba(99, 102, 241, 0.3);
}

.lj-quick-check__option.is-selected {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.5);
}

.lj-quick-check__option.is-correct {
	background: rgba(22, 163, 74, 0.12);
	border-color: #16a34a;
	color: #0f766e;
}

.lj-quick-check__option.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	border-color: #f43f5e;
	color: #be123c;
}

.lj-quick-check__rationale {
	margin-top: 12px;
	padding: 12px;
	border-radius: 8px;
}

.lj-quick-check__rationale.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-quick-check__rationale.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

/* Override all button margin-top globally */
#lj-runner button,
#lj-runner .button,
button.button,
button {
	margin-top: 0 !important;
}

/* Content Card Variants */
.lj-card.lj-card--content { background: inherit; }
.lj-card.lj-card--content-examples {
	background: inherit;
	border: 1px solid rgba(59, 130, 246, 0.12);
	box-shadow: 0 18px 45px -28px rgba(30, 64, 175, 0.3);
}

/* Interactive Intro (optional enhancement for content examples) */
.lj-content-card__interactiveIntro {
	border-radius: 14px;
	background: linear-gradient(0deg, rgba(255,255,255,0.86), rgba(255,255,255,0.86)),
		rgba(59,130,246,0.06);
	border: 1px solid rgba(59,130,246,0.18);
	padding: 14px 16px;
	box-shadow: 0 18px 45px -30px rgba(37,99,235,0.25);
}

/* Add breathing room for the fun-fact control */
.lj-content-card__funFact { margin-top: 12px; }

.lj-content-card__extraIcons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.lj-content-card__extraIcons .lj-extraIcon {
	border-radius: 999px;
	background: rgba(2,132,199,0.08);
	border: 1px solid rgba(2,132,199,0.22);
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1;
}
.lj-content-card__extraIcons.is-animated .lj-extraIcon {
	display: inline-block;
	animation: lj-extra-wiggle 3.2s ease-in-out infinite;
}
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(2) { animation-delay: .2s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(3) { animation-delay: .4s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(4) { animation-delay: .6s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(5) { animation-delay: .8s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(6) { animation-delay: 1.0s; }

@keyframes lj-extra-wiggle {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-2px) rotate(-2deg); }
}

.lj-content-card__icon.is-animated { position: relative; }
.lj-content-card__icon.is-animated span { display: inline-block; animation: lj-intro-bounce 2.6s ease-in-out infinite; }
.lj-content-card__icon.is-multi { display: inline-flex; gap: 8px; }
.lj-content-card__icon.is-multi span { font-size: 20px; }
.lj-content-card__icon.is-multi span:nth-child(2) { animation-delay: .15s; }
.lj-content-card__icon.is-multi span:nth-child(3) { animation-delay: .3s; }
.lj-content-card__icon.is-multi span:nth-child(4) { animation-delay: .45s; }
.lj-content-card__icon.is-multi span:nth-child(5) { animation-delay: .6s; }
.lj-content-card__icon.is-multi span:nth-child(6) { animation-delay: .75s; }
@keyframes lj-intro-bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	40% { transform: translateY(-3px) rotate(-3deg); }
	60% { transform: translateY(0) rotate(0deg); }
	80% { transform: translateY(-1px) rotate(3deg); }
}

.lj-funfact__toggle {
    margin-top: 14px;
    margin-bottom: 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	background: #0ea5e9;
	color: #ffffff;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	box-shadow: 0 10px 24px -14px rgba(14,165,233,0.8);
}
.lj-funfact__toggle.is-open { background: #0369a1; }
.lj-funfact__icon { filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.lj-funfact__label { font-weight: 700; font-size: 14px; }

.lj-funfact__content {
	margin-top: 10px;
	border-radius: 12px;
	border: 1px dashed rgba(14,165,233,0.55);
	background: rgba(224,242,254,0.45);
	padding: 12px 14px;
	display: none;
}
.lj-funfact__content.is-visible { display: block; }
.lj-card.lj-card--example { background: inherit; border: 1px solid rgba(51, 92, 255, 0.15); }
.lj-example__icons { display: inline-flex; gap: 8px; margin-bottom: 8px; }
.lj-example__icon { display: inline-block; font-size: 18px; animation: lj-intro-bounce 2.6s ease-in-out infinite; }
.lj-example__icon:nth-child(2) { animation-delay: .12s; }
.lj-example__icon:nth-child(3) { animation-delay: .24s; }
.lj-example__icon:nth-child(4) { animation-delay: .36s; }
.lj-example__icon:nth-child(5) { animation-delay: .48s; }
.lj-example__icon:nth-child(6) { animation-delay: .6s; }

.lj-example__intro {
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(240, 249, 255, 0.65);
	border: 1px solid rgba(59,130,246,0.18);
	margin-bottom: 10px;
}

.lj-example__notes {
	margin-top: 12px;
	border-radius: 12px;
	background: rgba(250, 250, 250, 0.9);
	border: 1px dashed rgba(2,132,199,0.35);
	padding: 12px 14px;
}
.lj-example__notesHeader { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.lj-example__notesBody p { margin: 0; }
.lj-card.lj-card--comparison {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}
.lj-card.lj-card--media-gallery {
	border: 0;
}

/* Physics Comparison Card */
.lj-physics-comparison {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-physics-comparison__intro {
	margin-bottom: 16px;
}

.lj-physics-comparison__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 10px;
	overflow: hidden;
}

.lj-physics-comparison__table thead th {
	text-align: left;
	padding: 0.6rem 0.55rem;
	background: transparent;
	border-right: 1px solid rgba(15, 23, 42, 0.12);
	font-weight: 600;
}

/* Warm header for Heat, cool header for Temperature */
.lj-physics-comparison__table thead th:first-child {
	background: #ffe4d6; /* warm peach */
}
.lj-physics-comparison__table thead th:last-child {
	background: #dbeafe; /* cool sky */
	border-right: none;
}

/* Tinted body cells per column for readability */
.lj-physics-comparison__table tbody td {
	padding: 0.6rem 0.55rem;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	border-right: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
}
.lj-physics-comparison__table tbody td:first-child {
	background: #fff7ed; /* subtle warm tint */
}
.lj-physics-comparison__table tbody td:last-child {
	background: #eff6ff; /* subtle cool tint */
	border-right: none;
}

/* Interactive row hover */
.lj-physics-comparison__table tbody tr:hover td {
	background: #f1f5f9; /* slate-100 */
	transition: background-color 140ms ease;
}

.lj-physics-comparison__empty {
	color: #64748b;
	text-align: center;
	padding: 20px;
}

/* Media Gallery Card */
.lj-media-gallery {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-media-gallery__intro {
	margin-bottom: 16px;
}

.lj-media-gallery__items {
	display: grid;
	gap: 20px;
}

.lj-media-gallery__items--grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.lj-media-gallery__items--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	padding-bottom: 8px;
}

.lj-media-gallery__items--carousel .lj-media-gallery__item {
	flex-shrink: 0;
	scroll-snap-align: start;
	min-width: 280px;
}

.lj-media-gallery__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-media-gallery__mediaWrapper {
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.lj-media-gallery__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.lj-media-gallery__caption {
	font-size: 14px;
	color: #64748b;
	text-align: center;
}

.lj-media-gallery__note {
	font-size: 13px;
	color: #94a3b8;
	text-align: left;
}

.lj-media-gallery__footnote {
	margin-top: 12px;
	font-size: 13px;
	color: #64748b;
}

.lj-media-gallery__empty {
	color: #64748b;
	text-align: center;
	padding: 20px;
}

/* Physics Banner Card */
.lj-physics-banner {
	position: relative;
	overflow: hidden;
	color: #0b1027;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	/* Remove padding - use CardShell body padding instead */
}

.lj-physics-banner__bg {
	position: absolute;
	inset: 0;
	/* Extend background to fill CardShell body area */
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	background: linear-gradient(135deg, #ede9fe 0%, #cffafe 50%, #fce7f3 100%);
	animation: lj-physics-banner-bg 12s ease-in-out infinite;
	z-index: -2;
}

@keyframes lj-physics-banner-bg {
	0% { filter: hue-rotate(0deg) saturate(105%); }
	50% { filter: hue-rotate(25deg) saturate(115%); }
	100% { filter: hue-rotate(0deg) saturate(105%); }
}

.lj-physics-banner__shapes { 
	position: absolute; 
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	z-index: -1; 
}
.lj-physics-banner__shape {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(139,92,246,0.25), rgba(139,92,246,0) 70%);
	animation: lj-float 9s ease-in-out infinite;
}
.lj-physics-banner__shape:nth-child(1) { top: -40px; left: -40px; animation-delay: .2s; }
.lj-physics-banner__shape:nth-child(2) { bottom: -30px; right: -30px; animation-delay: .8s; }
.lj-physics-banner__shape:nth-child(3) { top: 20%; right: 18%; width: 120px; height: 120px; animation-delay: 1.6s; }

@keyframes lj-float {
	0%,100% { transform: translateY(0) translateX(0) scale(1); opacity: .9; }
	50% { transform: translateY(-8px) translateX(6px) scale(1.03); opacity: 1; }
}

.lj-physics-banner__content { text-align: center; }
.lj-physics-banner__top {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: #334155;
	opacity: .95;
	transform: translateY(6px);
	animation: lj-slide-up .6s ease-out .05s both;
}
.lj-physics-banner__top span { background: linear-gradient(90deg, #475569, #1f2937); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lj-physics-banner__main {
	margin: 6px 0 4px 0;
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #ec4899);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lj-fade-in .55s ease-out .15s both;
}

.lj-physics-banner__subtitle { margin-top: 8px; color: #334155; opacity: .95; }

@keyframes lj-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lj-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* A thin border/glow to harmonise with Physics theme */
.lj-card.lj-card--banner {
	border: 1px solid rgba(99,102,241,0.18);
	box-shadow: 0 20px 45px -30px rgba(99,102,241,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lj-physics-banner__bg,
	.lj-physics-banner__shape { animation: none; }
}


/* Media Spotlight Card */
.lj-media-spotlight {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-media-spotlight__intro,
.lj-media-spotlight__footnote {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-media-spotlight__mediaSection {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-media-spotlight__iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 16px;
	overflow: hidden;
	background: #0f172a;
}

.lj-media-spotlight__iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lj-media-spotlight__audio { width: 100%; }

.lj-media-spotlight__mediaCaption { margin: 0; color: #0f172a; }

.lj-media-spotlight__transcriptLink { color: #1d4ed8; text-decoration: underline; }

.lj-media-spotlight__highlights { display: flex; flex-direction: column; gap: 16px; }

.lj-media-spotlight__highlightsTitle { margin: 0; color: #0f172a; }

.lj-media-spotlight__highlightList {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
}

.lj-media-spotlight__highlightItem {
	border-radius: 16px; border: 1px solid rgba(15,23,42,0.08); background: rgba(255,255,255,0.92); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}

.lj-media-spotlight__highlightHeader { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }

.lj-media-spotlight__highlightLabel { color: #0f172a; }

.lj-media-spotlight__highlightTime { color: #2563eb; }

.lj-media-spotlight__mediaFallback { padding: 20px; border-radius: 16px; background: rgba(248,113,113,0.12); border: 1px solid rgba(239,68,68,0.2); }


/* Heat Travel Card */
.lj-card.lj-card--heat-travel { background: inherit; }

.lj-heat-travel { display: flex; flex-direction: column; gap: 18px; }

.lj-heat-travel__image { text-align: center; }
.lj-heat-travel__image img { max-width: 420px; width: 100%; height: auto; border-radius: 12px; display: inline-block; }
.lj-heat-travel__caption { margin-top: 6px; color: #475569; font-weight: 700; }

.lj-heat-travel__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

.lj-heat-travel__column {
	position: relative;
	border: 1px solid rgba(15,23,42,0.12);
	border-radius: 14px;
	background: #ffffff !important; /* force pure white inside the box */
	padding: 16px 18px;
	box-shadow: 0 12px 28px -24px rgba(15,23,42,0.35);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lj-heat-travel__column:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 42px -22px rgba(15,23,42,0.35);
	border-color: rgba(15,23,42,0.18);
}
.lj-heat-travel__column::before {
	content: "";
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, #64748b, #94a3b8);
}
/* Remove tinted backgrounds; keep themed borders and gradient accent bars */
.lj-heat-travel__column:nth-of-type(1) {
	border-color: rgba(99,102,241,0.25);
}
.lj-heat-travel__column:nth-of-type(1)::before { background: linear-gradient(90deg, #6366f1, #60a5fa); }

.lj-heat-travel__column:nth-of-type(2) {
	border-color: rgba(16,185,129,0.28);
}
.lj-heat-travel__column:nth-of-type(2)::before { background: linear-gradient(90deg, #10b981, #22d3ee); }

.lj-heat-travel__column:nth-of-type(3) {
	border-color: rgba(251,146,60,0.28);
}
.lj-heat-travel__column:nth-of-type(3)::before { background: linear-gradient(90deg, #fb923c, #f43f5e); }

.lj-heat-travel__columnTitle { margin: 0 0 6px 0; text-align: center; font-weight: 700; }
.lj-heat-travel__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1024px) { .lj-heat-travel__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lj-heat-travel__columns { grid-template-columns: 1fr; } }

/* QuickCheck completion (parity with Mathematics) */
.lj-quickcheck-completion { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; gap: 20px; }
.lj-quickcheck-completion__icon { font-size: 64px; line-height: 1; animation: celebrationAnimation 1s ease-out; }
.lj-card .lj-quickcheck-completion__title { 
	margin: 0; 
	font-size: 28px; 
	font-weight: 800; 
	background: linear-gradient(90deg, #0ea5e9 0%, #8b5cf6 50%, #ec4899 100%) !important; 
	-webkit-background-clip: text !important; 
	background-clip: text !important; 
	color: transparent !important; 
	-webkit-text-fill-color: transparent !important;
	text-shadow: 0 0 0 rgba(0,0,0,0); 
}
.lj-quickcheck-completion__message { margin: 0; font-size: 18px; color: #475569; line-height: 1.6; max-width: 560px; }
.lj-quickcheck-completion__emojiRow { display: inline-flex; gap: 12px; font-size: 22px; }
.lj-quickcheck-completion__button { 
	margin-top: 8px; 
	border: 0; 
	border-radius: 10px; 
	font-weight: 800; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: .6rem; 
	padding: .8rem 1.6rem; 
	cursor: pointer; 
	transition: all .2s ease; 
	background: linear-gradient(135deg, #335cff 0%, #7c3aed 50%, #ec4899 100%) !important; 
	color: #fff; 
	box-shadow: 0 10px 30px -10px rgba(60, 64, 255, 0.55); 
}
.lj-quickcheck-completion__button:hover:not(:disabled), 
.lj-quickcheck-completion__button:focus:not(:disabled) { 
	transform: translateY(-1px) scale(1.02); 
	box-shadow: 0 14px 34px -10px rgba(60, 64, 255, 0.6); 
	filter: saturate(1.05); 
}
.lj-quickcheck-completion__button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(51, 92, 255, 0.2); }
.lj-quickcheck-completion__button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
@keyframes celebrationAnimation { 0% { opacity: 0; transform: scale(.5) rotate(-180deg); } 50% { transform: scale(1.2) rotate(10deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

/* Specific sizing for the third carousel item (thermal image) */
/* Removed wrapper-specific sizing to simplify DOM structure */

/* Uniform square sizing for all carousel items (apply to every item) */
.lj-media-gallery__items--carousel .lj-media-gallery__item .lj-media-gallery__image {
	width: 280px;
	height: 280px;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

.lj-card {
	padding: 0;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px 8px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
	position: relative;
}

.lj-card__headerLeft {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.lj-card__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lj-card__headerActions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Icon button uses consolidated button system */
.lj-card__iconButton {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.9);
	color: #1e293b;
	border: 1px solid rgba(148, 163, 184, 0.4);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.6;
	font-weight: 600;
	transition: all 0.2s ease;
	box-sizing: border-box;
	font-family: inherit;
}

.lj-card__iconButton span {
	pointer-events: none;
}

.lj-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 10px 12px 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
	overflow-x: hidden;
}

/* Ensure all direct children respect width constraints */
.lj-card__body > * {
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.lj-card__body:has(.lj-sentenceparts-container) {
	text-align: center;
}

.lj-card__footer {
	padding: 16px 24px 20px;
	border-top: 1px solid rgba(15, 23, 42, 0.12);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	background: rgba(255, 255, 255, 0.75);
}

.lj-card__footerActions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* Reset button uses consolidated button system */
.lj-card__resetButton {
	padding: 6px 12px;
	font-size: var(--lj-font-caption-size, 0.875rem);
	margin-left: auto;
	/* Inherit from .lj-button--danger */
	background: rgba(239, 68, 68, 0.08);
	color: #dc2626;
	border: 1px solid rgba(239, 68, 68, 0.4);
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: inherit;
}

.lj-card__resetButton:hover:not(:disabled) {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.6);
	color: #b91c1c;
	transform: translateY(-1px);
}

.lj-card__resetButton:active:not(:disabled) {
	transform: translateY(0);
}

.lj-card__resetButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

.lj-card__title {
	margin: 0;
}

.lj-card__desc {
	margin: 0 0 12px;
}

/* Progress Bar */
.lj-card__progress {
	width: 100%;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.lj-card__progress-bar-container {
	width: 100%;
	height: 8px;
	background-color: rgba(15, 23, 42, 0.08);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 8px;
}

.lj-card__progress-bar {
	height: 100%;
	background-color: #2079b0; /* Matches .lj-header background */
	border-radius: 4px;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

/* Gradient shimmer effect using same blue color */
.lj-card__progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
}

/* Particle/sparkle effect */
.lj-card__progress-bar::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 12px;
	transform: translate(50%, -50%);
	opacity: 0;
	pointer-events: none;
	border-radius: 50%;
	background: rgba(251, 146, 60, 0.9);
	box-shadow: 0 0 6px 3px rgba(249, 115, 22, 0.8);
}

.lj-card__progress-bar.animate-sparkle::before {
	animation: sparkle 0.8s ease-out;
}

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

@keyframes sparkle {
	0% {
		opacity: 0;
		transform: translate(50%, -50%) scale(0);
		box-shadow: 
			0 0 0 0 rgba(251, 146, 60, 0.9),
			4px -2px 0 0 rgba(249, 115, 22, 0.8),
			-4px 2px 0 0 rgba(251, 146, 60, 0.9),
			6px 1px 0 0 rgba(249, 115, 22, 0.7),
			-6px -1px 0 0 rgba(251, 146, 60, 0.8),
			2px 3px 0 0 rgba(249, 115, 22, 0.7),
			-2px -3px 0 0 rgba(251, 146, 60, 0.8),
			8px -3px 0 0 rgba(249, 115, 22, 0.6),
			-8px 3px 0 0 rgba(251, 146, 60, 0.7);
	}
	30% {
		opacity: 1;
		transform: translate(50%, -50%) scale(1);
		box-shadow: 
			0 0 14px 7px rgba(251, 146, 60, 0.9),
			4px -2px 10px 5px rgba(249, 115, 22, 0.8),
			-4px 2px 11px 5px rgba(251, 146, 60, 0.9),
			6px 1px 9px 4px rgba(249, 115, 22, 0.7),
			-6px -1px 10px 4px rgba(251, 146, 60, 0.8),
			2px 3px 9px 4px rgba(249, 115, 22, 0.7),
			-2px -3px 10px 4px rgba(251, 146, 60, 0.8),
			8px -3px 8px 3px rgba(249, 115, 22, 0.6),
			-8px 3px 9px 3px rgba(251, 146, 60, 0.7);
	}
	60% {
		opacity: 0.9;
		transform: translate(50%, -50%) scale(1.4);
		box-shadow: 
			0 0 18px 9px rgba(251, 146, 60, 0.7),
			4px -2px 12px 6px rgba(249, 115, 22, 0.6),
			-4px 2px 13px 6px rgba(251, 146, 60, 0.7),
			6px 1px 11px 5px rgba(249, 115, 22, 0.5),
			-6px -1px 12px 5px rgba(251, 146, 60, 0.6),
			2px 3px 11px 5px rgba(249, 115, 22, 0.5),
			-2px -3px 12px 5px rgba(251, 146, 60, 0.6),
			8px -3px 10px 4px rgba(249, 115, 22, 0.4),
			-8px 3px 11px 4px rgba(251, 146, 60, 0.5);
	}
	100% {
		opacity: 0;
		transform: translate(50%, -50%) scale(2);
		box-shadow: 
			0 0 0 0 rgba(251, 146, 60, 0),
			4px -2px 0 0 rgba(249, 115, 22, 0),
			-4px 2px 0 0 rgba(251, 146, 60, 0),
			6px 1px 0 0 rgba(249, 115, 22, 0),
			-6px -1px 0 0 rgba(251, 146, 60, 0),
			2px 3px 0 0 rgba(249, 115, 22, 0),
			-2px -3px 0 0 rgba(251, 146, 60, 0),
			8px -3px 0 0 rgba(249, 115, 22, 0),
			-8px 3px 0 0 rgba(251, 146, 60, 0);
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.lj-card__progress-bar {
		transition: width 0.3s ease;
	}
	
	.lj-card__progress-bar::after {
		animation: none;
	}
	
	.lj-card__progress-bar.animate-sparkle::before {
		animation: none;
	}
}

.lj-card__progress-text {
	margin: 0;
	font-size: var(--lj-font-caption-size, 0.875rem);
	line-height: var(--lj-font-caption-line, 1.25rem);
	color: rgba(15, 23, 42, 0.6);
	text-align: center;
}

/* View Prompt Button (Admin Only) */
.lj-card__viewPromptButton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #2079b0;
	background: rgba(32, 121, 176, 0.08);
	border: 1px solid rgba(32, 121, 176, 0.3);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.lj-card__viewPromptButton:hover {
	background: rgba(32, 121, 176, 0.15);
	border-color: rgba(32, 121, 176, 0.5);
	color: #1d4ed8;
	transform: translateY(-1px);
}

.lj-card__viewPromptButton:active {
	transform: translateY(0);
}

.lj-card__viewPromptButton svg {
	flex-shrink: 0;
}

/* Instructions Editor Modal */
.lj-card__instructionsEditor-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	animation: fadeIn 0.2s ease;
}

.lj-card__instructionsEditor-modal {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease;
	overflow: hidden;
}

.lj-card__instructionsEditor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lj-card__instructionsEditor-header h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

.lj-card__instructionsEditor-close {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	color: #64748b;
	cursor: pointer;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	font-family: inherit;
	line-height: 1;
	padding: 0;
}

.lj-card__instructionsEditor-close:hover {
	background: rgba(15, 23, 42, 0.05);
	color: #0f172a;
}

.lj-card__instructionsEditor-body {
	padding: 24px;
	flex: 1;
	overflow-y: auto;
}

.lj-card__instructionsEditor-textarea {
	width: 100%;
	min-height: 150px;
	padding: 12px;
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 8px;
	font-size: 14px;
	font-family: monospace;
	line-height: 1.5;
	resize: vertical;
	box-sizing: border-box;
	background: #f8fafc;
	overflow-x: auto;
}

.lj-card__instructionsEditor-textarea:focus {
	outline: none;
	border-color: #2079b0;
	box-shadow: 0 0 0 3px rgba(32, 121, 176, 0.1);
}

.lj-card__instructionsEditor-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 20px 24px;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
	background: rgba(248, 250, 252, 0.5);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Card Variants */
.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* Shared Body Helpers */

/* AI Practice Specific */
.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(235, 87, 87, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #EB5757 0%, #dc2626 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #991b1b; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__sentence { color: #0f172a; padding: 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Error Highlighting for AI Open-Ended Questions */
.lj-card__feedback .error-highlight {
	background: #fee;
	color: #c00;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: 600;
	display: inline;
	margin: 0;
}

/* AI Open-Ended Card */
.lj-ai-open-ended {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-ai-open-ended__instructions {
	margin-bottom: 16px;
	color: #0f172a;
}

.lj-ai-open-ended__question {
	margin-bottom: 16px;
}

.lj-ai-open-ended__answer textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}

.lj-ai-open-ended__feedback {
	padding: 14px;
	border-radius: 10px;
	margin-top: 12px;
}

.lj-ai-open-ended__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-ai-open-ended__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

.lj-ai-open-ended__actions {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

/* Quick Check Card */
.lj-quick-check {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-quick-check__question {
	margin-bottom: 8px;
}

.lj-quick-check__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lj-quick-check__option {
	padding: 12px 16px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.lj-quick-check__option:hover:not(:disabled) {
	background: rgba(235, 87, 87, 0.05);
	border-color: rgba(235, 87, 87, 0.3);
	transform: none;
}

.lj-quick-check__option.is-selected {
	background: rgba(235, 87, 87, 0.1);
	border-color: rgba(235, 87, 87, 0.5);
}

.lj-quick-check__option.is-correct {
	background: rgba(22, 163, 74, 0.12);
	border-color: #16a34a;
	color: #0f766e;
}

.lj-quick-check__option.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	border-color: #f43f5e;
	color: #be123c;
}

.lj-quick-check__feedback {
	margin-top: 12px;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
}

.lj-quick-check__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-quick-check__rationale {
	margin-top: 12px;
	padding: 12px;
	border-radius: 8px;
}

.lj-quick-check__rationale.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-quick-check__rationale.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

/* Override all button margin-top globally */
#lj-runner button,
#lj-runner .button,
button.button,
button {
	margin-top: 0 !important;
}

/* Content Card Variants */
.lj-card.lj-card--content { background: inherit; }
.lj-card.lj-card--content-examples {
	background: inherit;
	border: 1px solid rgba(235, 87, 87, 0.12);
	box-shadow: 0 18px 45px -28px rgba(235, 87, 87, 0.3);
}

/* Interactive Intro (optional enhancement for content examples) */
.lj-content-card__interactiveIntro {
	border-radius: 14px;
	background: linear-gradient(0deg, rgba(255,255,255,0.86), rgba(255,255,255,0.86)),
		rgba(235,87,87,0.06);
	border: 1px solid rgba(235,87,87,0.18);
	padding: 14px 16px;
	box-shadow: 0 18px 45px -30px rgba(235,87,87,0.25);
}

/* Add breathing room for the fun-fact control */
.lj-content-card__funFact { margin-top: 12px; }

.lj-content-card__extraIcons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.lj-content-card__extraIcons .lj-extraIcon {
	border-radius: 999px;
	background: rgba(235,87,87,0.08);
	border: 1px solid rgba(235,87,87,0.22);
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1;
}
.lj-content-card__extraIcons.is-animated .lj-extraIcon {
	display: inline-block;
	animation: lj-extra-wiggle 3.2s ease-in-out infinite;
}
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(2) { animation-delay: .2s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(3) { animation-delay: .4s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(4) { animation-delay: .6s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(5) { animation-delay: .8s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(6) { animation-delay: 1.0s; }

@keyframes lj-extra-wiggle {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-2px) rotate(-2deg); }
}

.lj-content-card__icon.is-animated { position: relative; }
.lj-content-card__icon.is-animated span { display: inline-block; animation: lj-intro-bounce 2.6s ease-in-out infinite; }
.lj-content-card__icon.is-multi { display: inline-flex; gap: 8px; }
.lj-content-card__icon.is-multi span { font-size: 20px; }
.lj-content-card__icon.is-multi span:nth-child(2) { animation-delay: .15s; }
.lj-content-card__icon.is-multi span:nth-child(3) { animation-delay: .3s; }
.lj-content-card__icon.is-multi span:nth-child(4) { animation-delay: .45s; }
.lj-content-card__icon.is-multi span:nth-child(5) { animation-delay: .6s; }
.lj-content-card__icon.is-multi span:nth-child(6) { animation-delay: .75s; }
@keyframes lj-intro-bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	40% { transform: translateY(-3px) rotate(-3deg); }
	60% { transform: translateY(0) rotate(0deg); }
	80% { transform: translateY(-1px) rotate(3deg); }
}

.lj-funfact__toggle {
    margin-top: 14px;
    margin-bottom: 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	background: #EB5757;
	color: #ffffff;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	box-shadow: 0 10px 24px -14px rgba(235,87,87,0.8);
}
.lj-funfact__toggle.is-open { background: #c53030; }
.lj-funfact__icon { filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.lj-funfact__label { font-weight: 700; font-size: 14px; }

.lj-funfact__content {
	margin-top: 10px;
	border-radius: 12px;
	border: 1px dashed rgba(235,87,87,0.55);
	background: rgba(254,226,226,0.45);
	padding: 12px 14px;
	display: none;
}
.lj-funfact__content.is-visible { display: block; }
.lj-card.lj-card--example { background: inherit; border: 1px solid rgba(235, 87, 87, 0.15); }
.lj-example__icons { display: inline-flex; gap: 8px; margin-bottom: 8px; }
.lj-example__icon { display: inline-block; font-size: 18px; animation: lj-intro-bounce 2.6s ease-in-out infinite; }
.lj-example__icon:nth-child(2) { animation-delay: .12s; }
.lj-example__icon:nth-child(3) { animation-delay: .24s; }
.lj-example__icon:nth-child(4) { animation-delay: .36s; }
.lj-example__icon:nth-child(5) { animation-delay: .48s; }
.lj-example__icon:nth-child(6) { animation-delay: .6s; }

.lj-example__intro {
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(254, 242, 242, 0.65);
	border: 1px solid rgba(235,87,87,0.18);
	margin-bottom: 10px;
}

.lj-example__notes {
	margin-top: 12px;
	border-radius: 12px;
	background: rgba(250, 250, 250, 0.9);
	border: 1px dashed rgba(235,87,87,0.35);
	padding: 12px 14px;
}
.lj-example__notesHeader { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.lj-example__notesBody p { margin: 0; }
.lj-card.lj-card--comparison {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}
.lj-card.lj-card--media-gallery {
	background: inherit;
	border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Chemistry Comparison Card */
.lj-chemistry-comparison {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-chemistry-comparison__intro {
	margin-bottom: 16px;
}

.lj-comparison__icons {
	display: inline-flex;
	gap: 12px;
	margin-bottom: 16px;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.lj-comparison__icon {
	display: inline-block;
	font-size: 32px;
	line-height: 1;
	animation: lj-comparison-icon-bounce 2.5s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.lj-comparison__icon:nth-child(2) {
	animation-delay: 0.3s;
}

@keyframes lj-comparison-icon-bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-4px) rotate(-5deg); }
	50% { transform: translateY(-2px) rotate(5deg); }
	75% { transform: translateY(-3px) rotate(-3deg); }
}

.lj-chemistry-comparison__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 2px solid rgba(15, 23, 42, 0.12);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;
}

.lj-chemistry-comparison__table:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.lj-chemistry-comparison__table thead th {
	text-align: center;
	padding: 0.85rem 1rem;
	background: transparent;
	border-right: 2px solid rgba(15, 23, 42, 0.15);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

/* Vibrant contrasting header colors - Purple for Characteristic column */
.lj-chemistry-comparison__table thead th:first-child {
	background: linear-gradient(135deg, #e9d5ff 0%, #ddd6fe 100%);
	color: #6b21a8;
	border-bottom: 3px solid #9333ea;
}

.lj-chemistry-comparison__table thead th:nth-child(2) {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	color: #92400e;
	border-bottom: 3px solid #f59e0b;
}

.lj-chemistry-comparison__table thead th:nth-child(3) {
	background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	color: #1e40af;
	border-bottom: 3px solid #3b82f6;
}

.lj-chemistry-comparison__table thead th:last-child {
	background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
	color: #c2410c;
	border-bottom: 3px solid #f97316;
	border-right: none;
}

/* Tinted body cells per column with better contrast */
.lj-chemistry-comparison__table tbody td {
	padding: 0.85rem 1rem;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
	border-right: 2px solid rgba(15, 23, 42, 0.15);
	background: #ffffff;
	transition: all 0.2s ease;
	position: relative;
	text-align: center;
}

.lj-chemistry-comparison__table tbody td:first-child {
	background: linear-gradient(to right, #faf5ff 0%, #ffffff 100%);
}

.lj-chemistry-comparison__table tbody td:nth-child(2) {
	background: linear-gradient(to right, #fffbeb 0%, #ffffff 100%);
}

.lj-chemistry-comparison__table tbody td:nth-child(3) {
	background: linear-gradient(to right, #eff6ff 0%, #ffffff 100%);
}

.lj-chemistry-comparison__table tbody td:last-child {
	background: linear-gradient(to right, #fff7ed 0%, #ffffff 100%);
	border-right: none;
}

/* Color icons in comparison table - center align cells with icons */
.lj-chemistry-comparison__table tbody td:nth-child(2),
.lj-chemistry-comparison__table tbody td:nth-child(3) {
	text-align: center;
}

/* Style icons in comparison table cells */
.lj-chemistry-comparison__table tbody td:nth-child(2) p,
.lj-chemistry-comparison__table tbody td:nth-child(3) p {
	font-weight: 700;
	font-size: 1.3em;
	line-height: 1.5;
}

/* Color checkmark (✓) in green */
.lj-chemistry-comparison__table tbody td.icon-checkmark,
.lj-chemistry-comparison__table tbody td.lj-chemistry-comparison__table-icon.icon-checkmark,
.lj-chemistry-comparison__table tbody td.icon-checkmark *,
.lj-chemistry-comparison__table tbody td.icon-checkmark p,
.lj-chemistry-comparison__table tbody td.icon-checkmark div,
.lj-chemistry-comparison__table tbody td.icon-checkmark .lj-card__html {
	color: #16a34a !important;
}

/* Color cross (✗) in red */
.lj-chemistry-comparison__table tbody td.icon-cross,
.lj-chemistry-comparison__table tbody td.lj-chemistry-comparison__table-icon.icon-cross,
.lj-chemistry-comparison__table tbody td.icon-cross *,
.lj-chemistry-comparison__table tbody td.icon-cross p,
.lj-chemistry-comparison__table tbody td.icon-cross div,
.lj-chemistry-comparison__table tbody td.icon-cross .lj-card__html {
	color: #dc2626 !important;
}

/* Enhanced interactive row hover with column-specific effects */
.lj-chemistry-comparison__table tbody tr {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.lj-chemistry-comparison__table tbody tr:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lj-chemistry-comparison__table tbody tr:hover td:first-child {
	background: linear-gradient(to right, #e9d5ff 0%, #f3e8ff 100%);
}

.lj-chemistry-comparison__table tbody tr:hover td:nth-child(2) {
	background: linear-gradient(to right, #fef3c7 0%, #fffbeb 100%);
}

.lj-chemistry-comparison__table tbody tr:hover td:nth-child(3) {
	background: linear-gradient(to right, #dbeafe 0%, #e0f2fe 100%);
}

.lj-chemistry-comparison__table tbody tr:hover td:last-child {
	background: linear-gradient(to right, #fed7aa 0%, #ffedd5 100%);
}

/* Add subtle animation on load */
.lj-chemistry-comparison__table tbody tr {
	animation: fadeInRow 0.4s ease-out;
	animation-fill-mode: both;
}

.lj-chemistry-comparison__table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.lj-chemistry-comparison__table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.lj-chemistry-comparison__table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.lj-chemistry-comparison__table tbody tr:nth-child(4) { animation-delay: 0.2s; }

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

.lj-chemistry-comparison__empty {
	color: #64748b;
	text-align: center;
	padding: 20px;
}

/* Media Gallery Card */
.lj-media-gallery {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lj-media-gallery__intro {
	margin-bottom: 16px;
}

.lj-media-gallery__items {
	display: grid;
	gap: 20px;
}

.lj-media-gallery__items--grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.lj-media-gallery__items--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	padding-bottom: 8px;
}

.lj-media-gallery__items--carousel .lj-media-gallery__item {
	flex-shrink: 0;
	scroll-snap-align: start;
	min-width: 280px;
}

.lj-media-gallery__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 260px;
}

.lj-media-gallery__image {
	width: 260px;
	height: 260px;
	min-height: 260px;
	max-width: 260px;
	max-height: 260px;
	object-fit: contain;
	display: block;
	border-radius: 8px;
	margin-left: auto;
	margin-right: auto;
}

.lj-media-gallery__caption {
	font-size: 14px;
	color: #64748b;
	text-align: center;
}

/* Left-align captions only for "Changes of State" card */
[data-card-title="Changes of State"] .lj-media-gallery__caption {
	text-align: left;
}

.lj-media-gallery__note {
	font-size: 13px;
	color: #94a3b8;
	text-align: left;
}

.lj-media-gallery__footnote {
	margin-top: 12px;
	font-size: 13px;
	color: #64748b;
}

/* Comparison table within media gallery */
.lj-media-gallery__comparison {
	margin-top: 24px;
}
.lj-media-gallery__comparison table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
.lj-media-gallery__comparison table th,
.lj-media-gallery__comparison table td {
	text-align: center;
	padding: 0.85rem 1rem;
}

.lj-media-gallery__comparison-intro {
	margin-bottom: 16px;
}

.lj-media-gallery__empty {
	color: #64748b;
	text-align: center;
	padding: 20px;
}

/* Chemistry Banner Card */
.lj-chemistry-banner {
	position: relative;
	overflow: hidden;
	color: #0b1027;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	/* Remove padding - use CardShell body padding instead */
}

.lj-chemistry-banner__bg {
	position: absolute;
	inset: 0;
	/* Extend background to fill CardShell body area */
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	background: linear-gradient(135deg, #ede9fe 0%, #cffafe 50%, #fce7f3 100%);
	animation: lj-chemistry-banner-bg 12s ease-in-out infinite;
	z-index: -2;
}

@keyframes lj-chemistry-banner-bg {
	0% { filter: hue-rotate(0deg) saturate(105%); }
	50% { filter: hue-rotate(25deg) saturate(115%); }
	100% { filter: hue-rotate(0deg) saturate(105%); }
}

.lj-chemistry-banner__shapes { 
	position: absolute; 
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	z-index: -1; 
}
.lj-chemistry-banner__shape {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(139,92,246,0.25), rgba(139,92,246,0) 70%);
	animation: lj-float 9s ease-in-out infinite;
}
.lj-chemistry-banner__shape:nth-child(1) { top: -40px; left: -40px; animation-delay: .2s; }
.lj-chemistry-banner__shape:nth-child(2) { bottom: -30px; right: -30px; animation-delay: .8s; }
.lj-chemistry-banner__shape:nth-child(3) { top: 20%; right: 18%; width: 120px; height: 120px; animation-delay: 1.6s; }

@keyframes lj-float {
	0%,100% { transform: translateY(0) translateX(0) scale(1); opacity: .9; }
	50% { transform: translateY(-8px) translateX(6px) scale(1.03); opacity: 1; }
}

.lj-chemistry-banner__content { text-align: center; }
.lj-chemistry-banner__top {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: #334155;
	opacity: .95;
	transform: translateY(6px);
	animation: lj-slide-up .6s ease-out .05s both;
}
.lj-chemistry-banner__top span { background: linear-gradient(90deg, #475569, #1f2937); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lj-chemistry-banner__main {
	margin: 6px 0 4px 0;
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #ec4899);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lj-fade-in .55s ease-out .15s both;
}

.lj-chemistry-banner__subtitle { margin-top: 8px; color: #334155; opacity: .95; }

@keyframes lj-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lj-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* A thin border/glow to harmonise with Physics theme */
.lj-card.lj-card--banner {
	border: 1px solid rgba(99,102,241,0.18);
	box-shadow: 0 20px 45px -30px rgba(99,102,241,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lj-chemistry-banner__bg,
	.lj-chemistry-banner__shape { animation: none; }
}


/* Media Spotlight Card */
.lj-media-spotlight {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lj-media-spotlight__intro,
.lj-media-spotlight__footnote {
	padding: 16px;
	border-radius: 14px;
	background: rgba(248, 250, 252, 0.85);
}

.lj-media-spotlight__mediaSection {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.lj-media-spotlight__mediaSection .lj-media-spotlight__mediaCaption {
	text-align: center !important;
	width: 100%;
}

.lj-media-spotlight__iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 16px;
	overflow: hidden;
	background: #0f172a;
}

/* When wrapper contains an image, adjust sizing */
.lj-media-spotlight__iframeWrapper[style*="height: auto"] {
	padding-top: 0;
	height: auto;
	width: 350px;
	margin-left: auto;
	margin-right: auto;
	background: transparent;
}

.lj-media-spotlight__iframeWrapper img {
	width: 350px !important;
	height: 350px !important;
	max-width: 350px !important;
	max-height: 350px !important;
	object-fit: contain;
	display: block;
	border-radius: 8px;
}

.lj-media-spotlight__iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lj-media-spotlight__audio { width: 100%; }

.lj-media-spotlight__mediaCaption { 
	margin: 0; 
	color: #0f172a; 
	text-align: center !important;
}

.lj-media-spotlight__mediaCaption.lj-type-body {
	text-align: center !important;
}

.lj-media-spotlight__transcriptLink { color: #1d4ed8; text-decoration: underline; }

.lj-media-spotlight__highlights { display: flex; flex-direction: column; gap: 16px; }

.lj-media-spotlight__highlightsTitle { margin: 0; color: #0f172a; }

.lj-media-spotlight__highlightList {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
}

.lj-media-spotlight__highlightItem {
	border-radius: 16px; border: 1px solid rgba(15,23,42,0.08); background: rgba(255,255,255,0.92); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}

.lj-media-spotlight__highlightHeader { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }

.lj-media-spotlight__highlightLabel { color: #0f172a; }

.lj-media-spotlight__highlightTime { color: #2563eb; }

.lj-media-spotlight__mediaFallback { padding: 20px; border-radius: 16px; background: rgba(248,113,113,0.12); border: 1px solid rgba(239,68,68,0.2); }


/* Heat Travel Card */
.lj-card.lj-card--heat-travel { background: inherit; }

.lj-heat-travel { display: flex; flex-direction: column; gap: 18px; }

.lj-heat-travel__image { text-align: center; }
.lj-heat-travel__image img { max-width: 420px; width: 100%; height: auto; border-radius: 12px; display: inline-block; }
.lj-heat-travel__caption { margin-top: 6px; color: #475569; font-weight: 700; }

.lj-heat-travel__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

.lj-heat-travel__column { border: 1px solid rgba(15,23,42,0.08); border-radius: 14px; background: #ffffff; padding: 16px 18px; box-shadow: 0 12px 28px -24px rgba(15,23,42,0.35); }
.lj-heat-travel__column:nth-of-type(1) { background: #fee2e2; }
.lj-heat-travel__column:nth-of-type(2) { background: #fef2f2; }
.lj-heat-travel__column:nth-of-type(3) { background: #fff5f5; }

.lj-heat-travel__columnTitle { margin: 0 0 6px 0; text-align: center; font-weight: 700; }
.lj-heat-travel__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1024px) { .lj-heat-travel__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lj-heat-travel__columns { grid-template-columns: 1fr; } }

/* QuickCheck completion (parity with Mathematics) */
.lj-quickcheck-completion { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; gap: 20px; }
.lj-quickcheck-completion__icon { font-size: 64px; line-height: 1; animation: celebrationAnimation 1s ease-out; }
.lj-card .lj-quickcheck-completion__title { 
	margin: 0; 
	font-size: 28px; 
	font-weight: 800; 
	background: linear-gradient(90deg, #EB5757 0%, #dc2626 50%, #b91c1c 100%) !important; 
	-webkit-background-clip: text !important; 
	background-clip: text !important; 
	color: transparent !important; 
	-webkit-text-fill-color: transparent !important;
	text-shadow: 0 0 0 rgba(0,0,0,0); 
}
.lj-quickcheck-completion__message { margin: 0; font-size: 18px; color: #475569; line-height: 1.6; max-width: 560px; }
.lj-quickcheck-completion__emojiRow { display: inline-flex; gap: 12px; font-size: 22px; }
.lj-quickcheck-completion__button { 
	margin-top: 8px; 
	border: 0; 
	border-radius: 10px; 
	font-weight: 800; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: .6rem; 
	padding: .8rem 1.6rem; 
	cursor: pointer; 
	transition: all .2s ease; 
	background: linear-gradient(135deg, #EB5757 0%, #dc2626 50%, #b91c1c 100%) !important; 
	color: #fff; 
	box-shadow: 0 10px 30px -10px rgba(235, 87, 87, 0.55); 
}
.lj-quickcheck-completion__button:hover:not(:disabled), 
.lj-quickcheck-completion__button:focus:not(:disabled) { 
	transform: translateY(-1px) scale(1.02); 
	box-shadow: 0 14px 34px -10px rgba(235, 87, 87, 0.6); 
	filter: saturate(1.05); 
}
.lj-quickcheck-completion__button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(235, 87, 87, 0.2); }
.lj-quickcheck-completion__button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
@keyframes celebrationAnimation { 0% { opacity: 0; transform: scale(.5) rotate(-180deg); } 50% { transform: scale(1.2) rotate(10deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

/* Specific sizing for the third carousel item (thermal image) */
.lj-media-gallery__items--carousel .lj-media-gallery__item:nth-of-type(3) .lj-media-gallery__mediaWrapper {
	width: 280px;
	height: 280px;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}
.lj-media-gallery__items--carousel .lj-media-gallery__item:nth-of-type(3) .lj-media-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Uniform square sizing for all carousel items (apply to every item) */
.lj-media-gallery__items--carousel .lj-media-gallery__item .lj-media-gallery__mediaWrapper {
	width: 280px;
	height: 280px;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}
.lj-media-gallery__items--carousel .lj-media-gallery__item .lj-media-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Matching Card */
.lj-chem-matching { position: relative; display: flex; flex-direction: column; gap: 16px; }
.lj-chem-matching__prompt { margin: 0; font-weight: 600; color: #0f172a; }
.lj-chem-matching__board {
	position: relative;
	display: flex;
	gap: 80px;
	background: linear-gradient(135deg, #f8fbff 0%, #fef9fb 100%);
	border: 1px solid rgba(148, 163, 184, 0.45);
	border-radius: 16px;
	padding: 18px 24px;
	overflow: visible;
	min-height: 0;
	box-shadow: 0 18px 36px -32px rgba(15, 23, 42, 0.55);
}
.lj-chem-matching__column {
	flex: 1;
	border: 2px solid #1f2937;
	border-radius: 10px;
	padding: 0;
	background: #ffffff;
	position: relative;
	z-index: 1;
	box-shadow: 0 12px 26px -28px rgba(15, 23, 42, 0.65);
}
.lj-chem-matching__column.is-right { background: #ffffff; }
.lj-chem-matching__columnTitle {
	margin: 0;
	padding: 12px 16px;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	border-bottom: 2px solid #cbd5f5;
	background: #e5f0ff;
	color: #0f172a;
	letter-spacing: 0.05em;
}
.lj-chem-matching__pairs,
.lj-chem-matching__options { display: flex; flex-direction: column; }
.lj-chem-matching__pair,
.lj-chem-matching__option {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid #1f2937;
	cursor: pointer;
	min-height: 56px;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.lj-chem-matching__pairs .lj-chem-matching__pair { flex-direction: row-reverse; justify-content: space-between; }
.lj-chem-matching__pair:last-child,
.lj-chem-matching__option:last-child { border-bottom: 0; }
.lj-chem-matching__pairBody { flex: 1; }
.lj-chem-matching__pair.is-selected { 
	background: #f3f4f6; 
	box-shadow: inset 0 0 0 1px rgba(148,163,184,0.8);
}
.lj-chem-matching__pair.has-answer,
.lj-chem-matching__pair.is-incorrect { background: #ffffff; }
.lj-chem-matching__pairs .lj-chem-matching__pair:not(.is-selected):hover { background: #f8fafc; box-shadow: inset 0 0 0 1px rgba(203,213,225,0.6); }
.lj-chem-matching__option.is-selected { background: rgba(191,219,254,0.55); box-shadow: inset 0 0 0 2px rgba(59,130,246,0.35); }
.lj-chem-matching__option:hover { background: rgba(238,242,255,0.6); }
.lj-chem-matching__pair.is-correct { box-shadow: none; }
.lj-chem-matching__clear { border: 0; margin-top: 8px; background: rgba(248,113,113,0.2); color: #b91c1c; border-radius: 12px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lj-chem-matching__optionBody { display: flex; flex-direction: column; gap: 2px; }
.lj-chem-matching__point { width: 18px; height: 18px; border: 2px solid #1f2937; border-radius: 999px; background: #fff; position: relative; flex-shrink: 0; }
.lj-chem-matching__point::after { content: ''; position: absolute; inset: 4px; border-radius: 999px; background: #1f2937; }
.lj-chem-matching__lines { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.lj-chem-matching__line { stroke-width: 4; stroke: rgba(30,64,175,0.8); stroke-linecap: round; }
.lj-chem-matching__line.is-pending { stroke: rgba(30,64,175,0.8); }
.lj-chem-matching__line.is-correct { stroke: rgba(34,197,94,0.95); }
.lj-chem-matching__line.is-incorrect { stroke: rgba(239,68,68,0.95); }
.lj-chem-matching__pair.is-incorrect { box-shadow: none; }
.lj-chem-matching__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.lj-chem-matching__actionsButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.lj-chem-matching__success { padding: 8px 14px; border-radius: 999px; background: rgba(34,197,94,0.12); color: #166534; font-weight: 700; }

/* True / False Table Card */
.lj-chem-tf { display: flex; flex-direction: column; gap: 16px; }
.lj-chem-tf__instructions { margin: 0; color: #0f172a; font-weight: 500; }
.lj-chem-tf__table { border: 1px solid #d1d5db; border-collapse: collapse; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 24px rgba(15,23,42,0.08); }
.lj-chem-tf__headerRow { display: grid; grid-template-columns: 1fr 220px; background: #e5f0ff; border-bottom: 1px solid #cbd5f5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0f172a; }
.lj-chem-tf__row { display: grid; grid-template-columns: 1fr 220px; border-bottom: 1px solid #e5e7eb; background: #ffffff; transition: background-color 0.15s ease; }
.lj-chem-tf__row:nth-of-type(odd) { background: #f9fafb; }
.lj-chem-tf__row:hover { background: #eff6ff; }
.lj-chem-tf__row:focus-within { box-shadow: inset 3px 0 0 #2563eb; }
.lj-chem-tf__row:last-of-type { border-bottom: 0; }
.lj-chem-tf__col,
.lj-chem-tf__cell { padding: 12px 16px; display: flex; align-items: center; }
.lj-chem-tf__col--statement,
.lj-chem-tf__cell--statement { border-right: 1px solid #111827; }
.lj-chem-tf__col--answer,
.lj-chem-tf__cell--answer { justify-content: center; min-width: 180px; }
.lj-chem-tf__levels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.lj-chem-tf__levelChip { padding: 4px 10px; border-radius: 999px; border: 1px solid #d1d5db; background: #f9fafb; font-size: 12px; font-weight: 600; color: #1f2937; cursor: pointer; }
.lj-chem-tf__levelChip.is-active { background: #1d4ed8; color: #ffffff; border-color: #1d4ed8; }
.lj-chem-tf__levelChip.is-completed { background: #dcfce7; color: #166534; border-color: #16a34a; }
.lj-chem-tf__levelLabel { margin: 0 0 4px; color: #4b5563; }
.lj-chem-tf__answerInner { display: inline-flex; align-items: center; gap: 8px; }
.lj-chem-tf__input { max-width: 140px; text-align: center; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lj-chem-tf__input.is-correct { border-color: #16a34a; box-shadow: 0 0 0 1px rgba(22,163,74,0.5); }
.lj-chem-tf__input.is-incorrect { border-color: #dc2626; box-shadow: 0 0 0 1px rgba(220,38,38,0.6); }
.lj-chem-tf__badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; font-size: 14px; font-weight: 700; background: transparent; }
.lj-chem-tf__badge.is-correct { color: #16a34a; }
.lj-chem-tf__badge.is-incorrect { color: #dc2626; }
.lj-chem-tf__row.is-correct { background: #ffffff; }
.lj-chem-tf__row.is-incorrect { background: rgba(254,226,226,0.8); }
.lj-chem-tf__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lj-chem-tf__actionsButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.lj-chem-tf__feedback { margin: 0; color: #4b5563; }
.lj-chem-tf__feedback.is-correct { color: #15803d; }

/* Mark Card (Tick the correct statements) */
.lj-chem-mark { display: flex; flex-direction: column; gap: 16px; }
.lj-chem-mark__instructions { margin: 0; color: #0f172a; font-weight: 500; }
.lj-chem-mark__table { border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 24px rgba(15,23,42,0.08); }
.lj-chem-mark__headerRow { display: grid; grid-template-columns: 1fr 140px; background: #e5f0ff; border-bottom: 1px solid #cbd5f5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0f172a; }
.lj-chem-mark__row { display: grid; grid-template-columns: 1fr 140px; border-bottom: 1px solid #e5e7eb; background: #ffffff; transition: background-color 0.15s ease; }
.lj-chem-mark__row:last-of-type { border-bottom: 0; }
.lj-chem-mark__col,
.lj-chem-mark__cell { padding: 12px 16px; display: flex; align-items: center; }
.lj-chem-mark__col--statement,
.lj-chem-mark__cell--statement { border-right: 1px solid #d1d5db; }
.lj-chem-mark__col--tick,
.lj-chem-mark__cell--tick { justify-content: center; }
.lj-chem-mark__tickWrapper { display: inline-flex; align-items: center; gap: 8px; }
.lj-chem-mark__tickBox { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #cbd5f5; background: #f9fafb; font-size: 18px; font-weight: 700; color: #1e3a8a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lj-chem-mark__tickBox.is-ticked { background: #1d4ed8; color: #ffffff; border-color: #1d4ed8; }
.lj-chem-mark__row.is-correct { background: #ffffff; }
.lj-chem-mark__row.is-incorrect { background: rgba(254,226,226,0.85); }
.lj-chem-mark__tickBox.is-correct { box-shadow: 0 0 0 1px rgba(22,163,74,0.6); }
.lj-chem-mark__tickBox.is-incorrect { box-shadow: 0 0 0 1px rgba(220,38,38,0.6); }
.lj-chem-mark__tickMark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	font-weight: 700;
	font-size: 16px;
}
.lj-chem-mark__tickMark.is-correct { color: #16a34a; }
.lj-chem-mark__tickMark.is-incorrect { color: #dc2626; }
.lj-chem-mark__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lj-chem-mark__actionsButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.lj-chem-mark__feedback { margin: 0; color: #4b5563; }
.lj-chem-mark__levelLabel { margin: 0 0 4px; color: #4b5563; }

/* Underline Card (choose and underline the correct answer) */
.lj-chem-underline { display: flex; flex-direction: column; gap: 16px; }
.lj-chem-underline__instructions { margin: 0; color: #0f172a; font-weight: 500; }
.lj-chem-underline__table { border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 24px rgba(15,23,42,0.08); }
.lj-chem-underline__headerRow { display: grid; grid-template-columns: 1fr; background: #e5f0ff; border-bottom: 1px solid #cbd5f5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0f172a; }
.lj-chem-underline__row { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid #e5e7eb; background: #ffffff; }
.lj-chem-underline__row:last-of-type { border-bottom: 0; }
.lj-chem-underline__row.is-correct,
.lj-chem-underline__row.is-incorrect { background: #ffffff; }
.lj-chem-underline__col,
.lj-chem-underline__cell { padding: 12px 16px; display: flex; align-items: center; }
.lj-chem-underline__col--statement,
.lj-chem-underline__cell--statement { justify-content: flex-start; }
.lj-chem-underline__sentence { 
	display: inline-flex; 
	flex-wrap: wrap; 
	align-items: baseline; 
	gap: 4px; 
}
.lj-chem-underline__number { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	min-width: 24px; 
	height: 24px; 
	margin-right: 4px; 
	border-radius: 999px; 
	background: #eef2ff; 
	color: #1d4ed8; 
	font-weight: 700; 
	font-size: 12px; 
}
.lj-chem-underline__prefix,
.lj-chem-underline__suffix { color: #111827; }
.lj-chem-underline__optionsGroup { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.lj-chem-underline__option { 
	border: 0; 
	background: transparent; 
	padding: 0 1px; 
	margin: 0; 
	font-weight: 600; 
	color: #1f2937; 
	cursor: pointer; 
	text-decoration-thickness: 2px; 
	text-underline-offset: 3px; 
	transition: color 0.15s ease, text-decoration-color 0.15s ease, transform 0.08s ease;
}
.lj-chem-underline__option:hover { color: #1d4ed8; }
.lj-chem-underline__option:active { transform: scale(0.97); }
.lj-chem-underline__option.is-selected { text-decoration: underline; text-decoration-color: #2563eb; }
.lj-chem-underline__option.is-correct { text-decoration: underline; text-decoration-color: #16a34a; color: #166534; }
.lj-chem-underline__option.is-incorrect { text-decoration: underline; text-decoration-color: #dc2626; color: #b91c1c; }
.lj-chem-underline__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	color: #16a34a;
	font-weight: 700;
	font-size: 16px;
}
.lj-chem-underline__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lj-chem-underline__actionsButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.lj-chem-underline__feedback { margin: 0; color: #4b5563; }
.lj-chem-underline__congrats { margin: 10px 2px 4px; color: #15803d; font-weight: 600; }

/* Circle Card (click to circle correct answers) */
.lj-chem-circle { display: flex; flex-direction: column; gap: 16px; }
.lj-chem-circle__instructions { margin: 0; color: #0f172a; font-weight: 500; }
.lj-chem-circle__table { border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 24px rgba(15,23,42,0.08); }
.lj-chem-circle__headerRow { display: grid; grid-template-columns: 1fr; background: #e5f0ff; border-bottom: 1px solid #cbd5f5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0f172a; }
.lj-chem-circle__row { 
	display: grid; 
	grid-template-columns: 1fr; 
	border-bottom: 1px solid #e5e7eb; 
	background: #ffffff; 
	transition: background-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease; 
}
.lj-chem-circle__row:last-of-type { border-bottom: 0; }
.lj-chem-circle__row:nth-of-type(odd) { background: #f9fafb; }
.lj-chem-circle__row.is-correct { background: #ffffff; }
.lj-chem-circle__row.is-incorrect { background: rgba(254,226,226,0.85); }
.lj-chem-circle__row:hover { box-shadow: inset 0 0 0 1px rgba(148,163,184,0.5); transform: translateY(-1px); }
.lj-chem-circle__col,
.lj-chem-circle__cell { padding: 12px 16px; display: flex; align-items: center; }
.lj-chem-circle__cell--question { justify-content: flex-start; }
.lj-chem-circle__questionInner { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lj-chem-circle__prompt { display: flex; align-items: baseline; gap: 6px; color: #111827; font-weight: 500; }
.lj-chem-circle__number { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 999px; background: #eef2ff; color: #1d4ed8; font-weight: 700; font-size: 12px; }
.lj-chem-circle__optionsRow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 28px;
	margin-top: 4px;
	flex-wrap: wrap;
}
.lj-chem-circle__options { display: flex; flex-wrap: wrap; gap: 10px; }
.lj-chem-circle__option { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	min-width: 80px; 
	padding: 6px 14px; 
	border-radius: 999px; 
	border: 2px solid transparent; 
	background: transparent; 
	cursor: pointer; 
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; 
}
.lj-chem-circle__option:hover { border-color: #d1d5db; box-shadow: 0 0 0 1px rgba(148,163,184,0.4); background: rgba(249,250,251,0.9); }
.lj-chem-circle__option:active { transform: scale(0.97); }
.lj-chem-circle__optionLabel { font-weight: 600; color: #111827; }
.lj-chem-circle__option.is-selected { border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(37,99,235,0.35); background: rgba(239,246,255,0.6); }
.lj-chem-circle__option.is-correct { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.6); background: rgba(220,252,231,0.4); }
.lj-chem-circle__option.is-correct .lj-chem-circle__optionLabel { color: #166534; }
.lj-chem-circle__option.is-incorrect { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.6); background: rgba(254,226,226,0.6); }
.lj-chem-circle__option.is-incorrect .lj-chem-circle__optionLabel { color: #b91c1c; }
.lj-chem-circle__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	color: #16a34a;
	font-weight: 700;
	font-size: 16px;
}
.lj-chem-circle__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lj-chem-circle__actionsButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.lj-chem-circle__feedback { margin: 0; color: #4b5563; }
.lj-chem-circle__congrats { margin: 10px 2px 4px; color: #15803d; font-weight: 600; }

/* AI Bulk MCQ Card */
.lj-chem-aiBulk { display: flex; flex-direction: column; gap: 16px; }
.lj-chem-aiBulk__note { color: #64748b; margin: 0; }
.lj-chem-aiBulk__errorBlock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; background: rgba(254,226,226,0.5); border: 1px solid rgba(220,38,38,0.35); }
.lj-chem-aiBulk__error { margin: 0; color: #b91c1c; font-weight: 600; }
.lj-chem-aiBulk__empty { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px dashed rgba(148,163,184,0.6); border-radius: 12px; background: rgba(248,250,252,0.9); }
.lj-chem-aiBulk__toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lj-chem-aiBulk__toolbarButtons { display: flex; gap: 8px; flex-wrap: wrap; }
.lj-chem-aiBulk__timestamp { color: #94a3b8; margin: 2px 0 0 0; }
.lj-chem-aiBulk__summary { border-radius: 12px; padding: 16px; background: rgba(220,252,231,0.5); border: 1px solid rgba(34,197,94,0.4); }
.lj-chem-aiBulk__hint { color: #64748b; margin: 0; }
.lj-chem-aiBulk__questionList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lj-chem-aiBulk__question { border: 1px solid rgba(226,232,240,0.9); border-radius: 14px; padding: 16px; background: #ffffff; box-shadow: 0 6px 16px -12px rgba(15,23,42,0.45); }
.lj-chem-aiBulk__questionHeader { display: flex; gap: 10px; align-items: flex-start; }
.lj-chem-aiBulk__badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #ede9fe; color: #5b21b6; font-weight: 700; }
.lj-chem-aiBulk__options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lj-chem-aiBulk__option { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(203,213,225,0.9); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.lj-chem-aiBulk__option input { margin: 0; }
.lj-chem-aiBulk__option.is-selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.25); }
.lj-chem-aiBulk__option.is-correct { border-color: #16a34a; background: rgba(220,252,231,0.4); box-shadow: 0 0 0 2px rgba(22,163,74,0.4); }
.lj-chem-aiBulk__option.is-incorrect { border-color: #dc2626; background: rgba(254,226,226,0.4); box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
.lj-chem-aiBulk__optionIcon {
	margin-left: auto;
	font-weight: 700;
	font-size: 16px;
}
.lj-chem-aiBulk__optionIcon.is-correct { color: #15803d; }
.lj-chem-aiBulk__optionIcon.is-incorrect { color: #b91c1c; }
.lj-chem-aiBulk__feedback { margin-top: 10px; }
.lj-chem-aiBulk__feedbackCorrect { color: #15803d; margin: 0; }
.lj-chem-aiBulk__feedbackIncorrect { color: #b91c1c; margin: 0; }
.lj-chem-aiBulk__rationale { color: #475569; margin: 4px 0 0 0; }
.lj-chem-aiBulk__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.lj-chem-aiBulk__resetButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: none;
	background: #405cf5;
	color: #ffffff;
	font-weight: 700;
	padding: 12px 26px;
	box-shadow: 0 10px 16px -12px rgba(64, 92, 245, 0.9);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lj-chem-aiBulk__resetButton:hover,
.lj-chem-aiBulk__resetButton:focus-visible {
	background: #3550e8;
	transform: translateY(-1px);
	box-shadow: 0 14px 22px -12px rgba(53, 80, 232, 0.9);
}
.lj-chem-aiBulk__resetButton:active {
	transform: translateY(0);
	box-shadow: 0 8px 14px -10px rgba(53, 80, 232, 0.85);
}
.lj-chem-aiBulk__resetButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media (max-width: 900px) {
	.lj-chem-tf__headerRow,
	.lj-chem-tf__row { grid-template-columns: 1fr 160px; }
}

@media (max-width: 900px) {
	.lj-chem-matching__board { flex-direction: column; }
	.lj-chem-matching__pair { flex-direction: column; align-items: flex-start; }
	.lj-chem-matching__dropzone { width: 100%; }
}

/* Card Variants */
.lj-card.lj-card--questions { background: inherit; }
.lj-card.lj-card--answer { background: inherit; }
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #16a34a; }

/* Shared Body Helpers */

/* AI Practice Specific */
.lj-ai-practice__instructions { margin-bottom: 16px; color: #0f172a; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(34, 197, 94, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e 0%, #10b981 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #15803d; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__sentence { color: #0f172a; padding: 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct { 
	background: rgba(22, 163, 74, 0.12); 
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #000000; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }

/* Quiz feedback animation */
.lj-quiz__feedback.is-correct {
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* Quiz per-question feedback */
.lj-quiz__prompt-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

/* Ensure default state is white before checking */
.lj-quiz__item:not(.is-correct):not(.is-incorrect) {
	background: #fff;
	border-color: #e2e8f0;
}

.lj-quiz__select:not(.is-correct):not(.is-incorrect) {
	background: #fff;
	border-color: #cbd5f5;
}

/* Keep dropdown white even after checking - only question box changes color */
.lj-quiz__select.is-correct,
.lj-quiz__select.is-incorrect {
	background: #fff;
	border-color: #cbd5f5;
}

.lj-quiz__result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.lj-quiz__result-icon.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #16a34a;
}

.lj-quiz__result-icon.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #f43f5e;
}

.lj-quiz__item.is-correct {
	border-color: #16a34a;
	background: rgba(22, 163, 74, 0.15);
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.lj-quiz__item.is-incorrect {
	border-color: #f43f5e;
	background: rgba(244, 63, 94, 0.15);
	box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
}


/* Error Highlighting for AI Open-Ended Questions */
.lj-card__feedback .error-highlight {
	background: #fee;
	color: #c00;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: 600;
	display: inline;
	margin: 0;
}

/* AI Open-Ended Card */
.lj-ai-open-ended {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-ai-open-ended__instructions {
	margin-bottom: 16px;
	color: #0f172a;
}

.lj-ai-open-ended__question {
	margin-bottom: 16px;
}

.lj-ai-open-ended__answer textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}

.lj-ai-open-ended__feedback {
	padding: 14px;
	border-radius: 10px;
	margin-top: 12px;
}

.lj-ai-open-ended__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-ai-open-ended__feedback.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

.lj-ai-open-ended__actions {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

/* Quick Check Card */
.lj-quick-check {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-quick-check__question {
	margin-bottom: 8px;
}

.lj-quick-check__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-quick-check__option {
	padding: 12px 16px;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
}

.lj-quick-check__option:hover:not(:disabled) {
	background: rgba(34, 197, 94, 0.05);
	border-color: rgba(34, 197, 94, 0.3);
}

.lj-quick-check__option.is-selected {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.5);
}

.lj-quick-check__option.is-correct {
	background: rgba(22, 163, 74, 0.12);
	border-color: #16a34a;
	color: #0f766e;
}

.lj-quick-check__option.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	border-color: #f43f5e;
	color: #be123c;
}

.lj-quick-check__rationale {
	margin-top: 12px;
	padding: 12px;
	border-radius: 8px;
}

.lj-quick-check__rationale.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
}

.lj-quick-check__rationale.is-incorrect {
	background: rgba(244, 63, 94, 0.12);
	color: #be123c;
}

/* Override all button margin-top globally */
#lj-runner button,
#lj-runner .button,
button.button,
button {
	margin-top: 0 !important;
}

/* Content Card Variants */
.lj-card.lj-card--content { background: inherit; }
.lj-card.lj-card--content-examples {
	background: inherit;
	border: 1px solid rgba(34, 197, 94, 0.12);
	box-shadow: 0 18px 45px -28px rgba(21, 128, 61, 0.3);
}

/* Interactive Intro (optional enhancement for content examples) */
.lj-content-card__interactiveIntro {
	border-radius: 14px;
	background: linear-gradient(0deg, rgba(255,255,255,0.86), rgba(255,255,255,0.86)),
		rgba(34,197,94,0.06);
	border: 1px solid rgba(34,197,94,0.18);
	padding: 14px 16px;
	box-shadow: 0 18px 45px -30px rgba(22,163,74,0.25);
}

.lj-content-card__extraIcons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.lj-content-card__extraIcons .lj-extraIcon {
	border-radius: 999px;
	background: rgba(34,197,94,0.08);
	border: 1px solid rgba(34,197,94,0.22);
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1;
}
.lj-content-card__extraIcons.is-animated .lj-extraIcon {
	display: inline-block;
	animation: lj-extra-wiggle 3.2s ease-in-out infinite;
}
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(2) { animation-delay: .2s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(3) { animation-delay: .4s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(4) { animation-delay: .6s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(5) { animation-delay: .8s; }
.lj-content-card__extraIcons.is-animated .lj-extraIcon:nth-child(6) { animation-delay: 1.0s; }

@keyframes lj-extra-wiggle {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-2px) rotate(-2deg); }
}

.lj-content-card__icon.is-animated { position: relative; }
.lj-content-card__icon.is-animated span { display: inline-block; animation: lj-intro-bounce 2.6s ease-in-out infinite; }
.lj-content-card__icon.is-multi { display: inline-flex; gap: 8px; }
.lj-content-card__icon.is-multi span { font-size: 20px; }
.lj-content-card__icon.is-multi span:nth-child(2) { animation-delay: .15s; }
.lj-content-card__icon.is-multi span:nth-child(3) { animation-delay: .3s; }
.lj-content-card__icon.is-multi span:nth-child(4) { animation-delay: .45s; }
.lj-content-card__icon.is-multi span:nth-child(5) { animation-delay: .6s; }
.lj-content-card__icon.is-multi span:nth-child(6) { animation-delay: .75s; }
@keyframes lj-intro-bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	40% { transform: translateY(-3px) rotate(-3deg); }
	60% { transform: translateY(0) rotate(0deg); }
	80% { transform: translateY(-1px) rotate(3deg); }
}

.lj-funfact__toggle {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	background: #22c55e;
	color: #ffffff;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	box-shadow: 0 10px 24px -14px rgba(34,197,94,0.8);
}
.lj-funfact__toggle.is-open { background: #15803d; }
.lj-funfact__icon { filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.lj-funfact__label { font-weight: 700; font-size: 14px; }

.lj-funfact__content {
	margin-top: 10px;
	border-radius: 12px;
	border: 1px dashed rgba(34,197,94,0.55);
	background: rgba(220,252,231,0.45);
	padding: 12px 14px;
	display: none;
}
.lj-funfact__content.is-visible { display: block; }
.lj-card.lj-card--example { background: inherit; border: 1px solid rgba(34, 197, 94, 0.15); }
.lj-example__icons { display: inline-flex; gap: 8px; margin-bottom: 8px; }
.lj-example__icon { display: inline-block; font-size: 18px; animation: lj-intro-bounce 2.6s ease-in-out infinite; }
.lj-example__icon:nth-child(2) { animation-delay: .15s; }
.lj-example__icon:nth-child(3) { animation-delay: .3s; }
.lj-example__icon:nth-child(4) { animation-delay: .45s; }
.lj-example__icon:nth-child(5) { animation-delay: .6s; }
.lj-example__icon:nth-child(6) { animation-delay: .75s; }

/* Bio Example Table Styles */
.lj-bio-example__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.lj-bio-example__table thead {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(22, 163, 74, 0.08) 100%);
}

.lj-bio-example__table th {
	padding: 12px 16px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: #0f172a;
	border-bottom: 2px solid rgba(34, 197, 94, 0.3);
}

.lj-bio-example__table td {
	padding: 12px 16px;
	border-bottom: 1px solid rgba(34, 197, 94, 0.1);
	color: #1e293b;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.lj-bio-example__table--align-left td {
	text-align: left;
}

.lj-bio-example__table tbody tr:last-child td {
	border-bottom: none;
}

.lj-bio-example__table tbody tr:hover {
	background: rgba(34, 197, 94, 0.04);
}

.lj-bio-example__table tbody tr:nth-child(even) {
	background: rgba(34, 197, 94, 0.02);
}

.lj-bio-example__table tbody tr:nth-child(even):hover {
	background: rgba(34, 197, 94, 0.06);
}

/* Bio Example Tree/Flowchart Styles */
.lj-bio-example__tree {
	position: relative;
	width: 100%;
	min-height: 500px;
	padding: 20px;
	margin-top: 8px;
}

.lj-bio-example__tree-root {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(196, 181, 253, 0.25);
	border: 1px solid rgba(167, 139, 250, 0.4);
	border-radius: 8px;
	padding: 12px 24px;
	font-weight: 700;
	font-size: 16px;
	color: #0f172a;
	text-align: center;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.lj-bio-example__tree-branches {
	display: flex;
	gap: 20px;
	margin-top: 70px;
	position: relative;
	z-index: 5;
}

.lj-bio-example__tree-branch {
	flex: 1;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
	border: 1px solid rgba(15, 23, 42, 0.15);
	min-height: 400px;
	display: flex;
	flex-direction: column;
}

.lj-bio-example__tree-branch--left {
	background: rgba(191, 219, 254, 0.3);
	border-color: rgba(147, 197, 253, 0.4);
}

.lj-bio-example__tree-branch--right {
	background: rgba(254, 202, 202, 0.3);
	border-color: rgba(252, 165, 165, 0.4);
}

.lj-bio-example__tree-branch-header {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.15);
}

.lj-bio-example__tree-branch-title {
	font-weight: 700;
	font-size: 18px;
	color: #0f172a;
	margin-bottom: 4px;
	line-height: 1.3;
}

.lj-bio-example__tree-branch-subtitle {
	font-size: 13px;
	font-style: italic;
	color: #475569;
	margin-top: 4px;
	line-height: 1.4;
}

.lj-bio-example__tree-branch-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lj-bio-example__tree-branch-label {
	font-weight: 600;
	font-size: 14px;
	color: #475569;
	margin-bottom: 8px;
}

.lj-bio-example__tree-branch-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lj-bio-example__tree-branch-items li {
	font-size: 14px;
	color: #1e293b;
	line-height: 1.6;
	padding-left: 20px;
	position: relative;
}

.lj-bio-example__tree-branch-items li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: #64748b;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
}

.lj-bio-example__tree-connections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* Bio Example Vertical Boxes Styles */
.lj-bio-example__vertical-boxes {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 8px;
}

.lj-bio-example__vertical-box {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(34, 197, 94, 0.2);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lj-bio-example__vertical-box-image {
	width: 100%;
	min-height: 200px;
	background: rgba(34, 197, 94, 0.05);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(34, 197, 94, 0.3);
}

.lj-bio-example__vertical-box-image img {
	max-width: 100%;
	max-height: 300px;
	object-fit: contain;
	border-radius: 8px;
}

.lj-bio-example__vertical-box-content {
	flex: 1;
}

.lj-bio-example__vertical-box-text {
	font-size: 14px;
	line-height: 1.6;
	color: #1e293b;
}

.lj-bio-example__vertical-box-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(34, 197, 94, 0.5);
	font-size: 14px;
	font-weight: 500;
}

.lj-bio-example__vertical-boxes-intro {
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #0f172a;
	padding: 12px 14px;
	border-radius: 12px;
	background: linear-gradient(0deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
		rgba(34,197,94,0.06);
	border: 1px solid rgba(34,197,94,0.22);
	box-shadow: 0 10px 24px -18px rgba(34,197,94,0.35);
}

@media (max-width: 768px) {
	.lj-bio-example__vertical-boxes {
		gap: 16px;
	}
	
	.lj-bio-example__vertical-box {
		padding: 16px;
	}
	
	.lj-bio-example__vertical-box-image {
		min-height: 150px;
	}
}

@media (max-width: 768px) {
	.lj-bio-example__tree-branches {
		flex-direction: column;
		margin-top: 50px;
	}
	
	.lj-bio-example__tree-branch {
		min-height: 300px;
	}
	
	.lj-bio-example__tree-root {
		font-size: 14px;
		padding: 10px 16px;
	}
	
	.lj-bio-example__tree-connections {
		display: none;
	}
}

/* Completion View Styles */
.lj-quickcheck-completion { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	text-align: center; 
	padding: 40px 20px; 
	gap: 20px; 
}
.lj-quickcheck-completion__icon { 
	font-size: 64px; 
	line-height: 1; 
	animation: celebrationAnimation 1s ease-out; 
}
.lj-card .lj-quickcheck-completion__title { 
	margin: 0; 
	font-size: 28px; 
	font-weight: 800; 
	background: linear-gradient(90deg, #16a34a 0%, #22c55e 50%, #10b981 100%) !important; 
	-webkit-background-clip: text !important; 
	background-clip: text !important; 
	color: transparent !important; 
	-webkit-text-fill-color: transparent !important;
	text-shadow: 0 0 0 rgba(0,0,0,0); 
}
.lj-quickcheck-completion__message { 
	margin: 0; 
	font-size: 18px; 
	color: #475569; 
	line-height: 1.6; 
	max-width: 560px; 
}
.lj-quickcheck-completion__emojiRow { 
	display: inline-flex; 
	gap: 12px; 
	font-size: 22px; 
}
.lj-quickcheck-completion__button { 
	margin-top: 8px; 
	border: 0; 
	border-radius: 10px; 
	font-weight: 800; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: .6rem; 
	padding: .8rem 1.6rem; 
	cursor: pointer; 
	transition: all .2s ease; 
	background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #10b981 100%) !important; 
	color: #fff; 
	box-shadow: 0 10px 30px -10px rgba(22, 163, 74, 0.55); 
}
.lj-quickcheck-completion__button:hover:not(:disabled), 
.lj-quickcheck-completion__button:focus:not(:disabled) { 
	transform: translateY(-1px) scale(1.02); 
	box-shadow: 0 14px 34px -10px rgba(22, 163, 74, 0.6); 
	filter: saturate(1.05); 
}
.lj-quickcheck-completion__button:active:not(:disabled) { 
	transform: translateY(0); 
	box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2); 
}
.lj-quickcheck-completion__button:disabled { 
	opacity: .5; 
	cursor: not-allowed; 
	transform: none !important; 
	box-shadow: none !important; 
}
@keyframes celebrationAnimation { 
	0% { opacity: 0; transform: scale(.5) rotate(-180deg); } 
	50% { transform: scale(1.2) rotate(10deg); } 
	100% { opacity: 1; transform: scale(1) rotate(0deg); } 
}

/* Mind Map Styles */
.lj-mindmap {
	width: 100%;
	padding: 20px;
	margin-top: 24px;
}

.lj-mindmap__container {
	position: relative;
	width: 100%;
	height: 850px;
	min-height: 800px;
	background: linear-gradient(135deg, rgba(253, 244, 255, 0.4) 0%, rgba(250, 232, 255, 0.3) 100%);
	border-radius: 16px;
	border: 2px solid rgba(251, 113, 133, 0.2);
	overflow: visible;
	padding: 30px;
	box-sizing: border-box;
}

.lj-mindmap__center {
	position: absolute;
	background: linear-gradient(135deg, #81e6d9 0%, #4fd1c7 100%);
	color: #ffffff;
	padding: 16px 24px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(45, 212, 191, 0.4);
	z-index: 3;
	width: 220px;
	min-width: 220px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	white-space: normal;
	word-wrap: break-word;
}

.lj-mindmap__node {
	position: absolute;
	background: #ffffff;
	color: #1e293b;
	padding: 10px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
	border: 3px solid rgba(251, 113, 133, 0.3);
	z-index: 1;
	width: 160px;
	min-width: 160px;
	line-height: 1.4;
	transition: all 0.3s ease;
	white-space: normal;
	word-wrap: break-word;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.lj-mindmap__column-label {
	position: absolute;
	background: rgba(15, 23, 42, 0.85);
	color: #f8fafc;
	padding: 10px 28px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
	z-index: 4;
}

.lj-mindmap__node-image {
	width: 100%;
	height: 90px;
	object-fit: contain;
	border-radius: 8px;
	background: rgba(251, 113, 133, 0.05);
}

.lj-mindmap__node-text {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.lj-mindmap__node:hover {
	transform: translate(-50%, -50%) scale(1.02);
	box-shadow: 0 6px 20px rgba(251, 113, 133, 0.3);
	border-color: rgba(251, 113, 133, 0.5);
	background: rgba(253, 244, 255, 0.5);
	z-index: 2;
}

.lj-mindmap__connection {
	z-index: 0;
}

@media (max-width: 768px) {
	.lj-mindmap__container {
		height: 700px;
		min-height: 650px;
		padding: 20px;
	}
	
	.lj-mindmap__center {
		font-size: 16px;
		padding: 12px 20px;
		width: 180px;
		min-width: 180px;
	}
	
	.lj-mindmap__node {
		font-size: 14px;
		padding: 8px;
		width: 140px;
		min-width: 140px;
	}

	.lj-mindmap__column-label {
		font-size: 12px;
		padding: 6px 16px;
	}
	
	.lj-mindmap__node-image {
		height: 70px;
	}
	
	.lj-mindmap__node-text {
		font-size: 11px;
	}
}

/* Biology Banner Card (mirrors Chemistry banner styles with biology selectors) */
.lj-biology-banner {
	position: relative;
	overflow: hidden;
	color: #0b1027;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

.lj-biology-banner__bg {
	position: absolute;
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	background: linear-gradient(135deg, #ede9fe 0%, #cffafe 50%, #fce7f3 100%);
	animation: lj-biology-banner-bg 12s ease-in-out infinite;
	z-index: -2;
}

@keyframes lj-biology-banner-bg {
	0% { filter: hue-rotate(0deg) saturate(105%); }
	50% { filter: hue-rotate(25deg) saturate(115%); }
	100% { filter: hue-rotate(0deg) saturate(105%); }
}

.lj-biology-banner__shapes { 
	position: absolute; 
	inset: 0;
	margin: -20px -24px -24px -24px;
	padding: 20px 24px 24px;
	z-index: -1; 
}
.lj-biology-banner__shape {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(139,92,246,0.25), rgba(139,92,246,0) 70%);
	animation: lj-float 9s ease-in-out infinite;
}
.lj-biology-banner__shape:nth-child(1) { top: -40px; left: -40px; animation-delay: .2s; }
.lj-biology-banner__shape:nth-child(2) { bottom: -30px; right: -30px; animation-delay: .8s; }
.lj-biology-banner__shape:nth-child(3) { top: 20%; right: 18%; width: 120px; height: 120px; animation-delay: 1.6s; }

.lj-biology-banner__content { text-align: center; }
.lj-biology-banner__top {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: #334155;
	opacity: .95;
	transform: translateY(6px);
	animation: lj-slide-up .6s ease-out .05s both;
}
.lj-biology-banner__top span { background: linear-gradient(90deg, #475569, #1f2937); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lj-biology-banner__main {
	margin: 6px 0 4px 0;
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #ec4899);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: lj-fade-in .55s ease-out .15s both;
}

.lj-biology-banner__subtitle { margin-top: 8px; color: #334155; opacity: .95; }

/* A thin border/glow for banner parity */
.lj-card.lj-card--banner {
	border: 1px solid rgba(99,102,241,0.18);
	box-shadow: 0 20px 45px -30px rgba(99,102,241,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lj-biology-banner__bg,
	.lj-biology-banner__shape { animation: none; }
}


/* Biology Sequence Card */
.lj-bio-sequence { display: flex; flex-direction: column; gap: 16px; }
.lj-bio-sequence__lane {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
	background: rgba(34,197,94,0.06);
	border: 1px solid rgba(34,197,94,0.18);
	border-radius: 14px;
	padding: 14px;
}
.lj-bio-sequence__laneHero { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.lj-bio-sequence__laneHero img { max-width: 420px; width: 100%; height: auto; display: block; }
.lj-bio-sequence__laneItem { display: inline-flex; align-items: center; gap: 12px; }
.lj-bio-sequence__step {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 6px; border-radius: 8px;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.lj-bio-sequence__stepImage {
	width: 64px; height: 64px;
	border-radius: 0;
	background: transparent;
	border: 0;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.lj-bio-sequence__stepImage img {
	width: 100%; height: 100%; object-fit: contain;
}
.lj-bio-sequence__stepIcon { font-size: 18px; line-height: 1; }
.lj-bio-sequence__stepLabel { font-weight: 800; color: #0f172a; }
.lj-bio-sequence__arrow { color: #16a34a; opacity: .9; font-weight: 800; }
.lj-bio-sequence__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lj-bio-sequence__detail {
	border: 1px solid rgba(15,23,42,0.08);
	border-radius: 12px; background: rgba(255,255,255,0.92);
	padding: 12px 14px; box-shadow: 0 8px 20px -18px rgba(15,23,42,0.25);
}
.lj-bio-sequence__detailHeader { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.lj-bio-sequence__detailIndex {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 999px;
	background: #22c55e; color: #fff; font-size: 12px; font-weight: 800;
}
.lj-bio-sequence__detailTitle { font-weight: 800; color: #0f172a; }
.lj-bio-sequence__detailText { margin: 0; color: #1e293b; }

@media (max-width: 768px) {
	.lj-bio-sequence__details { grid-template-columns: 1fr; }
}

/* Bio Check Card layout: prompt left, options right */
.lj-bio-check {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 16px;
	align-items: center;
}
.lj-bio-check__prompt { display: flex; align-items: center; justify-content: center; }
.lj-bio-check__options { display: block; }
@media (max-width: 768px) {
	.lj-bio-check {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.lj-bio-check__prompt { justify-content: flex-start; }
}

/* Bio Check progress */
.lj-bio-check__progress { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.lj-bio-check__progressBar {
	height: 16px; background: rgba(34,197,94,0.08); border-radius: 999px; overflow: hidden;
}
.lj-bio-check__progressFill {
	height: 100%; width: 0%;
	background: linear-gradient(135deg, #ede9fe 0%, #cffafe 50%, #fce7f3 100%) !important;
	transition: width .25s ease;
}
.lj-bio-check__progressLabel { color: #15803d; font-weight: 600; }

/* Biology Media Gallery (bio_media_gallery) */
.lj-media-gallery--biology {
	/* Ensure the gallery content can scroll horizontally on smaller screens */
	overflow-x: hidden;
}

.lj-media-gallery--biology .lj-media-gallery__items {
	display: flex;
	flex-wrap: nowrap;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 10px;
	margin-bottom: 4px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.lj-media-gallery--biology .lj-media-gallery__item {
	flex: 0 0 auto;
	min-width: 280px;
	max-width: 340px;
	text-align: left;
	border: 1px solid rgba(34, 197, 94, 0.35);
	border-radius: 18px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 14px 32px -20px rgba(22, 163, 74, 0.45);
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper {
	width: 200px;
	height: 200px;
	margin: 0 auto 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(34, 197, 94, 0.06);
	border: 1px solid rgba(34, 197, 94, 0.25);
	border-radius: 999px;
	transition: border-radius 0.2s ease;
	cursor: pointer;
	padding: 0;
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper:focus-visible {
	outline: 3px solid rgba(34, 197, 94, 0.6);
	outline-offset: 3px;
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--circle {
	border-radius: 999px;
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--rounded {
	border-radius: 28px;
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--square {
	border-radius: 14px;
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--rectangle {
	border-radius: 18px;
	width: 260px;
	height: 170px;
}

.lj-media-gallery--biology .lj-media-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--square .lj-media-gallery__image,
.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--rectangle .lj-media-gallery__image {
	object-fit: contain;
	padding: 6px;
}

.lj-media-gallery--biology .lj-media-gallery__caption {
	margin-bottom: 4px;
	text-align: center;
}

.lj-media-gallery--biology .lj-media-gallery__note {
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.lj-media-gallery--biology .lj-media-gallery__item {
		min-width: 230px;
		max-width: 280px;
	}

	.lj-media-gallery--biology .lj-media-gallery__mediaWrapper {
		width: 170px;
		height: 170px;
	}

	.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--rounded {
		border-radius: 20px;
	}

	.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--square {
		border-radius: 10px;
	}

	.lj-media-gallery--biology .lj-media-gallery__mediaWrapper--rectangle {
		width: 220px;
		height: 150px;
	}
}

.lj-media-gallery__modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
}

.lj-media-gallery__modalContent {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	max-width: 780px;
	width: 100%;
	padding: 28px 32px;
	box-shadow: 0 35px 65px -32px rgba(15, 23, 42, 0.55);
}

.lj-media-gallery__modalClose {
	position: absolute;
	top: 12px;
	right: 12px;
	border: none;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #0f172a;
}

.lj-media-gallery__modalImage {
	width: 100%;
	height: auto;
	border-radius: 14px;
	margin-bottom: 16px;
}

.lj-media-gallery__modalCaption {
	text-align: center;
	margin-bottom: 8px;
}

.lj-media-gallery__modalNote {
	font-size: 15px;
	line-height: 1.6;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}/* Early Childhood Banner Card - inspired by AMath but with EC-specific colors */
.lj-ec-banner {
  position: relative;
  overflow: hidden;
  color: #0b1027;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.lj-ec-banner__bg {
  position: absolute;
  inset: 0;
  margin: -20px -24px -24px -24px;
  padding: 20px 24px 24px;
  background: linear-gradient(135deg, #fef3c7 0%, #dbeafe 50%, #fce7f3 100%);
  animation: lj-ec-banner-bg 12s ease-in-out infinite;
  z-index: -2;
}

@keyframes lj-ec-banner-bg {
  0% { filter: hue-rotate(0deg) saturate(105%); }
  50% { filter: hue-rotate(15deg) saturate(115%); }
  100% { filter: hue-rotate(0deg) saturate(105%); }
}

.lj-ec-banner__shapes { 
  position: absolute; 
  inset: 0;
  margin: -20px -24px -24px -24px;
  padding: 20px 24px 24px;
  z-index: -1; 
}

.lj-ec-banner__shape {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251,146,60,0.25), rgba(251,146,60,0) 70%);
  animation: lj-ec-float 9s ease-in-out infinite;
}

.lj-ec-banner__shape:nth-child(1) { 
  top: -40px; 
  left: -40px; 
  animation-delay: .2s; 
  background: radial-gradient(closest-side, rgba(251,146,60,0.25), rgba(251,146,60,0) 70%);
}

.lj-ec-banner__shape:nth-child(2) { 
  bottom: -30px; 
  right: -30px; 
  animation-delay: .8s;
  background: radial-gradient(closest-side, rgba(59,130,246,0.25), rgba(59,130,246,0) 70%);
}

.lj-ec-banner__shape:nth-child(3) { 
  top: 20%; 
  right: 18%; 
  width: 120px; 
  height: 120px; 
  animation-delay: 1.6s;
  background: radial-gradient(closest-side, rgba(236,72,153,0.25), rgba(236,72,153,0) 70%);
}

@keyframes lj-ec-float {
  0%,100% { transform: translateY(0) translateX(0) scale(1); opacity: .9; }
  50% { transform: translateY(-8px) translateX(6px) scale(1.03); opacity: 1; }
}

.lj-ec-banner__content { 
  text-align: center; 
  padding: 20px;
}

.lj-ec-banner__top {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #334155;
  opacity: .95;
  transform: translateY(6px);
  animation: lj-ec-slide-up .6s ease-out .05s both;
}

.lj-ec-banner__top span { 
  background: linear-gradient(90deg, #475569, #1f2937); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
}

.lj-ec-banner__main {
  margin: 6px 0 4px 0;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  background: linear-gradient(90deg, #f59e0b, #3b82f6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lj-ec-fade-in .55s ease-out .15s both;
}

.lj-ec-banner__subtitle { 
  margin-top: 8px; 
  color: #334155; 
  opacity: .95;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes lj-ec-slide-up { 
  from { opacity: 0; transform: translateY(14px); } 
  to { opacity: 1; transform: translateY(0); } 
}

@keyframes lj-ec-fade-in { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}

/* Thin border/glow to harmonise with EC theme */
.lj-card.lj-card--banner {
  border: 1px solid rgba(251,146,60,0.18);
  box-shadow: 0 20px 45px -30px rgba(251,146,60,0.45);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lj-ec-banner__bg,
  .lj-ec-banner__shape { animation: none; }
}

/* EC Image Gallery Card - 3x3 grid layout */
.lj-ec-gallery {
  display: grid;
  gap: 20px;
  margin-top: 16px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.lj-ec-gallery--grid {
  grid-template-columns: repeat(3, 1fr);
}

.lj-ec-gallery--grid .lj-ec-gallery__item:nth-last-child(1):nth-child(3n + 1) {
  grid-column: 2;
}

.lj-ec-timeline__track {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 28px 32px 36px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

@media (max-width: 768px) {
  .lj-ec-gallery--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .lj-ec-gallery--grid {
    grid-template-columns: 1fr;
  }
}

.lj-ec-gallery__item {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.lj-ec-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: rgba(251, 146, 60, 0.3);
}

.lj-ec-gallery__image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3c7 0%, #dbeafe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj-ec-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lj-ec-gallery__item:hover .lj-ec-gallery__image {
  transform: scale(1.05);
}

.lj-ec-gallery__content {
  padding: 16px;
  text-align: center;
}

.lj-ec-gallery__title {
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  font-size: 15px;
}

.lj-ec-gallery__description {
  color: #475569;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Respect reduced motion for gallery hover effects */
@media (prefers-reduced-motion: reduce) {
  .lj-ec-gallery__item,
  .lj-ec-gallery__image {
    transition: none;
  }
  .lj-ec-gallery__item:hover {
    transform: none;
  }
  .lj-ec-gallery__item:hover .lj-ec-gallery__image {
    transform: none;
  }
}

/* EC Content Card - Custom Icon Image */
.lj-ec-content-icon-image {
  width: 170px;
  height: 170px;
  object-fit: contain;
  display: block;
}

/* EC ec_content_examples: two-column layout; icon left of intro text in the left cell.
   Scoped so Math’s global .lj-content-card__* overrides do not break EC layout. */
.lj-ec-content-examples-layout {
  display: grid;
  gap: 28px;
  align-items: stretch;
}

.lj-ec-content-examples-layout:not(.has-examples) {
  min-height: 250px;
}

@media (min-width: 960px) {
  .lj-ec-content-examples-layout.has-examples {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.lj-ec-content-examples-layout .lj-content-card__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px;
  align-items: stretch;
}

.lj-ec-content-examples-layout .lj-content-card__main.has-icon {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 16px 20px;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.lj-ec-content-examples-layout .lj-content-card__icon {
  flex-shrink: 0;
  font-size: 32px;
  line-height: 1;
}

.lj-ec-content-examples-layout .lj-content-card__main.has-icon .lj-card__html {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

/* EC Concept Breakdown Card - Interactive & Engaging */
.lj-ec-concept {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lj-ec-concept__intro {
  padding: 16px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.3) 0%, rgba(219, 234, 254, 0.3) 100%);
  border-radius: 12px;
  border-left: 4px solid #f59e0b;
}


.lj-ec-concept__sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lj-ec-concept__section {
  background: white;
  border: 2px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.lj-ec-concept__section:hover {
  border-color: rgba(251, 146, 60, 0.3);
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.1);
}

.lj-ec-concept__section.is-open {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.15);
}

.lj-ec-concept__section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.2) 0%, rgba(219, 234, 254, 0.2) 100%);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.lj-ec-concept__section-header:hover {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.4) 0%, rgba(219, 234, 254, 0.4) 100%);
}

.lj-ec-concept__section.is-open .lj-ec-concept__section-header {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
}

.lj-ec-concept__section-icon {
  font-size: 24px;
  flex-shrink: 0;
  animation: lj-ec-bounce 2s ease-in-out infinite;
}

@keyframes lj-ec-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.lj-ec-concept__section-title {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
}

.lj-ec-concept__section-toggle {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.lj-ec-concept__section.is-open .lj-ec-concept__section-toggle {
  transform: rotate(180deg);
}

.lj-ec-concept__section-body {
  padding: 20px;
  background: white;
  animation: lj-ec-slide-down 0.3s ease-out;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

@keyframes lj-ec-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lj-ec-mindmap {
  position: relative;
  width: 100%;
  padding: 0;
}

.lj-ec-mindmap__container {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: clamp(420px, 55vw, 580px);
  min-height: 380px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 32px;
}

.lj-ec-mindmap__connection {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lj-ec-mindmap__center {
  position: absolute;
  z-index: 2;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  font-weight: 700;
  color: #0f172a;
  border: 1px solid rgba(59, 130, 246, 0.4);
  white-space: nowrap;
  text-align: center;
}

.lj-ec-mindmap__node {
  position: absolute;
  z-index: 2;
  width: 150px;
  max-width: 150px;
  min-height: 170px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  border: 1px solid rgba(251, 146, 60, 0.25);
  box-shadow: 0 10px 32px rgba(59, 130, 246, 0.12);
  font-size: 13px;
  line-height: 1.55;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.lj-ec-mindmap__node-image {
  width: 32px;
  height: 32px;
}

.lj-ec-mindmap__node-text {
  flex: 1;
  margin: 0;
  display: block;
  width: 100%;
  white-space: normal;
  word-break: break-word;
  font-size: 13px;
}

@media (max-width: 768px) {
  .lj-ec-mindmap__container {
    height: 420px;
    min-height: 360px;
    padding: 20px;
  }

  .lj-ec-mindmap__node {
    width: 132px;
    max-width: 132px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .lj-ec-mindmap__node-text {
    font-size: 12px;
  }
}

.lj-ec-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lj-ec-timeline__intro {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.lj-ec-timeline__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.lj-ec-timeline__icon img {
  width: 32px;
  height: 32px;
}

.lj-ec-timeline__description {
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
  text-align: left;
}

.lj-ec-timeline__itemsTitle {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  margin-bottom: 12px;
}

.lj-ec-timeline__rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: clamp(12px, 4vw, 40px);
  padding: 32px 8px;
}

.lj-ec-timeline__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: #dbe2f1;
}

.lj-ec-timeline__node {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  text-align: center;
  min-width: 120px;
  row-gap: 10px;
}

.lj-ec-timeline__label {
  font-weight: 700;
  color: #0f172a;
  font-size: 16px;
}

.lj-ec-timeline__detail {
  font-size: 13px;
  color: #475569;
}

.lj-ec-timeline__marker {
  position: relative;
  width: 100%;
  height: 100px;
  grid-row: 2;
}

.lj-ec-timeline__arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: currentColor;
  border-radius: 999px;
}

.lj-ec-timeline__arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
}

.lj-ec-timeline__node.is-down .lj-ec-timeline__arrow::after {
  border-top: none;
  border-bottom: 6px solid currentColor;
  top: auto;
  bottom: -6px;
}

.lj-ec-timeline__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12);
}

.lj-ec-timeline__node.is-down .lj-ec-timeline__label {
  grid-row: 3;
}

.lj-ec-timeline__node.is-down .lj-ec-timeline__detail {
  grid-row: 1;
}

.lj-ec-timeline__node.is-up .lj-ec-timeline__arrow {
  height: 50px;
  top: calc(50% - 50px);
}

.lj-ec-timeline__node.is-down .lj-ec-timeline__arrow {
  height: 50px;
  top: 50%;
}

@media (max-width: 768px) {
  .lj-ec-timeline__track {
    padding: 22px;
  }

  .lj-ec-timeline__rail {
    flex-direction: column;
    gap: 20px;
  }

  .lj-ec-timeline__line {
    width: 2px;
    height: 100%;
    left: 12px;
    transform: none;
  }

  .lj-ec-timeline__node {
    justify-items: flex-start;
  }

  .lj-ec-timeline__marker {
    height: 100px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lj-ec-concept__section,
  .lj-ec-concept__section-header,
  .lj-ec-concept__section-toggle {
    transition: none;
    animation: none;
  }
  .lj-ec-concept__section-body {
    animation: none;
  }
  .lj-ec-concept__section-icon {
    animation: none;
  }
}

/* AI Practice Card (Early Childhood) */
.lj-card.lj-card--ai-practice { background: inherit; }
.lj-card.lj-card--ai-practice.is-completed { background: inherit; border-left-color: #f97316; }
.lj-ai-practice__instructions { margin-bottom: 16px; color: #1e293b; }
.lj-ai-practice__start { display: flex; justify-content: center; }
.lj-ai-practice__loading,
.lj-ai-practice__error { padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(59, 130, 246, 0.12); text-align: center; }
.lj-ai-practice__error .lj-error { margin-bottom: 12px; color: #b91c1c; font-weight: 600; }
.lj-ai-practice__header { margin-bottom: 20px; }
.lj-ai-practice__progress { display: flex; flex-direction: column; gap: 8px; }
.lj-ai-practice__progress-bar { height: 8px; background: rgba(249, 115, 22, 0.2); border-radius: 999px; overflow: hidden; }
.lj-ai-practice__progress-fill { height: 100%; background: linear-gradient(90deg, #f97316 0%, #ec4899 100%); transition: width 0.35s ease; }
.lj-ai-practice__progress-label { color: #1e293b; display: flex; flex-wrap: wrap; gap: 6px; }
.lj-ai-practice__question { display: flex; flex-direction: column; gap: 16px; }
.lj-ai-practice__prompt { font-weight: 600; color: #1e293b; }
.lj-ai-practice__sentence { color: #0f172a; padding: 12px; border-radius: 10px; background: rgba(251, 146, 60, 0.08); }
.lj-ai-practice__answer { display: flex; flex-direction: column; gap: 10px; }
.lj-ai-practice__answer .lj-input { max-width: 420px; }
.lj-ai-practice__retry-count { color: #475569; }
.lj-ai-practice__feedback { padding: 14px; border-radius: 10px; font-weight: 400; text-align: center; }
.lj-ai-practice__feedback.is-correct {
	background: rgba(22, 163, 74, 0.12);
	color: #0f766e;
	animation: correctAnswerAnimation 0.6s ease-out;
}
.lj-ai-practice__feedback.is-incorrect { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.lj-ai-practice__feedback.is-incorrect p { color: #0f0f0f; font-weight: 400; }
.lj-ai-practice__feedback p { font-weight: 400; }
.lj-ai-practice__feedback .lj-feedback-icon { margin-right: 8px; }
.lj-ai-practice__feedback.is-correct .lj-feedback-icon { color: #16a34a; }
.lj-ai-practice__feedback.is-incorrect .lj-feedback-icon { color: #dc2626; }
.lj-ai-practice__next-hint { margin-top: 6px; font-weight: 500; color: #1e293b; }

/* AI Open-Ended */
.lj-ai-open-ended {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lj-ai-open-ended__instructions {
  margin-bottom: 16px;
  color: #0f172a;
}

.lj-ai-open-ended__question {
  margin-bottom: 12px;
}

.lj-ai-open-ended-prompt {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(251, 189, 35, 0.12);
  border: 1px solid rgba(251, 189, 35, 0.35);
  color: #0f172a;
}

/* Whole prompt block one weight: AI HTML often closes </strong> after one line, leaving wraps regular. */
.lj-ai-open-ended-prompt p {
  margin: 0;
  font-weight: 600;
}

.lj-ai-open-ended-prompt p strong,
.lj-ai-open-ended-prompt p b {
  font-weight: 700;
}

.lj-ai-open-ended-artefact {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.04);
}

.lj-ai-open-ended-example {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 4px solid #f97316;
  background: rgba(249, 115, 22, 0.08);
}

.lj-ai-open-ended textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #fff;
}

.lj-ai-open-ended__feedback {
  padding: 14px;
  border-radius: 12px;
  margin-top: 12px;
}

.lj-ai-open-ended__feedback.is-correct {
  background: rgba(34, 197, 94, 0.15);
  color: #0f766e;
}

.lj-ai-open-ended__feedback.is-incorrect {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.lj-ai-open-ended__actions,
.lj-ai-open-ended-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.lj-ai-open-ended-suggestion {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px dashed rgba(15, 23, 42, 0.15);
}

.lj-ai-open-ended-suggestion__body {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.english-teacher-dashboard {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 5px 20px rgba(15, 23, 42, 0.08);
}

.english-teacher-dashboard__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.english-teacher-dashboard__tabs {
	display: flex;
	gap: 0.5rem;
}

.dashboard-tab {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #0f172a;
	font-weight: 600;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.dashboard-tab.active {
	background: #0f172a;
	color: #fff;
	border-color: #0f172a;
}

.dashboard-due-date {
	margin: 0;
	color: #475569;
}

.english-teacher-dashboard__students {
	margin-top: 1rem;
}

.dashboard-controls {
	margin-bottom: 1rem;
	display: flex;
	justify-content: flex-end;
}

.dashboard-search {
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	padding: 0.5rem 1rem;
	width: 280px;
}

.dashboard-table {
	width: 100%;
	border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
	padding: 0.75rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid #edf2f7;
	font-size: 0.95rem;
}

.dashboard-table tbody tr {
	cursor: pointer;
	transition: background 0.2s ease;
}

.dashboard-table tbody tr:hover {
	background: #f8fafc;
}

.dashboard-message,
.dashboard-error {
	margin: 1rem 0;
	color: #475569;
}

.dashboard-error {
	color: #dc2626;
}

.english-teacher-dashboard__analysis {
	margin-top: 1rem;
}

.analysis-summary ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.analysis-summary li {
	font-weight: 600;
	color: #0f172a;
}

.analysis-note {
	margin-top: 1rem;
	color: #475569;
	background: #f8fafc;
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}