/* =============================================================
   Likkle Coders — v6 "Fable" Design System
   Loaded LAST, overrides all earlier sheets.
   EASY REVERT: remove <link rel="stylesheet" href="css/v6-fable.css">
   from index.html (plus the sw.js SHELL entry).
   ============================================================= */

/* ──────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  /* Canvas */
  --f5-page:          #0c0b14;
  --f5-page-2:        #13111e;
  --f5-surface:       rgba(255,255,255,.06);
  --f5-surface-raised:rgba(255,255,255,.09);
  --f5-solid:         #1a1728;

  /* Ink */
  --f5-ink:           #ede9ff;
  --f5-ink-soft:      rgba(237,233,255,.55);
  --f5-line:          rgba(255,255,255,.09);

  /* Brand */
  --f5-coral:         #ff6b3d;
  --f5-coral-lt:      #ff8c66;
  --f5-coral-glow:    rgba(255,107,61,.38);
  --f5-purple:        #8b5cf6;
  --f5-purple-lt:     #b9a4ff;
  --f5-purple-glow:   rgba(139,92,246,.38);
  --f5-green:         #34d399;
  --f5-green-glow:    rgba(52,211,153,.32);
  --f5-yellow:        #fbbf24;
  --f5-blue:          #60a5fa;
  --f5-pink:          #ec4899;

  /* Jamaica flag */
  --f5-jf-green:      #00c44a;
  --f5-jf-green-dk:   #008f36;
  --f5-jf-gold:       #FFD100;
  --f5-jf-black:      #000;

  /* Glass */
  --f5-glass-bg:      rgba(255,255,255,.07);
  --f5-glass-border:  rgba(255,255,255,.11);
  --f5-glass-blur:    blur(18px) saturate(160%);
  --f5-glass-shadow:  0 8px 32px rgba(0,0,0,.5);

  /* Shadows */
  --f5-shadow-sm:     0 2px 8px  rgba(0,0,0,.28);
  --f5-shadow-md:     0 8px 24px rgba(0,0,0,.4);
  --f5-shadow-lg:     0 20px 50px rgba(0,0,0,.6);
  --f5-glow-coral:    0 0 28px rgba(255,107,61,.45);
  --f5-glow-purple:   0 0 28px rgba(139,92,246,.4);
  --f5-glow-green:    0 0 28px rgba(0,196,74,.35);
  --f5-glow-gold:     0 0 20px rgba(255,209,0,.3);

  /* Radii */
  --f5-r-xs: 8px;
  --f5-r-sm: 12px;
  --f5-r-md: 18px;
  --f5-r-lg: 26px;
  --f5-r-xl: 34px;
  --f5-r-pill: 999px;

  /* Easing */
  --f5-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --f5-ease-out:    cubic-bezier(.22,1,.36,1);
  --f5-ease-in:     cubic-bezier(.64,0,.78,0);
  --f5-t-xs:  80ms;
  --f5-t-sm:  140ms;
  --f5-t-md:  220ms;
  --f5-t-lg:  360ms;

  /* Override legacy tokens */
  --c-page:      var(--f5-page);
  --c-page-2:    var(--f5-page-2);
  --c-card:      var(--f5-surface);
  --c-ink:       var(--f5-ink);
  --c-ink-soft:  var(--f5-ink-soft);
  --c-line:      var(--f5-line);
  --c-coral:     var(--f5-coral);
  --c-coral-d:   #e8521e;
  --c-purple:    var(--f5-purple);
  --c-green:     var(--f5-green);
  --c-yellow:    var(--f5-yellow);
  --c-blue:      var(--f5-blue);
  --c-pink:      var(--f5-pink);
  --jf-green:    var(--f5-jf-green);
  --jf-green-dark: var(--f5-jf-green-dk);
  --jf-gold:     var(--f5-jf-gold);
  --shadow-sm:   var(--f5-shadow-sm);
  --shadow-md:   var(--f5-shadow-md);
  --shadow-lg:   var(--f5-shadow-lg);
  --r-sm:  var(--f5-r-sm);
  --r-md:  var(--f5-r-md);
  --r-lg:  var(--f5-r-lg);
  --focus-ring: 0 0 0 3px rgba(139,92,246,.45);
  --bh-purple:    #7c5cf6;
  --bh-purple-dk: #5a3de8;
  --bh-lime:      #b9ff4e;
  --bh-lime-dk:   #9ee62d;
}


