/* Native <select> dropdown popups (the opened options list) are rendered
   by the OS/browser, not by our CSS - they ignore our custom text color and
   default to a white background, so unselected options end up as light
   text on white (barely readable). color-scheme tells the browser to render
   that native popup (and other native form UI) in dark mode instead.
   Chromium reads this from the document root for the select popup widget
   specifically, not just from the select element itself, so it's set in
   both places. */
:root[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] select {
  color-scheme: dark;
}
/* Belt-and-suspenders for platforms/browsers where color-scheme alone
   doesn't reach into the option list (observed on Linux/Chromium) -
   Chromium honors direct background/color on <option> too. */
[data-theme="dark"] select option {
  background-color: #14243d;
  color: #d8e8ff;
}

[data-theme="dark"] .admin-create-modal-card h3,
[data-theme="dark"] .admin-requests-topbar h3,
[data-theme="dark"] .admin-devices-topbar h3,
[data-theme="dark"] .admin-manage-topbar h3,
[data-theme="dark"] .admin-renewals-topbar h3,
[data-theme="dark"] .admin-create-queue-topbar h3,
[data-theme="dark"] .admin-payments-topbar h3,
[data-theme="dark"] .admin-delete-topbar h3,
[data-theme="dark"] .admin-delete-confirm-card h3,
[data-theme="dark"] .admin-progress-topbar h3,
[data-theme="dark"] .admin-device-detail-topbar h3,
[data-theme="dark"] .admin-lessons-modal-title,
[data-theme="dark"] .admin-lessons-title,
[data-theme="dark"] .admin-user-info-section h4,
[data-theme="dark"] .mentor-students-student h4,
[data-theme="dark"] .admin-create-queue-card h4 {
  color: #e8f0ff;
}

[data-theme="dark"] .admin-requests-note,
[data-theme="dark"] .admin-devices-note,
[data-theme="dark"] .admin-renewals-note,
[data-theme="dark"] .admin-create-queue-note,
[data-theme="dark"] .admin-create-queue-meta,
[data-theme="dark"] .admin-payment-message,
[data-theme="dark"] .admin-delete-note,
[data-theme="dark"] .admin-delete-confirm-card p,
[data-theme="dark"] .admin-progress-note,
[data-theme="dark"] .admin-user-info-parents-phone,
[data-theme="dark"] .admin-user-info-empty,
[data-theme="dark"] .mentor-students-student p,
[data-theme="dark"] .admin-device-detail-label {
  color: #9bb8d8;
}

[data-theme="dark"] .admin-device-detail-item p {
  color: #eaf1fa;
}

/* .admin-user-info-section's left accent border (--aui-edge) needs to stay
   colored in dark mode too, so it's split out from the plain
   border-color-reset combo below instead of joining it - and gets its own
   brighter accent set (same 5 colors, lightened) so they still read on a
   dark card. */
