/* ==========================================================================
   FirstTopper LMS — Frontend design system
   All tokens are scoped under .ftl-lms-root so nothing leaks into the host
   theme, and the theme's own styles can never leak in either (see the
   isolation block right below). Every rule in this file targets a class or
   ID that the plugin already renders — no markup changes required.
   ========================================================================== */

.ftl-lms-root {
	--ftl-ink: #12142b;
	--ftl-ink-soft: #4a4d63;
	--ftl-muted: #82859a;
	--ftl-line: #e5e6f0;
	--ftl-line-soft: #eef0f8;
	--ftl-surface: #ffffff;
	--ftl-canvas: #f5f6fb;
	--ftl-canvas-deep: #eef0fa;

	--ftl-brand: #3d3fd6;
	--ftl-brand-dark: #2b2ca3;
	--ftl-brand-soft: #edeefc;
	--ftl-brand-line: #cfd1f4;

	--ftl-gold: #b9820f;
	--ftl-gold-soft: #faf1dc;
	--ftl-gold-line: #ecd7a0;

	--ftl-success: #1c8b5c;
	--ftl-success-soft: #e5f6ee;
	--ftl-danger: #c0333e;
	--ftl-danger-soft: #fbebec;
	--ftl-warning: #b9721a;
	--ftl-warning-soft: #fdf1e0;

	--ftl-radius-sm: 8px;
	--ftl-radius-md: 12px;
	--ftl-radius-lg: 18px;
	--ftl-radius-pill: 999px;

	--ftl-shadow-sm: 0 1px 2px rgba(18, 20, 43, 0.06);
	--ftl-shadow-md: 0 8px 24px rgba(18, 20, 43, 0.10);
	--ftl-shadow-lg: 0 20px 48px rgba(18, 20, 43, 0.16);

	--ftl-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ftl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Theme isolation — forces our page output to behave as ONE full-width block
   no matter what layout system (flex/grid/float) the active theme's content
   wrapper uses, and stops the theme's own typography/link/list styles from
   bleeding into our markup.
   ========================================================================== */
.ftl-lms-root {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	grid-column: 1 / -1 !important;
	float: none !important;
	clear: both !important;
	position: relative !important;
	box-sizing: border-box;
	font-family: var(--ftl-font-body);
	color: var(--ftl-ink);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.ftl-lms-root * { box-sizing: border-box; }
.ftl-lms-root h1, .ftl-lms-root h2, .ftl-lms-root h3 { font-family: var(--ftl-font-display); color: var(--ftl-ink); }
.ftl-lms-root a { color: var(--ftl-brand); }
.ftl-lms-root ::selection { background: var(--ftl-brand-soft); color: var(--ftl-brand-dark); }

/* Respect reduced-motion preferences on every transition/animation below. */
@media (prefers-reduced-motion: reduce) {
	.ftl-lms-root * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Visible keyboard focus everywhere interactive, without relying on outline:none anywhere. */
.ftl-lms-root a:focus-visible,
.ftl-lms-root button:focus-visible,
.ftl-lms-root input:focus-visible,
.ftl-lms-root select:focus-visible,
.ftl-lms-root textarea:focus-visible,
.ftl-lms-root [tabindex]:focus-visible {
	outline: 2.5px solid var(--ftl-brand);
	outline-offset: 2px;
}

/* ==========================================================================
   Shrinks the theme's own site header (logo + site name banner) — this was
   taking up a large amount of vertical space above every page. These
   selectors target Astra's common header markup; if your theme changes or
   this doesn't fully match, the header padding/logo size are the values to
   adjust here.
   ========================================================================== */
.site-header, #masthead, .ast-primary-header-bar { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; }
.site-header img.custom-logo, .ast-site-identity img, .custom-logo-link img { max-height: 40px !important; width: auto !important; }
.site-header .site-title, .ast-site-identity .site-title { font-size: 18px !important; margin: 0 !important; }
.site-header .site-description, .ast-site-identity .site-description { display: none !important; }
.ast-site-identity { padding: 6px 0 !important; }

/* ---------- Layout helpers ---------- */
.ftl-page-wrap { max-width: 920px; margin: 0 auto; padding: 36px 20px 72px; }
.ftl-page-wrap-wide { max-width: 1180px; }
.ftl-page-title { margin-bottom: 26px; font-size: 30px; font-weight: 800; letter-spacing: -0.3px; }

/* ---------- Buttons ---------- */
.ftl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 22px; border-radius: var(--ftl-radius-sm); border: 1.5px solid var(--ftl-ink);
	background: var(--ftl-surface); color: var(--ftl-ink); text-decoration: none; cursor: pointer;
	font-family: var(--ftl-font-body); font-size: 14px; font-weight: 600; text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ftl-btn:hover { background: var(--ftl-canvas); transform: translateY(-1px); }
.ftl-btn:active { transform: translateY(0); }
.ftl-btn-primary {
	background: var(--ftl-brand) !important; border-color: var(--ftl-brand) !important; color: #fff !important;
	box-shadow: 0 6px 16px rgba(61, 63, 214, 0.28);
}
.ftl-btn-primary:hover { background: var(--ftl-brand-dark) !important; border-color: var(--ftl-brand-dark) !important; box-shadow: 0 8px 20px rgba(61, 63, 214, 0.34); }
.ftl-btn-block { display: flex; width: 100%; margin-top: 8px; }
.ftl-btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: 10px; }
.ftl-btn-sm { padding: 7px 15px; font-size: 13px; border-color: rgba(255,255,255,0.35); background: transparent; color: #fff !important; }
.ftl-btn-sm:hover { background: rgba(255,255,255,0.14); }
.ftl-btn-sm.ftl-btn-primary { background: var(--ftl-brand); border-color: var(--ftl-brand); box-shadow: none; }
.ftl-link-btn { background: none; border: none; color: var(--ftl-brand); cursor: pointer; padding: 0 0 18px; font-size: 14px; font-weight: 600; }
.ftl-link-btn:hover { text-decoration: underline; }

/* ---------- Account bar ---------- */
.ftl-account-bar {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
	background: var(--ftl-ink);
	background-image: linear-gradient(90deg, var(--ftl-ink) 0%, #1a1c3d 100%);
	border-bottom: 2px solid var(--ftl-gold);
	color: #fff;
	width: 100%;
	flex-wrap: wrap;
	gap: 10px;
}
.ftl-account-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ftl-account-brand { color: #fff !important; font-family: var(--ftl-font-display); font-weight: 800; text-decoration: none; font-size: 16.5px; letter-spacing: 0.2px; margin-right: 18px; }
.ftl-account-nav-link { color: rgba(255,255,255,0.78) !important; text-decoration: none; font-size: 14px; font-weight: 500; margin-right: 10px; position: relative; padding-bottom: 2px; }
.ftl-account-nav-link:hover { color: #fff !important; }
.ftl-account-nav-link:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ftl-gold); border-radius: 2px; }
.ftl-account-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ftl-account-hi { font-size: 14px; opacity: 0.85; margin-right: 4px; color: #fff !important; }
.ftl-account-profile { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff !important; padding: 4px 10px 4px 4px; border-radius: var(--ftl-radius-pill); transition: background 0.15s ease; }
.ftl-account-profile:hover { background: rgba(255,255,255,0.1); }
.ftl-account-profile img { border-radius: 50%; display: block; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }

/* ---------- Courses grid ---------- */
.ftl-courses-page { max-width: 1240px; margin: 0 auto; padding: 0 20px 72px; }
.ftl-filter-bar { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.ftl-filter-bar input[type="text"] { flex: 1; min-width: 220px; padding: 12px 16px; border: 1.5px solid var(--ftl-line); border-radius: var(--ftl-radius-sm); font-size: 14px; background: var(--ftl-surface); font-family: var(--ftl-font-body); }
.ftl-filter-bar select { padding: 12px 16px; border: 1.5px solid var(--ftl-line); border-radius: var(--ftl-radius-sm); font-size: 14px; background: var(--ftl-surface); font-family: var(--ftl-font-body); }
.ftl-filter-bar input:focus, .ftl-filter-bar select:focus { outline: none; border-color: var(--ftl-brand); box-shadow: 0 0 0 3px var(--ftl-brand-soft); }

.ftl-courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 26px; }
.ftl-course-card {
	border: 1px solid var(--ftl-line); border-radius: var(--ftl-radius-lg); overflow: hidden; background: var(--ftl-surface);
	display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	box-shadow: var(--ftl-shadow-sm);
}
.ftl-course-card:hover { box-shadow: var(--ftl-shadow-md); transform: translateY(-3px); border-color: var(--ftl-brand-line); }
.ftl-course-thumb-link { display: block; position: relative; }
.ftl-course-thumb { width: 100%; height: 168px; object-fit: contain; background: var(--ftl-canvas); display: block; }
.ftl-course-thumb-placeholder { background: linear-gradient(135deg, var(--ftl-brand) 0%, #6b6ee8 100%); height: 168px; }
.ftl-course-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ftl-course-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ftl-course-cat-badge {
	display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
	color: var(--ftl-brand-dark); background: var(--ftl-brand-soft); padding: 3px 10px; border-radius: var(--ftl-radius-pill);
}
.ftl-course-card-body h3 { margin: 0; font-size: 17.5px; font-weight: 700; line-height: 1.35; font-family: var(--ftl-font-display); }
.ftl-course-card-body h3 a { color: var(--ftl-ink); text-decoration: none; }
.ftl-course-card-body h3 a:hover { color: var(--ftl-brand); }
.ftl-course-excerpt { color: var(--ftl-ink-soft); font-size: 13.5px; line-height: 1.55; flex: 1; }
.ftl-course-lesson-count { font-size: 12.5px; color: var(--ftl-muted); display: flex; align-items: center; gap: 5px; }

.ftl-course-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ftl-line-soft); }
.ftl-price-orig { text-decoration: line-through; color: var(--ftl-muted); font-size: 13.5px; }
.ftl-price-now { font-size: 21px; font-weight: 800; color: var(--ftl-ink); font-family: var(--ftl-font-display); }

/* ---------- Single course: overview ---------- */
.ftl-course-heading { font-size: 34px; font-weight: 800; line-height: 1.2; margin: 0 0 24px; letter-spacing: -0.4px; }

.ftl-overview-grid { display: flex; gap: 40px; align-items: flex-start; }
.ftl-overview-main { flex: 1; min-width: 0; }
.ftl-overview-sidebar { width: 340px; flex-shrink: 0; position: sticky; top: 20px; }

.ftl-single-thumb { width: 100%; max-height: 400px; overflow: hidden; border-radius: var(--ftl-radius-lg); margin-bottom: 24px; background: var(--ftl-canvas); }
.ftl-single-thumb img { width: 100%; height: 100%; max-height: 400px; object-fit: contain; display: block; }
.ftl-single-description { font-size: 15.5px; line-height: 1.75; color: var(--ftl-ink-soft); margin-bottom: 28px; max-width: 68ch; }

.ftl-buy-box { border: 1px solid var(--ftl-line); border-radius: var(--ftl-radius-lg); padding: 26px; background: var(--ftl-surface); box-shadow: var(--ftl-shadow-md); }
.ftl-enrolled-note { font-weight: 700; margin-bottom: 14px; font-size: 15px; color: var(--ftl-success); }
.ftl-coupon-row { display: flex; gap: 8px; margin: 14px 0 4px; }
.ftl-coupon-row input[type="text"] { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--ftl-line); border-radius: var(--ftl-radius-sm); font-size: 14px; }
.ftl-coupon-row input:focus { outline: none; border-color: var(--ftl-brand); }
#ftl-coupon-msg { margin: 6px 0 4px; font-size: 13px; min-height: 16px; }
.ftl-buy-box .ftl-btn { margin-top: 12px; }
.ftl-buy-box .ftl-btn:first-of-type { margin-top: 16px; }

.ftl-syllabus-list { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 10px; }
.ftl-syllabus-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ftl-line); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.ftl-syllabus-item:hover { background: var(--ftl-brand-soft); border-color: var(--ftl-brand-line); transform: translateX(2px); }
.ftl-lesson-icon { width: 20px; text-align: center; flex-shrink: 0; color: var(--ftl-brand); }
.ftl-lesson-title { flex: 1; font-size: 14.5px; font-weight: 500; }
.ftl-badge { background: var(--ftl-success-soft); color: var(--ftl-success); font-size: 11px; padding: 3px 11px; border-radius: var(--ftl-radius-pill); font-weight: 700; }

@media (max-width: 860px) {
	.ftl-overview-grid { flex-direction: column; }
	.ftl-overview-sidebar { width: 100%; position: static; }
}

/* ---------- Course player ---------- */
#ftl-course-player.ftl-page-wrap { max-width: 1280px; }
.ftl-player-layout { display: flex; gap: 28px; align-items: flex-start; }
.ftl-player-sidebar {
	width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
	border: 1px solid var(--ftl-line); border-radius: var(--ftl-radius-lg); padding: 12px; position: sticky; top: 20px;
	background: var(--ftl-surface);
}
.ftl-player-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--ftl-radius-sm); cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.15s ease; }
.ftl-player-nav-item:hover { background: var(--ftl-canvas); }
.ftl-player-nav-item.ftl-active { background: var(--ftl-brand-soft); font-weight: 700; color: var(--ftl-brand-dark); }
.ftl-chapter-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; margin-top: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ftl-muted); cursor: pointer; user-select: none; }
.ftl-chapter-header:first-child { margin-top: 0; }
.ftl-chapter-toggle { transition: transform 0.15s ease; }
.ftl-chapter-header.ftl-chapter-collapsed .ftl-chapter-toggle { transform: rotate(-90deg); }
.ftl-chapter-group { display: flex; flex-direction: column; gap: 4px; }
.ftl-chapter-group.ftl-chapter-collapsed { display: none; }
.ftl-player-stage { flex: 1; min-width: 0; }
.ftl-stage-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ftl-video-url-error { background: var(--ftl-warning-soft); border: 1px solid var(--ftl-gold-line); border-radius: var(--ftl-radius-sm); padding: 16px 18px; color: #6b4a08; font-size: 14px; line-height: 1.6; }
.ftl-video-url-error strong { display: block; margin-bottom: 6px; }
.ftl-video-url-error code { display: inline-block; background: rgba(0,0,0,0.06); padding: 2px 8px; border-radius: 4px; margin: 4px 0; word-break: break-all; }

.ftl-locked-prompt { text-align: center; padding: 90px 20px; border: 1.5px dashed #d8dae2; border-radius: var(--ftl-radius-lg); background: var(--ftl-canvas); }
.ftl-locked-prompt p { font-size: 17px; margin-bottom: 18px; color: var(--ftl-ink-soft); font-weight: 500; }

/* ---------- Custom video player ---------- */
.ftl-video-slot { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 380px; background: #000; border-radius: var(--ftl-radius-md); overflow: hidden; }
#ftl-video-container { position: relative; width: 100%; height: 100%; background: #000; border-radius: var(--ftl-radius-md); overflow: hidden; }
#ftl-vc-error { position: absolute; top: 0; left: 0; right: 0; bottom: 44px; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: #fff; font-size: 15px; line-height: 1.6; background: var(--ftl-ink); }
/* YouTube prints its own title/share overlay near the top edge and, on some
   channels, a persistent custom watermark near the bottom-right — neither can
   be turned off via any embed parameter. Slightly oversizing the player and
   clipping the overflow crops those edge regions out of view. Kept small (4%)
   so it trims only the outer sliver, not visible video content. Note: a
   channel watermark baked into the *video itself* by its owner (via YouTube
   Studio) cannot be removed this way — only the platform's own hover chrome
   can be. !important guards against theme/cache CSS conflicts overriding this. */
#ftl-yt-player { position: absolute !important; top: -4% !important; left: -4% !important; width: 108% !important; height: 108% !important; }
#ftl-yt-player iframe { width: 100% !important; height: 100% !important; pointer-events: none !important; }
.ftl-video-click-catcher { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; cursor: pointer; background: transparent; }
.ftl-video-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); }
.ftl-vc-btn { background: none; border: none; color: #fff; font-size: 17px; cursor: pointer; padding: 4px 2px; line-height: 1; flex-shrink: 0; }
#ftl-vc-time { color: #fff; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }

/* Custom-styled range sliders (seek + volume) — browsers give range inputs a
   large default thumb that, without explicit sizing, can visually collide
   with neighbouring icons. This forces a small, consistent thumb in every
   browser instead. The seek bar is the dominant, wide control; volume is
   deliberately short and grouped near the end so the two are never mistaken
   for "two progress bars". The gold thumb ring ties the player back to the
   brand accent used for progress/achievement elsewhere in the plugin. */
.ftl-vc-seek, .ftl-vc-volume {
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 2px;
	background: rgba(255,255,255,0.3);
	outline: none;
	cursor: pointer;
	flex-shrink: 0;
}
.ftl-vc-seek { flex: 1 1 auto !important; min-width: 60px; margin: 0 4px; }
.ftl-vc-volume { width: 50px !important; flex: 0 0 50px !important; }
.ftl-vc-seek::-webkit-slider-thumb, .ftl-vc-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px; height: 12px; border-radius: 50%;
	background: #fff; cursor: pointer; border: none;
	box-shadow: 0 0 0 3px rgba(201,146,15,0.5);
}
.ftl-vc-seek::-moz-range-thumb, .ftl-vc-volume::-moz-range-thumb {
	width: 12px; height: 12px; border-radius: 50%;
	background: #fff; cursor: pointer; border: none;
	box-shadow: 0 0 0 3px rgba(201,146,15,0.5);
}
.ftl-vc-seek::-webkit-slider-runnable-track, .ftl-vc-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; }
.ftl-vc-seek::-moz-range-track, .ftl-vc-volume::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); }

