@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
:root{
  --bg:#13082a;
  --bg2:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --text:#f0eaff;
  --text2:#a89cc8;
  --text3:#6666aa;
  --purple:#7c3aed;
  --accent:#a78bfa;
  --gold:#e8c020;
  --green:#22c55e;
  --blue:#3b82f6;
}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 28px;background:rgba(0,0,0,0.3);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;gap:10px;}
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo-img{width:42px;height:42px;object-fit:contain;border-radius:8px;}
.logo-text .logo-name{font-family:"Poppins",sans-serif;font-size:14px;font-weight:700;color:var(--text);line-height:1.2;}
.logo-text .logo-by{font-size:10px;color:var(--accent);letter-spacing:0.05em;}
.topbar-nav{display:flex;gap:4px;}
.tnav{font-size:12px;padding:7px 14px;border-radius:8px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-family:"Inter",sans-serif;transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;}
.tnav:hover{background:rgba(255,255,255,0.06);color:var(--text);}
.tnav.active{background:rgba(124,58,237,0.25);color:var(--accent);font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.2s;}
.icon-btn:hover{background:var(--bg2);color:var(--text);}
.avatar{width:34px;height:34px;border-radius:50%;background:rgba(124,58,237,0.35);border:2px solid rgba(167,139,250,0.4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;font-family:"Poppins",sans-serif;}
.mobile-menu-btn{display:none;}

/* CHIP */
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,0.2);border:1px solid rgba(167,139,250,0.3);border-radius:999px;padding:5px 16px;font-size:11px;color:#c4b5fd;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px;}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.4;}}

/* SECTION LABEL */
.sec-label,.section-label{font-size:11px;font-weight:600;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px;font-family:"Poppins",sans-serif;}

/* BUTTONS */
.primary-btn{padding:13px 28px;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;font-family:"Poppins",sans-serif;cursor:pointer;letter-spacing:0.02em;transition:opacity 0.2s,transform 0.15s;display:inline-block;text-decoration:none;text-align:center;}
.primary-btn:hover{opacity:0.9;transform:translateY(-1px);}
.primary-btn.full{width:100%;}
.gold-btn{padding:13px 32px;background:var(--gold);color:#13082a;border:none;border-radius:999px;font-size:14px;font-weight:700;font-family:"Poppins",sans-serif;cursor:pointer;transition:opacity 0.2s,transform 0.15s;display:inline-block;text-decoration:none;}
.gold-btn:hover{opacity:0.9;transform:translateY(-1px);}
.gold-btn.full{width:100%;text-align:center;}

/* MOBILE NAV (hidden desktop) */
.mob-bottom-nav{display:none;}
.mob-overlay{display:none;}


/* Scale up all tiny inline font sizes */
* { box-sizing: border-box; }

/* Main content max-width constraint */
.mod-body-wrap,
.panel-content,
.lesson-content,
.module-content,
.dash-content,
.welcome-body,
.lib-content,
.comm-content,
.pricing-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Fix tiny text globally */
.ts { font-size: 13px !important; }
.mod-sub, .cert-status, .sk-sub, .nc-meta,
.stat-sub, .sc-sub { font-size: 12px !important; }

/* Module page content areas */
.lesson-section p,
.lesson-section li,
.mod-intro p,
.case-study p,
.activity-card p,
.reflection-box p,
.conclusion-box p {
  font-size: 15px !important;
  line-height: 1.8;
}

.lesson-section h3,
.case-study h3,
.activity-card h3 {
  font-size: 17px !important;
}

.lesson-section h2,
.mod-section-title {
  font-size: 19px !important;
}

/* Flashcard and quiz text */
.fc-front, .fc-back, .qc-question {
  font-size: 15px !important;
  line-height: 1.6;
}

.qc-opt {
  font-size: 14px !important;
}

/* Nav and sidebar */
.slink, .tnav, .lvl-btn {
  font-size: 14px !important;
}

/* Module title */
.mod-title-main, .module-title {
  font-size: 22px !important;
}

/* Stats and labels */
.sc-val, .stat-val, .sk-num {
  font-size: 24px !important;
}

/* Section headers */
.sec-hdr h2, .section-hdr h2 {
  font-size: 16px !important;
}

/* Badge and pill text */
.mod-tag, .lc-status, .slink-badge,
.lv-badge, .sc-sub, .chip {
  font-size: 11px !important;
}

/* Audio/video labels */
.audio-label, .video-label, .img-section-label {
  font-size: 12px !important;
}

/* Responsive: on narrow screens reduce max-width */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .dash-body { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
  .two-col, .level-cards-grid, .stats-grid,
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  .two-col, .level-cards-grid,   .stats-grid { grid-template-columns: 1fr 1fr !important; }
}


@media (max-width: 768px) {
  .mod-nav { display: none !important; }
  .mod-content,
  .video-section,
  .audio-section,
  .mod-images,
  .lesson-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mod-images > div:last-child {
    grid-template-columns: 1fr !important;
  }
}


/* ════════════════════════════════════════════════════════════
   GLA PREMIUM — Teenage-worthy, Apple-level polish
   Dual sidebar system + animations + effects
   ════════════════════════════════════════════════════════════ */

/* ── IMPORTS ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ── ROOT TOKENS ── */
:root {
  --bg:       #0e0821;
  --bg2:      #140a2e;
  --bg3:      #1a0d38;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(167,139,250,0.2);
  --gold:     #e8c020;
  --gold2:    #f5d060;
  --purple:   #7c3aed;
  --accent:   #a78bfa;
  --text:     #f0eaff;
  --text2:    #b8aad8;
  --text3:    #6b6090;
  --green:    #22c55e;
  --blue:     #3b82f6;
  --red:      #ef4444;
  --nav-w:    240px;
  --rhs-w:    280px;
  --top-h:    57px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── GLOBAL RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ════════════════════════════════════════════════════════════
   MODULE PAGE LAYOUT — 3 column
   ════════════════════════════════════════════════════════════ */

.mod-body {
  display: grid !important;
  grid-template-columns: var(--nav-w) 1fr var(--rhs-w) !important;
  grid-template-rows: 1fr;
  min-height: calc(100vh - var(--top-h));
  align-items: start;
  position: relative;
}

/* LEFT SIDEBAR */
.mod-nav {
  grid-column: 1 !important;
  grid-row: 1 / span 9999 !important;
  position: sticky !important;
  top: var(--top-h);
  height: calc(100vh - var(--top-h));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  z-index: 10;
  scrollbar-width: thin;
}

/* CENTER content — all orphaned sections go here */
.mod-body > div:not(.mod-nav):not(.mod-panel):not(.gla-rhs),
.mod-content {
  grid-column: 2 !important;
  min-width: 0;
  padding: 24px 28px;
  overflow-x: hidden;
}
.mod-content { padding: 24px 28px !important; }

.video-section, .audio-section, .mod-images,
.lesson-section, .case-study, .case-study-card,
.activities-grid, .activity-card, .reflection-block,
.conclusion-box, .progress-section, .rt-wrap,
.read-tracker, #mark-complete-section,
div[id*="section"], div[class*="ls-"],
div[class*="cb-"] {
  grid-column: 2 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  max-width: 100% !important;
}
.mod-content > div:has(> #pdf-download-btn) {
  grid-column: 2 !important;
  padding: 0 28px !important;
}

/* RIGHT SIDEBAR */
.mod-panel { display: none !important; } /* old panel hidden */

.gla-rhs {
  grid-column: 3 !important;
  grid-row: 1 / span 9999 !important;
  position: sticky !important;
  top: var(--top-h);
  height: calc(100vh - var(--top-h));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  padding: 18px 12px;
  z-index: 10;
  scrollbar-width: thin;
}

/* ════════════════════════════════════════════════════════════
   LEFT SIDEBAR COMPONENTS
   ════════════════════════════════════════════════════════════ */

.nav-back {
  display: flex; align-items: center; gap: 8px;
  color: var(--text3); font-size: 12px; font-weight: 600;
  text-decoration: none; padding: 6px 8px; border-radius: 8px;
  transition: var(--transition); margin-bottom: 16px; letter-spacing: 0.03em;
}
.nav-back:hover { color: var(--text); background: var(--surface2); }

.nav-module-title {
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 800;
  color: var(--text); line-height: 1.2; margin-bottom: 3px;
}
.nav-module-sub {
  font-size: 11px; color: var(--accent); letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 14px;
}

/* Progress ring */
.nav-ring-wrap {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 12px; background: var(--surface); border-radius: 12px;
  border: 1px solid var(--border);
}
.nav-ring { width: 48px; height: 48px; flex-shrink: 0; }
.nav-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.nav-ring-fill {
  fill: none; stroke: var(--gold); stroke-width: 4;
  stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 110;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1);
}
.nav-ring-pct { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 800; fill: var(--gold); }
.nav-ring-info { flex: 1; }
.nav-ring-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.nav-ring-sub { font-size: 11px; color: var(--text3); }

/* Streak display */
.nav-streak {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(232,192,32,0.08); border: 1px solid rgba(232,192,32,0.2);
  border-radius: 10px; margin-bottom: 14px;
}
.nav-streak-fire { font-size: 18px; }
.nav-streak-num { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 800; color: var(--gold); }
.nav-streak-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; }

