:root {
	--sxs-primary: #4f46e5;
	--sxs-primary-dark: #3730a3;
	--sxs-sidebar-bg: #1e1b4b;
	--sxs-sidebar-active: #4f46e5;
	--sxs-accent: #f59e0b;
	--sxs-accent-dark: #d97706;
	--sxs-teal: #0d9488;
	--sxs-rose: #e11d48;
	--sxs-ink: #0f172a;
}

html, body {
	overflow-x: hidden;
}
body {
	background-color: #f4f6f9;
}

/* ---------- Question images ---------- */
.question-image-thumb {
	max-width: 140px;
	max-height: 100px;
	object-fit: cover;
}
.question-image-list-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: .375rem;
	border: 1px solid #e5e7eb;
}
.question-image {
	max-width: 100%;
	max-height: 360px;
	border-radius: .5rem;
	border: 1px solid #e5e7eb;
	display: block;
}

/* ---------- Landing page (vibrant ed-tech style) ---------- */
.landing-body {
	background-color: #fff;
	color: var(--sxs-ink);
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Promo bar */
.promo-bar {
	background: var(--sxs-ink);
	color: #fff;
	text-align: center;
	font-size: .8125rem;
	font-weight: 600;
	padding: .55rem 1rem;
}
.promo-bar strong {
	color: #fbbf24;
}

/* Navbar */
.landing-navbar {
	background: #fff;
	padding: .9rem 0;
	border-bottom: 1px solid #eef0f4;
	position: sticky;
	top: 0;
	z-index: 30;
}
/* Keep anchor-linked sections from tucking under the sticky navbar. */
#categories,
#test-series,
#how-it-works {
	scroll-margin-top: 76px;
}
.landing-navbar .navbar-brand {
	color: var(--sxs-ink);
	font-size: 1.2rem;
}
.landing-navbar .navbar-brand i {
	color: var(--sxs-primary);
}
.landing-navbar .nav-link {
	color: #475569;
	font-weight: 600;
	font-size: .9rem;
}
.landing-navbar .nav-link:hover {
	color: var(--sxs-primary);
}

/* "My Tests" dropdown - lets a logged-in, enrolled student jump straight
   to a test from the landing page instead of via the dashboard. */
.my-tests-dropdown {
	width: 320px;
	max-width: 90vw;
	max-height: 380px;
	overflow-y: auto;
	border: none;
	border-radius: .75rem;
}
.my-tests-dropdown .dropdown-header {
	color: var(--sxs-primary);
	font-weight: 700;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding-top: .75rem;
}
.my-tests-dropdown .dropdown-item {
	white-space: normal;
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.my-tests-dropdown .dropdown-item:active {
	background: var(--sxs-primary);
}

/* Mobile nav drawer - slides in from the right (offcanvas-end). Bootstrap's
   .navbar-expand-md rules reset all of this back to an inline nav at >=md,
   so these overrides only ever apply to the phone/tablet drawer. */
.landing-nav-offcanvas {
	width: 280px;
}
.landing-nav-offcanvas .offcanvas-header {
	border-bottom: 1px solid #eef0f4;
}
.landing-nav-offcanvas .offcanvas-title {
	color: var(--sxs-ink);
	font-size: 1.05rem;
}
.landing-nav-offcanvas .offcanvas-title i {
	color: var(--sxs-primary);
}
.landing-nav-offcanvas .nav-link {
	padding: .65rem .25rem;
	border-bottom: 1px solid #f1f3f8;
}

/* Banner / Slider */
/* Mobile-first: base rules below target phones (<576px); tablet and
   desktop overrides follow in ascending media queries. */
.banner-slider-section {
	padding: .9rem 0 0;
}
.banner-slider {
	border-radius: .65rem;
	overflow: hidden;
	box-shadow: 0 10px 25px -14px rgba(15,23,42,.3);
}
.banner-slide-img {
	height: 170px;
	object-fit: cover;
}

/* Caption: fixed rem offset (not %) so it clears the indicator dots
   consistently no matter how short the image is on small screens. */
.banner-slide-caption {
	left: 0;
	right: 0;
	bottom: 0;
	text-align: left;
	background: linear-gradient(0deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.45) 55%, rgba(15,23,42,0) 100%);
	border-radius: 0;
	padding: 1.5rem .9rem 1.75rem;
}
.banner-slide-caption h2 {
	font-size: 1rem;
	margin-bottom: .25rem;
	line-height: 1.25;
}
.banner-slide-caption p {
	font-size: .78rem;
	margin-bottom: .6rem;
	opacity: .92;
}
.banner-slide-caption .btn {
	padding: .35rem .9rem;
	font-size: .78rem;
}