[data-theme="dark"] .admin-user-info-section {
  --aui-edge: #3f7cb8;
  background: #101f36;
}
[data-theme="dark"] .admin-user-info-section:nth-of-type(5n + 2) { --aui-edge: #37d6e2; }
[data-theme="dark"] .admin-user-info-section:nth-of-type(5n + 3) { --aui-edge: #f0b94a; }
[data-theme="dark"] .admin-user-info-section:nth-of-type(5n + 4) { --aui-edge: #8f7fe0; }
[data-theme="dark"] .admin-user-info-section:nth-of-type(5n) { --aui-edge: #4fc97f; }
[data-theme="dark"] .admin-user-info-section.is-danger { --aui-edge: #e05a5a; }

[data-theme="dark"] .admin-user-info-icon {
  background: color-mix(in srgb, var(--aui-edge) 22%, #101f36);
}

[data-theme="dark"] .admin-create-queue-card,
[data-theme="dark"] .mentor-students-student {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .mentor-students-group-header {
  color: #9bb8d8;
}

[data-theme="dark"] .mentor-students-group-header:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .admin-mentor-avatar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .admin-progress-users,
[data-theme="dark"] .admin-progress-main {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .admin-progress-users h4 {
  color: #e8f0ff;
}

[data-theme="dark"] .admin-progress-user-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #d8e8ff;
}

[data-theme="dark"] .apu-username,
[data-theme="dark"] .admin-progress-users-count,
[data-theme="dark"] .admin-progress-group-header {
  color: #7a95b8;
}

[data-theme="dark"] .admin-progress-group-header:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .admin-progress-search {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-progress-users-list {
  scrollbar-color: rgba(108, 138, 255, 0.4) transparent;
}

[data-theme="dark"] .admin-progress-users-list::-webkit-scrollbar-thumb {
  background: rgba(108, 138, 255, 0.4);
}

[data-theme="dark"] .admin-progress-users-list::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 138, 255, 0.65);
}

[data-theme="dark"] .admin-progress-user-btn.is-active {
  background: rgba(47, 167, 255, 0.12);
  border-color: #2fa7ff;
}

[data-theme="dark"] .admin-progress-lesson-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .admin-progress-lesson-cover {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .admin-progress-lesson-body h4 {
  color: #e8f0ff;
}

/* ── Admin dark-theme gaps: components that only ever got a light-mode
   style, so they showed up as bright/white islands on the dark panel ── */
[data-theme="dark"] .admin-team-edit-avatar-fallback,
[data-theme="dark"] .admin-team-edit-flag-fallback {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-create-homework-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .admin-toggle-label {
  color: #d8e8ff;
}

[data-theme="dark"] .admin-toggle-slider {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .admin-create-submit-btn.is-disabled {
  background: rgba(255, 255, 255, 0.08);
  color: #6f88a8;
}

[data-theme="dark"] .admin-delete-btn:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: #6f88a8;
}

[data-theme="dark"] .admin-requests-done-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-requests-delete-btn,
[data-theme="dark"] .admin-create-queue-delete-btn {
  background: rgba(255, 99, 99, 0.14);
  border-color: rgba(255, 99, 99, 0.35);
  color: #ff9a8a;
}

[data-theme="dark"] .admin-requests-status {
  background: rgba(80, 208, 160, 0.14);
  border-color: rgba(80, 208, 160, 0.35);
  color: #6be3ad;
}

[data-theme="dark"] .admin-device-chip--pc {
  background: rgba(47, 167, 255, 0.14);
  border-color: rgba(47, 167, 255, 0.35);
  color: #7cc4ff;
}

[data-theme="dark"] .admin-device-chip--phone {
  background: rgba(80, 208, 160, 0.14);
  border-color: rgba(80, 208, 160, 0.35);
  color: #6be3ad;
}

[data-theme="dark"] .admin-device-chip--tablet {
  background: rgba(240, 180, 41, 0.14);
  border-color: rgba(240, 180, 41, 0.35);
  color: #f0b429;
}

[data-theme="dark"] .admin-device-chip--unknown {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #9bb8d8;
}

[data-theme="dark"] .admin-progress-percent.is-good {
  background: rgba(80, 208, 160, 0.14);
  border-color: rgba(80, 208, 160, 0.35);
  color: #6be3ad;
}

[data-theme="dark"] .admin-progress-percent.is-bad {
  background: rgba(255, 99, 99, 0.14);
  border-color: rgba(255, 99, 99, 0.35);
  color: #ff9a8a;
}

[data-theme="dark"] .admin-progress-video {
  background: rgba(47, 167, 255, 0.12);
  border-color: rgba(47, 167, 255, 0.3);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-progress-video.is-good {
  background: rgba(80, 208, 160, 0.14);
  border-color: rgba(80, 208, 160, 0.35);
  color: #6be3ad;
}

[data-theme="dark"] .admin-progress-video.is-bad {
  background: rgba(240, 180, 41, 0.14);
  border-color: rgba(240, 180, 41, 0.35);
  color: #f0b429;
}

[data-theme="dark"] .admin-progress-video.is-empty {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #9bb8d8;
}

[data-theme="dark"] .admin-lessons-secondary,
[data-theme="dark"] .admin-lessons-add,
[data-theme="dark"] .admin-lessons-mini-edit,
[data-theme="dark"] .admin-lessons-handle,
[data-theme="dark"] .admin-quiz-reorder-handle,
[data-theme="dark"] .admin-certificates-tabs,
[data-theme="dark"] .admin-homework-editor-index {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-certificates-tab {
  color: #9bb8d8;
}

[data-theme="dark"] .admin-certificates-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #e8f0ff;
  box-shadow: none;
}

[data-theme="dark"] .admin-certificate-preview,
[data-theme="dark"] .admin-lesson-cover-preview,
[data-theme="dark"] .admin-quiz-reorder-row,
[data-theme="dark"] .admin-quiz-option,
[data-theme="dark"] .admin-homework-editor-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .admin-quiz-reorder-row.is-current {
  background: rgba(47, 167, 255, 0.12);
  border-color: rgba(47, 167, 255, 0.35);
}

[data-theme="dark"] .admin-certificate-label,
[data-theme="dark"] .admin-lessons-confirm-card h3,
[data-theme="dark"] .admin-quiz-reorder-title,
[data-theme="dark"] .admin-quiz-q-label,
[data-theme="dark"] .admin-quiz-option-key {
  color: #e8f0ff;
}

/* ── Page background + smooth theme transition ── */
[data-theme="dark"] body {
  background: #0a1628;
  color: #d8e8ff;
}

body,
.hero,
.levels,
.results-section,
.contact-section {
  transition: background 0.35s ease, color 0.35s ease;
}

/* ══════════════════════════════════════════
   Citizen X — Dark theme: Results / About / Contact
   ══════════════════════════════════════════ */

[data-theme="dark"] .results-section {
  background: linear-gradient(180deg, #0d1e38 0%, #0a1628 100%);
}

[data-theme="dark"] .results-title {
  color: #e8f0ff;
  border-color: rgba(240, 180, 41, 0.35);
  background-image: var(--results-title-image), linear-gradient(135deg, #0f1e38, #0a1628);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* "Our results" — cosmic title bar with the same space backdrop + comets as the header
   (shown in both light and dark themes) */
.results-title--cosmic {
  position: relative;
  overflow: hidden;
  background-image: url("../../assets/images/space.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(240, 180, 41, 0.4);
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Light theme — swap the night-sky "space.png" backdrop for the very same
   "sky.png" artwork used by the homepage header, so "Our results" carries
   the same bright sunrise-over-Earth identity as the rest of the light theme
   instead of a leftover dark-theme starfield. Text stays white with a soft
   shadow (the visible slice of "sky.png" skews toward its deeper blue upper
   half, where light text reads best — same logic as the dark cosmic version,
   just a gentler shadow tuned for a brighter backdrop). */
[data-theme="light"] .results-title--cosmic {
  background-image: url("../../assets/images/sky.jpg") !important;
  background-size: cover;
  background-position: center;
  border-color: rgba(240, 180, 41, 0.4);
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(20, 50, 90, 0.45);
}

.results-title-comet-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.results-title-text {
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .results-modal-tile {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

[data-theme="dark"] .results-modal-tile:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,180,41,0.2);
}

[data-theme="dark"] .results-modal-name {
  color: #f0c040;
}

[data-theme="dark"] .results-modal-quote {
  color: #9bb8d8;
}

[data-theme="dark"] .results-modal-certificate {
  background: #0d1e38;
  border-color: rgba(255, 255, 255, 0.1);
  color: #9bb8d8;
}

[data-theme="dark"] .results-modal-person--image {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .results-modal-person--image::after {
  background: rgba(10, 22, 40, 0.45);
}

/* ── Standalone "Our results" page (results.html) — dark theme ── */
[data-theme="dark"] .results-modal-card-standalone {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 100%);
}

[data-theme="dark"] .results-modal-title,
[data-theme="dark"] .results-modal-subtitle {
  color: #e8f0ff;
}

[data-theme="dark"] .results-modal-lead {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9bb8d8;
}

[data-theme="dark"] .results-lead-kicker {
  color: #e8f0ff;
}

[data-theme="dark"] .results-modal-tab {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .results-modal-tab.is-active {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
  border-color: transparent;
}

[data-theme="dark"] .results-modal-note {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #9bb8d8;
}

[data-theme="dark"] .results-masonry-cert,
[data-theme="dark"] .results-masonry-quote {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #0f1e38, #0a1628);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

[data-theme="dark"] .results-masonry-cert-placeholder {
  background: linear-gradient(180deg, #0f1e38, #0a1628);
  color: #9bb8d8;
}

[data-theme="dark"] .results-masonry-cert-name {
  background: linear-gradient(180deg, #0f1e38, #0a1628);
  border-top-color: rgba(255, 255, 255, 0.12);
  color: #e8f0ff;
}

[data-theme="dark"] .results-masonry-quote {
  color: #e8f0ff;
}

[data-theme="dark"] .results-learn-btn {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
  box-shadow: 0 16px 34px rgba(0,0,0,0.4);
}

[data-theme="dark"] .results-learn-btn:hover {
  box-shadow: 0 20px 44px rgba(0,0,0,0.5);
}

[data-theme="dark"] .mentors-more-btn {
  border-color: rgba(80, 207, 176, 0.4);
  background: linear-gradient(135deg, #1f6f64, #0d3b35);
  color: #e8f0ff;
}

[data-theme="dark"] .about-person {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}

[data-theme="dark"] .about-person-featured {
  border-color: rgba(240, 180, 41, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .about-avatar {
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #1a2f4d, #0d1e38);
  color: #9bb8d8;
}

[data-theme="dark"] .about-person-featured .about-avatar {
  border-color: rgba(240, 180, 41, 0.3);
  background: #0f1e38;
  color: #f0c040;
}

[data-theme="dark"] .about-person-featured .about-info h3,
[data-theme="dark"] .about-info h3 {
  color: #f0c040;
}

[data-theme="dark"] .about-person-featured .about-info p,
[data-theme="dark"] .about-info p {
  color: #b8cce3;
}

/* ── "Test your knowledge" placement-test modal ──
   This modal used to stay a flat white card no matter the theme — a
   "leftover daytime" holdover that flashed a bright square over the night
   sky, just like "Our results" did before we themed it. Here we give it the
   same midnight-blue gradient + gold-accent palette as the rest of the dark
   theme's cards (results tiles, learn buttons, etc.) so it feels native to
   the cosmic backdrop instead of an intrusion on it. */
[data-theme="dark"] .knowledge-test-modal {
  background: rgba(5, 12, 24, 0.72);
}

[data-theme="dark"] .knowledge-test-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .knowledge-test-close {
  color: #9bb8d8;
}

[data-theme="dark"] .knowledge-test-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8f0ff;
}

[data-theme="dark"] .knowledge-test-card h3 {
  color: #f0c040;
}

[data-theme="dark"] .knowledge-test-help {
  color: #9bb8d8;
}

[data-theme="dark"] .knowledge-test-progress {
  color: #b8cce3;
}

[data-theme="dark"] .knowledge-test-question {
  color: #e8f0ff;
}

[data-theme="dark"] .knowledge-test-option {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #d8e8ff;
}

[data-theme="dark"] .knowledge-test-option.is-selected {
  border-color: rgba(240, 180, 41, 0.7);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.5) inset;
  background: rgba(240, 180, 41, 0.12);
}

[data-theme="dark"] .knowledge-test-option.is-correct {
  border-color: #4caf7d;
  background: rgba(76, 175, 125, 0.16);
}

[data-theme="dark"] .knowledge-test-option.is-wrong {
  border-color: #e0685a;
  background: rgba(224, 104, 90, 0.16);
}

[data-theme="dark"] .knowledge-test-feedback {
  color: #b8cce3;
}

[data-theme="dark"] .knowledge-test-feedback.is-correct {
  color: #6fd9a6;
}

[data-theme="dark"] .knowledge-test-feedback.is-wrong {
  color: #f29080;
}

[data-theme="dark"] .knowledge-test-feedback.is-final {
  color: #f0c040;
}

[data-theme="dark"] .knowledge-test-next-btn {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .knowledge-test-restart-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #e8f0ff;
}

[data-theme="dark"] .knowledge-test-result-link {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
}

/* ── "Upgrade to Pro" (IELTS course plans) modal ──
   Same idea as the placement-test modal: keep each plan card's accent
   identity (indigo/blue for the regular tier, orange for "Express"), but
   move the backgrounds from bright white-to-pale-blue gradients to the same
   midnight-navy gradient the rest of the dark theme's cards use, with light
   text and the accent colours carried through the radial highlights, badges,
   borders & buttons — so the pricing cards glow against the night sky rather
   than flashing white over it. The colourful badges, checkmark icons and
   price buttons already read fine on dark — only their gradients are tuned
   slightly softer here to avoid looking too "neon" against the deep navy. */
[data-theme="dark"] .upgrade-modal {
  background: rgba(5, 12, 24, 0.72);
}

[data-theme="dark"] .upgrade-modal-card {
  background: linear-gradient(180deg, #122039 0%, #0a1628 100%);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.55);
}

/* The hero band (.upgrade-modal-title) keeps its bold gradient + white text
   in both themes by design — it reads as a constant brand accent rather than
   a theme-dependent surface, so no dark-theme override is needed for it or
   for the close / admin buttons that sit on top of it. */

/* ────────────────────────────────────────────────────────────────────────
   "Upgrade to Pro" plan cards — dark theme, rebuilt from scratch.
   Out: frosted "glass + glow" panes lit from within with diffuse haze.
   In: confident matte panels (solid gradient, no blur) that keep their
   colour identity concentrated into two crisp accents — a glowing hairline
   along the top inner edge, and a single soft pool of light tucked into one
   corner — plus a quieter, outline-based icon language (ring checkmarks,
   hairline "stamp" badge, bordered chips) instead of filled glowing bubbles.
   Regular tiers read in cool indigo/violet; "Express" is rebuilt end-to-end
   in the site's established gold "premium" vocabulary — a gilded VIP tier,
   not just a recoloured twin. */

[data-theme="dark"] .upgrade-plan-card {
  background-color: transparent;
  background-image: none !important;
  background: linear-gradient(175deg, #16294a 0%, #101f3a 48%, #0a1422 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* One soft pool of light in the upper-left corner — depth without smearing
   colour across the whole surface; the card stays "matte". */
[data-theme="dark"] .upgrade-plan-card::before {
  background: radial-gradient(560px 280px at 6% -10%, rgba(108, 138, 255, 0.16), transparent 64%);
  opacity: 1;
}

/* The tier's colour identity lives in one crisp glowing hairline tucked
   just inside the top edge — like a thin neon filament, not a halo bleeding
   outward across the card. */
[data-theme="dark"] .upgrade-plan-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg, rgba(108, 138, 255, 0) 0%, rgba(124, 150, 255, 0.9) 50%, rgba(108, 138, 255, 0) 100%);
  box-shadow: 0 0 16px 1px rgba(108, 138, 255, 0.45);
  pointer-events: none;
}

[data-theme="dark"] .upgrade-plan-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* "Express" — same matte material, but the corner pool and top filament
   shift to molten gold, and the plan name itself warms to soft cream, so
   the whole card reads as gilded rather than just "badge-deep". */
[data-theme="dark"] .upgrade-plan-card--express::before {
  background: radial-gradient(560px 280px at 6% -10%, rgba(247, 200, 100, 0.20), transparent 64%);
}

[data-theme="dark"] .upgrade-plan-card--express::after {
  background: linear-gradient(90deg, rgba(247, 205, 120, 0) 0%, rgba(250, 214, 140, 0.95) 50%, rgba(247, 205, 120, 0) 100%);
  box-shadow: 0 0 16px 1px rgba(247, 200, 100, 0.5);
}

/* Plan head — the glowing gradient divider is gone; in its place, a short
   solid accent bar centred under the name. Quieter, more "etched into the
   card" than "lit from below". */
[data-theme="dark"] .upgrade-plan-head {
  border-bottom-color: transparent;
  padding-bottom: 20px;
}

[data-theme="dark"] .upgrade-plan-head::after {
  content: "";
  left: 50%;
  right: auto;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6c8aff, #9c8bff);
  transform: translateX(-50%);
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-plan-head::after {
  width: 120px;
  background: linear-gradient(90deg, #f7d774, #c8860a);
}

[data-theme="dark"] .upgrade-plan-card:hover .upgrade-plan-head::after {
  width: 72px;
}

[data-theme="dark"] .upgrade-plan-card--express:hover .upgrade-plan-head::after {
  width: 156px;
}

[data-theme="dark"] .upgrade-plan-head h4 {
  color: #eef3ff;
  letter-spacing: 0.3px;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-plan-head h4 {
  color: #fbe8bb;
}

/* The "Express" tag is now a hairline stamp — outlined, not filled, with a
   small star mark; closer to a wax-seal mark of distinction than a sticker. */
[data-theme="dark"] .upgrade-badge--express {
  background: rgba(247, 205, 120, 0.08);
  border: 1px solid rgba(247, 205, 120, 0.5);
  color: #f7d774;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 8px 16px;
  box-shadow: none;
}

[data-theme="dark"] .upgrade-badge--express::before {
  content: "\2605";
  margin-right: 6px;
  font-size: 0.78em;
  vertical-align: 1px;
}

[data-theme="dark"] .upgrade-plan-subtitle {
  color: #8ba3c8;
  letter-spacing: 0.3px;
}

[data-theme="dark"] .upgrade-feature-list li {
  color: #d3deef;
}

/* Checkmarks switch from filled glowing bubbles to slim outlined rings —
   quieter and more editorial, so the copy leads rather than the icon. */
[data-theme="dark"] .upgrade-feature-list li::before {
  background: transparent;
  border: 1.5px solid rgba(124, 150, 255, 0.55);
  border-radius: 50%;
  color: #9db1ff;
  box-shadow: none;
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-feature-list li::before {
  border-color: rgba(247, 205, 120, 0.6);
  color: #f7d774;
  background: transparent;
  box-shadow: none;
}

/* CTA — solid, confident colour blocks instead of long diagonal gradients;
   the lift-and-deepen on hover carries the "premium" feel, not a glow. */
[data-theme="dark"] .upgrade-plan-price-btn {
  background: linear-gradient(180deg, #4a5ee3, #303fc0);
  color: #f1f4ff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 32px rgba(15, 23, 70, 0.42);
}

[data-theme="dark"] .upgrade-plan-price-btn:hover {
  box-shadow: 0 20px 40px rgba(15, 23, 70, 0.52);
}

[data-theme="dark"] .upgrade-off-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-plan-price-btn {
  background: linear-gradient(180deg, #f6d27d, #d9a52e);
  color: #2a1d04;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 16px 32px rgba(150, 108, 14, 0.36);
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-plan-price-btn:hover {
  box-shadow: 0 20px 40px rgba(150, 108, 14, 0.46);
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-old-price {
  color: rgba(60, 42, 8, 0.6);
  text-decoration-color: rgba(60, 42, 8, 0.65);
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-off-badge {
  background: rgba(42, 29, 4, 0.12);
  border: 1px solid rgba(42, 29, 4, 0.4);
  color: #2a1d04;
}

[data-theme="dark"] .upgrade-plan-card--express .upgrade-new-price {
  color: #2a1d04;
}

/* ── Contact section ── */
[data-theme="dark"] .contact-section {
  background: linear-gradient(180deg, #0a1628 0%, #060e1f 100%);
}

[data-theme="dark"] .contact-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

[data-theme="dark"] .contact-form,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .contact-est-block {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .contact-est-label,
[data-theme="dark"] .contact-est-year {
  color: #f0c040;
}

[data-theme="dark"] .contact-est-tagline {
  color: #9bb8d8;
}

[data-theme="dark"] .contact-est-facts li {
  color: #d8e8ff;
}

[data-theme="dark"] .contact-form h3,
[data-theme="dark"] .contact-info h3 {
  color: #e8f0ff;
}

[data-theme="dark"] .contact-info p,
[data-theme="dark"] .contact-status {
  color: #9bb8d8;
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  color: #d8e8ff;
}

[data-theme="dark"] .contact-submit-btn {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
  border-color: rgba(240, 180, 41, 0.5);
}

[data-theme="dark"] .partners-strip {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 50%, #0d1e38 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 36px rgba(0,0,0,0.4);
}

[data-theme="dark"] .partners-strip-label {
  color: #f0c040;
}

[data-theme="dark"] .partner-item {
  background: linear-gradient(135deg, #1c2f52 0%, #152341 100%);
  border-color: rgba(26, 111, 168, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .partner-item:hover {
  border-color: rgba(26, 111, 168, 0.7);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .partner-name {
  color: #e8f0ff;
}

/* ── Level upgrade banner (shown on level pages for non-subscribers) ── */
.level-upgrade-banner {
  margin: 0 0 32px;
  padding: 0;
}

.level-upgrade-banner-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #0d2340 0%, #1a5a96 60%, #0d2340 100%);
  border-radius: 18px;
  padding: 18px 24px;
  box-shadow: 0 6px 24px rgba(13,35,64,.18);
  position: relative;
  overflow: hidden;
}

.level-upgrade-banner-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 0%, rgba(100,180,255,.12) 0%, transparent 65%);
  pointer-events: none;
}

.level-upgrade-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.level-upgrade-text {
  flex: 1;
  min-width: 0;
}

.level-upgrade-title {
  margin: 0 0 3px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.level-upgrade-sub {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}

.level-upgrade-sub strong {
  color: #7dd3fc;
  font-weight: 800;
}

.level-upgrade-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  padding: 10px 26px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(245,158,11,.4) !important;
  transition: transform .2s, box-shadow .2s !important;
  white-space: nowrap;
}

.level-upgrade-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(245,158,11,.5) !important;
}

.level-upgrade-loading {
  text-align: center;
  padding: 28px;
  color: #4a5f76;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .level-upgrade-banner-inner {
    flex-direction: column;
    text-align: center;
    padding: 16px 18px;
    gap: 12px;
  }
  .level-upgrade-text { min-width: unset; }
}

/* ── (original index.html upgrade-banner below) ── */
.upgrade-banner {
  margin-top: 26px;
  padding: 24px 28px;
  border-radius: 28px;
  background: linear-gradient(90deg, #1b3760, #2f2cb5);
  box-shadow: 0 18px 42px rgba(27, 55, 96, 0.35), 0 6px 16px rgba(47, 44, 181, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.upgrade-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(27, 55, 96, 0.42), 0 8px 20px rgba(47, 44, 181, 0.28);
}

.upgrade-text h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 2rem;
}

.upgrade-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.15rem;
}

.upgrade-btn {
  background: #f3f4f8;
  color: #4e3af1;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.upgrade-btn:hover {
  filter: brightness(0.97);
}

.results-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(12, 20, 32, 0.58);
  z-index: 1035;
  padding: 0;
}

.results-modal.is-open {
  display: flex;
}

.results-modal-card {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  padding: 0 36px 40px;
  position: relative;
  border: 0;
}

.results-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a94a2;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.results-modal-close:hover {
  background: #eef3fa;
  color: #24344a;
}

.results-modal-level-header {
  margin: 0 -36px 16px;
  padding: 12px 0;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 5;
}

.results-standalone {
  padding: 0 0 40px;
}

.results-modal-card-standalone {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  padding: 34px 0 40px;
}

.results-modal-level-header .btn {
  right: 4%;
}

.results-modal-title {
  margin: 0 0 12px;
  text-align: center;
  color: #102740;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  letter-spacing: 0.4px;
}

.results-modal-lead {
  margin: 0 auto 18px;
  max-width: 720px;
  text-align: center;
  color: #2f4c6b;
  font-size: 1.15rem;
  line-height: 1.6;
  padding: 16px 22px;
  border-radius: 14px;
  border: 1px solid rgba(18, 42, 64, 0.16);
  background: #f6f9fd;
}

.results-lead-kicker {
  display: block;
  font-weight: 900;
  color: #102740;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.results-lead-text {
  display: block;
}

.results-modal-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  gap: 16px;
  margin: 0 auto 18px;
  max-width: 620px;
  justify-content: center;
}

.results-modal-tab {
  border: 1px solid rgba(18, 42, 64, 0.2);
  background: #ffffff;
  color: #1e3348;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.results-modal-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17, 34, 52, 0.15);
}

.results-modal-tab.is-active {
  background: #102a42;
  color: #ffffff;
  border-color: #102a42;
  box-shadow: 0 10px 22px rgba(10, 26, 41, 0.2);
}

.results-modal-note {
  margin: 0 auto 22px;
  max-width: 760px;
  text-align: center;
  color: #1f3a55;
  font-weight: 600;
  padding: 16px 22px;
  border-radius: 14px;
  background: #eef3f8;
  border: 1px solid rgba(18, 42, 64, 0.12);
  font-size: 1.05rem;
}

.results-modal-subtitle {
  margin: 0 0 16px;
  text-align: center;
  font-size: 3.6rem;
  letter-spacing: 1px;
  color: #2b4158;
}

.results-modal-subtitle--spaced {
  margin-top: 210px;
}

.results-modal-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
  margin-top: 144px;
}

@media (max-width: 640px) {
  .results-modal-card-standalone {
    padding: 26px 16px 34px;
    box-sizing: border-box;
  }

  .results-modal-tabs {
    width: 100%;
    max-width: 520px;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .results-modal-tab {
    width: 100%;
  }

  .results-modal-tiles {
    grid-template-columns: 1fr;
    margin-top: 28px;
    gap: 16px;
  }

  .results-modal-tile:nth-child(3n + 2) {
    --tile-offset: 0px;
  }

  .results-modal-tile {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "cert quote"
      "name quote";
    gap: 12px;
    align-items: stretch;
  }

  .results-modal-certificate {
    grid-area: cert;
    height: auto;
    width: 100%;
    margin: 0;
    align-self: stretch;
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(16, 37, 58, 0.16);
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(13, 27, 42, 0.12);
    aspect-ratio: 4 / 3;
  }

  .results-modal-certificate img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  .results-modal-person {
    display: contents;
  }

  .results-modal-name {
    grid-area: name;
    margin: 0;
    padding: 12px 10px;
    border-radius: 16px;
    border: 1px solid rgba(16, 37, 58, 0.14);
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: 0 10px 20px rgba(13, 27, 42, 0.08);
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .results-modal-quote {
    grid-area: quote;
    margin: 0;
    padding: 16px 12px;
    border-radius: 18px;
    border: 1px solid rgba(16, 37, 58, 0.14);
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    box-shadow: 0 12px 24px rgba(13, 27, 42, 0.1);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .results-modal-tile:nth-child(even) {
    grid-template-areas:
      "quote cert"
      "quote name";
  }
}

.results-modal-tile {
  grid-row: auto;
}

.results-modal-tile:nth-child(3n + 2) {
  --tile-offset: -64px;
}

.results-modal-tile {
    border: 1px solid rgba(16, 37, 58, 0.2);
    border-radius: 18px;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(13, 27, 42, 0.08);
    --tile-offset: 0px;
    transform: translateY(var(--tile-offset));
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

.results-modal-tile:hover {
  transform: translateY(var(--tile-offset)) scale(1.03);
  box-shadow: 0 16px 30px rgba(13, 27, 42, 0.16);
}

.results-modal-person {
	    display: flex;
	    flex-direction: column;
	    gap: 4px;
	    text-align: center;
	    width: 100%;
	    max-width: 440px;
	  }

.results-modal-person--image {
  --results-modal-person-image: none;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(16, 37, 58, 0.18);
  box-sizing: border-box;
}

.results-modal-person--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--results-modal-person-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(7px);
  transform: scale(1.04);
  opacity: 0.88;
  z-index: 0;
}

.results-modal-person--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  z-index: 0;
}

.results-modal-person--image .results-modal-name,
.results-modal-person--image .results-modal-quote {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 18px rgba(0, 0, 0, 0.12);
}

.results-modal-name {
  font-weight: 800;
  font-size: 1.35rem;
  color: #102740;
}

.results-modal-quote {
  color: #4a5f76;
  font-size: 1.15rem;
  font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  font-weight: 700;
}

.results-modal-certificate {
    width: 100%;
    max-width: 520px;
    height: clamp(240px, 60vw, 660px);
    border-radius: 12px;
    border: 1px solid rgba(16, 37, 58, 0.2);
    display: grid;
  place-items: center;
  align-self: center;
  margin: 16px auto 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #4a5f76;
  background: #f3f6fb;
  overflow: hidden;
}

.results-modal-certificate img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Mobile-only: certificates/quotes mosaic (results.html) */
.results-mobile-masonry {
  display: none;
}

@media (max-width: 640px) {
  .results-modal-card-standalone {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  .results-modal-title,
  .results-modal-lead {
    width: 100%;
    box-sizing: border-box;
  }

  .results-modal-tabs {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center;
    box-sizing: border-box;
  }

  .results-modal-tab {
    width: 100% !important;
    justify-self: center;
  }

  .results-modal-subtitle--spaced {
    margin-top: 54px !important;
  }

  .results-mobile-masonry.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 14px;
    gap: 8px;
    width: 100%;
    max-width: 520px;
    margin: 10px auto 26px;
    box-sizing: border-box;
  }

  .results-mobile-masonry.is-active + .results-modal-tiles {
    display: none !important;
  }

  .results-masonry-item {
    grid-column: var(--col, auto);
    grid-row-end: span var(--span, 10);
    min-width: 0;
  }

  .results-masonry-cert {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(16, 37, 58, 0.14);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 18px 34px rgba(13, 27, 42, 0.12);
  }

  .results-masonry-cert-media {
    --cert-ratio: 3 / 4;
    position: relative;
    background: #ffffff;
    aspect-ratio: var(--cert-ratio);
  }

  .results-masonry-cert-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
  }

  .results-masonry-cert-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 14px;
    color: #4a5f76;
    font-weight: 800;
    background: linear-gradient(180deg, #ffffff, #f1f6fd);
  }

  .results-masonry-cert-name {
    padding: 8px 10px;
    text-align: center;
    font-weight: 800;
    color: #102740;
    border-top: 1px solid rgba(16, 37, 58, 0.12);
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow: 0 -10px 18px rgba(13, 27, 42, 0.06);
    line-height: 1.2;
    font-size: 1rem;
  }

  .results-masonry-quote {
    border-radius: 24px;
    border: 3px solid rgba(16, 37, 58, 0.16);
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    box-shadow: 0 18px 34px rgba(13, 27, 42, 0.12);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 12px 10px;
    min-height: 90px;
    font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-weight: 850;
    color: #102740;
    font-size: 0.98rem;
    line-height: 1.35;
  }
}

.certificate-viewer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  z-index: 2000;
}

.certificate-viewer.is-open {
  display: flex;
}

.certificate-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 17, 28, 0.62);
  backdrop-filter: blur(10px);
}

.certificate-viewer__dialog {
  position: relative;
  width: auto;
  max-width: 98vw;
  max-height: 98vh;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.certificate-viewer__img {
  max-width: 98vw;
  max-height: 98vh;
  width: auto;
  height: auto;
  display: block;
  background: #ffffff;
}

.certificate-viewer__close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(18, 42, 64, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #102740;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 28px rgba(13, 27, 42, 0.18);
}

.certificate-viewer__close:hover {
  transform: scale(1.04);
}

.course-celebration {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 19, 34, 0.58);
  z-index: 2100;
}

.course-celebration.is-open {
  display: flex;
}

.course-celebration__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.course-celebration__card {
  position: relative;
  width: min(92vw, 560px);
  border-radius: 22px;
  padding: 22px 18px 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

.course-celebration__title {
  margin: 0 0 8px;
  font-size: 1.8rem;
  font-weight: 900;
  color: #102740;
  letter-spacing: 0.2px;
}

.course-celebration__subtitle {
  margin: 0 0 14px;
  color: #2f4c6b;
  font-weight: 700;
}

.course-celebration__certificate {
  position: relative;
  margin: 0 0 16px;
  min-height: 60px;
}

.course-celebration__certificate-loading {
  margin: 18px 0;
  color: #2f4c6b;
  font-weight: 600;
  font-size: 0.95rem;
}

.course-celebration__certificate-canvas {
  display: none;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.course-celebration__certificate.is-ready .course-celebration__certificate-loading {
  display: none;
}

.course-celebration__certificate.is-ready .course-celebration__certificate-canvas {
  display: block;
}

.course-celebration__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.course-celebration__download {
  background: linear-gradient(135deg, #f2c14e, #b8790f) !important;
  color: #1a1200 !important;
  border: none !important;
  padding: 12px 18px !important;
  box-shadow: 0 16px 34px rgba(184, 121, 15, 0.32) !important;
}

.course-celebration__download:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none !important;
}

.course-celebration__close {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 18px !important;
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.32) !important;
}

/* This card never had a dark-theme rule at all, so it stayed a plain white
   glass card even in dark mode - same dark-glass + gold-accent recipe as
   the other "celebration/completion" cards on the site (.site-notice-card,
   .subscription-expired-card etc). The certificate canvas itself already
   has its own fixed navy/gold design regardless of site theme - only the
   surrounding modal card needs this. */
[data-theme="dark"] .course-celebration__card {
  background: linear-gradient(160deg, #101f3a 0%, #0d1e38 100%);
  border-color: rgba(240, 180, 41, 0.28);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .course-celebration__title {
  color: #e8f0ff;
}

[data-theme="dark"] .course-celebration__subtitle,
[data-theme="dark"] .course-celebration__certificate-loading {
  color: #9bb8d8;
}

.knowledge-test-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 19, 34, 0.56);
  z-index: 1040;
  padding: 18px;
}

.knowledge-test-modal.is-open {
  display: flex;
}

.knowledge-test-modal[data-keep-open="1"] {
  display: flex;
}

.knowledge-test-card {
  width: min(1040px, 100%);
  max-height: min(92vh, 880px);
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(20, 38, 66, 0.16);
  padding: 24px 20px 20px;
  position: relative;
}

.knowledge-test-close {
  position: absolute;
  top: 12px;
  right: 14px;
  /* Without this, the title below (.knowledge-test-card h3, also
     position: relative for its underline ::after) is a full-width block
     that comes later in the DOM - two positioned siblings with equal
     z-index:auto stack in DOM order, so the title painted (and captured
     clicks) over this button's top-right corner. That made the close
     button unclickable by real mouse clicks once the placement test
     result screen showed its (often two-line) title, and since this
     modal has no backdrop-click/Escape close path, the modal - and the
     page's scroll lock with it - was then stuck with no way out. */
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a94a2;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.knowledge-test-close:hover {
  background: #eef3fa;
  color: #24344a;
}

/* Title now carries a short accent underline — same "etched, not lit"
   language as the redesigned Upgrade-modal headings, so the quiz reads as
   part of the same family rather than a leftover default look. */
.knowledge-test-card h3 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 14px;
  color: #123253;
  font-size: 2rem;
  letter-spacing: 0.2px;
}

.knowledge-test-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f4f7a, #5b9bdb);
}

.knowledge-test-help {
  margin: 0 0 10px;
  color: #31506f;
  font-size: 1rem;
}

/* Progress label becomes a small outlined "stamp" chip instead of plain
   bold text — quieter, more deliberate, matches the redesigned badges. */
.knowledge-test-progress {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  color: #1f4f7a;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(31, 79, 122, 0.07);
  border: 1px solid rgba(31, 79, 122, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
}

.knowledge-test-question {
  margin: 0 0 12px;
  color: #14395c;
  font-size: 1.5rem;
  line-height: 1.3;
}

.knowledge-test-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Options redesigned around a custom radio-ring marker (an outlined circle
   that fills, checks or crosses depending on state) — the same quieter,
   outline-first icon language as the redesigned plan-card checkmarks, plus
   a gentle lift on hover so the quiz feels tactile rather than static. */
.knowledge-test-option {
  position: relative;
  width: 100%;
  border: 1px solid #e1e8f1;
  background: #ffffff;
  border-radius: 14px;
  padding: 13px 16px 13px 50px;
  text-align: left;
  color: #1c3a5c;
  font-size: 1rem;
  box-shadow: 0 2px 10px rgba(20, 38, 66, 0.04);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.knowledge-test-option::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  border: 1.5px solid #b9c8da;
  background: #ffffff;
  transition: border-color 160ms ease, background 160ms ease;
}

.knowledge-test-option:hover {
  border-color: #aebfd6;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 38, 66, 0.08);
}

.knowledge-test-option.is-selected {
  border-color: #1f4f7a;
  background: #f2f7fd;
  box-shadow: 0 2px 10px rgba(20, 38, 66, 0.04);
}

.knowledge-test-option.is-selected::before {
  border-color: #1f4f7a;
  background: radial-gradient(circle, #1f4f7a 0 6px, transparent 7px);
}

.knowledge-test-option.is-correct {
  border-color: #2b7a4b;
  background: #eef9f2;
}

.knowledge-test-option.is-correct::before {
  content: "\2713";
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #2b7a4b;
  background: #2b7a4b;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
}