:root {
  --ink: #0b0e17;
  --ink-soft: #171b29;
  --bg: #ffffff;
  --surface-alt: #eeeff8;
  --text: #14161f;
  --muted: #656b7e;
  --line: #e7e8f0;
  --accent: #5b4dfb;
  --accent-dark: #4636e0;
  --accent-soft: #eeecff;
  /* Filled accent surfaces that carry white text (buttons, badges, active
     tabs): kept separate from --accent, which is also a text colour. */
  --accent-fill: #5b4dfb;
  --accent-fill-hover: #4636e0;
  --focus-ring: var(--accent-dark);
  --gold: #f2b544;
  --max-width: 1160px;
  --radius: 14px;
  --radius-sm: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --shadow-sm: 0 8px 20px rgba(20, 22, 31, 0.08);
  --shadow-md: 0 16px 40px rgba(20, 22, 31, 0.1);
  --shadow-brand: 0 14px 32px rgba(91, 77, 251, 0.28);
  --success: #146c43;
  --success-soft: rgba(20, 108, 67, 0.12);
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.1);
  --page-bg: #f5f5fb;
  --surface: #ffffff;
  --glow-a: rgba(91, 77, 251, 0.11);
  --glow-b: rgba(143, 125, 255, 0.09);
  --pattern: rgba(91, 77, 251, 0.06);
  --motif: rgba(91, 77, 251, 0.16);
  --motif-on-dark: rgba(150, 135, 255, 0.3);
  --shadow-card: 0 1px 2px rgba(20, 22, 31, 0.04), 0 10px 28px rgba(60, 50, 140, 0.07);
  --grain-opacity: 0.05;
  --edge-light: rgba(255, 255, 255, 0.9);
  --scroll-thumb: rgba(91, 77, 251, 0.4);
}

:root[data-theme="dark"] {
  --bg: #0f1320;
  --surface-alt: #1a2036;
  --text: #eef0f6;
  --muted: #9096ab;
  --line: #272c40;
  --accent: #8376ff; /* text & outline accent: >= 4.6:1 on every dark surface */
  --accent-dark: #c7c0ff;
  --accent-soft: rgba(91, 77, 251, 0.18);
  /* Deeper than --accent so white text passes AA (4.61:1; hover 5.75:1). */
  --accent-fill: #6c5ef5;
  --accent-fill-hover: #5b4de6;
  --success: #6fe3a8;
  --success-soft: rgba(20, 108, 67, 0.22);
  --danger: #ff8a80;
  --danger-soft: rgba(179, 38, 30, 0.18);
  --page-bg: #0d111d;
  --surface: #181e35;
  --glow-a: rgba(91, 77, 251, 0.2);
  --glow-b: rgba(70, 90, 220, 0.14);
  --pattern: rgba(160, 170, 255, 0.05);
  --motif: rgba(150, 135, 255, 0.2);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --grain-opacity: 0.08;
  --edge-light: rgba(255, 255, 255, 0.05);
  --scroll-thumb: rgba(150, 135, 255, 0.4);
}

[data-theme="dark"] .user-menu-dropdown,
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .role-card,
[data-theme="dark"] .btn-manage,
[data-theme="dark"] .manage-form input,
[data-theme="dark"] .manage-form select,
[data-theme="dark"] .manage-form textarea,
[data-theme="dark"] .inbox-filter-btn {
  background: var(--surface-alt);
  color: var(--text);
}