/* Indicators: smaller touch dots, tucked close to the bottom edge */
.banner-slider .carousel-indicators {
	margin-bottom: .35rem;
}
.banner-slider .carousel-indicators [data-bs-target] {
	width: 16px;
	height: 3px;
	margin: 0 3px;
	background-color: rgba(255,255,255,.6);
}
.banner-slider .carousel-indicators .active {
	background-color: #fff;
}

/* Arrows: smaller, thumb-friendly hit area on phones */
.banner-slider .carousel-control-prev,
.banner-slider .carousel-control-next {
	width: 12%;
}
.banner-slider .carousel-control-prev-icon,
.banner-slider .carousel-control-next-icon {
	width: 1.5rem;
	height: 1.5rem;
	background-size: 1.25rem;
}

/* ---------- Tablet (>=576px) ---------- */
@media (min-width: 576px) {
	.banner-slider-section {
		padding: 1.25rem 0 0;
	}
	.banner-slider {
		border-radius: .9rem;
	}
	.banner-slide-img {
		height: 280px;
	}
	.banner-slide-caption {
		left: 4%;
		right: 4%;
		bottom: 6%;
		border-radius: .75rem;
		padding: 1.5rem 1.5rem .75rem;
	}
	.banner-slide-caption h2 {
		font-size: 1.6rem;
	}
	.banner-slide-caption p {
		font-size: .95rem;
	}
	.banner-slide-caption .btn {
		padding: .5rem 1.4rem;
		font-size: .9rem;
	}
	.banner-slider .carousel-indicators [data-bs-target] {
		width: 22px;
		height: 3px;
	}
	.banner-slider .carousel-control-prev-icon,
	.banner-slider .carousel-control-next-icon {
		width: 2rem;
		height: 2rem;
		background-size: 1.75rem;
	}
}

/* ---------- Tablet landscape / small desktop (>=768px) ---------- */
@media (min-width: 768px) {
	.banner-slide-img {
		height: 340px;
	}
	.banner-slide-caption h2 {
		font-size: 1.85rem;
	}
}

/* ---------- Desktop (>=992px) ---------- */
@media (min-width: 992px) {
	.banner-slider {
		border-radius: 1.1rem;
	}
	.banner-slide-img {
		height: 420px;
	}
	.banner-slide-caption {
		left: 5%;
		right: 5%;
		bottom: 8%;
		padding: 1.75rem 1.75rem .75rem;
	}
	.banner-slide-caption h2 {
		font-size: 2.25rem;
	}
	.banner-slide-caption p {
		font-size: 1.05rem;
	}
	.banner-slider .carousel-control-prev,
	.banner-slider .carousel-control-next {
		width: 8%;
	}
}

/* Hero */
.hero-section {
	background: #f5f4ff;
	position: relative;
	overflow: hidden;
	padding: 3.5rem 0 4rem;
}
.hero-shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hero-shape-1 {
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(79,70,229,.14), transparent 70%);
	top: -140px;
	right: -100px;
}
.hero-shape-2 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(245,158,11,.16), transparent 70%);
	bottom: -120px;
	left: -80px;
}
.hero-title {
	line-height: 1.25;
	letter-spacing: -.02em;
}
.hero-title-light,
.hero-title-bold {
	display: block;
}
.hero-title-light {
	font-weight: 500;
	font-size: 1.6rem;
	color: #56607a;
}
.hero-title-bold {
	font-weight: 800;
	font-size: 2.35rem;
	color: var(--sxs-ink);
}
@media (min-width: 768px) {
	.hero-title-light {
		font-size: 1.85rem;
	}
	.hero-title-bold {
		font-size: 2.85rem;
	}
}
.hero-title .text-accent {
	color: var(--sxs-primary);
}
.hero-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin-top: .85rem;
	font-weight: 600;
	color: #475569;
	font-size: .95rem;
}
.hero-flow i {
	color: var(--sxs-accent);
	font-size: .55rem;
}
.hero-subtitle {
	font-size: 1.05rem;
	color: #56607a;
	max-width: 540px;
	margin-top: .9rem;
}