/* ──────────────────────────────────────────────────────────────
   2. CANVAS & TYPOGRAPHY
   ────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--f5-page);
  color: var(--f5-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% -10%, rgba(139,92,246,.2) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 105%, rgba(52,211,153,.13) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%,  rgba(255,107,61,.05) 0%, transparent 70%);
  background-attachment: fixed;
}

h1,h2,h3,h4 { color: var(--f5-ink); }
p { color: var(--f5-ink-soft); }
a { color: var(--f5-ink); }

::selection { background: rgba(139,92,246,.4); color: #fff; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }


/* ──────────────────────────────────────────────────────────────
   3. TOP NAVIGATION
   ────────────────────────────────────────────────────────────── */
.topnav {
  background: rgba(12,11,20,.82) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid var(--f5-glass-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.35) !important;
}

.brand { color: var(--f5-ink) !important; }
.brand-mark {
  background: linear-gradient(135deg, var(--f5-purple) 0%, var(--f5-coral) 100%) !important;
  box-shadow: var(--f5-glow-purple), 0 4px 0 rgba(0,0,0,.3) !important;
  border-radius: 14px;
}
.brand-name em { color: var(--f5-coral) !important; }

.nav-primary a,
.nav-secondary a {
  color: var(--f5-ink-soft) !important;
  font-weight: 600;
  transition: color var(--f5-t-sm) var(--f5-ease-out),
              background var(--f5-t-sm) var(--f5-ease-out);
  border-radius: var(--f5-r-xs);
  padding: .3rem .55rem;
}
.nav-primary a:hover,
.nav-secondary a:hover,
.nav-primary a.is-active,
.nav-secondary a.is-active {
  color: var(--f5-ink) !important;
  background: rgba(255,255,255,.08) !important;
}

.nav-student-chip {
  background: var(--f5-glass-bg);
  border: 1px solid var(--f5-glass-border);
  border-radius: var(--f5-r-pill);
  padding: .25rem .6rem .25rem .4rem;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.nav-student-chip-link,
.nav-student-switch { color: var(--f5-ink) !important; }
.nav-student-switch {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-pill);
  color: var(--f5-ink) !important;
}
.nav-student-switch:hover { background: rgba(255,255,255,.15) !important; }
.nav-burger span { background: var(--f5-ink) !important; border-radius: 2px; }


/* ──────────────────────────────────────────────────────────────
   4. MOBILE BOTTOM BAR
   ────────────────────────────────────────────────────────────── */
.mobile-bar {
  background: rgba(12,11,20,.92) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-top: 1px solid var(--f5-glass-border) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.4) !important;
}
.mobile-bar a { color: var(--f5-ink-soft) !important; transition: color var(--f5-t-sm) var(--f5-ease-out) !important; }
.mobile-bar a.is-active,
.mobile-bar a:hover { color: var(--f5-coral) !important; }


/* ──────────────────────────────────────────────────────────────
   5. GLOBAL BACK + OFFLINE BANNER
   ────────────────────────────────────────────────────────────── */
.global-back {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--f5-r-pill) !important;
  transition: transform var(--f5-t-sm) var(--f5-ease-spring),
              background var(--f5-t-sm), border-color var(--f5-t-sm),
              color var(--f5-t-sm) !important;
}
.global-back:hover {
  background: rgba(0,196,74,.18) !important;
  border-color: var(--f5-jf-green) !important;
  color: var(--f5-jf-green) !important;
  transform: translateX(-3px) !important;
}