[data-theme="dark"] .form-message.error { background: rgba(179, 38, 30, 0.18); color: #ff8a80; }
[data-theme="dark"] .form-message.success { background: rgba(20, 108, 67, 0.22); color: #6fe3a8; }
[data-theme="dark"] .role-badge-admin { background: rgba(150, 101, 11, 0.25); color: #f2c46d; }
[data-theme="dark"] .inbox-status-resolved { background: rgba(20, 108, 67, 0.22); color: #6fe3a8; }
[data-theme="dark"] .review-correct-answer { color: #6fe3a8; }
[data-theme="dark"] .btn-manage-danger:hover { border-color: #ff8a80; color: #ff8a80; }
[data-theme="dark"] .user-menu-dropdown button { color: #ff8a80; }
[data-theme="dark"] .review-item.review-correct { border-left-color: #2f9d6b; }
[data-theme="dark"] .review-item.review-incorrect { border-left-color: #c94a3f; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
/* Header structure. Its colours, sizes and states are in the "Site header"
   block at the end of this file (the Homepage bar, shared by every page). */
.site-header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  z-index: 200;
}

.header-inner {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 32px;
}

/* Brand lockup: the LH mark (a self-contained ink tile, so one file works
   on light and dark surfaces) plus the wordmark as live text. The mark's
   stroke weight matches the wordmark's stems at this size. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.035em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;
}

.logo-mark {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
}

.nav a::after {
  content: "";
  position: absolute;
  height: 2px;
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  display: block;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  /* <button class="btn"> does not inherit the page font on its own (form
     controls use the system face), so take the site's Plus Jakarta Sans. */
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

/* The lift is for mouse/trackpad only (touch would leave it stuck after a
   tap) and is dropped under reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); }
.btn[hidden] { display: none; }

.btn-lg { padding: 15px 32px; font-size: 1rem; }

.btn-primary {
  background: var(--accent-fill);
  color: #fff;
  box-shadow: 0 8px 24px rgba(91, 77, 251, 0.35);
}

.btn-primary:hover {
  background: var(--accent-fill-hover);
  box-shadow: 0 14px 32px rgba(91, 77, 251, 0.45);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-ghost:hover { border-color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Purchase buttons while checkout isn't live: visibly unavailable, not a link */
.btn-coming-soon,
.btn-coming-soon:hover {
  gap: 8px;
  background: var(--surface-alt);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  font-family: inherit;
}

.btn-coming-soon svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 400px) {
  .btn-coming-soon { white-space: normal; text-wrap: balance; text-align: center; }
  .btn-coming-soon.btn-lg { padding-left: 18px; padding-right: 18px; }
}

.btn-logout {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-logout:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* User menu (avatar + dropdown) */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 50%;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #fff;
  min-width: 230px;
  padding: 8px;
  z-index: 300;
}

.user-menu-info {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.user-menu-info strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
}

.user-menu-info span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
}

.user-menu-dropdown a,
.user-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
  background: var(--surface-alt);
}

.user-menu-dropdown button {
  color: #b3261e;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  border-radius: 0 0 8px 8px;
}

.user-menu-dropdown button.dropdown-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  margin-top: 0;
  border-top: none;
  padding-top: 9px;
  border-radius: 8px;
}

.dropdown-theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }

[data-theme="dark"] .user-menu-dropdown button.dropdown-theme-toggle { color: var(--text); }

/* Hero */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 640px;
  background: radial-gradient(closest-side, rgba(91, 77, 251, 0.45), transparent 70%),
              radial-gradient(closest-side at 80% 20%, rgba(242, 181, 68, 0.25), transparent 60%);
  pointer-events: none;
  animation: glow-shift 14s ease-in-out infinite;
}

.hero-inner {
  position: relative;
  padding: 128px 24px 96px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  perspective: 1000px;
}

.hero-copy {
  max-width: 600px;
  flex: 1 1 480px;
}

.hero-illustration {
  flex: 1 1 320px;
  max-width: 380px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

.hero-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Motion */
@keyframes glow-shift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -14px) scale(1.05); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

.float-slow,
.float-med,
.float-fast {
  transform-box: fill-box;
  transform-origin: center;
}

.float-slow { animation: float-y 6.5s ease-in-out infinite; }
.float-med { animation: float-y 4.8s ease-in-out infinite; animation-delay: 0.4s; }
.float-fast { animation: float-y 3.6s ease-in-out infinite; animation-delay: 0.9s; }
.pulse-soft { animation: pulse-soft 3.2s ease-in-out infinite; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .float-slow,
  .float-med,
  .float-fast,
  .pulse-soft {
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(91, 77, 251, 0.15);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.eyebrow-dark {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

/* The page hero is dark in both themes: the violet accent can't reach AA on
   it, so its eyebrow takes the light lilac (>= 7:1 on the pill). */
.page-hero .eyebrow { color: #c7c0ff; }

.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  margin-bottom: 24px;
  color: #fff;
}

.accent-text { color: var(--gold); }

.hero-sub {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Sections */
.section {
  padding: 96px 0;
}

.section-alt { background: var(--surface-alt); }

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  margin: 16px 0;
}

.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  box-shadow: 0 16px 40px rgba(20, 22, 31, 0.08);
  transform: translateY(-3px);
  border-color: transparent;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-icon svg { width: 24px; height: 24px; }

.service-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.service-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Stats band */
.stats-band {
  background: var(--ink);
  color: #fff;
  padding: 64px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat { display: flex; flex-direction: column; gap: 8px; }

.stat-num {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.stat-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

/* Process */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step {
  padding: 8px 0;
  border-top: 2px solid var(--line);
  padding-top: 20px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step:hover {
  transform: translateY(-4px);
}

.process-step:hover .process-num {
  background: var(--accent-fill);
  color: #fff;
}

.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 16px;
  transition: background 0.25s ease, color 0.25s ease;
}

/* On the tinted disc the dark accent is under AA; the lilac passes. */
[data-theme="dark"] .process-num { color: var(--accent-dark); }

.process-step h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.process-step p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Testimonial */
.testimonial-section { padding: 80px 0; }

.testimonial {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

.testimonial::before {
  content: "\201C";
  display: block;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-soft);
  margin-bottom: 4px;
}

.testimonial p {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 28px;
}

.testimonial footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-name { font-weight: 700; }

.testimonial-role {
  color: var(--muted);
  font-size: 0.9rem;
}

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--accent), #6354ee);
  color: #fff;
  padding: 80px 0;
}

.cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-inner h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
}

.cta-inner p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: 12px;
}

/* On the light-mode violet band the translucent white is under AA; solid
   white on the deepened band is >= 4.68:1 (the dark band is unchanged). */
:root:not([data-theme="dark"]) .cta-inner p { color: #fff; }

.cta-band .btn-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cta-band .btn-primary:hover { background: var(--ink); color: #fff; }

/* Footer */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 72px;
  padding-bottom: 48px;
}

.footer-brand p {
  margin-top: 14px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 280px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col h2 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  transition: color 0.15s ease;
}

.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Simple pages (about/contact) */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding: 96px 0 72px;
}

.page-hero .hero-glow {
  height: 360px;
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  margin-bottom: 16px;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  max-width: 560px;
}

.page-section {
  padding: 80px 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.about-grid h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.about-grid p {
  color: var(--muted);
  margin-bottom: 16px;
}

.value-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.icon-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-bullet svg { width: 18px; height: 18px; }

.value-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

/* Static rows: they aren't interactive, so no hover response. */
.value-item h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.value-item p {
  color: var(--muted);
  font-size: 0.92rem;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-info-item h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.contact-info-item a,
.contact-info-item p {
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  display: block;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  width: 100%;
  background: #fff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}

.input-icon { position: relative; }

.input-icon svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.input-icon input { padding-left: 42px; }

/* The header's Log In link (its colours and states are in the "Site header"
   block at the end of this file). */
.btn-header-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid;
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Course cards */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.course-card:hover {
  box-shadow: 0 20px 48px rgba(20, 22, 31, 0.1);
  transform: translateY(-6px);
}

.course-card.featured {
  position: relative;
  border-color: var(--accent);
  background: var(--accent-soft);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(91, 77, 251, 0.18);
}

.course-card.featured:hover {
  box-shadow: 0 26px 56px rgba(91, 77, 251, 0.28);
}

.course-badge {
  position: absolute;
  top: 34px;
  right: -18px;
  width: 200px;
  transform: rotate(45deg);
  background: var(--accent-fill);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 5px 0;
  box-shadow: 0 4px 10px rgba(91, 77, 251, 0.35);
}

.course-savings {
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: -4px;
  margin-bottom: 4px;
}

.course-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.course-card h2,
.course-card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.course-card .course-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

/* The featured card's tinted fill is darker than white: the muted grey
   needs a step deeper there to keep AA (>= 5.2:1). */
:root:not([data-theme="dark"]) .course-card.featured .course-desc { color: #5a6072; }

.course-price {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.course-price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

.course-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.course-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.course-features li {
  font-size: 0.9rem;
  color: var(--text);
  padding-left: 24px;
  position: relative;
}

.course-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.3' fill='none' stroke='%235b4dfb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Auth pages */
.auth-section {
  padding: 96px 0;
  display: flex;
  justify-content: center;
}

.auth-card {
  max-width: 440px;
  width: 100%;
}

.auth-card h1 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.auth-sub {
  color: var(--muted);
  margin-bottom: 28px;
  font-size: 0.95rem;
}

.role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

.role-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.role-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

.role-card input { display: none; }

.role-card strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.role-card span {
  font-size: 0.8rem;
  color: var(--muted);
}

.role-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.form-message {
  display: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
}

.form-message.error { display: block; background: #fdecea; color: #b3261e; }
.form-message.success { display: block; background: #e8f7ef; color: #146c43; }

.auth-switch {
  text-align: center;
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted);
}

.auth-switch a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-forgot {
  text-align: right;
  margin: -10px 0 4px;
  font-size: 0.85rem;
}

.auth-forgot a {
  color: var(--muted);
  text-decoration: none;
}

.auth-forgot a:hover { color: var(--accent); }

/* Dashboard */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.dashboard-header-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-avatar {
  width: 76px;
  height: 76px;
  font-size: 1.8rem;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background-size: cover;
  background-position: center;
}

.dashboard-header p.dashboard-user-email {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  max-width: none;
  margin-top: 6px;
}

.dashboard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  row-gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dashboard-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.dashboard-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.role-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.role-badge-student { background: var(--accent-soft); color: var(--accent-dark); }
.role-badge-admin { background: #fdf1da; color: #96650b; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.dashboard-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.dashboard-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 16px;
}

.dashboard-card-icon svg { width: 22px; height: 22px; }

.dashboard-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.dashboard-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

.dashboard-card-progress {
  margin-top: 4px;
}

.dashboard-card-progress .progress-bar-track {
  margin-bottom: 8px;
}

.dashboard-card-progress-text {
  color: var(--muted);
  font-size: 0.9rem;
}

.dashboard-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dashboard-card-link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Course player */
.course-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 96px;
  gap: 40px;
}

.course-sidebar {
  position: sticky;
  top: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.course-back {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 16px;
}

.course-back:hover { color: var(--accent); }

.page-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.page-hero .back-link:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.course-sidebar-title {
  font-size: 1.15rem;
  margin-bottom: 20px;
}

.course-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.course-sidebar-actions .btn { width: 100%; }

.course-progress {
  margin-bottom: 24px;
}

.course-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.progress-bar-track {
  height: 8px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  /* Intentional: the width is the data (set from JS). Only this bar relays
     out (the track is fixed-size), and scaleX would squash the round ends.
     impeccable-disable-next-line layout-transition */
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill { transition: none; }
}

.module-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 20px 0 8px;
}

.module:first-child .module-heading { margin-top: 0; }

.lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
}

.lesson-item:hover { background: var(--surface-alt); }

.lesson-item.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.lesson-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  font-size: 0.7rem;
  line-height: 15px;
  text-align: center;
  color: #fff;
}

.lesson-item.completed .lesson-check {
  background: var(--accent);
  border-color: var(--accent);
}

.lesson-item.lesson-item-quiz { font-style: italic; }
.lesson-item.lesson-item-quiz:not(.active) { color: var(--muted); }

.course-content {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
}

.lesson-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.lesson-duration {
  color: var(--muted);
  font-size: 0.85rem;
}

.course-content h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.lesson-description {
  color: var(--muted);
  margin-bottom: 28px;
}

.lesson-body {
  margin-bottom: 32px;
  line-height: 1.7;
}

.lesson-body p { margin: 0 0 16px; }
.lesson-body ul, .lesson-body ol { margin: 0 0 16px; padding-left: 20px; }
.lesson-body li { margin-bottom: 6px; }

.lesson-body h3 {
  font-size: 1.2rem;
  margin: 36px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.lesson-body figure {
  margin: 0 0 24px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lesson-body figure img { width: 100%; max-width: 560px; display: block; margin: 0 auto; }

.lesson-body figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 10px;
}

.lesson-quiz-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 56px 20px 24px;
  margin-bottom: 28px;
  background: var(--surface-alt);
}

.lesson-quiz-question {
  font-weight: 600;
}

.lesson-quiz-item .lesson-quiz-question { margin: 0 0 14px; }

.lesson-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lesson-quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lesson-quiz-option:hover:not(:disabled) {
  border-color: var(--accent);
}

.lesson-quiz-option:disabled { cursor: default; }

.lesson-quiz-option.correct {
  border-color: #146c43;
  background: rgba(20, 108, 67, 0.12);
  font-weight: 600;
}

.lesson-quiz-option.incorrect {
  border-color: #b3261e;
  background: rgba(179, 38, 30, 0.1);
}

[data-theme="dark"] .lesson-quiz-option.correct { background: rgba(20, 108, 67, 0.22); }
[data-theme="dark"] .lesson-quiz-option.incorrect { background: rgba(179, 38, 30, 0.18); }

.lesson-quiz-feedback {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Higher specificity than .lesson-body p (which also matches this <p>
   and would otherwise win, zeroing out the top margin below). */
.lesson-quiz-item .lesson-quiz-feedback { margin: 32px 0 0; }

.lesson-quiz-feedback.correct {
  background: rgba(20, 108, 67, 0.12);
  border-color: #146c43;
  color: #146c43;
}

.lesson-quiz-feedback.incorrect {
  background: rgba(179, 38, 30, 0.1);
  border-color: #b3261e;
  color: #b3261e;
}

.lesson-quiz-explanation {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 400;
}

.lesson-quiz-item .lesson-quiz-explanation { margin: 16px 0 0; }

.lesson-quiz-explanation::before {
  content: "Explanation";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 4px;
}

/* Text-to-speech "Listen" buttons — a full labeled pill (lesson body,
   practice exam question) and a compact icon-only variant that sits in
   the corner of each quiz question card. */
.btn-listen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-listen:hover { border-color: var(--accent); color: var(--accent); }
.btn-listen.is-speaking { border-color: var(--accent); color: var(--accent); }

.btn-listen svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-listen .listen-icon-stop { display: none; }
.btn-listen.is-speaking .listen-icon-play { display: none; }
.btn-listen.is-speaking .listen-icon-stop { display: block; }

.btn-listen .listen-label-stop { display: none; }
.btn-listen.is-speaking .listen-label { display: none; }
.btn-listen.is-speaking .listen-label-stop { display: inline; }

.btn-listen-sm {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px;
  border-radius: 50%;
}

#lessonListenContainer { margin-bottom: 20px; }
#lessonListenContainer:empty { margin-bottom: 0; }

#examListenContainer { margin-bottom: 20px; }
#examListenContainer:empty { margin-bottom: 0; }

[data-theme="dark"] .lesson-quiz-feedback.correct { background: rgba(20, 108, 67, 0.22); color: #6fe3a8; }
[data-theme="dark"] .lesson-quiz-feedback.incorrect { background: rgba(179, 38, 30, 0.18); color: #ff8a80; }

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lesson-actions {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.lesson-complete-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.lesson-complete-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
}

/* Account settings */
.account-container {
  max-width: 560px;
}

.account-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 860px) {
  .account-container { max-width: 820px; }
  .account-cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.account-card-title {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.account-avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}

/* The upload column takes the space beside the avatar, and drops below it
   only when the Change Photo button no longer fits there (narrow phones). */
.account-avatar-row > div {
  flex: 1 1 0;
  max-width: max-content;
}

/* The real file input stays in the tab order but out of sight; its label is
   the visible Change Photo button and shows the focus ring for it. */
.account-avatar-row input.account-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.account-avatar-row input.account-avatar-input:focus-visible + .btn {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.account-avatar-preview {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
  border: none;
}

.account-avatar-hint {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.account-voice-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 16px;
}

.account-voice-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  display: block;
}

.account-voice-row {
  display: flex;
  gap: 10px;
}

.account-voice-row select {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--bg);
  color: var(--text);
}

.account-voice-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

.account-current-email {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.account-current-email strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Checkout */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.checkout-summary h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.checkout-course-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}

.checkout-course-card h3 {
  font-size: 1.2rem;
  margin: 12px 0 8px;
}

.checkout-course-card .course-desc {
  margin-bottom: 16px;
}

.checkout-course-card .course-features {
  margin-bottom: 0;
}

.checkout-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-dark);
}

.checkout-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 12px;
}

/* Course management (admin) */
.manage-container {
  max-width: 760px;
}

.manage-container #formMessage {
  margin-bottom: 20px;
}

.manage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.manage-view-course-btn {
  margin-right: -12px;
}

.manage-empty {
  color: var(--muted);
  padding: 24px 0;
}

.manage-module-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.manage-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.manage-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.drag-handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
  touch-action: none;
}

.drag-handle:active { cursor: grabbing; }

.manage-module-card.dragging,
.manage-lesson-row.dragging {
  opacity: 0.4;
}

.manage-module-header h3 {
  font-size: 1.05rem;
}

.manage-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-manage {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-manage:hover { border-color: var(--accent); color: var(--accent); }
.btn-manage:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-manage-danger:hover { border-color: var(--danger); color: var(--danger); }

.btn-manage-add {
  margin-top: 8px;
  border-style: dashed;
}

.manage-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manage-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.manage-lesson-row:hover { border-color: var(--line); }

.manage-lesson-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.manage-lesson-info strong {
  font-size: 0.9rem;
}

.manage-lesson-meta {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: capitalize;
}

.manage-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 12px 0 20px;
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.manage-form label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 10px;
}

.manage-form input,
.manage-form select,
.manage-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}

.manage-form input:focus,
.manage-form select:focus,
.manage-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

.manage-form textarea { resize: vertical; }

.manage-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Students roster (admin) */
.students-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.students-search {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  min-width: 260px;
}

.students-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

.students-stats {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.students-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

.students-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.students-table th {
  text-align: left;
  padding: 14px 20px;
  background: var(--surface-alt);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.students-table td {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}

.students-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 20px !important;
}

/* Support inbox (admin) */
.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.inbox-filters {
  display: flex;
  gap: 8px;
}

.inbox-filter-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.inbox-filter-btn:hover { border-color: var(--accent); color: var(--accent); }

.inbox-filter-btn.active {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #fff;
}

.inbox-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}

.inbox-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.inbox-email-link {
  color: var(--muted);
  font-size: 0.88rem;
  text-decoration: none;
}

.inbox-email-link:hover { color: var(--accent); }

.inbox-status-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.inbox-status-new { background: var(--accent-soft); color: var(--accent-dark); }
.inbox-status-resolved { background: #e8f7ef; color: #146c43; }

.inbox-meta {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.inbox-message {
  margin-bottom: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.inbox-reply-block {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.inbox-reply-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  margin-bottom: 6px;
}

.inbox-reply-text {
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.inbox-reply-form {
  margin: 16px 0 0;
}

/* Practice exam */
.exam-container {
  max-width: 720px;
}

.exam-intro {
  text-align: center;
  padding: 40px 0;
}

.exam-intro p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.exam-status-bar {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.exam-quiz .progress-bar-track { margin-bottom: 32px; }

.exam-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}

.exam-nav-toggle svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.exam-nav-toggle.is-open svg { transform: rotate(180deg); }

.exam-navigator {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 24px;
}

.exam-navigator.is-open { display: grid; }

.exam-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.exam-nav-item:hover { border-color: var(--accent); }

.exam-nav-item.answered { border-color: var(--accent); background: var(--accent-soft); }

.exam-nav-item.correct { border-color: #146c43; background: rgba(20, 108, 67, 0.12); color: #146c43; }
.exam-nav-item.incorrect { border-color: #b3261e; background: rgba(179, 38, 30, 0.1); color: #b3261e; }
[data-theme="dark"] .exam-nav-item.correct { background: rgba(20, 108, 67, 0.22); color: #6fe3a8; }
[data-theme="dark"] .exam-nav-item.incorrect { background: rgba(179, 38, 30, 0.18); color: #ff8a80; }

.exam-nav-item.current { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }

/* Status mark beside the number (✓ correct, × incorrect, • answered), so the
   status never rests on colour alone. */
.exam-nav-mark { font-size: 0.75rem; line-height: 1; }

/* Text read by screen readers only (the question count before each question,
   the live status line). */
.exam-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The Course link appears once the exam knows its course. */
:root .site-header .nav a[hidden] { display: none; }

.exam-question {
  font-size: 1.4rem;
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}

/* Focused by script when a question is shown; no ring for that. */
.exam-question:focus { outline: none; }

.exam-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.quiz-option:hover { border-color: var(--accent); }

.quiz-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.quiz-option.locked { cursor: default; }
.quiz-option.locked:hover { border-color: var(--line); }

.quiz-option.correct {
  border-color: #146c43;
  background: rgba(20, 108, 67, 0.12);
}

.quiz-option.incorrect {
  border-color: #b3261e;
  background: rgba(179, 38, 30, 0.1);
}

[data-theme="dark"] .quiz-option.correct { background: rgba(20, 108, 67, 0.22); }
[data-theme="dark"] .quiz-option.incorrect { background: rgba(179, 38, 30, 0.18); }

.quiz-option input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.quiz-option-letter { flex: none; font-weight: 700; }
.quiz-option-text { min-width: 0; overflow-wrap: anywhere; }

#examCheckBtn { margin-bottom: 20px; }

.exam-quiz .lesson-quiz-feedback,
.exam-quiz .lesson-quiz-explanation {
  margin-bottom: 20px;
}

.exam-quiz .lesson-nav { margin-top: 8px; }

.exam-results { padding: 20px 0; }

.exam-score {
  text-align: center;
  margin-bottom: 8px;
}

.exam-score-percent {
  display: block;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.exam-score-label {
  color: var(--muted);
  font-size: 1rem;
}

.exam-time-taken {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.exam-results > .btn {
  display: block;
  margin: 0 auto 40px;
}

.exam-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-item {
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 1px solid var(--line);
  /* Intentional: the stripe is the correct/incorrect status marker (green
     or red, below) that makes the exam review scannable; incorrect items
     also print the correct answer, so colour isn't the only cue.
     impeccable-disable-next-line side-tab */
  border-left: 4px solid var(--line);
}

.review-item.review-correct { border-left-color: #146c43; }
.review-item.review-incorrect { border-left-color: #b3261e; }

.review-question {
  font-weight: 600;
  margin-bottom: 8px;
}

.review-answer {
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 4px;
}

.review-correct-answer {
  font-size: 0.9rem;
  color: #146c43;
  margin-bottom: 4px;
}

.review-explanation {
  font-size: 0.87rem;
  color: var(--muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.review-explanation::before {
  content: "Explanation";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 4px;
}

/* Study guide */
.study-guide-container { max-width: 780px; }

.study-guide-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.study-guide-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.study-guide-tab {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.study-guide-tab:hover { border-color: var(--accent); }

.study-guide-tab.active {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #fff;
}

.study-guide-body {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
}

.study-guide-loading { color: var(--muted); }

.study-guide-module { margin-bottom: 36px; }
.study-guide-module:last-child { margin-bottom: 0; }

.study-guide-module h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}

.study-guide-lesson { margin-bottom: 24px; }
.study-guide-lesson:last-child { margin-bottom: 0; }

.study-guide-lesson h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--accent-dark);
}

.study-guide-lesson ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-guide-lesson li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}

/* Themed scrollbars: thin, brand-tinted thumb on a transparent track */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* ===== Atmosphere: page backgrounds, surfaces, and the Linh Hua arc motif =====
   Everything here reads theme tokens (--page-bg, --surface, --glow-*,
   --pattern, --motif), so it follows the existing data-theme switch. */

/* Ambient light + grain (behind everything, never interactive) */
body {
  position: relative;
}

body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 900px;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(900px 520px at 6% -6%, var(--glow-a), transparent 65%),
    radial-gradient(800px 480px at 97% -4%, var(--glow-b), transparent 65%);
}

/* Extremely subtle grain */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .7 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
  background-image:
    linear-gradient(var(--pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
}

/* Reading and exam pages: no pattern anywhere near the text */
body:has(#courseRoot)::after,
body:has(#examRoot)::after,
body:has(#studyGuideRoot)::after {
  display: none;
}

/* Elevated surfaces sit clearly above the tinted page */
.dashboard-card,
.course-sidebar,
.course-content,
.study-guide-body,
.manage-module-card,
.inbox-card,
.checkout-course-card,
.review-item,
.students-table-wrap,
.course-card,
.contact-card {
  background: var(--surface);
}

.course-sidebar,
.course-content,
.study-guide-body,
.contact-card,
.dashboard-card {
  box-shadow: var(--shadow-card);
}

.course-layout > * { min-width: 0; }

/* Layered lighting on the dark bands */
.hero {
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(91, 77, 251, 0.24), transparent 60%),
    radial-gradient(760px 460px at 92% 100%, rgba(70, 90, 220, 0.2), transparent 60%),
    var(--ink);
}

.page-hero {
  background:
    radial-gradient(760px 340px at 10% 0%, rgba(91, 77, 251, 0.22), transparent 62%),
    radial-gradient(620px 320px at 95% 100%, rgba(70, 90, 220, 0.16), transparent 62%),
    var(--ink);
}

.stats-band {
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(91, 77, 251, 0.2), transparent 65%),
    var(--ink);
}

.cta-band {
  background:
    radial-gradient(700px 320px at 15% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(135deg, var(--accent), #6354ee);
}

[data-theme="dark"] .cta-band {
  background:
    radial-gradient(720px 340px at 15% 0%, rgba(91, 77, 251, 0.2), transparent 62%),
    radial-gradient(640px 320px at 95% 100%, rgba(70, 90, 220, 0.14), transparent 62%),
    linear-gradient(135deg, #0e0b2a, #191357);
}

[data-theme="dark"] .cta-band::before {
  background: rgba(150, 135, 255, 0.18);
}

/* Light/dark neutral sections, each lit differently */
.section-alt {
  background:
    radial-gradient(640px 320px at 100% 0%, var(--glow-a), transparent 70%),
    var(--surface-alt);
}

.testimonial-section {
  position: relative;
  background: radial-gradient(640px 320px at 50% 0%, var(--glow-a), transparent 70%);
}

.testimonial-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.auth-section {
  background: radial-gradient(640px 360px at 50% 0%, var(--glow-a), transparent 70%);
}

/* The Linh Hua motif: large, partly cropped concentric arcs */
.hero,
.page-hero,
.stats-band,
.cta-band,
.section-alt,
.auth-section {
  position: relative;
  overflow: hidden;
}

.hero::before,
.page-hero::before,
.stats-band::before,
.cta-band::before,
.section-alt::before,
.auth-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(760px, 140vw);
  aspect-ratio: 1;
  background: var(--motif-on-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='400' cy='400' r='90'/%3E%3Ccircle cx='400' cy='400' r='160' stroke-opacity='.85'/%3E%3Ccircle cx='400' cy='400' r='230' stroke-opacity='.7'/%3E%3Ccircle cx='400' cy='400' r='300' stroke-opacity='.5'/%3E%3Ccircle cx='400' cy='400' r='370' stroke-opacity='.32'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='400' cy='400' r='90'/%3E%3Ccircle cx='400' cy='400' r='160' stroke-opacity='.85'/%3E%3Ccircle cx='400' cy='400' r='230' stroke-opacity='.7'/%3E%3Ccircle cx='400' cy='400' r='300' stroke-opacity='.5'/%3E%3Ccircle cx='400' cy='400' r='370' stroke-opacity='.32'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero::before { right: -240px; top: -300px; }
.page-hero::before { right: -260px; top: -380px; width: min(620px, 130vw); }
.stats-band::before { left: -300px; bottom: -430px; width: min(620px, 130vw); }
.cta-band::before { right: -240px; top: -360px; width: min(600px, 130vw); background: rgba(255, 255, 255, 0.12); }
.section-alt::before { left: -300px; bottom: -400px; width: min(620px, 130vw); background: var(--motif); }
.auth-section::before { right: -300px; top: -260px; width: min(640px, 130vw); background: var(--motif); }

/* Faint architectural grid inside the hero bands */
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 25% 15%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 25% 15%, #000, transparent 75%);
}

/* Dashboard welcome banner: rings radiating from the avatar, plus a lit lower edge */
#dashboardRoot .page-hero {
  border-bottom: 1px solid rgba(150, 135, 255, 0.18);
  box-shadow: inset 0 -60px 80px -60px rgba(91, 77, 251, 0.25);
}

.dashboard-header-info {
  position: relative;
}

.dashboard-header-info::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 320px;
  height: 320px;
  left: calc(38px - 160px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--motif-on-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='160' cy='160' r='62'/%3E%3Ccircle cx='160' cy='160' r='96' stroke-opacity='.7'/%3E%3Ccircle cx='160' cy='160' r='130' stroke-opacity='.45'/%3E%3Ccircle cx='160' cy='160' r='158' stroke-opacity='.25'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='160' cy='160' r='62'/%3E%3Ccircle cx='160' cy='160' r='96' stroke-opacity='.7'/%3E%3Ccircle cx='160' cy='160' r='130' stroke-opacity='.45'/%3E%3Ccircle cx='160' cy='160' r='158' stroke-opacity='.25'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dashboard-header-info > * {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .progress-bar-track {
  background: rgba(255, 255, 255, 0.09);
}

/* Card depth: inner highlight, and a soft light that follows hover */
.dashboard-card,
.course-card,
.contact-card {
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--edge-light);
}

.dashboard-card-link:hover,
.course-card:hover {
  background-image: radial-gradient(320px 180px at 50% 0%, var(--glow-a), transparent 70%);
}

/* Thin gradient seams between homepage sections */
.section-alt::after,
.testimonial-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--motif), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-card-link,
  .course-card {
    transition: none;
  }
}

/* Keep real content above the decorative layers */
.hero > :not(.hero-glow),
.page-hero .container,
.stats-band .container,
.cta-band .container,
.section-alt .container,
.auth-section .container {
  position: relative;
  z-index: 1;
}

/* Keyboard focus states. Split into two groups since the hero/footer bands
   are permanently dark regardless of the site's light/dark theme toggle, so
   they need a theme-invariant ring. Everything else gets a 2px ring in the
   deeper (light) / lighter (dark) accent, --accent-dark,
   set 2px off the control, so the ring always sits on the page background
   (>= 3:1 against it in both themes, whatever the control's own fill);
   on the permanently dark bands the ring turns white. The site header sets
   its own ring with its colours (the "Site header" block at the end). */
.page-hero,
.site-footer {
  --focus-ring: rgba(255, 255, 255, 0.85);
}

/* Solid white: the light-mode band is a violet gradient (>= 3.2:1). */
.cta-band { --focus-ring: #fff; }

/* The account dropdown is a light panel inside the dark header. */
.user-menu-dropdown { --focus-ring: var(--accent-dark); }

/* Fallback for everything without its own treatment (plain links, the
   menu button, scrollable regions), instead of the browser default ring,
   which thins out against the dark bands. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn:focus-visible,
.lesson-quiz-option:focus-visible,
.quiz-option:focus-visible,
.role-card:focus-visible,
.study-guide-tab:focus-visible,
.inbox-filter-btn:focus-visible,
.exam-nav-item:focus-visible,
.exam-nav-toggle:focus-visible,
.lesson-item:focus-visible,
.dashboard-card-link:focus-visible,
.btn-listen:focus-visible,
.btn-manage:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Keep the ring above neighbouring pills in tight rows. */
.study-guide-tab:focus-visible,
.inbox-filter-btn:focus-visible,
.exam-nav-item:focus-visible {
  position: relative;
  z-index: 1;
}

.footer-col a:focus-visible,
.logo:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Placed after the rules above so these dark-chrome variants win over the
   general .btn accent ring at equal specificity. */
.theme-toggle:focus-visible,
.user-menu-trigger:focus-visible,
.btn-ghost:focus-visible,
.btn-header:focus-visible,
.btn-header-secondary:focus-visible,
.page-hero .back-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

@media print {
  /* Force light-mode colors on paper even if the site is set to dark mode —
     otherwise dark-mode's light text colors end up washed-out on white. */
  :root {
    --bg: #ffffff !important;
    --text: #14161f !important;
    --muted: #656b7e !important;
    --line: #e7e8f0 !important;
    --accent: #5b4dfb !important;
    --accent-dark: #4636e0 !important;
    --accent-soft: #eeecff !important;
    --accent-fill: #5b4dfb !important;
    --accent-fill-hover: #4636e0 !important;
    --page-bg: #ffffff !important;
    --surface: #ffffff !important;
    --surface-alt: #f6f7fb !important;
  }
  html::before, body::before, body::after,
  .page-hero::before, .page-hero::after { display: none !important; }
  .site-header, .site-footer, .back-link, .study-guide-toolbar, .hero-glow { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { background: none; color: #000; padding: 0 0 24px; }
  .page-hero h1 { color: #000; }
  .page-hero p { color: #333; }
  .study-guide-body { border: none; padding: 0; }
  .study-guide-module { page-break-inside: avoid; }
}

/* Responsive */
@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-grid, .contact-layout, .checkout-layout { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }

  .hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero-copy { max-width: 100%; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-illustration { max-width: 300px; order: -1; }

  .course-layout { grid-template-columns: 1fr; }
  .course-sidebar { position: static; max-height: none; }
  .course-content { padding: 28px; }
  .study-guide-body { padding: 28px; }
}

/* Compact header. The full desktop row (logo, four links, Log In, Sign Up,
   theme toggle) needs about 820px plus the container padding, so it only
   appears from 900px up; below that everything moves into the menu panel
   instead of being squeezed until it overflows. */
@media (max-width: 899px) {
  .nav-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-wrap.open { display: flex; }

  .nav { flex-direction: column; }

  .btn-header,
  .btn-header-secondary {
    width: 100%;
    text-align: center;
  }

  .nav-toggle { display: flex; }
}

/* App pages whose header holds only the avatar menu (no nav links) fit at
   any width, so they keep the avatar in the bar down to 721px as before. */
@media (min-width: 721px) and (max-width: 899px) {
  .header-inner:not(:has(.nav)) .nav-wrap {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .header-inner:not(:has(.nav)) .nav-toggle { display: none; }
}

@media (max-width: 720px) {
  .services-grid,
  .course-grid,
  .process-grid,
  .stats-grid { grid-template-columns: 1fr; }

  .hero-inner { padding: 96px 24px 72px; }

  .role-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Site header. One shared bar for every page, taken from the Homepage:
   a light bar in light mode, a deep navy bar with one restrained indigo
   light behind the logo in dark mode, a quiet hairline, links that change
   colour on hover, a short two-strand underline on the active page, and a
   light/navy menu panel with pill rows on narrow screens. The header rules
   earlier in this file hold only the structure (sticky bar, flex rows, the
   panel's position, the shared .logo/.user-avatar also used outside the
   header); everything visual lives here. home.css adds only what belongs to
   the Homepage hero: its violet light continuing into the bar, and the
   seamless top that gains its hairline as the page scrolls.
   The ":root" prefix keeps these rules at the specificity they had as
   Homepage rules, so they keep winning over the general .btn, focus-ring
   and dark-mode rules exactly as on the approved Homepage.
   ========================================================================== */
:root {
  --hdr-surface: rgba(248, 248, 253, 0.86);
  --hdr-surface-solid: #f8f8fd;
  --hdr-glow: none;
  --hdr-line-rest: rgba(42, 31, 120, 0.07);
  --hdr-line: rgba(42, 31, 120, 0.12);
  --hdr-shadow: 0 10px 28px -18px rgba(40, 30, 110, 0.35);
  --hdr-text: #14161f;
  --hdr-link: #4a4f63;
  --hdr-ghost-border: rgba(20, 22, 31, 0.16);
  --hdr-ghost-border-hover: rgba(20, 22, 31, 0.34);
  --hdr-ghost-fill: rgba(255, 255, 255, 0.7);
  --hdr-primary: #5b4dfb;
  --hdr-primary-hover: #4636e0;
  --hdr-focus: #5b4dfb;
  --hdr-panel: #fbfbfe;
  --hdr-pill: rgba(91, 77, 251, 0.09);
  --hdr-panel-shadow: 0 24px 40px -24px rgba(40, 30, 110, 0.35);
  --hdr-drop-border: rgba(20, 22, 31, 0.08);
  --hdr-drop-shadow: 0 18px 40px -12px rgba(20, 22, 31, 0.24);
  --hdr-strand-a: var(--accent-dark);
  --hdr-strand-b: #232f8f;
  --hdr-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] {
  --hdr-surface: rgba(12, 16, 32, 0.84);
  --hdr-surface-solid: #0d1120;
  --hdr-glow: radial-gradient(420px 90px at 8% 0%, rgba(110, 95, 255, 0.2), transparent 70%);
  --hdr-line-rest: rgba(160, 148, 255, 0.16);
  --hdr-line: rgba(160, 148, 255, 0.22);
  --hdr-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 30px -18px rgba(0, 0, 0, 0.8);
  --hdr-text: #ffffff;
  --hdr-link: rgba(255, 255, 255, 0.68);
  --hdr-ghost-border: rgba(255, 255, 255, 0.22);
  --hdr-ghost-border-hover: rgba(255, 255, 255, 0.5);
  --hdr-ghost-fill: rgba(255, 255, 255, 0.06);
  --hdr-primary: #6c5ef5;
  --hdr-primary-hover: #5b4de6;
  --hdr-focus: rgba(255, 255, 255, 0.85);
  --hdr-panel: #10152a;
  --hdr-pill: rgba(124, 111, 255, 0.16);
  --hdr-panel-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.7);
  --hdr-drop-border: rgba(160, 148, 255, 0.18);
  --hdr-drop-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --hdr-strand-a: #7c6fff;
  --hdr-strand-b: #4b63e6;
}

:root .site-header {
  --focus-ring: var(--hdr-focus);
  background-color: var(--hdr-surface);
  background-image: var(--hdr-glow);
  border-bottom: 1px solid var(--hdr-line-rest);
}

:root[data-theme="dark"] .site-header {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root .site-header .logo { color: var(--hdr-text); }

/* Links: color change only on hover (a high-frequency interaction gets no
   movement); the active page carries a short static two-strand underline. */
:root .site-header .nav a {
  color: var(--hdr-link);
  font-size: 0.94rem;
  padding: 6px 0;
  transition: color 150ms var(--hdr-ease);
}

:root .site-header .nav a:hover,
:root .site-header .nav a.active { color: var(--hdr-text); }

:root .site-header .nav a.active { font-weight: 600; }

:root .site-header .nav a::after,
:root .site-header .nav a:hover::after {
  left: 50%;
  right: auto;
  bottom: -2px;
  width: 16px;
  background: linear-gradient(90deg, var(--hdr-strand-a), var(--hdr-strand-b));
  transform: translateX(-50%) scaleX(0);
  transition: none;
}

:root .site-header .nav a.active::after { transform: translateX(-50%) scaleX(1); }

:root .header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

:root .site-header .btn-header-secondary {
  padding: 9px 18px;
  color: var(--hdr-text);
  border-color: var(--hdr-ghost-border);
  transition: border-color 150ms var(--hdr-ease), background-color 150ms var(--hdr-ease);
}

:root .site-header .btn-header-secondary:hover {
  color: var(--hdr-text);
  border-color: var(--hdr-ghost-border-hover);
  background-color: var(--hdr-ghost-fill);
  transform: none;
}

:root .site-header .btn-header {
  padding: 9px 18px;
  background: var(--hdr-primary);
  box-shadow: 0 6px 16px -6px rgba(91, 77, 251, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--hdr-ease), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:root .site-header .btn-header:hover {
  background: var(--hdr-primary-hover);
  box-shadow: 0 6px 16px -6px rgba(91, 77, 251, 0.55);
  transform: none;
}

/* Press: a small settle on both header actions. The header's motion is
   gated on the media query itself (not the .motion-ok class, which only the
   redesigned pages set), so it runs the same on every page. */
@media (prefers-reduced-motion: no-preference) {
  :root .site-header .btn-header-secondary:active {
    transform: scale(0.97);
    transition: transform 160ms var(--hdr-ease);
  }

  :root .site-header .btn-header:active {
    transform: scale(0.97);
    transition: transform 160ms var(--hdr-ease), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
}

:root .site-header .theme-toggle {
  width: 36px;
  height: 36px;
  color: var(--hdr-text);
  border-color: var(--hdr-ghost-border);
  transition: border-color 150ms var(--hdr-ease), background-color 150ms var(--hdr-ease);
}

:root .site-header .theme-toggle:hover {
  border-color: var(--hdr-ghost-border-hover);
  background: var(--hdr-ghost-fill);
}

:root .site-header .user-avatar {
  width: 34px;
  height: 34px;
  border: 0;
  box-shadow: 0 0 0 2px var(--hdr-surface-solid), 0 0 0 3px var(--hdr-ghost-border);
  transition: box-shadow 150ms var(--hdr-ease);
}

:root .site-header .user-menu-trigger:hover .user-avatar {
  box-shadow: 0 0 0 2px var(--hdr-surface-solid), 0 0 0 3px var(--hdr-ghost-border-hover);
}

:root .site-header .user-menu-dropdown {
  border: 1px solid var(--hdr-drop-border);
  border-radius: 14px;
  box-shadow: var(--hdr-drop-shadow);
}

/* The account menu scales in from its trigger (top right); it closes
   instantly. Motion on only. */
@media (prefers-reduced-motion: no-preference) {
  :root .site-header .user-menu .user-menu-dropdown {
    transform-origin: top right;
    transition: opacity 160ms var(--hdr-ease), transform 160ms var(--hdr-ease);
  }

  @starting-style {
    :root .site-header .user-menu .user-menu-dropdown {
      opacity: 0;
      transform: scale(0.97);
    }
  }
}

/* Focus: accent rings on the light bar, white rings on the dark bar. */
:root .site-header .nav a:focus-visible,
:root .site-header .logo:focus-visible {
  outline: 2px solid var(--hdr-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

:root .site-header .theme-toggle:focus-visible,
:root .site-header .user-menu-trigger:focus-visible,
:root .site-header .btn-header:focus-visible,
:root .site-header .btn-header-secondary:focus-visible,
:root .site-header .nav-toggle:focus-visible {
  outline: 2px solid var(--hdr-focus);
  outline-offset: 2px;
}

:root .site-header .nav-toggle span { background: var(--hdr-text); }

/* Wide: logo, links truly centered, actions. The nav wrapper steps out of
   the layout so its two children sit in the grid's middle and end cells.
   Headers without the actions group (the app pages: an avatar, sometimes
   one link) keep the base row, everything after the logo on the right. */
@media (min-width: 1024px) {
  :root .header-inner:has(.header-actions) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  :root .header-inner:has(.header-actions) .nav-wrap { display: contents; }
  :root .header-actions { justify-self: end; }
}

@media (min-width: 900px) and (max-width: 1023px) {
  :root .header-inner:has(.header-actions) .nav-wrap { flex: 1; justify-content: space-between; }
  :root .site-header .nav { gap: 24px; }
}

/* Compact: the menu panel. */
@media (max-width: 899px) {
  :root .site-header .nav-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
  }

  :root .site-header .nav-toggle span { transform-origin: center; }

  @media (prefers-reduced-motion: no-preference) {
    :root .site-header .nav-toggle span {
      transition: transform 200ms var(--hdr-ease), opacity 150ms var(--hdr-ease);
    }
  }

  :root .site-header .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  :root .site-header .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  :root .site-header .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  :root .site-header .nav-wrap {
    background: var(--hdr-panel);
    border-bottom: 1px solid var(--hdr-line);
    box-shadow: var(--hdr-panel-shadow);
    padding: 10px 20px 20px;
    gap: 14px;
  }

  @media (prefers-reduced-motion: no-preference) {
    :root .site-header .nav-wrap.open {
      transition: opacity 180ms var(--hdr-ease), transform 180ms var(--hdr-ease);
    }

    @starting-style {
      :root .site-header .nav-wrap.open {
        opacity: 0;
        transform: translateY(-4px);
      }
    }
  }

  :root .site-header .nav { gap: 2px; }

  :root .site-header .nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 1rem;
  }

  :root .site-header .nav a.active { background: var(--hdr-pill); }
  :root .site-header .nav a::after { display: none; }

  :root .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    max-width: 460px;
  }

  :root .site-header .btn-header,
  :root .site-header .btn-header-secondary { padding: 12px 18px; }

  :root .site-header .theme-toggle { width: 44px; height: 44px; }

  :root .site-header .user-menu { grid-column: 1 / -1; }

  :root .site-header .user-menu-dropdown {
    left: 0;
    right: auto;
    transform-origin: top left;
  }
}

/* App pages whose header holds only the avatar keep it in the bar from
   721px up (see the base rule above): no panel styling there, and the
   account menu still opens from the right edge. */
@media (min-width: 721px) and (max-width: 899px) {
  :root .site-header .header-inner:not(:has(.nav)) .nav-wrap {
    padding: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
  }

  :root .site-header .header-inner:not(:has(.nav)) .user-menu-dropdown {
    left: auto;
    right: 0;
    transform-origin: top right;
  }
}