/* ==========================================================================
   CodeFoundry — shared site styles
   Design concept: a digital foundry. Dark iron/charcoal surfaces, a molten
   ember gradient as the signature accent (the "pour"), Space Grotesk for
   display type, JetBrains Mono for labels/metadata/prices — the numbers
   and eyebrows read like compiler output, which is honest to the audience.
   ========================================================================== */

/* ==========================================================================
   Theme tokens — see CodeFoundry_COLOR_SCHEME.md for the full reference.

   Two independent variable groups:
     1. Page-body theme tokens (--navy, --primary, --text, etc.) — control
        page content. Selectable per-visitor via html[data-theme="dark|
        light|ocean"] and swappable at runtime (see .theme-switch in the
        header). With no data-theme attribute, :root applies (= Light).
     2. Chrome tokens (--chrome-*) — control header, footer, mobile nav, and
        the Admin/Dashboard/Instructor sidebar shell. These stay on a fixed
        dark palette regardless of which page-body theme is active, so
        navigation chrome never changes.

   Legacy alias names (--iron*, --ember*, --border, --border-soft) are kept
   so the large existing body of component CSS below (cards, forms, panels,
   etc.) re-themes automatically without needing every declaration rewritten
   — they simply point at the canonical tokens for whichever theme is active.
   ========================================================================== */

:root {
  /* --- Canonical page-body tokens (Light theme = default) --- */
  --navy:      #ffffff;
  --navy-2:    #f4f7fb;
  --navy-3:    #e6edf7;
  --primary:       #0c73d8;
  --primary-hover: #005bb0;
  --text:        #101828;
  --text-muted:  #3d4f68;
  --text-subtle: #566782;
  --border-color: #c7d3e4;
  --button-outline: #2a3a5033;
  --secondary-button-bg: #101828;
  --mobile-menu-bg: #edf3fa; /* unused legacy token, kept fully opaque defensively */
  --header-border: #d4dfed;
  --footer-divider: #d4dfed;
  --footer-title: #0f1f35;
  --footer-legal: #607089;

  /* Shared, theme-independent tokens */
  --button-radius: 8px;
  --card-radius: 12px;
  --maxwidth: 1200px;
  --header-height: 68px;

  --success: #6fb377;
  --danger:  #e2604a;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* --- Chrome tokens (header / footer / sidebars) — always dark --- */
  --chrome-bg: #0e1828;
  --chrome-bg-3: #161f2f;
  --chrome-text: #ffffff;
  --chrome-text-muted: #92a3bb;
  --chrome-text-subtle: #627193;
  --chrome-border: #1a2942;
  /* Fully opaque (no alpha) — this backs the full-screen mobile nav
     overlay, and any transparency there let page content underneath
     show through/overlap the menu links, making them hard to read. */
  --chrome-mobile-menu-bg: #0e1828;
  --chrome-header-border: #192746;
  --chrome-footer-divider: #1a2942;
  --chrome-footer-title: #ffffff;
  --chrome-footer-legal: #6e7b97;

  /* --- Legacy alias names — re-point the existing "digital foundry"
     component CSS at the canonical tokens above so it re-themes for free --- */
  --iron:      var(--navy);
  --iron-2:    var(--navy-2);
  --iron-3:    var(--navy-3);
  --iron-4:    #dbe4f2;
  --border:      var(--border-color);
  --border-soft: var(--border-color);
  --ember:      var(--primary);
  --ember-hot:  var(--primary);
  --ember-dim:  var(--primary-hover);
  --ember-glow: rgba(12, 115, 216, 0.14);
  --card-featured-bg: #eaf3ff;
}

html[data-theme="dark"] {
  --navy:      #0e1828;
  --navy-2:    #121c2b;
  --navy-3:    #161f2f;
  --primary:       #18b3ff;
  --primary-hover: #009de0;
  --text:        #ffffff;
  --text-muted:  #92a3bb;
  --text-subtle: #627193;
  --border-color: #1a2942;
  --button-outline: #ffffff22;
  --secondary-button-bg: #ffffff;
  --mobile-menu-bg: #0e1828; /* unused legacy token, kept fully opaque defensively */
  --header-border: #192746;
  --footer-divider: #1a2942;
  --footer-title: #ffffff;
  --footer-legal: #6e7b97;

  --iron:      var(--navy);
  --iron-2:    var(--navy-2);
  --iron-3:    var(--navy-3);
  --iron-4:    #1c2740;
  --border:      var(--border-color);
  --border-soft: var(--border-color);
  --ember:      var(--primary);
  --ember-hot:  var(--primary);
  --ember-dim:  var(--primary-hover);
  --ember-glow: rgba(24, 179, 255, 0.18);
  --card-featured-bg: #122540;
}

html[data-theme="ocean"] {
  --navy:      #052b3a;
  --navy-2:    #063447;
  --navy-3:    #0a435a;
  --primary:       #27d3b5;
  --primary-hover: #18b99c;
  --text:        #eafcff;
  --text-muted:  #9ac9cf;
  --text-subtle: #74acb7;
  --border-color: #11556b;
  --button-outline: #d4fff522;
  --secondary-button-bg: #eafcff;
  --mobile-menu-bg: #052b3a; /* unused legacy token, kept fully opaque defensively */
  --header-border: #0f5f78;
  --footer-divider: #11556b;
  --footer-title: #eafcff;
  --footer-legal: #73a7b2;

  --iron:      var(--navy);
  --iron-2:    var(--navy-2);
  --iron-3:    var(--navy-3);
  --iron-4:    #0d4f68;
  --border:      var(--border-color);
  --border-soft: var(--border-color);
  --ember:      var(--primary);
  --ember-hot:  var(--primary);
  --ember-dim:  var(--primary-hover);
  --ember-glow: rgba(39, 211, 181, 0.18);
  --card-featured-bg: #0a3f52;
}

/* Admin control panel is always a light/white surface with its own
   dedicated blue accent, independent of the visitor's chosen page-body
   theme — scoped to body.scope-admin (set by includes/header.php based on
   request path) rather than living inside the switchable theme blocks
   above. */
body.scope-admin {
  --navy:      #ffffff;
  --navy-2:    #f6f8fb;
  --navy-3:    #ffffff;
  --primary:       #1466d6;
  --primary-hover: #0f52b3;
  --text:        #16213a;
  --text-muted:  #5b6b82;
  --text-subtle: #8792a6;
  --border-color: #e3e8ef;
  --button-radius: 8px;
  --card-radius: 12px;
  --header-height: 68px;

  --iron:      var(--navy);
  --iron-2:    var(--navy-2);
  --iron-3:    var(--navy-3);
  --iron-4:    #eef2f7;
  --border:      var(--border-color);
  --border-soft: var(--border-color);
  --ember:      var(--primary);
  --ember-hot:  var(--primary);
  --ember-dim:  var(--primary-hover);
  --ember-glow: rgba(20, 102, 214, 0.12);
  --card-featured-bg: #eaf1fc;
}

* { box-sizing: border-box; }

html, body {
  background: var(--iron);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
main { flex: 1; }
h1, h2, h3, .hero-title, .section-title { font-family: var(--font-display); letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

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

/* Molten seam — the signature element. A thin glowing gradient rule used
   as a section accent, echoing a cast seam of hot metal. */
.seam {
  height: 3px;
  width: 72px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ember-hot), var(--ember), var(--ember-dim));
  box-shadow: 0 0 16px var(--ember-glow);
}
.seam.center { margin: 0 auto; }

