/* =============================================================================
   LEADGEN MASTERY — main.css
   Course-flavored sibling of the Iron Mind AI design system.
   Source of truth for tokens: /home/niro/websites/iron-mind.ai/docs/brandbook.md
   This file follows the same custom-property system but is its own stylesheet —
   not a copy of iron-mind.ai/static/css/main.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. FONT FACES — exact match to iron-mind.ai brandbook declarations
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/static/fonts/dm-sans-latin.woff2') format('woff2-variations'),
       url('/static/fonts/dm-sans-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
}

/* -----------------------------------------------------------------------------
   1. CUSTOM PROPERTIES
   Leadgen Mastery runs an IVORY (light) palette — a deliberate, documented
   deviation from the canonical iron-mind.ai brandbook, which is dark-mode-only.
   Same amber accent, fonts, spacing, and radii; background/text/border/overlay
   tokens are inverted for a light surface. See docs/webui-templates-index.md
   for the decision record. iron-mind.ai itself is untouched by this change.
   ----------------------------------------------------------------------------- */
:root {
  /* Color — ivory (light) palette */
  --color-bg-primary: #F5F2ED;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FAF8F4;
  --color-accent: #E87C2E;
  --color-accent-hover: #D96D20;
  --color-accent-subtle: rgba(232, 124, 46, 0.10);
  --color-text-primary: #1A1816;
  --color-text-secondary: #3D3A36;
  --color-text-muted: #7A756E;
  --color-border: rgba(26, 24, 22, 0.10);
  --color-border-hover: rgba(26, 24, 22, 0.18);
  /* Tint overlay for hover/active states — dark-on-light equivalent of the
     rgba(255,255,255,...) overlays a dark theme would use. */
  --color-overlay: rgba(26, 24, 22, 0.04);
  --color-overlay-strong: rgba(26, 24, 22, 0.07);

  /* Semantic (not in brandbook core palette, used consistently w/ admin patterns) */
  --color-success: #178a4c;
  --color-danger: #c0392b;

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease-out;

  /* App shell (dashboard/lesson) — new token, not in canonical brandbook.
     Documented here since it's a course-specific layout addition. */
  --sidebar-width: 240px;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* Skip link — accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-accent);
  color: #0E0E0E;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 48px;
  line-height: 1.05;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 80px;
  }
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  h2, .h2 {
    font-size: 48px;
  }
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  h3, .h3 {
    font-size: 24px;
  }
}

.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
}

@media (min-width: 768px) {
  .body-lg {
    font-size: 18px;
  }
}

.body-sm {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
}

@media (min-width: 768px) {
  .body-sm {
    font-size: 15px;
  }
}

.mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Section number labels — brandbook: Section Labels */
.section-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* -----------------------------------------------------------------------------
   4. BUTTONS — brandbook: Component Patterns > Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #0E0E0E;
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-accent-subtle);
}

.btn--muted {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.btn--muted:hover:not(:disabled) {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.btn--sm {
  padding: 8px 16px;
  font-size: 12px;
}

.btn--block {
  width: 100%;
}

.text-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-family: var(--font-body);
  font-size: 14px;
}

.text-link:hover {
  color: var(--color-text-primary);
}

/* Icon-only button (menu, close) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

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

/* -----------------------------------------------------------------------------
   5. PUBLIC NAV (marketing shell: index, check-email)
   ----------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-nav .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.site-nav__logo {
  height: 24px;
  width: auto;
  filter: brightness(0);
}

.site-nav__product {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.site-nav__product span {
  color: var(--color-text-muted);
  font-weight: 400;
}

@media (max-width: 767px) {
  .site-nav {
    height: 56px;
  }
}

/* -----------------------------------------------------------------------------
   6. APP HEADER (dashboard / lesson shell)
   Persistent header for logged-in students: byline, name, logout.
   ----------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.app-header .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.app-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.app-header__logo {
  height: 22px;
  width: auto;
  filter: brightness(0);
}

.app-header__product {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* "Course by Niro Knox" byline credit */
.app-header__byline {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-2);
  white-space: nowrap;
}

.app-header__byline strong {
  color: var(--color-text-secondary);
  font-weight: 500;
}

@media (max-width: 767px) {
  .app-header__byline {
    display: none;
  }
  .app-header {
    height: 56px;
  }
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.app-header__student {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}

@media (max-width: 560px) {
  .app-header__student {
    display: none;
  }
}

/* Admin nav link — shown only to student.is_admin, next to name/logout.
   Uses .text-link as its base (imported look), with uppercase/letter-spacing
   to read as a nav item rather than inline prose, echoing .section-label's
   treatment without introducing a third link style. */
.app-header__admin-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   7. HERO (landing page)
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero {
    padding: var(--space-6) 0 var(--space-5);
  }
}