/* Hero CTA buttons: always on one line, even on phones (labels are
   shortened via the d-sm-none/d-none d-sm-inline spans in the markup so
   there's actually room for both buttons side by side). */
.hero-cta-row {
	flex-wrap: nowrap;
}
.hero-cta-row .btn {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 575.98px) {
	.hero-cta-row .btn {
		padding: .6rem .75rem;
		font-size: .85rem;
	}
}
@media (max-width: 359.98px) {
	.hero-cta-row .btn {
		padding: .55rem .5rem;
		font-size: .78rem;
	}
}

.hero-chip-row {
	margin-top: .9rem;
}
.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	padding: .35rem .85rem;
	font-size: .78rem;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.hero-chip:hover {
	border-color: var(--sxs-primary);
	color: var(--sxs-primary);
	background: #eef2ff;
}

/* Hero floating stats bar - straddles the hero's bottom edge */
.hero-stats-float {
	position: relative;
	z-index: 2;
	margin-top: -3.75rem;
	margin-bottom: 2rem;
	background: #fff;
	border-radius: 1.1rem;
	box-shadow: 0 20px 45px -18px rgba(15,23,42,.25);
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
}
.hero-stats-float-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: 1 1 180px;
}
.stat-icon-sm {
	width: 42px;
	height: 42px;
	border-radius: .7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.hero-stat-num {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--sxs-ink);
}
.hero-stat-label {
	font-size: .75rem;
	color: #64748b;
	font-weight: 600;
}

/* Stats bar: keep all three items in one row on phones too (icon stacked
   above number/label per item, instead of wrapping one item per line). */
@media (max-width: 575.98px) {
	.hero-stats-float {
		padding: 1rem .5rem;
		border-radius: .85rem;
		gap: 0;
		flex-wrap: nowrap;
	}
	.hero-stats-float-item {
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: .35rem;
		min-width: 0;
	}
	.stat-icon-sm {
		width: 34px;
		height: 34px;
		font-size: .9rem;
	}
	.hero-stat-num {
		font-size: .95rem;
	}
	.hero-stat-label {
		font-size: .65rem;
		white-space: nowrap;
	}
}