.offline-banner {
  background: linear-gradient(90deg, rgba(239,68,68,.9), rgba(220,38,38,.9)) !important;
  color: #fff !important;
}
.offline-dot { background: #fff !important; }


/* ──────────────────────────────────────────────────────────────
   6. CARDS & SURFACES
   ────────────────────────────────────────────────────────────── */
.card,
.v2-tier-card,
.nsc-track-card,
.nsc-quiz,
.nsc-study,
.nsc-quiz-result,
.v2-profile,
.v2-lesson,
.plans-grade-card,
.plan-page,
.cert-list-card,
.eg-card,
.v2-chess-board-wrap,
.v2-chess-side,
.eg-soon-card {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--f5-glass-shadow) !important;
  color: var(--f5-ink) !important;
}

.v2-modal,
.modal-card {
  background: #1a1728 !important;
  border: 1px solid var(--f5-glass-border) !important;
  box-shadow: var(--f5-shadow-lg), 0 0 0 1px rgba(255,255,255,.05) !important;
  color: var(--f5-ink) !important;
}
.modal {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.modal-card {
  border-radius: var(--f5-r-xl) !important;
  overflow: hidden;
  animation: f6-pop .24s cubic-bezier(.34,1.56,.64,1) both;
}
.modal-head {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid var(--f5-glass-border) !important;
}
.modal-head h3 { color: var(--f5-ink) !important; }
.modal-foot {
  background: rgba(255,255,255,.03) !important;
  border-top: 1px solid var(--f5-glass-border) !important;
}
.modal-close {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  border-radius: var(--f5-r-pill) !important;
  transition: background var(--f5-t-sm) !important;
}
.modal-close:hover { background: rgba(255,255,255,.16) !important; }

.v2-module,
.landing-card,
.lc-section-card,
.tots-tile {
  position: relative;
  overflow: hidden;
}
.v2-module::after,
.landing-card::after,
.lc-section-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}


/* ──────────────────────────────────────────────────────────────
   7. HERO SECTIONS
   ────────────────────────────────────────────────────────────── */
.kg-hero, .lc-land {
  background: linear-gradient(145deg,
    #12082e 0%, #26115c 30%, #0f2b5e 65%, #081630 100%) !important;
  position: relative;
  overflow: hidden;
}
.kg-hero::before, .lc-land::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 10% 25%, rgba(139,92,246,.3) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 88% 75%, rgba(52,211,153,.18) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 50% 5%,  rgba(255,107,61,.15) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.kg-hero > *, .lc-land > * { position: relative; z-index: 2; }

.bh-hero {
  background: linear-gradient(135deg,
    #160838 0%, #3b1a8c 45%, #5b2fe0 100%) !important;
  position: relative; overflow: hidden;
}
.bh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 90% -10%, rgba(78,217,255,.3) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 5%  90%, rgba(185,255,78,.15)  0%, transparent 55%);
  pointer-events: none;
}

.landing-primary {
  background: linear-gradient(135deg, #5b2fe0 0%, #1d4ed8 55%, #0284c7 100%) !important;
}
.landing-eci {
  background: linear-gradient(135deg, #ff6b3d 0%, #ec4899 55%, #f472b6 100%) !important;
}


/* ──────────────────────────────────────────────────────────────
   8. BUTTONS
   ────────────────────────────────────────────────────────────── */
.btn:not(.btn-light):not(.btn-ghost):not(.btn-tiny):not([class*="v2-btn"]),
.kg-btn,
.lc-land-btn {
  background: linear-gradient(135deg, var(--f5-coral) 0%, #f43f5e 100%) !important;
  box-shadow: var(--f5-glow-coral), 0 4px 0 rgba(0,0,0,.25) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .01em;
  transition:
    transform var(--f5-t-sm) cubic-bezier(.34,1.56,.64,1),
    box-shadow var(--f5-t-md) cubic-bezier(.22,1,.36,1) !important;
}
.btn:not(.btn-light):not(.btn-ghost):not(.btn-tiny):not([class*="v2-btn"]):hover,
.kg-btn:hover, .lc-land-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 36px rgba(255,107,61,.6), 0 6px 0 rgba(0,0,0,.2) !important;
}
.btn:not(.btn-light):not(.btn-ghost):not(.btn-tiny):not([class*="v2-btn"]):active,
.kg-btn:active, .lc-land-btn:active {
  transform: translateY(1px) scale(.98) !important;
  box-shadow: var(--f5-glow-coral), 0 2px 0 rgba(0,0,0,.3) !important;
}

.btn-light, .btn-ghost {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: background var(--f5-t-sm) !important;
}
.btn-light:hover, .btn-ghost:hover { background: rgba(255,255,255,.14) !important; }

.v2-btn {
  background: linear-gradient(135deg, var(--f5-jf-green) 0%, var(--f5-jf-green-dk) 100%) !important;
  box-shadow: var(--f5-glow-green) !important;
  border: none !important;
  color: #fff !important;
  transition: transform var(--f5-t-sm) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) !important;
}
.v2-btn:hover {
  background: linear-gradient(135deg, #00d450 0%, #00a640 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 32px rgba(0,196,74,.5) !important;
}
.v2-btn-ghost {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
}

.bh-cta {
  background: var(--bh-lime) !important;
  color: #15161c !important;
  box-shadow: 0 0 20px rgba(185,255,78,.4) !important;
  transition: transform var(--f5-t-sm) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) !important;
}
.bh-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 30px rgba(185,255,78,.55) !important;
}