/* Fit-to-viewport variant (2026-07-03, "hate scroll" feedback) — the hero
   is the part of the page that must be visible with zero scroll on load,
   at any screen size. Achieved by (1) capping the section to the
   viewport minus the sticky nav, (2) centering content vertically so it
   never touches the edges, and (3) scaling type/spacing down with clamp()
   instead of fixed breakpoints, so it compresses continuously rather than
   jumping at 768px. The video was moved to its own section below the
   fold specifically so it doesn't compete for this space. */
.hero--fit {
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  align-items: center;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

@media (max-width: 767px) {
  .hero--fit {
    min-height: calc(100dvh - 56px);
  }
}

.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(232, 124, 46, 0.06), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgba(232, 124, 46, 0.3);
  background: var(--color-accent-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  margin-bottom: clamp(var(--space-2), 2vh, var(--space-3));
}

.hero__headline {
  max-width: 900px;
  margin-bottom: clamp(var(--space-2), 2vh, var(--space-3));
  /* Fluid across both axes (not just width) so a short/landscape viewport
     shrinks the headline too, instead of only reacting at the 768px
     width breakpoint — the thing that has to fit here is viewport
     height, not just width. */
  font-size: clamp(32px, 6vw + 4vh, 80px);
}

.hero__subline {
  max-width: 620px;
  color: var(--color-text-muted);
  margin-bottom: clamp(var(--space-2), 2vh, var(--space-4));
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-3), 3vw, var(--space-4));
  margin-top: clamp(var(--space-3), 2vh, var(--space-5));
  padding-top: clamp(var(--space-2), 1.5vh, var(--space-4));
  border-top: 1px solid var(--color-border);
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero__meta-value {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--color-text-primary);
}

.hero__meta-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Hero price stat — was/now pair inside .hero__meta, sized down from
   .confirm-card__price (paywall.html) to fit the compact meta-stat slot
   instead of inventing a fourth price treatment. */
.hero__meta-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hero__meta-price-old {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
  text-decoration-thickness: 1.5px;
}

.hero__meta-price-new {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--color-accent);
}

/* Hero as one unified stack (product pivot 2026-07-03, simplified from an
   earlier two-column hero+presenter grid — dropped in favor of a single
   flowing column: copy, byline, CTA, stats, video, no card chrome). */
.hero-stack {
  max-width: 760px;
}

.hero__byline {
  max-width: 620px;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: clamp(var(--space-2), 1.5vh, var(--space-3));
}

.hero__byline strong {
  color: var(--color-text-primary);
}

.hero__social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(var(--space-2), 2vh, var(--space-4));
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

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

.hero .lesson-player {
  margin-top: var(--space-6);
  margin-bottom: 0;
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   8. SECTIONS (generic)
   ----------------------------------------------------------------------------- */
.section {
  padding: var(--space-7) 0;
}

@media (max-width: 767px) {
  .section {
    padding: var(--space-6) 0;
  }
}

.section__head {
  max-width: 680px;
  margin-bottom: var(--space-5);
}

.section__heading {
  margin-bottom: var(--space-2);
}

.section__subline {
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   9. SIGNUP MODAL (landing page)
   Follows the brandbook's Progress/Enrichment Modal structural pattern:
   fixed full-viewport backdrop + centered surface card. Adapted here to
   host the signup form instead of an in-flight status display.
   ----------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - var(--space-5));
  overflow-y: auto;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.modal-card__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.modal-card__close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}

.modal-card__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .modal-card {
    animation: modal-card-in var(--transition-slow);
  }
}

@keyframes modal-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------------------
   10. PRESENTER BIO — hero-adjacent, prominent (landing page)
   New component: bigger sibling of blog_post.html .author-bio, documented here
   since it doesn't exist yet in the canonical brandbook.
   ----------------------------------------------------------------------------- */
.presenter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .presenter {
    grid-template-columns: 200px 1fr;
    padding: var(--space-5) var(--space-6);
  }
}

.presenter__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .presenter__photo {
    width: 200px;
    height: 200px;
  }
}

.presenter__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
  display: block;
}

.presenter__name {
  margin-bottom: 4px;
}

.presenter__title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.presenter__bio {
  color: var(--color-text-secondary);
  max-width: 640px;
}