/* Section labels */
.nav-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text3); padding: 0 4px;
  margin: 14px 0 8px;
}

/* Nav topics */
.nav-topic {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--text2);
  text-align: left; transition: var(--transition); margin-bottom: 2px;
  position: relative; overflow: hidden;
}
.nav-topic:hover { background: var(--surface2); color: var(--text); }
.nav-topic.active {
  background: rgba(124,58,237,0.2); color: var(--accent);
  border: 1px solid rgba(124,58,237,0.25);
}
.nav-topic.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--purple); border-radius: 0 2px 2px 0;
}
.nav-topic.done { color: var(--green); }
.nav-topic.done .nt-dot { background: var(--green) !important; color: #fff !important; }

.nt-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface2); border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.nav-topic.active .nt-dot {
  background: var(--purple); border-color: var(--purple); color: #fff;
}

/* Tool buttons */
.nav-divider { height: 1px; background: var(--border); margin: 12px 0; }
.tool-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 500; color: var(--text2);
  transition: var(--transition); margin-bottom: 5px;
}
.tool-btn:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }
.tool-btn i { font-size: 14px; color: var(--accent); }

/* Daily target box */
.nav-target {
  margin-top: 14px; padding: 12px;
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
  border-radius: 12px;
}
.nav-target-label { font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.nav-target-text { font-size: 12px; color: var(--text2); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   RIGHT SIDEBAR COMPONENTS
   ════════════════════════════════════════════════════════════ */

.rhs-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
  transition: border-color var(--transition);
}
.rhs-section:hover { border-color: var(--border2); }

.rhs-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 12px;
  display: flex; align-items: center; gap: 7px;
}

/* Quote card */
.rhs-quote {
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(232,192,32,0.08));
  border: 1px solid rgba(124,58,237,0.25); border-radius: 14px;
  padding: 16px; margin-bottom: 12px;
}
.rhs-quote-mark { font-size: 32px; color: var(--gold); opacity: 0.5; line-height: 1; margin-bottom: 4px; }
.rhs-quote-text {
  font-size: 13px; font-style: italic; color: var(--text2);
  line-height: 1.65; margin-bottom: 10px; min-height: 60px;
}
.rhs-quote-author { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; }
.rhs-quote-refresh {
  float: right; background: none; border: none; color: var(--text3);
  cursor: pointer; font-size: 14px; padding: 2px; transition: var(--transition);
}
.rhs-quote-refresh:hover { color: var(--accent); transform: rotate(180deg); }

/* Countdown */
.rhs-countdown {
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
  border-radius: 14px; padding: 14px; margin-bottom: 12px; text-align: center;
}
.rhs-countdown-title { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.rhs-countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rhs-cd-unit { background: rgba(59,130,246,0.12); border-radius: 8px; padding: 8px 4px; }
.rhs-cd-num { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; color: var(--blue); line-height: 1; }
.rhs-cd-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }

/* Mini community feed */
.rhs-feed { margin-bottom: 12px; }
.rhs-post {
  padding: 10px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); margin-bottom: 7px;
  transition: var(--transition);
}
.rhs-post:hover { border-color: var(--border2); }
.rhs-post-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rhs-post-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--purple); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}
.rhs-post-name { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
.rhs-post-time { font-size: 10px; color: var(--text3); }
.rhs-post-text { font-size: 12px; color: var(--text2); line-height: 1.5; }
.rhs-post-like {
  margin-top: 5px; background: none; border: none;
  color: var(--text3); font-size: 11px; cursor: pointer;
  font-family: inherit; transition: var(--transition);
}
.rhs-post-like:hover { color: #ef4444; }

/* Progress mini */
.rhs-progress-bar {
  height: 5px; background: rgba(255,255,255,0.06);
  border-radius: 99px; margin-top: 6px; overflow: hidden;
}
.rhs-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* Achievement unlock animation */
.rhs-achievement {
  background: rgba(232,192,32,0.1); border: 1px solid rgba(232,192,32,0.3);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 7px;
  display: flex; align-items: center; gap: 10px;
}
.rhs-achievement-icon { font-size: 22px; }
.rhs-achievement-name { font-size: 12px; font-weight: 700; color: var(--gold); }
.rhs-achievement-desc { font-size: 11px; color: var(--text3); }

/* ════════════════════════════════════════════════════════════
   PREMIUM ANIMATIONS & EFFECTS
   ════════════════════════════════════════════════════════════ */

/* Animated gradient border on hover */
@keyframes borderSpin {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating particles background (applied via JS) */
.gla-particles {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.particle {
  position: absolute; border-radius: 50%;
  background: rgba(124,58,237,0.15);
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

/* Content fade-in on scroll */
.gla-fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gla-fade-in.visible { opacity: 1; transform: translateY(0); }

/* Shimmer effect on loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, rgba(167,139,250,0.1) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

/* Glow pulse on progress ring */
@keyframes ringPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(232,192,32,0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(232,192,32,0.7)); }
}
.nav-ring-fill { animation: ringPulse 2.5s ease-in-out infinite; }

/* Quote text typewriter */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0; }
}
.cursor { animation: cursor-blink 0.8s step-end infinite; }

/* Streak fire bounce */
@keyframes fireBounce {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.15) rotate(3deg); }
}
.nav-streak-fire { animation: fireBounce 1.5s ease-in-out infinite; display: inline-block; }

/* Module card hover lift */
.lc, .lv-card, .mod-row, .stat-card, .rhs-section {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.lc:hover, .lv-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(124,58,237,0.2); }
.mod-row:hover { transform: translateX(3px); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glowing CTA buttons */
.gla-btn-glow {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--purple), #5b21b6) !important;
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
  transition: all var(--transition) !important;
}
.gla-btn-glow:hover {
  box-shadow: 0 6px 28px rgba(124,58,237,0.6);
  transform: translateY(-2px);
}
.gla-btn-glow::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0; transition: opacity var(--transition);
}
.gla-btn-glow:hover::after { opacity: 1; }

/* Video section glass */
.video-section > div:last-child,
div[style*="aspect-ratio:16/9"]:has(iframe) {
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Image gallery effect */
.mod-images img {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: zoom-in !important;
}
.mod-images img:hover {
  transform: scale(1.03) translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
  z-index: 10; position: relative;
}

/* Mark complete button */
#mark-complete-btn {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  box-shadow: 0 4px 20px rgba(34,197,94,0.35) !important;
  transition: all 0.25s ease !important;
}
#mark-complete-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(34,197,94,0.5) !important;
}

/* Flashcard flip */
.flashcard-item {
  perspective: 1000px;
  transition: transform 0.4s ease;
}
.flashcard-item:hover { transform: scale(1.01); }

