/* ============================================================================
   LearnPress page chrome — Nexus dark overrides
   Loaded only on LearnPress views (after deep-space-lab.css). Targets the
   single-course / profile / checkout *template* surfaces that LearnPress (and
   its block templates) render with light backgrounds, which would otherwise
   hide our light text. The lesson body itself (#grit-lesson-wrapper) styles
   itself and wins via higher specificity — these rules don't touch it.
   ========================================================================== */

/* ── Light container surfaces → dark ──────────────────────────────────────── */
.single-lp_course .wp-block-group.has-background,
.learnpress-page  .wp-block-group.has-background {
	background-color: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
.course-section-header {
	background-color: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
}
.content-widget-social-share,
.wp-block-learnpress-course-image {
	background-color: var(--vr-surface, #0F172A) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
}
/* Dim LearnPress's light "no image" placeholder so it blends into the dark card
   instead of showing as a bright rectangle. */
.wp-block-learnpress-course-image img[src*="no-image"],
.course-image img[src*="no-image"],
img[src*="learnpress/assets/images/no-image"] {
	opacity: 0.12 !important;
	filter: grayscale(1) !important;
}

/* No-class inline light backgrounds inside the course/profile content
   (overview & description cards). Match background declarations only. */
.single-lp_course [style*="background-color: #f8fafc"],
.single-lp_course [style*="background-color:#f8fafc"],
.single-lp_course [style*="background: #f8fafc"],
.single-lp_course [style*="background-color: #ffffff"],
.single-lp_course [style*="background-color:#ffffff"],
.single-lp_course [style*="background: #ffffff"],
.single-lp_course [style*="background-color: #fff;"],
.single-lp_course [style*="background-color:#fff;"],
.single-lp_course [style*="background: #fff;"],
.single-lp_course [style*="background:#fff;"],
.single-lp_course [style*="background-color: #f1f2f8"],
.single-lp_course [style*="background-color:#f1f2f8"],
.single-lp_course [style*="background-color: #f3f4f6"],
.single-lp_course [style*="background:#f3f4f6"] {
	background-color: var(--vr-surface, #0F172A) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}

/* ── Readable text across the course/profile chrome ───────────────────────── */
.single-lp_course :where(h1, h2, h3, h4, h5, h6) { color: var(--vr-contrast, #F8FAFC) !important; }
.single-lp_course :where(p, li, span, dd, dt, strong, em, label, td, figcaption) {
	color: var(--vr-body, #CBD5E1) !important;
}
.single-lp_course a:not(.lp-button):not(.button):not(.wp-block-button__link):not([class*="button"]) {
	color: var(--vr-cyan, #00F2FF) !important;
}

/* ── Curriculum list ──────────────────────────────────────────────────────── */
.course-curriculum .course-item,
.lp-course-curriculum .course-item {
	background-color: transparent !important;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.10)) !important;
}
.course-curriculum .course-item:hover { background-color: rgba(0,242,255,0.06) !important; }
.course-curriculum .course-item a,
.course-item .course-item__title,
.course-item .item-name { color: var(--vr-body, #CBD5E1) !important; }
.course-curriculum .course-item.has-status.completed .course-item__title { color: var(--vr-emerald, #34D399) !important; }

/* Section meta / counts */
.course-curriculum .section-desc,
.course-curriculum .section-meta,
.course-item .course-item-meta { color: var(--vr-muted, #94A3B8) !important; }

/* ── Enroll / meta sidebar icons → cyan (were LP default gold) ────────────── */
.course-summary-sidebar i,
.lp-course-buttons i,
.course-meta i,
.wp-block-learnpress-course-info i { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Profile page ─────────────────────────────────────────────────────────── */
body.learnpress-profile,
.lp-profile-content,
#profile-content,
.lp-profile-nav {
	background-color: transparent !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li a { color: var(--vr-body, #CBD5E1) !important; }
body.learnpress-profile .lp-profile-nav-tabs li.active a,
body.learnpress-profile .lp-profile-nav-tabs li a:hover { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Lesson popup layout fix (scroll + header overlap + footer column) ───────
   The course-item popup left the page locked (body overflow hidden) with no
   working scroll container, a fixed header overlapping the title, and the
   prev/next footer laid out as a tall flex column beside the content (which
   collapsed the content when the sidebar opened). Restore a sane model:
   window scrolls; header sticks in-flow; footer wraps to its own full row. */
body.viewing-course-item,
body.lp-body.viewing-course-item {
	overflow-y: auto !important;
	overflow-x: hidden !important;   /* kill the stray horizontal scrollbar */
	height: auto !important;
}
/* Immersive reader: hide the site header inside the lesson popup so the LP
   popup-header (close ✕ + sidebar toggle) is the only top bar. */
body.viewing-course-item > header,
body.viewing-course-item header.wp-block-template-part,
body.viewing-course-item .wp-site-blocks > header {
	display: none !important;
}
/* popup-course as BLOCK — the flex-row/flex-wrap layout kept collapsing the
   content and sidebar to width 0. Block flow + a FIXED left sidebar + a content
   margin is robust and gives a true side-by-side reader. */
#popup-course {
	display: block !important;
	position: relative !important;
	min-height: 0 !important;
}
/* Header: full-width sticky bar at the top. */
#popup-header {
	position: sticky !important;
	top: 32px !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	z-index: 50 !important;
}
body:not(.admin-bar) #popup-header { top: 0 !important; }
@media screen and (max-width: 782px) { #popup-header { top: 46px !important; } }
/* Sidebar: fixed left panel below the admin bar + sticky header. Slides out
   when collapsed (.vr-sb-collapsed set by lesson.js via #sidebar-toggle). */
#popup-sidebar {
	position: fixed !important;
	left: 0 !important;
	top: 106px !important;            /* admin bar (32) + header (~74) */
	bottom: 0 !important;
	width: 320px !important;
	max-width: 85vw !important;
	overflow-y: auto !important;
	z-index: 45 !important;
	background: var(--vr-base, #020617) !important;
	border-right: 1px solid var(--vr-border, rgba(0,242,255,0.14)) !important;
	transition: transform .3s ease !important;
}
body:not(.admin-bar) #popup-sidebar { top: 74px !important; }
/* Override LP's stuck `body.lp-sidebar-toggle__close` rules (which slide the
   sidebar off-screen + zero the content margin) — these (2,1,0) beat LP's (1,1,0). */
body #popup-course:not(.vr-sb-collapsed) #popup-sidebar { transform: none !important; }
body #popup-course.vr-sb-collapsed #popup-sidebar { transform: translateX(-100%) !important; }
#popup-content,
#popup-footer {
	width: auto !important;
	float: none !important;
	transition: margin-left .3s ease, max-width .3s ease !important;
	box-sizing: border-box !important;
}
/* Sidebar open: shift content right AND cap its width so nothing bleeds past the
   viewport edge. overflow-x:hidden clips any block that still calculates at 100vw. */
body #popup-course:not(.vr-sb-collapsed) #popup-content,
body #popup-course:not(.vr-sb-collapsed) #popup-footer {
	margin-left: 320px !important;
	max-width: calc(100vw - 320px) !important;
	overflow-x: hidden !important;
}
body #popup-course.vr-sb-collapsed #popup-content,
body #popup-course.vr-sb-collapsed #popup-footer {
	margin-left: 0 !important;
	max-width: 100vw !important;
	overflow-x: hidden !important;
}
#popup-content {
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
}
/* Ensure alignwide/alignfull blocks inside the lesson content area don't escape
   the clipped container — use 100% width rather than 100vw. */
#popup-content .alignfull,
#popup-content .alignwide,
#popup-content .wp-block-group.alignfull,
#popup-content .wp-block-group.alignwide {
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 782px) {
	#popup-sidebar { z-index: 55 !important; }
	#popup-content, #popup-footer {
		margin-left: 0 !important;
		max-width: 100vw !important;
	}
}
/* ── The sidebar toggle = an obvious left-edge handle ─────────────────────────
   The previous design (38×46 dark-surface tile, low-contrast border, faint ◀)
   was too easy to miss inside the popup header — students struggled to find
   where to open/close the curriculum. This version is the visual focal point:
   wider + taller, solid cyan brand background (high contrast on the dark
   header), dark icon, an Orbitron "MENU" caption, soft glow, and a 3-pulse
   attention animation only while the panel is COLLAPSED. */
#sidebar-toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 50px !important;
	height: 60px !important;
	margin: 0 !important;
	cursor: pointer !important;
	background: var(--vr-cyan, #00F2FF) !important;
	border: none !important;
	border-radius: 0 12px 12px 0 !important;
	box-shadow: 0 4px 14px rgba(0,242,255,0.35), 0 0 0 1px rgba(0,242,255,0.5) inset !important;
	position: relative !important;
	z-index: 60 !important;
	color: var(--vr-void, #020617) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* Icon: chevron ◀ when sidebar is OPEN (= "collapse" affordance) */
#sidebar-toggle::before {
	content: "\25C0";
	position: absolute; left: 0; right: 0; top: 9px;
	text-align: center;
	color: var(--vr-void, #020617) !important;
	font-size: 1.35rem !important;
	line-height: 1 !important;
	font-weight: 900 !important;
}
/* When sidebar is COLLAPSED switch to a hamburger ≡ (universal "open menu") */
#popup-course.vr-sb-collapsed #sidebar-toggle::before { content: "\2630" !important; font-size: 1.5rem !important; }
/* "MENU" caption beneath the icon — Orbitron for brand fit */
#sidebar-toggle::after {
	content: "MENU";
	position: absolute; left: 0; right: 0; bottom: 7px;
	text-align: center;
	color: var(--vr-void, #020617) !important;
	font-family: 'Orbitron', system-ui, sans-serif !important;
	font-size: 0.6rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
}
#sidebar-toggle:hover {
	background: #66F5FF !important;
	transform: translateX(2px) !important;
	box-shadow: 0 6px 20px rgba(0,242,255,0.55), 0 0 0 1px rgba(0,242,255,0.6) inset !important;
}
#sidebar-toggle:focus-visible {
	outline: 3px solid var(--vr-violet, #A78BFA) !important;
	outline-offset: 3px !important;
}
@keyframes sls-sb-toggle-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0,242,255,0.35), 0 0 0 1px rgba(0,242,255,0.5) inset; }
	50%      { box-shadow: 0 6px 26px rgba(0,242,255,0.75), 0 0 0 8px rgba(0,242,255,0.18), 0 0 0 1px rgba(0,242,255,0.6) inset; }
}
#popup-course.vr-sb-collapsed #sidebar-toggle {
	animation: sls-sb-toggle-pulse 2s ease-in-out 3 !important;
}

/* ── Curriculum item titles wrap inside the sidebar ──────────────────────────
   The fundamental issue: LP renders each lesson row as a flex/grid container
   (status icon + content column). Flex/grid items default to `min-width: auto`,
   which means they REFUSE to shrink below their intrinsic content width —
   so long titles overflow the sidebar's 320px regardless of any
   overflow-wrap/word-break setting (no shrink → no wrap point reached).
   The classic CSS fix is `min-width: 0` (+ `box-sizing: border-box`) on
   every descendant, which lets the content column shrink and then the
   overflow-wrap rules take effect.
   We also force overflow-x: hidden on the sidebar itself as a belt-and-
   braces guard against any single character that can't be broken. */
#popup-sidebar { overflow-x: hidden !important; }
#popup-sidebar,
#popup-sidebar *,
#popup-sidebar *::before,
#popup-sidebar *::after {
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	text-overflow: clip !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
	min-width: 0 !important;        /* allow flex/grid children to shrink */
	max-width: 100% !important;     /* cap every descendant to its parent */
	box-sizing: border-box !important;
}
/* LP's curriculum wraps its own container element (typically wider than our
   320px sidebar). Force every common container class to fill, no more. */
#popup-sidebar > *,
#popup-sidebar .course-curriculum,
#popup-sidebar .lp-course-curriculum,
#popup-sidebar #learn-press-course-curriculum,
#popup-sidebar [class*="curriculum"],
#popup-sidebar [class*="course-content"],
#popup-sidebar .section-content,
#popup-sidebar .section-content ul,
#popup-sidebar ul,
#popup-sidebar ol {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}
#popup-sidebar a,
#popup-sidebar li,
#popup-sidebar .course-item,
#popup-sidebar .course-item__link,
#popup-sidebar .course-item__title,
#popup-sidebar .course-item-title,
#popup-sidebar .course-item-name,
#popup-sidebar .item-name,
#popup-sidebar .section-title {
	overflow: visible !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	flex-shrink: 1 !important;      /* be explicitly shrinkable */
	flex-basis: auto !important;    /* start from content, then shrink */
}
/* If LP makes the link a flex row (status icon + title), top-align so a
   wrapped multi-line title doesn't push the icon off-center. */
#popup-sidebar .course-item__link {
	align-items: flex-start !important;
	padding: 0.65rem 0.9rem !important;
}
/* (Footer layout is handled in the block layout above: #popup-footer gets
   margin-left to align with content; full-width when the sidebar is collapsed.) */

/* ── Lesson interior: tame per-lesson embedded <style> ────────────────────────
   Some lessons bake their own design system into post content (Playfair Display
   / Montserrat headings, off-brand accents) with !important. The doubled-ID
   selector (2 IDs) outranks those embedded element-level !important rules, so we
   can enforce the Nexus display font universally without editing content. */
#grit-lesson-wrapper#grit-lesson-wrapper h1,
#grit-lesson-wrapper#grit-lesson-wrapper h2,
#grit-lesson-wrapper#grit-lesson-wrapper h3,
#grit-lesson-wrapper#grit-lesson-wrapper h4,
#grit-lesson-wrapper#grit-lesson-wrapper h5,
#grit-lesson-wrapper#grit-lesson-wrapper h6,
#grit-lesson-wrapper#grit-lesson-wrapper .serif-italic {
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-style: normal !important;
}

/* ── Tabs (Overview / Curriculum / Instructor / FAQs) ─────────────────────── */
.course-tabs .course-nav,
.learn-press-nav-tabs .course-nav { background-color: transparent !important; }
.course-tabs .course-nav__item,
.learn-press-nav-tabs li a { color: var(--vr-body, #CBD5E1) !important; }
.course-tabs .course-nav__item.active,
.course-tabs .course-nav__item:hover,
.learn-press-nav-tabs li.active a {
	color: var(--vr-cyan, #00F2FF) !important;
	border-bottom-color: var(--vr-cyan, #00F2FF) !important;
}

/* ── Quiz submit button — legible dark text on the cyan gradient (was white) ─ */
#grit-lesson-wrapper .quiz-submit {
	color: var(--vr-base, #020617) !important;
	text-shadow: none !important;
}

/* ── Try This / "Your Turn" — full self-contained interactive component ──────
   IMPORTANT: the generated markup (#sls-try-this) renders OUTSIDE
   #grit-lesson-wrapper (it lives in .content-item-summary). The previous rules
   were scoped to #grit-lesson-wrapper so they never matched — the choices fell
   back to a plain block list and the editor area collapsed to zero height
   (making the WYSIWYG look "not implemented"). The component's original styling
   lived in an embedded <style> that was stripped during the Nexus regen.
   Rebuilt here, scoped to .sls-try-this, in the Nexus palette
   (cyan #00F2FF / violet #A78BFA / emerald #34D399). The choice-selection and
   editor behaviour is wired by assets/js/lesson.js via document-level
   delegation, so it works regardless of where the block sits in the DOM. */
.sls-try-this { position: relative; margin: 3rem 0 0; font-family: 'Inter', sans-serif; }
.sls-try-this .sls-tt-angle-top {
	width: 100%; height: 56px; background: #0F172A;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.sls-try-this .sls-tt-body {
	background: #0F172A; position: relative; padding-bottom: 4rem;
	overflow: hidden; border-radius: 0 0 22px 22px;
}
.sls-try-this .sls-tt-dots {
	position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 28px 28px;
}
.sls-try-this .sls-tt-deco { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.sls-try-this .sls-tt-deco-1 { width: 500px; height: 400px; background: rgba(0,242,255,0.10); top: -120px; right: -120px; }
.sls-try-this .sls-tt-deco-2 { width: 350px; height: 350px; background: rgba(167,139,250,0.10); bottom: -60px; left: -80px; }
.sls-try-this .sls-tt-deco-3 { width: 260px; height: 260px; background: rgba(52,211,153,0.12); top: 40%; left: 28%; }
.sls-try-this .sls-tt-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 3.5rem 3rem 0; }

/* Header */
.sls-try-this .sls-tt-header { display: flex; align-items: flex-start; gap: 2.5rem; margin-bottom: 3rem; }
.sls-try-this .sls-tt-tag {
	flex-shrink: 0; writing-mode: vertical-rl; transform: rotate(180deg);
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
	color: rgba(255,255,255,0.35); border-right: 2px solid rgba(255,255,255,0.12);
	padding-right: 0.7rem; align-self: stretch;
}
.sls-try-this .sls-tt-titles { flex: 1; }
.sls-try-this .sls-tt-eyebrow {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
	color: #00F2FF; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.75rem;
}
.sls-try-this .sls-tt-eyebrow::after { content: ''; width: 56px; height: 2px; background: #00F2FF; border-radius: 2px; flex-shrink: 0; }
.sls-try-this .sls-tt-headline {
	font-family: 'Orbitron', sans-serif !important; font-weight: 800 !important;
	font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1;
	color: #ffffff !important; margin: 0 0 0.65rem !important;
}
.sls-try-this .sls-tt-headline em { color: #A78BFA; font-style: italic; }
.sls-try-this .sls-tt-subline { font-size: 1.05rem; font-style: italic; color: rgba(255,255,255,0.55); line-height: 1.55; max-width: 480px; margin: 0; }

/* Choice cards */
.sls-try-this .sls-tt-choices-label {
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(255,255,255,0.45); margin-bottom: 1.1rem;
}
.sls-try-this .sls-tt-choices {
	display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
	gap: 1rem !important; margin-bottom: 2.5rem !important;
}
.sls-try-this .sls-tt-choice {
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
	border-radius: 16px; padding: 1.6rem 1.4rem; cursor: pointer; position: relative; overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.sls-try-this .sls-tt-choice::after { content: ''; position: absolute; inset: 0; border-radius: 16px; opacity: 0; transition: opacity 0.3s; }
.sls-try-this .sls-tt-choice-1::after { background: radial-gradient(circle at 30% 30%, rgba(0,242,255,0.20), transparent 70%); }
.sls-try-this .sls-tt-choice-2::after { background: radial-gradient(circle at 30% 30%, rgba(167,139,250,0.20), transparent 70%); }
.sls-try-this .sls-tt-choice-3::after { background: radial-gradient(circle at 30% 30%, rgba(52,211,153,0.20), transparent 70%); }
.sls-try-this .sls-tt-choice:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.25); }
.sls-try-this .sls-tt-choice:hover::after,
.sls-try-this .sls-tt-choice.sls-tt-selected::after { opacity: 1; }
.sls-try-this .sls-tt-choice.sls-tt-selected { border-width: 2px; transform: translateY(-2px); }
.sls-try-this .sls-tt-choice-1.sls-tt-selected { border-color: rgba(0,242,255,0.6); }
.sls-try-this .sls-tt-choice-2.sls-tt-selected { border-color: rgba(167,139,250,0.6); }
.sls-try-this .sls-tt-choice-3.sls-tt-selected { border-color: rgba(52,211,153,0.6); }
.sls-try-this .sls-tt-choice-icon { font-size: 1.9rem; margin-bottom: 0.9rem; display: block; position: relative; z-index: 1; }
.sls-try-this .sls-tt-choice-type { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.45rem; position: relative; z-index: 1; }
.sls-try-this .sls-tt-choice-1 .sls-tt-choice-type { color: #00F2FF; }
.sls-try-this .sls-tt-choice-2 .sls-tt-choice-type { color: #A78BFA; }
.sls-try-this .sls-tt-choice-3 .sls-tt-choice-type { color: #34D399; }
.sls-try-this .sls-tt-choice h4 {
	font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important;
	font-size: 1.05rem; color: #ffffff !important; margin: 0 0 0.4rem !important;
	line-height: 1.25; position: relative; z-index: 1;
}
.sls-try-this .sls-tt-choice p { font-size: 0.85rem; color: rgba(255,255,255,0.55) !important; line-height: 1.55; margin: 0; position: relative; z-index: 1; }

/* Core prompt */
.sls-try-this .sls-tt-prompt {
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px; padding: 2rem 2.5rem; margin-bottom: 2.5rem; position: relative;
}
.sls-try-this .sls-tt-prompt::before {
	content: '\201C'; font-family: 'Orbitron', sans-serif; font-size: 7rem; color: rgba(255,255,255,0.05);
	position: absolute; top: -1.5rem; left: 1.5rem; line-height: 1; pointer-events: none;
}
.sls-try-this .sls-tt-prompt p { font-size: 1.15rem; color: rgba(255,255,255,0.88) !important; line-height: 1.7; position: relative; z-index: 1; margin: 0; }
.sls-try-this .sls-tt-prompt strong { color: #A78BFA; }

/* Editor section */
.sls-try-this .sls-tt-editor-section { margin-bottom: 2.5rem; }
.sls-try-this .sls-tt-editor-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0.75rem; }
.sls-try-this .sls-tt-writing-prompt { font-size: 0.92rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 1.25rem; font-style: italic; max-width: 700px; }

/* WYSIWYG editor */
.sls-try-this .sls-editor-wrap { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; transition: border-color 0.25s; }
.sls-try-this .sls-editor-wrap:focus-within { border-color: rgba(167,139,250,0.5); box-shadow: 0 0 0 3px rgba(167,139,250,0.10); }
.sls-try-this .sls-editor-toolbar { display: flex !important; align-items: center; gap: 0.25rem; padding: 0.6rem 0.85rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.sls-try-this .sls-ed-btn {
	background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.10) !important;
	color: rgba(255,255,255,0.7) !important; border-radius: 6px !important; padding: 0.3rem 0.65rem !important;
	cursor: pointer; font-size: 0.85rem; line-height: 1.4; font-family: inherit; min-width: 32px;
	text-align: center; box-shadow: none !important; text-shadow: none !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sls-try-this .sls-ed-btn:hover { background: rgba(255,255,255,0.14) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.25) !important; }
.sls-try-this .sls-ed-btn.sls-ed-active { background: rgba(167,139,250,0.18) !important; border-color: rgba(167,139,250,0.4) !important; color: #A78BFA !important; }
.sls-try-this .sls-ed-clear { color: rgba(255,120,120,0.75) !important; }
.sls-try-this .sls-ed-clear:hover { color: #ff6b6b !important; background: rgba(255,100,100,0.12) !important; border-color: rgba(255,100,100,0.3) !important; }
.sls-try-this .sls-ed-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.10); margin: 0 0.25rem; flex-shrink: 0; }
.sls-try-this .sls-editor-area {
	min-height: 200px !important; padding: 1.25rem 1.5rem !important; background: transparent !important;
	color: rgba(255,255,255,0.9) !important; font-size: 1rem; line-height: 1.7; outline: none;
	caret-color: #A78BFA; font-family: 'Inter', sans-serif;
}
.sls-try-this .sls-editor-area:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,0.3); pointer-events: none; font-style: italic; }
.sls-try-this .sls-editor-area ul, .sls-try-this .sls-editor-area ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.sls-try-this .sls-editor-area li { margin-bottom: 0.25rem; }
.sls-try-this .sls-editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.07); gap: 1rem; flex-wrap: wrap; }
.sls-try-this .sls-word-count { font-size: 0.7rem; font-family: 'JetBrains Mono','Courier New',monospace; color: rgba(255,255,255,0.4); transition: color 0.3s; letter-spacing: 0.05em; }
.sls-try-this .sls-word-count.sls-wc-good { color: #34D399; }
.sls-try-this .sls-word-count.sls-wc-great { color: #A78BFA; }
.sls-try-this .sls-word-min { font-size: 0.68rem; color: rgba(255,255,255,0.35); font-style: italic; }

/* Submit button (injected by lesson.js — the stored markup ships without one) */
.sls-try-this .sls-tt-submit,
.sls-try-this .sls-submit-btn {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;
	background: linear-gradient(90deg, #7000FF, #A78BFA) !important; color: #ffffff !important;
	font-family: 'Orbitron', sans-serif !important; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem;
	padding: 0.85rem 2rem !important; border-radius: 100px !important;
	border: none !important; cursor: pointer; text-decoration: none !important;
	box-shadow: 0 4px 18px rgba(167,139,250,0.3); text-shadow: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
}
.sls-try-this .sls-tt-submit:hover,
.sls-try-this .sls-submit-btn:hover {
	transform: translateY(-2px); color: #ffffff !important;
	box-shadow: 0 8px 26px rgba(167,139,250,0.5);
}
.sls-try-this .sls-tt-submit.sls-submitted,
.sls-try-this .sls-submit-btn.sls-submitted {
	background: linear-gradient(90deg, #059669, #34D399) !important; color: #042f2e !important;
	box-shadow: none; cursor: default; transform: none;
}

/* Bottom: reflection + open-ended badge */
.sls-try-this .sls-tt-bottom { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding-top: 0.5rem; }
.sls-try-this .sls-tt-reflect { display: flex; align-items: flex-start; gap: 1rem; }
.sls-try-this .sls-tt-reflect-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 0.2rem; }
.sls-try-this .sls-tt-reflect-text .sls-tt-reflect-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.45rem; }
.sls-try-this .sls-tt-reflect-text p { font-size: 0.95rem; font-style: italic; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
.sls-try-this .sls-tt-open-badge { flex-shrink: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 50px; padding: 0.55rem 1.3rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); white-space: nowrap; }

/* Responsive */
@media (max-width: 782px) {
	.sls-try-this .sls-tt-choices { grid-template-columns: 1fr !important; }
	.sls-try-this .sls-tt-header { flex-direction: column; gap: 1.25rem; }
	.sls-try-this .sls-tt-tag { writing-mode: horizontal-tb; transform: none; border-right: none; border-bottom: 2px solid rgba(255,255,255,0.12); padding: 0 0 0.5rem; }
	.sls-try-this .sls-tt-inner { padding: 2rem 1.25rem 0; }
	.sls-try-this .sls-tt-prompt { padding: 1.5rem 1.25rem; }
	.sls-try-this .sls-tt-bottom { grid-template-columns: 1fr; gap: 1rem; }
	.sls-try-this .sls-tt-open-badge { justify-self: start; }
}

/* ── End-of-lesson "Continue" CTA — prominent, clearly separated from the
   Try This block above. Like .sls-try-this, #sls-next-bar renders OUTSIDE
   #grit-lesson-wrapper (in .content-item-description), so these rules are
   scoped to .sls-next-bar directly. Generous top margin + padding + a divider
   give it breathing room so it no longer butts against Try This. ──────────── */
.sls-next-bar {
	margin: 5rem 0 2.5rem !important;
	padding: 3rem 1.5rem 0 !important;
	border-top: 1px solid rgba(0, 242, 255, 0.18) !important;
	display: flex !important;
	justify-content: center !important;
	background: transparent !important;
}
.sls-next-inner {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	max-width: 640px;
}
.sls-next-left { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.sls-next-headline {
	display: block !important;
	font-family: 'Orbitron', sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.sls-next-left p, .sls-next-sub {
	color: var(--vr-muted, #94A3B8);
	font-size: 0.95rem;
	margin: 0;
}
.sls-next-btn {
	display: inline-flex !important; align-items: center; gap: .6rem;
	background: linear-gradient(90deg, #7000FF, #00F2FF) !important;
	color: #020617 !important;
	font-family: 'Orbitron', sans-serif !important; font-weight: 800;
	text-transform: uppercase; letter-spacing: .05em; font-size: 1rem;
	padding: 1.1rem 2.75rem !important; border-radius: 100px !important;
	border: none !important; cursor: pointer; text-decoration: none !important;
	box-shadow: 0 6px 28px rgba(0, 242, 255, 0.30);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sls-next-btn:hover {
	transform: translateY(-3px); color: #020617 !important;
	box-shadow: 0 10px 38px rgba(0, 242, 255, 0.5);
}
@media (max-width: 640px) {
	.sls-next-inner { width: 100%; }
	.sls-next-btn { width: 100% !important; justify-content: center; }
}

/* ── Flashcard — Active Recall flip card ─────────────────────────────────────
   Front (cue) / back (answer) 3D flip. Click or keyboard toggles .sls-fc-flipped
   on .sls-flashcard; assets/js/lesson.js emits one `experienced` xAPI statement
   on the first reveal. Scoped to the class (not #grit-lesson-wrapper) so it works
   wherever LearnPress renders the lesson body. Nexus palette: cyan / violet. */
.sls-flashcard {
	display: block; perspective: 1400px; margin: 1.25rem 0;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	font-family: 'Inter', sans-serif;
}
.sls-flashcard .sls-fc-inner {
	position: relative; width: 100%; min-height: 220px;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.sls-flashcard.sls-fc-flipped .sls-fc-inner { transform: rotateY(180deg); }
.sls-flashcard .sls-fc-front,
.sls-flashcard .sls-fc-back {
	position: absolute; inset: 0;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	text-align: center; gap: 0.9rem;
	padding: 2.25rem 2rem; border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.sls-flashcard .sls-fc-front {
	background: linear-gradient(150deg, #0F172A, #0B1220);
	border-top: 3px solid #00F2FF;
}
.sls-flashcard .sls-fc-back {
	background: linear-gradient(150deg, #161033, #0E0A24);
	border-top: 3px solid #A78BFA;
	transform: rotateY(180deg);
}
.sls-flashcard .sls-fc-tag {
	font-size: 0.6rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
}
.sls-flashcard .sls-fc-front .sls-fc-tag { color: #00F2FF; }
.sls-flashcard .sls-fc-back  .sls-fc-tag { color: #A78BFA; }
.sls-flashcard .sls-fc-cue {
	font-family: 'Orbitron', sans-serif; font-weight: 700;
	font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.3;
	color: #ffffff !important; margin: 0 !important;
}
.sls-flashcard .sls-fc-answer {
	font-size: 1.02rem; line-height: 1.6;
	color: rgba(255, 255, 255, 0.82) !important; margin: 0 !important;
}
.sls-flashcard .sls-fc-hint {
	font-size: 0.72rem; letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.45);
}
.sls-flashcard:hover .sls-fc-front,
.sls-flashcard:hover .sls-fc-back { border-color: rgba(255, 255, 255, 0.22); }
.sls-flashcard:focus-visible { outline: 2px solid #00F2FF; outline-offset: 4px; border-radius: 22px; }
@media (prefers-reduced-motion: reduce) {
	.sls-flashcard .sls-fc-inner { transition: none; }
}

/* ── Lesson video player — HLS player injected above the opener ──────────────
   functions.php splices <div class="sls-lesson-video">[sls_stream]</div> just
   before .big-question. The mu-plugin ships inline styles (max-width:900px on
   the wrap, width:100% on the <video>), but in the lesson layout the video was
   only filling part of its box. We force a responsive, full-width 16:9 player
   capped to the lesson content column (820px) and centered. !important is
   required to beat the plugin's inline styles. */
#grit-lesson-wrapper .sls-lesson-video {
	width: 100%;
	max-width: 820px;
	margin: 0 auto 2.5rem;
}
#grit-lesson-wrapper .sls-lesson-video .sls-video-wrap {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
#grit-lesson-wrapper .sls-lesson-video .sls-video-wrap video {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	display: block !important;
	object-fit: contain;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 242, 255, 0.18);
}

/* ── Phase-1 interaction widgets (true/false, cloze, predict, confidence) ──────
   Wired by assets/js/lesson.js; ids stamped by the generator. Nexus palette. */

/* True/False — "Myth or Fact?" */
#grit-lesson-wrapper .sls-truefalse { background: #0B1322; border: 1px solid rgba(0,242,255,.18); border-radius: 18px; padding: 1.75rem 2rem; margin: 2.5rem 0; }
#grit-lesson-wrapper .sls-tf-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #00F2FF; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-tf-statement { font-size: 1.1rem; font-weight: 700; color: #f1f5f9 !important; margin: .25rem 0 1.25rem !important; line-height: 1.5; }
#grit-lesson-wrapper .sls-tf-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
#grit-lesson-wrapper .sls-tf-btn { background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12); color: #e2e8f0; padding: .85rem 1rem; border-radius: 12px; font-weight: 700; cursor: pointer; min-height: 44px; font-family: 'Inter', sans-serif; transition: background .15s, border-color .15s, transform .12s; }
#grit-lesson-wrapper .sls-tf-btn:hover:not(:disabled) { border-color: #00F2FF; transform: translateY(-2px); }
#grit-lesson-wrapper .sls-tf-btn:disabled { opacity: .65; cursor: default; }
#grit-lesson-wrapper .sls-tf-btn.sls-tf-correct { background: rgba(52,211,153,.18); border-color: #34D399; color: #A7F3D0; }
#grit-lesson-wrapper .sls-tf-btn.sls-tf-wrong { background: rgba(248,113,113,.15); border-color: #f87171; color: #fecaca; }
#grit-lesson-wrapper .sls-tf-result { display: none; margin-top: 1rem; font-weight: 700; color: #e2e8f0 !important; }
#grit-lesson-wrapper .sls-tf-explain { margin-top: .75rem; color: #cbd5e1 !important; font-size: .95rem; line-height: 1.6; border-left: 3px solid #00F2FF; padding-left: 1rem; }

/* Fill-in-the-blank (cloze) */
#grit-lesson-wrapper .sls-cloze { background: #0B1322; border: 1px solid rgba(167,139,250,.22); border-left: 4px solid #A78BFA; border-radius: 16px; padding: 1.6rem 2rem; margin: 2.5rem 0; }
#grit-lesson-wrapper .sls-cloze-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #A78BFA; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-cloze-text { font-size: 1.05rem; line-height: 2.2; color: #e2e8f0 !important; }
#grit-lesson-wrapper .sls-blank { background: rgba(255,255,255,.06); border: none; border-bottom: 2px solid #A78BFA; color: #fff; font-size: 1rem; padding: .2rem .5rem; margin: 0 .2rem; border-radius: 6px 6px 0 0; font-family: 'Inter', sans-serif; min-width: 8ch; }
#grit-lesson-wrapper .sls-blank:focus { outline: none; background: rgba(167,139,250,.15); }
#grit-lesson-wrapper .sls-blank.sls-blank-correct { border-bottom-color: #34D399; color: #A7F3D0; }
#grit-lesson-wrapper .sls-blank.sls-blank-wrong { border-bottom-color: #f87171; color: #fecaca; }
#grit-lesson-wrapper .sls-cloze-check { margin-top: 1.25rem; background: #A78BFA; color: #0B1322; border: none; padding: .7rem 1.75rem; border-radius: 100px; font-weight: 800; cursor: pointer; min-height: 44px; font-family: 'Inter', sans-serif; }
#grit-lesson-wrapper .sls-cloze-check:hover:not(:disabled) { background: #c4b5fd; }
#grit-lesson-wrapper .sls-cloze-result { display: none; margin-top: 1rem; font-weight: 700; color: #e2e8f0 !important; }

/* Predict & Reveal */
#grit-lesson-wrapper .sls-predict { background: linear-gradient(135deg,#0E1F36,#081628); border: 1px solid rgba(34,211,238,.25); border-radius: 18px; padding: 1.75rem 2rem; margin: 2.5rem 0; }
#grit-lesson-wrapper .sls-predict-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #22D3EE; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-predict-q { font-size: 1.1rem; font-weight: 700; color: #fff !important; margin: .25rem 0 1.25rem !important; line-height: 1.5; }
#grit-lesson-wrapper .sls-predict-options { display: flex; flex-direction: column; gap: .6rem; }
#grit-lesson-wrapper .sls-predict-opt { text-align: left; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12); color: #e2e8f0; padding: .85rem 1.1rem; border-radius: 12px; cursor: pointer; min-height: 44px; font-family: 'Inter', sans-serif; transition: background .15s, border-color .15s, transform .12s; }
#grit-lesson-wrapper .sls-predict-opt:hover:not(:disabled) { border-color: #22D3EE; transform: translateX(4px); }
#grit-lesson-wrapper .sls-predict-opt:disabled { opacity: .6; cursor: default; }
#grit-lesson-wrapper .sls-predict-opt.sls-predict-chosen { border-color: #22D3EE; background: rgba(34,211,238,.15); color: #a8edfa; opacity: 1; }
#grit-lesson-wrapper .sls-predict-reveal { margin-top: 1.1rem; color: #D4EEFF !important; font-size: .98rem; line-height: 1.6; border-left: 3px solid #22D3EE; padding-left: 1rem; }

/* Confidence check (1–5 self-rating) */
#grit-lesson-wrapper .sls-confidence { background: #0B1322; border: 1px solid rgba(52,211,153,.22); border-radius: 16px; padding: 1.6rem 2rem; margin: 2.5rem 0; text-align: center; }
#grit-lesson-wrapper .sls-conf-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #34D399; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-conf-q { font-size: 1.05rem; font-weight: 700; color: #f1f5f9 !important; margin: .25rem 0 1.1rem !important; line-height: 1.5; }
#grit-lesson-wrapper .sls-conf-scale { display: inline-flex; gap: .5rem; }
#grit-lesson-wrapper .sls-conf-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.15); color: #e2e8f0; font-weight: 800; font-size: 1.05rem; cursor: pointer; font-family: 'Orbitron', sans-serif; transition: background .15s, border-color .15s, transform .12s; }
#grit-lesson-wrapper .sls-conf-btn:hover:not(:disabled) { border-color: #34D399; transform: translateY(-2px); }
#grit-lesson-wrapper .sls-conf-btn:disabled { cursor: default; }
#grit-lesson-wrapper .sls-conf-btn.sls-conf-picked { background: #34D399; border-color: #34D399; color: #04231a; }
#grit-lesson-wrapper .sls-conf-labels { display: flex; justify-content: space-between; max-width: 280px; margin: .6rem auto 0; font-size: .72rem; color: #94a3b8; }
#grit-lesson-wrapper .sls-conf-ack { margin-top: .9rem; color: #A7F3D0 !important; font-weight: 700; font-size: .95rem; }


/* ════════════════════════════════════════════════════════════════════════
   LP PROFILE PAGE CHROME — full coverage of /lp-profile/ when logged in.
   The basic body.learnpress-profile / .lp-profile-content / .lp-profile-nav-tabs
   block earlier in this file sets the transparent dark canvas + light body
   text + cyan-active tab labels. The block below covers the header banner,
   avatar/cover edit buttons, sidebar columns, sub-nav, the LP message bar,
   the generic LP button, the My-Courses progress widgets, the loading
   skeleton, and the LP/LP-filters surfaces. Scoped to body.learnpress-profile so
   it cannot leak out of the profile page.
   ════════════════════════════════════════════════════════════════════════ */

/* Profile header banner (cover image area) */
body.learnpress-profile .wrapper-profile-header,
body.learnpress-profile .wrapper-profile-header.wrap-fullwidth {
	background: var(--vr-surface, #0F172A) !important;
	border-bottom: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
body.learnpress-profile .lp-user-cover-image_background { background: transparent !important; }

/* Edit-avatar + edit-cover buttons (cyan pills) */
body.learnpress-profile .lp-btn-to-edit-cover-image,
body.learnpress-profile .lp-btn-to-edit-avatar {
	background: var(--vr-cyan, #00F2FF) !important;
	color: var(--vr-base, #020617) !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	padding: 0.35rem 0.75rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
body.learnpress-profile .lp-btn-to-edit-cover-image:hover,
body.learnpress-profile .lp-btn-to-edit-avatar:hover {
	background: var(--vr-contrast, #F8FAFC) !important;
}

/* Profile main content area + grid */
body.learnpress-profile .lp-content-area,
body.learnpress-profile .lp-profile-content-area {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}

/* Sidebar columns */
body.learnpress-profile .lp-profile-left,
body.learnpress-profile .lp-profile-right,
body.learnpress-profile .user-avatar { background: transparent !important; }
body.learnpress-profile .lp-profile-username {
	color: var(--vr-contrast, #F8FAFC) !important;
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-weight: 800 !important;
}

/* Nav-tab list items (rows) — themed row dividers + active marker */
body.learnpress-profile .lp-profile-nav-tabs li {
	background: transparent !important;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	transition: background 0.18s ease, border-color 0.18s ease;
}
body.learnpress-profile .lp-profile-nav-tabs li:hover,
body.learnpress-profile .lp-profile-nav-tabs li.active {
	background: rgba(0,242,255,0.06) !important;
	border-left: 3px solid var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li a {
	display: block;
	padding: 0.55rem 0.85rem !important;
	text-decoration: none !important;
}
body.learnpress-profile .lp-profile-nav-tabs li [class^="lp-icon-"],
body.learnpress-profile .lp-profile-nav-tabs li [class*=" lp-icon-"] { color: inherit; }

/* Settings sub-nav (.profile-tab-sections — under .lp-profile-nav-tabs li.has-child) */
body.learnpress-profile .lp-profile-nav-tabs .profile-tab-sections {
	background: var(--vr-surface-2, #1E293B) !important;
	border-left: 3px solid var(--vr-cyan, #00F2FF) !important;
	border-radius: 0 6px 6px 0 !important;
	margin: 0 0 0 0.25rem !important;
}
body.learnpress-profile .lp-profile-nav-tabs .profile-tab-sections li {
	border-bottom: 0 !important;
	border-left: 0 !important;
}

/* Profile content article — themed card surface */
body.learnpress-profile #profile-content,
body.learnpress-profile .lp-profile-content {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 12px !important;
	padding: 1.5rem !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile #profile-content :where(h2, h3, h4) { color: var(--vr-contrast, #F8FAFC) !important; }

/* LP message bar (success/error above content) */
.learnpress .learn-press-message,
body.learnpress-profile .learn-press-message {
	background: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-left: 4px solid var(--vr-cyan, #00F2FF) !important;
	border-radius: 8px !important;
	padding: 0.85rem 1.1rem !important;
	margin: 0 0 1rem !important;
}
.learnpress .learn-press-message.success { border-left-color: var(--vr-emerald, #34D399) !important; }
.learnpress .learn-press-message.error,
.learnpress .learn-press-message.warning { border-left-color: #f87171 !important; }

/* Generic LP button (.lp-button) */
.learnpress .lp-button,
a.lp-button,
button.lp-button {
	background: var(--vr-cyan, #00F2FF) !important;
	color: var(--vr-base, #020617) !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	padding: 0.55rem 1.1rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	display: inline-block;
}
.learnpress .lp-button:hover,
a.lp-button:hover,
button.lp-button:hover { background: var(--vr-contrast, #F8FAFC) !important; }

/* LP tabs container (filters bar above the course/quiz/order lists in profile) */
body.learnpress-profile .learn-press-tabs,
body.learnpress-profile .learn-press-course-tab__filter__content {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile .learn-press-filters,
body.learnpress-profile .learn-press-course-tab-filters {
	background: var(--vr-surface-2, #1E293B) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 8px !important;
	padding: 0.6rem 0.75rem !important;
	margin-bottom: 0.75rem;
}

/* Per-course progress widget (My Courses tab) */
body.learnpress-profile .learn-press-profile-course__tab,
body.learnpress-profile .learn-press-profile-course__progress,
body.learnpress-profile .learn-press-profile-course__statistic {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 8px !important;
	color: var(--vr-body, #CBD5E1) !important;
	padding: 0.65rem 0.85rem !important;
}
body.learnpress-profile .lp-ux-progress-fill {
	background: linear-gradient(90deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399)) !important;
}

/* LP skeleton loader (when a tab is fetching) */
body.learnpress-profile .lp-skeleton-animation {
	background: linear-gradient(
		90deg,
		var(--vr-surface, #0F172A) 0%,
		var(--vr-surface-2, #1E293B) 50%,
		var(--vr-surface, #0F172A) 100%
	) !important;
	background-size: 200% 100% !important;
	border-radius: 6px !important;
}

/* Enrolled-students toolbar (instructor/admin view) */
.lp-enrolled-students-form,
.lp-enrolled-students-table-toolbar,
.lp-enrolled-students-table-toolbar__field,
.lp-enrolled-students-table-toolbar__input,
.lp-enrolled-search-input {
	background: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border-color: var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-radius: 6px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   PMPro page-chrome additions — supplements the .pmpro_card / .pmpro_btn /
   .pmpro_table rules in nexus.css with the section / list / heading
   classes that show up on /membership-account/ and friends.
   ════════════════════════════════════════════════════════════════════════ */

.pmpro_section,
.pmpro_section_content {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 10px !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 1rem !important;
}
.pmpro_section_title {
	color: var(--vr-cyan, #00F2FF) !important;
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	margin-bottom: 0.75rem !important;
}
.pmpro_heading-with-avatar {
	color: var(--vr-contrast, #F8FAFC) !important;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	padding-bottom: 0.75rem !important;
	margin-bottom: 1rem !important;
}
.pmpro_card_action_separator { background: var(--vr-border, rgba(0,242,255,0.12)) !important; }
.pmpro_card_actions a:not(.pmpro_btn):not([class*="pmpro_btn"]) {
	color: var(--vr-cyan, #00F2FF) !important;
}
.pmpro_list,
.pmpro_list-plain {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}
.pmpro_list_item {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.08));
}
.pmpro_list_item:last-child { border-bottom: 0; }
.pmpro_font-large,
.pmpro_font-x-large { color: var(--vr-contrast, #F8FAFC) !important; }


/* ════════════════════════════════════════════════════════════════════════
   LP PROFILE — body backdrop, block-theme transparency, watermark + cards
   Body class on /lp-profile/ is `learnpress-profile` (not `lp-user-profile`).
   The earlier rules now key on that. This block adds what was missing:
   1) Dark backdrop at body level so the block-theme white wrapper goes away
   2) Forces .entry-content / .wp-block-post-content to transparent on
      profile pages so the LP shortcode renders on the navy canvas
   3) Colors the giant "PROFILE" header watermark (::before) to faint cyan
   4) Sidebar nav: extra specificity to beat LP default orange/yellow active
   5) Course-statistic stat cards (cover both LP3 and LP4 class patterns)
   ════════════════════════════════════════════════════════════════════════ */

body.learnpress-profile {
	background: var(--vr-base, #020617) !important;
	color: var(--vr-body, #CBD5E1) !important;
}

/* TT5 block-theme wrappers — transparent so the body backdrop shows through */
body.learnpress-profile .entry-content,
body.learnpress-profile .wp-block-post-content,
body.learnpress-profile .wp-block-group,
body.learnpress-profile main.wp-block-group,
body.learnpress-profile .is-layout-constrained,
body.learnpress-profile article.post,
body.learnpress-profile article.page {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}

/* The huge faded "PROFILE" header watermark (LP renders it as ::before
   pseudo on .wrapper-profile-header). Default color is dark on dark and
   was invisible on UW + reading as "barely there" on vrschool. Re-color
   to a faint cyan glow that reads as decorative on the navy canvas. */
body.learnpress-profile .wrapper-profile-header::before,
body.learnpress-profile .wrapper-profile-header::after {
	color: rgba(0, 242, 255, 0.18) !important;
	-webkit-text-fill-color: rgba(0, 242, 255, 0.18) !important;
	text-shadow: 0 0 24px rgba(0, 242, 255, 0.25) !important;
}

/* Username on the cover — make sure it reads on the dark banner */
body.learnpress-profile .lp-profile-username,
body.learnpress-profile .lp-profile-username a {
	color: var(--vr-contrast, #F8FAFC) !important;
	text-shadow: 0 0 12px rgba(0, 242, 255, 0.35);
}

/* Sidebar nav: defeat LP default orange/yellow active background.
   Specificity is bumped via the body class + an extra .lp-profile-nav-tabs
   chain — beats LP's own `.lp-profile-nav-tabs li.active { background: ... }`
   without resorting to !important on every property. */
body.learnpress-profile .lp-profile-nav-tabs li,
body.learnpress-profile .lp-profile-nav-tabs li.courses,
body.learnpress-profile .lp-profile-nav-tabs li.my-courses,
body.learnpress-profile .lp-profile-nav-tabs li.quizzes,
body.learnpress-profile .lp-profile-nav-tabs li.orders,
body.learnpress-profile .lp-profile-nav-tabs li.settings,
body.learnpress-profile .lp-profile-nav-tabs li.enrolled-students {
	background: transparent !important;
	border-left: 3px solid transparent !important;
}
body.learnpress-profile .lp-profile-nav-tabs li.active,
body.learnpress-profile .lp-profile-nav-tabs li:hover {
	background: rgba(0, 242, 255, 0.08) !important;
	border-left-color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li > a {
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li.active > a,
body.learnpress-profile .lp-profile-nav-tabs li:hover > a {
	color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li > a i,
body.learnpress-profile .lp-profile-nav-tabs li > a [class^="lp-icon-"],
body.learnpress-profile .lp-profile-nav-tabs li > a [class*=" lp-icon-"] {
	color: inherit !important;
}

/* LP dashboard statistic stat cards — actual classes from the template:
   #dashboard-statistic > .dashboard-statistic__row > .statistic-box {
       .statistic-box__icon > span (round chip — per-icon pastel keeps its
                                    semantic color: green=passed, red=failed)
       .statistic-box__text > label + .statistic-box__text__number
   }
*/
body.learnpress-profile #dashboard-statistic { margin: 0 0 1.25rem; }
body.learnpress-profile .dashboard-statistic__row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 0.85rem !important;
}
body.learnpress-profile .dashboard-statistic__row .statistic-box {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 10px !important;
	padding: 1rem 1.1rem !important;
	color: var(--vr-body, #CBD5E1) !important;
	width: auto !important;
	transition: border-color 0.18s ease;
}
body.learnpress-profile .dashboard-statistic__row .statistic-box:hover {
	border-color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .statistic-box__text { color: var(--vr-body, #CBD5E1) !important; }
body.learnpress-profile .statistic-box__text label {
	color: var(--vr-muted, #94A3B8) !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}
body.learnpress-profile .statistic-box__text__number {
	color: var(--vr-contrast, #F8FAFC) !important;
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-weight: 800 !important;
	font-size: 1.7em !important;
}
/* Per-icon chip backgrounds — bump their alpha so they show on the dark
   card. Color tokens stay LP-semantic (green=passed, red=failed, etc.). */
body.learnpress-profile .statistic-box__icon span {
	background: rgba(0, 199, 190, 0.18) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-in_progress_course,
body.learnpress-profile .statistic-box__icon .lp-icon-student_in_progress {
	background: rgba(175, 82, 222, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-finished_courses,
body.learnpress-profile .statistic-box__icon .lp-icon-published_course {
	background: rgba(88, 86, 214, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-passed_courses,
body.learnpress-profile .statistic-box__icon .lp-icon-student_completed {
	background: rgba(52, 199, 89, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-failed_courses,
body.learnpress-profile .statistic-box__icon .lp-icon-pending_course {
	background: rgba(255, 59, 48, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-total_student {
	background: rgba(0, 122, 255, 0.22) !important;
}

/* LP filter-tab strip (All / In Progress / Finished / Passed / Failed)
   LP defaults to --lp-primary-color #ffb606 (gold). Remap to cyan inside
   profile context so the underline + active label sit in the Nexus palette. */
body.learnpress-profile {
	--lp-primary-color: var(--vr-cyan, #00F2FF);
	--lp-color-base: var(--vr-body, #CBD5E1);
	--lp-white-grey: var(--vr-surface, #0F172A);
	--lp-border-color: var(--vr-border, rgba(0,242,255,0.12));
}
body.learnpress-profile .learn-press-filters,
body.learnpress-profile .learn-press-tabs {
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.12));
}
body.learnpress-profile .learn-press-filters li a,
body.learnpress-profile .learn-press-filters li span {
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile .learn-press-filters li a.active,
body.learnpress-profile .learn-press-filters li a:hover,
body.learnpress-profile .learn-press-filters li span.active,
body.learnpress-profile .learn-press-filters li span:hover,
body.learnpress-profile .learn-press-filters li.active a,
body.learnpress-profile .learn-press-filters li.active span {
	color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .learn-press-filters li a.active::after,
body.learnpress-profile .learn-press-filters li a:hover::after,
body.learnpress-profile .learn-press-filters li.active a::after,
body.learnpress-profile .learn-press-filters li.active span::after {
	background: var(--vr-cyan, #00F2FF) !important;
}

/* LP profile sub-page sub-grids (My Courses cards, Quizzes results, Orders) */
body.learnpress-profile .lp-list-table,
body.learnpress-profile .lp-archive-courses,
body.learnpress-profile .learn-press-course-tab__filter__content > * {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   PMPro — body backdrop for all PMPro pages
   PMPro adds `pmpro-account` / `pmpro-billing` / `pmpro-levels` / etc.
   body classes on the corresponding pages, plus a generic
   `pmpro-body-page-N`. Catch all of them.
   ════════════════════════════════════════════════════════════════════════ */

body.pmpro-account,
body.pmpro-billing,
body.pmpro-cancel,
body.pmpro-checkout,
body.pmpro-confirmation,
body.pmpro-invoice,
body.pmpro-levels,
body.pmpro-login,
body.pmpro-member-profile-edit,
body[class*="pmpro-body-page-"] {
	background: var(--vr-base, #020617) !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.pmpro-account .entry-content,
body.pmpro-billing .entry-content,
body.pmpro-cancel .entry-content,
body.pmpro-checkout .entry-content,
body.pmpro-confirmation .entry-content,
body.pmpro-invoice .entry-content,
body.pmpro-levels .entry-content,
body.pmpro-login .entry-content,
body.pmpro-member-profile-edit .entry-content,
body[class*="pmpro-body-page-"] .entry-content,
body.pmpro-account .wp-block-post-content,
body.pmpro-billing .wp-block-post-content,
body.pmpro-cancel .wp-block-post-content,
body.pmpro-checkout .wp-block-post-content,
body.pmpro-confirmation .wp-block-post-content,
body.pmpro-invoice .wp-block-post-content,
body.pmpro-levels .wp-block-post-content,
body.pmpro-login .wp-block-post-content,
body.pmpro-member-profile-edit .wp-block-post-content,
body[class*="pmpro-body-page-"] .wp-block-post-content {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   WP Program Dashboard (wp-program-dashboard plugin)
   Renders at #wppd-dashboard either via the lp-profile override
   (Settings::lp_profile_override_enabled === true) or via the staging
   [program_dashboard] shortcode on /dashboard/. Either way the same
   wppd-* class tree appears, and these rules carry the Nexus surfaces /
   text tokens / cyan accents.

   Specificity: anchored on body + #wppd-dashboard so we beat the
   plugin's .wppd-* class-level rules in dashboard.css without needing
   !important on every property.

   Status semantic colors are preserved (completed=green, in-progress
   /enrolled=blue→cyan, locked/not-started=muted, cert=amber, unenroll
   =red) but card surfaces, borders, and text colors come from the
   --vr-* token palette so the panel reads as Nexus on first sight.
   ════════════════════════════════════════════════════════════════════════ */

/* Body backdrop for staging /dashboard/ page (parallels the LP-profile
   body backdrop rule earlier in this file). Once the lp-profile
   override is enabled, the existing body.learnpress-profile rule takes
   over instead. */
body.page #wppd-dashboard {
	color: var(--vr-body, #CBD5E1);
}

/* Outer container */
#wppd-dashboard.wppd-dashboard {
	font-family: 'Inter', sans-serif;
	max-width: 960px;
	padding: 2rem 1rem 3rem;
	margin: 0 auto;
}

/* ── Learner header ─────────────────────────────────────────────── */
#wppd-dashboard .wppd-learner-header {
	background: var(--vr-surface, #0F172A);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(0,242,255,0.04) inset;
}
#wppd-dashboard .wppd-avatar {
	background: rgba(0, 242, 255, 0.12);
}
#wppd-dashboard .wppd-avatar__initials {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
#wppd-dashboard .wppd-learner-name {
	color: var(--vr-contrast, #F8FAFC);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 800;
}
#wppd-dashboard .wppd-learner-meta {
	color: var(--vr-muted, #94A3B8);
}
#wppd-dashboard .wppd-overall-pct__label {
	color: var(--vr-muted, #94A3B8);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
#wppd-dashboard .wppd-overall-pct__value {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 800;
	text-shadow: 0 0 12px rgba(0, 242, 255, 0.35);
}

/* ── Stats row (3 boxes) ────────────────────────────────────────── */
#wppd-dashboard .wppd-stat {
	background: var(--vr-surface-2, #1E293B);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
	transition: border-color 0.18s ease;
}
#wppd-dashboard .wppd-stat:hover {
	border-color: var(--vr-cyan, #00F2FF);
}
#wppd-dashboard .wppd-stat__value {
	color: var(--vr-contrast, #F8FAFC);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 800;
}
#wppd-dashboard .wppd-stat__label {
	color: var(--vr-muted, #94A3B8);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

/* ── Section label ──────────────────────────────────────────────── */
#wppd-dashboard .wppd-section-label {
	color: var(--vr-muted, #94A3B8);
	font-family: 'Orbitron', 'Inter', sans-serif;
}

/* ── Program cards ──────────────────────────────────────────────── */
#wppd-dashboard .wppd-program-card {
	background: var(--vr-surface, #0F172A);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
	transition: border-color 0.18s ease;
}
#wppd-dashboard .wppd-program-card:hover {
	border-color: var(--vr-cyan, #00F2FF);
}
#wppd-dashboard .wppd-program-header:hover {
	background: rgba(0, 242, 255, 0.05);
}
#wppd-dashboard .wppd-program-icon {
	background: rgba(0, 242, 255, 0.12);
	color: var(--vr-cyan, #00F2FF);
}
#wppd-dashboard .wppd-program-title {
	color: var(--vr-contrast, #F8FAFC);
	font-weight: 700;
}
#wppd-dashboard .wppd-program-sub {
	color: var(--vr-muted, #94A3B8);
}
#wppd-dashboard .wppd-program-pct {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
#wppd-dashboard .wppd-expand-icon::before,
#wppd-dashboard .wppd-expand-icon::after {
	background: var(--vr-muted, #94A3B8);
}
#wppd-dashboard .wppd-program-header.is-open .wppd-expand-icon::before,
#wppd-dashboard .wppd-program-header.is-open .wppd-expand-icon::after {
	background: var(--vr-cyan, #00F2FF);
}

/* Progress bar (program-level, green→cyan/emerald gradient) */
#wppd-dashboard .wppd-prog-bar-track {
	background: rgba(255, 255, 255, 0.06);
}
#wppd-dashboard .wppd-prog-bar {
	background: linear-gradient(90deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399));
}

/* ── Course rows ────────────────────────────────────────────────── */
#wppd-dashboard .wppd-course-row {
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.08));
}
#wppd-dashboard .wppd-course-row:last-child {
	border-bottom: none;
}

/* Step indicator pills */
#wppd-dashboard .wppd-step--completed   { background: rgba(52,199,89,0.18);  color: #6EE7B7; }
#wppd-dashboard .wppd-step--in-progress { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-step--enrolled    { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-step--not-started { background: rgba(148,163,184,0.18); color: var(--vr-muted, #94A3B8); }

/* Course name + detail */
#wppd-dashboard .wppd-course-name {
	color: var(--vr-contrast, #F8FAFC);
}
#wppd-dashboard .wppd-course-name:hover {
	color: var(--vr-cyan, #00F2FF);
	text-decoration: none;
}
#wppd-dashboard .wppd-course-name--locked {
	color: rgba(148, 163, 184, 0.6);
}
#wppd-dashboard .wppd-course-detail {
	color: var(--vr-muted, #94A3B8);
}

/* Mini progress bar (per-course) */
#wppd-dashboard .wppd-mini-bar-track {
	background: rgba(255, 255, 255, 0.08);
}
#wppd-dashboard .wppd-mini-bar {
	background: var(--vr-cyan, #00F2FF);
}

/* Status badges */
#wppd-dashboard .wppd-badge--completed   { background: rgba(52,199,89,0.18);  color: #6EE7B7; }
#wppd-dashboard .wppd-badge--in-progress { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-badge--enrolled    { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-badge--not-started { background: rgba(148,163,184,0.18); color: var(--vr-muted, #94A3B8); }

/* CTA button — Nexus cyan pill */
#wppd-dashboard .wppd-cta-btn {
	background: var(--vr-cyan, #00F2FF);
	color: var(--vr-base, #020617);
	font-weight: 700;
}
#wppd-dashboard .wppd-cta-btn:hover {
	background: var(--vr-contrast, #F8FAFC);
	color: var(--vr-base, #020617);
}

/* ── Certificates ───────────────────────────────────────────────── */
#wppd-dashboard .wppd-cert-row {
	background: rgba(251, 191, 36, 0.10);
	border: 1px solid rgba(251, 191, 36, 0.25);
}
#wppd-dashboard .wppd-cert-icon {
	color: #F59E0B;
}
#wppd-dashboard .wppd-cert-name {
	color: #FBBF24;
	font-weight: 700;
}
#wppd-dashboard .wppd-cert-meta {
	color: #D97706;
}

/* ── Empty state ────────────────────────────────────────────────── */
#wppd-dashboard .wppd-empty-state {
	color: var(--vr-muted, #94A3B8);
	background: var(--vr-surface, #0F172A);
	border: 1px dashed var(--vr-border, rgba(0,242,255,0.12));
	border-radius: 10px;
}


/* ════════════════════════════════════════════════════════════════════════
   WP Program Dashboard — PMPro account-page injection (.wppd-account-*)
   These rules fire on /membership-account/ once
   Settings::account_integration_enabled === true. Until then they're
   inert (the classes never appear). They mirror the dashboard palette.
   ════════════════════════════════════════════════════════════════════════ */

.wppd-account-program {
	color: var(--vr-body, #CBD5E1);
}
.wppd-account-program .wppd-acct-bar-track {
	background: rgba(255, 255, 255, 0.06);
}
.wppd-account-program .wppd-acct-bar {
	background: linear-gradient(90deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399));
}
.wppd-account-program .wppd-acct-progress {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
.wppd-account-program .wppd-acct-expiry {
	color: var(--vr-muted, #94A3B8);
}
.wppd-account-program .wppd-acct-courses {
	background: var(--vr-surface, #0F172A);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
}
.wppd-account-program .wppd-acct-course {
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.08));
}
.wppd-account-program .wppd-acct-course:last-child {
	border-bottom: none;
}
.wppd-account-program .wppd-acct-thumb--placeholder {
	background: rgba(0, 242, 255, 0.12);
	color: var(--vr-cyan, #00F2FF);
}
.wppd-account-program .wppd-acct-thumb--locked {
	background: rgba(148, 163, 184, 0.15);
	color: var(--vr-muted, #94A3B8);
}
.wppd-account-program .wppd-acct-course-name {
	color: var(--vr-contrast, #F8FAFC);
}
.wppd-account-program .wppd-acct-course-name:hover {
	color: var(--vr-cyan, #00F2FF);
}
.wppd-account-program .wppd-acct-course-name--locked {
	color: rgba(148, 163, 184, 0.6);
}
.wppd-account-program .wppd-acct-course-detail {
	color: var(--vr-muted, #94A3B8);
}
.wppd-account-program .wppd-acct-status--completed {
	color: #6EE7B7;
}
.wppd-account-program .wppd-acct-status--in-progress {
	color: var(--vr-cyan, #00F2FF);
}
.wppd-account-program .wppd-acct-pct {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
.wppd-account-program .wppd-unenroll-btn {
	color: #FCA5A5;
}
.wppd-account-program .wppd-unenroll-btn:hover {
	color: #F87171;
}
.wppd-account-program .wppd-acct-dashboard-link {
	color: var(--vr-cyan, #00F2FF);
}

/* Unenroll confirmation panel */
.wppd-account-program .wppd-unenroll-confirm {
	background: rgba(248, 113, 113, 0.10);
	border: 1px solid rgba(248, 113, 113, 0.30);
}
.wppd-account-program .wppd-unenroll-confirm__msg {
	color: #FCA5A5;
}
.wppd-account-program .wppd-unenroll-confirm__yes {
	background: #DC2626;
	color: #F8FAFC;
	font-weight: 700;
}
.wppd-account-program .wppd-unenroll-confirm__yes:hover {
	background: #B91C1C;
	color: #F8FAFC;
}
.wppd-account-program .wppd-unenroll-confirm__no {
	color: #FCA5A5;
}