/* ──────────────────────────────────────────────────────────────
   9. DASHBOARD MODULE TILES
   ────────────────────────────────────────────────────────────── */
.v2-module {
  transition: transform var(--f5-t-md) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) cubic-bezier(.22,1,.36,1) !important;
}
.v2-module:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 28px 56px -8px rgba(0,0,0,.65) !important;
}
.v2-mod-learn {
  background: linear-gradient(135deg, #00c44a 0%, #008f36 100%) !important;
  box-shadow: var(--f5-glow-green) !important;
}
.v2-mod-code {
  background: linear-gradient(135deg, #FFD100 0%, #f59e0b 100%) !important;
  box-shadow: var(--f5-glow-gold) !important;
  color: #15161c !important;
}
.v2-mod-play {
  background: linear-gradient(135deg, #7c5cf6 0%, #4B2DDB 100%) !important;
  box-shadow: var(--f5-glow-purple) !important;
  color: #fff !important;
}
.v2-mod-tots {
  background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #818cf8 100%) !important;
  box-shadow: 0 0 24px rgba(236,72,153,.3) !important;
}


/* ──────────────────────────────────────────────────────────────
   10. PROFILE CARD
   ────────────────────────────────────────────────────────────── */
.v2-profile { border-radius: var(--f5-r-xl) !important; }
.v2-avatar {
  background: linear-gradient(135deg, var(--f5-jf-green), var(--f5-jf-green-dk)) !important;
  box-shadow: var(--f5-glow-green) !important;
}
.v2-stat strong,
.v2-profile-name { color: var(--f5-ink) !important; }
.v2-profile-eyebrow { color: var(--f5-ink-soft) !important; }


/* ──────────────────────────────────────────────────────────────
   11. v2 STANDALONE HEADER
   ────────────────────────────────────────────────────────────── */
.v2-header {
  background: rgba(12,11,20,.88) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid var(--f5-glass-border) !important;
}
.v2-brand-mark {
  background: linear-gradient(135deg, var(--f5-purple), var(--f5-coral)) !important;
  box-shadow: var(--f5-glow-purple) !important;
}
.v2-brand-name { color: var(--f5-ink) !important; }
.v2-brand-name em { color: var(--f5-coral) !important; }
.v2-nav a { color: var(--f5-ink-soft) !important; }
.v2-nav a:hover { color: var(--f5-coral) !important; }
.v2-back-btn {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
}
.v2-back-btn:hover {
  background: rgba(0,196,74,.18) !important;
  border-color: var(--f5-jf-green) !important;
  color: var(--f5-jf-green) !important;
}


/* ──────────────────────────────────────────────────────────────
   12. FOOTER
   ────────────────────────────────────────────────────────────── */
.v2-footer, .site-foot {
  background: rgba(0,0,0,.45) !important;
  border-top: 1px solid var(--f5-glass-border) !important;
}
.v2-footer a { color: var(--f5-jf-gold) !important; }
.v2-footer p { color: var(--f5-ink-soft) !important; }


/* ──────────────────────────────────────────────────────────────
   13. GAME ENGINE UI
   ────────────────────────────────────────────────────────────── */
.game-arena {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-md) !important;
}
.game-msg {
  color: var(--f5-ink);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--f5-glass-border);
  border-radius: var(--f5-r-md);
  padding: 2rem 1.5rem;
  text-align: center;
}
.game-msg.err { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.1); }

