:root {
	--mvp-radius-sm: 10px;
	--mvp-radius-md: 16px;
	--mvp-radius-lg: 24px;
	--mvp-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
	--mvp-border: 1px solid rgba(15, 23, 42, 0.08);
	--mvp-text-primary: #0f172a;
	--mvp-text-secondary: #475569;
	--mvp-bg-muted: #f8fafc;
	--mvp-bg-hero: linear-gradient(135deg, #ecf0ff 0%, #f7f9ff 100%);
	--mvp-color-primary: #335cff;
}

.mvp-home {
	font-family: inherit;
	color: var(--mvp-text-primary);
	padding-top: 2.5rem;
}

.mvp-home section {
	margin: 0 auto;
	max-width: 1120px;
	padding: 0 1.5rem;
}

.mvp-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.mvp-section__header h2 {
	margin: 0;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
}

.mvp-section__header p {
	margin: 0.35rem 0 0;
	color: var(--mvp-text-secondary);
}

.mvp-recent {
	margin-bottom: 3.5rem;
}

.mvp-recent__list {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mvp-recent-card {
	display: block;
	padding: 1.5rem;
	border-radius: var(--mvp-radius-md);
	border: var(--mvp-border);
	background: #fff;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mvp-recent-card:hover,
.mvp-recent-card:focus {
	transform: translateY(-4px);
	box-shadow: var(--mvp-shadow-soft);
}

.mvp-recent-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.9rem;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
}

.mvp-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(51, 92, 255, 0.1);
	color: var(--mvp-color-primary);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mvp-recent-card__title {
	margin: 0;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.mvp-recent-card__subtopic {
	margin: 0.35rem 0 1.1rem;
	color: var(--mvp-text-secondary);
}

.mvp-recent-card__cta {
	margin: 0;
	font-weight: 600;
	color: var(--mvp-color-primary);
}

.mvp-discover {
	margin-bottom: 3rem;
}

.mvp-discover__controls {
	display: block;
	margin-bottom: 1rem;
}

.mvp-filter-rail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scroll-snap-type: x mandatory;
}

.mvp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	background: #fff;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
	font-weight: 600;
	color: var(--mvp-text-secondary);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
	scroll-snap-align: start;
}

.mvp-chip__dot {
	width: 10px;
	height: 10px;
	background: rgba(51, 92, 255, 0.35);
	border-radius: 50%;
	display: inline-block;
}

.mvp-chip.is-active {
	background: var(--mvp-color-primary);
	color: #fff;
	box-shadow: 0 10px 24px rgba(51, 92, 255, 0.25);
	transform: translateY(-1px);
}

.mvp-chip.is-active .mvp-chip__dot {
	background: #fff;
}

.mvp-chip:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.mvp-chip:focus-visible {
	outline: 2px solid var(--mvp-color-primary);
	outline-offset: 2px;
}

.mvp-chip__label {
	white-space: nowrap;
}

.mvp-search {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	background: #fff;
	border: var(--mvp-border);
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	width: 100%;
	max-width: 360px;
}

.mvp-search__icon {
	width: 16px;
	height: 16px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2321273A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M17 10.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z'/%3E%3C/svg%3E");
	opacity: 0.75;
	display: inline-block;
}

.mvp-search input {
	border: none;
	outline: none;
	font-size: 0.95rem;
	width: 100%;
}

.mvp-search label {
	display: inline-flex;
	align-items: center;
	width: 100%;
	flex: 1;
}

.mvp-subjects-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mvp-subject-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: #fff;
	border-radius: var(--mvp-radius-md);
	border: var(--mvp-border);
	padding: 1.6rem;
	padding-left: 1.4rem;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	overflow: hidden;
}

.mvp-subject-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: var(--mvp-accent, var(--mvp-color-primary));
}

.mvp-subject-card__badge {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 0.4rem;
}

.mvp-tag--subject {
	background: var(--mvp-accent-soft, rgba(51, 92, 255, 0.18));
	color: var(--mvp-accent, var(--mvp-color-primary));
	border: 1px solid var(--mvp-accent, rgba(51, 92, 255, 0.3));
}

.mvp-subject-card:hover,
.mvp-subject-card:focus {
	transform: translateY(-6px);
	box-shadow: var(--mvp-shadow-soft);
}

.mvp-subject-card__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mvp-subject-card__subtopic {
	margin: 0;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--mvp-text-primary);
}

.mvp-subject-card__description {
	margin: 0.35rem 0 0;
	color: var(--mvp-text-secondary);
	font-size: 0.95rem;
}

.mvp-subject-card__cta {
	font-weight: 600;
	color: var(--mvp-accent, var(--mvp-color-primary));
	margin-top: auto;
}

.mvp-subject {
	max-width: 90%;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3rem;
	color: var(--mvp-text-primary);
}

.mvp-subject__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.75rem 2rem;
	background: #fff;
	border-radius: var(--mvp-radius-md);
	border: var(--mvp-border);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
	margin-bottom: 2rem;
}