/* ---------------------------------------------------------------------- */
/* Header / nav                                                           */
/* ---------------------------------------------------------------------- */
header {
  background: var(--chrome-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--chrome-header-border);
}
.nav {
  max-width: none;
  padding: 0 28px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  gap: 10px;
  color: var(--chrome-text);
}
.brand svg {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--ember-hot), var(--ember-dim));
  border-radius: 6px;
  color: #1a0f06;
  padding: 4px;
}
.nav-menu { display: flex; gap: 30px; align-items: center; }
.nav-link { color: var(--chrome-text-muted); font-weight: 500; font-size: 14.5px; transition: color .15s; }
.nav-link:hover, .nav-link.active { color: var(--chrome-text); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-user-name { color: var(--chrome-text-muted); font-size: 13px; font-family: var(--font-mono); font-weight: 500; }
/* .nav-btn is reused in two contexts: the header chrome (Login/Sign Up,
   Admin/Instructor panel links) AND generic page-body CTAs (hero buttons
   on the homepage, Training index, etc.). Those two contexts need
   different token sources — chrome stays fixed-dark, body CTAs must
   follow the active page theme — so the base rule below follows the
   page theme, and header-scoped rules further down override it back to
   --chrome-* only inside <header>. */
.nav-btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 700; border: 1px solid transparent;
  border-radius: var(--button-radius); padding: 9px 16px; cursor: pointer;
  background: var(--iron-3); color: var(--text); transition: background .15s, border-color .15s, transform .1s;
  display: inline-block;
}
.nav-btn.primary { background: linear-gradient(135deg, var(--ember-hot), var(--ember)); color: #1a0f06; }
.nav-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-btn.secondary { background: transparent; border: 1px solid var(--border); }
.nav-btn.secondary:hover { border-color: var(--ember-dim); color: var(--text); }

/* Header-scoped override — see comment above. */
header .nav-btn { background: var(--chrome-bg-3); color: var(--chrome-text); }
header .nav-btn.secondary { border: 1px solid var(--chrome-border); }
header .nav-btn.secondary:hover { border-color: var(--primary); color: var(--chrome-text); }
.mobile-hamburger {
  display: none; background: none; border: none; color: var(--chrome-text);
  font-size: 26px; cursor: pointer;
}
.mobile-nav-overlay {
  position: fixed; inset: 0; background: var(--chrome-mobile-menu-bg, #0e1828); z-index: 9999;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s;
  display: flex; justify-content: flex-end;
}
.mobile-nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav-panel {
  background: var(--chrome-bg, #0e1828); height: 100%; width: 280px; padding: 20px;
  border-left: 1px solid var(--chrome-border);
  box-shadow: -12px 0 32px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 20px;
}
.mobile-menu-close { background: none; border: none; color: var(--chrome-text); font-size: 26px; align-self: flex-end; cursor: pointer; }
.mobile-menu-links { display: flex; flex-direction: column; gap: 4px; }
/* Mobile links never show a :hover state on touch devices, so they must
   be legible in their DEFAULT state — brighter and higher-contrast than
   the muted desktop .nav-link color, with a clear tappable row so the
   solid opaque panel doesn't read as a washed-out/glassy overlay. */
.mobile-menu-links .nav-link {
  color: var(--chrome-text, #ffffff); font-weight: 600; font-size: 15.5px;
  padding: 12px 4px; border-bottom: 1px solid var(--chrome-border);
}
.mobile-menu-links .nav-link:last-child { border-bottom: none; }
.mobile-menu-links .nav-link:hover, .mobile-menu-links .nav-link.active { color: var(--primary); }
.mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

@media (max-width: 860px) {
  .nav-menu, .nav-actions { display: none; }
  .mobile-hamburger { display: block; }
  /* backdrop-filter's frosted-glass blur can render inconsistently on
     mobile browser engines (especially older iOS/Android WebViews),
     sometimes letting scrolling page content show through what should be
     a solid header — washing out the nav text. Mobile has no real content
     to blur behind it anyway (nav links are hidden), so drop the blur
     entirely there and rely on the plain opaque --chrome-bg fill. */
  header { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero-bg {
  position: relative;
  background: var(--iron);
  padding: 88px 20px 76px;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center, var(--ember-glow) 0%, transparent 70%);
  pointer-events: none;
}
.hero { max-width: var(--maxwidth); margin: 0 auto; text-align: center; position: relative; }
.hero-badge {
  font-family: var(--font-mono); background: var(--iron-3); border: 1px solid var(--border); color: var(--ember-hot);
  font-weight: 500; font-size: 13px; padding: 7px 14px; border-radius: 20px; display: inline-block; margin-bottom: 26px;
}
.hero-badge::before { content: '// '; color: var(--text-subtle); }
.hero-title { font-size: clamp(2.3rem, 5vw, 3.4rem); font-weight: 700; margin: 0 0 22px; line-height: 1.15; color: var(--text); }
.hero-desc { font-size: 1.15rem; color: var(--text-muted); max-width: 680px; margin: 0 auto 34px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Sections                                                                */
/* ---------------------------------------------------------------------- */
section { padding: 64px 20px; }
.section-heading { max-width: var(--maxwidth); margin: 0 auto 44px; text-align: center; }
.section-badge {
  font-family: var(--font-mono); color: var(--ember); font-weight: 600; font-size: 12.5px;
  display: inline-block; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.08em;
}
.section-title { font-size: 2.1rem; font-weight: 700; margin: 0 0 16px; color: var(--text); }
.section-desc { color: var(--text-muted); font-size: 1.02rem; max-width: 700px; margin: 0 auto; line-height: 1.65; }

/* Course / resource cards */
.card-grid {
  max-width: var(--maxwidth); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; padding: 0 20px;
}
.course-card {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 26px; display: flex; flex-direction: column; position: relative;
  transition: transform .18s, border-color .18s;
  border-top: 2px solid var(--border);
}
.course-card:hover { transform: translateY(-3px); border-color: var(--ember-dim); }
.course-card:hover::before { opacity: 1; }
.course-card::before {
  content: ''; position: absolute; top: -2px; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, var(--ember-hot), var(--ember)); opacity: 0; transition: opacity .18s;
}
.course-card.featured { border-color: var(--ember-dim); background: var(--card-featured-bg, var(--iron-3)); }
.course-card.featured::before { opacity: 1; }
.course-icon { font-size: 28px; margin-bottom: 12px; }
.course-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.course-tagline { font-size: .9rem; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.course-meta {
  display: flex; gap: 12px; font-family: var(--font-mono); font-size: .76rem; color: var(--text-subtle);
  margin-bottom: 16px; flex-wrap: wrap; text-transform: uppercase; letter-spacing: 0.03em;
}
.course-topics { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.course-topics li {
  font-size: .85rem; color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid var(--border-soft);
}
.course-topics li::before { content: '› '; color: var(--ember-dim); }
.course-topics li:last-child { border-bottom: none; }
.course-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; gap: 10px; }
.course-footer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.course-price { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--ember-hot); }
.course-price.free { color: var(--success); }
.card-btn {
  background: var(--ember); color: #1a0f06; font-weight: 700; font-size: .88rem;
  padding: 10px 18px; border-radius: var(--button-radius); transition: filter .15s;
}
.card-btn.secondary {
  background: transparent; color: var(--text); font-weight: 600;
  border: 1px solid var(--border); padding: 9px 17px;
}
.card-btn.secondary:hover { border-color: var(--ember-dim); filter: none; }
.card-btn:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------------- */
/* Pricing                                                                 */
/* ---------------------------------------------------------------------- */
.pricing-hero { text-align: center; padding: 76px 24px 44px; }
.pricing-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin: 0 0 16px; color: var(--text); }
.pricing-hero h1 span { color: var(--ember); }
.pricing-hero p { font-size: 1.05rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px;
  max-width: var(--maxwidth); margin: 0 auto 90px; padding: 0 24px;
}
.pricing-card {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 32px 28px; display: flex; flex-direction: column; position: relative;
}
.pricing-card.featured { border-color: var(--ember-dim); background: var(--card-featured-bg, var(--iron-3)); }
.featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ember-hot), var(--ember)); color: #1a0f06; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 14px; border-radius: 20px; white-space: nowrap;
}
.plan-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.plan-tagline { font-size: .85rem; color: var(--text-muted); margin: 0 0 22px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 22px; font-family: var(--font-mono); }
.plan-price .amount { font-size: 2.1rem; font-weight: 700; color: var(--text); }
.plan-price .period { font-size: .85rem; color: var(--text-muted); }
.plan-features { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.plan-features li {
  display: flex; gap: 10px; font-size: .875rem; color: var(--text-muted);
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features .check { color: var(--ember); font-weight: 700; }
.plan-btn {
  text-align: center; padding: 12px; border-radius: var(--button-radius); font-weight: 700;
  background: var(--iron-4); color: var(--text); border: 1px solid var(--border); transition: border-color .15s;
}
.plan-btn:hover { border-color: var(--ember-dim); }
.plan-btn.primary { background: linear-gradient(135deg, var(--ember-hot), var(--ember)); color: #1a0f06; border-color: transparent; }

/* ---------------------------------------------------------------------- */
/* Forms (Login / Signup)                                                  */
/* ---------------------------------------------------------------------- */
.auth-wrap { max-width: 420px; margin: 64px auto 90px; padding: 0 20px; }
.auth-card {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 36px 32px; border-top: 2px solid var(--ember-dim);
}
.auth-card h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 8px; color: var(--text); }
.auth-card p.sub { color: var(--text-muted); font-size: .9rem; margin: 0 0 26px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); font-family: var(--font-mono); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 11px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--iron-2); color: var(--text); font-family: var(--font-body); font-size: .95rem;
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--ember); }
.field-hint { font-weight: 400; text-transform: none; color: var(--text-subtle); font-family: var(--font-body); font-size: .78rem; }
.btn-block {
  width: 100%; padding: 13px; background: linear-gradient(135deg, var(--ember-hot), var(--ember)); color: #1a0f06; font-weight: 700;
  font-size: 1rem; border: none; border-radius: var(--button-radius); cursor: pointer; font-family: var(--font-body);
  transition: filter .15s;
}
.btn-block:hover { filter: brightness(1.08); }
.form-error {
  background: rgba(226,96,74,.1); border: 1px solid rgba(226,96,74,.3); color: #f0a08d;
  padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 16px;
}
.form-notice {
  background: rgba(255,106,43,.1); border: 1px solid rgba(255,106,43,.3); color: var(--ember-hot);
  padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 16px;
}
.form-success {
  background: rgba(111,179,119,.1); border: 1px solid rgba(111,179,119,.3); color: #9fd3a5;
  padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 16px;
}
.auth-alt { text-align: center; margin-top: 20px; font-size: .9rem; color: var(--text-muted); }
.auth-alt a { color: var(--ember); font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* Checkout                                                                */
/* ---------------------------------------------------------------------- */
.checkout-layout {
  max-width: 920px; margin: 0 auto; padding: 52px 24px 90px;
  display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start;
}
@media (max-width: 760px) { .checkout-layout { grid-template-columns: 1fr; padding: 36px 16px 60px; } }
.order-summary, .payment-box {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 28px;
}
.order-summary h2, .payment-box h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 20px; color: var(--text); }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
.summary-row.total { font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.summary-row .val { color: var(--text); font-weight: 600; }
.summary-row.total .val { color: var(--ember-hot); }
.summary-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.payment-methods { display: flex; gap: 8px; margin-bottom: 22px; }
.pay-method-btn {
  flex: 1; padding: 12px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; color: var(--text-muted); font-size: 12px; font-weight: 700;
  font-family: var(--font-mono); transition: border-color .15s, color .15s;
}
.pay-method-btn.active { border-color: var(--ember); background: var(--ember-glow); color: var(--ember-hot); }
#stripe-panel, #paypal-panel { display: none; }
#stripe-panel.active, #paypal-panel.active { display: block; }
#payment-element { margin-bottom: 20px; }
#card-errors { color: #f0a08d; font-size: 13px; margin-bottom: 12px; min-height: 18px; }
.btn-pay {
  width: 100%; padding: 14px; background: linear-gradient(135deg, var(--ember-hot), var(--ember)); color: #1a0f06; font-weight: 700;
  font-size: 16px; border: none; border-radius: var(--button-radius); cursor: pointer; font-family: var(--font-body);
}
.btn-pay:disabled { opacity: .55; cursor: not-allowed; }
.not-configured {
  background: var(--iron-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px; color: var(--text); font-size: 14px; text-align: center;
}
.secure-note { text-align: center; color: var(--text-subtle); font-size: 12px; margin-top: 16px; }

/* ---------------------------------------------------------------------- */
/* Dashboard                                                               */
/* ---------------------------------------------------------------------- */
.dash-layout { max-width: var(--maxwidth); margin: 0 auto; padding: 44px 20px 90px; }
.dash-header { margin-bottom: 34px; }
.dash-header h1 { font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 6px; color: var(--text); }
.dash-header p { color: var(--text-muted); margin: 0; }
.dash-header strong { color: var(--ember-hot); font-family: var(--font-mono); font-weight: 600; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.dash-panel {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 24px;
}
.dash-panel h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 16px; color: var(--text); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem; color: var(--text-muted); }
.dash-list li:last-child { border-bottom: none; }
.dash-list .val { color: var(--text); font-weight: 600; font-family: var(--font-mono); }
.empty-state { color: var(--text-subtle); font-size: .9rem; }

/* ---------------------------------------------------------------------- */
/* Progress bars (course detail + dashboard)                              */
/* ---------------------------------------------------------------------- */
.progress-bar-track {
  display: block; width: 100%; height: 8px; border-radius: 20px;
  background: var(--iron-4); border: 1px solid var(--border); overflow: hidden;
}
.progress-bar-track.small { height: 6px; margin-top: 6px; max-width: 220px; }
.progress-bar-fill {
  display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--ember-hot), var(--ember));
  transition: width .25s ease;
}
.progress-panel {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 20px 24px; margin-bottom: 28px;
}
.progress-panel-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.progress-pct { color: var(--ember-hot); font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* Course detail / lessons                                                 */
/* ---------------------------------------------------------------------- */
.course-detail-layout { max-width: 760px; margin: 0 auto; padding: 52px 20px 90px; }
.course-detail-header { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.course-detail-icon {
  font-size: 34px; background: var(--iron-3); border: 1px solid var(--border);
  border-radius: var(--card-radius); width: 62px; height: 62px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.course-detail-header h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 4px; color: var(--text); }
.course-detail-header p.sub { color: var(--text-muted); margin: 0; }
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-row {
  display: flex; align-items: center; gap: 14px; background: var(--iron-3);
  border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px 18px;
  transition: border-color .15s;
}
.lesson-row.done { border-color: var(--success); background: #1c2419; }
.lesson-row:hover { border-color: var(--ember-dim); }
.lesson-check {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--iron-2); color: var(--success); font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.lesson-row.done .lesson-check { background: var(--success); border-color: var(--success); color: #0d1a0e; }
.lesson-title { font-size: .95rem; color: var(--text); }
.lesson-row.done .lesson-title { color: var(--text-muted); text-decoration: line-through; }
.lesson-row-static { cursor: default; }
.lesson-row-static:hover { border-color: var(--border); }
.lesson-num { color: var(--text-muted); font-size: .9rem; flex-shrink: 0; min-width: 22px; }
.lesson-row-highlight {
  border-color: var(--ember-hot); box-shadow: 0 0 0 3px rgba(226,96,74,.18);
  animation: cf-lesson-highlight-pulse 1.8s ease-in-out 2;
}
@keyframes cf-lesson-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(226,96,74,.18); }
  50% { box-shadow: 0 0 0 6px rgba(226,96,74,.3); }
}

/* ---------------------------------------------------------------------- */
/* Course detail — two-column layout (main content + sticky sidebar)      */
/* ---------------------------------------------------------------------- */
.course-detail-layout-2col {
  max-width: 1180px; display: flex; align-items: flex-start; gap: 40px;
}
.course-detail-main { flex: 1; min-width: 0; }
.course-detail-sidebar { width: 300px; flex-shrink: 0; }
/* The global `section { padding: 64px 20px; }` rule (used for full-bleed
   marketing sections elsewhere on the site) must NOT apply here — these
   are stacked content blocks inside a narrower column, not full sections.
   Without this override, that 64px top+bottom padding stacks with the
   32px margin-top below and produces huge, obviously-broken gaps between
   Description / What You'll Learn / Course Content / etc. */
.course-detail-section { margin-top: 32px; padding: 0; }
.course-detail-section h2 {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--text); margin: 0 0 14px;
}
.course-content-meta { color: var(--text-muted); font-size: .85rem; margin: 0 0 12px; }

/* "View more / View less" expand-collapse for long section bodies (see
   assets/js/site.js — .cf-expandable). Collapsed height is set inline per
   element (measured from actual line-height), so this just supplies the
   fade cue and the toggle button's look. */
.cf-expandable { overflow: hidden; transition: max-height .25s ease; position: relative; }
.cf-expandable.cf-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--navy));
  pointer-events: none;
}
.cf-expand-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  background: transparent; border: none; color: var(--primary); font-weight: 600;
  font-size: .85rem; cursor: pointer; padding: 0; font-family: var(--font-body);
}
.cf-expand-btn:hover { text-decoration: underline; }

