/* =========================================================
   Enerva LMS — Design System
   ========================================================= */

:root {
  /* Brand palette */
  --enerva-red: #C00000;
  --enerva-red-600: #A80000;
  --enerva-red-700: #8F0000;
  --enerva-red-50: #FFF2F2;
  --enerva-red-100: #FFE1E1;
  --enerva-dark: #2E3555;
  --enerva-dark-700: #1F2440;
  --enerva-dark-50: #F1F3F9;
  --enerva-gray: #686C6D;

  /* Semantic tokens */
  --bg: #F7F8FB;
  --bg-alt: #F1F3F8;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --border: #E6E9EF;
  --border-strong: #D3D8E2;
  --text: #14172B;
  --text-soft: #4A4E60;
  /* WCAG 2.1 AA: 5.86:1 on white. The previous #7D8194 was 3.86:1 and failed SC 1.4.3
     for normal text, which is how .text-muted and .small are used throughout. */
  --text-muted: #5F6478;
  --muted: #5F6478;
  --soft-bg: #F1F3F8;
  --soft-blue: #E9F1FF;

  /* State */
  --success: #15803D;
  --success-50: #E7F7EC;
  --warn: #B45309;
  --warn-50: #FEF3C7;
  --err: #B91C1C;
  --err-50: #FEE2E2;
  --ok: #15803D;

  /* Focus — 3.12:1 against white, meeting SC 1.4.11 for non-text contrast.
     The previous .18 alpha resolved to 1.41:1 and was effectively invisible. */
  --focus-ring: 0 0 0 3px rgba(192, 0, 0, .55);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow: 0 4px 12px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-md: 0 10px 24px rgba(16, 24, 40, .08), 0 4px 8px rgba(16, 24, 40, .04);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .12), 0 6px 12px rgba(16, 24, 40, .06);

  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout */
  --header-h: 64px;
  --container-w: 1240px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;

  /* Directional icons.
     Stroked to the same weight and cap style as the nav hamburger so the whole
     icon vocabulary reads as one set. Used as CSS masks (see "Directional
     arrows"), so the stroke colour here is a placeholder — the rendered colour
     always comes from `currentColor`. */
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5'/%3E%3Cpath d='M11.5 5.5 5 12l6.5 6.5'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E");
  --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* =========================================================
   Resets & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss02';
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  /* This app renders plenty of unbreakable strings — API tokens, webhook URLs,
     certificate codes, SSO issuers, email addresses. Without this they push the
     document wider than the viewport on a phone. break-word only breaks when a
     word cannot fit on a line of its own, so normal prose is untouched. */
  overflow-wrap: break-word;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#app { flex: 1 0 auto; }
.footer { flex-shrink: 0; }
body.modal-open { overflow: hidden; }

a { color: var(--enerva-red); text-decoration: none; transition: color var(--dur-1) var(--ease); }
a:hover { color: var(--enerva-red-700); }

h1, h2, h3, h4, h5 {
  color: var(--enerva-dark);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.015em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: .5em 0; }