/* Quiz option hover */
.qc-opt {
  transition: all 0.2s ease !important;
  cursor: pointer;
}
.qc-opt:hover {
  background: rgba(124,58,237,0.15) !important;
  border-color: rgba(124,58,237,0.4) !important;
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════════════════
   MODULE CONTENT TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */

h1.mod-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 26px !important; font-weight: 800 !important;
  color: #fff !important; line-height: 1.2 !important;
  margin-bottom: 12px !important;
}
.mod-intro {
  font-size: 15px !important; line-height: 1.75 !important; color: var(--text2) !important;
}
.ls-title, .lesson-section h2 {
  font-family: 'Syne', sans-serif !important;
  font-size: 19px !important; font-weight: 700 !important; color: #fff !important;
}
.ls-body p, .lesson-section p, p {
  font-size: 15px !important; line-height: 1.8 !important; color: var(--text2) !important;
}
.cs-label, .case-study .cs-label { font-size: 11px !important; }
.cs-title { font-size: 16px !important; font-weight: 700 !important; }

/* ════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════ */
/* consolidated into unified .topbar rule below */

/* ════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .gla-rhs { display: none !important; }
  :root { --rhs-w: 0px; }
  .mod-body { grid-template-columns: var(--nav-w) 1fr !important; }
}
@media (max-width: 768px) {
  .mod-nav { display: none !important; }
  :root { --nav-w: 0px; }
  .mod-body { grid-template-columns: 1fr !important; display: block !important; }
  .mod-content, .video-section, .audio-section, .mod-images, .lesson-section {
    padding-left: 16px !important; padding-right: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   BACKGROUND AMBIENT GLOW
   ════════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 20%, rgba(124,58,237,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 80% 80%, rgba(232,192,32,0.04) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.gla-loader, .topbar, .mod-nav, .mod-content, .gla-rhs,
.lesson-section, .video-section, .audio-section, .mod-images,
.dash-body, .welcome-body, main, section, article,
div[class*="content"], div[class*="body"] { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   NUCLEAR FONT + SCROLL FIX — overrides everything
   ══════════════════════════════════════════════════════════ */