.ftl-vc-speed { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: rgba(255,255,255,0.15); color: #fff; border: none; border-radius: 5px; font-size: 12.5px; padding: 5px 6px; flex: 0 0 48px; width: 48px; box-sizing: border-box; }
.ftl-vc-speed option { background: var(--ftl-ink); color: #fff; }

@media (max-width: 480px) {
	.ftl-video-controls { gap: 8px; padding: 8px 10px; }
	.ftl-vc-volume { width: 44px !important; flex: 0 0 44px !important; }
	#ftl-vc-time { font-size: 11px; }
}

/* ---------- Auth pages (login / register / forgot password) ---------- */
.ftl-auth-wrap { max-width: 460px; margin: 0 auto; padding: 48px 20px 72px; }
.ftl-auth-heading { font-size: 27px; font-weight: 800; margin: 0 0 22px; letter-spacing: -0.3px; }
.ftl-auth-error { background: var(--ftl-danger-soft); color: var(--ftl-danger); padding: 12px 16px; border-radius: var(--ftl-radius-sm); font-size: 14px; margin-bottom: 16px; }
.ftl-auth-notice { background: var(--ftl-success-soft); color: var(--ftl-success); padding: 12px 16px; border-radius: var(--ftl-radius-sm); font-size: 14px; margin-bottom: 16px; }
.ftl-auth-form { display: flex; flex-direction: column; gap: 16px; background: var(--ftl-surface); border: 1px solid var(--ftl-line); border-radius: var(--ftl-radius-lg); padding: 28px; box-shadow: var(--ftl-shadow-sm); }
.ftl-auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ftl-ink-soft); flex: 1; }
.ftl-auth-form input, .ftl-auth-form select {
	padding: 11px 14px; border: 1.5px solid var(--ftl-line); border-radius: var(--ftl-radius-sm); font-size: 14.5px;
	font-weight: 400; font-family: inherit; color: var(--ftl-ink);
}
.ftl-auth-form input:focus, .ftl-auth-form select:focus { outline: none; border-color: var(--ftl-brand); box-shadow: 0 0 0 3px var(--ftl-brand-soft); }
.ftl-auth-form input:disabled { background: var(--ftl-canvas); color: var(--ftl-muted); }
.ftl-password-wrap { position: relative; display: block; }
.ftl-password-wrap input { width: 100%; padding-right: 42px; }
.ftl-toggle-password {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	background: none; border: none; cursor: pointer; font-size: 16px;
	padding: 6px 8px; line-height: 1; opacity: 0.6;
}
.ftl-toggle-password:hover { opacity: 1; }
.ftl-form-row { display: flex; gap: 14px; }
.ftl-form-row label { min-width: 0; }
.ftl-auth-switch { margin-top: 18px; font-size: 14px; color: var(--ftl-ink-soft); text-align: center; }
.ftl-auth-switch a { color: var(--ftl-brand); font-weight: 600; text-decoration: none; }
.ftl-auth-switch a:hover { text-decoration: underline; }