code {
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, ui-monospace, monospace;
  font-size: .9em;
  color: var(--enerva-dark);
  /* Tokens and URLs have no spaces to break at, so break-word never fires on
     them — anywhere is required to wrap mid-string. */
  overflow-wrap: anywhere;
}
pre { background: var(--bg-alt); padding: 14px; border-radius: var(--radius); overflow: auto; font-size: 13px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* =========================================================
   Top navigation
   ========================================================= */
.topnav {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-6);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topnav .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.topnav .logo:hover { text-decoration: none; }
/* The lockup carries the wordmark and the "LMS" tag, so it needs a little more
   height than the bare Enerva mark did to stay legible. */
.topnav .logo img { height: 38px; width: auto; display: block; }
.topnav .logo-title { font-size: 15px; font-weight: 800; color: var(--enerva-dark); line-height: 1; letter-spacing: -.01em; }
.topnav .logo-label { font-size: 10px; color: var(--enerva-gray); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-top: 3px; }

/* Transparent on desktop: nav and .right remain direct flex children of
   .topnav, so the bar lays out exactly as it did before this wrapper existed.
   The mobile block below turns it into the drawer panel. */
.topnav-menu { display: contents; }

.topnav nav { display: flex; gap: 2px; flex: 1; }
.topnav nav a {
  color: var(--text-soft);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: all var(--dur-1) var(--ease);
  white-space: nowrap;
}
.topnav nav a:hover { background: var(--bg-alt); color: var(--enerva-dark); text-decoration: none; }
.topnav nav a.active {
  background: var(--enerva-red-50);
  color: var(--enerva-red);
  font-weight: 600;
}

.topnav .right { display: flex; gap: 6px; align-items: center; }

.icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--text-soft);
  transition: all var(--dur-1) var(--ease);
  text-decoration: none;
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--bg-alt); color: var(--enerva-dark); text-decoration: none; }
.icon-btn .badge-dot {
  position: absolute; top: 2px; right: 2px;
  background: var(--enerva-red);
  color: #fff;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--enerva-dark);
  transition: all var(--dur-1) var(--ease);
}
.avatar-btn:hover { background: var(--bg-alt); text-decoration: none; border-color: var(--border-strong); }
.avatar-btn .avatar-name { font-size: 13px; font-weight: 600; }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--enerva-dark);
}
.nav-toggle:hover { background: var(--bg-alt); }
.nav-toggle svg { width: 18px; height: 18px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all var(--dur-1) var(--ease);
  background: var(--surface);
  color: var(--enerva-dark);
  white-space: nowrap;
  user-select: none;
  line-height: 1.2;
}
.btn:hover { background: var(--bg-alt); border-color: var(--border-strong); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--enerva-red);
  color: #fff;
  border-color: var(--enerva-red);
  box-shadow: 0 1px 2px rgba(192, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-primary:hover {
  background: var(--enerva-red-600);
  border-color: var(--enerva-red-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(192, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-dark {
  background: var(--enerva-dark);
  color: #fff;
  border-color: var(--enerva-dark);
  box-shadow: 0 1px 2px rgba(46, 53, 85, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn-dark:hover { background: var(--enerva-dark-700); border-color: var(--enerva-dark-700); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-alt); border-color: transparent; }

.btn-outline {
  background: transparent;
  color: var(--enerva-red);
  border-color: var(--enerva-red);
}
.btn-outline:hover { background: var(--enerva-red-50); color: var(--enerva-red-700); }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 22px; font-size: 16px; border-radius: 12px; }

.btn-danger { background: var(--surface); color: var(--err); border-color: var(--err-50); }
.btn-danger:hover { background: var(--err); color: #fff; border-color: var(--err); }

.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.full-width { width: 100%; }

/* =========================================================
   Directional arrows
   =========================================================
   One source of truth for every "go back" / "go forward" affordance. These
   replace the literal ← and → characters that used to be typed into markup and
   translation strings: those inherited whatever arrow the user's font happened
   to ship, sat off the text baseline, and had to be duplicated in every locale.

   Drawn as a CSS mask over `currentColor`, so the arrow always matches the
   colour of the text it belongs to — muted link, white button label, dark
   theme — with no per-context overrides.

   Usage:
     <a class="arrow-back">Course catalogue</a>   arrow before the label
     <a class="arrow-next">View all</a>           arrow after the label
     <span class="arrow-glyph"></span>            standalone chevron, no label
   ========================================================= */
.arrow-back::before,
.arrow-next::after,
.arrow-glyph {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  /* Optically centres a 24px-box icon against lowercase text. */
  vertical-align: -.135em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: transform var(--dur-1) var(--ease);
}
.arrow-back::before,
.arrow-next::after { content: ''; }

.arrow-back::before {
  -webkit-mask-image: var(--icon-arrow-left);
          mask-image: var(--icon-arrow-left);
  margin-right: .38em;
}
.arrow-next::after {
  -webkit-mask-image: var(--icon-arrow-right);
          mask-image: var(--icon-arrow-right);
  margin-left: .38em;
}

/* .btn and .back-link are already flex containers with their own gap, so the
   margin above would stack on top of it. */
.btn.arrow-back::before, .back-link.arrow-back::before { margin-right: 0; }
.btn.arrow-next::after, .back-link.arrow-next::after { margin-left: 0; }

/* Standalone chevron for "drill into this row" affordances, where the row text
   is the label and an arrow would compete with it. */
.arrow-glyph {
  -webkit-mask-image: var(--icon-chevron-right);
          mask-image: var(--icon-chevron-right);
}
.arrow-glyph.is-back {
  -webkit-mask-image: var(--icon-chevron-left);
          mask-image: var(--icon-chevron-left);
}

/* The nudge on hover reads as "this goes somewhere" without moving the label.
   The reduced-motion block near the end of this file flattens the transition. */
.arrow-back:hover::before { transform: translateX(-2px); }
.arrow-next:hover::after { transform: translateX(2px); }
a:hover > .arrow-glyph { transform: translateX(2px); }
a:hover > .arrow-glyph.is-back { transform: translateX(-2px); }

/* Without mask support the box above would paint as a solid square of
   currentColor, which is worse than no arrow at all. Every label still reads
   correctly on its own, so drop the decoration. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .arrow-back::before,
  .arrow-next::after,
  .arrow-glyph { display: none; }
}

/* =========================================================
   Layout
   ========================================================= */
.container { max-width: var(--container-w); margin: 0 auto; padding: var(--sp-6); }
.container-narrow { max-width: 860px; margin: 0 auto; padding: var(--sp-6); }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Named page layouts. These exist so views stop setting grid-template-columns
   from inline style attributes — an inline value outranks every media query
   below, which is why these layouts previously had no mobile behaviour at all.
   Collapse points live in the Responsive section. */
/* Every track below is minmax(0, …) rather than a bare fr. A bare `1fr` means
   `minmax(auto, 1fr)`, and that `auto` floor stops the track shrinking below its
   content's min-content width — so one wide child (a <select> sized to its
   longest <option>, a long word, an <input> at its default intrinsic size)
   pushes the whole grid past its container instead of the track absorbing it.
   Pairing this with `min-width: 0` on the children is what actually lets these
   layouts shrink. */
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 360px; }   /* content + enrol/summary rail */
.grid-sidebar-lg { grid-template-columns: minmax(0, 1fr) 380px; } /* checkout: wider order rail */
.grid-aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* content + secondary column */
.grid-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* two equal panels */
.grid-inline-action { grid-template-columns: minmax(0, 1fr) auto; } /* field + adjacent button */
.grid-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; } /* search + selects + action */

/* Direct children of the named layouts must be allowed to shrink; a grid item
   defaults to min-width:auto, which reintroduces the same floor one level down. */
.grid-sidebar > *, .grid-sidebar-lg > *, .grid-aside > *,
.grid-split > *, .grid-inline-action > *, .grid-filters > * { min-width: 0; }
.row { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* =========================================================
   Cards
   ========================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); gap: 12px; }
.card-header h3, .card-header h2 { margin: 0; }

/* Available to assistive technology, invisible on screen. Used to name controls
   and action columns that are obvious sighted but silent to a screen reader —
   e.g. the trailing <th> above a column of Edit buttons. Not display:none, which
   would hide it from screen readers too. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.card-feature {
  background: linear-gradient(135deg, var(--enerva-dark) 0%, var(--enerva-dark-700) 100%);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.card-feature h1, .card-feature h2, .card-feature h3 { color: #fff; }
.card-feature p { color: rgba(255, 255, 255, .85); }
.card-feature::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(192, 0, 0, .3), transparent 60%);
  pointer-events: none;
}

/* =========================================================
   Forms
   ========================================================= */
/* min-width:0 so a field placed in a grid or flex track can shrink. Without it
   the field inherits the auto minimum and reports its widest control's
   min-content width, which is what pushed the catalogue filter bar out of its
   card once a long category name loaded into the select. */
.field { margin-bottom: var(--sp-4); min-width: 0; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--enerva-dark);
  letter-spacing: .01em;
}
.field input, .field select, .field textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"], textarea, select {
  width: 100%;
  /* width:100% alone does not stop a control forcing its container wider — an
     <input> still reports its default intrinsic size and a <select> reports its
     longest <option>. These two cap that contribution. */
  min-width: 0;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--surface);
  font-family: inherit;
  color: var(--text);
  transition: all var(--dur-1) var(--ease);
  line-height: 1.4;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="url"]:focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--enerva-red);
  box-shadow: var(--focus-ring);
}
.field input::placeholder, .field textarea::placeholder { color: #a8acbd; }
.field textarea { resize: vertical; min-height: 80px; }
.fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.fields-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

.field .help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Search input with icon */
.input-search {
  position: relative;
}
.input-search input {
  padding-left: 38px;
}
.input-search::before {
  content: '';
  position: absolute;
  /* Anchored to the bottom, not the middle. The positioned ancestor is the whole
     .field — label included — so top:50% centred the icon on label+input and it
     floated above the text it belongs to. Both usages put the input last, so
     measuring up from the bottom lands on the input every time.
     Input box = 11px padding x2 + 1px border x2 + 19.6px line-height = 43.6px;
     centring a 16px icon in that is (43.6 - 16) / 2 ≈ 14px. */
  left: 13px; top: auto; bottom: 14px;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D8194' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .08), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(192, 0, 0, .22), transparent 60%),
    linear-gradient(135deg, var(--enerva-dark) 0%, #222846 50%, var(--enerva-red-700) 130%);
  color: #fff;
  padding: 88px 24px 100px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .05) 0, transparent 2px),
    radial-gradient(circle at 75% 60%, rgba(255, 255, 255, .04) 0, transparent 2px);
  background-size: 40px 40px, 60px 60px;
  opacity: .5;
  pointer-events: none;
}
.hero .hero-inner { position: relative; z-index: 1; max-width: var(--container-w); margin: 0 auto; }
.hero h1 { color: #fff; font-size: clamp(28px, 4.5vw, var(--fs-4xl)); max-width: 820px; margin-bottom: 20px; font-weight: 800; letter-spacing: -.025em; }
.hero p { font-size: clamp(15px, 1.4vw, 18px); max-width: 680px; opacity: .92; margin: 0; line-height: 1.6; }
.hero .hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .hero-cta .btn { font-size: 15px; padding: 12px 22px; }
.hero .hero-cta .btn-ghost-white {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero .hero-cta .btn-ghost-white:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}

.hero-compact { padding: 56px 24px 64px; }

/* =========================================================
   Course cards
   ========================================================= */
.course-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.course-card .cover {
  height: 168px;
  background: linear-gradient(135deg, var(--enerva-red) 0%, var(--enerva-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
  letter-spacing: -.01em;
}
.course-card .cover::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 80% 20%, rgba(255, 255, 255, .18), transparent 60%),
    radial-gradient(30% 50% at 20% 80%, rgba(0, 0, 0, .2), transparent 60%);
  pointer-events: none;
}
.course-card .cover > * { position: relative; }
.course-card .cover.gradient-1 { background: linear-gradient(135deg, #C00000 0%, #7A0000 100%); }
.course-card .cover.gradient-2 { background: linear-gradient(135deg, #2E3555 0%, #4A5283 100%); }
.course-card .cover.gradient-3 { background: linear-gradient(135deg, #D94500 0%, #8F0000 100%); }
.course-card .cover.gradient-4 { background: linear-gradient(135deg, #0D7A5F 0%, #2E3555 100%); }
.course-card .cover.gradient-5 { background: linear-gradient(135deg, #5B21B6 0%, #2E3555 100%); }
.course-card .cover.gradient-6 { background: linear-gradient(135deg, #0F766E 0%, #134E4A 100%); }
.course-card .cover-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  letter-spacing: .04em;
}
.course-card .cover-badge.featured {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
}
.course-card .body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.course-card h3 { font-size: 16px; margin: 0; color: var(--enerva-dark); line-height: 1.3; }
.course-card .short { color: var(--text-muted); font-size: 13px; flex: 1; line-height: 1.5; }
.course-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.course-card .price { font-weight: 800; color: var(--enerva-red); font-size: 17px; letter-spacing: -.01em; }
.course-card .price.free { color: var(--success); }
.course-card .rating { color: #B45309; font-size: 13px; font-weight: 600; }
.course-card .rating .count { color: var(--muted); font-weight: 400; margin-left: 3px; }

/* =========================================================
   Tags / badges
   ========================================================= */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--bg-alt);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: .02em;
  line-height: 1.5;
}
.tag.red { background: var(--enerva-red-50); color: var(--enerva-red); }
.tag.green { background: var(--success-50); color: var(--success); }
.tag.blue { background: var(--soft-blue); color: #1E40AF; }
.tag.yellow { background: var(--warn-50); color: var(--warn); }
.tag.dark { background: var(--enerva-dark-50); color: var(--enerva-dark); }

/* =========================================================
   Stats
   ========================================================= */
.stat {
  background: var(--surface);
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stat .value {
  font-size: 30px;
  font-weight: 800;
  color: var(--enerva-dark);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stat .label {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin-top: 6px;
}
.stat .trend { font-size: 12px; font-weight: 600; margin-top: 4px; }
.stat .trend.up { color: var(--success); }
.stat .trend.down { color: var(--err); }

.stat-accent {
  color: #fff;
  background: linear-gradient(135deg, var(--enerva-red) 0%, var(--enerva-red-700) 100%);
  border: 0;
}
.stat-accent .value { color: #fff; }
.stat-accent .label { color: rgba(255, 255, 255, .8); }

/* =========================================================
   Progress
   ========================================================= */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--enerva-red) 0%, #FF6B35 100%);
  border-radius: 999px;
  transition: width var(--dur-3) var(--ease);
  position: relative;
}
.progress-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: shimmer 2.2s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* =========================================================
   Learn / course player
   ========================================================= */
.learn-layout {
  display: grid;
  /* minmax(0,…): lesson content can contain wide code blocks, tables and
     embeds, and a bare 1fr would let them widen the whole player. */
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - var(--header-h));
  background: var(--surface);
  width: 100%;
}
/* Hide the site footer on the course player for a distraction-free experience */
body:has(.learn-layout) .footer { display: none; }

/* Outline drawer controls. Inert on desktop — the Responsive section reveals
   them below 980px, where the sidebar becomes off-canvas. */
.learn-outline-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 0;
  border-bottom: 1px solid var(--border);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.learn-outline-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.learn-scrim { display: none; }
.learn-sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 24px 18px;
  overflow-y: auto;
  max-height: calc(100vh - var(--header-h));
  position: sticky;
  top: var(--header-h);
}
.learn-sidebar .back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.learn-sidebar .back-link:hover { background: var(--bg-alt); color: var(--enerva-dark); text-decoration: none; }
.learn-sidebar .course-title { font-weight: 700; color: var(--enerva-dark); font-size: 15px; padding: 4px 8px; }
.learn-sidebar .module { margin-bottom: 10px; }
.learn-sidebar .module-title {
  font-weight: 700;
  color: var(--enerva-dark);
  font-size: 12px;
  padding: 10px 10px 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.learn-sidebar .lesson {
  padding: 9px 10px 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text-soft);
  margin-bottom: 2px;
  text-decoration: none;
  line-height: 1.35;
  transition: all var(--dur-1) var(--ease);
}
.learn-sidebar .lesson:hover { background: var(--bg-alt); color: var(--enerva-dark); text-decoration: none; }
.learn-sidebar .lesson.active {
  background: var(--enerva-red-50);
  color: var(--enerva-red);
  font-weight: 600;
}
.learn-sidebar .lesson.completed { color: var(--success); }
.learn-sidebar .lesson.completed::after {
  content: '✓';
  margin-left: auto;
  color: var(--success);
  font-weight: 700;
}
.learn-sidebar .lesson .icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }

.learn-main {
  padding: 40px 48px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
.learn-main h1 { margin-top: 0; }

.learn-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .04);
  margin: 0 -48px -40px;
}

/* =========================================================
   Quiz
   ========================================================= */
.quiz-question {
  background: var(--surface);
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}
.quiz-question .prompt { font-weight: 600; margin-bottom: 14px; font-size: 15px; color: var(--enerva-dark); }
.quiz-question .option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
  background: var(--surface);
  font-size: 14px;
}
.quiz-question .option:hover { background: var(--bg-alt); border-color: var(--border-strong); }
.quiz-question .option.selected {
  background: var(--enerva-red-50);
  border-color: var(--enerva-red);
  color: var(--enerva-red);
  font-weight: 500;
}
.quiz-question .option.correct { background: var(--success-50); border-color: var(--success); color: var(--success); }
.quiz-question .option.wrong { background: var(--err-50); border-color: var(--err); color: var(--err); }
/* EN / FR language switcher (RFP 5d — bilingual platform) */
.lang-switch {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  height: 34px;
  flex-shrink: 0;
}
.lang-switch .lang-opt {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 0 9px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lang-switch .lang-opt:hover { background: var(--bg-alt); color: var(--text); }
.lang-switch .lang-opt.active { background: var(--enerva-red); color: #fff; }
.lang-switch .lang-opt:focus-visible { outline: 2px solid var(--enerva-dark); outline-offset: -2px; }
@media (max-width: 900px) { .lang-switch { height: 30px; } .lang-switch .lang-opt { padding: 0 7px; font-size: 11px; } }

/* Skip link — off-screen until focused, then pinned to the top-left (WCAG SC 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--enerva-red);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--enerva-dark);
  outline-offset: 2px;
}

.quiz-question .option input { margin: 0; accent-color: var(--enerva-red); flex-shrink: 0; }
/* The option is a <label> wrapping a real input, so keyboard focus lands on the input.
   Promote that focus to the whole option so it is clearly visible. */
.quiz-question .option:focus-within {
  border-color: var(--enerva-red);
  box-shadow: 0 0 0 3px rgba(192, 0, 0, .35);
  outline: 2px solid transparent; /* preserved in Windows High Contrast Mode */
}
.quiz-question .option input:disabled { cursor: default; }
.quiz-question .option:has(input:disabled) { cursor: default; }

/* =========================================================
   Modal
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 14, 30, .48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.modal-overlay.in { opacity: 1; }
.modal-overlay.out { opacity: 0; }
.modal {
  background: var(--surface);
  max-width: 560px;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(.96) translateY(8px);
  transition: transform var(--dur-2) var(--ease);
}
.modal-overlay.in .modal { transform: scale(1) translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-1) var(--ease);
}
.modal-close:hover { background: var(--bg-alt); color: var(--enerva-dark); }
.modal-body {
  padding: 22px;
  overflow-y: auto;
}
.modal-lg { max-width: 780px; }

/* =========================================================
   Tables
   ========================================================= */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
table.data th, table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}
table.data th {
  background: var(--bg-alt);
  font-weight: 700;
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--surface-2); }

.table-scroll { overflow-x: auto; border-radius: var(--radius); }

/* =========================================================
   Alerts
   ========================================================= */
.alert {
  padding: 13px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.alert.success { background: var(--success-50); color: #065F46; border-color: #6EE7B7; }
.alert.error { background: var(--err-50); color: #991B1B; border-color: #FCA5A5; }
.alert.info { background: var(--soft-blue); color: #1E40AF; border-color: #93C5FD; }
.alert.warn { background: var(--warn-50); color: #92400E; border-color: #FCD34D; }

/* =========================================================
   Badge cards (gamification)
   ========================================================= */
.badge-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  border: 1px solid var(--border);
  opacity: .55;
  transition: all var(--dur-2) var(--ease);
}
.badge-card.earned {
  opacity: 1;
  border-color: var(--enerva-red);
  box-shadow: 0 2px 12px rgba(192, 0, 0, .1);
}
.badge-card .icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.badge-card .name { font-weight: 700; color: var(--enerva-dark); }
.badge-card .desc { color: var(--text-muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--enerva-dark);
  color: #fff;
  padding: 56px 24px 24px;
  margin-top: auto;
}
.footer .wrap {
  max-width: var(--container-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
/* h2, not h4. The footer renders on every route, so its column headings landed
   after whatever the view had emitted — an h1 followed by an h4 is a skipped
   level on every page in the product. h2 is always valid directly under the
   page h1, whatever the view in between used. Both selectors are kept so the
   appearance is identical either way. */
.footer h2, .footer h4 {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 16px;
  font-weight: 700;
}
.footer a { color: #B8BDD4; font-size: 14px; display: block; padding: 4px 0; transition: color var(--dur-1) var(--ease); }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .brand-block p { color: #B8BDD4; font-size: 14px; max-width: 320px; line-height: 1.6; }
.footer .brand-block .logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* No invert filter here: the dark-mode file is already drawn for a dark ground,
   and flattening it to pure white would drop its two-tone treatment. */
.footer .brand-block .logo-row img { height: 36px; width: auto; display: block; }
.footer .copyright {
  max-width: var(--container-w);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  color: #B8BDD4;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  align-items: center;
}

/* =========================================================
   Avatar
   ========================================================= */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--enerva-red), var(--enerva-red-700));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  letter-spacing: .02em;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .08);
}
.avatar.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 96px; height: 96px; font-size: 36px; }
.avatar.xl { width: 128px; height: 128px; font-size: 44px; }

/* =========================================================
   Toast
   ========================================================= */
#toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--enerva-dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  /* Anchored to the right edge, so a 420px toast runs off the left side of a
     360px screen. Cap it against the viewport instead. */
  max-width: min(420px, calc(100vw - 48px));
  animation: toastIn .25s var(--ease);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.toast.toast-out { animation: toastOut .2s var(--ease) forwards; }
.toast .toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--err); }
.toast.warn { background: var(--warn); color: #fff; }
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }

/* =========================================================
   Auth pages
   ========================================================= */
.auth-page {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(192, 0, 0, .06), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(46, 53, 85, .06), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.auth-card {
  background: var(--surface);
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--border);
}
.auth-card .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-card .auth-logo img { height: 36px; width: auto; display: block; }
.auth-card h1 { margin-top: 0; color: var(--enerva-dark); font-size: 26px; }

/* =========================================================
   Tabs
   ========================================================= */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tabs .tab {
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  margin-bottom: -1px;
  transition: all var(--dur-1) var(--ease);
}
.tabs .tab:hover { color: var(--enerva-dark); }
.tabs .tab.active { color: var(--enerva-red); border-bottom-color: var(--enerva-red); }

/* =========================================================
   Empty states & loading
   ========================================================= */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.empty-state .empty-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 14px;
  opacity: .7;
}
.empty-state h3 { margin: 0 0 6px; color: var(--enerva-dark); }
.empty-state p { max-width: 380px; margin: 0 auto; }

.loading-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--enerva-red);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 0%, #EAECF3 50%, var(--bg-alt) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.skeleton-card .skeleton-cover { height: 168px; border-radius: 0; }
.skeleton-card .skeleton-body { padding: 18px; }
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =========================================================
   Admin console
   ========================================================= */
.admin-container { max-width: 1400px; }
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-top: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 0;
}
.admin-tab {
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur-1) var(--ease);
  white-space: nowrap;
}
.admin-tab:hover { background: var(--bg-alt); color: var(--enerva-dark); text-decoration: none; }
.admin-tab.active {
  color: var(--enerva-red);
  border-bottom-color: var(--enerva-red);
  background: transparent;
  font-weight: 600;
}
.admin-body { min-height: 400px; }

/* Chart */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 200px;
  padding: 16px 0 30px;
  overflow-x: auto;
}
.chart-bar {
  flex: 1;
  min-width: 22px;
  max-width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}
.chart-bar .bar {
  width: 100%;
  background: linear-gradient(180deg, var(--enerva-red), var(--enerva-red-700));
  border-radius: 6px 6px 0 0;
  min-height: 3px;
  transition: all var(--dur-2) var(--ease);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .1);
}
.chart-bar:hover .bar { opacity: .85; transform: scaleY(1.02); transform-origin: bottom; }
.chart-bar .bar-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  transform: rotate(-45deg);
  transform-origin: top left;
  white-space: nowrap;
  position: absolute;
  top: 100%;
  left: 50%;
}

/* =========================================================
   Utility
   ========================================================= */
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-danger { color: var(--err); }
.text-success { color: var(--success); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.hidden { display: none !important; }
.small { font-size: 12.5px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.fw-700 { font-weight: 700; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .learn-layout { grid-template-columns: minmax(0, 1fr); }
  /* Off-canvas drawer. Previously this was a 300px-tall scrolling block above
     the lesson, so every lesson began with the learner scrolling past the whole
     outline — and scrolling back up through it to advance. */
  .learn-outline-toggle { display: flex; }
  .learn-sidebar {
    position: fixed;
    top: var(--header-h); bottom: 0; left: 0;
    width: 86%; max-width: 340px;
    max-height: none;
    z-index: 60;
    border-bottom: 0;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--ease);
  }
  body.learn-outline-open .learn-sidebar { transform: none; }
  .learn-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10, 14, 30, .48);
    z-index: 50;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease);
  }
  body.learn-outline-open .learn-scrim { opacity: 1; pointer-events: auto; }
  .learn-main { padding: 24px; }
  .learn-footer { margin: 0 -24px -24px; padding: 12px 24px; }
  .fields-row, .fields-row-3 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 56px 24px 64px; }
  .hero h1 { font-size: 32px; }
  .footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A 360-380px rail plus readable content needs ~790px; below that the rail
     goes full-width underneath the content it belongs to. */
  .grid-sidebar, .grid-sidebar-lg, .grid-aside { grid-template-columns: minmax(0, 1fr); }
  .grid-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* Only the logo and the toggle stay in the bar; the toggle is pushed right
     now that nav (which carried flex:1) has left the flow. */
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .topnav { padding: 0 var(--sp-4); gap: var(--sp-3); }
  /* The drawer takes BOTH the nav links and the right-hand controls. Leaving
     search / language / theme / sign-in / CTA in the bar gave it a min-content
     width wider than a phone viewport, which stretched the whole document
     sideways and clipped the last button. */
  .topnav-menu {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--surface);
    padding: 12px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--dur-2) var(--ease);
  }
  body.nav-open .topnav-menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .topnav-menu nav { flex-direction: column; gap: 2px; }
  .topnav nav a { padding: 12px 14px; border-radius: 10px; }
  /* Controls wrap onto their own rows below the links instead of one long line. */
  .topnav .right {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .topnav .right .btn { flex: 1 1 140px; }
  .topnav .logo-label { display: none; }
  /* The notification panel now sits inside a scrolling drawer, where an
     absolutely-positioned overlay would be clipped — and 380px does not fit a
     phone regardless. Flow it inline as an expanding section instead. */
  .notif-wrap { width: 100%; }
  .notif-dropdown {
    position: static;
    display: none;
    width: 100%;
    max-height: 60vh;
    margin-top: 8px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
  }
  .notif-wrap.open .notif-dropdown { display: flex; }
  /* The full lockup is ~4.4:1, so shrink it to leave room for the hamburger
     and the right-hand controls on a phone. */
  .topnav .logo img { height: 30px; }
  .container { padding: 16px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-split, .grid-filters { grid-template-columns: minmax(0, 1fr); }
  .footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-card { padding: 28px 22px; }
}
@media (max-width: 500px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Below this the trailing button has no room left beside the field. */
  .grid-inline-action { grid-template-columns: minmax(0, 1fr); }
}

/* Data tables hold their column widths and scroll sideways inside .table-scroll
   instead of crushing 6-8 columns into a phone viewport. Every table.data is
   wrapped, so the scroll is contained and never reaches the page. */
@media (max-width: 760px) {
  table.data { min-width: 640px; }
  table.data th, table.data td { padding: 10px 12px; }
}

/* Touch input: meet the 44px minimum hit area (WCAG 2.5.5, Apple HIG).
   Keyed off pointer type rather than viewport width, so a small laptop keeps
   compact controls while a large tablet still gets touch-sized ones. */
@media (pointer: coarse) {
  .icon-btn, .nav-toggle, .modal-close { min-width: 44px; min-height: 44px; }
  .btn { padding: 12px 20px; }
  .topnav nav a { padding: 12px 14px; }
  /* No physical keyboard to press it on. */
  #cmd-btn kbd { display: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .progress-bar-fill::after { display: none; }
  .skeleton { animation: none; }
}

/* =========================================================
   Dark theme
   ========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0E1A;
  --bg-alt: #141829;
  --surface: #161B2E;
  --surface-2: #1C2236;
  --border: #252B42;
  --border-strong: #323855;
  --text: #E8EAF2;
  --text-soft: #C5C9D8;
  --text-muted: #8B91A8;
  --muted: #8B91A8;
  --soft-bg: #1C2236;
  --soft-blue: #1C2742;
  --enerva-dark: #E8EAF2;
  --enerva-dark-700: #C5C9D8;
  --enerva-dark-50: #1C2236;
  --enerva-red-50: #2A1617;
  --enerva-red-100: #3D1A1B;
  --success-50: #0F2820;
  --warn-50: #2D1F0E;
  --err-50: #2D1517;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, .4), 0 4px 8px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55), 0 6px 12px rgba(0, 0, 0, .3);
  --focus-ring: 0 0 0 3px rgba(192, 0, 0, .35);
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .topnav { background: rgba(22, 27, 46, .82); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--text); }
html[data-theme="dark"] code { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] pre { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .hero {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .05), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(192, 0, 0, .3), transparent 60%),
    linear-gradient(135deg, #0F1328 0%, #171D37 50%, var(--enerva-red-700) 130%);
}
html[data-theme="dark"] .btn { color: var(--text); }
html[data-theme="dark"] .btn-ghost { color: var(--text); }
html[data-theme="dark"] .btn-primary { color: #fff; }
html[data-theme="dark"] .btn-dark { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .btn-dark:hover { background: var(--bg-alt); color: var(--text); }
html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: #6B7185; }
html[data-theme="dark"] .course-card { background: var(--surface); }
html[data-theme="dark"] .course-card:hover { border-color: var(--enerva-red); }
html[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .7); }
html[data-theme="dark"] .tag { background: var(--surface-2); color: var(--text-soft); }
html[data-theme="dark"] .tag.red { background: var(--enerva-red-50); color: #FF8888; }
html[data-theme="dark"] .tag.green { background: var(--success-50); color: #5FCF8A; }
html[data-theme="dark"] .tag.blue { background: var(--soft-blue); color: #7AA5FF; }
html[data-theme="dark"] .tag.yellow { background: var(--warn-50); color: #F0B45B; }
html[data-theme="dark"] .tag.dark { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .alert.success { background: var(--success-50); color: #5FCF8A; border-color: rgba(95, 207, 138, .3); }
html[data-theme="dark"] .alert.error { background: var(--err-50); color: #FF8888; border-color: rgba(255, 136, 136, .3); }
html[data-theme="dark"] .alert.info { background: var(--soft-blue); color: #7AA5FF; border-color: rgba(122, 165, 255, .3); }
html[data-theme="dark"] .alert.warn { background: var(--warn-50); color: #F0B45B; border-color: rgba(240, 180, 91, .3); }
html[data-theme="dark"] .admin-tab.active { color: #FF6B6B; border-bottom-color: #FF6B6B; }
html[data-theme="dark"] .course-card .price { color: #FF6B6B; }
html[data-theme="dark"] .stat .value { color: var(--text); }
html[data-theme="dark"] .learn-sidebar .lesson.active { background: var(--enerva-red-50); color: #FF8888; }
html[data-theme="dark"] .learn-sidebar .module-title { color: var(--text); }
html[data-theme="dark"] .footer { background: #06080F; }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--bg-alt) 0%, #1F2540 50%, var(--bg-alt) 100%); background-size: 200% 100%; }
html[data-theme="dark"] .chart-bar .bar { background: linear-gradient(180deg, #FF4444, var(--enerva-red-700)); }
html[data-theme="dark"] .auth-page {
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(192, 0, 0, .1), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(46, 53, 85, .15), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
html[data-theme="dark"] .auth-card h1 { color: var(--text); }
html[data-theme="dark"] .nav-toggle { color: var(--text); }
html[data-theme="dark"] .topnav nav a { color: var(--text-soft); }
html[data-theme="dark"] .topnav nav a:hover { color: var(--text); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.theme-toggle:hover { background: var(--bg-alt); color: var(--enerva-dark); }
.theme-toggle svg { width: 18px; height: 18px; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
html:not([data-theme="dark"]) .theme-toggle .sun { display: none; }
html:not([data-theme="dark"]) .theme-toggle .moon { display: block; }

/* =========================================================
   Command palette (Cmd+K)
   ========================================================= */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 14, 30, .55);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 0;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.cmd-overlay.in { opacity: 1; }