.score-pill {
  background: linear-gradient(135deg, var(--f5-yellow), #f59e0b) !important;
  color: #15161c !important;
  border-radius: var(--f5-r-pill) !important;
  font-weight: 800 !important;
  box-shadow: var(--f5-glow-gold) !important;
}

.rules-drawer {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-md) !important;
  overflow: hidden;
}
.rules-drawer > summary {
  padding: .75rem 1rem;
  font-weight: 700;
  color: var(--f5-ink);
  cursor: pointer;
}
.rules-drawer > summary:hover { background: rgba(255,255,255,.04); }
.rules-body { padding: .75rem 1rem 1rem; }
.rules-section {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-sm) !important;
  margin-bottom: .5rem;
  padding: .7rem;
}
.rules-section strong { color: var(--f5-ink) !important; }
.rules-section p, .rules-section li { color: var(--f5-ink-soft); font-size: .95rem; }

/* BlockMaze */
.bm-palette, .pp-palette {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-md) !important;
}
.bm-block, .pp-block {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  border-radius: var(--f5-r-xs) !important;
  transition: transform 80ms cubic-bezier(.34,1.56,.64,1),
              background 80ms !important;
}
.bm-block:hover, .pp-block:hover {
  transform: scale(1.05) !important;
  background: rgba(255,255,255,.16) !important;
}
.bm-block[data-cat="move"]   { border-left: 3px solid var(--f5-blue)   !important; }
.bm-block[data-cat="loop"]   { border-left: 3px solid var(--f5-yellow) !important; }
.bm-block[data-cat="sensor"] { border-left: 3px solid var(--f5-green)  !important; }
.bm-block[data-cat="paint"]  { border-left: 3px solid var(--f5-pink)   !important; }

.bm-cell { border-color: var(--f5-glass-border) !important; }
.bm-cell.wall { background: rgba(139,92,246,.22) !important; }
.bm-cell.goal { background: rgba(52,211,153,.18) !important; }
.bm-cell.star { background: rgba(251,191,36,.18) !important; }

.bm-status {
  border-radius: var(--f5-r-pill) !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: .5rem 1.2rem !important;
}
.bm-status.ok {
  background: rgba(52,211,153,.18) !important;
  border: 1px solid var(--f5-green) !important;
  color: var(--f5-green) !important;
  box-shadow: var(--f5-glow-green) !important;
}
.bm-status.err {
  background: rgba(239,68,68,.18) !important;
  border: 1px solid #ef4444 !important;
  color: #fca5a5 !important;
}

/* Frog Pond */
.fp-cell.lily  { background: rgba(52,211,153,.1) !important; }
.fp-cell.water { background: rgba(96,165,250,.12) !important; }
.fp-cell.goal  { background: rgba(236,72,153,.12) !important; }

/* Treasure Hunt */
.th-cell.hot  { background: rgba(239,68,68,.2) !important; }
.th-cell.warm { background: rgba(251,191,36,.15) !important; }
.th-cell.cool { background: rgba(96,165,250,.12) !important; }
.th-cell.cold { background: rgba(100,116,139,.1) !important; }

/* Logic Lock */
.ll-fact {
  background: rgba(52,211,153,.15) !important;
  border: 1px solid var(--f5-green) !important;
  color: var(--f5-green) !important;
  border-radius: var(--f5-r-pill) !important;
}
.ll-rule {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-sm) !important;
  color: var(--f5-ink) !important;
}
.ll-rule.ready {
  border-color: var(--f5-purple) !important;
  background: rgba(139,92,246,.12) !important;
  box-shadow: var(--f5-glow-purple) !important;
}