@media (max-width: 560px) {
	.ftl-form-row { flex-direction: column; }
}

/* ---------- Modals (PDF viewer + guest checkout) ---------- */
.ftl-modal, .ftl-admin-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,25,0.78); z-index: 100000; align-items: center; justify-content: center; }
.ftl-modal-inner { background: #fff; width: 90%; max-width: 820px; max-height: 90vh; overflow-y: auto; border-radius: var(--ftl-radius-md); padding: 22px; position: relative; }
.ftl-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; }
.ftl-pdf-page { display: block; width: 100%; height: auto; margin-bottom: 10px; border: 1px solid #eee; user-select: none; }
.ftl-admin-modal-inner { background: #fff; width: 92%; max-width: 420px; max-height: 88vh; overflow-y: auto; border-radius: var(--ftl-radius-md); padding: 28px; position: relative; box-shadow: var(--ftl-shadow-lg); }
.ftl-admin-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: #666; }
.ftl-admin-modal-inner h2 { margin-top: 0; color: var(--ftl-ink); }

/* ---------- Exam / quizzes ---------- */
.ftl-exam-q { margin-bottom: 22px; }
.ftl-exam-opt { display: block; padding: 6px 0; cursor: pointer; font-size: 14.5px; }
.ftl-exam-locked { color: var(--ftl-muted); font-style: italic; }
.ftl-exam-passed { background: var(--ftl-success-soft); border-radius: var(--ftl-radius-md); padding: 22px; }
.ftl-cert-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ftl-cert-checklist li { font-size: 14.5px; padding: 7px 0; border-bottom: 1px solid var(--ftl-line-soft); }
.ftl-quiz-hint { font-size: 12.5px; color: var(--ftl-muted); margin: -4px 0 8px; font-style: italic; }
.ftl-lesson-quiz-wrap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ftl-line); }