.course-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.course-checklist li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-muted); font-size: .92rem; line-height: 1.4; }
.course-checklist iconify-icon { color: var(--success); font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.course-plain-list { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: .92rem; line-height: 1.7; }

.instructor-card {
  display: flex; gap: 16px; align-items: flex-start; background: var(--iron-3);
  border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px;
}
.instructor-avatar {
  font-size: 32px; width: 58px; height: 58px; border-radius: 50%; background: var(--iron-2);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.instructor-name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1.02rem; }
.instructor-title { color: var(--ember-hot); font-size: .82rem; font-weight: 600; margin: 2px 0 8px; }
.instructor-bio { color: var(--text-muted); font-size: .88rem; line-height: 1.55; margin: 0; }

.course-mini-rail {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.course-mini-card {
  display: flex; gap: 12px; align-items: flex-start; background: var(--iron-3);
  border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px;
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.course-mini-card:hover { border-color: var(--ember-dim); transform: translateY(-2px); }
.course-mini-icon { font-size: 22px; flex-shrink: 0; }
.course-mini-body { min-width: 0; }
.course-mini-title { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.course-mini-meta { font-size: .75rem; color: var(--text-subtle); margin-bottom: 4px; }
.course-mini-price { font-family: var(--font-mono); font-size: .78rem; color: var(--ember-hot); font-weight: 700; }

.course-bundle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.course-bundle-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 120px;
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px 10px;
}
.course-bundle-item .course-mini-title { font-size: .8rem; }
.course-bundle-plus { font-size: 18px; color: var(--text-subtle); flex-shrink: 0; }

.course-enroll-card {
  position: sticky; top: 24px; background: var(--iron-3); border: 1px solid var(--border);
  border-radius: var(--card-radius); padding: 24px;
}
.course-enroll-price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.course-enroll-facts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.course-enroll-facts li { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-muted); }
.course-enroll-facts iconify-icon { color: var(--ember-hot); font-size: 17px; flex-shrink: 0; }
.course-enroll-back { display: block; text-align: center; margin-top: 18px; font-size: .82rem; color: var(--text-subtle); text-decoration: none; }
.course-enroll-back:hover { color: var(--text-muted); }

@media (max-width: 992px) {
  .course-detail-layout-2col { flex-direction: column; }
  .course-detail-sidebar { width: 100%; }
  .course-enroll-card { position: static; }
  .course-checklist { grid-template-columns: 1fr; }
}

[dir="rtl"] .course-detail-header { flex-direction: row-reverse; }
[dir="rtl"] .instructor-card { flex-direction: row-reverse; }
[dir="rtl"] .course-checklist li { flex-direction: row-reverse; }
[dir="rtl"] .course-enroll-facts li { flex-direction: row-reverse; }
[dir="rtl"] .course-plain-list { padding-left: 0; padding-right: 20px; }

/* ---------------------------------------------------------------------- */
/* Dashboard course rows                                                   */
/* ---------------------------------------------------------------------- */
.dash-panel-wide { grid-column: 1 / -1; }
.dash-course-list { display: flex; flex-direction: column; gap: 4px; }
.dash-course-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 8px;
  border-bottom: 1px solid var(--border-soft); transition: background .15s;
}
.dash-course-row:last-child { border-bottom: none; }
.dash-course-row:hover { background: var(--iron-4); }
.dash-course-icon { font-size: 20px; flex-shrink: 0; }
.dash-course-info { flex: 1; min-width: 0; }
.dash-course-title { display: block; font-size: .9rem; color: var(--text); margin-bottom: 2px; }
.dash-course-pct {
  font-family: var(--font-mono); font-size: .8rem; color: var(--ember-hot); font-weight: 700; flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Dashboard – Learning Hub (Certifications / Guides / Quizzes / Tutorials) */
/* ---------------------------------------------------------------------- */
.dash-section-heading { max-width: var(--maxwidth); margin: 0 0 18px; }
.dash-section-heading h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 4px; color: var(--text); }
.dash-section-heading p { color: var(--text-muted); font-size: .9rem; margin: 0; }
.hub-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1100px) {
  .hub-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.hub-card {
  background: var(--iron-3); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 22px; transition: transform .15s, border-color .15s;
}
.hub-card:hover { transform: translateY(-2px); border-color: var(--ember-dim); }
.hub-icon { font-size: 26px; margin-bottom: 10px; }
.hub-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); margin-bottom: 6px; }
.hub-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

