:root{
  --purple:#6f42c1; --pink:#ff5fa2; --teal:#16a2a5; --bg:#f6f7fb;
}
body.bg-soft{background:var(--bg); font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.bg-pink{background:linear-gradient(135deg,var(--purple),var(--pink));}
.bg-teal{background:linear-gradient(135deg,var(--purple),var(--teal));}
.player-shell{background:#fff;border-radius:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.cute-card{background:#fff;border:1px solid #eef2f7;border-radius:1.25rem;box-shadow:0 6px 18px rgba(0,0,0,.04);}
.lesson-title{font-size:1.4rem;font-weight:900;}
.lesson-sub{font-size:1.05rem;}
.section-chip{display:inline-flex;gap:.5rem;background:#f1efff;border-radius:999px;padding:.25rem .6rem;font-size:.9rem;font-weight:800;}
.letter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:.5rem;}
.quiz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem;margin-top:.5rem;}
.opt{border:2px solid #e5e7eb;background:#fff;border-radius:1rem;padding:.6rem .8rem;font-weight:800;}
.opt.selected{border-color:var(--purple);background:#f3f0ff;}
.opt.correct{border-color:#16b364;background:#ecfdf3;}
.opt.wrong{border-color:#ff615a;background:#fff0ef;}
.write-blank{display:inline-block;border:2px dashed #cbd5e1;border-radius:1rem;padding:.6rem .8rem;font-weight:800;cursor:pointer;background:#f8fafc;}
.write-blank.done{border-style:solid;border-color:#16b364;background:#ecfdf3;}
.player-footer{position:sticky;bottom:0;background:#fff;border-top:1px solid #eef2f7;padding:.6rem;border-radius:0 0 1rem 1rem;}
.locked-pill{font-size:.8rem;font-weight:800;background:#fff7e6;border:1px solid #f5c26b;padding:.25rem .5rem;border-radius:999px;}
.section-list{display:flex;flex-direction:column;gap:.35rem;}
.section-item{background:#fff;border:1px solid #eef2f7;border-radius:.75rem;padding:.5rem .6rem;display:flex;justify-content:space-between;cursor:pointer;font-weight:800;}
.section-item.active{border-color:var(--purple);background:#f3f0ff;}
.small-muted{color:#6b7280;font-size:.9rem;font-weight:700;}
.star-badge{display:inline-flex;align-items:center;gap:.35rem;background:#fff4d6;border:1px solid #ffd08a;padding:.15rem .5rem;border-radius:999px;font-weight:900;}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;}
.confetti span{position:absolute;animation:fall 1.2s linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0;}}
.write-modal canvas{background:#fff;border:2px solid #e5e7eb;border-radius:1rem;touch-action:none;}
.progress-wrap{background:#fff;border:1px solid #eef2f7;border-radius:1rem;padding:1rem;}
.bg-purple{background:var(--purple)!important;}
/* v4 additions */
.profile-chip{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.4rem .6rem;border-radius:.75rem;background:#fff;border:1px solid #eef2f7;
  cursor:pointer;font-weight:800;
}
.profile-chip.active{border-color:#6366f1;background:#eef2ff;color:#3730a3;}
.profile-chip .tiny{font-size:.8rem;color:#6b7280;font-weight:700;}
.profile-list{display:flex;flex-direction:column;gap:.4rem;}

body.big-ui .btn, body.big-ui .opt, body.big-ui .write-blank{
  font-size:1.1rem !important; padding:.8rem 1rem !important;
}
body.big-ui .lesson-title{font-size:1.8rem}
body.big-ui .section-chip{font-size:1rem}

/* Certificate */
.certificate{
  background: radial-gradient(circle at top left,#fff 0%,#f8f6ff 55%,#f4fbff 100%);
  border:6px double #6f42c1;border-radius:1.5rem;padding:2rem;text-align:center;
}
.certificate h1{font-weight:900;font-size:2.2rem}
.certificate .name{font-size:2rem;font-weight:900;color:#ff5fa2}
.certificate .sig{margin-top:1.5rem;font-size:1.1rem;font-weight:800}
@media print{
  nav,.player-footer,.progress-wrap,.section-list,#soundBtn,#certificateBtn,#exportBtn,#resetBtn,#sizeBtn,#addProfileBtn{display:none!important;}
  body{background:white!important;}
  .certificate{box-shadow:none!important;margin:0!important;}
}

/* v5 additions */
.top-controls{
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
}
.toggle-btn{
  border:1px solid #e5e7eb;background:#fff;border-radius:999px;
  padding:.25rem .6rem;font-weight:800;font-size:.85rem;
}
.toggle-btn.active{background:#111827;color:white;border-color:#111827;}
body.dark-ui{background:#0b1020!important;color:#e5e7eb;}
body.dark-ui .player-shell, body.dark-ui .cute-card, body.dark-ui .progress-wrap,
body.dark-ui .section-item, body.dark-ui .profile-chip{background:#0f172a!important;color:#e5e7eb;border-color:#1f2937;}
body.dark-ui .section-chip{background:#111827;color:#e5e7eb;}
body.dark-ui .opt{background:#0b1020;color:#e5e7eb;border-color:#334155;}
body.dark-ui .opt.selected{background:#111827;border-color:#8b5cf6;}
body.dark-ui .write-blank{background:#0b1020;color:#e5e7eb;border-color:#475569;}
body.dark-ui nav.navbar{box-shadow:none;}
.hint-box{
  background:#f0f9ff;border:1px dashed #7dd3fc;padding:.6rem .8rem;border-radius:1rem;font-weight:700;
}
body.dark-ui .hint-box{background:#0b1a2b;border-color:#38bdf8;}

.score-pill{
  display:inline-flex;align-items:center;gap:.35rem;background:#ecfeff;border:1px solid #67e8f9;
  padding:.12rem .5rem;border-radius:999px;font-weight:900;
}
body.dark-ui .score-pill{background:#0b1a2b;border-color:#0ea5e9;}
.timer-ring{
  width:36px;height:36px;border-radius:999px;border:3px solid #e5e7eb;display:grid;place-items:center;font-weight:900;
}
.timer-ring.warn{border-color:#f59e0b;color:#f59e0b;}
.timer-ring.danger{border-color:#ef4444;color:#ef4444;}


/* v6 additions */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin-top:.6rem;}
.badge-card{background:#fff;border:1px solid #eef2f7;border-radius:1rem;padding:.7rem;text-align:center;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.04);}
.badge-card.locked{opacity:.45;filter:grayscale(1);}
.badge-emoji{font-size:2rem;line-height:1;}
.badge-name{margin-top:.25rem;font-size:.95rem;}
.badge-desc{font-size:.8rem;color:#6b7280;font-weight:700;margin-top:.1rem;}

.parent-pill{
  display:inline-flex;align-items:center;gap:.35rem;background:#fff7e6;border:1px solid #f5c26b;
  padding:.15rem .5rem;border-radius:999px;font-weight:900;font-size:.8rem;
}
.parent-lock{cursor:pointer;}

.section-complete{
  background:#f0fdf4;border:2px solid #86efac;border-radius:1.25rem;padding:1rem;text-align:center;
}
.section-complete h3{font-weight:900;}
.section-complete .big{font-size:1.2rem;font-weight:900;}
body.dark-ui .badge-card, body.dark-ui .section-complete{background:#0f172a;border-color:#1f2937;}


/* v7 additions */
.admin-shell{background:#fff;border:1px solid #eef2f7;border-radius:1.25rem;padding:1rem;box-shadow:0 6px 16px rgba(0,0,0,.05);}
.admin-shell textarea{width:100%;min-height:55vh;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;font-size:.9rem;}
.admin-help{font-size:.9rem;color:#6b7280;font-weight:700;}
.admin-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.exam-card{background:#fff;border:2px dashed #a78bfa;border-radius:1.25rem;padding:1rem;}
.exam-title{font-weight:900;font-size:1.3rem;}
.exam-q{font-weight:800;margin-top:.6rem;}
.exam-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin-top:.35rem;}
.exam-opts button{border:2px solid #e5e7eb;background:#fff;border-radius:1rem;padding:.55rem .7rem;font-weight:900;}
.exam-opts button.selected{border-color:#8b5cf6;background:#f3f0ff;}
.exam-opts button.correct{border-color:#16b364;background:#ecfdf3;}
.exam-opts button.wrong{border-color:#ff615a;background:#fff0ef;}
body.dark-ui .admin-shell, body.dark-ui .exam-card{background:#0f172a;border-color:#1f2937;color:#e5e7eb;}
body.dark-ui .exam-opts button{background:#0b1020;color:#e5e7eb;border-color:#334155;}
body.dark-ui .exam-opts button.selected{background:#111827;border-color:#8b5cf6;}

/* ===========================
   v8 Design Overhaul (2025)
   =========================== */
:root{
  --bbk-bg: radial-gradient(1200px 700px at 5% -10%, #ffe8f4 0%, transparent 55%),
            radial-gradient(900px 600px at 100% 0%, #e6f2ff 0%, transparent 55%),
            linear-gradient(180deg,#f7f8ff 0%,#f9fbff 40%,#ffffff 100%);
  --bbk-card:#ffffff;
  --bbk-ink:#0f172a;
  --bbk-muted:#64748b;
  --bbk-brand:#7c3aed;
  --bbk-brand-2:#22c55e;
  --bbk-brand-3:#06b6d4;
  --bbk-warning:#f59e0b;
  --bbk-danger:#ef4444;
  --bbk-radius: 1.3rem;
  --bbk-shadow: 0 18px 45px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.06);
  --bbk-shadow-soft: 0 8px 18px rgba(15,23,42,.06);
}

body.bg-soft{
  background: var(--bbk-bg)!important;
  color: var(--bbk-ink);
}
nav.navbar.bg-purple{
  background: linear-gradient(90deg,#6d28d9 0%,#8b5cf6 45%,#ec4899 100%)!important;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.navbar-brand{
  letter-spacing: .3px;
  font-weight: 900!important;
  text-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.player-shell{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85)!important;
  border: 1px solid #eef2f7!important;
  border-radius: calc(var(--bbk-radius) + .3rem)!important;
  box-shadow: var(--bbk-shadow)!important;
}
.cute-card, .progress-wrap{
  background: var(--bbk-card)!important;
  border-radius: var(--bbk-radius)!important;
  box-shadow: var(--bbk-shadow-soft)!important;
  border: 1px solid #f1f5f9!important;
}
.lesson-title{
  font-size: clamp(1.25rem,2.5vw,1.6rem)!important;
  font-weight: 900!important;
  line-height: 1.2;
}
.lesson-sub{
  font-size: clamp(1rem,2.1vw,1.08rem);
  color: var(--bbk-muted);
  font-weight: 700;
}
.section-chip{
  border-radius: 999px!important;
  background: linear-gradient(90deg,#ede9fe 0%,#eef2ff 100%)!important;
  border: 1px dashed #c4b5fd!important;
  color:#4c1d95!important;
}
.section-item{
  border-radius: 1rem!important;
  padding:.65rem .75rem!important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.section-item:hover{
  transform: translateY(-1px);
  box-shadow: var(--bbk-shadow-soft);
  background:#f8fafc;
}
.section-item.active{
  background: linear-gradient(90deg,#ede9fe 0%, #f0f9ff 100%)!important;
  border-color:#c4b5fd!important;
}
.profile-chip{
  border-radius: 1rem!important;
  background: #ffffff!important;
  box-shadow: var(--bbk-shadow-soft)!important;
  border:1px solid #eef2f7!important;
  transition: transform .12s ease;
}
.profile-chip:hover{ transform: translateY(-1px); }
.profile-chip.active{
  border-color:#8b5cf6!important;
  box-shadow: 0 8px 18px rgba(139,92,246,.22)!important;
}
.write-blank{
  border-radius: 999px!important;
  padding:.5rem .9rem!important;
  font-weight: 900!important;
  border:2px dashed #cbd5e1!important;
  background: #f8fafc!important;
}
.write-blank.done{
  border-style: solid!important;
  border-color:#22c55e!important;
  background: #ecfdf5!important;
}

.opt{
  border-radius: 1.1rem!important;
  padding:.7rem .9rem!important;
  font-size: clamp(.98rem,2.1vw,1.05rem)!important;
  font-weight: 900!important;
  box-shadow: 0 3px 0 rgba(0,0,0,.04);
  transition: transform .1s ease, background .12s ease, border .12s ease;
}
.opt:hover{ transform: translateY(-1px); }
.opt.selected{
  border-color:#8b5cf6!important;
  background:#f3f0ff!important;
}
.opt.correct{
  border-color:#16a34a!important;
  background:#ecfdf3!important;
}
.opt.wrong{
  border-color:#ef4444!important;
  background:#fff1f2!important;
}

.btn{
  border-radius: 999px!important;
  font-weight: 900!important;
  letter-spacing: .2px;
}
.btn-primary{
  background: linear-gradient(90deg,#7c3aed 0%,#8b5cf6 100%)!important;
  border: none!important;
  box-shadow: 0 8px 16px rgba(124,58,237,.25);
}
.btn-success{
  background: linear-gradient(90deg,#16a34a 0%,#22c55e 100%)!important;
  border: none!important;
  box-shadow: 0 8px 16px rgba(34,197,94,.25);
}
.btn-outline-dark, .btn-outline-primary, .btn-outline-info{
  border-width:2px!important;
}
.toggle-btn{
  box-shadow: var(--bbk-shadow-soft);
}

.progress{
  height: 16px!important;
  border-radius: 999px!important;
  background:#eef2f7!important;
}
.progress-bar{
  border-radius: 999px!important;
  background: linear-gradient(90deg,#22c55e 0%,#06b6d4 45%,#8b5cf6 100%)!important;
  font-weight:900;
}

.star-badge{
  background: linear-gradient(90deg,#fff7ed 0%,#fef9c3 100%)!important;
  border:1px solid #fde68a!important;
  color:#92400e!important;
}
.score-pill{
  background: linear-gradient(90deg,#ecfeff 0%,#e0f2fe 100%)!important;
  border:1px solid #67e8f9!important;
}

.certificate{
  border-radius: 1.3rem!important;
  background: linear-gradient(180deg,#ffffff 0%, #f8fafc 100%)!important;
  box-shadow: var(--bbk-shadow-soft)!important;
  border: 2px dashed #c4b5fd!important;
}

.badge-card{
  border-radius: 1.1rem!important;
  box-shadow: var(--bbk-shadow-soft)!important;
}

.exam-card{
  border-radius: 1.3rem!important;
  background: linear-gradient(180deg,#ffffff 0%, #f8fafc 100%)!important;
  box-shadow: var(--bbk-shadow-soft)!important;
}
.exam-opts button{
  border-radius: 1.1rem!important;
  box-shadow: 0 3px 0 rgba(0,0,0,.04);
}

/* Smooth page transitions */
#playerMount{ animation: bbkFade .18s ease; }
@keyframes bbkFade{ from{opacity:.5; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* Floating mascot bubble (optional) */
.mascot-bubble{
  position: fixed; bottom: 18px; right: 18px; z-index: 9999;
  background: #fff; border:1px solid #eef2f7; border-radius: 999px;
  padding:.45rem .7rem; font-weight:900; box-shadow: var(--bbk-shadow-soft);
  display:flex; align-items:center; gap:.45rem;
}
.mascot-face{font-size:1.35rem; line-height:1;}
.mascot-text{font-size:.9rem;}

body.dark-ui{
  background: radial-gradient(1200px 700px at 5% -10%, #1b1b2f 0%, transparent 55%),
              radial-gradient(900px 600px at 100% 0%, #0b2a3a 0%, transparent 55%),
              linear-gradient(180deg,#050814 0%,#0b1020 45%,#0a1026 100%)!important;
  color:#e5e7eb;
}
body.dark-ui .player-shell{
  background: rgba(15,23,42,.9)!important;
  border-color:#1f2937!important;
}
body.dark-ui .cute-card, body.dark-ui .progress-wrap, body.dark-ui .profile-chip,
body.dark-ui .section-item, body.dark-ui .certificate, body.dark-ui .exam-card, body.dark-ui .badge-card,
body.dark-ui .admin-shell{
  background:#0f172a!important;border-color:#1f2937!important;color:#e5e7eb!important;
}
body.dark-ui .lesson-sub{color:#9ca3af;}
body.dark-ui .write-blank{background:#0b1020!important;border-color:#334155!important;}
body.dark-ui .opt{background:#0b1020!important;border-color:#334155!important;}
body.dark-ui .mascot-bubble{background:#0f172a;border-color:#1f2937;color:#e5e7eb;}

/* ===========================
   v9 Themes + Rewards Design
   =========================== */
:root{
  --theme-name: "default";
  --theme-bg: var(--bbk-bg);
  --theme-accent: var(--bbk-brand);
  --theme-accent-2: var(--bbk-brand-2);
  --theme-accent-3: var(--bbk-brand-3);
}

/* Theme palettes */
body.theme-space{
  --theme-name: "space";
  --theme-bg:
    radial-gradient(900px 600px at 10% -10%, #2b1b7a 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 0%, #0ea5e9 0%, transparent 55%),
    linear-gradient(180deg,#060818 0%,#0e1230 55%,#0b1026 100%);
  --theme-accent:#a78bfa;
  --theme-accent-2:#22c55e;
  --theme-accent-3:#38bdf8;
}
body.theme-jungle{
  --theme-name: "jungle";
  --theme-bg:
    radial-gradient(1200px 700px at 5% -10%, #dcfce7 0%, transparent 55%),
    radial-gradient(900px 600px at 100% 0%, #fef9c3 0%, transparent 55%),
    linear-gradient(180deg,#f0fdf4 0%,#ffffff 60%,#ffffff 100%);
  --theme-accent:#16a34a;
  --theme-accent-2:#22c55e;
  --theme-accent-3:#f59e0b;
}
body.theme-ocean{
  --theme-name: "ocean";
  --theme-bg:
    radial-gradient(1200px 700px at 5% -10%, #e0f2fe 0%, transparent 55%),
    radial-gradient(900px 600px at 100% 0%, #cffafe 0%, transparent 55%),
    linear-gradient(180deg,#ecfeff 0%,#ffffff 60%,#ffffff 100%);
  --theme-accent:#06b6d4;
  --theme-accent-2:#0ea5e9;
  --theme-accent-3:#8b5cf6;
}

/* Use theme vars */
body.bg-soft{ background: var(--theme-bg)!important; }
.btn-primary{
  background: linear-gradient(90deg,var(--theme-accent) 0%, color-mix(in srgb, var(--theme-accent) 65%, #ffffff) 100%)!important;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}
.progress-bar{
  background: linear-gradient(90deg,var(--theme-accent-2) 0%,var(--theme-accent-3) 45%,var(--theme-accent) 100%)!important;
}
.section-item.active{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--theme-accent) 10%, #ffffff) 0%,
    color-mix(in srgb, var(--theme-accent-3) 10%, #ffffff) 100%)!important;
}

/* Theme selector */
.theme-chip{
  border:1px solid #e5e7eb;background:#fff;border-radius:999px;
  padding:.22rem .55rem;font-weight:900;font-size:.8rem;cursor:pointer;
  box-shadow: var(--bbk-shadow-soft);
}
.theme-chip.active{border-color:var(--theme-accent);}

.home-hero{
  background: rgba(255,255,255,.9);
  border:1px solid #eef2f7;border-radius:1.5rem;box-shadow:var(--bbk-shadow);
  padding:1.2rem 1.2rem;
}
.home-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem;
}
.home-tile{
  background:#fff;border:1px solid #eef2f7;border-radius:1.3rem;padding:1rem;
  box-shadow:var(--bbk-shadow-soft);display:flex;flex-direction:column;gap:.6rem;
  transition:transform .12s ease, box-shadow .12s ease;
}
.home-tile:hover{transform:translateY(-2px);box-shadow:var(--bbk-shadow);}
.home-tile .tile-icon{font-size:2rem;}
.home-tile .tile-title{font-weight:900;font-size:1.2rem;}
.home-tile .tile-sub{color:var(--bbk-muted);font-weight:700;}

.rewards-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:.8rem;
}
.reward-card{
  background:#fff;border:1px solid #eef2f7;border-radius:1.2rem;padding:.8rem;text-align:center;
  box-shadow:var(--bbk-shadow-soft);font-weight:900;
}
.reward-card.locked{opacity:.5;filter:grayscale(1);}
.reward-emoji{font-size:2.2rem;line-height:1;}
.reward-price{display:inline-flex;gap:.25rem;align-items:center;background:#fff7ed;border:1px solid #fde68a;
  padding:.12rem .45rem;border-radius:999px;font-size:.8rem;font-weight:900;margin-top:.25rem;}
.reward-btn{margin-top:.5rem;}
body.dark-ui .home-hero, body.dark-ui .home-tile, body.dark-ui .reward-card{
  background:#0f172a;border-color:#1f2937;color:#e5e7eb;
}

/* ===========================
   v10 Avatars + XP Design
   =========================== */
.xp-wrap{
  background:#fff;border:1px solid #eef2f7;border-radius:999px;padding:.25rem .35rem;
  display:flex;align-items:center;gap:.5rem;box-shadow:var(--bbk-shadow-soft);
}
.xp-bar{
  flex:1;height:10px;background:#eef2f7;border-radius:999px;overflow:hidden;
}
.xp-fill{
  height:100%;background:linear-gradient(90deg,var(--theme-accent-2),var(--theme-accent-3),var(--theme-accent));
  width:0%;
}
.level-pill{
  font-weight:900;font-size:.8rem;background:#fef3c7;border:1px solid #fde68a;
  padding:.12rem .45rem;border-radius:999px;
}
body.dark-ui .xp-wrap{background:#0f172a;border-color:#1f2937;}

.avatar-chip{
  display:flex;align-items:center;gap:.5rem;font-weight:900;
}
.avatar-emoji{
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;font-size:1.4rem;
  background:linear-gradient(180deg,#fff, #f8fafc);border:1px solid #eef2f7;box-shadow:var(--bbk-shadow-soft);
}
body.dark-ui .avatar-emoji{background:#0b1020;border-color:#334155;}

.avatar-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.6rem;
}
.avatar-option{
  background:#fff;border:2px solid #eef2f7;border-radius:1rem;padding:.4rem;display:grid;place-items:center;
  font-size:1.6rem;cursor:pointer;font-weight:900;transition:transform .1s ease,border .1s ease;
}
.avatar-option:hover{transform:translateY(-2px);border-color:var(--theme-accent);}
.avatar-option.active{border-color:var(--theme-accent);background:color-mix(in srgb, var(--theme-accent) 8%, #fff);}

.music-chip{
  border:1px solid #e5e7eb;background:#fff;border-radius:999px;
  padding:.22rem .55rem;font-weight:900;font-size:.8rem;cursor:pointer;
  box-shadow: var(--bbk-shadow-soft);
}
.music-chip.active{border-color:var(--theme-accent);}

.hero-sparkle{
  position:relative;overflow:hidden;
}
.hero-sparkle::after{
  content:"";position:absolute;inset:-40% -20%;
  background:radial-gradient(120px 120px at 10% 20%, rgba(255,255,255,.9), transparent 60%),
             radial-gradient(160px 160px at 80% 10%, rgba(255,255,255,.8), transparent 65%),
             radial-gradient(140px 140px at 60% 80%, rgba(255,255,255,.7), transparent 60%);
  animation: sparkleFloat 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sparkleFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-6%) rotate(2deg);}
}

/* ===========================
   v11 Parent Analytics + Polish
   =========================== */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin-top:.8rem;
}
.stat-card{
  background:#fff;border:1px solid #eef2f7;border-radius:1.2rem;padding:.9rem;
  box-shadow:var(--bbk-shadow-soft);display:flex;flex-direction:column;gap:.25rem;
}
.stat-title{font-weight:900;color:var(--bbk-muted);font-size:.9rem;}
.stat-value{font-weight:900;font-size:1.5rem;line-height:1;}
.stat-sub{font-weight:800;font-size:.85rem;color:var(--bbk-muted);}

.chart-card{
  background:#fff;border:1px solid #eef2f7;border-radius:1.2rem;padding:1rem;margin-top:1rem;
  box-shadow:var(--bbk-shadow-soft);
}
.chart-title{font-weight:900;font-size:1.1rem;margin-bottom:.5rem;}
.chart-wrap{width:100%;overflow:auto;}
canvas.analytics{
  width:100%!important;max-height:320px;
}

.kpi-pill{
  display:inline-flex;align-items:center;gap:.35rem;background:#f8fafc;border:1px solid #eef2f7;
  padding:.18rem .55rem;border-radius:999px;font-weight:900;font-size:.85rem;
}

.footer-shell{
  position:sticky;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-top:1px solid #eef2f7;box-shadow:0 -8px 18px rgba(15,23,42,.06);
}

.home-tile .tile-cta{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;
}

.glow-border{
  border:2px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--theme-accent),var(--theme-accent-3),var(--theme-accent-2)) border-box!important;
}

.btn-fancy{
  background: linear-gradient(90deg,var(--theme-accent) 0%,var(--theme-accent-3) 100%)!important;
  color:white!important;border:none!important;box-shadow:0 10px 18px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

@keyframes popIn{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
.stat-card,.chart-card,.home-tile{animation:popIn .18s ease;}
body.dark-ui .stat-card, body.dark-ui .chart-card{background:#0f172a;border-color:#1f2937;color:#e5e7eb;}

/* ===========================
   v12 Home Redesign + Palette
   =========================== */
:root{
  --home-bg:
    radial-gradient(900px 600px at 0% -10%, #fff1f8 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, #e0fbff 0%, transparent 60%),
    radial-gradient(1100px 800px at 50% 110%, #fef3c7 0%, transparent 60%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 55%,#ffffff 100%);
  --home-ink:#0f172a;
  --home-muted:#475569;
  --home-card:#ffffff;
  --home-accent:#ff7ab6;
  --home-accent-2:#7c3aed;
  --home-accent-3:#06b6d4;
  --home-radius:1.6rem;
}

body.home{
  background: var(--home-bg)!important;
  color: var(--home-ink);
}

.home-shell{
  max-width:1100px;margin:0 auto;
}

.home-header{
  background: linear-gradient(135deg,#ffffff 0%, #fff7fb 35%, #f0f9ff 100%);
  border:1px solid #eef2f7;border-radius:var(--home-radius);
  padding:1.2rem 1.2rem; box-shadow: var(--bbk-shadow);
  position:relative; overflow:hidden;
}
.home-header .logo{
  font-weight:1000; font-size: clamp(1.7rem,4.5vw,2.4rem); letter-spacing:.4px;
}
.home-header .subtitle{
  font-weight:800; color:var(--home-muted); font-size: clamp(.95rem,2.5vw,1.07rem);
}
.home-header .soft-bubbles{
  position:absolute; inset:-20% -10%; pointer-events:none; opacity:.7;
  background:
    radial-gradient(120px 120px at 12% 30%, rgba(255,122,182,.20), transparent 60%),
    radial-gradient(180px 180px at 88% 18%, rgba(6,182,212,.18), transparent 65%),
    radial-gradient(140px 140px at 55% 85%, rgba(124,58,237,.16), transparent 62%);
  animation: bubblesFloat 10s ease-in-out infinite;
}
@keyframes bubblesFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4%);}
}

.home-actions{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.home-chip{
  border:1px solid #e2e8f0;background:#fff;border-radius:999px;
  padding:.28rem .65rem;font-weight:900;font-size:.85rem;cursor:pointer;
  box-shadow: var(--bbk-shadow-soft); user-select:none;
}
.home-chip.active{border-color:var(--home-accent-2);}

.home-grid{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.home-card{
  background:var(--home-card);
  border:1px solid #eef2f7; border-radius:1.35rem; padding:1rem;
  box-shadow: var(--bbk-shadow-soft);
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .12s ease, box-shadow .12s ease;
  min-height: 220px;
}
.home-card:hover{transform:translateY(-3px); box-shadow: var(--bbk-shadow);}
.home-card .icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-size:1.9rem; background: #f8fafc; border:1px solid #eef2f7;
}
.home-card .title{font-weight:1000; font-size:1.2rem;}
.home-card .desc{font-weight:800; color:var(--home-muted); font-size:.98rem;}
.home-card .cta-row{margin-top:auto; display:flex; gap:.45rem; flex-wrap:wrap;}
.home-card .btn{
  padding:.55rem .9rem!important;
}

/* extra friendly gradients per tile */
.home-card.age4{background:linear-gradient(180deg,#ffffff 0%, #f5f3ff 100%);}
.home-card.age5{background:linear-gradient(180deg,#ffffff 0%, #ecfeff 100%);}
.home-card.shop{background:linear-gradient(180deg,#ffffff 0%, #fff7ed 100%);}
.home-card.admin{background:linear-gradient(180deg,#ffffff 0%, #f0fdf4 100%);}
.home-card.analytics{background:linear-gradient(180deg,#ffffff 0%, #fdf4ff 100%);}

/* Footer quick bar */
.home-footer{
  margin-top:1rem; background:#fff;border:1px solid #eef2f7;border-radius:999px;
  padding:.6rem .8rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  box-shadow: var(--bbk-shadow-soft); font-weight:900;
}
.home-footer .tiny{font-size:.85rem;color:var(--home-muted);font-weight:800;}

/* Super responsive tweaks */
@media (max-width: 576px){
  .home-header{padding:1rem;}
  .home-card{min-height: 200px;}
  .home-grid{grid-template-columns:1fr;}
  .home-footer{flex-direction:column; align-items:flex-start; border-radius:1rem;}
}

/* Dark mode on homepage */
body.dark-ui.home{
  background:
    radial-gradient(900px 600px at 0% -10%, #2a0f33 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, #082a38 0%, transparent 60%),
    radial-gradient(1100px 800px at 50% 110%, #1f2a0e 0%, transparent 60%),
    linear-gradient(180deg,#050814 0%,#0b1020 45%,#0a1026 100%)!important;
  color:#e5e7eb;
}
body.dark-ui.home .home-header,
body.dark-ui.home .home-card,
body.dark-ui.home .home-footer{
  background:#0f172a!important;border-color:#1f2937!important;color:#e5e7eb!important;
}
body.dark-ui.home .home-card .icon{background:#0b1020;border-color:#334155;}
body.dark-ui.home .subtitle,
body.dark-ui.home .desc,
body.dark-ui.home .tiny{color:#9ca3af;}

/* ===========================
   v13 Home Pattern + Kid Quiz UX
   =========================== */

/* New pastel-wave home background */
:root{
  --home-bg-v13:
    radial-gradient(900px 600px at 5% 0%, #e7f8ff 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #ffe6f2 0%, transparent 60%),
    radial-gradient(1000px 700px at 50% 100%, #e9ffe8 0%, transparent 60%),
    linear-gradient(180deg,#f7fbff 0%,#ffffff 58%,#ffffff 100%);
  --home-accent-v13:#5b8cff;
  --home-accent2-v13:#ff7ab6;
  --home-accent3-v13:#22c55e;
}
body.home{ background: var(--home-bg-v13)!important; }

/* Ribbon style header */
.home-header{
  background:
    linear-gradient(135deg, #ffffff 0%, #f3f8ff 35%, #fff0f7 100%)!important;
  border-radius: 1.8rem!important;
}
.home-header .logo{
  background: linear-gradient(90deg,var(--home-accent-v13),var(--home-accent2-v13));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* New card pattern */
.home-card{
  border-radius:1.55rem!important;
  border:2px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(91,140,255,.6), rgba(255,122,182,.6), rgba(34,197,94,.6)) border-box!important;
}
.home-card .icon{
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  border-radius:18px!important;
}
.home-card .btn-primary{
  background: linear-gradient(90deg,var(--home-accent-v13),var(--home-accent2-v13))!important;
}

/* Kid-friendly quiz options as big tap cards */
.quiz-options{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  gap:.7rem!important;
}
.opt{
  min-height:64px;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size: clamp(1.05rem,2.5vw,1.2rem)!important;
  font-weight:1000!important;
  border-width:3px!important;
  background:#ffffff!important;
  position:relative;
}
.opt::after{
  content:"Tap";
  position:absolute; top:6px; right:10px;
  font-size:.7rem; font-weight:1000; opacity:.35;
}
.opt.selected{
  background:linear-gradient(180deg,#f3f0ff,#ffffff)!important;
  transform: translateY(-2px);
}
.opt.correct{
  animation: correctPop .35s ease;
}
@keyframes correctPop{
  0%{transform:scale(.95);}
  60%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

/* Hint bubble */
.hint-bubble{
  background:#fff7ed;border:2px dashed #fde68a;border-radius:1.2rem;
  padding:.6rem .8rem;font-weight:900;color:#92400e;display:none;
}
.hint-bubble.show{display:block; animation:bbkFade .18s ease;}
.hint-btn{
  border-radius:999px!important;font-weight:1000!important;
}

/* Big "Check Answer" sticky bar for kids */
.kid-checkbar{
  position:sticky; bottom:0; z-index:30;
  background:rgba(255,255,255,.97); backdrop-filter:blur(5px);
  border:1px solid #eef2f7; border-radius:1rem; padding:.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  box-shadow:0 -6px 16px rgba(0,0,0,.06);
}
body.dark-ui .kid-checkbar{background:rgba(15,23,42,.95);border-color:#1f2937;}

.kid-checkbar .bigbtn{
  font-size:1.05rem!important; padding:.7rem 1.2rem!important;
}

/* ===========================
   v14 Picture Questions + Fill Gaps + Recorder
   =========================== */
.pic-wrap{
  display:flex;justify-content:center;align-items:center;margin:.5rem 0 1rem 0;
}
.pic{
  width:min(320px,100%);aspect-ratio:1/1;border-radius:1.2rem;
  background:#fff;border:2px dashed #e5e7eb;box-shadow:var(--bbk-shadow-soft);
  display:grid;place-items:center;overflow:hidden;
}
.pic img{width:100%;height:100%;object-fit:contain;}
.pic .fallback-emoji{font-size:4rem;line-height:1;}
.pic-caption{font-weight:900;text-align:center;color:var(--bbk-muted);margin-top:.35rem;}

.fill-gap{
  background:#f8fafc;border:2px dashed #cbd5e1;border-radius:999px;
  padding:.6rem .9rem;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:1000;font-size:1.1rem;cursor:text;
}
.fill-gap input{
  border:none;outline:none;background:transparent;font-weight:1000;min-width:120px;
  font-size:1.1rem;
}
.fill-gap.correct{border-style:solid;border-color:#22c55e;background:#ecfdf5;}
.fill-gap.wrong{border-style:solid;border-color:#ef4444;background:#fff1f2;}
.fill-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem;}

.recorder{
  margin-top:.8rem;background:#fff;border:1px solid #eef2f7;border-radius:1.1rem;
  padding:.7rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  box-shadow:var(--bbk-shadow-soft);
}
.rec-btn{
  border-radius:999px;font-weight:1000;padding:.5rem .9rem;border:2px solid #e5e7eb;background:#fff;
}
.rec-btn.recording{border-color:#ef4444;background:#fff1f2;}
.rec-meter{
  height:8px;width:140px;background:#eef2f7;border-radius:999px;overflow:hidden;
}
.rec-fill{
  height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#06b6d4,#8b5cf6);
}
.example-chip{
  display:inline-flex;gap:.4rem;align-items:center;padding:.3rem .6rem;border-radius:999px;
  background:#f1f5f9;border:1px solid #e2e8f0;font-weight:900;margin:.2rem .25rem 0 0;
}
body.dark-ui .pic, body.dark-ui .recorder{background:#0f172a;border-color:#1f2937;}
body.dark-ui .fill-gap{background:#0b1020;border-color:#334155;}
body.dark-ui .example-chip{background:#0b1020;border-color:#334155;color:#e5e7eb;}

/* ===========================
   v15 Multi-Books Home + Game UI
   =========================== */

/* Home "storybook" pattern */
:root{
  --home-bg-v15:
    radial-gradient(1000px 650px at 10% -5%, #fff7d6 0%, transparent 58%),
    radial-gradient(1000px 650px at 100% 0%, #e9f7ff 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 110%, #fce7f3 0%, transparent 60%),
    linear-gradient(180deg,#fbfdff 0%, #ffffff 60%, #ffffff 100%);
}
body.home{ background: var(--home-bg-v15)!important; }

.bookhub-grid{
  display:grid;gap:1rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.book-card{
  background:#fff;border:2px solid transparent;border-radius:1.6rem;padding:1rem;
  box-shadow:var(--bbk-shadow-soft);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(34,197,94,.5), rgba(6,182,212,.5), rgba(139,92,246,.5)) border-box;
  display:flex;flex-direction:column;gap:.6rem;min-height:220px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.book-card:hover{transform:translateY(-3px);box-shadow:var(--bbk-shadow);}
.book-card .book-icon{font-size:2rem;}
.book-card .book-title{font-weight:1000;font-size:1.15rem;}
.book-card .book-age{font-weight:900;color:var(--bbk-muted);}
.book-card .book-desc{font-weight:800;color:var(--bbk-muted);}
.book-card .cta-row{margin-top:auto;display:flex;gap:.45rem;flex-wrap:wrap;}

.game-shell{
  max-width:900px;margin:0 auto;
}
.game-card{
  background:#fff;border:1px solid #eef2f7;border-radius:1.4rem;padding:1rem;
  box-shadow:var(--bbk-shadow-soft);
}
.game-question{
  font-weight:1000;font-size:clamp(1.2rem,3vw,1.5rem);text-align:center;
}
.game-board{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem;margin-top:1rem;
}
.game-item{
  background:#fff;border:2px dashed #e5e7eb;border-radius:1.2rem;padding:.7rem;
  display:grid;place-items:center;font-size:2rem;cursor:pointer;user-select:none;
  transition:transform .1s ease,border .1s ease,background .1s ease;
}
.game-item:hover{transform:translateY(-2px);border-color:var(--theme-accent);}
.game-item.correct{border-style:solid;border-color:#22c55e;background:#ecfdf5;}
.game-item.wrong{border-style:solid;border-color:#ef4444;background:#fff1f2;}
.game-cta{display:flex;justify-content:center;gap:.6rem;margin-top:1rem;flex-wrap:wrap;}