.mvp-subject__headline {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mvp-subject__title {
	margin: 0;
	font-size: 2rem;
	letter-spacing: -0.01em;
}

.mvp-subject__subtopic {
	margin: 0;
	font-weight: 600;
	color: var(--mvp-text-secondary);
}

.mvp-subject__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mvp-subject__back {
	text-decoration: none;
	color: var(--mvp-text-secondary);
	font-weight: 600;
}

.mvp-subject__cta {
	background: var(--mvp-accent, var(--mvp-color-primary));
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(51, 92, 255, 0.25);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mvp-subject__cta:hover,
.mvp-subject__cta:focus {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(51, 92, 255, 0.28);
}

.mvp-session {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.mvp-session__main {
	flex: 1 1 0;
	max-width: calc(100% - 320px);
	display: grid;
	gap: 1.5rem;
}

.mvp-session__timeline {
	flex: 0 0 280px;
	background: #fff;
	border-radius: var(--mvp-radius-md);
	border: var(--mvp-border);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
	padding: 1.5rem;
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 1.5rem;
	align-self: flex-start;
}

.mvp-module {
	background: #fff;
	border-radius: var(--mvp-radius-md);
	border: var(--mvp-border);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
	padding: 1.5rem 1.75rem;
}

.mvp-module__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.mvp-module__title {
	margin: 0;
	font-size: 1.35rem;
}

.mvp-module__subtitle {
	margin: 0.35rem 0 0;
	color: var(--mvp-text-secondary);
	font-size: 0.95rem;
}


.mvp-module--deferred[hidden] {
	display: none !important;
}

.mvp-module__body {
	color: var(--mvp-text-secondary);
}

.mvp-module__placeholder {
	color: var(--mvp-text-secondary);
	font-style: italic;
}

.mvp-timeline__header h3 {
	margin: 0;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

.mvp-timeline__header p {
	margin: 0.3rem 0 1rem;
	color: var(--mvp-text-secondary);
	font-size: 0.85rem;
}

.mvp-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.mvp-timeline__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	position: relative;
}

.mvp-timeline__item::after {
	content: '';
	position: absolute;
	left: 18px;
	top: 36px;
	width: 2px;
	height: calc(100% - 36px);
	background: rgba(15, 23, 42, 0.1);
}

.mvp-timeline__item:last-child::after {
	display: none;
}

.mvp-timeline__marker {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(51, 92, 255, 0.18);
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mvp-color-primary);
	font-weight: 700;
	cursor: pointer;
}

.mvp-timeline__marker:focus-visible {
	outline: 2px solid var(--mvp-color-primary);
	outline-offset: 2px;
}

.mvp-timeline__marker:hover,
.mvp-timeline__marker:focus {
	background: rgba(51, 92, 255, 0.18);
	color: var(--mvp-color-primary);
}

.mvp-timeline__level {
	font-size: 0.9rem;
}

.mvp-timeline__content {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.mvp-timeline__title {
	margin: 0;
	font-size: 0.95rem;
}

.mvp-timeline__title-button {
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-align: left;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.mvp-timeline__title-button:hover,
.mvp-timeline__title-button:focus {
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.mvp-timeline__title-button:focus-visible {
	outline: 2px solid var(--mvp-color-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

.mvp-timeline__title-button.is-active {
	color: var(--mvp-color-primary);
}

.mvp-timeline__description {
	margin: 0;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
	text-align: justify;
}

.mvp-timeline__progress {
	font-size: 0.8rem;
	color: var(--mvp-text-secondary);
}

.mvp-timeline__item.is-active .mvp-timeline__marker {
	background: var(--mvp-color-primary);
	color: #fff;
}

.mvp-timeline__item.is-complete .mvp-timeline__marker {
	background: #22c55e;
	color: #fff;
}

.mvp-timeline__footer {
	margin-top: 1.5rem;
	display: grid;
	gap: 0.75rem;
}

.mvp-timeline__next {
	margin: 0;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
}

.mvp-timeline__history {
	border: var(--mvp-border);
	background: #fff;
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	font-weight: 600;
	cursor: pointer;
}

.mvp-content {
	display: grid;
	gap: 1.25rem;
}

.mvp-content__chapter[hidden] {
	display: none !important;
}

.mvp-content-card {
	background: var(--mvp-bg-muted);
	border-radius: var(--mvp-radius-sm);
	padding: 1.25rem 1.4rem;
	display: grid;
	gap: 0.85rem;
	border-left: 4px solid #cbd5f5;
}

.mvp-content-card--interactive {
	border-left-color: #2563eb;
	background: rgba(37, 99, 235, 0.06);
}

.mvp-content-card--question {
	border-left-color: #1e40af;
}

.mvp-content-card--response {
	border-left-color: #16a34a;
	background: rgba(22, 163, 74, 0.05);
}

/* Green themed content card modifier */
.mvp-content-card--green {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.16);
}

.mvp-content-card + .mvp-content-card {
	margin-top: 1rem;
}

.mvp-content__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.25rem;
}

.mvp-content__next-button {
	border: 0;
	border-radius: 999px;
	background: var(--mvp-color-primary);
	color: #fff;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 1.4rem;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(51, 92, 255, 0.2);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mvp-content__next-button span {
	font-size: 0.85rem;
	opacity: 0.85;
}

.mvp-content__next-button strong {
	font-size: 0.95rem;
}

.mvp-content__next-button:hover,
.mvp-content__next-button:focus {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(51, 92, 255, 0.25);
}

.mvp-content__next-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mvp-content-card--example {
	background: rgba(51, 92, 255, 0.08);
	border: 1px solid rgba(51, 92, 255, 0.15);
	border-left-color: #5b5ce6;
}

.mvp-content-card__header {
	margin: 0;
}

.mvp-content-card__title {
	margin: 0;
	font-size: 1.05rem;
	color: var(--mvp-text-primary);
}

.mvp-content-card__subtitle {
	margin: 0.2rem 0 0;
	color: var(--mvp-text-secondary);
	font-size: 0.85rem;
}

.mvp-content-card__body {
	display: grid;
	gap: 0.75rem;
	color: var(--mvp-text-secondary);
}

.mvp-content-card__section {
	display: grid;
	gap: 0.45rem;
}

.mvp-content-card__heading {
	margin: 0;
	font-size: 0.95rem;
	color: var(--mvp-text-primary);
}

.mvp-content-card__list {
	margin: 0;
	padding-left: 1.15rem;
	display: grid;
	gap: 0.35rem;
}

.mvp-content-card__list--numbered {
	list-style: decimal;
}

/* Formative Q&A enhancements */
.mvp-formative__q {
    font: inherit;
}

.mvp-formative__q.is-active {
    background: rgba(51, 92, 255, 0.08) !important;
    border-radius: 8px;
    padding: 0.15rem 0.35rem;
}

.mvp-content-card__equation {
	display: grid;
	gap: 0.35rem;
	padding: 0.75rem 0.9rem;
	background: #fff;
	border-radius: var(--mvp-radius-sm);
	border: 1px dashed rgba(51, 92, 255, 0.3);
}

.mvp-content-card__question {
    min-height: 0; /* collapse to content height; remove extra blank space */
    display: grid;
    place-items: start;
    padding: 0; /* remove padded card look to match Biology */
    background: transparent;
    border-radius: 0;
    border: none;
    color: var(--mvp-text-primary);
}

.mvp-question__header {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

.mvp-question__badge {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 64, 175, 0.12);
	color: #1e3a8a;
	font-weight: 700;
	font-size: 1.1rem;
}

.mvp-question__title {
	margin: 0;
	font-size: 1.05rem;
	color: var(--mvp-text-primary);
}

.mvp-question__meta {
	margin: 0.2rem 0 0;
	display: flex;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
}

.mvp-question__body {
	display: grid;
	gap: 0.7rem;
}

.mvp-question__text {
	margin: 0;
	font-weight: 600;
	color: var(--mvp-text-primary);
}

.mvp-question__equation {
	padding: 0.85rem 1rem;
	background: #fff;
	border-radius: var(--mvp-radius-sm);
	border: 1px dashed rgba(30, 64, 175, 0.25);
	font-size: 1.5em;
}

.mvp-question__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.mvp-question__status {
	margin-top: 0.5rem;
	padding: 0.6rem 0.8rem;
	border-radius: var(--mvp-radius-sm);
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(22, 163, 74, 0.1);
	color: #166534;
}

.mvp-question-card--solved .mvp-question__badge {
	background: rgba(22, 163, 74, 0.15);
	color: #0f5132;
}

.mvp-content-card__placeholder {
	margin: 0;
	color: var(--mvp-text-secondary);
	font-style: italic;
}

.mvp-content-card__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
}

.mvp-content-card__control {
	display: grid;
	gap: 0.35rem;
	font-size: 0.9rem;
	color: var(--mvp-text-secondary);
}

.mvp-content-card__control select {
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	color: var(--mvp-text-primary);
}

.mvp-generator__status { display: none; }

.mvp-generator__loading {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	background: rgba(37, 99, 235, 0.08);
	border-radius: var(--mvp-radius-sm);
	color: var(--mvp-text-secondary);
	font-size: 0.9rem;
}

.mvp-spinner {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	border: 2px solid rgba(37, 99, 235, 0.2);
	border-top-color: rgba(37, 99, 235, 0.9);
	animation: mvp-spin 0.9s linear infinite;
}

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

.mvp-solver {
	display: grid;
	gap: 1.25rem;
}

.mvp-solver__question {
	display: grid;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: rgba(37, 99, 235, 0.07);
	border-radius: var(--mvp-radius-md);
	border: 1px solid rgba(37, 99, 235, 0.15);
}

.mvp-solver__question-meta {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.mvp-solver__question-title {
	margin: 0;
	font-size: 1rem;
	color: var(--mvp-text-primary);
}

.mvp-solver__question-hint {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
}

.mvp-solver__question-text {
	margin: 0;
	font-weight: 600;
	color: var(--mvp-text-primary);
}

.mvp-solver__question-equation {
	padding: 0.85rem 1rem;
	background: #fff;
	border-radius: var(--mvp-radius-sm);
	border: 1px dashed rgba(37, 99, 235, 0.25);
	font-size: 1.5em;
}

.mvp-modal .mvp-solver__question-equation {
	margin-bottom: 1rem;
}

.mvp-solver__workspace {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.mvp-content-card--solver {
	position: relative;
	margin-top: 1.75rem;
	overflow: visible;
}

.mvp-solver__steps-pane {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mvp-solver__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.mvp-solver__add-step {
	align-self: flex-end;
}

.mvp-solver__step {
	background: rgba(241, 245, 249, 0.7);
	border-radius: var(--mvp-radius-sm);
	padding: 0.5rem;
	display: grid;
	gap: 0.45rem;
	border-left: 4px solid transparent;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.mvp-solver__step.is-correct {
	border-color: rgba(22, 163, 74, 0.85);
	background: rgba(22, 163, 74, 0.1);
}

.mvp-solver__step.is-incorrect {
	border-color: rgba(220, 38, 38, 0.85);
	background: rgba(220, 38, 38, 0.08);
}

.mvp-solver__step-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: flex-start;
	color: var(--mvp-text-secondary);
	font-size: 0.9rem;
}

.mvp-solver__step-index {
	font-weight: 600;
	color: var(--mvp-text-primary);
	margin-top: 0.2rem;
}

.mvp-solver__step-feedback {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: var(--mvp-text-secondary);
}

.mvp-solver__step-status {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	background: rgba(148, 163, 184, 0.85);
	flex: none;
}

.mvp-solver__step.is-correct .mvp-solver__step-status {
	background: #16a34a;
}

.mvp-solver__step.is-incorrect .mvp-solver__step-status {
	background: #dc2626;
}

.mvp-solver__step-message {
	display: grid;
	gap: 0.25rem;
}

.mvp-solver__step-student {
	font-size: 0.8rem;
	color: var(--mvp-text-secondary);
	opacity: 0.85;
}

.mvp-solver__textarea {
	width: 100%;
	min-height: 90px;
	padding: 0.75rem;
	border-radius: var(--mvp-radius-sm);
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--mvp-text-primary);
	resize: vertical;
}

math-field.mvp-solver__mathfield {
	display: block;
	width: 100%;
	min-height: 10px;
	border-radius: var(--mvp-radius-sm);
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	padding: 0.65rem 0.75rem;
	font-size: 1.3rem;
	color: var(--mvp-text-primary);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

math-field.mvp-solver__mathfield::part(content) {
	min-height: 52px;
	padding: 0;
}

math-field.mvp-solver__mathfield:focus-within {
	border-color: var(--mvp-color-primary);
	box-shadow: 0 0 0 3px rgba(51, 92, 255, 0.12);
}

math-field.mvp-solver__mathfield::part(placeholder) {
	color: var(--mvp-text-secondary);
	opacity: 0.8;
}

.mvp-solver__overall {
	margin-top: 1.25rem;
	padding: 0.95rem 1.1rem;
	border-radius: var(--mvp-radius-sm);
	background: rgba(30, 64, 175, 0.08);
	display: grid;
	gap: 0.5rem;
}

.mvp-solver__overall-header {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	justify-content: space-between;
}

.mvp-solver__overall-title {
	margin: 0;
	font-size: 0.95rem;
	color: var(--mvp-text-primary);
}

.mvp-solver__overall-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.16);
	color: #1d4ed8;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mvp-solver__overall-message {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mvp-text-secondary);
}

.mvp-solver__loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: rgba(255, 255, 255, 0.92);
	z-index: 20;
}

.mvp-solver__loading-text {
	margin: 0;
	font-size: 0.95rem;
	color: var(--mvp-text-secondary);
}

.mvp-content-card__button {
	border: 0;
	border-radius: 999px;
	padding: 0.6rem 1.3rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mvp-content-card__button--primary,
.mvp-content-card__button {
	background: var(--mvp-color-primary);
	color: #fff;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}

/* Biology-style loading state for submit button */
.mvp-content-card__button[disabled] {
    opacity: 0.85;
    background: rgba(37, 99, 235, 0.65);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.25), 0 0 0 6px rgba(37, 99, 235, 0.08);
    cursor: not-allowed;
}

.mvp-content-card__button--secondary {
	background: rgba(148, 163, 184, 0.2);
	color: var(--mvp-text-primary);
	box-shadow: none;
}

.mvp-content-card__button:hover,
.mvp-content-card__button:focus {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(37, 99, 235, 0.25);
}

.mvp-content-card__button--secondary:hover,
.mvp-content-card__button--secondary:focus {
	box-shadow: none;
	background: rgba(148, 163, 184, 0.3);
}

.mvp-content-card__meta {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
}

.mvp-content-card__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: rgba(30, 64, 175, 0.12);
	color: #1e40af;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mvp-working-form {
	display: grid;
	gap: 1rem;
}

.mvp-working-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.mvp-working-step {
	display: grid;
	gap: 0.4rem;
}

.mvp-working-step label {
	display: grid;
	gap: 0.3rem;
	font-size: 0.9rem;
	color: var(--mvp-text-secondary);
}

.mvp-working-step textarea {
	width: 100%;
	padding: 0.75rem;
	border-radius: var(--mvp-radius-sm);
	border: 1px solid rgba(148, 163, 184, 0.6);
	resize: vertical;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--mvp-text-primary);
	background: #fff;
}

.mvp-working-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mvp-working-tips {
	margin: 0;
	padding: 0.75rem 1rem;
	background: rgba(37, 99, 235, 0.08);
	border-radius: var(--mvp-radius-sm);
	color: var(--mvp-text-secondary);
	font-size: 0.9rem;
}

body.has-modal-open {
	overflow: hidden;
}

.mvp-modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.mvp-modal[hidden] {
	display: none !important;
}

.mvp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(4px);
}

.mvp-modal__dialog {
	position: relative;
	width: min(960px, 85vw);
	max-width: 100%;
	height: auto;
	max-height: 85vh;
	background: #fff;
	border-radius: var(--mvp-radius-lg);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	border: 1px solid rgba(148, 163, 184, 0.2);
}

.mvp-modal__header {
	padding: 0.75rem 1.5rem;
	background: var(--mvp-bg-muted);
	border-bottom: 1px solid var(--mvp-bg-muted);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mvp-modal__body {
	padding: 1.5rem 1.75rem;
	overflow-y: auto;
}

.mvp-modal__close {
	border: 0;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.mvp-modal__footer {
	padding: 1.25rem 1.75rem;
	background: var(--mvp-bg-muted);
	border-top: 1px solid var(--mvp-bg-muted);
	color: var(--mvp-text-primary);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
}

.mvp-modal .mvp-content-card__button,
.mvp-modal .mvp-content-card__button--primary,
.mvp-modal .mvp-content-card__button--secondary {
	background: #1e40af;
	color: #fff;
	box-shadow: 0 10px 24px rgba(30, 64, 175, 0.18);
}

.mvp-modal .mvp-content-card__button:hover,
.mvp-modal .mvp-content-card__button:focus {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(30, 64, 175, 0.24);
}

.mvp-modal__close {
	background: #1e40af;
	color: #fff;
}

.mvp-modal__close:hover,
.mvp-modal__close:focus {
	background: rgba(30, 64, 175, 0.85);
	transform: translateY(-1px);
}

.mvp-solver__column {
	display: grid;
	gap: 1rem;
}

.mvp-solver__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.mvp-solver__step {
	background: rgba(241, 245, 249, 0.6);
	border-radius: var(--mvp-radius-sm);
	padding: 0.5rem;
	display: grid;
	gap: 0.45rem;
}

.mvp-solver__step-number {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--mvp-text-secondary);
}

.mvp-solver__textarea {
	width: 100%;
	min-height: 90px;
	padding: 0.75rem;
	border-radius: var(--mvp-radius-sm);
	border: 1px solid rgba(148, 163, 184, 0.6);
	background: #fff;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--mvp-text-primary);
	resize: vertical;
}

.mvp-solver__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.mvp-feedback {
	display: grid;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: rgba(22, 163, 74, 0.08);
	border-radius: var(--mvp-radius-sm);
}

.mvp-feedback__title {
	margin: 0;
	font-size: 0.95rem;
	color: var(--mvp-text-primary);
}

.mvp-feedback__list {
	display: grid;
	gap: 0.6rem;
}

.mvp-feedback__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.6rem 0.7rem;
	border-radius: 10px;
	background: #fff;
}

.mvp-feedback__item.is-incorrect {
	border-left: 4px solid #dc2626;
}

.mvp-feedback__item.is-correct {
	border-left: 4px solid #16a34a;
}

.mvp-feedback__badge {
	font-weight: 700;
	color: var(--mvp-text-secondary);
}

.mvp-feedback__overall {
	padding-top: 0.5rem;
	border-top: 1px solid rgba(148, 163, 184, 0.25);
	font-size: 0.9rem;
	color: var(--mvp-text-primary);
}

.mvp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mvp-content-card__note {
	margin: 0;
	font-style: italic;
	color: var(--mvp-text-secondary);
}

/* Interactive comparison table styling */
.mvp-table--interactive thead th {
    background: linear-gradient(180deg, #e8f0ff 0%, #dbe7ff 100%);
	position: sticky;
	top: 0;
}

.mvp-table--interactive tbody tr {
	transition: background 0.18s ease;
}

.mvp-table--interactive tbody tr:hover {
	background: rgba(51, 92, 255, 0.06);
}

.mvp-table--heat-temp td:first-child {
	border-right: 1px dashed rgba(15, 23, 42, 0.12);
}

.mvp-table--interactive td,
.mvp-table--interactive th {
	padding: 0.6rem 0.55rem;
}

.mvp-table--interactive {
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Hover effect for Heat summary three-card row */
.heat-summary-grid .mvp-content-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.heat-summary-grid .mvp-content-card:hover,
.heat-summary-grid .mvp-content-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}
.heat-summary-grid figure img {
	transition: transform 0.2s ease;
}
.heat-summary-grid .mvp-content-card:hover figure img {
	transform: scale(1.02);
}

/* Hover effect for Conduction/Convection/Radiation grid */
.heat-modes-grid .mvp-content-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.heat-modes-grid .mvp-content-card:hover,
.heat-modes-grid .mvp-content-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

/* MCQ styling (Physics Paper 1) */
[data-physics-mcq] .mvp-content-card__question {
    min-height: 0; /* ensure MCQ stem doesn't reserve extra space */
	padding: 0.9rem 1rem;
	background: #fff;
	border-radius: 0;
	border: none;
}

[data-physics-options],
[data-chemistry-options] {
    list-style: none !important; /* custom A) prefix like Biology */
    counter-reset: mcq;
    padding-left: 0;
    margin-left: 0;
    display: grid;
    gap: 0.6rem;
}

[data-physics-options] li,
[data-chemistry-options] li {
    counter-increment: mcq;
	background: #fff;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 12px;
	padding: 0.55rem 0.75rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

[data-physics-options] li::before,
[data-chemistry-options] li::before {
    content: counter(mcq, upper-alpha) ") ";
    font-weight: 700;
    margin-right: 0.5rem;
}

[data-physics-options] li:hover,
[data-physics-options] li:focus-within,
[data-chemistry-options] li:hover,
[data-chemistry-options] li:focus-within {
	border-color: rgba(51, 92, 255, 0.55);
	box-shadow: 0 6px 16px rgba(51, 92, 255, 0.12);
}

[data-physics-options] li > label,
[data-chemistry-options] li > label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.55rem;
	cursor: pointer;
}

[data-physics-options] input[type="radio"],
[data-chemistry-options] input[type="radio"] {
	margin-top: 0.15rem;
}

[data-physics-mcq] .mvp-generator__status { display: none; }

/* Enhanced Physics MCQ appearance to match Biology */
[data-physics-generator] .intro-question-buttons .mvp-content-card__controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.intro-question-display {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.intro-question-content {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}
[data-physics-mcq] [data-physics-options] .mvp-mcq-option,
[data-chemistry-mcq] [data-chemistry-options] .mvp-mcq-option {
	background: #f8f9fa;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 12px;
	padding: 0.75rem 1rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

[data-physics-mcq] [data-physics-options] .mvp-mcq-option:hover,
[data-physics-mcq] [data-physics-options] .mvp-mcq-option:focus-within,
[data-chemistry-mcq] [data-chemistry-options] .mvp-mcq-option:hover,
[data-chemistry-mcq] [data-chemistry-options] .mvp-mcq-option:focus-within {
	background: #eef2ff;
	border-color: rgba(51, 92, 255, 0.55);
	box-shadow: 0 6px 16px rgba(51, 92, 255, 0.12);
}

[data-physics-mcq] [data-physics-options] .mvp-mcq-option.is-selected,
[data-chemistry-mcq] [data-chemistry-options] .mvp-mcq-option.is-selected {
    border-width: 2px;
    border-color: #34a853;
}

[data-physics-mcq] [data-physics-options] .mvp-mcq-option.is-correct,
[data-chemistry-mcq] [data-chemistry-options] .mvp-mcq-option.is-correct {
    background: #e6f4ea;
    border-color: #34a853;
}

[data-physics-mcq] [data-physics-options] .mvp-mcq-option.is-incorrect,
[data-chemistry-mcq] [data-chemistry-options] .mvp-mcq-option.is-incorrect {
    background: #e6f4ea; /* keep green even when incorrect */
    border-color: #34a853;
}

[data-physics-mcq] [data-physics-mcq-status],
[data-chemistry-mcq] [data-chemistry-mcq-status] {
	border-radius: 12px;
	padding: 1rem;
	margin-top: 0.75rem;
	border-left: 6px solid transparent;
}

[data-physics-mcq] [data-physics-mcq-status] h5 {
	margin: 0 0 0.35rem 0;
}

[data-physics-mcq] [data-physics-mcq-status].is-correct,
[data-chemistry-mcq] [data-chemistry-mcq-status].is-correct {
	background: #e6f4ea;
	border-left-color: #34a853;
}

[data-physics-mcq] [data-physics-mcq-status].is-incorrect,
[data-chemistry-mcq] [data-chemistry-mcq-status].is-incorrect {
	background: #fff7ed;
	border-left-color: #f59e0b;
}

.mvp-math {
	font-family: 'STIX Two Math', 'Cambria Math', 'DejaVu Serif', 'Times New Roman', serif;
	font-variant-numeric: lining-nums;
	letter-spacing: 0.01em;
}

/* Physics MCQ wrapper — styled like Biology question display (scoped to avoid conflicts) */
.mvp-content-card__section[data-physics-mcq] {
	background: #ffffff;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	border: 2px solid #E8F5E8; /* soft green border */
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.10);
}
.mvp-content-card__section[data-physics-mcq] .mvp-content-card__heading {
	color: #166534; /* deep green heading like Biology */
}
.mvp-content-card__section[data-physics-mcq] [data-physics-options] {
	margin-top: 1rem;
}

.mvp-empty-state {
	text-align: center;
	margin-top: 2rem;
	color: var(--mvp-text-secondary);
	font-style: italic;
}

.is-hidden {
	display: none !important;
}

@media (max-width: 768px) {
	body.has-modal-open {
		overflow: hidden;
	}

	.mvp-home section {
		padding: 0 1rem;
	}

	.mvp-filter-rail {
		flex-wrap: wrap;
	}

	.mvp-search {
		width: 100%;
		max-width: none;
	}

	.mvp-subject {
		padding: 2rem 1rem 3rem;
	}

	.mvp-subject__header {
		padding: 1.4rem 1.5rem;
	}

	.mvp-session {
		flex-direction: column;
	}

	.mvp-session__main {
		max-width: 100%;
	}

	.mvp-session__timeline {
		width: 100%;
		flex: none;
		position: sticky;
		top: 1rem;
	}

	.mvp-modal {
		padding: 0;
	}

	.mvp-modal__dialog {
		width: 100vw;
		height: 100vh;
		max-height: none;
		border-radius: 0;
		border: 0;
		box-shadow: none;
	}

		.mvp-modal__header {
			padding: 0.75rem 1rem;
		}

		.mvp-modal__body {
			padding: 1rem;
		}

		.mvp-modal__footer {
			padding: 1rem;
			border-top: 1px solid var(--mvp-bg-muted);
		}

		.mvp-modal__close {
			width: 34px;
			height: 34px;
			box-shadow: none;
		}

	.mvp-solver__workspace {
		grid-template-columns: 1fr;
	}

	.mvp-solver__question {
		padding: 1rem;
	}
}

/* ==============================
   BIOLOGY SUBJECT STYLES
   ============================== */

/* Topic Card Styling (used for chapter intro) */
.mvp-topic-card {
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #FFE066 0%, #F2C94C 100%);
	border-radius: 12px;
	border-left: 4px solid #E6B800;
	padding: 1.5rem;
	box-shadow: 0 4px 15px rgba(242, 201, 76, 0.3);
}

.mvp-topic-card__title {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #2c3e50;
}

.mvp-topic-card__description {
	margin: 0;
	color: #5a6c7d;
	font-size: 1rem;
	line-height: 1.4;
}

.mvp-topic-card__subtitle {
	color: #5a6c7d;
	font-size: 1rem;
	margin: 0;
	text-align: center;
	opacity: 0.9;
}


.mvp-content-card__details {
	background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
	padding: 1.25rem;
	border-radius: 10px;
	margin: 1rem 0;
	border-left: 4px solid #F2C94C;
	font-size: 0.95rem;
	color: #2c3e50;
	box-shadow: 0 2px 8px rgba(242, 201, 76, 0.2);
}

/* Disease Types Container */
.disease-types-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 1rem 0;
}

.disease-type-item {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2px solid #e9ecef;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.disease-type-item--infectious {
	border: 3px solid #4CAF50;
}

.disease-type-item--non-infectious {
	border: 3px solid #FF9800;
}

.disease-type-item__title {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #2c3e50;
	line-height: 1.3;
}

.disease-type-item__description {
	margin: 0 0 1rem 0;
	font-size: 0.95rem;
	color: #5a6c7d;
	line-height: 1.4;
	font-style: italic;
}

.disease-type-item__list {
	margin: 0;
	padding-left: 1.2rem;
	list-style: none;
}

.disease-type-item__list li {
	position: relative;
	margin: 0.5rem 0;
	padding-left: 1.5rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #34495e;
}

.disease-type-item--infectious .disease-type-item__list li::before {
	content: '🦠';
	position: absolute;
	left: 0;
	top: 0;
}

.disease-type-item--non-infectious .disease-type-item__list li::before {
	content: '💊';
	position: absolute;
	left: 0;
	top: 0;
}

/* Example Container */
.example-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1rem 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.example-item {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: none;
	border-radius: 16px;
	padding: 1rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.example-item--infectious {
	background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
}

.example-item--infectious::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, #4CAF50, #66BB6A);
	border-radius: 18px;
	z-index: -1;
}

.example-item--non-infectious {
	background: linear-gradient(135deg, #fff8f0 0%, #ffe8d6 100%);
}

.example-item--non-infectious::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, #FF9800, #FFB74D);
	border-radius: 18px;
	z-index: -1;
}

.example-item--barrier {
	border-color: #ff5722;
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
	border: 2px solid #e91e63;
}

.example-item--barrier::before {
	background: linear-gradient(45deg, #ff5722, #ff9800, #ffc107, #8bc34a);
}

.example-item__title {
	margin: 0 0 0.5rem 0;
	font-size: 1.2rem;
	font-weight: 600;
	color: #2c3e50;
}

.example-item__type {
	margin: 0 0 1rem 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.example-item__description {
	margin: 0 0 1.5rem 0;
	font-size: 0.95rem;
	color: #5a6c7d;
	line-height: 1.4;
}

.example-item__image {
	margin: 1rem 0;
}

.example-item__image img {
	width: 100%;
	max-width: 200px;
	height: auto;
	border-radius: 8px;
	border: 2px solid #e9ecef;
}

.example-item__images {
	display: flex;
	gap: 0.75rem;
	margin: 1rem 0;
	justify-content: center;
}

.example-item__image-single {
	flex: 1;
	max-width: 120px;
}

.example-item__image-single img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 2px solid #e9ecef;
	transition: transform 0.3s ease;
}

.example-item__image-single img:hover {
	transform: scale(1.05);
}

.example-item__icon {
	margin: 1rem 0;
}

.example-item__icon-placeholder {
	font-size: 3rem;
	margin: 0.5rem 0;
	opacity: 0.7;
}

.example-item__caption {
	font-size: 0.85rem;
	color: #6c757d;
	margin: 0.5rem 0 0 0;
	font-style: italic;
}

/* Left-align Defence Response content */
.example-item .defence-response-list {
	text-align: left !important;
}

.example-item .defence-response-list li {
	text-align: left !important;
}

/* Pathogens diagram styling */
.pathogens-diagram {
	text-align: center;
	margin: 1.5rem 0;
	padding: 0;
}

.pathogens-image {
	max-width: 600px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pathogens-caption {
	font-size: 0.9rem;
	color: #6c757d;
	margin: 0.75rem 0 0 0;
	font-style: italic;
	text-align: center;
}

/* Vector and Comparison Items */
.mvp-content-card__comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1rem 0;
}

.mvp-content-card__comparison-item {
	background: linear-gradient(135deg, #E8F5E8 0%, #C8E6C9 100%);
	padding: 1.25rem;
	border-radius: 10px;
	border-left: 4px solid #4CAF50;
	box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}

.mvp-content-card__pathogen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1rem 0;
}

.mvp-content-card__pathogen-item {
	background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
	padding: 1.25rem;
	border-radius: 10px;
	border: 2px solid #FFCC02;
	box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

/* Vector Examples Container */
.vector-examples-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}

.vector-example-item {
	background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
	border: 2px solid #FFB74D;
	border-radius: 12px;
	padding: 1rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.vector-example-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 183, 77, 0.3);
}

.vector-example-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #FF9800 0%, #FFB74D 100%);
}

.vector-example-content {
	text-align: center;
}

.vector-example-content h6 {
	margin: 0 0 0.5rem 0;
	font-size: 1rem;
	font-weight: 600;
	color: #E65100;
}

.vector-example-content p {
	margin: 0;
	font-size: 0.9rem;
	color: #BF360C;
	font-weight: 500;
}

/* Image Styling */
.mvp-content-card__image {
	margin: 1.5rem 0;
	text-align: center;
	background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
	padding: 1.5rem;
	border-radius: 12px;
	border: 2px solid #DEE2E6;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mvp-content-card__image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}

.mvp-content-card__caption {
	font-size: 0.85rem;
	color: #6c757d;
	margin: 0.5rem auto 1rem auto;
	font-style: italic;
	text-align: center;
}

/* Specific styling for vector-pathogen image */
.vector-pathogen-image {
	max-width: 350px !important;
	width: auto !important;
	height: auto !important;
	border-radius: 8px;
	display: block;
	margin: 1rem auto;
}

/* Vector-Prevention Side-by-Side Layout */
.vector-prevention-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 1.5rem 0;
	align-items: start;
}

.vector-image-section {
	text-align: center;
}

.vector-image-section .vector-pathogen-image {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}

.prevention-strategies-section {
	padding-left: 1rem;
}

.prevention-strategies-section h4 {
	margin-top: 0;
	color: #000000;
	font-size: 1.4rem;
	font-weight: 600;
}

.prevention-strategies-section ul {
	margin: 1rem 0;
	padding-left: 1.2rem;
}

.prevention-strategies-section li {
	margin: 0.75rem 0;
	line-height: 1.5;
}

/* Transmission Methods Bullet Points */
.transmission-methods {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.transmission-methods li {
	background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
	border: 2px solid #e3f2fd;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #34495e;
	transition: all 0.3s ease;
}

.transmission-methods li:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: #90caf9;
}

.transmission-methods li:last-child {
	margin-bottom: 0;
}

.transmission-methods li strong {
	color: #1976d2;
	font-weight: 600;
}

/* Pathogen Selector */
.pathogen-selector {
	display: flex;
	gap: 0.5rem;
	margin: 1rem auto;
	flex-wrap: wrap;
	justify-content: center;
}

.pathogen-btn {
	background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
	border: 2px solid #DEE2E6;
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-weight: 500;
	color: #495057;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	cursor: pointer;
	transition: all 0.3s ease;
}

.pathogen-btn:hover {
	background: linear-gradient(135deg, #E9ECEF 0%, #DEE2E6 100%);
	border-color: #F2C94C;
	color: #343a40;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pathogen-btn.active {
	background: linear-gradient(135deg, #F2C94C 0%, #E6B800 100%) !important;
	border-color: #E6B800 !important;
	color: #2c3e50 !important;
	box-shadow: 0 4px 12px rgba(242, 201, 76, 0.3) !important;
}

.pathogen-info {
	margin: 1rem auto 0 auto;
	display: flex;
	justify-content: center;
}

.pathogen-detail {
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E8 100%);
	border-radius: 12px;
	padding: 1rem;
	border-left: 4px solid #4CAF50;
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
	color: #2e7d32;
	margin-top: 1rem;
	max-width: 100%;
	width: fit-content;
}

.pathogen-detail h5 {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #2e7d32;
}

.pathogen-detail p {
	margin: 0.5rem 0;
	line-height: 1.5;
}

/* Defence mechanism types (Body Defence chapter) */
.defence-types-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 1.5rem 0;
}

.defence-type-item {
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
	border-radius: 12px;
	padding: 1.5rem;
	border: 3px solid #ff9800;
}

.defence-type-item--specific {
	border-color: #4caf50;
	background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
}

.defence-type-item--non-specific {
	border-color: #2196f3;
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.defence-type-item h3 {
	margin: 0 0 1rem 0;
	color: #1976d2;
	font-size: 1.3rem;
	font-weight: 600;
}

.defence-mechanisms-list {
	background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
	border-left: 4px solid #4caf50;
}

.defence-mechanisms-list h4 {
	color: #2e7d32;
	margin: 0 0 1rem 0;
	font-size: 1.3rem;
	font-weight: 600;
}

.defence-mechanisms-list ul {
	margin: 0;
	padding-left: 1.5rem;
}

.defence-mechanisms-list li {
	margin: 0.5rem 0;
	color: #424242;
	line-height: 1.5;
}

.defence-mechanisms-list li strong {
	color: #1976d2;
}

/* Question Generation Styles */
.question-generator-container {
	margin: 1rem 0;
}

.question-generation-container {
	background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.question-buttons {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	justify-content: center;
}

.question-display {
	background: white;
	border-radius: 12px;
	padding: 2rem;
	border: 2px solid #E8F5E8;
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
}

.question-loading {
	text-align: center;
	padding: 2rem;
	color: #666;
	font-style: italic;
}

.loading-spinner {
	border: 3px solid #E8F5E8;
	border-top: 3px solid #4CAF50;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
	margin: 0 auto 1rem auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.question-content {
	color: #2c3e50;
}

.question-content h4 {
	color: #4CAF50;
	margin-bottom: 1rem;
	font-size: 1.1rem;
}

/* MCQ styling */
.mcq-options {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0;
}

.mcq-option {
	background: #f5f5f5;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.mcq-option:hover {
	background: #e3f2fd;
	border-color: #1976d2;
}

.mcq-option.selected {
	background: #e8f5e8;
	border-color: #4caf50;
}

.question-answer {
	background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 1rem;
	border-left: 4px solid #ff9800;
}

.question-content .question-answer {
	background: #E8F5E8;
	border-radius: 8px;
	padding: 1rem;
	margin-top: 1rem;
	border-left: 4px solid #4CAF50;
}

.question-content .question-answer h5 {
	color: #2e7d32;
	margin: 0 0 0.5rem 0;
}

.question-content .question-answer p {
	margin: 0;
	color: #34495e;
}

/* Answer input styling */
.answer-input-section {
	margin: 1.5rem 0;
}

.answer-input-section label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #2c3e50;
}

.answer-input-section textarea {
	width: 100%;
	padding: 1rem;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
	min-height: 120px;
	transition: border-color 0.3s ease;
}

.answer-input-section textarea:focus {
	outline: none;
	border-color: #4CAF50;
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.answer-input-section button {
	margin-top: 1rem;
}

/* Marking Results Styles */
.marking-results {
	margin-top: 2rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
	border-radius: 12px;
	border: 2px solid #e3f2fd;
}

.marking-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #e3f2fd;
}

.marking-header h5 {
	margin: 0;
	color: #1976d2;
	font-size: 1.2rem;
	font-weight: 600;
}

.score-display {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.score-label {
	font-weight: 500;
	color: #64748b;
}

.score-value {
	font-weight: 600;
	font-size: 1.1rem;
	color: #1976d2;
	background: rgba(25, 118, 210, 0.1);
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
}

.marking-details {
	display: grid;
	gap: 1rem;
}

.marking-details > div {
	padding: 1rem;
	border-radius: 8px;
	background: white;
	border-left: 4px solid #e3f2fd;
}

.strengths {
	border-left-color: #4CAF50;
}

.improvements {
	border-left-color: #FF9800;
}

.advice {
	border-left-color: #2196F3;
}

.guidance {
	border-left-color: #9C27B0;
}

/* New 2-card marking system */
.congratulate-card {
	padding: 1.5rem;
	border-radius: 12px;
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border-left: 4px solid #28a745;
	text-align: center;
	margin-bottom: 1rem;
}

.congratulate-card h6 {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: #155724;
}

.feedback-card {
	padding: 1.5rem;
	border-radius: 12px;
	background: linear-gradient(135deg, #cce7ff 0%, #b3d9ff 100%);
	border-left: 4px solid #007cba;
}

.feedback-card h6 {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #004085;
}

.feedback-card p {
	margin: 0;
	color: #004085;
	line-height: 1.6;
}

.marking-details h6 {
	margin: 0 0 0.5rem 0;
	font-size: 1rem;
	font-weight: 600;
}

.marking-details p {
	margin: 0;
	line-height: 1.5;
	color: #374151;
}

.marking-error {
	text-align: center;
	padding: 2rem;
	color: #dc2626;
}

.marking-error h5 {
	margin: 0 0 0.5rem 0;
	color: #dc2626;
}

/* Biology Responsive Styles */
@media (max-width: 768px) {
	.disease-types-container,
	.example-container,
	.mvp-content-card__comparison,
	.mvp-content-card__pathogen-grid,
	.defence-types-container {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.disease-type-item,
	.example-item {
		padding: 1.25rem;
	}
	
	.example-item__images {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
	
	.example-item__image-single {
		max-width: 150px;
	}
	
	.vector-examples-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	
	.vector-prevention-container {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.prevention-strategies-section {
		padding-left: 0;
	}
	
	.vector-image-section .vector-pathogen-image {
		max-width: 280px !important;
	}
}

@media (max-width: 480px) {
	.vector-examples-container {
		grid-template-columns: 1fr;
	}
}