/* ──────────────────────────────────────────────────────────────
   14. NSC / QUIZ COMPONENTS
   ────────────────────────────────────────────────────────────── */
.nsc-quiz-opt {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  transition: transform 80ms cubic-bezier(.34,1.56,.64,1),
              border-color var(--f5-t-sm), background var(--f5-t-sm) !important;
}
.nsc-quiz-opt:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: var(--f5-coral) !important;
  background: rgba(255,107,61,.1) !important;
}
.nsc-quiz-opt.is-correct {
  background: rgba(52,211,153,.18) !important;
  border-color: var(--f5-green) !important;
}
.nsc-quiz-opt.is-wrong {
  background: rgba(239,68,68,.16) !important;
  border-color: #ef4444 !important;
}
.nsc-quiz-bar { background: rgba(255,255,255,.1) !important; }
.nsc-quiz-bar-fill {
  background: linear-gradient(90deg, var(--f5-coral), var(--f5-purple)) !important;
}
.nsc-quiz-q { color: var(--f5-ink) !important; }
.nsc-quiz-feedback.is-good { border-left-color: var(--f5-green) !important; }
.nsc-quiz-feedback.is-bad  { border-left-color: #ef4444 !important; }

.nsc-unit {
  background: rgba(255,255,255,.05) !important;
  border-radius: var(--f5-r-sm) !important;
  border-left-color: var(--f5-purple) !important;
}
.nsc-unit-meta strong { color: var(--f5-ink) !important; }
.nsc-unit-tag { background: rgba(255,255,255,.1) !important; color: var(--f5-ink) !important; }
.nsc-unit-step {
  background: var(--f5-purple) !important;
  box-shadow: 0 4px 14px rgba(139,92,246,.4) !important;
}
.nsc-track-card h4 { color: var(--f5-ink) !important; }
.nsc-track-card p  { color: var(--f5-ink-soft) !important; }
.nsc-quiz-result { background: #1a1728 !important; border: 1px solid var(--f5-glass-border) !important; }
.nsc-quiz-score  { color: var(--f5-ink) !important; }


/* ──────────────────────────────────────────────────────────────
   15. LANDING / SECTION CARDS
   ────────────────────────────────────────────────────────────── */
.lc-section-card {
  transition: transform var(--f5-t-md) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) cubic-bezier(.22,1,.36,1) !important;
}
.lc-section-card:hover {
  transform: translateY(-7px) scale(1.02) !important;
  box-shadow: 0 36px 60px -12px rgba(0,0,0,.7) !important;
}
.lc-section-eci     { background: linear-gradient(135deg, #ff6b3d, #ec4899) !important; }
.lc-section-primary { background: linear-gradient(135deg, #7c5cf6, #2563eb) !important; }
.lc-section-chess   { background: linear-gradient(135deg, #fbbf24, #f97316) !important; color: #15161c !important; }
.lc-section-brain   { background: linear-gradient(135deg, #10b981, #0891b2) !important; }
.lc-section-card h3 { color: #fff !important; }
.lc-section-chess h3 { color: #15161c !important; }
.lc-section-cta {
  background: rgba(255,255,255,.92) !important;
  color: #15161c !important;
  font-weight: 800;
  border-radius: var(--f5-r-pill);
}
.landing-card {
  transition: transform var(--f5-t-md) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) cubic-bezier(.22,1,.36,1) !important;
}
.landing-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 30px 55px -10px rgba(0,0,0,.65) !important;
}
.landing-cta { background: rgba(255,255,255,.92) !important; color: #15161c !important; font-weight: 800; }


/* ──────────────────────────────────────────────────────────────
   16. TOTS (ECI) COMPONENTS
   ────────────────────────────────────────────────────────────── */
.tots-tile {
  box-shadow: 0 12px 0 rgba(0,0,0,.3), 0 18px 28px rgba(0,0,0,.35) !important;
  transition: transform var(--f5-t-sm) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) !important;
}
.tots-tile:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 0 rgba(0,0,0,.3), 0 24px 36px rgba(0,0,0,.4) !important;
}
.tots-cell {
  background: rgba(255,255,255,.07) !important;
  border: 2px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.22) !important;
  transition: transform var(--f5-t-sm) cubic-bezier(.34,1.56,.64,1) !important;
}
.tots-cell:hover {
  border-color: var(--f5-coral) !important;
  transform: translateY(-2px) scale(1.04) !important;
}
.tots-detail {
  background: #1a1728 !important;
  border: 2px solid var(--f5-coral) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), var(--f5-glow-coral) !important;
}
.tots-detail-word { color: var(--f5-coral) !important; }
.tots-story { background: #1a1728 !important; border-color: var(--f5-green) !important; }
.tots-story-text { color: var(--f5-ink) !important; }
.anansi-bubble { background: #1a1728 !important; border-color: var(--f5-coral) !important; color: var(--f5-ink) !important; }
.anansi-bubble::after { border-top-color: var(--f5-coral) !important; }


/* ──────────────────────────────────────────────────────────────
   17. FORMS & INPUTS
   ────────────────────────────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  border-radius: var(--f5-r-sm);
  transition: border-color var(--f5-t-sm), box-shadow var(--f5-t-sm) !important;
}
input::placeholder, textarea::placeholder { color: rgba(237,233,255,.3) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--f5-purple) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25) !important;
  outline: none !important;
}


/* ──────────────────────────────────────────────────────────────
   18. FAB BUTTONS
   ────────────────────────────────────────────────────────────── */
.dyk-fab, .lc-brain-fab, .lc-fab-toolbox, .lc-press-read-fab {
  box-shadow: var(--f5-glow-purple), 0 4px 0 rgba(0,0,0,.25) !important;
  transition: transform var(--f5-t-sm) cubic-bezier(.34,1.56,.64,1),
              box-shadow var(--f5-t-md) !important;
}
.dyk-fab:hover, .lc-brain-fab:hover, .lc-fab-toolbox:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 0 36px rgba(139,92,246,.55), 0 6px 0 rgba(0,0,0,.2) !important;
}


/* ──────────────────────────────────────────────────────────────
   19. CHESS PAGES
   ────────────────────────────────────────────────────────────── */
.v2-chess-status {
  background: linear-gradient(135deg, var(--f5-jf-green), var(--f5-jf-green-dk)) !important;
  box-shadow: var(--f5-glow-green) !important;
}
.v2-anansi-tip {
  background: rgba(251,191,36,.12) !important;
  border-left-color: var(--f5-yellow) !important;
  color: var(--f5-ink) !important;
}
.v2-lesson h3 { color: var(--f5-jf-green) !important; }
.v2-lesson p  { color: var(--f5-ink-soft) !important; }


/* ──────────────────────────────────────────────────────────────
   20. AI TUTOR INTERFACE
   ────────────────────────────────────────────────────────────── */
.ai-chat-wrap, .lc-brain-panel {
  background: #1a1728 !important;
  border: 1px solid var(--f5-glass-border) !important;
  border-radius: var(--f5-r-xl) !important;
  box-shadow: var(--f5-shadow-lg) !important;
}
.ai-bubble-user {
  background: linear-gradient(135deg, var(--f5-coral), #f43f5e) !important;
  color: #fff !important;
  border-radius: var(--f5-r-lg) var(--f5-r-xs) var(--f5-r-lg) var(--f5-r-lg) !important;
}
.ai-bubble-bot {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid var(--f5-glass-border) !important;
  color: var(--f5-ink) !important;
  border-radius: var(--f5-r-xs) var(--f5-r-lg) var(--f5-r-lg) var(--f5-r-lg) !important;
}
.ai-send-btn {
  background: linear-gradient(135deg, var(--f5-coral), #f43f5e) !important;
  color: #fff !important;
  box-shadow: var(--f5-glow-coral) !important;
  border-radius: var(--f5-r-pill) !important;
}
.ai-suggestion-chip {
  background: rgba(139,92,246,.15) !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  color: var(--f5-purple-lt) !important;
  border-radius: var(--f5-r-pill) !important;
  transition: background var(--f5-t-sm), transform 80ms cubic-bezier(.34,1.56,.64,1) !important;
}
.ai-suggestion-chip:hover {
  background: rgba(139,92,246,.28) !important;
  transform: translateY(-1px) !important;
}


/* ──────────────────────────────────────────────────────────────
   21. PROGRESS / PEP
   ────────────────────────────────────────────────────────────── */
.pep-card {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--f5-ink) !important;
}
.progress-bar, .bar-mini { background: rgba(255,255,255,.1) !important; }
.bar-mini > span { background: linear-gradient(90deg, var(--f5-jf-green), var(--f5-jf-gold)) !important; }
.dash-section-head, .class-section-h { color: var(--f5-ink) !important; }
.dash-assignments {
  background: var(--f5-glass-bg) !important;
  border-color: rgba(255,209,0,.35) !important;
}


/* ──────────────────────────────────────────────────────────────
   22. BOLD HOME (bh-*)
   ────────────────────────────────────────────────────────────── */
body.lc-bold-home { background: var(--f5-page) !important; }
.bh-stat-card, .bh-feat-card {
  background: var(--f5-glass-bg) !important;
  border: 1px solid var(--f5-glass-border) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--f5-ink) !important;
}
.bh-feat-card { transition: transform var(--f5-t-md) cubic-bezier(.34,1.56,.64,1) !important; }
.bh-feat-card:hover { transform: translateY(-4px) !important; }
.bh-section-head { color: var(--f5-ink) !important; }
.bh-section-sub  { color: var(--f5-ink-soft) !important; }


/* ──────────────────────────────────────────────────────────────
   23. PILLS, TAGS, EYEBROWS
   ────────────────────────────────────────────────────────────── */
.pill, .kg-eyebrow, .tag, .assign-tag,
.lc-land-eyebrow, .landing-eyebrow, .bh-hero-pill {
  background: rgba(255,255,255,.12) !important;
  color: var(--f5-ink) !important;
  border: 1px solid var(--f5-glass-border) !important;
}


/* ──────────────────────────────────────────────────────────────
   24. MICRO-ANIMATIONS
   ────────────────────────────────────────────────────────────── */
@keyframes f6-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes f6-pop {
  0%   { opacity: 0; transform: scale(.86); }
  65%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes f6-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Staggered card entrance */
.lc-land-cards .lc-section-card { animation: f6-fade-up .35s cubic-bezier(.22,1,.36,1) both; }
.lc-land-cards .lc-section-card:nth-child(1) { animation-delay:  0ms; }
.lc-land-cards .lc-section-card:nth-child(2) { animation-delay: 70ms; }
.lc-land-cards .lc-section-card:nth-child(3) { animation-delay:140ms; }
.lc-land-cards .lc-section-card:nth-child(4) { animation-delay:210ms; }

/* Inner shimmer on coloured tiles */
.v2-module::after,
.landing-card::after,
.lc-section-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}


/* ──────────────────────────────────────────────────────────────
   25. CLASS / TEACHER TABLE
   ────────────────────────────────────────────────────────────── */
.class-table-wrap {
  background: var(--f5-glass-bg) !important;
  border-color: var(--f5-glass-border) !important;
}
.class-table th {
  background: rgba(255,255,255,.04) !important;
  color: var(--f5-ink-soft) !important;
  border-bottom-color: var(--f5-glass-border) !important;
}
.class-table td {
  color: var(--f5-ink) !important;
  border-bottom-color: var(--f5-glass-border) !important;
}
.class-table tbody tr:hover { background: rgba(255,255,255,.04) !important; }
.assign-item {
  background: var(--f5-glass-bg) !important;
  border-left-color: var(--f5-jf-green) !important;
}
.assign-item.is-overdue { background: rgba(239,68,68,.1) !important; }


/* ──────────────────────────────────────────────────────────────
   26. RESPONSIVE & ACCESSIBILITY
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 480px) {
  .modal-card { border-radius: var(--f5-r-lg) !important; }
  /* Save GPU on low-end devices */
  .v2-module::after,
  .landing-card::after,
  .lc-section-card::after { display: none; }
}