/* SCROLL FIX — prevent ANY element from trapping scroll */
html, body {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* mod-body must NOT clip scroll */
.mod-body {
  height: auto !important;
  min-height: calc(100vh - 57px) !important;
  overflow: visible !important;
}

/* Center column must flow naturally */
.mod-content,
.mod-body > div:not(.mod-nav):not(.gla-rhs):not(.mod-panel) {
  overflow: visible !important;
  height: auto !important;
  overflow-y: visible !important;
}

/* FONT SIZES — absolute minimum 14px everywhere */
* { min-font-size: 14px; }

.mod-nav *, .nav-topic, .nav-section-label,
.nav-back, .tool-btn, .nav-target-text { font-size: 13px !important; }

.nav-module-title { font-size: 14px !important; }

/* Main content always 15px+ */
.mod-content p, .mod-content li,
.lesson-section p, .lesson-section li,
.ls-body p, .cs-body p, .ac-body p,
.cb-body p, .mod-intro,
.case-study p, .activity-card p,
.conclusion-box p, .reflection-block p,
.rhs-post-text, .rhs-quote-text {
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Labels and badges: minimum 12px */
.mbadge, .mod-tag, .lc-status, .slink-badge,
.rhs-label, .rhs-cd-label, .nav-streak-label,
.rhs-achievement-desc, .audio-label, .video-label,
.img-section-label, .rhs-post-time {
  font-size: 12px !important;
}

/* Headings */
h1, .mod-title { font-size: 26px !important; font-weight: 800 !important; }
h2, .ls-title, .lesson-section h2 { font-size: 20px !important; font-weight: 700 !important; }
h3, .cs-title, .lesson-section h3 { font-size: 17px !important; font-weight: 600 !important; }

/* Dashboard */
.mod-row .mod-title-txt,
.mod-row .mod-title { font-size: 15px !important; }
.mod-row .mod-sub { font-size: 13px !important; }
.sc-label, .cert-name { font-size: 14px !important; }
.sc-val, .sk-num { font-size: 24px !important; }

/* Nav and topbar */
.tnav, .slink { font-size: 14px !important; }
.logo-name { font-size: 14px !important; }

/* RHS sidebar */
.rhs-quote-text { font-size: 13px !important; }
.rhs-quote-author, .rhs-achievement-name { font-size: 12px !important; }
.rhs-cd-num { font-size: 20px !important; }
.rhs-post-name { font-size: 13px !important; }

/* Flashcards and quiz */
.fc-front, .fc-back, .qc-question { font-size: 15px !important; }
.qc-opt { font-size: 14px !important; }

/* PDF button */
#pdf-download-btn { font-size: 15px !important; }
#pdf-download-btn div { font-size: 13px !important; }

/* Mark complete */
#mark-complete-btn { font-size: 15px !important; }

/* ══ UNLOCK ALL — remove locked visual state ══ */
.mod-row.locked,
.lc.locked,
a.mod-row[class*="locked"] {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: all !important;
}
.mod-row.locked .mod-tag { background: rgba(124,58,237,0.2) !important; color: var(--accent, #a78bfa) !important; }
.mod-row.locked .mod-icon { color: var(--accent, #a78bfa) !important; }
.lc[class*="lock"] .lc-status { color: #60a5fa !important; }

/* All level cards clickable */
.lc, .lv-card { cursor: pointer !important; pointer-events: all !important; }

/* ══ MOBILE RESPONSIVE FIXES ══ */
@media (max-width: 1280px) {
  :root { --rhs-w: 240px; }
}
@media (max-width: 1024px) {
  .gla-rhs { display: none !important; }
  :root { --rhs-w: 0px; }
  .mod-body { grid-template-columns: var(--nav-w, 220px) 1fr !important; }
}
@media (max-width: 768px) {
  .mod-nav { display: none !important; }
  .mod-body {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .mod-body > * {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1, .mod-title { font-size: 22px !important; }
  h2, .ls-title { font-size: 18px !important; }
  p, .ls-body p { font-size: 15px !important; }
  .video-section, .audio-section, .mod-images {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mod-images > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}
@media (max-width: 480px) {
  h1, .mod-title { font-size: 20px !important; }
  p { font-size: 14px !important; }
  .topbar-nav { display: none !important; }
}


/* ══ FINAL OVERRIDES — HIGHEST PRIORITY ══════════════════ */

/* SCROLL FIX — nothing should block page scroll */
html, body { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; }

/* MODULE LAYOUT — clean 3-col grid, page scrolls normally */
.mod-body {
  display: grid !important;
  grid-template-columns: 240px 1fr 280px !important;
  min-height: calc(100vh - 57px) !important;
  align-items: start !important;
  overflow: visible !important;
  height: auto !important;
}

/* SIDEBARS stick to viewport while page scrolls */
.mod-nav, .gla-rhs {
  position: sticky !important;
  top: 57px !important;
  height: calc(100vh - 57px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.mod-nav { grid-column: 1 !important; grid-row: 1 / span 9999 !important; }
.gla-rhs { grid-column: 3 !important; grid-row: 1 / span 9999 !important; }

/* ALL ORPHANED SECTIONS → center column */
.mod-body > *:not(.mod-nav):not(.gla-rhs):not(.mod-panel) {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.mod-content {
  grid-column: 2 !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  padding: 24px 28px !important;
}

/* FONT SIZES — explicit and large */
body, p, li, td, th, div, span { font-size: 16px; line-height: 1.75; }
.mod-title, h1.mod-title { font-size: 26px !important; font-weight: 800 !important; }
.ls-title, .lesson-section h2, h2 { font-size: 20px !important; font-weight: 700 !important; }
h3 { font-size: 17px !important; }
.ls-body p, .cs-body p, .cb-body p, .lesson-section p,
.activity-card p, .reflection-block p { font-size: 16px !important; line-height: 1.8 !important; }
.fc-front, .fc-back, .qc-question { font-size: 16px !important; }
.qc-opt { font-size: 15px !important; }
.mod-intro { font-size: 15px !important; }
.mbadge { font-size: 12px !important; }
.nav-section-label, .nav-topic, .tool-btn { font-size: 14px !important; }

/* MOBILE */
@media (max-width: 1100px) {
  .mod-body { grid-template-columns: 240px 1fr !important; }
  .gla-rhs { display: none !important; }
}
@media (max-width: 768px) {
  .mod-body {
    display: block !important;
    padding-bottom: 80px;
  }
  .mod-nav { display: none !important; }
  .mod-content,
  .mod-body > *:not(.mod-nav):not(.gla-rhs):not(.mod-panel) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* TABLET */
@media (max-width: 1024px) and (min-width: 769px) {
  .mod-body { grid-template-columns: 200px 1fr !important; }
}


/* ══ DESKTOP BREATHING ROOM ══════════════════════════════
   Left and right space on wide screens, like Apple / Samsung
   ══════════════════════════════════════════════════════ */

/* Topbar inner — constrained width with padding */
.topbar-inner, .nav-inner, .top-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Dashboard, Welcome, Library, Community, Pricing — 
   content centered with side breathing room */
.dash-body,
.dash-content,
.welcome-body,
.lib-body,
.comm-body,
.pricing-body,
.page-body {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* Topbar logo and nav centering */
.topbar > *:first-child {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Module pages — the 3-column grid gets side padding */
.mod-body {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* Wide screen — add generous side margins */
@media (min-width: 1440px) {
  .dash-body, .dash-content, .welcome-body,
  .lib-body, .comm-body, .pricing-body {
    max-width: 1300px;
    padding-left: 60px;
    padding-right: 60px;
  }
  .mod-body {
    max-width: 1440px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Standard desktop */
@media (min-width: 1024px) and (max-width: 1439px) {
  .dash-body, .dash-content, .welcome-body,
  .lib-body, .comm-body, .pricing-body {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Tablet */
@media (max-width: 1023px) and (min-width: 769px) {
  .dash-body, .welcome-body, .lib-body,
  .comm-body, .pricing-body {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .dash-body, .welcome-body, .lib-body,
  .comm-body, .pricing-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ════════════════════════════════════════════════════════════
   GLA PREMIUM UPLIFT — v6
   Solid nav, heroes, hand-drawn art, footer, card uplift
   ════════════════════════════════════════════════════════════ */

/* ── SOLID TOPBAR (not transparent) ──────────────────────── */
/* consolidated into unified .topbar rule below */
.logo-img { width: 44px !important; height: 44px !important; border-radius: 10px !important; }
.logo-name { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.tnav {
  font-size: 14px !important; padding: 8px 16px !important;
  border-radius: 10px !important; font-weight: 500 !important;
}
.tnav.active {
  background: rgba(124,58,237,0.2) !important;
  color: #c4b5fd !important; font-weight: 700 !important;
  border: 1px solid rgba(124,58,237,0.3) !important;
}
.enrol-btn, .tnav.enrol {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important; font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(124,58,237,0.4) !important;
  border: none !important;
}
.enrol-btn:hover { box-shadow: 0 6px 24px rgba(124,58,237,0.6) !important; transform: translateY(-1px); }

/* ── FOOTER ────────────────────────────────────────────────── */
.gla-footer {
  background: #080418;
  border-top: 1px solid rgba(167,139,250,0.12);
  padding: 60px 0 0;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.gla-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,192,32,0.4), rgba(124,58,237,0.4), transparent);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 40px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand { }
.footer-logo-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; }
.footer-brand-name { font-size: 18px; font-weight: 800; color: #f0eaff; font-family: 'Syne', system-ui, sans-serif; }
.footer-motto {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #e8c020; font-weight: 600;
}
.footer-desc { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.7; margin-top: 12px; }
.footer-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.footer-col a {
  display: block; font-size: 14px; color: rgba(255,255,255,0.55);
  text-decoration: none; margin-bottom: 10px;
  transition: color 0.2s; font-weight: 500;
}
.footer-col a:hover { color: #a78bfa; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 40px;
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer-tagline { font-size: 13px; color: rgba(232,192,32,0.5); font-style: italic; }

/* ── HERO SECTIONS ─────────────────────────────────────────── */
.page-hero {
  position: relative; overflow: hidden;
  padding: 56px 48px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(232,192,32,0.03));
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 600px 300px at 30% 50%, rgba(124,58,237,0.06), transparent);
  pointer-events: none;
}
.hero-text { flex: 1; position: relative; z-index: 1; }
.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #e8c020; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.hero-eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: #e8c020; border-radius: 2px; display: inline-block;
}
.hero-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 36px; font-weight: 900; line-height: 1.1;
  color: #fff; margin-bottom: 14px;
}
.hero-title span { color: #a78bfa; }
.hero-sub { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.6; max-width: 480px; }
.hero-art { flex-shrink: 0; opacity: 0.9; position: relative; z-index: 1; }

/* Module page hero */
.mod-hero {
  padding: 28px 32px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(135deg, rgba(124,58,237,0.08), transparent);
  display: flex; align-items: center; gap: 20px;
  position: relative; overflow: hidden;
}
.mod-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 400px 200px at 90% 50%, rgba(232,192,32,0.05), transparent);
}
.mod-hero-art { flex-shrink: 0; opacity: 0.85; }
.mod-hero-level {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: #e8c020; margin-bottom: 6px;
}
.mod-hero-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 6px;
}
.mod-hero-sub { font-size: 13px; color: rgba(255,255,255,0.45); }

/* ── LEVEL CARDS UPLIFT ─────────────────────────────────── */
.levels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.level-card-premium {
  border-radius: 20px; padding: 24px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 160px;
}
.level-card-premium:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.level-card-premium.foundation {
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.2);
}
.level-card-premium.transition {
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04));
  border: 1px solid rgba(59,130,246,0.2);
}
.level-card-premium.onboard {
  background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(124,58,237,0.04));
  border: 1px solid rgba(167,139,250,0.2);
}
.level-card-premium.summit {
  background: linear-gradient(135deg, rgba(232,192,32,0.12), rgba(232,192,32,0.04));
  border: 1px solid rgba(232,192,32,0.2);
}
.lcp-art { position: absolute; right: 16px; top: 16px; opacity: 0.3; }
.lcp-status {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  display: inline-block; margin-bottom: 12px;
}
.foundation .lcp-status { background: rgba(34,197,94,0.15); color: #4ade80; }
.transition .lcp-status { background: rgba(59,130,246,0.15); color: #60a5fa; }
.onboard .lcp-status { background: rgba(167,139,250,0.15); color: #c4b5fd; }
.summit .lcp-status { background: rgba(232,192,32,0.15); color: #fde047; }
.lcp-name {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px;
}
.lcp-sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 16px; }
.lcp-prog { display: flex; align-items: center; justify-content: space-between; }
.lcp-bar {
  flex: 1; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden; margin-right: 12px;
}
.lcp-bar-fill { height: 100%; border-radius: 999px; transition: width 1.2s ease; }
.foundation .lcp-bar-fill { background: linear-gradient(90deg, #16a34a, #4ade80); }
.transition .lcp-bar-fill { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.onboard .lcp-bar-fill { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }
.summit .lcp-bar-fill { background: linear-gradient(90deg, #b45309, #fde047); }
.lcp-pct { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); }

/* ── MODULE ROWS UPLIFT ──────────────────────────────────── */
.modules-list { display: flex; flex-direction: column; gap: 8px; }
.mod-row-premium {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  text-decoration: none; color: inherit;
  transition: all 0.25s ease;
  position: relative; overflow: hidden;
}
.mod-row-premium::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0 2px 2px 0;
  background: #7c3aed; opacity: 0;
  transition: opacity 0.25s;
}
.mod-row-premium:hover::before { opacity: 1; }
.mod-row-premium:hover {
  background: rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.2);
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(124,58,237,0.15);
}
.mod-row-premium.done::before { background: #22c55e; opacity: 1; }

/* ── SECTION HEADERS ────────────────────────────────────── */
.section-header-premium {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 18px;
}
.shp-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px; font-weight: 800; color: #fff;
}
.shp-sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.shp-link {
  font-size: 13px; color: #a78bfa; text-decoration: none; font-weight: 600;
  display: flex; align-items: center; gap: 5px;
  transition: color 0.2s;
}
.shp-link:hover { color: #c4b5fd; }

/* ── RESPONSIVE FOOTER ──────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 20px; }
  .page-hero { padding: 32px 20px; flex-direction: column; }
  .hero-art { display: none; }
  .hero-title { font-size: 26px; }
  .gla-footer { margin-top: 40px; }
}



/* Body on module pages must allow footer to show */
body {
  overflow-x: hidden !important;
}

/* ── FOOTER — always full width at bottom ── */
.gla-footer {
  display: block;
  width: 100%;
  clear: both;
  box-sizing: border-box;
}
/* Ensure footer sits outside any grid/flex on module pages */
body > footer.gla-footer,
html body .gla-footer {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 60px;
}
/* Login and auth pages: hide footer */
.login-page ~ footer.gla-footer,
.login-page + footer.gla-footer { display: none !important; }


/* ── MODULE PREV/NEXT NAVIGATION ── */
.mod-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px; margin: 40px 0 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
  grid-column: 2 !important;
}
.mod-nav-btn {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7);
  text-decoration: none; font-size: 14px; font-weight: 600;
  font-family: inherit; transition: all 0.25s ease; cursor: pointer;
  min-width: 180px;
}
.mod-nav-btn:hover {
  background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35);
  color: #c4b5fd; transform: translateX(0);
}
.mod-nav-btn.prev:hover { transform: translateX(-4px); }
.mod-nav-btn.next:hover { transform: translateX(4px); }
.mod-nav-btn svg { flex-shrink: 0; }
.mod-nav-code {
  font-size: 10px; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: #a78bfa;
}
.mod-nav-title { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 1px; }
.mod-nav-center {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mod-nav-pos { font-size: 12px; color: rgba(255,255,255,0.35); }
.mod-nav-dots { display: flex; gap: 4px; }
.mod-nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.mod-nav-dot.active { background: #a78bfa; width: 18px; border-radius: 3px; }


/* ── WELCOME PAGE PATTERNS ── */
.welcome-pattern-left,
.welcome-pattern-right {
  position: fixed; top: 0; bottom: 0; width: 160px;
  pointer-events: none; z-index: 0; overflow: hidden;
  opacity: 0.18;
}
.welcome-pattern-left { left: 0; }
.welcome-pattern-right { right: 0; transform: scaleX(-1); }
.welcome-body { position: relative; z-index: 1; }

/* Login page patterns */
.login-pattern {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.login-left { position: relative; }
.login-left > * { position: relative; z-index: 1; }

/* Footer background pattern */
.gla-footer {
  position: relative; overflow: hidden;
}
.gla-footer::after {
  content: '';
  position: absolute; bottom: 0; right: 0; width: 400px; height: 100%;
  background: radial-gradient(ellipse 300px 200px at 80% 50%, rgba(124,58,237,0.06), transparent);
  pointer-events: none;
}


/* ══ MODULE LESSON WRAP — consistent center-column alignment ══
   Constrains all orphaned lesson content (images, lessons,
   case studies, activities, quiz, flashcards) to stay within
   the same horizontal bounds as the mod-content header above.
   Left offset = mod-nav width. Right padding accounts for
   the fixed gla-rhs sidebar on wide screens.
   ══════════════════════════════════════════════════════════ */

.mod-lesson-wrap {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 32px;
  background: transparent;
}

/* Desktop: offset for left sidebar (240px) */
@media (min-width: 769px) {
  .mod-lesson-wrap {
    padding-left: calc(240px + 32px);
    padding-right: 32px;
  }
}

/* Wide desktop: also leave room for fixed right sidebar (280px) */
@media (min-width: 1101px) {
  .mod-lesson-wrap {
    padding-right: calc(280px + 32px);
  }
}

/* Tablet: no right sidebar */
@media (max-width: 1100px) and (min-width: 769px) {
  .mod-lesson-wrap {
    padding-right: 32px;
  }
}

/* Mobile: full width, small padding */
@media (max-width: 768px) {
  .mod-lesson-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Children inside wrap reset their own horizontal padding
   so nothing double-pads */
.mod-lesson-wrap .lesson-section,
.mod-lesson-wrap .mod-images,
.mod-lesson-wrap .case-study,
.mod-lesson-wrap .activity-card,
.mod-lesson-wrap .reflection-box,
.mod-lesson-wrap .conclusion-box,
.mod-lesson-wrap .mod-panel,
.mod-lesson-wrap .rt-wrap,
.mod-lesson-wrap .read-tracker,
.mod-lesson-wrap .mod-nav-bar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* mod-nav-bar inside wrap still full span */
.mod-lesson-wrap .mod-nav-bar {
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
  padding-right: 32px;
}
@media (min-width: 769px) {
  .mod-lesson-wrap .mod-nav-bar {
    margin-left: calc(-240px - 32px);
    margin-right: -32px;
    padding-left: calc(240px + 32px);
    padding-right: 32px;
  }
}
@media (min-width: 1101px) {
  .mod-lesson-wrap .mod-nav-bar {
    margin-right: calc(-280px - 32px);
    padding-right: calc(280px + 32px);
  }
}


/* ══ COMING SOON TRAINING SECTION ══ */
.cs-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}
.cs-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8c020;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-section-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: #e8c020;
  border-radius: 2px;
  display: inline-block;
}
.cs-section-title {
  font-family: "Syne", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.cs-section-title span { color: #a78bfa; }
.cs-section-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
}
.cs-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(232,192,32,0.1);
  border: 1px solid rgba(232,192,32,0.3);
  border-radius: 10px;
  color: #e8c020;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.cs-notify-btn:hover {
  background: rgba(232,192,32,0.18);
  transform: translateY(-2px);
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.cs-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.cs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.02));
  pointer-events: none;
}
.cs-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167,139,250,0.25);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.cs-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cs-coming-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(232,192,32,0.12);
  color: rgba(232,192,32,0.7);
  border: 1px solid rgba(232,192,32,0.2);
  white-space: nowrap;
}
.cs-card-body { flex: 1; }
.cs-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cs-title {
  font-size: 13px;
  font-weight: 700;
  color: #f0eaff;
  line-height: 1.35;
  margin-bottom: 5px;
}
.cs-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
.cs-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs-level-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.cs-lock {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
/* Progress tracker strip */
.cs-progress-strip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cs-progress-label { font-size: 13px; color: rgba(255,255,255,0.5); }
.cs-progress-bar-wrap { flex: 1; min-width: 120px; height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.cs-progress-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7c3aed,#e8c020); width: 0%; transition: width 1s ease; }
.cs-progress-pct { font-size: 12px; font-weight: 700; color: #a78bfa; }

@media (max-width: 768px) {
    .cs-grid { grid-template-columns: 1fr 1fr; }
  .cs-section-title { font-size: 22px; }
}
@media (max-width: 480px) {
  .cs-grid { grid-template-columns: 1fr; }
}


/* ══ CINEMATIC VIDEO PLAYER ══ */
.cinema-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 24px 60px rgba(0,0,0,0.7),
    0 0 80px rgba(124,58,237,0.12);
}
.cinema-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
}
.cinema-wrap:hover .cinema-header { opacity: 1; }
.cinema-title-card {
  font-family: "Syne", system-ui, sans-serif;
  font-size: 14px; font-weight: 800;
  color: #fff; letter-spacing: 0.02em;
}
.cinema-level-badge {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid;
}
.cinema-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
}
.cinema-wrap:hover .cinema-footer { opacity: 1; }
.cinema-chapters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cinema-chapter-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.cinema-chapter-dot.active,
.cinema-chapter-dot:hover {
  background: #e8c020;
  transform: scale(1.4);
}
.cinema-speed {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.cinema-speed:hover { background: rgba(255,255,255,0.18); color: #fff; }
.cinema-note-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.cinema-note-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cinema-frame {
  position: relative;
  aspect-ratio: 16/9;
  display: block;
}
.cinema-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
/* Notes panel */
.cinema-notes-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  display: none;
}
.cinema-notes-panel.open { display: block; }
.cinema-notes-label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cinema-notes-area {
  width: 100%; min-height: 80px;
  background: transparent; border: none;
  color: rgba(255,255,255,0.7); font-size: 14px;
  font-family: inherit; line-height: 1.6; resize: vertical;
  outline: none;
}
.cinema-notes-area::placeholder { color: rgba(255,255,255,0.2); }
/* GLA Watermark */
.cinema-watermark {
  position: absolute;
  bottom: 48px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(232,192,32,0.35);
  pointer-events: none;
  font-family: "Syne", system-ui, sans-serif;
  z-index: 9;
}

/* ════════════════════════════════════════════════════════════
   GLA MASTER ALIGNMENT + GLASS SYSTEM
   All heroes align to content. Glass/glossy on all cards.
   ════════════════════════════════════════════════════════════ */

/* ── UNIVERSAL CONTENT WIDTH TOKEN ──────────────────────────
   Content columns are max 1200px, centred with auto margins.
   Heroes must match using the same calc so left & right
   empty space is identical on every page.
   ─────────────────────────────────────────────────────────── */
:root {
  --content-max: 1200px;
  --content-pad: 40px;
  --hero-pad-h: max(var(--content-pad), calc((100% - var(--content-max)) / 2));
}

/* ── PAGE HEROES — aligned to content column ─────────────── */
.page-hero {
  padding-left:  var(--hero-pad-h) !important;
  padding-right: var(--hero-pad-h) !important;
  padding-top:    56px !important;
  padding-bottom: 48px !important;
  box-sizing: border-box !important;
}

/* ── DASHBOARD SECTIONS — match centred content ─────────── */
#skills-mastery,
.cs-section {
  padding-left:  var(--hero-pad-h) !important;
  padding-right: var(--hero-pad-h) !important;
  box-sizing: border-box !important;
}
#skills-grid,
.cs-grid {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* Skills mastery inner header — same alignment */
#skills-mastery > div:first-child {
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width: var(--content-max) !important;
}

/* ── GLASS DESIGN SYSTEM ─────────────────────────────────────
   Three levels of glass:
   .glass-heavy  — hero panels, section backgrounds
   .glass-card   — interactive cards (lib, cs, level, stat)
   .glass-subtle — rows, small elements
   ─────────────────────────────────────────────────────────── */

/* Glossy highlight mixin — applied via pseudo-element */
.page-hero,
.lib-card,
.cs-card,
.level-card-premium,
.stat-card,
.rhs-section,
.rhs-quote,
.rhs-countdown,
.mod-nav-bar {
  position: relative;
  overflow: hidden;
}

/* ── PAGE HERO — glass + glossy ─────────────────────────── */
.page-hero {
  background: linear-gradient(135deg,
    rgba(124,58,237,0.10) 0%,
    rgba(124,58,237,0.04) 50%,
    rgba(232,192,32,0.03) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 16px 48px rgba(0,0,0,0.2) !important;
}
/* Glossy highlight bar at top of hero */
.page-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(167,139,250,0.5) 30%,
    rgba(232,192,32,0.35) 70%,
    transparent);
  pointer-events: none; z-index: 0;
}
/* Inner glow highlight — glossy sheet of light on top half */
.page-hero::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.045),
    transparent);
  pointer-events: none; z-index: 0;
  border-radius: inherit;
}
.page-hero .hero-text,
.page-hero .hero-art {
  position: relative; z-index: 1;
}

/* ── LIBRARY CARDS — glass ───────────────────────────────── */
.lib-card {
  background: rgba(18,10,40,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.lib-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04), transparent);
  pointer-events: none; border-radius: 18px 18px 0 0;
}
.lib-card:hover {
  transform: translateY(-6px) !important;
  background: rgba(22,12,48,0.90) !important;
  border-color: rgba(167,139,250,0.28) !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.5),
    0 0 0 1px rgba(167,139,250,0.15),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 32px rgba(124,58,237,0.12) !important;
}

/* ── COMING SOON CARDS — glass ───────────────────────────── */
.cs-card {
  background: rgba(14,8,33,0.70) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.cs-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.035), transparent);
  pointer-events: none; z-index: 0; border-radius: 16px 16px 0 0;
}
.cs-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(167,139,250,0.22) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 24px rgba(124,58,237,0.10) !important;
}

/* ── LEVEL CARDS — premium glass ────────────────────────── */
.level-card-premium {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.level-card-premium::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent);
  pointer-events: none; z-index: 0; border-radius: inherit;
}
.level-card-premium:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.level-card-premium .lcp-art,
.level-card-premium > div { position: relative; z-index: 1; }

/* ── STAT CARDS — glass ─────────────────────────────────── */
.stat-card {
  background: rgba(14,8,33,0.70) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transition: all 0.3s ease !important;
}
.stat-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04), transparent);
  pointer-events: none; z-index: 0; border-radius: inherit;
}
.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* ── MODULE ROWS — glass ────────────────────────────────── */
.mod-row, .mod-row-premium {
  background: rgba(14,8,33,0.60) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: all 0.25s ease !important;
}
.mod-row:hover, .mod-row-premium:hover {
  background: rgba(124,58,237,0.12) !important;
  border-color: rgba(124,58,237,0.25) !important;
  box-shadow:
    0 4px 20px rgba(124,58,237,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transform: translateX(4px) !important;
}

/* ── RIGHT SIDEBAR CARDS — glass ────────────────────────── */
.rhs-section {
  background: rgba(14,8,33,0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.rhs-quote {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.rhs-countdown {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── MODULE HERO — glass ────────────────────────────────── */
.mod-hero {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.mod-hero::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
  pointer-events: none; z-index: 0;
}

/* ── TOPBAR — solid glass ───────────────────────────────── */
/* consolidated into unified .topbar rule below */

/* ── COMMUNITY POSTS — glass ────────────────────────────── */
.rhs-post {
  background: rgba(14,8,33,0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ── NEXT/PREV NAV BAR — glass ──────────────────────────── */
.mod-nav-bar {
  background: rgba(9,3,24,0.80) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ── WELCOME PAGE HERO — override with inner constraint ── */
/* Welcome hero is a custom block, not page-hero class */
/* Apply the same alignment to the welcome hero card wrapper */
.welcome-hero-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* ── FOOTER — glass bar ──────────────────────────────────── */
.gla-footer {
  background: rgba(6,2,16,0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── LIBRARY SEARCH WRAP — match hero ───────────────────── */
/* Already at 120px, keep it exact */
.lib-search-wrap { padding-top: 28px !important; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --hero-pad-h: 20px; }
  .page-hero { padding-top: 36px !important; padding-bottom: 32px !important; }
}
@media (max-width: 480px) {
  :root { --hero-pad-h: 16px; }
}

/* ── DASHBOARD HERO — inside sidebar layout ── */
.dash-hero {
  padding-left:  40px !important;
  padding-right: 40px !important;
  border-radius: 16px;
  margin: 0 !important;
}
/* Dashboard + Community hero content doesn't need viewport calc */
/* it's already constrained by its parent container */

/* ── PRICING CONTENT ALIGNMENT ── */
.open-access-banner, .tier-grid {
  max-width: var(--content-max, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.open-access-banner { padding-left: 40px; padding-right: 40px; }

/* Dashboard hero inside content column — match content padding */
.dash-hero {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* ── LEVELS GRID — definitive ── */
.levels-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  .levels-grid { grid-template-columns: 1fr !important; }
}


/* ── MOBILE BOTTOM NAV BAR ── */
.mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(9,3,24,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 300;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .mob-bottom-nav { display: flex; align-items: center; }
  /* Add bottom padding so content doesn't hide behind bar */
  body { padding-bottom: 60px; }
}
.mob-nav-home {
  width: 56px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 18px;
  border-right: 1px solid rgba(255,255,255,0.06);
  text-decoration: none; transition: color 0.2s;
  flex-shrink: 0;
}
.mob-nav-home:hover { color: #a78bfa; }
.mob-nav-prev, .mob-nav-next {
  width: 52px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 18px;
  text-decoration: none; transition: all 0.2s; flex-shrink: 0;
}
.mob-nav-prev:hover, .mob-nav-next:hover { color: #fff; }
.mob-nav-prev { border-right: 1px solid rgba(255,255,255,0.06); }
.mob-nav-next { border-left: 1px solid rgba(255,255,255,0.06); }
.mob-nav-prev.disabled, .mob-nav-next.disabled {
  opacity: 0.25; pointer-events: none;
}
.mob-nav-center {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px;
}
.mob-nav-code {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1;
}
.mob-nav-pos {
  font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1;
}
.mob-nav-dots {
  display: flex; gap: 3px; align-items: center; margin-top: 2px;
}
.mob-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.mob-dot.active { width: 12px; border-radius: 2px; }

/* ── COMING SOON SECTION — definitive alignment ── */
.cs-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  padding-left:  var(--hero-pad-h) !important;
  padding-right: var(--hero-pad-h) !important;
  box-sizing: border-box !important;
  max-width: none !important;
}
.cs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  max-width: none !important;
}
@media (max-width: 768px) {
  .cs-section { padding-left: 16px !important; padding-right: 16px !important; }
  .cs-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .cs-grid { grid-template-columns: 1fr !important; }
}


/* ══ MOBILE RESPONSIVENESS MASTER FIX ══════════════════════════
   Fixes topbar overflow, dashboard width, module page layout,
   and all elements that were clipping beyond viewport edge.
   ══════════════════════════════════════════════════════════════ */

/* ── GLOBAL: prevent any element from causing horizontal scroll ── */
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ── LOGIN PAGE: orbs are decorative, clip them ── */
.bg-orb { overflow: hidden; }
.login-card { max-width: min(920px, 96vw) !important; }

/* ── TOPBAR: fix all screen sizes ── */
/* consolidated into unified .topbar rule below */
.topbar-nav { flex-shrink: 1 !important; min-width: 0 !important; }
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  /* Topbar: hide desktop nav links, show only logo + ham */
  .topbar-nav { display: none !important; }
  .topbar-logo-name { font-size: 13px !important; }
  .topbar-right { gap: 4px !important; }
  .icon-btn { width: 32px !important; height: 32px !important; padding: 0 !important; }
  #user-avatar, .avatar {
    width: 30px !important; height: 30px !important;
    font-size: 12px !important; flex-shrink: 0 !important;
  }
  .mob-ham { flex-shrink: 0 !important; }

  /* Hero sections: stack on mobile */
  .page-hero {
    flex-direction: column !important;
    gap: 20px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-text { max-width: 100% !important; }
  .hero-art { display: none !important; } /* hide decorative art on mobile */
  .hero-title { font-size: 22px !important; line-height: 1.25 !important; }

  /* Dashboard: fix content overflow */
  .dash-body {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .dash-left {
    width: 100% !important;
    max-height: 200px !important;
    overflow-y: auto !important;
  }
  .dash-main, .dash-content {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }
  .dash-right { display: none !important; }
  .dash-hero, .page-hero.dash-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Stats cards: 2 cols on mobile */
  .stats-grid, [class*="stat-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Level cards: single column on mobile */
  .levels-grid {
    grid-template-columns: 1fr !important;
  }

  /* Module rows: full width */
  .mod-row, .mod-row-premium {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Coming soon: 1 col on mobile */
  .cs-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Community layout: stack */
  .comm-layout {
    flex-direction: column !important;
    width: 100% !important;
  }
  .comm-sidebar {
    width: 100% !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .comm-main {
    width: 100% !important;
    padding: 12px !important;
  }
  .comm-rhs { display: none !important; }
}

/* ── MODULE PAGES MOBILE ── */
@media (max-width: 768px) {
  /* mod-body: force full width, no grid */
  .mod-body {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .mod-nav {
    display: none !important; /* hidden on mobile — use bottom nav */
  }
  .gla-rhs {
    display: none !important; /* hidden on mobile */
  }
  .mod-content {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }
  .mod-hero {
    padding: 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .mod-hero-art {
    width: 80px !important;
    height: auto !important;
  }
  .mod-hero-art svg { width: 80px !important; height: 60px !important; }
  .mod-hero-title { font-size: 18px !important; }
  .mod-lesson-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .video-section, .cinema-wrap, .cinema-frame {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 10px !important;
  }
  .lesson-section, .case-study, .activity-card, .reflection-box {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 14px !important;
  }
  .ls-body { padding: 0 !important; }
  /* Flashcard grid: single col */
  .fc-grid { grid-template-columns: 1fr !important; }
  /* Quiz options: full width */
  .q-option { width: 100% !important; }
}

/* ── TABLET (768px–1100px) ── */
@media (max-width: 1100px) and (min-width: 769px) {
  .page-hero {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .comm-rhs { display: none !important; }
  .gla-rhs { display: none !important; }
  .mod-nav { width: 200px !important; }
  .cs-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dash-right { display: none !important; }
}

/* ── DESKTOP TOPBAR FIX (1440px+) ── */
@media (min-width: 1100px) {
  .topbar {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ── WELCOME PAGE SPECIFIC ── */
@media (max-width: 768px) {
  .welcome-wrap {
    padding: 0 12px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .lv-grid { grid-template-columns: 1fr !important; }
  .cv-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-section { padding: 20px 16px !important; }
  .hero-stats { gap: 12px !important; flex-wrap: wrap !important; }
  .hs-num { font-size: 24px !important; }
  .hero-cta { padding: 12px 20px !important; font-size: 14px !important; }
  .video-frame { border-radius: 10px !important; }
  .msg-card { padding: 16px !important; }
  /* CS section on welcome */
  .cs-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── LOGIN PAGE MOBILE ── */
@media (max-width: 768px) {
  body { overflow-y: auto !important; overflow-x: hidden !important; }
  .login-card {
    flex-direction: column !important;
    margin: 16px !important;
    border-radius: 18px !important;
    max-height: none !important;
  }
  .card-hero { padding: 28px 24px !important; }
  .card-hero .hero-testi { display: none !important; }
  .card-form { width: 100% !important; padding: 24px !important; }
  .hero-stats { gap: 12px !important; }
  .hero-headline { font-size: 26px !important; }
}

/* ── SKILLS MASTERY MAP MOBILE ── */
@media (max-width: 768px) {
  #skills-mastery {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #skills-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── LIBRARY MOBILE (self-contained) ──
   Applied in library.html inline style block */

/* ══ OVERFLOW SURGICAL FIXES ══════════════════════════════════ */

/* Fix topbar-right on ALL screens - must not overflow */
.topbar-right {
  flex-shrink: 0 !important;
  max-width: 160px !important;
  overflow: hidden !important;
}

/* Dashboard sec-hdr, levels-grid: contain within parent */
.sec-hdr, .section-header-premium,
.levels-grid, .see-all, .dash-section {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Module topbar on desktop — fix 1680px overflow */
/* The module pages have a 240px left sidebar + the topbar needs to account for it */
/* consolidated into unified .topbar rule below */

/* Community comm-main: contain to viewport */
.comm-main {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

@media (max-width: 480px) {
  .topbar-right { max-width: 120px !important; gap: 2px !important; }
  .enrol-btn, [class*="enrol"] { display: none !important; }
  .dash-main, .dash-content {
    padding: 8px !important;
    max-width: 390px !important;
    overflow-x: hidden !important;
  }
  .sec-hdr, .section-header-premium {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
}

/* Dashboard specific overflow containment */
.dash-body, .dash-content, .dash-main {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.dash-content > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── FIX: mod-lesson-wrap should not expand body scroll width ── */
/* Use margin instead of padding for RHS clearance on desktop */
@media (min-width: 1101px) {
  .mod-lesson-wrap {
    padding-right: 32px !important;
    margin-right: 280px !important;  /* leave space for fixed gla-rhs */
  }
}
/* Ensure body itself never exceeds viewport */
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ── PREVENT HORIZONTAL SCROLL — fixed positioned elements ── */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw !important;
  -webkit-overflow-scrolling: touch !important;
}
/* Ensure fixed RHS sidebar doesn't create scroll */
.gla-rhs {
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════
   GLA MOBILE RESPONSIVENESS — COMPREHENSIVE FIX
   Targets: 390px (iPhone), 768px (tablet), 1024px (small desktop)
   ════════════════════════════════════════════════════════════ */

/* ── TOPBAR ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar {
    padding: 0 14px !important;
    height: 54px !important;
  }
  .topbar-logo-name {
    font-size: 13px !important;
  }
  .topbar-links {
    display: none !important;
  }
  .topbar-right {
    gap: 8px !important;
  }
  .topbar-enrol {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* ── LOGIN PAGE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { overflow-y: auto !important; }
  .login-card {
    flex-direction: column !important;
    width: 94vw !important;
    max-height: none !important;
    border-radius: 18px !important;
  }
  .card-hero {
    padding: 28px 24px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .hero-headline { font-size: 28px !important; }
  .hero-stats { gap: 16px !important; }
  .h-stat-num { font-size: 22px !important; }
  .hero-testi { padding: 12px 14px !important; }
  .card-form {
    width: 100% !important;
    padding: 28px 24px !important;
    border-radius: 0 0 18px 18px !important;
  }
  .form-title { font-size: 20px !important; }
}
@media (max-width: 480px) {
  .card-hero { padding: 22px 18px !important; }
  .card-form { padding: 22px 18px !important; }
  .hero-levels { gap: 5px !important; }
  .hl-badge { font-size: 10px !important; padding: 4px 8px !important; }
}

/* ── PAGE HERO ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 32px !important;
    padding-bottom: 28px !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .hero-text h1, .hero-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .hero-art {
    width: 140px !important;
    margin: 0 auto !important;
  }
  .hero-art svg {
    width: 100% !important;
    height: auto !important;
  }
}

/* ── WELCOME PAGE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .welcome-wrap, .sec-wrap {
    padding: 0 18px !important;
    max-width: 100% !important;
  }
  .hero-section {
    flex-direction: column !important;
    padding: 20px !important;
  }
  .lv-grid {
    grid-template-columns: 1fr !important;
  }
  .cv-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .video-frame iframe {
    width: 100% !important;
    height: 200px !important;
  }
}

/* ── DASHBOARD ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-body {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .dash-left {
    display: none !important;
  }
  .dash-main {
    padding: 16px !important;
    width: 100% !important;
  }
  .dash-rhs {
    display: none !important;
  }
  .stat-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .stat-card {
    padding: 14px !important;
  }
  .levels-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .stat-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .levels-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── MODULE PAGES ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide left sidebar nav */
  .mod-nav {
    display: none !important;
  }
  /* Hide right sidebar */
  .gla-rhs {
    display: none !important;
  }
  /* Make mod-body single column */
  .mod-body {
    display: block !important;
    padding: 0 !important;
  }
  /* mod-content full width */
  .mod-content {
    padding: 16px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Module hero */
  .mod-hero {
    flex-direction: column !important;
    padding: 20px 18px !important;
    gap: 12px !important;
  }
  .mod-hero svg {
    width: 100px !important;
    height: 80px !important;
  }
  .mod-hero-title {
    font-size: 20px !important;
  }
  /* Lesson wrap */
  .mod-lesson-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Video section */
  .video-section, .cinema-wrap {
    border-radius: 10px !important;
    margin: 0 !important;
  }
  .cinema-frame {
    aspect-ratio: 16/9 !important;
  }
  /* Audio section */
  .audio-section {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  /* Lesson sections */
  .lesson-section {
    padding: 18px !important;
    border-radius: 12px !important;
  }
  .lesson-section h2 {
    font-size: 18px !important;
  }
  /* Images grid */
  .mod-images {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .mod-image {
    border-radius: 10px !important;
    height: 200px !important;
    object-fit: cover !important;
  }
  /* Case studies */
  .case-study {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  /* Activity cards */
  .activity-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  /* Flashcard section */
  .fc-section, .flash-cards {
    padding: 0 !important;
  }
  .flash-card {
    padding: 20px !important;
    min-height: 180px !important;
  }
  /* Quiz */
  .quiz-section {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .quiz-opt {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  /* Module nav bar */
  .mod-nav-bar {
    flex-direction: row !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    flex-wrap: wrap !important;
  }
  .mod-nav-bar a {
    flex: 1 !important;
    min-width: 120px !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  /* Mark complete */
  .mark-complete-btn, .mc-btn {
    width: 100% !important;
    font-size: 14px !important;
    padding: 14px !important;
  }
  /* Chapter navigation dots */
  .mod-chapter-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* ── LIBRARY ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lib-search-wrap {
    padding: 0 18px !important;
    max-width: 100% !important;
  }
  .lib-filters {
    padding: 0 18px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .lib-filter-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .lib-grid {
    grid-template-columns: 1fr !important;
    padding: 0 18px !important;
    max-width: 100% !important;
    gap: 12px !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .lib-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── COMMUNITY PAGE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .comm-layout {
    display: block !important;
    flex-direction: column !important;
  }
  .comm-sidebar {
    display: none !important;
  }
  .comm-feed-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 18px !important;
  }
  .comm-rhs {
    display: none !important;
  }
}

/* ── COMING SOON CARDS ──────────────────────────────────────── */
@media (max-width: 768px) {
  .cs-section {
    padding: 32px 18px !important;
  }
  .cs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .cs-section-title { font-size: 20px !important; }
  .cs-section-header { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 480px) {
  .cs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── PRICING PAGE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .tier-grid {
    grid-template-columns: 1fr !important;
    padding: 0 18px !important;
  }
  .open-access-banner {
    margin: 16px !important;
    padding: 20px 18px !important;
  }
  .oab-title { font-size: 20px !important; }
}

/* ── SKILLS MASTERY MAP ─────────────────────────────────────── */
@media (max-width: 768px) {
  #skills-mastery {
    padding: 32px 18px 0 !important;
  }
  #skills-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gla-footer {
    padding: 32px 18px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ── TABLETS (768-1100px) ───────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1100px) {
  .gla-rhs { display: none !important; }
  .mod-lesson-wrap {
    padding-right: 32px !important;
    margin-right: 0 !important;
  }
  .mod-body {
    grid-template-columns: 220px 1fr !important;
  }
  .lib-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .levels-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── MOBILE TOUCH FIXES ── */
button, a, [onclick], .nav-item, .filter-btn, .action-btn,
.lib-card, .cs-card, .mod-row, .level-card-premium,
.lp-submit, .f-submit, .tier-btn, .oab-cta {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(124,58,237,0.2) !important;
  cursor: pointer !important;
}
/* Remove any accidental pointer-events:none on containers */
.page-hero, .card-hero, .hero-main, .hero-text {
  pointer-events: auto !important;
}
/* Ensure mobile bottom nav is above everything else */
.mob-bottom-nav {
  z-index: 9999 !important;
}
/* Fix iOS button rendering */
button, input, select, textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Ensure upgrade wall buttons are tappable */
#gla-upgrade-wall a, #gla-upgrade-wall button {
  touch-action: manipulation !important;
  pointer-events: auto !important;
  z-index: 9001 !important;
  position: relative !important;
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED TOP BAR, Production Release 2.1
   ------------------------------------------------------------------
   The top bar had six competing .topbar rules that had accumulated over
   time, each using !important and setting different heights, paddings,
   backgrounds and positioning. One of them forced position:fixed with no
   matching offset on the page body, which pulled the bar out of the flow
   and let page content slide underneath it. That was the overlap seen on
   tablet and desktop. A mobile-only rule (overflow:hidden, 16px padding)
   had also been left as a base rule, clipping the bar on wide screens.

   This single rule replaces all of that. It keeps the intended final
   look, the dark glass bar at 68px, and restores position:sticky so the
   bar reserves its own space and nothing overlaps. The visual design is
   unchanged.
   ══════════════════════════════════════════════════════════════════ */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: 68px !important;
  padding: 0 36px !important;
  background: rgba(9,3,24,0.95) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-bottom: 1px solid rgba(167,139,250,0.15) !important;
  box-shadow: 0 1px 0 rgba(167,139,250,0.12), 0 4px 24px rgba(0,0,0,0.4) !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 500 !important;
}

/* Desktop and tablet nav, centered, never wraps or overlaps. */
.topbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.logo-wrap { flex-shrink: 0 !important; }

/* Tablet, tighten padding so the single row always fits. */
@media (max-width: 1024px) {
  .topbar { padding: 0 20px !important; }
  .tnav { padding: 7px 10px !important; }
}

/* Mobile, the row nav is hidden and the hamburger takes over. The
   overflow and reduced padding that used to leak onto desktop belong
   only here. */
@media (max-width: 768px) {
  .topbar {
    height: 56px !important;
    padding: 0 14px !important;
    overflow: hidden !important;
  }
  .topbar-nav { display: none !important; }
  .mob-ham { display: flex !important; }
}