/* ---------------------------------------------------------------------- */
/* Admin panel                                                             */
/* ---------------------------------------------------------------------- */
.admin-stat { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--ember-hot); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th {
  text-align: left; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: .72rem; color: var(--text-subtle); padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); vertical-align: middle; }
.admin-table td.mono { font-family: var(--font-mono); color: var(--text); }
.inline-form { display: inline-block; margin: 0; }
.admin-select {
  background: var(--iron-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: .8rem; font-family: var(--font-body);
}
.admin-btn-sm {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; padding: 5px 10px; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.admin-btn-sm:hover { border-color: var(--ember-dim); color: var(--text); }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; background: var(--iron-4); color: var(--text-muted);
  border: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.03em;
}
.badge.success { color: #9fd3a5; border-color: rgba(111,179,119,.35); background: rgba(111,179,119,.1); }
.badge.danger { color: #f0a08d; border-color: rgba(226,96,74,.35); background: rgba(226,96,74,.1); }

/* Shared search + sort + pagination table enhancer (assets/js/admin-table.js) */
.table-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.table-toolbar input[type="text"] {
  flex: 1; min-width: 200px; padding: 9px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--iron-2); color: var(--text);
}
.table-count { font-weight: 400; font-size: .8rem; color: var(--text-subtle); white-space: nowrap; }
.admin-table th.sortable-col { cursor: pointer; user-select: none; }
.admin-table th.sortable-col:hover { color: var(--text); }
.admin-table th.sortable-col::after { content: ' \2195'; opacity: .35; font-size: .8em; }
.admin-table th.sort-asc::after { content: ' \2191'; opacity: 1; color: var(--ember-hot); }
.admin-table th.sort-desc::after { content: ' \2193'; opacity: 1; color: var(--ember-hot); }
.table-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; justify-content: center; align-items: center; }
.table-page-btn.active { background: var(--ember-hot); border-color: var(--ember-hot); color: #fff; }

@media (max-width: 600px) {
  .course-detail-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-course-row { flex-wrap: wrap; }
  .dash-course-pct { margin-left: auto; }
  .admin-table th, .admin-table td { padding: 8px 6px; }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
/* NOTE: backgrounds/borders/accents below use var(--light-token, --iron-token)
   fallback chains. The Training/Certifications, Guides, Quizzes, and
   Tutorials pages define their own light-theme :root (--navy-2, --primary,
   --border-color, etc.) via $page_styles. Where a page defines those tokens,
   the footer picks them up automatically instead of leaking the dark iron
   theme's fixed colors onto an otherwise light-themed page. */
.footer-section {
  background: var(--chrome-bg); border-top: 1px solid var(--chrome-footer-divider); padding: 50px 40px 24px; margin-top: 40px;
}
.footer-row {
  max-width: var(--maxwidth); margin: 0 auto; display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 12px; color: var(--chrome-footer-title); }
.footer-logo svg { width: 22px; height: 22px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: 6px; color: #1a0f06; padding: 3px; }
.footer-brand { color: var(--chrome-text-muted); font-size: .9rem; }
.footer-col-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--chrome-text-subtle); font-weight: 600; margin-bottom: 14px; font-size: .78rem; }
.footer-link-list { list-style: none; margin: 0; padding: 0; }
.footer-link { display: block; color: var(--chrome-text-muted); font-size: .875rem; padding: 5px 0; transition: color .15s; }
.footer-link:hover { color: var(--primary); }
.footer-legal {
  max-width: var(--maxwidth); margin: 0 auto; border-top: 1px solid var(--chrome-footer-divider);
  padding-top: 20px; color: var(--chrome-footer-legal); font-size: .8rem; font-family: var(--font-mono);
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.footer-legal-links a { color: var(--chrome-footer-legal); }
.footer-legal-links a:hover { color: var(--primary); }
@media (max-width: 1000px) { .footer-row { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .footer-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Google Website Translator — hide its default banner/branding since we
   drive it entirely from our own language switcher below. Google injects
   these via an iframe/toolbar it adds to <body> itself, not classes we
   control from a stylesheet alone, so this is the standard hide-it recipe.
   ========================================================================== */
.goog-te-banner-frame, .goog-te-gadget-icon, .skiptranslate > iframe { display: none !important; }
body { top: 0px !important; position: static !important; }
#google_translate_element { display: none !important; }

/* ==========================================================================
   Language switcher (desktop dropdown in header nav + mobile <select> in
   the mobile-nav overlay). See lib/I18n.php (cf_locale cookie) — actual
   translation is done by the Google Website Translator widget, which
   reads the paired googtrans cookie on page load.
   ========================================================================== */
.cf-lang-switch { position: relative; }
.cf-lang-switch-btn {
  display: flex; align-items: center; gap: 6px; background: transparent;
  border: 1px solid var(--chrome-border); border-radius: 999px; padding: 7px 12px;
  color: var(--chrome-text-muted); font-family: var(--font-body); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s;
}
.cf-lang-switch-btn:hover { color: var(--chrome-text); border-color: var(--primary); }
.cf-lang-switch-btn iconify-icon:first-child { font-size: 16px; }
.cf-lang-switch-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; max-height: 380px;
  overflow-y: auto; background: var(--chrome-bg-3); border: 1px solid var(--chrome-border);
  border-radius: var(--button-radius); padding: 6px; display: none; flex-direction: column;
  gap: 1px; z-index: 1001; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cf-lang-switch-dropdown.open { display: flex; }
.cf-lang-switch-note {
  font-size: 11.5px; color: var(--chrome-text-subtle); padding: 8px 10px 10px;
  border-bottom: 1px solid var(--chrome-border); margin-bottom: 4px; line-height: 1.5;
}
.cf-lang-switch-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px; color: var(--chrome-text-muted);
  font-family: var(--font-body); font-size: 13.5px; transition: background .15s, color .15s;
}
.cf-lang-switch-item:hover { background: var(--chrome-bg); color: var(--chrome-text); }
.cf-lang-switch-item.active { color: var(--primary); font-weight: 700; }
.cf-lang-native { font-weight: 600; }
.cf-lang-english { font-size: 11.5px; color: var(--chrome-text-subtle); flex-shrink: 0; }
.cf-lang-switch-item.active .cf-lang-english { color: var(--primary); opacity: .75; }
@media (max-width: 900px) { .cf-lang-switch { display: none; } }

.cf-lang-switch-mobile {
  display: none; align-items: center; gap: 10px; background: var(--chrome-bg-3);
  border: 1px solid var(--chrome-border); border-radius: var(--button-radius);
  padding: 10px 14px; margin-bottom: 18px;
}
.cf-lang-switch-mobile iconify-icon { font-size: 18px; color: var(--chrome-text-subtle); flex-shrink: 0; }
.cf-lang-switch-mobile select {
  flex: 1; background: none; border: none; outline: none; color: var(--chrome-text);
  font-family: var(--font-body); font-size: 14px; width: 100%;
}
@media (max-width: 900px) { .cf-lang-switch-mobile { display: flex; } }

/* ==========================================================================
   Base RTL support (Arabic, Hebrew, Urdu, Persian) — set via <html dir>
   in includes/header.php. Flips text direction and the handful of custom
   flex layouts most likely to look backwards otherwise; not an exhaustive
   mirror of every component on the site.
   ========================================================================== */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .nav-menu,
[dir="rtl"] .nav-actions,
[dir="rtl"] .footer-legal-links,
[dir="rtl"] .account-menu-item,
[dir="rtl"] .cf-lang-switch-item,
[dir="rtl"] .cf-notif-item,
[dir="rtl"] .dash-course-row,
[dir="rtl"] .lesson-row { flex-direction: row-reverse; }
[dir="rtl"] .account-menu-dropdown,
[dir="rtl"] .cf-lang-switch-dropdown,
[dir="rtl"] .cf-notif-dropdown,
[dir="rtl"] .theme-switch-menu { left: 0; right: auto; }
[dir="rtl"] .side-shell { flex-direction: row-reverse; }
[dir="rtl"] .side-sidebar { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .feature-item,
[dir="rtl"] .course-topics li { flex-direction: row-reverse; text-align: right; }

/* ==========================================================================
   404 Not Found page (404.php, wired via .htaccess ErrorDocument 404).
   ========================================================================== */
.err404-bg { padding: 90px 20px 100px; min-height: calc(100vh - var(--header-height) - 260px); display: flex; align-items: center; }
.err404-wrap { max-width: 620px; margin: 0 auto; text-align: center; }
.err404-badge {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  color: var(--primary); background: var(--navy-3); padding: 6px 14px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 28px;
}
.err404-art { width: 100%; max-width: 320px; height: auto; margin: 0 auto 32px; display: block; }
.err404-title { font-family: var(--font-display); font-size: 2rem; font-weight: 800; margin: 0 0 14px; color: var(--text); }
.err404-desc { color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; margin: 0 0 32px; }
.err404-path {
  font-family: var(--font-mono); background: var(--navy-3); color: var(--primary);
  padding: 2px 8px; border-radius: 5px; font-size: .92em; word-break: break-all;
}
.err404-search {
  display: flex; align-items: center; gap: 10px; background: var(--navy-3);
  border: 1px solid var(--border-color); border-radius: 999px; padding: 6px 8px 6px 18px;
  max-width: 460px; margin: 0 auto 28px;
}
.err404-search iconify-icon { font-size: 18px; color: var(--text-subtle); flex-shrink: 0; }
.err404-search input {
  flex: 1; background: none; border: none; outline: none; color: var(--text);
  font-family: var(--font-body); font-size: 14px; min-width: 0;
}
.err404-search input::placeholder { color: var(--text-subtle); }
.err404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 32px; }
.err404-actions .card-btn { width: auto; padding: 12px 24px; }
.err404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; font-size: .88rem; }
.err404-links a { color: var(--text-muted); transition: color .15s; }
.err404-links a:hover { color: var(--primary); }
.err404-links span { color: var(--border-color); }
@media (max-width: 560px) {
  .err404-title { font-size: 1.6rem; }
  .err404-search { flex-wrap: wrap; border-radius: 16px; padding: 12px; }
  .err404-search input { width: 100%; order: 1; }
  .err404-search button { order: 2; width: 100%; }
}

/* ==========================================================================
   Simple long-form content pages — Legal (Terms, Privacy, Cookies,
   Accessibility) and editorial/directory pages (Help, Articles, Blog,
   Community, Social Responsibility, Catalog, Directory). A single prose
   container with a table-of-contents callout and consistent heading rhythm.
   ========================================================================== */
.legal-page { padding: 56px 24px 90px; }
.legal-page-inner { max-width: 820px; margin: 0 auto; }
.legal-kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--primary); font-size: .78rem; font-weight: 700; margin-bottom: 10px; }
.legal-page-inner h1 { font-size: 2.1rem; margin: 0 0 8px; color: var(--text); }
.legal-lede { color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; margin-bottom: 8px; }
.legal-updated { color: var(--text-subtle); font-size: .82rem; margin-bottom: 32px; font-family: var(--font-mono); }
.legal-toc { background: var(--navy-2); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: 20px 24px; margin-bottom: 36px; }
.legal-toc-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--text-subtle); font-weight: 700; margin-bottom: 10px; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.legal-toc li { margin-bottom: 4px; }
.legal-toc a { color: var(--primary); font-size: .88rem; text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-page-inner section { margin-bottom: 30px; }
.legal-page-inner h2 { font-size: 1.28rem; margin: 0 0 12px; color: var(--text); scroll-margin-top: 90px; }
.legal-page-inner h3 { font-size: 1.02rem; margin: 20px 0 8px; color: var(--text); }
.legal-page-inner p { color: var(--text-muted); line-height: 1.72; font-size: .95rem; margin: 0 0 14px; }
.legal-page-inner ul, .legal-page-inner ol.legal-list { margin: 0 0 14px 22px; color: var(--text-muted); font-size: .95rem; line-height: 1.7; }
.legal-page-inner li { margin-bottom: 6px; }
.legal-page-inner a { color: var(--primary); }
.legal-page-inner strong { color: var(--text); }
.legal-note { background: var(--navy-2); border-left: 3px solid var(--primary); padding: 14px 18px; border-radius: 6px; margin: 18px 0; font-size: .88rem; color: var(--text-muted); }
.legal-contact-card { background: var(--navy-2); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: 24px; margin-top: 12px; }
.legal-contact-card a { font-weight: 600; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

/* Editorial grid cards — Articles, Blog, Community, Catalog, Directory */
.editorial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 8px 0 32px; }
.editorial-card { background: var(--navy-2); border: 1px solid var(--border-color); border-radius: var(--card-radius); padding: 22px; }
.editorial-card .tag { font-family: var(--font-mono); text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; color: var(--primary); font-weight: 700; margin-bottom: 8px; display: block; }
.editorial-card h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--text); }
.editorial-card p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.editorial-card .meta { margin-top: 12px; font-size: .78rem; color: var(--text-subtle); font-family: var(--font-mono); }