/* Hero illustration mosaic */
.hero-illustration {
	position: relative;
	height: 420px;
	max-width: 420px;
	margin: 0 auto;
}
.hero-illustration-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 230px;
	height: 230px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sxs-primary), #7c3aed);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 30px 60px -20px rgba(79,70,229,.55);
}
.hero-illustration-core i {
	font-size: 2.75rem;
}
.hero-illustration-core .core-num {
	font-size: 1.5rem;
	font-weight: 800;
	margin-top: .35rem;
}
.hero-illustration-core .core-label {
	font-size: .75rem;
	opacity: .9;
}
.subject-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	border-radius: .9rem;
	padding: .6rem .9rem;
	box-shadow: 0 14px 30px -12px rgba(15,23,42,.28);
	font-size: .8rem;
	font-weight: 700;
	color: var(--sxs-ink);
	animation: float-chip 4.5s ease-in-out infinite;
}
.subject-chip .chip-ico {
	width: 30px;
	height: 30px;
	border-radius: .55rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: .95rem;
	flex-shrink: 0;
}
.subject-chip-1 { top: 0; left: 5%; animation-delay: 0s; }
.subject-chip-2 { top: 10%; right: 0; animation-delay: .8s; }
.subject-chip-3 { bottom: 12%; left: -4%; animation-delay: 1.6s; }
.subject-chip-4 { bottom: 0; right: 8%; animation-delay: 2.4s; }
@keyframes float-chip {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.pill-ico {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: .9rem;
}

/* Feature cards */
.feature-card {
	border: 1px solid #eef0f4;
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	height: 100%;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.feature-card:hover {
	box-shadow: 0 1rem 2rem rgba(15,23,42,.07);
	transform: translateY(-4px);
	border-color: transparent;
}
.feature-icon {
	width: 52px;
	height: 52px;
	border-radius: .85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #fff;
	margin-bottom: 1.1rem;
}

/* Section framing */
.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--sxs-primary);
	background: #eef2ff;
	border-radius: 999px;
	padding: .3rem .8rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Landing test series cards */
.test-card-landing {
	border-radius: 1rem;
	border: 1px solid #eef0f4;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	overflow: hidden;
	position: relative;
}
.test-card-landing:hover {
	box-shadow: 0 1.25rem 2.5rem rgba(15,23,42,.1);
	transform: translateY(-5px);
}
.test-card-accent {
	height: 6px;
	background: linear-gradient(90deg, var(--sxs-primary), #a855f7);
}
.test-card-landing .test-meta-item {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.test-card-landing .test-meta-item i {
	color: var(--sxs-primary);
}

/* Steps */
.step-card {
	text-align: center;
	padding: 0 1rem;
}
.step-number {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef2ff;
	color: var(--sxs-primary);
	font-weight: 800;
	font-size: 1.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

/* Trust band */
.trust-band {
	background: linear-gradient(135deg, #fff7e6, #eef2ff);
	border-radius: 1.25rem;
}

/* CTA band */
.cta-band {
	background: linear-gradient(135deg, var(--sxs-primary-dark), var(--sxs-primary) 60%, #7c3aed);
	border-radius: 1.5rem;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cta-band::before {
	content: '';
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	top: -140px;
	right: -80px;
}

/* Footer */
.landing-footer {
	background: var(--sxs-ink);
	color: rgba(255,255,255,.6);
}
.landing-footer .footer-brand {
	color: #fff;
	font-weight: 700;
}
.landing-footer .footer-col-title {
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 1rem;
}
.landing-footer a {
	color: rgba(255,255,255,.6);
	text-decoration: none;
	font-size: .875rem;
}
.landing-footer a:hover {
	color: #fff;
}
.landing-footer li {
	margin-bottom: .6rem;
}
.landing-footer hr {
	border-color: rgba(255,255,255,.1);
}
.landing-footer .footer-social a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.landing-footer .footer-social a:hover {
	color: #fff;
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: 0 8px 16px -4px rgba(0,0,0,.4);
}
.landing-footer .footer-social-facebook { color: #1877f2; }
.landing-footer .footer-social-facebook:hover { background: #1877f2; }
.landing-footer .footer-social-instagram {
	background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.landing-footer .footer-social-instagram:hover {
	background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: #fff;
}
.landing-footer .footer-social-linkedin { color: #0a66c2; }
.landing-footer .footer-social-linkedin:hover { background: #0a66c2; }
.landing-footer .footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}
.landing-footer .footer-contact i {
	margin-top: .2rem;
	color: rgba(255,255,255,.5);
}

/* WhatsApp floating action button */
.whatsapp-fab {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	box-shadow: 0 10px 25px -6px rgba(37,211,102,.6);
	z-index: 40;
	transition: transform .15s ease;
}
.whatsapp-fab:hover {
	color: #fff;
	transform: scale(1.08);
}

/* ---------- Sub-category detail page ---------- */
.subcat-breadcrumb-bar {
	background: #f8fafc;
	border-bottom: 1px solid #eef0f4;
	padding: .75rem 0;
}
.subcat-breadcrumb-bar .breadcrumb {
	margin: 0;
	font-size: .85rem;
}
.subcat-breadcrumb-bar .breadcrumb-item a {
	color: #64748b;
	text-decoration: none;
}
.subcat-breadcrumb-bar .breadcrumb-item a:hover {
	color: var(--sxs-primary);
}
.subcat-breadcrumb-bar .breadcrumb-item.active {
	color: var(--sxs-ink);
	font-weight: 600;
}
.subcat-hero {
	background: #f5f4ff;
	padding: 2.5rem 0;
	border-bottom: 1px solid #eef0f4;
}
.subcat-logo-box {
	width: 72px;
	height: 72px;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--sxs-primary);
	box-shadow: 0 10px 24px -12px rgba(15,23,42,.15);
}
.subcat-title {
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--sxs-ink);
	letter-spacing: -.01em;
	margin-bottom: .35rem;
}
@media (min-width: 768px) {
	.subcat-title {
		font-size: 2.15rem;
	}
}
.subcat-subtitle {
	color: #475569;
	font-size: 1rem;
	max-width: 640px;
}
.subcat-meta {
	color: #64748b;
	font-size: .9rem;
	font-weight: 600;
}
.subcat-meta i {
	color: var(--sxs-primary);
}
.subcat-tabs-bar {
	background: #fff;
	border-bottom: 1px solid #eef0f4;
	position: sticky;
	top: 0;
	z-index: 25;
}
.subcat-tabs {
	border-bottom: 0;
}
.subcat-tabs .nav-link {
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	color: #64748b;
	font-weight: 600;
	padding: 1rem .25rem;
	margin-right: 1.75rem;
}
.subcat-tabs .nav-link:hover {
	color: var(--sxs-primary);
	border-color: transparent;
}
.subcat-tabs .nav-link.active {
	color: var(--sxs-primary);
	background: transparent;
	border-bottom-color: var(--sxs-primary);
}

/* ---------- Welcome / auth pages ---------- */
.welcome-body {
	min-height: 100vh;
	background: linear-gradient(135deg, var(--sxs-primary) 0%, var(--sxs-primary-dark) 100%);
}

.welcome-card {
	border-radius: 1rem;
	transition: transform .2s ease;
}
.welcome-card:hover {
	transform: translateY(-6px);
}

.auth-body {
	min-height: 100vh;
	background: linear-gradient(135deg, var(--sxs-primary) 0%, var(--sxs-primary-dark) 100%);
}
.auth-card {
	border-radius: 1rem;
	max-width: 460px;
	width: 100%;
}

/* ---------- Split-panel login page ---------- */
.auth-split-wrap {
	min-height: 100vh;
}
.auth-brand-pane {
	width: 42%;
	max-width: 560px;
	background: linear-gradient(160deg, var(--sxs-primary-dark) 0%, var(--sxs-primary) 100%);
	color: #fff;
	padding: 3.5rem 3rem;
	position: relative;
	overflow: hidden;
}
.auth-brand-pane::before,
.auth-brand-pane::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
}
.auth-brand-pane::before {
	width: 420px;
	height: 420px;
	top: -140px;
	right: -160px;
}
.auth-brand-pane::after {
	width: 300px;
	height: 300px;
	bottom: -120px;
	left: -100px;
	background: rgba(255,255,255,.05);
}
.auth-brand-pane > * {
	position: relative;
	z-index: 1;
}
.auth-illustration {
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
	display: block;
}
.auth-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: rgba(255,255,255,.12);
	border-radius: 999px;
	padding: .4rem .85rem;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}
.auth-form-pane {
	background: #f8fafc;
	min-height: 100vh;
}
.auth-form-card {
	max-width: 420px;
}
.auth-form-card-wide {
	max-width: 560px;
}
.auth-form-card .input-group-text {
	transition: border-color .15s ease, background-color .15s ease;
}
.auth-form-card .input-group:focus-within .input-group-text {
	border-color: #86b7fe;
	background-color: #fff;
}
.password-toggle {
	cursor: pointer;
}
.auth-demo-note {
	background: #eef2ff;
	border: 1px solid #e0e7ff;
	border-radius: .5rem;
	padding: .6rem .9rem;
	font-size: .8125rem;
	color: #4338ca;
	text-align: center;
}

/* ---------- Admin & Student sidebar layout ---------- */
.admin-sidebar,
.student-sidebar {
	background-color: var(--sxs-sidebar-bg);
	min-height: 100vh;
	width: 250px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1030;
	transition: transform .25s ease;
}
.admin-sidebar .brand,
.student-sidebar .brand {
	color: #fff;
	font-weight: 700;
	padding: 1rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-sidebar .brand span,
.student-sidebar .brand span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.admin-sidebar .nav-link,
.student-sidebar .nav-link {
	color: rgba(255,255,255,.75);
	padding: .65rem 1.25rem;
	border-radius: .375rem;
	margin: .15rem .75rem;
}
.sidebar-section-label {
	color: rgba(255,255,255,.4);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .9rem 1.25rem .35rem;
}
.admin-sidebar .nav-link:hover,
.student-sidebar .nav-link:hover {
	color: #fff;
	background-color: rgba(255,255,255,.08);
}
.admin-sidebar .nav-link.active,
.student-sidebar .nav-link.active {
	color: #fff;
	background-color: var(--sxs-sidebar-active);
}
.admin-sidebar .nav-link i,
.student-sidebar .nav-link i {
	width: 1.25rem;
	display: inline-block;
}

.admin-content,
.student-content {
	margin-left: 250px;
	min-height: 100vh;
	min-width: 0;
}
.admin-topbar,
.student-topbar {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

/* Off-canvas sidebar backdrop (tablet & mobile) */
.sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .5);
	z-index: 1015;
}
.sidebar-backdrop.show {
	display: block;
}

@media (max-width: 991.98px) {
	.admin-sidebar,
	.student-sidebar {
		/* translateX is relative to the sidebar's own (rendered) width, so
		   this stays fully off-canvas even where the phone breakpoint below
		   changes that width - a fixed pixel margin would not track it. */
		transform: translateX(-100%);
	}
	.admin-sidebar.show,
	.student-sidebar.show {
		transform: translateX(0);
		box-shadow: 0 0 2rem rgba(0,0,0,.25);
	}
	.admin-content,
	.student-content {
		margin-left: 0;
	}
}

/* Phone-sized screens: cap the sidebar so it never spans the full viewport */
@media (max-width: 575.98px) {
	.admin-sidebar,
	.student-sidebar {
		width: 82vw;
		max-width: 280px;
	}
	.admin-topbar,
	.student-topbar {
		padding-left: .75rem !important;
		padding-right: .75rem !important;
	}
}

@media (min-width: 992px) {
	.sidebar-backdrop {
		display: none !important;
	}
}

.stat-card {
	border: none;
	border-radius: .75rem;
	color: #fff;
}
.stat-card .stat-icon {
	font-size: 2.25rem;
	opacity: .85;
}
.bg-grad-1 { background: linear-gradient(135deg,#4f46e5,#6366f1); }
.bg-grad-2 { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }
.bg-grad-3 { background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.bg-grad-4 { background: linear-gradient(135deg,#10b981,#34d399); }

/* Leaderboard modal (student dashboard) */
.leaderboard-list {
	max-height: 340px;
	overflow-y: auto;
}
.leaderboard-row {
	border-bottom: 1px solid #f1f3f8;
}
.leaderboard-row:last-child {
	border-bottom: none;
}
.leaderboard-row-me {
	background: var(--sxs-primary-subtle, rgba(79,70,229,.08));
	border-radius: .5rem;
	padding-left: .5rem;
	padding-right: .5rem;
}
.leaderboard-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	font-weight: 700;
	color: var(--sxs-primary);
}

/* ---------- Student layout ---------- */
.student-navbar {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.test-card {
	border-radius: .75rem;
	transition: box-shadow .2s ease, transform .2s ease;
	border: 1px solid #e5e7eb;
}
.test-card:hover {
	box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08);
	transform: translateY(-3px);
}

.pagination {
	flex-wrap: wrap;
	row-gap: .5rem;
}
.enrollment-card {
	border-radius: .75rem;
	border: 1px solid #e5e7eb;
}

/* ---------- Test attempt ---------- */
.question-nav-btn {
	width: 42px;
	height: 42px;
	border-radius: .5rem;
	font-weight: 600;
}
.question-nav-btn.answered {
	background-color: #10b981;
	color: #fff;
	border-color: #10b981;
}
.question-nav-btn.current {
	outline: 3px solid #4f46e5;
	outline-offset: 1px;
}
.question-nav-btn.not-answered {
	background-color: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
}
#exam-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1.1rem;
}
@media (min-width: 576px) {
	#exam-timer {
		font-size: 1.5rem;
	}
}
#exam-timer.text-danger {
	animation: pulse-timer 1s infinite;
}
@keyframes pulse-timer {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}

.option-choice {
	border: 1px solid #e5e7eb;
	border-radius: .5rem;
	padding: .75rem 1rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.option-choice:hover {
	background-color: #f9fafb;
}
.option-choice.selected {
	background-color: #eef2ff;
	border-color: var(--sxs-primary);
}