.presenter__credentials {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.presenter__credentials li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.presenter__social-link {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.presenter__social-link:hover {
  color: var(--color-text-primary);
}

/* -----------------------------------------------------------------------------
   12. SIGNUP FORM — brandbook: Contact Form component pattern
   ----------------------------------------------------------------------------- */
.signup-form {
  max-width: 480px;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.form-field {
  margin-bottom: var(--space-3);
}

.form-field:last-of-type {
  margin-bottom: var(--space-2);
}

.form-field label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.form-field input {
  width: 100%;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.form-field input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(232, 124, 46, 0.25);
}

.form-field input:invalid[data-touched="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.2);
}

.form-field__error {
  display: none;
  color: var(--color-danger);
  font-size: 13px;
  margin-top: 6px;
}

.form-field__error.is-visible {
  display: block;
}

/* Honeypot */
.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup-form__error-banner {
  display: none;
  background: rgba(224, 82, 82, 0.08);
  border: 1px solid rgba(224, 82, 82, 0.25);
  color: var(--color-danger);
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: var(--space-3);
}

.signup-form__error-banner.is-visible {
  display: block;
}

.signup-form__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   13. CHECK-EMAIL PAGE
   ----------------------------------------------------------------------------- */
.confirm-panel {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-3);
}

.confirm-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
}

.confirm-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  color: var(--color-accent);
}

.confirm-card__heading {
  margin-bottom: var(--space-2);
}

.confirm-card__body {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.confirm-card__body strong {
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Paywall pricing — was/now price pair. The old price needs a real
   strikethrough + muted treatment so it visually reads as "was $X", not as
   a second, equally-valid number sitting next to the real price. */
.confirm-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.confirm-card__price-old {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
  text-decoration-thickness: 1.5px;
}

.confirm-card__price-new {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--color-accent);
  line-height: 1;
}

.confirm-card__price-note {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.confirm-card__error {
  color: #c0392b;
  font-size: 14px;
  margin-top: var(--space-2);
}

/* -----------------------------------------------------------------------------
   14. APP SHELL — dashboard / lesson layout
   Sidebar-shaped student shell, distinct from admin (course-flavored:
   progress-centric, no admin chrome).
   ----------------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  background-color: var(--color-bg-primary);
}

.app-body {
  display: flex;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background-color: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
}

@media (max-width: 767px) {
  .app-body {
    flex-direction: column;
  }
  .app-sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .app-main {
    padding: var(--space-3);
  }
}

/* -----------------------------------------------------------------------------
   15. STAT CARD — adapted from admin-stat-card
   ----------------------------------------------------------------------------- */
.stat-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card__number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

.stat-card__number .unit {
  font-size: 28px;
}

.stat-card__label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Overall completion progress bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-overlay-strong);
  border-radius: 100px;
  overflow: hidden;
  margin-top: var(--space-1);
}

.progress-bar__fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 100px;
  transition: width var(--transition-slow);
}

/* -----------------------------------------------------------------------------
   16. MODULE ACCORDION (dashboard sidebar + main list)
   New reusable component — documented here.
   ----------------------------------------------------------------------------- */
.module-accordion {
  display: flex;
  flex-direction: column;
}

.module-accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.module-accordion__item:last-child {
  border-bottom: none;
}

.module-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

.module-accordion__header-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.module-accordion__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-accordion__number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent);
}

.module-accordion__progress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.module-accordion__chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.module-accordion__item.is-open .module-accordion__chevron {
  transform: rotate(180deg);
}

.module-accordion__panel {
  display: none;
  flex-direction: column;
  padding-bottom: var(--space-2);
}

.module-accordion__item.is-open .module-accordion__panel {
  display: flex;
}

/* -----------------------------------------------------------------------------
   17. LESSON LIST ITEM — reusable across dashboard + lesson sidebar
   ----------------------------------------------------------------------------- */
.lesson-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-3) 8px calc(var(--space-3) + 10px);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.lesson-item:hover {
  color: var(--color-text-primary);
  background-color: var(--color-overlay);
}

.lesson-item.is-active {
  color: var(--color-text-primary);
  border-left-color: var(--color-accent);
  background-color: var(--color-overlay);
}

.lesson-item__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-item.is-complete .lesson-item__check {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.lesson-item.is-complete .lesson-item__check svg {
  display: block;
}

.lesson-item__check svg {
  display: none;
  width: 10px;
  height: 10px;
  color: #0E0E0E;
}

.lesson-item__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 28px;
}

.lesson-item__title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-item__duration {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   18. DASHBOARD MAIN CONTENT
   ----------------------------------------------------------------------------- */
.dashboard-header {
  margin-bottom: var(--space-4);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .dashboard-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dashboard-stats .stat-card:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .dashboard-stats .stat-card:first-child {
    grid-column: auto;
  }
}

.module-block {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.module-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.module-block__title-wrap {
  min-width: 0;
}

.module-block__number {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  display: block;
  margin-bottom: 2px;
}

.module-block__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--color-text-primary);
}

