/* E-Learning Portal — Frontend styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

#elp-app, #elp-app * { box-sizing: border-box; }
#elp-app img { max-width: 100%; height: auto; }
#elp-app {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--elp-text, #1f2430);
}
#elp-app a { text-decoration: none; }
#elp-app h1, #elp-app h2, #elp-app h3, #elp-app h4 { letter-spacing: -0.01em; }

/* ---------- Auth screens ---------- */
.elp-auth-shell {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 640px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(30,17,71,0.15);
}
.elp-auth-brand {
	background: linear-gradient(160deg, #1e1147 0%, #3b1e7a 55%, #7c3aed 100%);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 48px;
}
.elp-logo-circle {
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(255,255,255,0.15);
	display: flex; align-items: center; justify-content: center;
	font-size: 28px; margin-bottom: 20px;
}
.elp-auth-brand h1 { font-size: 28px; margin: 0 0 4px; }
.elp-version {
	display: inline-block; background: var(--elp-accent,#7c3aed); padding: 3px 10px;
	border-radius: 20px; font-size: 12px; margin-bottom: 16px;
}
.elp-tag { opacity: .85; margin-bottom: 20px; }
.elp-feature-list { list-style: none; padding: 0; margin: 0; }
.elp-feature-list li { padding: 6px 0; opacity: .9; }
.elp-feature-list li:before { content: "✓ "; color: #c9a24b; font-weight: bold; }

.elp-auth-form-wrap { padding: 56px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.elp-auth-form-wrap h2 { margin-top: 0; }
.elp-form label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.elp-form input {
	width: 100%; padding: 12px 14px; border: 1px solid #e1def0; border-radius: 8px; font-size: 14px;
}
.elp-form input:focus { outline: none; border-color: var(--elp-accent,#7c3aed); }
.elp-form-msg { color: #ef4444; font-size: 13px; min-height: 18px; margin-top: 8px; }
.elp-switch { margin-top: 20px; font-size: 14px; }
.elp-switch a { color: var(--elp-accent,#7c3aed); font-weight: 600; }

/* ---------- Login "radar" loading overlay ---------- */
.elp-login-overlay {
	display: none; position: fixed; inset: 0; background: rgba(15,8,40,0.72);
	z-index: 999; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
	color: #fff; text-align: center;
}
.elp-login-overlay.open { display: flex; }
.elp-login-overlay p { font-size: 14px; font-weight: 600; margin: 0; }
.elp-radar { position: relative; width: 84px; height: 84px; }
.elp-radar-ring {
	position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--elp-accent,#7c3aed);
	opacity: 0; animation: elp-radar-pulse 1.6s ease-out infinite;
}
.elp-radar-ring-2 { animation-delay: .8s; }
.elp-radar-dot {
	position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px;
	background: var(--elp-accent,#7c3aed); border-radius: 50%; box-shadow: 0 0 16px var(--elp-accent,#7c3aed);
}
@keyframes elp-radar-pulse {
	0% { transform: scale(0.3); opacity: .9; }
	100% { transform: scale(1.6); opacity: 0; }
}
.elp-login-overlay.success .elp-radar-dot { background: #16a34a; box-shadow: 0 0 16px #16a34a; }
.elp-login-overlay.success .elp-radar-ring { border-color: #16a34a; }

/* ---------- App shell ---------- */
.elp-shell {
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 64px auto;
	grid-template-areas: "sidebar topbar" "sidebar content";
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(20,10,50,0.12);
	background: var(--elp-content-bg, #f4f2fb);
}
.elp-topbar {
	grid-area: topbar;
	background: var(--elp-topbar-bg, #fff);
	color: var(--elp-topbar-text, #1f1147);
	display: flex; align-items: center; gap: 20px;
	padding: 0 24px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	position: sticky; top: 0; z-index: 30;
	backdrop-filter: saturate(180%) blur(8px);
	box-shadow: 0 2px 14px rgba(20,10,50,0.05);
}
.elp-topbar-title { font-weight: 700; font-size: 18px; }
.elp-topbar-search { flex: 1; }
.elp-topbar-search input {
	width: 100%; max-width: 320px; padding: 9px 14px; border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.03);
}
.elp-topbar-right { display: flex; align-items: center; gap: 16px; }

/* Hamburger (mobile only) */
.elp-hamburger-btn {
	display: none; align-items: center; gap: 6px; background: none; border: none;
	cursor: pointer; color: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px;
}
.elp-hamburger-btn .dashicons { font-size: 22px; width: 22px; height: 22px; }

/* User chip + dropdown (logout lives here) */
.elp-user-chip { position: relative; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.elp-user-chip img { border-radius: 50%; }
.elp-caret { font-size: 10px; opacity: .6; }
.elp-user-dropdown {
	display: none; position: absolute; top: 100%; right: 0; margin-top: 10px;
	background: #fff; color: #1f2430; border-radius: 10px; box-shadow: 0 10px 30px rgba(20,10,50,0.18);
	min-width: 160px; overflow: hidden; z-index: 40;
}
.elp-user-dropdown.open { display: block; }
.elp-user-dropdown a { display: block; padding: 11px 16px; font-size: 13px; font-weight: 500; color: #1f2430; }
.elp-user-dropdown a:hover { background: var(--elp-content-bg,#f4f2fb); }
.elp-user-dropdown a#elp-logout { color: #ef4444; border-top: 1px solid #eee; }

.elp-sidebar-overlay { display: none; }

/* ---------- Notifications bell + dropdown ---------- */
.elp-notif-wrap { position: relative; }
.elp-bell-btn { position: relative; background: none; border: none; cursor: pointer; font-size: 18px; padding: 6px; color: inherit; }
.elp-notif-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 2px solid var(--elp-topbar-bg,#fff); }
.elp-notif-dropdown {
	display: none; position: absolute; top: 100%; right: 0; margin-top: 10px;
	background: #fff; color: #1f2430; border-radius: 12px; box-shadow: 0 10px 30px rgba(20,10,50,0.18);
	width: 340px; max-width: 90vw; max-height: 420px; overflow: hidden; z-index: 40;
}
.elp-notif-dropdown.open { display: flex; flex-direction: column; }
.elp-notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #eee; }
.elp-notif-head strong { font-size: 14px; }
.elp-notif-head button { background: none; border: none; color: var(--elp-accent,#7c3aed); font-size: 12px; font-weight: 600; cursor: pointer; }
.elp-notif-list { overflow-y: auto; }
.elp-notif-empty { padding: 24px 16px; text-align: center; font-size: 13px; opacity: .6; }
.elp-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f3f1fa; }
.elp-notif-item.unread { background: rgba(124,58,237,0.04); }
.elp-notif-icon { font-size: 16px; }
.elp-notif-text { flex: 1; min-width: 0; }
.elp-notif-text p { margin: 0 0 4px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
.elp-notif-text span { font-size: 11px; opacity: .55; }
.elp-notif-mark-read {
	flex-shrink: 0; background: var(--elp-accent,#7c3aed); color: #fff; border: none; width: 22px; height: 22px;
	border-radius: 50%; font-size: 11px; cursor: pointer; line-height: 1;
}

.elp-sidebar {
	grid-area: sidebar;
	background: var(--elp-sidebar-bg, #1e1147);
	color: var(--elp-sidebar-text, #e9e4fb);
	padding: 24px 0;
	position: sticky; top: 0; align-self: start;
	height: 100vh; overflow-y: auto;
}
.elp-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 28px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 14px; }
.elp-sidebar-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.elp-sidebar-title { font-weight: 700; font-size: 15px; color: var(--elp-sidebar-text, #e9e4fb); }
.elp-sidebar-menu { list-style: none; margin: 0; padding: 0; }
.elp-sidebar-menu li a, .elp-sidebar-menu li #elp-logout-side {
	display: block; padding: 13px 28px; color: var(--elp-sidebar-text, #e9e4fb);
	font-size: 14px; font-weight: 500; opacity: .85; border-left: 3px solid transparent;
	transition: all .15s ease;
}
.elp-sidebar-menu li a:hover { opacity: 1; background: rgba(255,255,255,0.05); }
.elp-sidebar-menu li.active a {
	opacity: 1; background: rgba(255,255,255,0.1);
	border-left-color: var(--elp-sidebar-active, #7c3aed); font-weight: 700;
	box-shadow: inset 0 0 20px rgba(124,58,237,0.15);
}
.elp-sidebar-menu li:last-child { margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }

.elp-content { grid-area: content; padding: 28px 32px; }
.elp-h2 { margin: 0 0 20px; font-size: 22px; }

/* ---------- Dashboard stats ---------- */
.elp-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.elp-stat-card {
	background: #fff; border-radius: 12px; padding: 20px; text-align: left;
	box-shadow: 0 2px 10px rgba(20,10,50,0.05); display: flex; flex-direction: column; gap: 4px;
}
.elp-stat-num { font-size: 26px; font-weight: 800; color: var(--elp-accent,#7c3aed); }
.elp-stat-label { font-size: 13px; opacity: .65; }

.elp-section-head { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 14px; }
.elp-section-head h3 { margin: 0; font-size: 16px; }
.elp-section-head a { color: var(--elp-accent,#7c3aed); font-size: 13px; font-weight: 600; }

/* ---------- Course cards ---------- */
.elp-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.elp-course-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(20,10,50,0.06); }
.elp-clickable-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.elp-clickable-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,10,50,0.12); }
.elp-course-thumb { height: 120px; background: linear-gradient(135deg,#7c3aed,#2563eb); }
.elp-thumb-fallback { width: 100%; height: 100%; }
.elp-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.elp-course-body { padding: 14px; }
.elp-course-body h4 { margin: 0 0 8px; font-size: 15px; }
.elp-course-excerpt { font-size: 13px; opacity: .7; margin: 0 0 10px; }
.elp-course-foot { display: flex; justify-content: space-between; align-items: center; }
.elp-price { font-weight: 700; color: var(--elp-accent,#7c3aed); }

.elp-progress-bar { background: #eee; border-radius: 20px; height: 6px; overflow: hidden; margin: 8px 0 4px; }
.elp-progress-bar div { background: var(--elp-accent,#7c3aed); height: 100%; }
.elp-progress-label { font-size: 12px; opacity: .6; }

.elp-btn {
	display: inline-block; background: linear-gradient(135deg, var(--elp-button,#7c3aed), var(--elp-accent-2,#2563eb));
	color: #fff; border: none;
	padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
	box-shadow: 0 4px 14px rgba(124,58,237,0.25);
	transition: transform .15s ease, box-shadow .15s ease;
}
.elp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,0.32); }
.elp-btn-sm { padding: 7px 12px; font-size: 12px; }
.elp-btn-xs { padding: 5px 10px; font-size: 11px; margin-left: 8px; }
.elp-btn-block { display: block; text-align: center; margin-top: 10px; }
.elp-btn-outline { background: transparent; border: 1px solid var(--elp-accent,#7c3aed); color: var(--elp-accent,#7c3aed); }
.elp-badge-enrolled { background: #dcfce7; color: #16a34a; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }

.elp-empty { opacity: .6; font-size: 14px; }

/* ---------- Course details / lessons ---------- */
.elp-course-detail-head { display: flex; justify-content: space-between; align-items: center; }
.elp-video-wrap { position: relative; padding-top: 56.25%; background: #0b0b12; border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.elp-video-wrap iframe, .elp-video-wrap video { position: absolute; top:0; left:0; width: 100%; height: 100%; border: 0; }

/* Balanced typography for admin-formatted lesson/course content (headings, paragraphs, lists, quotes, links) */
.elp-lesson-body { font-size: 15px; line-height: 1.7; color: var(--elp-text,#1f2430); }
.elp-lesson-body p { margin: 0 0 14px; }
.elp-lesson-body h1, .elp-lesson-body h2, .elp-lesson-body h3, .elp-lesson-body h4 { line-height: 1.35; margin: 22px 0 12px; font-weight: 700; }
.elp-lesson-body h1 { font-size: 24px; } .elp-lesson-body h2 { font-size: 21px; } .elp-lesson-body h3 { font-size: 18px; } .elp-lesson-body h4 { font-size: 16px; } .elp-lesson-body h5 { font-size: 15px; } .elp-lesson-body h6 { font-size: 14px; }
.elp-lesson-body ul, .elp-lesson-body ol { margin: 0 0 14px; padding-left: 22px; }
.elp-lesson-body li { margin-bottom: 6px; }
.elp-lesson-body a { color: var(--elp-accent,#7c3aed); text-decoration: underline; }
.elp-lesson-body strong, .elp-lesson-body b { font-weight: 700; }
.elp-lesson-body em, .elp-lesson-body i { font-style: italic; }
.elp-lesson-body u { text-decoration: underline; }
.elp-lesson-body blockquote { margin: 14px 0; padding: 10px 18px; border-left: 3px solid var(--elp-accent,#7c3aed); background: var(--elp-content-bg,#f4f2fb); border-radius: 0 8px 8px 0; }
.elp-lesson-body img { border-radius: 8px; margin: 10px 0; }
.elp-lesson-body table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.elp-lesson-body table td, .elp-lesson-body table th { border: 1px solid #e6e2f5; padding: 8px; }

/* ---------- Course wizard (Description -> ToC -> Lessons -> Test, Next/Previous) ---------- */
.elp-wizard { background: #fff; border-radius: 12px; overflow: hidden; }
.elp-wizard-body { padding: 24px; min-height: 220px; }
.elp-wizard-body .elp-lesson-content h3 { margin-top: 0; font-weight: 700; }
.elp-wizard-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid #eee; background: #fafafd; }
.elp-wizard-step-label { font-size: 12px; opacity: .6; font-weight: 600; }
.elp-toc-list { list-style: none; margin: 0; padding: 0; }
.elp-toc-list li { padding: 10px 0; border-bottom: 1px dashed #eee; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.elp-toc-exam-tag { background: var(--elp-accent,#7c3aed); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.elp-check { color: #16a34a; }

/* ---------- Exam player ---------- */
.elp-exam-intro { background: #fff; padding: 40px; border-radius: 12px; text-align: center; }
.elp-exam-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; padding: 16px 20px; border-radius: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.elp-proctor-badge { background: #fef3c7; color: #b45309; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.elp-network-banner {
	display: none; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 10px 16px;
	border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; text-align: center;
}
.elp-network-banner.show { display: block; }
.elp-exam-timer { font-weight: 700; color: var(--elp-accent,#7c3aed); font-size: 16px; }
.elp-exam-body { display: grid; grid-template-columns: 1fr 260px; gap: 20px; }
.elp-question-card { background: #fff; border-radius: 12px; padding: 24px; }
.elp-question-card h4 { margin-top: 0; }
.elp-option { display: block; padding: 12px 14px; border: 1px solid #e6e2f5; border-radius: 8px; margin-bottom: 10px; cursor: pointer; }
.elp-option.selected { border-color: var(--elp-accent,#7c3aed); background: rgba(124,58,237,0.06); }
.elp-typed-answer-wrap { margin-top: 6px; }
.elp-typed-answer-input {
	width: 100%; padding: 12px 14px; border: 1px solid #e6e2f5; border-radius: 8px; font-size: 14px;
	font-family: inherit; resize: vertical;
}
.elp-typed-answer-input:focus { outline: none; border-color: var(--elp-accent,#7c3aed); }
.elp-nav-grid { background: #fff; border-radius: 12px; padding: 16px; height: fit-content; }
.elp-nav-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.elp-nav-boxes span { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 6px; background: #f1f0f7; font-size: 12px; cursor: pointer; }
.elp-nav-boxes span.answered { background: var(--elp-accent,#7c3aed); color: #fff; }
.elp-nav-boxes span.current { outline: 2px solid var(--elp-accent-2,#2563eb); }
.elp-exam-footer { display: flex; justify-content: space-between; margin-top: 20px; }

.elp-result-ring { text-align: center; padding: 40px; background: #fff; border-radius: 12px; }
.elp-result-percent { font-size: 48px; font-weight: 800; color: var(--elp-accent,#7c3aed); }
.elp-result-grade { font-size: 18px; font-weight: 700; margin-top: 6px; }

/* ---------- Certificates ---------- */
.elp-cert-list { display: flex; flex-direction: column; gap: 12px; }
.elp-cert-row { background: #fff; border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; }
.elp-cert-icon { font-size: 24px; }
.elp-cert-info { flex: 1; }
.elp-cert-info h4 { margin: 0 0 4px; font-size: 14px; }
.elp-cert-info span { font-size: 12px; opacity: .6; }

.elp-profile-card { background: #fff; border-radius: 12px; padding: 24px; max-width: 400px; }
.elp-profile-card img { border-radius: 50%; margin-bottom: 16px; }

/* ---------- Profile (redesigned) ---------- */
.elp-profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.elp-profile-pic-card { max-width: none; text-align: center; }
.elp-avatar-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.elp-avatar-wrap img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--elp-accent,#7c3aed); }
.elp-avatar-upload-btn {
	position: absolute; bottom: 0; right: 0; background: var(--elp-accent,#7c3aed); color: #fff;
	width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.elp-muted { opacity: .6; font-size: 13px; }
.elp-upload-progress { font-size: 12px; margin-top: 6px; min-height: 16px; }
.elp-form-plain input, .elp-form-plain select, .elp-form-plain textarea {
	width: 100%; padding: 10px 12px; border: 1px solid #e1def0; border-radius: 8px; font-size: 14px; margin-bottom: 4px;
}
.elp-form-plain label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.elp-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.elp-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.elp-tutor-card { grid-column: 1 / -1; }

.elp-dashboard-extras { margin-top: 24px; display: grid; gap: 16px; }

/* ---------- Live classes ---------- */
.elp-live-class-card {
	background: #fff; border-radius: 12px; padding: 18px 20px; display: flex; justify-content: space-between;
	align-items: center; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(20,10,50,0.06); gap: 16px; flex-wrap: wrap;
}
.elp-live-class-info h4 { margin: 0 0 4px; }
.elp-live-class-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Test Scores ---------- */
.elp-scores-table-wrap { background: #fff; border-radius: 12px; padding: 6px; overflow-x: auto; }
.elp-scores-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.elp-scores-table th { text-align: left; padding: 12px 14px; border-bottom: 2px solid #f1f0f7; font-size: 12px; opacity: .6; }
.elp-scores-table td { padding: 12px 14px; border-bottom: 1px solid #f6f5fb; }
.elp-grade-pill { background: rgba(124,58,237,0.1); color: var(--elp-accent,#7c3aed); padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }

/* ---------- Certificate view ---------- */
.elp-cert-view-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.elp-cert-frame { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(20,10,50,0.1); }
.elp-cert-frame svg { width: 100%; height: auto; display: block; border-radius: 6px; }

/* ---------- Responsive ---------- */
#elp-app { max-width: 100%; overflow-x: hidden; }
.elp-shell { max-width: 100%; }

@media (max-width: 900px) {
	body { overflow-x: hidden; }
	.elp-shell {
		grid-template-columns: 1fr;
		grid-template-rows: 60px 1fr;
		grid-template-areas: "topbar" "content";
		border-radius: 0;
	}
	.elp-hamburger-btn { display: flex; }
	.elp-topbar { padding: 0 14px; gap: 10px; }
	.elp-topbar-title { display: none; }
	.elp-topbar-right { margin-left: auto; gap: 14px; }
	.elp-notif-dropdown {
		position: fixed; top: 60px; left: 50%; right: auto; margin-top: 0;
		transform: translateX(-50%); width: calc(100vw - 32px); max-width: 380px;
	}
	.elp-user-dropdown { position: fixed; top: 60px; right: 16px; }

	/* Sidebar becomes an off-canvas drawer, opened via the hamburger */
	.elp-sidebar {
		grid-area: unset;
		position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
		transform: translateX(-100%);
		transition: transform .25s ease;
		z-index: 50; padding: 0; overflow-y: auto;
	}
	.elp-sidebar.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,.25); }
	.elp-sidebar-menu { display: block; }
	.elp-sidebar-menu li a { padding: 13px 24px; border-left: 3px solid transparent; border-bottom: none; white-space: normal; }
	.elp-sidebar-menu li.active a { border-left-color: var(--elp-sidebar-active,#7c3aed); border-bottom: none; }

	.elp-sidebar-overlay {
		display: none; position: fixed; inset: 0; background: rgba(10,5,30,0.45); z-index: 45;
	}
	.elp-sidebar-overlay.open { display: block; }

	.elp-content { padding: 16px; max-width: 100vw; overflow-x: hidden; }
	.elp-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.elp-stat-card { padding: 14px; }
	.elp-stat-num { font-size: 20px; }
	.elp-course-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
	.elp-two-col, .elp-exam-body { grid-template-columns: 1fr; }
	.elp-profile-grid, .elp-form-row-2 { grid-template-columns: 1fr; }
	.elp-sidebar { position: fixed; height: 100%; }
	.elp-auth-shell { grid-template-columns: 1fr; }
	.elp-auth-brand { display: none; }
	.elp-auth-form-wrap { padding: 30px 20px; }
	.elp-topbar-search { display: none; }
	.elp-nav-boxes { grid-template-columns: repeat(6, 1fr); }
	.elp-user-chip span:not(.elp-caret) { display: none; }
	table.elp-table, .widefat.elp-table { display: block; overflow-x: auto; max-width: 100%; }
	.elp-scores-table { min-width: 560px; }
}

@media (max-width: 480px) {
	.elp-stat-grid { grid-template-columns: 1fr 1fr; }
	.elp-course-grid { grid-template-columns: 1fr 1fr; }
	.elp-h2 { font-size: 18px; }
}

/* Balanced, smaller headings on phones across the whole app (dashboard, lesson
   content, wizard steps, auth screens) so admin-formatted H1/H2 etc. never
   overwhelm a small screen. */
@media (max-width: 600px) {
	.elp-h2 { font-size: 17px; }
	.elp-auth-brand h1 { font-size: 20px; }
	.elp-section-head h3 { font-size: 14px; }
	.elp-lesson-body h1 { font-size: 19px; }
	.elp-lesson-body h2 { font-size: 17px; }
	.elp-lesson-body h3 { font-size: 15px; }
	.elp-lesson-body h4 { font-size: 14px; }
	.elp-wizard-body .elp-lesson-content h3 { font-size: 16px; }
	.elp-question-card h4 { font-size: 14px; }
	.elp-course-body h4 { font-size: 13px; }
	.elp-result-percent { font-size: 34px; }
}