/* ==========================================================================
   Shared left-sidebar shell — used by Admin, Instructor, and the customer
   Dashboard for a consistent "control panel" layout with grouped nav
   sections, icon+label rows, and an active-item highlight.
   ========================================================================== */
.side-shell { display: flex; min-height: calc(100vh - var(--header-height)); }
.side-sidebar {
  width: 248px; flex-shrink: 0; background: var(--chrome-bg); border-right: 1px solid var(--chrome-border);
  padding: 24px 14px; display: flex; flex-direction: column; gap: 22px;
}
.side-group-label {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  font-size: .7rem; font-weight: 600; color: var(--chrome-text-subtle); padding: 0 10px 8px;
}
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--button-radius);
  color: var(--chrome-text-muted); font-size: .88rem; font-weight: 500; transition: background .15s, color .15s;
}
.side-link iconify-icon { font-size: 18px; flex-shrink: 0; }
.side-link:hover { background: var(--chrome-bg-3); color: var(--chrome-text); }
.side-link.active {
  background: linear-gradient(90deg, rgba(20,102,214,.24) 0%, rgba(20,102,214,.06) 100%);
  color: var(--chrome-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary);
}
.side-link-label { flex: 1; }
.side-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e5484d; color: #fff; font-size: .68rem; font-weight: 700; font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0;
}
.side-divider { height: 1px; background: var(--chrome-border); margin: 4px 10px; }
.side-back {
  margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px;
  color: var(--chrome-text-subtle); font-size: .85rem; font-weight: 600;
}
.side-back:hover { color: var(--chrome-text); }
.side-content { flex: 1; min-width: 0; padding: 36px 32px 90px; display: flex; justify-content: center; }
.side-content-inner { max-width: 1440px; width: 100%; }
.side-page-header { margin-bottom: 28px; }
.side-page-header h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 6px; color: var(--text); }
.side-page-header p { color: var(--text-muted); margin: 0; font-size: .92rem; }
.side-page-header strong { color: var(--ember-hot); font-family: var(--font-mono); font-weight: 600; }
.side-placeholder {
  border: 1px dashed var(--border); border-radius: var(--card-radius); padding: 46px 24px;
  text-align: center; color: var(--text-muted);
}
.side-placeholder iconify-icon { font-size: 34px; color: var(--text-subtle); margin-bottom: 10px; display: block; }
.side-placeholder h3 { color: var(--text); font-family: var(--font-display); margin: 0 0 6px; }
.side-placeholder p { margin: 0; font-size: .88rem; }
.side-mobile-toggle {
  display: none; align-items: center; gap: 8px; background: var(--chrome-bg-3); color: var(--chrome-text);
  border: 1px solid var(--chrome-border); border-radius: var(--button-radius); padding: 9px 14px;
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; margin: 14px 20px 0;
}
@media (max-width: 900px) {
  .side-shell { flex-direction: column; }
  .side-mobile-toggle { display: inline-flex; }
  .side-sidebar { width: 100%; flex-direction: column; border-right: none; border-bottom: 1px solid var(--chrome-border); display: none; }
  .side-sidebar.open { display: flex; }
  .side-content { padding: 24px 18px 70px; }
}