.module-block__stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.module-block__list {
  display: flex;
  flex-direction: column;
}

.module-block .lesson-item {
  padding-left: var(--space-4);
}

/* -----------------------------------------------------------------------------
   19. VIDEO PLAYER CHROME (lesson.html)
   New reusable component — documented here.
   ----------------------------------------------------------------------------- */
.lesson-player {
  background-color: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.lesson-player video {
  width: 100%;
  display: block;
  background: #000;
  max-height: 70vh;
}

.lesson-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.lesson-header__crumb {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.lesson-header__crumb .num {
  font-family: var(--font-mono);
  color: var(--color-accent);
  text-transform: none;
  letter-spacing: 0;
}

.lesson-header__title {
  margin: 0;
}

.lesson-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.mark-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mark-complete-btn svg {
  width: 16px;
  height: 16px;
}

.mark-complete-btn[data-completed="true"] {
  background-color: transparent;
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.lesson-nav__btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 45%;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.lesson-nav__btn:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-surface);
}

.lesson-nav__btn--next {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.lesson-nav__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lesson-nav__title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.lesson-nav__spacer {
  flex: 1;
}

/* -----------------------------------------------------------------------------
   20. LESSON NOTES (lesson.html)
   Server-rendered markdown (instructor supporting docs — DNS examples,
   checklists, tables, occasional screenshots) passed in as trusted HTML via
   `lesson_notes_html` (string | falsy) and rendered with `| safe` inside an
   `{% if %}` guard — the section is omitted entirely when a lesson has no
   notes. Styled generically by tag under `.lesson-notes__body` since the
   markdown renderer (python-markdown / markdown2) controls the exact markup
   and doesn't reliably emit custom classes.
   ----------------------------------------------------------------------------- */
.lesson-notes {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.lesson-notes__heading {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.lesson-notes__body {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.lesson-notes__body > *:first-child {
  margin-top: 0;
}

.lesson-notes__body > *:last-child {
  margin-bottom: 0;
}

/* Headings inside notes are intentionally subordinate to the page's own h1/h2
   (.lesson-header__title) — body font, not display font, so they read as
   sub-sections of a document rather than competing page-level headings. */
.lesson-notes__body h2 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-2);
}

.lesson-notes__body h3 {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: var(--space-3) 0 var(--space-1);
}

.lesson-notes__body h2:first-child,
.lesson-notes__body h3:first-child {
  margin-top: 0;
}

.lesson-notes__body p {
  margin: 0 0 var(--space-2);
}

.lesson-notes__body ul,
.lesson-notes__body ol {
  margin: 0 0 var(--space-2);
  padding-left: 1.4em;
}

.lesson-notes__body li {
  margin-bottom: 6px;
}

.lesson-notes__body li > ul,
.lesson-notes__body li > ol {
  margin-top: 6px;
  margin-bottom: 0;
}

.lesson-notes__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lesson-notes__body strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* Tables — GFM-style data tables (e.g. DNS record type reference, volume
   ramp-up schedules). Neither python-markdown nor markdown2 wraps <table>
   in a scroll container by default, so the table itself scrolls via
   `display: block` on narrow viewports rather than blowing out the page. */
.lesson-notes__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lesson-notes__body th,
.lesson-notes__body td {
  padding: 10px var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: normal;
}

.lesson-notes__body thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.lesson-notes__body tbody tr:last-child td {
  border-bottom: none;
}

.lesson-notes__body tbody tr:nth-child(even) {
  background-color: var(--color-bg-elevated);
}

/* Blockquotes — callouts within instructor notes */
.lesson-notes__body blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-accent-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-secondary);
}

.lesson-notes__body blockquote > *:last-child {
  margin-bottom: 0;
}

/* Inline code + fenced code blocks — JetBrains Mono per brandbook Code Style,
   light-mode treatment (elevated surface, not a dark code block). */
.lesson-notes__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--color-text-primary);
}

.lesson-notes__body pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.lesson-notes__body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-primary);
  white-space: pre;
}

/* Embedded screenshots — only Module 2 lessons "2.3 Email Gateway" and
   "2.5 Authentication - SPF" currently have these. Instructional, not
   decorative: clean centered inline display, capped width so a wide
   screenshot can't blow out the notes column on desktop. */
.lesson-notes__body img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 640px);
  margin: var(--space-3) auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lesson-notes__body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

@media (prefers-reduced-motion: no-preference) {
  .lesson-notes {
    animation: lesson-notes-reveal var(--transition-slow);
  }
}