.cmd-palette {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-12px) scale(.98);
  transition: transform var(--dur-2) var(--ease);
}
.cmd-overlay.in .cmd-palette { transform: translateY(0) scale(1); }
.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cmd-input-wrap svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.cmd-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 16px;
  outline: none;
  color: var(--text);
  font-family: inherit;
}
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-hint {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-alt);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.cmd-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}
.cmd-section-label {
  padding: 10px 12px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 700;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  transition: background var(--dur-1) var(--ease);
}
.cmd-item:hover, .cmd-item.active { background: var(--bg-alt); }
.cmd-item .cmd-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--enerva-red-50);
  color: var(--enerva-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.cmd-item .cmd-title { font-weight: 500; }
.cmd-item .cmd-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.cmd-item .cmd-meta { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.cmd-empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Feature grid & testimonials
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--dur-2) var(--ease);
  position: relative;
  overflow: hidden;
}
.feature-card:hover { border-color: var(--enerva-red); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--enerva-red-50), transparent);
  color: var(--enerva-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { margin: 0 0 6px; font-size: 17px; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -12px; left: 18px;
  font-size: 60px;
  color: var(--enerva-red);
  font-family: Georgia, serif;
  line-height: 1;
  font-weight: 700;
  opacity: .5;
}
.testimonial-card .quote { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; font-style: italic; }
.testimonial-card .author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial-card .author-info strong { display: block; }
.testimonial-card .author-info span { color: var(--text-muted); font-size: 12px; }

/* Trust strip */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  opacity: .75;
}
.trust-strip .trust-logo {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: Georgia, serif;
}