/* ==========================================================================
   Guide "Mark as Complete" floating action (bottom-left, so it never
   collides with the chat widget which sits bottom-right)
   ========================================================================== */
.guide-complete-widget { position: fixed; bottom: 22px; left: 22px; z-index: 998; }
.guide-complete-btn {
  display: flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  padding: 12px 20px; border-radius: 100px; font-weight: 700; font-size: 14px;
  background: var(--iron-2); color: var(--text); border: 1.5px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: background .2s, border-color .2s, color .2s;
}
.guide-complete-btn:hover { border-color: var(--ember-hot); color: var(--ember-hot); }
.guide-complete-btn.done { background: rgba(16,185,129,.12); border-color: #10b981; color: #10b981; cursor: default; }
.guide-complete-btn iconify-icon { font-size: 18px; }

/* ==========================================================================
   Live chat widget (customer-facing, floating bottom-right)
   ========================================================================== */
.chat-widget { position: fixed; bottom: 22px; right: 22px; z-index: 999; }
.chat-toggle {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--ember-hot), var(--ember)); color: #1a0f06;
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(255,106,43,.35);
}
.chat-panel {
  position: absolute; bottom: 66px; right: 0; width: 320px; max-width: calc(100vw - 40px);
  background: var(--iron-2); border: 1px solid var(--border-soft); border-radius: var(--card-radius);
  display: flex; flex-direction: column; box-shadow: 0 12px 34px rgba(0,0,0,.4); overflow: hidden;
}
/* The [hidden] attribute's UA-stylesheet "display:none" has lower
   specificity than the .chat-panel rule above (an author class selector),
   so without this rule the panel never actually disappears — clicking the
   toggle or close (x) button set the attribute but the panel stayed
   visible via display:flex. */