@keyframes lesson-notes-reveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile lesson jump dropdown (shown < 768px instead of sidebar) */
.lesson-jump {
  display: none;
  margin-bottom: var(--space-3);
}

.lesson-jump select {
  width: 100%;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
}

@media (max-width: 767px) {
  .lesson-jump {
    display: block;
  }
  .app-sidebar.lesson-sidebar {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   20b. ADMIN TABLE (admin_students.html, admin_student_detail.html)
   Internal admin surface — functional, no scroll-reveal/flourish. Deliberately
   mirrors the .lesson-notes__body table treatment (border/radius, elevated
   striped header, zebra striping) rather than inventing a third table style,
   so the two data-table patterns in this project read as one system. Wrapped
   in `.admin-table-wrap` (not `display: block` on the table itself, as
   .lesson-notes__body does) because admin tables here have 5 real <th>
   columns and benefit from staying a true table (fixed column alignment)
   while still scrolling horizontally as a unit on narrow viewports.
   ----------------------------------------------------------------------------- */
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
}

.admin-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 10px var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* Self-hosted flag-icons (see backend/templating.py::country_flag) — fixed
   readable size regardless of surrounding font-size, small gap before the
   city/country text that follows it. */
.fi {
  width: 1.2em;
  height: 0.9em;
  margin-right: 6px;
  border-radius: 1px;
  vertical-align: -1px;
}

.admin-table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-elevated);
}

.admin-table tbody tr:hover {
  background-color: var(--color-overlay);
}

.admin-table a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.admin-table a:hover {
  color: var(--color-accent);
}

/* Sortable column headers (optional progressive enhancement via a small
   inline <script> in admin_students.html) — button-styled th content so
   sorting is keyboard/AT accessible, not a bare clickable <th>. */
.admin-table__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.admin-table__sort-btn:hover {
  color: var(--color-text-primary);
}

.admin-table__sort-icon {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  flex-shrink: 0;
}

.admin-table__sort-btn[aria-sort="ascending"] .admin-table__sort-icon,
.admin-table__sort-btn[aria-sort="descending"] .admin-table__sort-icon {
  opacity: 1;
  color: var(--color-accent);
}

/* Compact completion cell — pairs a mini .progress-bar with "x/y" text,
   scaled down to sit cleanly inside a table row instead of a full stat-card. */
.admin-table__completion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 140px;
}

.admin-table__completion .progress-bar {
  flex: 1;
  margin-top: 0;
  height: 6px;
}

.admin-table__completion-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Completed / not-completed semantic marker — not color-only per WCAG:
   check glyph + text, dash + text. */
.admin-table__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.admin-table__status--done {
  color: var(--color-success);
}

.admin-table__status--pending {
  color: var(--color-text-muted);
}

.admin-table__status svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Empty state (admin_students.html when rows is empty) */
.admin-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.admin-empty__heading {
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

/* Admin summary card — target_student identity block on the detail page.
   Reuses .stat-card visual language (surface/border/radius/padding) but as
   a horizontal identity row rather than a single big number, since name/
   email/signup/IP is descriptive data, not a metric. */
.admin-summary-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.admin-summary-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-summary-card__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-summary-card__value {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
}

.admin-summary-card__value.mono {
  font-size: 14px;
}

/* Lock status badge — student_devices lifetime-device-limit lockout
   (target_student.is_locked). Locked uses --color-danger for a visually
   distinct warning treatment, mirroring the semantic-not-color-only
   convention used by .admin-table__status (icon + text, not color alone). */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid transparent;
}

.admin-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.admin-badge--locked {
  color: var(--color-danger);
  background-color: rgba(192, 57, 43, 0.08);
  border-color: var(--color-danger);
}

.admin-badge--active {
  color: var(--color-success);
  background-color: rgba(23, 138, 76, 0.08);
  border-color: var(--color-success);
}

/* Device history table (admin_student_detail.html) — reuses .admin-table
   visual language, device_id shown in --font-mono per existing convention
   (debugging/admin data, not required to be pretty). */
.admin-device-history {
  margin-top: var(--space-4);
}

.admin-device-history__heading {
  margin-bottom: var(--space-2);
}

/* -----------------------------------------------------------------------------
   20. FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer__logo {
  height: 20px;
  width: auto;
  filter: brightness(0);
  opacity: 0.7;
}

.site-footer__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
}

.site-footer__legal {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   21. FLASH / TOAST (lightweight, JS-driven)
   ----------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 300;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   22. UTILITIES
   ----------------------------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.mt-0 { margin-top: 0; }

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}