/* ---------- Dashboard ---------- */
.ftl-dashboard { max-width: 920px; margin: 0 auto; padding: 36px 20px; }
.ftl-dashboard-list { display: flex; flex-direction: column; gap: 16px; }
.ftl-dashboard-item { display: flex; gap: 18px; border: 1px solid var(--ftl-line); border-radius: var(--ftl-radius-md); padding: 16px; align-items: center; background: var(--ftl-surface); transition: box-shadow 0.15s ease; }
.ftl-dashboard-item:hover { box-shadow: var(--ftl-shadow-sm); }
.ftl-dashboard-item img { width: 92px; height: 92px; object-fit: contain; background: var(--ftl-canvas); border-radius: var(--ftl-radius-sm); }
.ftl-dashboard-item-body { flex: 1; }
.ftl-progress-bar { background: var(--ftl-line-soft); border-radius: var(--ftl-radius-pill); height: 8px; overflow: hidden; margin: 8px 0 4px; }
.ftl-progress-fill { background: linear-gradient(90deg, var(--ftl-brand), var(--ftl-brand-dark)); height: 100%; border-radius: var(--ftl-radius-pill); }

/* ---------- Affiliate dashboard ---------- */
.ftl-affiliate-link-box { border: 1px solid var(--ftl-gold-line); border-radius: var(--ftl-radius-md); padding: 20px; background: var(--ftl-gold-soft); margin: 20px 0 28px; }
.ftl-affiliate-link-box label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 8px; color: #7a5a0c; }
.ftl-affiliate-link-row { display: flex; gap: 8px; }
.ftl-affiliate-link-row input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--ftl-gold-line); border-radius: var(--ftl-radius-sm); font-size: 14px; background: #fff; }
.ftl-affiliate-stats { display: flex; flex-wrap: wrap; margin: 0 -7px 32px; }
.ftl-stat-card { border: 1px solid var(--ftl-line); border-radius: var(--ftl-radius-md); padding: 18px; text-align: center; background: var(--ftl-surface); flex: 1 1 140px; margin: 0 7px 14px; min-width: 140px; box-shadow: var(--ftl-shadow-sm); }
.ftl-stat-value { display: block; font-size: 25px; font-weight: 800; color: var(--ftl-ink); margin-bottom: 4px; font-family: var(--ftl-font-display); }
.ftl-stat-label { display: block; font-size: 12.5px; color: var(--ftl-muted); }
.ftl-affiliate-history { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ftl-affiliate-history th, .ftl-affiliate-history td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--ftl-line-soft); font-size: 14px; }
.ftl-affiliate-history th { color: var(--ftl-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.ftl-affiliate-history tbody tr:hover { background: var(--ftl-canvas); }

/* ---------- Internship portal ---------- */
.ftl-internship-hero { background: var(--ftl-canvas); border-bottom: 1px solid var(--ftl-line); padding: 8px 0 32px; }
.ftl-internship-hero .ftl-page-wrap { position: relative; }
.ftl-internship-logo { display: block; max-height: 64px; width: auto; margin: 20px 0 4px; }
.ftl-internship-logo-sm { max-height: 44px; margin: 12px 0 4px; }
.ftl-internship-top-apply { position: absolute; top: 20px; right: 20px; }
.ftl-internship-lead { font-size: 16px; color: var(--ftl-ink-soft); max-width: 720px; margin-bottom: 24px; }
.ftl-internship-list { padding-left: 22px; margin-bottom: 24px; }
.ftl-internship-list li { margin-bottom: 8px; font-size: 15px; }
.ftl-internship-fee-table { border-collapse: collapse; margin-bottom: 8px; max-width: 400px; width: 100%; border-radius: var(--ftl-radius-sm); overflow: hidden; }
.ftl-internship-fee-table th, .ftl-internship-fee-table td { border: 1px solid var(--ftl-line); padding: 10px 16px; text-align: left; font-size: 14.5px; }
.ftl-internship-fee-table th { background: var(--ftl-canvas-deep); }
.ftl-project-submission { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ftl-line); }
.ftl-project-submission input[type="file"] { display: block; margin-bottom: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.ftl-player-layout { flex-direction: column; }
	.ftl-player-sidebar { width: 100%; flex-direction: row; overflow-x: auto; position: static; }
	.ftl-player-nav-item { white-space: nowrap; }
	.ftl-video-slot { min-height: 220px; }
}
@media (max-width: 600px) {
	.ftl-account-bar { padding: 12px 16px; }
	.ftl-account-hi { display: none; }
	.ftl-course-heading { font-size: 26px; }
	.ftl-page-wrap { padding: 26px 16px 56px; }
}