.chat-panel[hidden] { display: none; }
.chat-panel-header {
  padding: 12px 14px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display);
}
.chat-panel-header button { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.chat-panel-messages { flex: 1; max-height: 280px; min-height: 140px; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { padding: 8px 11px; border-radius: 10px; font-size: .85rem; max-width: 85%; word-wrap: break-word; }
.chat-msg-user { align-self: flex-end; background: var(--ember-glow); color: var(--text); }
.chat-msg-admin { align-self: flex-start; background: var(--iron-4); color: var(--text); }
.chat-panel-form { display: flex; border-top: 1px solid var(--border-soft); }
.chat-panel-form input { flex: 1; border: none; background: transparent; color: var(--text); padding: 10px 12px; font-size: .85rem; }
.chat-panel-form input:focus { outline: none; }
.chat-panel-form button { border: none; background: none; color: var(--ember-hot); font-weight: 700; padding: 0 14px; cursor: pointer; }

/* Social sign-in buttons on /Login/ and /Signup/ — rendered live based on
   Admin > Social Auth toggles. Disabled until a real OAuth callback is
   wired up for a provider (needs real client credentials). */
.social-auth-row { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.social-auth-btn {
  width: 100%; padding: 11px; border-radius: var(--button-radius); border: 1px solid var(--border);
  background: var(--iron-3); color: var(--text-muted); font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  cursor: not-allowed;
}

/* ==========================================================================
   Key/credential cards — Admin > API Keys, Social Auth, Payment API Keys
   ========================================================================== */
.key-card {
  background: var(--iron-3); border: 1px solid var(--border-soft); border-radius: var(--card-radius);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.key-card-title { font-weight: 700; color: var(--text); font-size: .9rem; }
.key-card-sub { color: var(--text-subtle); font-size: .76rem; line-height: 1.3; margin-top: -4px; }
.key-card-status { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.key-card-status input[type="checkbox"] { accent-color: var(--ember); }
.key-card input[type="text"], .key-card input[type="password"], .key-card input[type="number"] {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--iron-2); color: var(--text); font-family: var(--font-mono); font-size: .82rem;
}
.key-card input:focus { outline: none; border-color: var(--ember); }

/* ==========================================================================
   Certificate cards — Dashboard > Certificates, Admin/Instructor demo
   certificate preview
   ========================================================================== */
.cert-card {
  background: linear-gradient(160deg, var(--iron-3) 0%, var(--iron-2) 100%);
  border: 1px solid var(--border-soft); border-radius: var(--card-radius);
  padding: 22px; text-align: center; position: relative; overflow: hidden;
}
.cert-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--card-radius);
  border: 1px dashed rgba(255,106,43,.35); margin: 6px; pointer-events: none;
}
.cert-card-seal { font-size: 34px; margin-bottom: 8px; }
.cert-card-title { font-weight: 700; color: var(--text); font-size: 1rem; margin-bottom: 4px; }
.cert-card-sub { color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
.cert-card-demo-badge {
  display: inline-block; background: rgba(255,106,43,.14); color: var(--ember-hot);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 12px;
}

/* ==========================================================================
   Theme switcher — Light / Dark / Ocean (see CodeFoundry_COLOR_SCHEME.md).
   Lives in the header chrome, so it always uses --chrome-* tokens.
   ========================================================================== */
.theme-switch { position: relative; }
.theme-switch-btn {
  display: flex; align-items: center; gap: 6px; background: var(--chrome-bg-3);
  color: var(--chrome-text-muted); border: 1px solid var(--chrome-border);
  border-radius: var(--button-radius); padding: 8px 12px; font-size: 13px;
  font-family: var(--font-body); font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s;
}
.theme-switch-btn:hover { color: var(--chrome-text); border-color: var(--primary); }
.theme-switch-btn iconify-icon { font-size: 16px; }
.theme-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 140px;
  background: var(--chrome-bg-3); border: 1px solid var(--chrome-border); border-radius: var(--button-radius);
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 1001;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.theme-switch-menu.open { display: flex; }
.theme-switch-option {
  display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: left;
  color: var(--chrome-text-muted); font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; width: 100%;
}
.theme-switch-option:hover { background: var(--chrome-bg); color: var(--chrome-text); }
.theme-switch-option.active { color: var(--primary); }
.theme-switch-swatch {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.25);
}
.theme-switch-mobile-row { display: flex; gap: 8px; margin-top: 6px; }
.theme-switch-mobile-btn {
  flex: 1; padding: 9px 6px; border-radius: var(--button-radius); border: 1px solid var(--chrome-border);
  background: var(--chrome-bg-3); color: var(--chrome-text-muted); font-size: 12px; font-weight: 700;
  font-family: var(--font-body); cursor: pointer;
}
.theme-switch-mobile-btn.active { border-color: var(--primary); color: var(--primary); }

/* ==========================================================================
   Account menu — dropdown in the header for a signed-in customer
   (Dashboard / My Progress / Certificates / Billing / Profile / Sign Out).
   Lives in the header chrome, so it always uses --chrome-* tokens.
   ========================================================================== */
.account-menu { position: relative; }
.account-menu-btn {
  display: flex; align-items: center; gap: 6px; background: transparent; border: none;
  cursor: pointer; padding: 4px 2px; font-family: var(--font-body);
}
.account-menu-caret { font-size: 13px; color: var(--chrome-text-subtle); transition: transform .15s; }
.account-menu-btn[aria-expanded="true"] .account-menu-caret { transform: rotate(180deg); }
.account-menu-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px;
  background: var(--chrome-bg-3); border: 1px solid var(--chrome-border); border-radius: var(--button-radius);
  padding: 6px; display: none; flex-direction: column; gap: 1px; z-index: 1001;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.account-menu-dropdown.open { display: flex; }
.account-menu-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 6px;
  color: var(--chrome-text-muted); font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.account-menu-item iconify-icon { font-size: 16px; flex-shrink: 0; }
.account-menu-item:hover { background: var(--chrome-bg); color: var(--chrome-text); }
.account-menu-item.active { color: var(--primary); font-weight: 600; }
.account-menu-item.danger { color: #f0a08d; }
.account-menu-item.danger:hover { background: rgba(226,96,74,.12); color: #f0a08d; }
.account-menu-divider { height: 1px; background: var(--chrome-border); margin: 5px 4px; }

/* ==========================================================================
   Header search box — links to /Training/search.php (unified content
   search across courses, topic categories, quizzes, tutorials, guides).
   ========================================================================== */
.cf-nav-search {
  display: flex; align-items: center; gap: 8px; background: var(--chrome-bg);
  border: 1px solid var(--chrome-border); border-radius: 999px; padding: 9px 18px;
  color: var(--chrome-text-subtle); font-size: 14px; margin-left: 6px;
}
.cf-nav-search iconify-icon { font-size: 16px; flex-shrink: 0; }
.cf-nav-search input {
  background: none; border: none; outline: none; color: var(--chrome-text);
  font-family: var(--font-body); font-size: 14px; width: 280px;
}
.cf-nav-search input::placeholder { color: var(--chrome-text-subtle); }
@media (max-width: 1100px) { .cf-nav-search input { width: 180px; } }
@media (max-width: 900px) { .cf-nav-search { display: none; } }

/* ==========================================================================
   Notification bell — dropdown in the header, shared across the customer
   site, Instructor panel, and Admin panel (all render includes/header.php).
   Polls /Notifications/poll.php; see lib/NotificationStore.php.
   ========================================================================== */
.cf-notif-bell { position: relative; }
.cf-notif-bell-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; padding: 4px; font-size: 19px;
  color: var(--chrome-text-muted);
}
.cf-notif-bell-btn:hover { color: var(--chrome-text); }
.cf-notif-count {
  position: absolute; top: -3px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--danger, #e2604a); color: #fff; font-size: 10px;
  font-weight: 700; line-height: 16px; text-align: center; font-family: var(--font-body);
}
.cf-notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 88vw;
  background: var(--chrome-bg-3); border: 1px solid var(--chrome-border); border-radius: var(--button-radius);
  display: none; flex-direction: column; z-index: 1001; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cf-notif-dropdown.open { display: flex; }
.cf-notif-dropdown-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-bottom: 1px solid var(--chrome-border); font-size: 13px; font-weight: 700; color: var(--chrome-text);
}
.cf-notif-dropdown-head button {
  background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer;
}
.cf-notif-list { max-height: 340px; overflow-y: auto; }
.cf-notif-empty { padding: 20px 14px; color: var(--chrome-text-subtle); font-size: 13px; text-align: center; }
.cf-notif-item {
  display: block; padding: 10px 14px; border-bottom: 1px solid var(--chrome-border);
  color: var(--chrome-text-muted); font-size: 13px; text-decoration: none; cursor: pointer;
}
.cf-notif-item:last-child { border-bottom: none; }
.cf-notif-item:hover { background: var(--chrome-bg); }
.cf-notif-item.unread { background: rgba(226,96,74,.06); }
.cf-notif-item.unread .cf-notif-item-text { font-weight: 600; color: var(--chrome-text); }
.cf-notif-item-when { font-size: 11px; color: var(--chrome-text-subtle); margin-top: 3px; }

/* ==========================================================================
   Branded splash screen — shown briefly on first page load (see
   includes/header.php), fades out on its own within ~3.5s via animation,
   and is fully removed from layout/paint at the end (visibility:hidden)
   so it never blocks clicks once gone.
   ========================================================================== */
.cf-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--chrome-bg);
  animation: cf-splash-fade 3.5s ease forwards;
}
.cf-splash-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-splash-mark svg { width: 32px; height: 32px; }
.cf-splash-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--chrome-text);
  letter-spacing: -0.01em;
}
.cf-splash-tagline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--chrome-text-subtle);
  letter-spacing: 0.02em;
}
@keyframes cf-splash-fade {
  0%, 65%  { opacity: 1; visibility: visible; }
  95%      { opacity: 0; }
  100%     { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-splash { animation: none; opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   Content Studio (Admin + Instructor) — create courses/quizzes/tutorials/
   guides/certifications forms and management tables.
   ========================================================================== */
.cs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 22px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cs-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: var(--button-radius); font-size: .88rem; font-weight: 600;
  color: var(--text-muted); background: var(--iron-2); transition: background .15s, color .15s;
}
.cs-tab:hover { color: var(--text); }
.cs-tab.active { background: var(--ember); color: #1a0f06; }
.cs-form { display: flex; flex-direction: column; gap: 14px; }
.cs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .cs-grid-2, .cs-grid-3 { grid-template-columns: 1fr; } }
.cs-input, .cs-textarea {
  width: 100%; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--iron-2); color: var(--text); font-family: var(--font-body); font-size: .92rem;
}
.cs-textarea { resize: vertical; line-height: 1.5; }
.cs-textarea.mono, .cs-input.mono { font-family: var(--font-mono); font-size: .85rem; }
.cs-tier-details {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--iron-2);
}
.cs-tier-details + .cs-tier-details { margin-top: 10px; }
.cs-tier-details summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.cs-tier-details .form-group { margin-top: 10px; }
.cs-file-input {
  background: var(--iron-2); border: 1px dashed var(--border); border-radius: 6px;
  padding: 10px; color: var(--text-muted); font-size: .85rem; width: 100%; box-sizing: border-box;
}
.cs-file-hint { color: var(--text-subtle); font-size: .78rem; margin: 6px 0 0; }
.cs-attachment-list { display: flex; flex-direction: column; gap: 6px; }
.cs-attachment-chip {
  display: flex; align-items: center; gap: 8px; font-size: .8rem; background: var(--iron-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; max-width: 260px;
}
.cs-attachment-chip a {
  color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.cs-attachment-chip a:hover { color: var(--ember-hot); }
.cs-attachment-size { color: var(--text-subtle); font-size: .72rem; flex-shrink: 0; }
.cs-attachment-remove {
  background: transparent; border: none; color: var(--text-subtle); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px; flex-shrink: 0;
}
.cs-attachment-remove:hover { color: var(--ember-hot); }

/* Course Metrics (Admin/Instructor) */
.cm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.cm-stat { background: var(--iron-2); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 16px; text-align: center; }
.cm-stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--text); }
.cm-stat-label { font-size: .78rem; color: var(--text-subtle); margin-top: 4px; }

/* Print-friendly curriculum view (Training/curriculum-view.php) */
.curriculum-print-page { max-width: 820px; margin: 0 auto; padding: 40px 24px; }
.curriculum-print-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
@media print {
  header, footer, .curriculum-print-actions, .mobile-nav-overlay { display: none !important; }
  .curriculum-print-page { max-width: 100%; padding: 0; }
}