/* Password strength meter */
.pw-meter {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.pw-meter-seg {
  flex: 1;
  height: 4px;
  background: var(--bg-alt);
  border-radius: 3px;
  transition: background var(--dur-2) var(--ease);
}
.pw-meter-seg.active.weak { background: #EF4444; }
.pw-meter-seg.active.med { background: #F59E0B; }
.pw-meter-seg.active.strong { background: #10B981; }
.pw-label { font-size: 11px; margin-top: 4px; font-weight: 600; }
.pw-label.weak { color: #EF4444; }
.pw-label.med { color: #F59E0B; }
.pw-label.strong { color: #10B981; }

/* Notification dropdown */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 500;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-2) var(--ease);
}
.notif-wrap { position: relative; }
.notif-wrap.open .notif-dropdown { transform: translateY(0); opacity: 1; pointer-events: auto; }
.notif-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
/* .notif-title was an <h4>. It sits in the nav, so on every authenticated page
   it landed between the document <h1> and the view's own <h2>/<h3>, which axe
   reports as a skipped heading level on every route. It labels a widget rather
   than opening a document section, so it is no longer a heading at all — the
   dropdown is named for assistive tech by aria-label on its container. */
.notif-header .notif-title, .notif-header h4 { margin: 0; font-size: 14px; font-weight: 700; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { padding: 12px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--dur-1) var(--ease); }
.notif-item:hover { background: var(--bg-alt); }
.notif-item.unread { background: var(--enerva-red-50); }
.notif-item:last-child { border-bottom: 0; }
.notif-item strong { display: block; font-size: 13.5px; }
.notif-item p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.notif-item .when { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: block; }
.notif-footer { padding: 10px 18px; text-align: center; border-top: 1px solid var(--border); background: var(--bg-alt); }
.notif-footer a { font-size: 12px; font-weight: 600; }

/* Category badges */
.cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--enerva-red-50);
  color: var(--enerva-red);
}
.cat-icon.c-energy { background: #FEF3C7; color: #B45309; }
.cat-icon.c-decarb { background: #D1FAE5; color: #065F46; }
.cat-icon.c-indust { background: #E0E7FF; color: #3730A3; }
.cat-icon.c-ops { background: #FCE7F3; color: #9D174D; }
.cat-icon.c-comp { background: #EDE9FE; color: #5B21B6; }
html[data-theme="dark"] .cat-icon { background: var(--surface-2); }

/* SVG chart */
.svg-chart {
  width: 100%;
  height: 220px;
}
.svg-chart .area { fill: url(#chart-gradient); opacity: .25; }
.svg-chart .line { fill: none; stroke: var(--enerva-red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.svg-chart .dot { fill: var(--enerva-red); }
.svg-chart .axis { stroke: var(--border); stroke-width: 1; }
.svg-chart .tick { fill: var(--text-muted); font-size: 11px; }
.svg-chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }

/* Donut chart */
.donut-chart { display: flex; align-items: center; gap: 20px; }
.donut-chart svg { flex-shrink: 0; }
.donut-chart .donut-value { font-size: 22px; font-weight: 800; fill: var(--enerva-dark); }
.donut-chart .donut-label { font-size: 10px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="dark"] .donut-chart .donut-value { fill: var(--text); }

/* Activity feed */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: 0; }
.activity-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--enerva-red-50);
  color: var(--enerva-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.activity-content { flex: 1; font-size: 13.5px; line-height: 1.45; }
.activity-time { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

/* =========================================================
   Instructor toolbar / inline edit mode
   ========================================================= */
.instructor-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  background: linear-gradient(135deg, var(--enerva-dark) 0%, var(--enerva-dark-700) 100%);
  color: #fff;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.instructor-bar .ib-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.instructor-bar .ib-label::before {
  content: '';
  width: 8px; height: 8px;
  background: #FFB347;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 179, 71, .25);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
.instructor-bar .ib-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.instructor-bar .ib-toggle button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.instructor-bar .ib-toggle button:hover { color: #fff; }
.instructor-bar .ib-toggle button.active {
  background: var(--enerva-red);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.instructor-bar .ib-spacer { flex: 1; }
.instructor-bar .ib-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-1) var(--ease);
}
.instructor-bar .ib-action:hover { background: rgba(255, 255, 255, .2); color: #fff; text-decoration: none; }

/* Edit mode visual */
body.edit-mode .editable {
  position: relative;
  outline: 2px dashed rgba(192, 0, 0, .35);
  outline-offset: 4px;
  border-radius: 6px;
  cursor: text;
  transition: outline-color var(--dur-1) var(--ease);
}
body.edit-mode .editable:hover { outline-color: var(--enerva-red); background: rgba(192, 0, 0, .03); }
body.edit-mode .editable:focus { outline: 2px solid var(--enerva-red); outline-offset: 4px; background: var(--enerva-red-50); }
body.edit-mode .edit-pencil {
  position: absolute;
  top: -10px; right: -10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--enerva-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
  pointer-events: none;
}
body.edit-mode .editable:hover .edit-pencil,
body.edit-mode .editable:focus .edit-pencil { opacity: 1; pointer-events: auto; }

/* Inline-editable hint */
body.edit-mode .lesson-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
body.edit-mode .lesson:hover .lesson-actions { opacity: 1; }
body.edit-mode .lesson-actions button {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.edit-mode .lesson-actions button:hover { background: var(--surface); color: var(--enerva-dark); }
body.edit-mode .lesson-actions button.del:hover { color: var(--err); }

/* Add lesson inline button in sidebar */
body.edit-mode .add-lesson-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 4px 0 8px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all var(--dur-1) var(--ease);
}
body.edit-mode .add-lesson-inline:hover {
  border-color: var(--enerva-red);
  color: var(--enerva-red);
  background: var(--enerva-red-50);
}

/* =========================================================
   Inline video editor
   ========================================================= */
.video-editor {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}
.video-editor .video-overlay {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 6px;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.video-editor:hover .video-overlay { opacity: 1; }
.video-editor .video-overlay button {
  background: rgba(0, 0, 0, .7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dur-1) var(--ease);
}
.video-editor .video-overlay button:hover { background: rgba(0, 0, 0, .9); border-color: rgba(255, 255, 255, .4); }
.video-placeholder {
  background: linear-gradient(135deg, var(--enerva-dark) 0%, var(--enerva-dark-700) 100%);
  border: 2px dashed rgba(255, 255, 255, .3);
  border-radius: 12px;
  color: #fff;
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
}
.video-placeholder:hover {
  border-color: var(--enerva-red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.video-placeholder .vp-icon { font-size: 48px; line-height: 1; margin-bottom: 12px; }
.video-placeholder strong { display: block; font-size: 17px; margin-bottom: 4px; }
.video-placeholder .vp-sub { color: rgba(255, 255, 255, .7); font-size: 13px; }

/* =========================================================
   Module preset gallery
   ========================================================= */
.preset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.preset-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: var(--surface);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
  position: relative;
  text-align: left;
}
.preset-card:hover {
  border-color: var(--enerva-red);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.preset-card.selected {
  border-color: var(--enerva-red);
  background: var(--enerva-red-50);
  box-shadow: 0 0 0 3px rgba(192, 0, 0, .15);
}
.preset-card .preset-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--enerva-red-50);
  color: var(--enerva-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
}
.preset-card h4 { margin: 0 0 4px; font-size: 15px; }
.preset-card p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.preset-card .preset-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--text-soft);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.preset-card .preset-list li { padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.preset-card.selected .preset-icon {
  background: var(--enerva-red);
  color: #fff;
}

/* =========================================================
   Rich-text toolbar
   ========================================================= */
.rt-toolbar {
  position: sticky;
  top: calc(var(--header-h) + 50px);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: all var(--dur-2) var(--ease);
  pointer-events: none;
}
.rt-toolbar.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rt-toolbar button {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-1) var(--ease);
  font-weight: 600;
}
.rt-toolbar button:hover { background: var(--bg-alt); color: var(--enerva-dark); }
.rt-toolbar button.active { background: var(--enerva-red); color: #fff; }
.rt-toolbar .sep { width: 1px; background: var(--border); margin: 4px 4px; }

/* =========================================================
   Onboarding hint bubble
   ========================================================= */
.hint-bubble {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--enerva-dark);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 600;
  max-width: 360px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: hintIn .4s var(--ease);
}
.hint-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--enerva-dark);
  border-bottom: 0;
}
.hint-bubble button.close {
  background: rgba(255, 255, 255, .15);
  border: 0;
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
}
.hint-bubble button.close:hover { background: rgba(255, 255, 255, .25); }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =========================================================
   Live sessions
   ========================================================= */
.session-hero {
  background: linear-gradient(135deg, var(--enerva-dark) 0%, var(--enerva-red-700) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.session-hero h1 { color: #fff; margin: 0; font-size: 26px; }
.session-hero .meta { color: rgba(255, 255, 255, .85); font-size: 14px; margin-top: 6px; }
.session-hero::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  border-radius: 50%;
}

.session-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.session-status.upcoming { background: rgba(255, 255, 255, .15); color: #fff; }
.session-status.live {
  background: #FF4444;
  color: #fff;
  animation: pulse 2s ease-in-out infinite;
}
.session-status.live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35);
  animation: pulse 1.4s ease-in-out infinite;
}
.session-status.ended { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  gap: 10px;
  max-width: 360px;
  margin: 18px 0;
}
.countdown .unit {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 10px 4px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.countdown .unit-value { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.countdown .unit-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .8); margin-top: 6px; }

.session-room {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 70vh;
  min-height: 480px;
  position: relative;
}
.session-room iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.session-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.session-toolbar .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--err);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.session-toolbar .live-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}

/* Session card in lists */
.session-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: grid;
  /* The middle track holds an untruncated course title, so it needs the zero
     floor or a long title stretches the card past the page. */
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  transition: all var(--dur-2) var(--ease);
}
.session-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.session-card.is-live { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-50); }
.session-card .date-block {
  text-align: center;
  background: var(--enerva-red-50);
  color: var(--enerva-red);
  border-radius: 12px;
  padding: 10px 6px;
}
.session-card .date-month { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
.session-card .date-day { font-size: 22px; font-weight: 800; line-height: 1; margin: 2px 0; }
.session-card .date-time { font-size: 11px; color: var(--text-muted); }
/* h3, not h4: session cards sit under the page's <h2> section heading, so h4
   skipped a level. The rule keeps both selectors so the visual size is identical
   whichever tag a template uses. */
.session-card h3, .session-card h4 { margin: 0; font-size: 16px; font-weight: 700; }
.session-card .session-meta { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.session-card-actions { text-align: right; }

/* Three columns leave the title about 116px on a 360px screen. Drop the actions
   onto their own full-width row so the title keeps the space it needs. */
@media (max-width: 560px) {
  .session-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .session-card-actions {
    grid-column: 1 / -1;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .session-card-actions .mt-1 { margin-top: 0; }
}

/* Save indicator */
.save-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--enerva-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-2) var(--ease);
  z-index: 4000;
}
.save-indicator.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.save-indicator.success { background: var(--success); }
.save-indicator.error { background: var(--err); }

/* Kbd key styling */
kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-soft);
  box-shadow: 0 1px 0 var(--border);
}

/* ── Federated sign-in (RFP 1b, 4c) ──────────────────────────────────────
   Appended rather than merged into the auth block above so this feature's
   styles travel with the feature. */
.sso-list { display: grid; gap: 10px; }

.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
.sso-btn:hover { border-color: var(--enerva-red, #C00000); }
/* The focus ring has to survive on a bordered button — this is the control a
   keyboard-only user lands on first on the sign-in page. */
.sso-btn:focus-visible { outline: 2px solid var(--focus-ring, #1f6feb); outline-offset: 2px; }
.sso-btn-icon { font-size: 17px; line-height: 1; }

.sso-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  color: var(--text-muted);
  font-size: 13px;
}
.sso-divider::before, .sso-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* =========================================================
   Sign-in / register — responsive
   ========================================================= */

/* 100vh on mobile is measured against the viewport WITH browser chrome
   retracted, so the card sits partly under the URL bar and the page always
   carries a phantom scroll. dvh tracks what is actually visible. The vh line
   stays first as the fallback for engines without dvh. */
.auth-page {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}

/* iOS Safari zooms the whole page when a focused input has a font-size below
   16px, which on the sign-in form throws the layout sideways the moment the
   keyboard opens. Scoped to the auth card so the app's 14px form typography is
   unchanged everywhere else. */
@media (max-width: 760px) {
  .auth-card .field input,
  .auth-card .field select,
  .auth-card .field textarea { font-size: 16px; }
}

/* A tenant name can be long — "Ontario Health — Entra ID" — and the button is
   full-width, so let the label wrap inside it instead of overflowing the card. */
.sso-btn {
  white-space: normal;
  line-height: 1.35;
  min-height: 48px;                 /* WCAG 2.5.5 target size */
  padding: 12px 16px;
  text-align: center;
}
.sso-btn-icon { flex: 0 0 auto; }
.sso-btn > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Keep the rules either side of "or sign in with an email address" from
   collapsing to zero width once the label takes most of a 320px screen. */
.sso-divider span { flex: 0 1 auto; min-width: 0; text-align: center; }
.sso-divider::before, .sso-divider::after { min-width: 12px; }

/* Home-realm discovery result.
   .alert is a flex ROW (built for an icon beside a message), so an action
   button dropped into one becomes a sibling column — on a phone that crushes
   "Continue with Microsoft Entra ID" into a three-line sliver beside the text.
   Inside the hint the action belongs on its own line, full width, at every
   size: the card is only 460px even on desktop. */
#sso-hint .alert { flex-direction: column; align-items: stretch; gap: 10px; }
#sso-hint .btn { width: 100%; margin-top: 0; white-space: normal; min-height: 44px; }

@media (max-width: 560px) {
  /* Stays centred. The container uses min-height, not height, so a card taller
     than the viewport grows the container rather than being clipped by the
     centring — the usual reason to reach for flex-start does not apply. */
  .auth-page { padding: 20px 14px; }
  .auth-card { padding: 24px 18px; }
  .auth-card h1 { font-size: 22px; }
  .auth-card .auth-logo { margin-bottom: 18px; }
  .auth-card .auth-logo img { height: 30px; max-width: 100%; }
}

@media (max-width: 380px) {
  .auth-page { padding: 16px 10px; }
  .auth-card { padding: 20px 14px; }
  .auth-card h1 { font-size: 20px; }
  .sso-divider { font-size: 12px; gap: 8px; }
}