:root {
  --navy: #1f3864;
  --navy-dark: #14284a;
  --gold: #b38f26;
  --bg: #f7f8fa;
  --card-bg: #ffffff;
  --border: #e3e6ea;
  --text: #1c2430;
  --muted: #6b7280;
  --success: #1f8a4c;
  --success-bg: #e8f6ee;
  --error: #b3261e;
  --error-bg: #fdecea;
  --warning-bg: #fff4e0;
  --warning-text: #8a5a00;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 28px; }
h2 { font-size: 20px; margin-top: 32px; }
p { margin: 0 0 12px; }
a { color: var(--navy); }
.muted { color: var(--muted); }
code { background: #eef0f3; padding: 2px 6px; border-radius: 4px; }

.page { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.page-narrow { max-width: 440px; }

/* Navbar */
.navbar { background: var(--navy); color: white; }
.navbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-brand { color: white; font-weight: 700; font-size: 18px; text-decoration: none; }
.navbar-brand span { color: var(--gold); }
.navbar-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
.navbar-links a { color: white; text-decoration: none; font-size: 14px; opacity: 0.9; }
.navbar-links a:hover { opacity: 1; }
@media (max-width: 480px) {
  .navbar-inner { flex-wrap: wrap; row-gap: 8px; }
  .navbar-links { gap: 12px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: opacity 0.15s;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { background: #eef1f6; color: var(--navy); }
/* Base .btn-ghost is for light/white backgrounds (admin Delete/Remove/Cancel
   buttons) - dark text on transparent, with a visible border. The navbar's
   "Log out" button overrides back to white text below, since it sits on the
   dark navy navbar. (These two contexts previously shared one white-on-
   transparent style, which made every admin Delete/Remove/Cancel button
   invisible - white text on a white card.) */
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: #f3f5f8; }
.navbar .btn-ghost {
  padding: 6px 12px; font-size: 13px; color: white; border: 1px solid rgba(255,255,255,0.4);
}
.navbar .btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* Hero */
.hero { padding: 40px 0 24px; text-align: center; }
.hero h1 { font-size: 34px; max-width: 640px; margin: 0 auto 12px; }
.hero p { color: var(--muted); font-size: 16px; }

/* Course grid - flexbox rather than a stretchy CSS grid, on purpose: with
   `justify-content: center` a row that isn't full (including just one
   course) centers itself instead of the leftover space sitting empty on the
   right or the lone tile stretching to fill the whole row. Each tile has a
   fixed width (via flex-basis, not flex-grow) so exactly 3 fit per full
   row - the 1000px cap is sized for 3 tiles at 320px plus two 20px gaps,
   so a 4th tile always wraps to the next line rather than squeezing in. */
.course-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px; max-width: 1000px; margin: 24px auto 0;
}
.course-card {
  flex: 0 1 320px; max-width: 320px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.course-card:hover { transform: translateY(-2px); }
.course-card-cover {
  /* Taller than before so a course thumbnail image has real room to show -
     this pushes the title/price content below it down by roughly two lines
     compared to the old, shorter cover. */
  height: 190px; background-color: var(--navy); background-image: linear-gradient(135deg, var(--navy), var(--navy-dark));
  /* `contain` (not `cover`) so an uploaded thumbnail always shows in full,
     uncropped - important since a lot of course-promo graphics (like a
     banner with text near the edges) lose key content if the edges get
     cropped to fill the box. Any letterboxed space around it just shows the
     navy gradient behind it, which reads as an intentional frame rather
     than empty space. The plain-letter placeholder (no thumbnail set) still
     fills the whole box since it has no background-image at all. */
  background-size: contain; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 40px; font-weight: 700;
}
.course-card-body { padding: 16px; }
.course-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--muted); }
.course-card-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.course-card-actions .course-price { font-size: 22px; margin-bottom: 10px; }
.btn-link-toggle {
  display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer;
  color: var(--navy); font-size: 13px; font-weight: 600; margin-top: 10px; padding: 4px; text-decoration: underline;
}
.btn-link-toggle:hover { color: var(--navy-dark); }
.course-thumbnail-preview {
  /* `contain`, matching .course-card-cover, so what the admin previews here
     is what students actually see - the whole image, uncropped. */
  height: 110px; width: 200px; max-width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: #eef1f6; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
}

/* Auth card */
.auth-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow); margin-top: 24px;
}
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
input, select, textarea {
  font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); background: white;
  /* Flex items default to a content-based minimum width, which lets a
     narrow field (e.g. the CVC box next to Expiry on checkout) overflow
     its allotted column instead of shrinking with it. width: 100% plus
     min-width: 0 makes every input/select/textarea obey its container. */
  width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.checkbox-row { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.checkbox-row input { width: auto; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); }
.unlock-unsaved-warning { padding: 8px 12px; font-size: 13px; margin: 8px 0; }

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; background: #eef1f6; color: var(--navy); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }

/* Course detail */
.course-detail-header { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.course-detail-header > div:first-child { flex: 2; min-width: 280px; }
.course-purchase-card {
  flex: 1; min-width: 240px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.course-price { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.course-access-status { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.voucher-redeem-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.voucher-redeem-form label { font-weight: 600; color: var(--muted); }
.voucher-redeem-form input { margin-top: 4px; }

.outline { margin-top: 12px; }
.outline-chapter { margin-bottom: 20px; }
.outline-chapter-title { font-weight: 700; margin-bottom: 8px; }
.outline ul { list-style: none; padding: 0; margin: 0; }
.outline li { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.check { color: var(--success); font-weight: 700; margin-right: 6px; }

/* My courses */
.my-course-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.my-course-row {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow);
}
.my-course-info { flex: 1; min-width: 220px; }
.my-course-actions { display: flex; gap: 10px; }
.progress-bar { height: 8px; background: #eef1f6; border-radius: 100px; margin: 8px 0; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--navy); border-radius: 100px; }

/* Player */
.player-layout { display: flex; min-height: calc(100vh - 58px); }
.player-sidebar {
  width: 280px; flex-shrink: 0; background: var(--card-bg); border-right: 1px solid var(--border);
  padding: 20px; overflow-y: auto;
}
.player-back { display: block; margin-bottom: 16px; text-decoration: none; font-size: 13px; color: var(--muted); }
.player-chapter { margin-bottom: 18px; }
.player-chapter-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.player-lesson {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text);
}
.player-lesson:hover { background: #f1f3f6; }
.player-lesson.active { background: #eef1f6; font-weight: 600; color: var(--navy); }
.lesson-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.lesson-dot.done { background: var(--success); border-color: var(--success); color: white; }
.player-main { flex: 1; padding: 32px 40px; max-width: 780px; }
.player-lesson-header { margin-bottom: 20px; }
.player-actions { margin-top: 28px; }
.watch-time-notice { margin-top: 8px; font-size: 13px; }
.player-nav { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.certificate-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.content-block { margin-bottom: 24px; }
.content-block-text { font-size: 15px; }
.video-embed-wrap { position: relative; padding-top: 56.25%; }
.video-embed-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* Vimeo custom player - see VimeoPlayer.jsx for why this exists instead of
   a plain iframe embed (right-click can't be blocked on a cross-origin
   iframe from our own page's JS at all). */
.vimeo-player-frame { position: relative; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden; }
.vimeo-player-holder { position: absolute; inset: 0; z-index: 1; }
.vimeo-player-holder iframe { width: 100%; height: 100%; border: 0; }
.vimeo-click-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: transparent; }
.vimeo-loading {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 14px; text-align: center; padding: 24px; line-height: 1.5;
}
.vimeo-controls {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px; background: #14181f; border-radius: 0 0 8px 8px;
  margin-top: -4px;
}
.vimeo-btn { background: none; border: none; color: white; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.vimeo-btn:hover { opacity: 0.8; }
.vimeo-time { color: #cfd4dc; font-size: 12px; font-variant-numeric: tabular-nums; }
.vimeo-seek { flex: 1; accent-color: var(--navy); }
.vimeo-volume { width: 70px; accent-color: var(--navy); }
.pdf-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; }
.pdf-fallback-link { display: inline-block; margin-top: 8px; font-size: 13px; }
.download-card {
  display: flex; align-items: center; gap: 14px; padding: 16px; background: white; border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: var(--text); max-width: 420px;
}
.download-icon { font-size: 22px; color: var(--navy); }
.task-badge { display: inline-block; background: var(--gold); color: white; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; text-transform: uppercase; }
.content-block-task { background: var(--warning-bg); padding: 16px; border-radius: var(--radius); }

.success-check { width: 56px; height: 56px; border-radius: 50%; background: var(--success-bg); color: var(--success); font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.test-mode-banner { background: var(--warning-bg); color: var(--warning-text); font-size: 12px; font-weight: 700; text-align: center; padding: 6px; border-radius: 6px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.03em; }
.checkout-summary { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }

/* Admin */
.inline-form { display: flex; gap: 10px; margin: 16px 0; }
.inline-form input { flex: 1; }
.inline-form-sm { margin: 10px 0 4px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.admin-form { max-width: 520px; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 20px 0; }
.tab { background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--navy); border-color: var(--navy); }
/* A smaller sub-tab toggle used inside a page section (e.g. "Existing
   student" vs "Add new student"), rather than the top-level page tabs. */
.tabs-sub { margin: 0 0 12px; }
.tabs-sub .tab { padding: 6px 12px; font-size: 13px; }

.admin-chapter-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.admin-chapter-header { display: flex; justify-content: space-between; align-items: center; }
.admin-lesson { border-top: 1px solid var(--border); padding: 8px 0; }
.admin-lesson-row { display: flex; align-items: center; gap: 12px; }
.admin-lesson-row .muted { flex: 1; font-size: 12px; }
.link-btn { background: none; border: none; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); padding: 4px 0; }
.admin-lesson-content { padding: 10px 0 10px 20px; }
.admin-block-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.admin-block-preview { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-block-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.content-block-form select { width: 130px; }
.content-block-form textarea, .content-block-form input { flex: 1; min-width: 180px; }

.unlock-rule-section { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.unlock-rule-editor { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.unlock-rule-delay { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.editable-title { display: inline-flex; align-items: center; gap: 6px; }
.edit-title-btn { font-size: 13px; opacity: 0.55; }
.edit-title-btn:hover { opacity: 1; }
.editable-title-form { display: inline-flex; align-items: center; gap: 6px; }
.editable-title-form input { font: inherit; padding: 4px 8px; }
.expand-toggle { padding: 4px 2px; }
.admin-lesson-title { flex: 1; font-size: 14px; font-weight: 600; }

.drip-defaults-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.drip-defaults-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }

/* Locked lessons in the student player */
.player-lesson.locked { cursor: default; opacity: 0.6; }
.player-lesson.locked:hover { background: none; }
.lesson-dot.locked { background: #eef1f6; }
.lesson-lock-icon { font-size: 12px; }
.locked-lesson-panel {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; text-align: center; max-width: 480px;
}
.locked-lesson-panel .lock-icon { font-size: 32px; margin-bottom: 12px; }

/* Lesson quiz / final exam panels in the student player */
.lesson-quiz-panel {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; margin-top: 24px;
}
.lesson-quiz-panel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.quiz-question { margin: 18px 0; }
.quiz-question-prompt { font-weight: 600; margin-bottom: 8px; }
.quiz-option { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 400; cursor: pointer; }
.quiz-option input { width: auto; }
.quiz-result-pass { color: var(--success); font-weight: 600; margin-top: 12px; }
.quiz-result-fail { color: var(--error); font-weight: 600; margin-top: 12px; }

/* Admin quiz question editor (LessonRow / FinalExamTab, via QuizEditor) */
.quiz-question-form { flex-direction: column; align-items: stretch; }
.quiz-options-editor { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.quiz-option-editor-row { display: flex; align-items: center; gap: 8px; }

/* Site-wide "Report an issue" floating button + its modal */
.report-issue-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  background: var(--navy); color: white; border: none; border-radius: 100px;
  padding: 12px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.report-issue-btn:hover { opacity: 0.92; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  position: relative; background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px; max-width: 420px; width: 100%;
}
.modal-card form { display: flex; flex-direction: column; gap: 14px; }
.modal-close {
  position: absolute; top: 10px; right: 14px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.modal-close:hover { color: var(--text); }