/* =========================================================
   Likkle Coders — Activity Module Styles
   One file covering all 6 new interactive features so the
   service-worker shell list stays simple. Each block is
   self-contained and uses BEM-ish class names with a single
   namespace prefix per feature.
   ========================================================= */

/* ---------- Shared activity page chrome ---------- */
.lc-activity-shell{
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem 0 4rem;
}
.lc-activity-shell h2{ margin: .25rem 0 .5rem; }
.lc-activity-shell .eyebrow{
  display: inline-block;
  font-size: .76rem; font-weight: 800; letter-spacing: .08em;
  color: var(--bh-purple, #4B2DDB);
  background: rgba(75,45,219,.08);
  padding: .25rem .6rem; border-radius: 999px;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

/* =========================================================
   AVATAR LEVELS — .lc-avx-*
   ========================================================= */
.lc-avx{
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(75,45,219,.06);
  border: 2px solid rgba(75,45,219,.18);
}
.lc-avx--sm{ width: 36px; height: 36px; font-size: 1.1rem; }
.lc-avx--md{ width: 56px; height: 56px; font-size: 1.7rem; }
.lc-avx--lg{ width: 88px; height: 88px; font-size: 2.6rem; }
.lc-avx-face{ line-height: 1; }
.lc-avx-badge{
  position: absolute;
  right: -4px; bottom: -4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--bh-lime, #DDFF00);
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: .9rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.lc-avx--lg .lc-avx-badge{ width: 30px; height: 30px; font-size: 1.2rem; }
.lc-avx--glow-soft{ box-shadow: 0 0 0 4px rgba(221,255,0,.45); }
.lc-avx--glow-strong{
  box-shadow: 0 0 0 4px rgba(255,209,0,.6), 0 0 18px 4px rgba(255,209,0,.4);
  animation: lcAvxGlow 2.4s ease-in-out infinite;
}
@keyframes lcAvxGlow{
  0%,100%{ box-shadow: 0 0 0 4px rgba(255,209,0,.6), 0 0 18px 4px rgba(255,209,0,.4); }
  50%    { box-shadow: 0 0 0 4px rgba(255,209,0,.85), 0 0 24px 6px rgba(255,209,0,.65); }
}

.lc-avx-prog{
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  padding: .9rem 1rem;
}
.lc-avx-prog-head,
.lc-avx-prog-foot{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .9rem;
  gap: .6rem; flex-wrap: wrap;
}
.lc-avx-prog-head{ margin-bottom: .45rem; }
.lc-avx-prog-foot{ margin-top: .45rem; color: var(--c-ink-soft, #475569); }
.lc-avx-prog-bar{
  height: 10px; border-radius: 999px;
  background: rgba(75,45,219,.10); overflow: hidden;
}
.lc-avx-prog-fill{
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--bh-purple, #6849F0), var(--bh-pink, #FF6BD0));
  transition: width .35s ease;
}
.lc-avx-prog--max{
  background: linear-gradient(135deg, rgba(255,209,0,.15), rgba(221,255,0,.18));
  border-color: rgba(255,209,0,.5);
  padding: 1rem; display: grid; gap: .25rem;
}

/* =========================================================
   PATOIS MATCH — .lc-pm-*
   ========================================================= */
.lc-pm{ display: grid; gap: 1rem; }
.lc-pm-head{ display: grid; gap: .35rem; }
.lc-pm-stats{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.lc-pm-stat{ font-size: .9rem; }
.lc-pm-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}
@media (min-width: 540px){
  .lc-pm-grid{ grid-template-columns: repeat(4, 1fr); gap: .8rem; }
}
.lc-pm-card{
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
  perspective: 800px;
}
.lc-pm-card-back,
.lc-pm-card-face{
  position: absolute; inset: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  backface-visibility: hidden;
  transition: transform .35s ease;
  padding: .5rem;
  text-align: center;
}
.lc-pm-card-back{
  background: linear-gradient(135deg, var(--bh-purple, #6849F0), var(--bh-pink, #FF6BD0));
  color: #fff;
  font-size: 2.2rem; font-weight: 800;
  box-shadow: 0 6px 16px -8px rgba(75,45,219,.45);
}
.lc-pm-card-face{
  background: #fff;
  border: 2px solid rgba(75,45,219,.18);
  transform: rotateY(180deg);
  display: grid; gap: .25rem; align-content: center;
}
.lc-pm-card-lang{
  font-size: .65rem; font-weight: 800; letter-spacing: .06em;
  color: var(--bh-purple, #4B2DDB); text-transform: uppercase;
}
.lc-pm-card-text{
  font-family: var(--f-display);
  font-size: .92rem; font-weight: 700;
  color: var(--c-ink, #15131c);
  line-height: 1.25;
}
.lc-pm-card--open .lc-pm-card-back{ transform: rotateY(180deg); }
.lc-pm-card--open .lc-pm-card-face{ transform: rotateY(0deg); }
.lc-pm-card--matched .lc-pm-card-face{
  border-color: var(--jf-green, #009B3A);
  background: rgba(0,155,58,.08);
  animation: lcPmPop .35s ease;
}
@keyframes lcPmPop{
  0%   { transform: rotateY(0deg) scale(1); }
  40%  { transform: rotateY(0deg) scale(1.07); }
  100% { transform: rotateY(0deg) scale(1); }
}
.lc-pm-win{
  background: linear-gradient(135deg, rgba(0,155,58,.10), rgba(255,209,0,.12));
  border: 2px solid rgba(0,155,58,.45);
  border-radius: 16px;
  padding: 1.2rem;
  text-align: center;
}
.lc-pm-win h3{ margin: 0 0 .25rem; }

/* =========================================================
   DAILY STORY — .lc-story-*
   ========================================================= */
.lc-story{
  display: grid; gap: 1rem;
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: 0 6px 18px -10px rgba(15,23,42,.15);
}
.lc-story-head{ display: grid; gap: .35rem; }
.lc-story-tag{
  align-self: start;
  font-size: .75rem; font-weight: 800;
  background: rgba(255,107,208,.12); color: var(--bh-pink-dk, #E94CB8);
  padding: .25rem .55rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .06em;
}
.lc-story-page{
  background: linear-gradient(180deg, rgba(75,45,219,.04), rgba(255,107,208,.05));
  border: 1px solid rgba(75,45,219,.10);
  border-radius: 14px;
  padding: 1.2rem; display: grid; gap: .6rem;
  text-align: center;
}
.lc-story-hero{ font-size: 4.5rem; line-height: 1; }
.lc-story-page p{
  font-size: 1.05rem; line-height: 1.6;
  text-align: left; margin: 0;
}
.lc-story-page-n{
  font-size: .8rem; color: var(--c-ink-soft, #475569);
  text-align: right;
}
.lc-story-nav{
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.lc-story-dots{ display: flex; gap: .4rem; align-items: center; }
.lc-story-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(75,45,219,.18);
}
.lc-story-dot.is-on{ background: var(--bh-purple, #6849F0); width: 12px; }
.lc-story-dot--q{
  width: auto; height: auto; padding: 0 .35rem;
  border-radius: 6px; font-size: .7rem; font-weight: 800;
  background: rgba(255,209,0,.25); color: #6b5500;
}
.lc-story-dot--q.is-on{ background: var(--jf-gold, #FFD100); color: #000; }
.lc-story-q{
  background: rgba(255,209,0,.08);
  border: 1px solid rgba(255,209,0,.45);
  border-radius: 14px;
  padding: 1rem 1.1rem; display: grid; gap: .6rem;
}
.lc-story-q h3{ margin: 0; }
.lc-story-q-opts{ display: grid; gap: .45rem; }
.lc-story-opt{
  text-align: left; padding: .65rem .85rem;
  background: #fff; border: 1.5px solid var(--c-line, #e2e8f0);
  border-radius: 12px; font-weight: 600; cursor: pointer;
}
.lc-story-opt:hover{ border-color: var(--bh-purple, #6849F0); }
.lc-story-opt--right{
  background: rgba(0,155,58,.10); border-color: var(--jf-green, #009B3A);
}
.lc-story-opt--wrong{
  background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.55);
}
.lc-story-q-fb{
  background: #fff; border: 1px dashed rgba(75,45,219,.25);
  border-radius: 10px; padding: .7rem .9rem; font-size: .95rem;
}
.lc-story-q-done{
  margin-top: .5rem; font-weight: 700; color: var(--jf-green, #009B3A);
}

/* =========================================================
   PARISH MAP — .lc-parish-*
   ========================================================= */
.lc-parish{ display: grid; gap: 1rem; }
.lc-parish-head{ display: grid; gap: .35rem; }
.lc-parish-tabs{ display: inline-flex; gap: .35rem; background: #f1f5f9; padding: .3rem; border-radius: 12px; align-self: start; }
.lc-parish-tab{
  border: 0; background: transparent;
  padding: .45rem .9rem; border-radius: 8px;
  font-weight: 700; cursor: pointer;
}
.lc-parish-tab.is-on{ background: #fff; box-shadow: 0 2px 6px -2px rgba(15,23,42,.20); }
.lc-parish-quizbar{
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(75,45,219,.07), rgba(0,155,58,.07));
  border: 1px solid rgba(75,45,219,.18);
  border-radius: 12px; padding: .75rem 1rem;
}
.lc-parish-q-prompt{ font-size: 1.05rem; font-weight: 700; }
.lc-parish-q-stats{ display: flex; gap: .75rem; font-size: .9rem; }
.lc-parish-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem;
}
@media (min-width: 540px){ .lc-parish-grid{ grid-template-columns: repeat(3, 1fr); gap: .55rem; } }
@media (min-width: 760px){ .lc-parish-grid{ grid-template-columns: repeat(4, 1fr); } }
.lc-parish-tile{
  display: grid; gap: .15rem; align-content: center; text-align: center;
  padding: .65rem .5rem; cursor: pointer;
  background: #fff; border: 2px solid var(--c-line, #e2e8f0);
  border-radius: 12px; min-height: 70px;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.lc-parish-tile:hover{ transform: translateY(-1px); border-color: var(--bh-purple, #6849F0); }
.lc-parish-tile.is-active{ background: rgba(75,45,219,.07); border-color: var(--bh-purple, #6849F0); }
.lc-parish-tile-name{ font-family: var(--f-display); font-weight: 800; font-size: .92rem; }
.lc-parish-tile-cap{ font-size: .72rem; color: var(--c-ink-soft, #475569); }
.lc-parish-tile--W{ box-shadow: inset 6px 0 0 rgba(0,155,58,.55); }
.lc-parish-tile--M{ box-shadow: inset 6px 0 0 rgba(75,45,219,.55); }
.lc-parish-tile--E{ box-shadow: inset 6px 0 0 rgba(255,107,208,.55); }
.lc-parish-tile--right{
  background: rgba(0,155,58,.12); border-color: var(--jf-green, #009B3A);
  animation: lcParishPop .35s ease;
}
.lc-parish-tile--wrong{
  background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.55);
}
@keyframes lcParishPop{
  0%{ transform: scale(1); } 40%{ transform: scale(1.05); } 100%{ transform: scale(1); }
}
.lc-parish-info{
  background: #fff; border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 14px; padding: 1rem 1.1rem;
}
.lc-parish-info h3{ margin: 0 0 .25rem; }
.lc-parish-info p{ margin: .25rem 0; }

/* =========================================================
   DRAG & DROP — .lc-drag-*
   ========================================================= */
.lc-drag{ display: grid; gap: 1rem; }
.lc-drag-head{ display: grid; gap: .35rem; }
.lc-drag-hint{ font-size: .85rem; }
.lc-drag-board{
  display: grid; grid-template-columns: 1fr; gap: .8rem;
}
@media (min-width: 640px){ .lc-drag-board{ grid-template-columns: 1fr 1.4fr; } }
.lc-drag-col{
  list-style: none; padding: .5rem; margin: 0;
  background: #f8fafc; border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 12px;
  display: grid; gap: .5rem;
  min-height: 200px;
}
.lc-drag-item{
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .85rem;
  background: #fff; border: 2px solid var(--c-line, #e2e8f0);
  border-radius: 10px;
  font-weight: 700; cursor: grab; user-select: none;
  transition: transform .12s, box-shadow .12s, border-color .12s, background .15s;
}
.lc-drag-item:hover{ border-color: var(--bh-purple, #6849F0); }
.lc-drag-item.is-picked{
  background: rgba(75,45,219,.10);
  border-color: var(--bh-purple, #6849F0);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(75,45,219,.35);
}
.lc-drag-item.is-placed{
  background: rgba(75,45,219,.04);
  cursor: default;
  font-size: .85rem; padding: .35rem .6rem;
  border-style: dashed;
}
.lc-drag-grip{
  color: var(--c-ink-soft, #475569); font-weight: 900;
  font-size: .9rem;
}
.lc-drag-target{
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .6rem; padding: .55rem .65rem;
  background: #fff; border: 1.5px dashed rgba(75,45,219,.30);
  border-radius: 10px;
  min-height: 56px;
}
.lc-drag-target.is-right{
  background: rgba(0,155,58,.08); border-color: var(--jf-green, #009B3A); border-style: solid;
}
.lc-drag-target.is-wrong{
  background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.55);
}
.lc-drag-target-text{ font-size: .95rem; }
.lc-drag-drop-slot{
  min-width: 70px; min-height: 36px;
  border-radius: 8px;
  background: rgba(75,45,219,.05);
  border: 1.5px dashed rgba(75,45,219,.20);
  display: grid; place-items: center;
  padding: 2px;
}
.lc-drag-drop-slot:empty::before{
  content: 'drop here';
  font-size: .7rem; color: var(--c-ink-soft, #475569);
  letter-spacing: .04em;
}
.lc-drag-foot{
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.lc-drag-score{ font-weight: 800; font-size: 1rem; }
.lc-drag-fb{
  background: #fff; border: 1.5px dashed rgba(75,45,219,.30);
  border-radius: 10px; padding: .7rem .9rem; font-size: .95rem;
}

/* =========================================================
   VOICE RECORD — .lc-voice-*
   ========================================================= */
.lc-voice{ display: grid; gap: 1rem; }
.lc-voice-passage{
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  padding: 1.2rem;
  font-size: 1.15rem; line-height: 1.75;
  box-shadow: 0 6px 18px -10px rgba(15,23,42,.15);
}
.lc-voice-sent{ display: inline; }
.lc-voice-controls{
  display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
}
.lc-voice-record{ background: #dc2626; color: #fff; }
.lc-voice-record:hover{ background: #b91c1c; }
.lc-voice-record:disabled{ opacity: .55; cursor: default; }
.lc-voice-time{
  font-family: var(--f-display); font-weight: 800;
  background: #f1f5f9; padding: .4rem .7rem; border-radius: 999px;
  font-size: .92rem;
}
.lc-voice-note{ font-size: .85rem; color: var(--c-ink-soft, #475569); }
.lc-voice-err{
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.45);
  border-radius: 10px;
  padding: .65rem .85rem; color: #991b1b;
}

/* =========================================================
   HOME TILES — entry point for activities (.bh-activities)
   ========================================================= */
.bh-activities{
  display: grid; gap: .7rem;
  grid-template-columns: 1fr 1fr;
  margin: 1rem 0 1.5rem;
}
@media (min-width: 640px){
  .bh-activities{ grid-template-columns: repeat(4, 1fr); }
}
.bh-activity{
  position: relative;
  display: grid; align-content: space-between; gap: .35rem;
  padding: .9rem 1rem; min-height: 96px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid var(--c-line, #e2e8f0);
  text-decoration: none;
  color: var(--c-ink, #15131c);
  transition: transform .12s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.bh-activity:hover{
  transform: translateY(-2px);
  border-color: var(--bh-purple, #6849F0);
  box-shadow: 0 10px 20px -8px rgba(75,45,219,.30);
}
.bh-activity-emoji{ font-size: 1.8rem; line-height: 1; }
.bh-activity-title{
  font-family: var(--f-display); font-weight: 800; font-size: .96rem;
  line-height: 1.2;
}
.bh-activity-sub{
  font-size: .75rem; color: var(--c-ink-soft, #475569);
}
.bh-activity--story  { background: linear-gradient(135deg, #fff5e1, #fff); }
.bh-activity--patois { background: linear-gradient(135deg, #ffeaf6, #fff); }
.bh-activity--parish { background: linear-gradient(135deg, #e8f7ec, #fff); }
.bh-activity--voice  { background: linear-gradient(135deg, #fff3f0, #fff); }
.bh-activity--drag   { background: linear-gradient(135deg, #eef0ff, #fff); }
.bh-activity--found  { background: linear-gradient(135deg, #ffe7c7, #fff); }

/* =========================================================
   PRINCIPAL DASHBOARD — .lc-prin-*
   ========================================================= */
.lc-prin-stat{
  display: grid; gap: .2rem; text-align: center;
  padding: 1rem .75rem;
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 4px 12px -8px rgba(15,23,42,.15);
}
.lc-prin-stat-n{
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.8rem; line-height: 1;
  color: var(--bh-purple, #4B2DDB);
}
.lc-prin-stat-l{
  font-size: .76rem; color: var(--c-ink-soft, #475569);
  letter-spacing: .02em;
}
@media (max-width: 540px){
  .lc-prin-stat-grid{ grid-template-columns: 1fr 1fr !important; }
}

/* =========================================================
   FOUNDATIONS (literacy + numeracy ladder) — .lc-found-*
   ========================================================= */
.lc-found-head{ display: grid; gap: .35rem; }
.lc-found-back{
  display: inline-block; align-self: start;
  font-weight: 700; text-decoration: none;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(75,45,219,.07); color: var(--bh-purple, #4B2DDB);
  margin-bottom: .35rem;
}
.lc-found-back:hover{ background: rgba(75,45,219,.14); }

/* Hub */
.lc-found-hub{ display: grid; gap: 1.1rem; }
.lc-found-pillars{
  display: grid; gap: .8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px){ .lc-found-pillars{ grid-template-columns: 1fr 1fr; gap: 1rem; } }
.lc-found-pillar{
  display: grid; gap: .35rem;
  padding: 1.2rem; border-radius: 18px;
  text-decoration: none; color: #fff;
  box-shadow: 0 12px 24px -12px rgba(15,23,42,.30);
  position: relative; overflow: hidden;
  min-height: 160px;
}
.lc-found-pillar h3{ color: #fff; margin: .25rem 0; font-size: 1.25rem; }
.lc-found-pillar p{ color: rgba(255,255,255,.92); margin: 0; font-size: .92rem; }
.lc-found-pillar-icon{
  font-size: 2.4rem; line-height: 1;
}
.lc-found-pillar-stars{
  margin-top: .5rem; display: inline-block;
  background: rgba(0,0,0,.18); color: #fff;
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  align-self: start;
}
.lc-found-pillar--reading{ background: linear-gradient(135deg, #FF6BD0 0%, #E94CB8 100%); }
.lc-found-pillar--number{  background: linear-gradient(135deg, #6849F0 0%, #4B2DDB 100%); }
.lc-found-note{ font-size: .85rem; }

/* Ladder (8 levels grid) */
.lc-found-ladder{ display: grid; gap: 1rem; }
.lc-found-levels{ display: grid; gap: .55rem; }
.lc-found-level{
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: .8rem; align-items: center;
  text-decoration: none; color: var(--c-ink, #15131c);
  background: #fff; border: 2px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  padding: .85rem 1rem;
  transition: transform .12s, border-color .12s, box-shadow .12s, background .15s;
}
.lc-found-level:hover{
  transform: translateY(-1px);
  border-color: var(--bh-purple, #6849F0);
  box-shadow: 0 10px 18px -10px rgba(75,45,219,.25);
}
.lc-found-level-n{
  font-family: var(--f-display); font-weight: 900;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(75,45,219,.10); color: var(--bh-purple, #4B2DDB);
  font-size: .85rem;
}
.lc-found-level-emoji{ font-size: 1.7rem; line-height: 1; }
.lc-found-level-body{ display: grid; gap: 1px; min-width: 0; }
.lc-found-level-body strong{ font-size: 1rem; line-height: 1.2; }
.lc-found-level-body span{ font-size: .82rem; color: var(--c-ink-soft, #475569); }
.lc-found-level-stars{
  font-family: var(--f-display); font-weight: 800;
  color: var(--jf-gold, #FFD100);
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
  font-size: .95rem;
  white-space: nowrap;
}
.lc-found-level.is-on{
  background: rgba(255,209,0,.08);
  border-color: rgba(255,209,0,.5);
}
.lc-found-level.is-gold{
  background: linear-gradient(135deg, rgba(255,209,0,.15), rgba(221,255,0,.15));
  border-color: rgba(255,209,0,.6);
}

/* Drill */
.lc-found-drill{ display: grid; gap: 1rem; }
.lc-found-drill-head{ display: grid; gap: .4rem; }
.lc-found-drill-bar{
  height: 8px; background: rgba(75,45,219,.10); border-radius: 999px; overflow: hidden;
}
.lc-found-drill-bar-fill{
  height: 100%; background: linear-gradient(90deg, var(--bh-purple, #6849F0), var(--bh-pink, #FF6BD0));
  transition: width .25s ease;
}
.lc-found-drill-count{ font-size: .85rem; color: var(--c-ink-soft, #475569); }

.lc-found-q{
  display: grid; gap: 1rem;
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 16px;
  padding: 1.2rem;
}
.lc-found-prompt{ margin: 0; font-size: 1.1rem; }

.lc-found-opts{
  display: grid; gap: .5rem;
  grid-template-columns: 1fr 1fr;
}
.lc-found-opts--big{ grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.lc-found-opts--stack{ grid-template-columns: 1fr; }
.lc-found-opts--pictures{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 540px){
  .lc-found-opts--pictures{ grid-template-columns: repeat(4, 1fr); }
}

.lc-found-opt{
  text-align: center;
  padding: .7rem .8rem;
  background: #fff; border: 2px solid var(--c-line, #e2e8f0);
  border-radius: 12px;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform .1s, border-color .12s, background .15s;
}
.lc-found-opt:hover{ border-color: var(--bh-purple, #6849F0); }
.lc-found-opt:disabled{ cursor: default; }
.lc-found-opt.is-right{
  background: rgba(0,155,58,.10);
  border-color: var(--jf-green, #009B3A);
  animation: lcFoundPop .35s ease;
}
.lc-found-opt.is-wrong{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.55);
}
@keyframes lcFoundPop{
  0%{ transform: scale(1); } 40%{ transform: scale(1.05); } 100%{ transform: scale(1); }
}
.lc-found-opt--letter{
  font-size: 1.8rem; padding: 1rem .5rem; font-family: var(--f-display);
}
.lc-found-opt--num{ font-size: 1.5rem; padding: 1rem .5rem; }
.lc-found-opt--stack{ text-align: left; padding: .8rem 1rem; font-size: .98rem; }
.lc-found-opt--picture{
  display: grid; gap: .2rem; padding: .9rem .4rem;
}
.lc-found-pic{ font-size: 2.2rem; line-height: 1; }
.lc-found-pic-label{
  font-size: .72rem; color: var(--c-ink-soft, #475569);
  font-weight: 700;
}

.lc-found-audio{
  display: grid; gap: .4rem; text-align: center;
  padding: 1rem;
  background: rgba(255,209,0,.10);
  border: 1.5px dashed rgba(255,209,0,.55);
  border-radius: 14px;
}
.lc-found-play{
  background: var(--bh-purple, #6849F0); color: #fff;
  border: 0; padding: .8rem 1.2rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 800; font-size: 1rem;
  cursor: pointer;
}
.lc-found-hint{ font-size: .82rem; margin: 0; }

.lc-found-flash{
  display: grid; place-items: center;
  min-height: 96px;
  background: rgba(75,45,219,.07);
  border-radius: 12px;
  transition: opacity .4s ease;
}
.lc-found-flash.is-gone .lc-found-flash-word{ visibility: hidden; }
.lc-found-flash-word{
  font-family: var(--f-display); font-weight: 900;
  font-size: 2.2rem;
  color: var(--bh-purple, #4B2DDB);
}

.lc-found-patois{
  display: grid; gap: .25rem; padding: 1rem;
  background: linear-gradient(135deg, rgba(0,155,58,.10), rgba(255,209,0,.10));
  border: 1.5px solid rgba(0,155,58,.40);
  border-radius: 14px; text-align: center;
}
.lc-found-patois-flag{
  font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  color: var(--jf-green-dark, #007a2e);
}
.lc-found-patois-text{
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.35rem; line-height: 1.2;
}

.lc-found-line{
  font-size: 1.15rem; line-height: 1.5;
  background: rgba(75,45,219,.04);
  border-left: 4px solid var(--bh-purple, #6849F0);
  padding: .8rem 1rem; border-radius: 4px 12px 12px 4px;
  margin: 0;
}
.lc-found-para{
  font-size: 1.02rem; line-height: 1.65;
  background: rgba(75,45,219,.04);
  padding: 1rem; border-radius: 12px; margin: 0;
}
.lc-found-story p{ font-size: 1.02rem; line-height: 1.7; margin: 0; }
.lc-found-story{
  background: rgba(75,45,219,.04);
  padding: 1rem; border-radius: 12px;
}

.lc-found-count{
  background: rgba(75,45,219,.06);
  border-radius: 14px;
  padding: 1.4rem; text-align: center;
}
.lc-found-count-emojis{
  font-size: 2rem; line-height: 1.4; letter-spacing: .15rem;
}

.lc-found-fb{
  display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap;
  background: #fff; border: 1.5px dashed rgba(75,45,219,.30);
  border-radius: 10px; padding: .65rem .85rem;
  font-size: .98rem;
  position: relative;
}

/* =========================================================
   v285: TODAY DASHBOARD — Duolingo-style daily card on home.
   Streak fire on the left, daily-goal ring on the right,
   "pick up where you left off" CTA below.
   ========================================================= */
.bh-today{
  display: grid; gap: .7rem;
  margin: 1rem 0 1.2rem;
}
/* v300: tighter compact banner — pulled padding down from 1.1rem to
   .7rem, ring from 96px to 72px, streak pill + headline fonts dropped
   one notch so the today strip stops dominating the hero. */
.bh-today-card{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem;
  align-items: center;
  background: linear-gradient(135deg, #FFD100 0%, #FF9933 60%, #FF6B6B 100%);
  border-radius: 16px;
  padding: .7rem 1rem;
  box-shadow: 0 8px 18px -12px rgba(255,107,107,.55);
  color: #1a1530;
  position: relative;
  overflow: hidden;
}
.bh-today-card::before{
  content: '';
  position: absolute; right: -30px; bottom: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  pointer-events: none;
}
.bh-today-eyebrow{
  display: inline-block; font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,0,0,.18); color: #fff;
  padding: .18rem .45rem; border-radius: 999px;
  margin-bottom: .35rem;
}
.bh-today-streak{
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.85);
  border-radius: 12px;
  padding: .32rem .6rem;
  box-shadow: 0 3px 10px -4px rgba(0,0,0,.15);
}
.bh-today-streak-flame{
  font-size: 1.3rem; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(255,107,107,.6));
}
.bh-today-streak-text{ display: grid; gap: 0; line-height: 1.05; }
.bh-today-streak-text strong{
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.25rem;
  color: #FF6B00;
}
.bh-today-streak-text span{
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-ink-soft, #475569);
}
/* Streak heat — visual reward grows with day count */
.bh-today-streak--cool .bh-today-streak-flame{ filter: grayscale(.3) drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.bh-today-streak--warm .bh-today-streak-flame{ filter: drop-shadow(0 2px 4px rgba(255,107,107,.6)); }
.bh-today-streak--hot{
  animation: bhTodayFire 2.4s ease-in-out infinite;
}
.bh-today-streak--hot .bh-today-streak-flame{
  filter: drop-shadow(0 0 6px #FF6B00) drop-shadow(0 2px 4px rgba(255,107,107,.7));
}
.bh-today-streak--legendary{
  animation: bhTodayFire 1.6s ease-in-out infinite;
  background: linear-gradient(135deg, #FFE082 0%, #FFD100 50%, #FF9933 100%);
}
.bh-today-streak--legendary .bh-today-streak-flame{
  filter: drop-shadow(0 0 10px #FFD100) drop-shadow(0 0 16px #FF6B00);
}
@keyframes bhTodayFire{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.05); }
}
.bh-today-status{
  margin: .35rem 0 0;
  font-size: .82rem; line-height: 1.35;
  color: #1a1530;
  font-weight: 600;
}

/* Progress ring on the right — shrunk for v300 compact banner. */
.bh-today-right{
  display: grid; gap: .2rem; place-items: center;
  position: relative;
}
.bh-today-ring{ width: 72px; height: 72px; }
.bh-today-ring-bg{
  fill: none; stroke: rgba(255,255,255,.35);
  stroke-width: 10;
}
.bh-today-ring-fill{
  fill: none; stroke: #fff;
  stroke-width: 10; stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray .6s ease;
}
.bh-today-ring-pct{
  font-family: var(--f-display); font-weight: 900;
  font-size: 16px; fill: #1a1530;
}
.bh-today-ring-label{
  font-weight: 800; font-size: .72rem;
  background: rgba(255,255,255,.85);
  padding: .18rem .5rem; border-radius: 999px;
  color: #1a1530;
}

/* "Pick up where you left off" CTA */
.bh-today-next{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .85rem;
  align-items: center;
  background: #fff;
  border: 2px solid rgba(75,45,219,.18);
  border-radius: 16px;
  padding: .95rem 1.15rem;
  text-decoration: none;
  color: var(--c-ink, #15131c);
  box-shadow: 0 8px 18px -10px rgba(75,45,219,.25);
  transition: transform .14s, border-color .14s, box-shadow .15s;
}
.bh-today-next:hover{
  transform: translateY(-2px);
  border-color: var(--bh-purple, #6849F0);
  box-shadow: 0 12px 22px -10px rgba(75,45,219,.45);
}
.bh-today-next-emoji{ font-size: 2rem; line-height: 1; }
.bh-today-next-body{ display: grid; gap: .15rem; min-width: 0; }
.bh-today-next-eyebrow{
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bh-purple, #4B2DDB);
}
.bh-today-next-body strong{ font-size: 1.05rem; }
.bh-today-next-arrow{
  font-family: var(--f-display); font-weight: 900;
  color: var(--bh-purple, #4B2DDB);
  font-size: 1.6rem;
}

/* v287: streak-freeze toast above the Today card. One-shot when bumpStreak
   set _streakSavedByFreeze / _freshFreezeEarned. */
.bh-today-freeze-toast{
  background: linear-gradient(135deg, #BAE6FD, #DBEAFE);
  border: 1.5px solid rgba(59,130,246,.45);
  color: #0c4a6e;
  border-radius: 14px;
  padding: .7rem 1rem;
  font-size: .92rem; line-height: 1.45;
  box-shadow: 0 6px 14px -6px rgba(59,130,246,.35);
}
.bh-today-freeze-toast.lc-freeze-earn{
  background: linear-gradient(135deg, #FFE082, #FFD100);
  border-color: rgba(255,179,0,.55);
  color: #5a3700;
}
.bh-today-freeze-pill{
  display: inline-block;
  background: #fff;
  border: 1.5px solid rgba(59,130,246,.45);
  color: #0c4a6e;
  font-family: var(--f-display); font-weight: 800; font-size: .78rem;
  padding: .2rem .55rem; border-radius: 999px;
  margin-left: .4rem;
}

/* v287: surprise treasure chest — appears once daily goal is hit */
.bh-today-chest{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .85rem;
  align-items: center;
  width: 100%;
  background: linear-gradient(135deg, #FFD100 0%, #FF9933 60%, #FF6B6B 100%);
  border: none;
  border-radius: 16px;
  padding: 1rem 1.15rem;
  text-align: left;
  color: #1a1530;
  cursor: pointer;
  position: relative;
  box-shadow: 0 8px 20px -8px rgba(255,107,107,.6);
  animation: bhChestWiggle 1.6s ease-in-out infinite;
  font-family: var(--f-display);
}
@keyframes bhChestWiggle{
  0%,100%{ transform: rotate(-2deg) scale(1); }
  25%    { transform: rotate(2deg)  scale(1.02); }
  50%    { transform: rotate(-1deg) scale(1); }
  75%    { transform: rotate(1deg)  scale(1.02); }
}
.bh-today-chest.is-opened{
  animation: bhChestPop .5s ease-out forwards;
  background: linear-gradient(135deg, #FFE082, #DDFF00);
  cursor: default;
}
@keyframes bhChestPop{
  0%   { transform: scale(1)   rotate(0); }
  50%  { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1)   rotate(0); }
}
.bh-today-chest-emoji{ font-size: 2.4rem; line-height: 1; }
.bh-today-chest-body{ display: grid; gap: .15rem; min-width: 0; }
.bh-today-chest-eyebrow{
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0,0,0,.55);
}
.bh-today-chest-body strong{ font-size: 1rem; }
.bh-today-chest-arrow{
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.6rem;
}
.bh-today-chest.is-opened .bh-today-chest-arrow{ display: none; }

/* v288: compact play-tile grid replaces the wide PEP / Junior /
   Foundations strips. Smaller, brighter, more game-card feel.
   Mobile = 2 cols. Tablet+ = 3 cols. Foundations stretches across
   the top row to keep it as the "primary" surface. */
.bh-play-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: .9rem 0 1.1rem;
}
@media (min-width: 640px){
  .bh-play-grid{ grid-template-columns: repeat(3, 1fr); gap: .7rem; }
}
.bh-play-tile{
  display: grid; gap: .15rem;
  text-decoration: none;
  border-radius: 16px;
  padding: .9rem .85rem .8rem;
  color: #fff;
  position: relative;
  min-height: 110px;
  box-shadow: 0 6px 14px -8px rgba(15,23,42,.35);
  transition: transform .14s, box-shadow .15s, filter .12s;
  overflow: hidden;
}
.bh-play-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -10px rgba(15,23,42,.5);
  filter: brightness(1.05);
}
.bh-play-tile::after{
  content: '→';
  position: absolute; right: .7rem; bottom: .55rem;
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.4rem; opacity: .8;
}
.bh-play-emoji{
  font-size: 2rem; line-height: 1; margin-bottom: .15rem;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.bh-play-tile strong{
  font-family: var(--f-display); font-weight: 900;
  font-size: 1rem; line-height: 1.15;
  color: #fff;
}
.bh-play-tile > span:not(.bh-play-emoji):not(.bh-play-badge){
  font-size: .72rem;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  line-height: 1.3;
}
.bh-play-badge{
  position: absolute; top: .55rem; right: .55rem;
  font-size: .58rem; font-weight: 900; letter-spacing: .08em;
  background: rgba(0,0,0,.25); color: #fff;
  padding: .2rem .45rem; border-radius: 999px;
}
/* Make Foundations span 2 columns at mobile + 2 at tablet so it
   remains the loudest tile in the grid. */
.bh-play-tile--foundations{
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #FF6BD0 0%, #6849F0 80%);
  min-height: 130px;
}
.bh-play-tile--foundations .bh-play-emoji{ font-size: 2.4rem; }
.bh-play-tile--foundations strong{ font-size: 1.15rem; }
@media (min-width: 640px){
  .bh-play-tile--foundations{ grid-column: span 2; min-height: 140px; }
}
.bh-play-tile--pep      { background: linear-gradient(135deg, #FF9A8B, #FF6B6B); }
.bh-play-tile--junior   { background: linear-gradient(135deg, #4FACFE, #00C9A7); }
.bh-play-tile--brain    { background: linear-gradient(135deg, #A78BFA, #6849F0); }
.bh-play-tile--chess    { background: linear-gradient(135deg, #1F2937, #4B5563); }
.bh-play-tile--story    { background: linear-gradient(135deg, #FFD166, #F39C12); color: #1a1530; }
.bh-play-tile--story strong,
.bh-play-tile--story > span:not(.bh-play-emoji){ color: rgba(26,21,48,.85); }
.bh-play-tile--story::after{ color: #1a1530; }

/* v288: "Explore everything" — burger-style menu trigger that
   expands into a 12-tile feature grid. Sits below the play grid. */
.bh-explore{
  margin: 1rem 0 1.2rem;
  background: #fff;
  border: 1.5px solid rgba(75,45,219,.18);
  border-radius: 16px;
  overflow: hidden;
}
.bh-explore > summary{
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.1rem;
  cursor: pointer;
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  color: var(--c-ink, #15131c);
  list-style: none;
  user-select: none;
}
.bh-explore > summary::-webkit-details-marker{ display: none; }
.bh-explore-burger{
  display: inline-grid; gap: 4px;
  width: 22px;
}
.bh-explore-burger span{
  height: 3px; background: var(--bh-purple, #6849F0); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.bh-explore[open] .bh-explore-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.bh-explore[open] .bh-explore-burger span:nth-child(2){ opacity: 0; }
.bh-explore[open] .bh-explore-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.bh-explore-hint{
  margin-left: auto;
  font-size: .78rem; font-weight: 700;
  background: rgba(75,45,219,.10); color: var(--bh-purple, #4B2DDB);
  padding: .25rem .55rem; border-radius: 999px;
}
.bh-explore-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  padding: .7rem .85rem 1rem;
  border-top: 1.5px dashed rgba(75,45,219,.18);
  background: linear-gradient(180deg, rgba(75,45,219,.04), transparent);
}
@media (min-width: 540px){ .bh-explore-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px){ .bh-explore-grid{ grid-template-columns: repeat(4, 1fr); } }
.bh-explore-tile{
  display: grid; gap: .1rem;
  text-decoration: none; color: var(--c-ink, #15131c);
  background: #fff;
  border: 1.5px solid var(--c-line, #e2e8f0);
  border-radius: 12px;
  padding: .65rem .55rem .55rem;
  transition: transform .12s, border-color .14s, box-shadow .14s;
  min-height: 86px;
  text-align: center;
}
.bh-explore-tile:hover{
  transform: translateY(-2px);
  border-color: var(--bh-purple, #6849F0);
  box-shadow: 0 8px 16px -8px rgba(75,45,219,.3);
}
.bh-explore-emoji{
  font-size: 1.6rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
.bh-explore-tile strong{
  font-size: .82rem; line-height: 1.2;
  font-family: var(--f-display); font-weight: 800;
}
.bh-explore-tile > span:not(.bh-explore-emoji){
  font-size: .68rem; color: var(--c-ink-soft, #475569);
}
.bh-explore-tile--story{   background: linear-gradient(180deg, #FFF5E1, #fff); }
.bh-explore-tile--parish{  background: linear-gradient(180deg, #E8F7EC, #fff); }
.bh-explore-tile--patois{  background: linear-gradient(180deg, #FFEAF6, #fff); }
.bh-explore-tile--drag{    background: linear-gradient(180deg, #EEF0FF, #fff); }
.bh-explore-tile--voice{   background: linear-gradient(180deg, #FFF3F0, #fff); }
.bh-explore-tile--grades{  background: linear-gradient(180deg, #F0F9FF, #fff); }
.bh-explore-tile--tots{    background: linear-gradient(180deg, #FFFAE6, #fff); }
.bh-explore-tile--bootcamp{background: linear-gradient(180deg, #ECFDF5, #fff); }
.bh-explore-tile--summer{  background: linear-gradient(180deg, #FEF3C7, #fff); }
.bh-explore-tile--certs{   background: linear-gradient(180deg, #F5F3FF, #fff); }
.bh-explore-tile--profile{ background: linear-gradient(180deg, #FCE7F3, #fff); }

/* For signed-in users, hide the parent-marketing slabs on home
   (Study Programmes / Ages & Skills / Pick Your Pathway). They've
   already signed up — no need to keep pitching what the app does.
   These sections still render for anonymous visitors. */
body.lc-home-signed-in .bh-section,
body.lc-home-signed-in .bh-ages{
  display: none;
}

/* v290: hide the legacy marketing hero entirely for signed-in users —
   the new profile header strip + daily-bonus card + challenges grid
   below replace it with a Coin Quiz-style focused home. */
body.lc-home-signed-in .bh-hero{ display: none; }

/* v290: compact profile header strip — avatar | name | streak/stars pills.
   Sits at the top of the home page for signed-in users. */
.bh-pro-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--c-line, #e2e8f0);
  border-radius: 18px;
  padding: .7rem 1rem;
  margin: 1rem 0 .9rem;
  box-shadow: 0 6px 14px -10px rgba(15,23,42,.18);
}
.bh-pro-avatar{
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--bh-purple, #6849F0), var(--bh-pink, #FF6BD0));
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem; line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px -4px rgba(75,45,219,.55);
}
.bh-pro-id{ display: grid; gap: 0; min-width: 0; }
.bh-pro-id strong{
  font-family: var(--f-display); font-weight: 800;
  font-size: 1rem; line-height: 1.1;
  color: var(--c-ink, #15131c);
}
.bh-pro-id span{
  font-size: .78rem; color: var(--c-ink-soft, #475569);
}
.bh-pro-pills{
  display: flex; gap: .35rem;
  flex-shrink: 0;
}
.bh-pro-pill{
  display: inline-flex; align-items: center; gap: .25rem;
  background: #fff;
  border: 1.5px solid;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-family: var(--f-display); font-weight: 800;
  font-size: .82rem;
  line-height: 1;
}
.bh-pro-pill--streak{ color: #FF6B00; border-color: rgba(255,107,0,.4); background: rgba(255,209,0,.12); }
.bh-pro-pill--stars{  color: #B8860B; border-color: rgba(255,179,0,.4); background: rgba(255,209,0,.18); }

/* v290: section headers above Challenges and Need-help */
.bh-section-h{
  margin: 1.2rem 0 .65rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-ink, #15131c);
  display: flex; align-items: center; gap: .5rem;
}
.bh-section-h::after{
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(75,45,219,.3), transparent);
  border-radius: 999px;
}

/* v292: THREE BIG mega tiles for daily learning surfaces — Foundations,
   PEP, Junior. Bright gradient backgrounds, big icons, decorative
   floating shapes, animated CTA pill. The kid's primary commitments. */
.bh-mega-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px){
  .bh-mega-grid{ grid-template-columns: repeat(3, 1fr); }
}
.bh-mega{
  position: relative;
  display: grid; gap: .25rem;
  text-decoration: none;
  border-radius: 22px;
  padding: 1.2rem 1.3rem 1rem;
  color: #fff;
  min-height: 150px;
  overflow: hidden;
  box-shadow: 0 10px 24px -12px rgba(15,23,42,.45);
  transition: transform .15s, box-shadow .18s, filter .14s;
  isolation: isolate;
}
.bh-mega:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 32px -14px rgba(15,23,42,.55);
  filter: brightness(1.04);
}
.bh-mega-icon{
  font-size: 2.6rem; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
  margin-bottom: .25rem;
}
/* v297: switched mega-tile typography from Baloo 2 to Poppins
   ExtraBold uppercase — same family the EduFox-style .bh-hero2
   headline uses, so the home reads as one design system instead
   of two competing fonts. Tighter letter-spacing + uppercase
   gives the titles that modern, geometric, confident look. */
.bh-mega strong{
  font-family: "Poppins", var(--f-display);
  font-weight: 800;
  font-size: 1.4rem; line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,.22);
}
.bh-mega-sub{
  font-family: "Poppins", var(--f-display);
  font-size: .82rem;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.35;
  margin-top: .15rem;
}
.bh-mega-cta{
  align-self: start;
  display: inline-block;
  margin-top: .55rem;
  background: rgba(255,255,255,.95);
  color: #1a1530;
  font-family: "Poppins", var(--f-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .42rem .9rem;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.bh-mega:hover .bh-mega-cta{
  transform: translateX(3px);
  transition: transform .15s ease;
}
/* Decorative floating emojis in the background of each tile */
.bh-mega-deco{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.bh-mega-deco span{
  position: absolute;
  font-size: 3.4rem;
  opacity: .15;
  animation: bhMegaFloat 4s ease-in-out infinite;
}
.bh-mega-deco span:nth-child(1){ top: -8px;  right: -8px;  }
.bh-mega-deco span:nth-child(2){ bottom: -10px; right: 36%; animation-delay: -2s; font-size: 2.4rem; }
@keyframes bhMegaFloat{
  0%,100%{ transform: translateY(0) rotate(-6deg); }
  50%    { transform: translateY(-6px) rotate(6deg); }
}
.bh-mega--foundations{ background: linear-gradient(135deg, #FF6BD0 0%, #6849F0 60%, #4B2DDB 100%); }
.bh-mega--pep        { background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 60%, #E84118 100%); }
.bh-mega--junior     { background: linear-gradient(135deg, #4FACFE 0%, #00C9A7 60%, #009B3A 100%); }

/* v292: smaller "fun activities" tiles below the mega tiles.
   2-col mobile, 3-col tablet. White card on pastel-tinted gradient. */
.bh-act-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px){
  .bh-act-grid{ grid-template-columns: repeat(3, 1fr); gap: .75rem; }
}
.bh-act{
  display: grid; gap: .2rem;
  text-decoration: none;
  border-radius: 16px;
  padding: .85rem .75rem;
  text-align: center;
  position: relative;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px -8px rgba(15,23,42,.2);
  transition: transform .12s, box-shadow .15s, border-color .15s;
  color: var(--c-ink, #15131c);
  min-height: 110px;
}
.bh-act:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -10px rgba(15,23,42,.35);
}
.bh-act-icon{
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  margin: 0 auto .15rem;
  font-size: 1.5rem; line-height: 1;
  box-shadow: 0 3px 6px -3px rgba(0,0,0,.18);
}
.bh-act strong{
  font-family: var(--f-display); font-weight: 800;
  font-size: .9rem; line-height: 1.15;
}
.bh-act > span:not(.bh-act-icon){
  font-size: .7rem;
  color: var(--c-ink-soft, #475569);
  font-weight: 600;
}
.bh-act--story  { background: linear-gradient(180deg, #FEF3C7, #fff); }
.bh-act--story  .bh-act-icon{ background: #FBBF24; }
.bh-act--patois { background: linear-gradient(180deg, #FBCFE8, #fff); }
.bh-act--patois .bh-act-icon{ background: #F472B6; }
.bh-act--parish { background: linear-gradient(180deg, #BBF7D0, #fff); }
.bh-act--parish .bh-act-icon{ background: #4ADE80; }
.bh-act--drag   { background: linear-gradient(180deg, #DDD6FE, #fff); }
.bh-act--drag   .bh-act-icon{ background: #A78BFA; }
.bh-act--voice  { background: linear-gradient(180deg, #FED7AA, #fff); }
.bh-act--voice  .bh-act-icon{ background: #FB923C; }
.bh-act--chess  { background: linear-gradient(180deg, #E5E7EB, #fff); }
.bh-act--chess  .bh-act-icon{ background: #6B7280; color: #fff; }

/* v290: Coin Quiz-style square challenge tiles. 2x2 on mobile,
   4-up at tablet+. Bright pastel backgrounds, icon centered. */
.bh-challenges-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px){
  .bh-challenges-grid{ grid-template-columns: repeat(4, 1fr); }
}
.bh-challenge{
  display: grid; gap: .25rem;
  text-decoration: none;
  border-radius: 18px;
  padding: 1.1rem .85rem 1rem;
  text-align: center;
  position: relative;
  border: 1.5px solid transparent;
  box-shadow: 0 5px 14px -10px rgba(15,23,42,.2);
  transition: transform .14s, box-shadow .15s;
  aspect-ratio: 1.15 / 1;
  min-height: 130px;
  color: var(--c-ink, #15131c);
}
.bh-challenge:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -12px rgba(15,23,42,.35);
}
.bh-challenge-icon{
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto .25rem;
  border-radius: 14px;
  font-size: 1.8rem; line-height: 1;
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 8px -4px rgba(0,0,0,.15);
}
.bh-challenge strong{
  font-family: var(--f-display); font-weight: 800;
  font-size: .98rem;
  line-height: 1.15;
}
.bh-challenge > span:not(.bh-challenge-icon){
  font-size: .72rem;
  color: rgba(0,0,0,.65);
  font-weight: 600;
}
.bh-challenge--foundations{ background: linear-gradient(160deg, #DBEAFE 0%, #BFDBFE 100%); border-color: #93C5FD; }
.bh-challenge--pep        { background: linear-gradient(160deg, #FED7AA 0%, #FDBA74 100%); border-color: #FB923C; }
.bh-challenge--junior     { background: linear-gradient(160deg, #FEF3C7 0%, #FDE68A 100%); border-color: #FBBF24; }
.bh-challenge--patois     { background: linear-gradient(160deg, #BBF7D0 0%, #86EFAC 100%); border-color: #4ADE80; }
.bh-challenge--story      { background: linear-gradient(160deg, #FBCFE8 0%, #F9A8D4 100%); border-color: #F472B6; }

/* v290: "Need help?" row — two side-by-side action buttons (Ask Brain
   + For parents). Coin Quiz uses WhatsApp + Telegram; we keep this
   kid-focused on the in-app safety net. */
.bh-join-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: 1rem;
}
.bh-join-btn{
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  text-decoration: none;
  border-radius: 16px;
  padding: .9rem 1rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: .98rem;
  border: 2px solid transparent;
  transition: transform .14s, box-shadow .15s, filter .14s;
  box-shadow: 0 4px 10px -6px rgba(15,23,42,.25);
}
.bh-join-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.bh-join-btn--brain{
  background: linear-gradient(135deg, #A78BFA, #6849F0);
  color: #fff;
}
.bh-join-btn--parent{
  background: #fff;
  color: var(--c-ink, #15131c);
  border-color: rgba(75,45,219,.25);
}
.bh-join-btn span{ font-size: 1.2rem; line-height: 1; }

/* v288: slim Word of the Day card for signed-in users */
body.lc-home-signed-in .bh-wotd{
  padding: 1rem 1.1rem;
}
body.lc-home-signed-in .bh-wotd-word{
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  margin: .2rem 0;
}
body.lc-home-signed-in .bh-wotd-burst,
body.lc-home-signed-in .bh-wotd-burst--2{ font-size: 3rem; }
body.lc-home-signed-in .bh-wotd-eyebrow{ font-size: .65rem; }

/* =========================================================
   v285: IN-DRILL COMBO + CONFETTI — Foundations dopamine boost.
   ========================================================= */
.lc-found-combo{
  position: absolute;
  top: -14px; right: 12px;
  background: linear-gradient(135deg, #FF6B6B, #FFD100);
  color: #fff;
  padding: .25rem .7rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 800; font-size: .85rem;
  box-shadow: 0 6px 14px -6px rgba(255,107,107,.6);
  animation: lcComboPop .4s ease-out;
  pointer-events: none;
  z-index: 2;
}
@keyframes lcComboPop{
  0%   { transform: translateY(8px) scale(.7); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.lc-confetti-host{
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 1;
}

/* =========================================================
   v286: ROBI MASCOT — a small CSS-only character that idles
   in the corner of the drill and reacts to answers:
     • idle      — gentle bob, neutral face
     • happy     — jumps + laughs (after correct)
     • thinking  — head tilt + ? bubble (after wrong)
     • sad       — slight droop (combo broken at 3+)
   The face is an emoji (🤖) so it carries across platforms
   without needing image assets.
   ========================================================= */
.lc-mascot{
  position: absolute;
  bottom: 10px; right: 10px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  font-size: 2.6rem; line-height: 1;
  background: linear-gradient(135deg, #6849F0, #FF6BD0);
  border-radius: 50%;
  box-shadow: 0 8px 18px -6px rgba(75,45,219,.55);
  border: 3px solid #fff;
  pointer-events: none;
  z-index: 3;
  transform-origin: center bottom;
  animation: lcMascotIdle 2.4s ease-in-out infinite;
  transition: transform .2s, background .3s;
}
.lc-mascot::after{
  /* Speech bubble pip, hidden by default — shown in --happy / --thinking */
  content: '';
  position: absolute;
  top: -8px; right: 8px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #fff;
  opacity: 0; transition: opacity .15s;
}
.lc-mascot-bubble{
  position: absolute;
  bottom: 72px; right: -8px;
  background: #fff;
  color: #1a1530;
  padding: .4rem .65rem;
  border-radius: 12px;
  font-family: var(--f-display); font-weight: 800; font-size: .8rem;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.lc-mascot--happy{
  animation: lcMascotJump .6s ease-out, lcMascotIdle 2.4s ease-in-out 0.6s infinite;
  background: linear-gradient(135deg, #009B3A, #DDFF00);
}
.lc-mascot--happy .lc-mascot-bubble{ opacity: 1; transform: translateY(0); }
.lc-mascot--thinking{
  background: linear-gradient(135deg, #FFD100, #FF9933);
  animation: lcMascotTilt 1.2s ease-in-out infinite;
}
.lc-mascot--thinking .lc-mascot-bubble{ opacity: 1; transform: translateY(0); }
.lc-mascot--sad{
  filter: grayscale(.4);
  animation: lcMascotDroop 2s ease-in-out infinite;
}
@keyframes lcMascotIdle{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%    { transform: translateY(-6px) rotate(2deg); }
}
@keyframes lcMascotJump{
  0%   { transform: translateY(0)    scale(1)    rotate(0); }
  30%  { transform: translateY(-22px) scale(1.1) rotate(-10deg); }
  60%  { transform: translateY(-6px) scale(1.05) rotate(10deg); }
  100% { transform: translateY(0)    scale(1)    rotate(0); }
}
@keyframes lcMascotTilt{
  0%,100%{ transform: rotate(-8deg); }
  50%    { transform: rotate(8deg); }
}
@keyframes lcMascotDroop{
  0%,100%{ transform: translateY(2px) rotate(-4deg); }
  50%    { transform: translateY(4px) rotate(-1deg); }
}
@media (max-width: 540px){
  .lc-mascot{ width: 52px; height: 52px; font-size: 2rem; }
  .lc-mascot-bubble{ bottom: 60px; font-size: .72rem; }
}

/* =========================================================
   v286: PROFILE MAKEOVER — surfaces avatar level + today
   snapshot + badge wall, hides empty certificate counter.
   ========================================================= */
.sp-today{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .55rem;
  margin: 1rem 0 1.3rem;
}
.sp-today-stat{
  background: linear-gradient(135deg, rgba(75,45,219,.06), rgba(255,107,208,.08));
  border: 1.5px solid rgba(75,45,219,.18);
  border-radius: 14px;
  padding: .8rem .6rem;
  display: grid; gap: .15rem; text-align: center;
}
.sp-today-stat strong{
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.8rem; line-height: 1;
  color: var(--bh-purple, #4B2DDB);
}
.sp-today-stat span{
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-soft, #475569);
}
.sp-today-stat--streak strong{ color: #FF6B00; }
.sp-today-stat--streak{ background: linear-gradient(135deg, rgba(255,209,0,.18), rgba(255,107,107,.12)); border-color: rgba(255,107,0,.35); }
.sp-today-stat--gold strong{ color: #FFB300; }
.sp-today-stat--gold{ background: linear-gradient(135deg, rgba(255,209,0,.18), rgba(221,255,0,.18)); border-color: rgba(255,179,0,.45); }

/* v325 — Access / subscription card (moved here from home hero pill) */
.sp-access{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: center;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border: 1.5px solid #86efac;
  border-radius: 16px;
  padding: .85rem 1rem;
  margin: 1rem 0;
}
.sp-access-icon{
  font-size: 1.6rem;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  flex: 0 0 auto;
}
.sp-access-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-access-status{
  font-size: 1.05rem;
  color: #065f46;
  line-height: 1.15;
}
.sp-access-date{
  font-size: .82rem;
  color: #047857;
  font-weight: 500;
}
.sp-access-code{
  font-size: .78rem;
  color: #064e3b;
  margin-top: 2px;
}
.sp-access-code code{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: rgba(255,255,255,.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.sp-access-cta{
  background: #059669;
  color: #fff;
  text-decoration: none;
  padding: .5rem .85rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.sp-access-cta:hover{ background: #047857; }
.sp-access-cta--note {
  background: #fef3c7;
  color: #92400e;
  cursor: help;
  font-weight: 700;
}
.sp-access-cta--note:hover { background: #fef3c7; }

/* v326l — compact expiry chip on the student home hero */
.bh-hero2-expiry {
  display: inline-block;
  background: rgba(255,255,255,.85);
  color: #92400e;
  font-weight: 700;
  font-size: .75rem;
  padding: 1px 8px;
  border-radius: 999px;
  text-decoration: none;
  margin-left: 4px;
}
.bh-hero2-expiry:hover { background: #fff; }

/* v326n — Materials upload: link preview + multi-grade picker */
.doc-url-preview {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .4rem;
  padding: .35rem .55rem;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: .82rem;
  color: #334155;
  max-width: 100%;
  overflow: hidden;
}
.doc-url-preview img {
  flex: 0 0 auto;
  border-radius: 4px;
}
.doc-url-preview-host {
  font-weight: 700;
  color: #0f172a;
}
.doc-url-preview-path {
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-grade-fs {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .6rem .8rem;
  margin: .6rem 0 .4rem;
}
.doc-grade-fs legend {
  font-size: .82rem;
  font-weight: 700;
  color: #334155;
  padding: 0 .35rem;
}
.doc-grade-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  align-items: center;
  margin-top: .25rem;
}
.doc-grade-row label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
}
.doc-grade-row input[type=checkbox] { cursor: pointer; }

/* =====================================================================
   v326p — Teacher Progress dashboard
   ===================================================================== */
.tp-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin: 0 0 1rem;
}
.tp-stat-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.tp-stat-card strong {
  font-size: 1.8rem;
  font-weight: 800;
  color: #18181b;
  line-height: 1;
}
.tp-stat-card span {
  font-size: .75rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tp-stat-card--ok   { background: #ecfdf5; border-color: #a7f3d0; }
.tp-stat-card--ok strong { color: #047857; }
.tp-stat-card--gold { background: #fffbeb; border-color: #fcd34d; }
.tp-stat-card--gold strong { color: #b45309; }
.tp-stat-card--warn { background: #fef2f2; border-color: #fca5a5; }
.tp-stat-card--warn strong { color: #b91c1c; }

.tp-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
  align-items: center;
}
.tp-toolbar input,
.tp-toolbar select {
  padding: .45rem .7rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font: inherit;
}
.tp-toolbar input { min-width: 220px; flex: 1 1 220px; }

.tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.tp-table thead th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  padding: .6rem .5rem;
  border-bottom: 2px solid #e2e8f0;
}
.tp-table tbody td {
  padding: .65rem .5rem;
  border-bottom: 1px solid #f1f5f9;
}
.tp-table tbody tr:hover { background: #f8fafc; }
.tp-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.tp-level {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
  margin-right: 4px;
}
.tp-level--1 { background: #f1f5f9; color: #475569; }
.tp-level--2 { background: #dbeafe; color: #1d4ed8; }
.tp-level--3 { background: #dcfce7; color: #166534; }
.tp-level--4 { background: #fef3c7; color: #b45309; }
.tp-level--5 { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #78350f; box-shadow: 0 2px 6px rgba(251,191,36,.5); }
.tp-code {
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
}
.tp-expiry-warn {
  color: #b91c1c;
  font-weight: 700;
}
.tp-idle {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}
.tp-idle--hot   { background: #dcfce7; color: #166534; }
.tp-idle--warm  { background: #fef3c7; color: #92400e; }
.tp-idle--cool  { background: #fee2e2; color: #991b1b; }
.tp-idle--cold,
.tp-idle--never { background: #1f2937; color: #fef3c7; }

/* =====================================================================
   v326t — Spelling Bee
   ===================================================================== */
.sb-page { max-width: 640px; margin: 0 auto; }
.sb-head { text-align: center; margin-bottom: 1.4rem; }
.sb-progress { display: flex; gap: .35rem; justify-content: center; margin-bottom: 1.4rem; }
.sb-dot {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  font-weight: 700;
  font-size: .85rem;
}
.sb-dot--done { background: #dcfce7; color: #166534; }
.sb-dot--now  {
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  color: #78350f;
  box-shadow: 0 4px 12px -4px rgba(251,191,36,.5);
  transform: scale(1.15);
}
.sb-stage {
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem 1.4rem;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.12);
}
.sb-prompt { text-align: center; margin-bottom: 1rem; }
.sb-play {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #fff;
  border: 0;
  padding: 1rem 1.6rem;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(249,115,22,.5);
  transition: transform 180ms;
}
.sb-play:hover { transform: scale(1.04); }
.sb-play:active { transform: scale(.96); }
.sb-hint { margin: .5rem 0 0; font-size: .85rem; }
.sb-input {
  width: 100%;
  padding: .9rem 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .05em;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  margin: 1rem 0 .8rem;
}
.sb-input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.15); }
.sb-actions {
  display: flex; gap: .5rem; justify-content: center; align-items: center;
  flex-wrap: wrap;
}
.sb-feedback {
  text-align: center;
  font-size: 1rem;
  margin: 1rem 0 0;
  min-height: 1.5rem;
  font-weight: 600;
}
.sb-done-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.2rem 1.4rem;
  text-align: center;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.12);
}
.sb-done-emoji { font-size: 4rem; line-height: 1; margin-bottom: .6rem; animation: sbBounce 600ms ease-out; }
@keyframes sbBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.sb-done-card h3 { margin: .5rem 0; font-size: 1.6rem; }
.bh-act--bee {
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  color: #78350f;
}

/* =====================================================================
   v326u — White-label per school
   When a kid is signed in at a school with a brand_color, the
   home page surface picks up --lc-school-brand for accents.
   ===================================================================== */
.bh-home[style*="--lc-school-brand"] .bh-hero2-cta,
.bh-home[style*="--lc-school-brand"] .bh-prog-pill-tag,
.bh-home[style*="--lc-school-brand"] .bh-expiry-pill--ok {
  background: var(--lc-school-brand) !important;
}
.bh-home[style*="--lc-school-brand"] .bh-hero2-brand-dot--o {
  background: var(--lc-school-brand) !important;
}
.bh-hero2-school-logo {
  width: 28px; height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: #fff;
  margin-right: 6px;
}

/* =====================================================================
   v326y — Assignments (teacher cards + student strip)
   ===================================================================== */
.as-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: .7rem;
}
.as-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.as-card-title { margin: 0 0 .25rem; font-size: 1.05rem; }
.as-card-meta {
  margin: 0;
  font-size: .82rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
  color: #64748b;
}
.as-grade {
  background: #dcfce7;
  color: #166534;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}
.as-due {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}
.as-due--ok      { background: #dbeafe; color: #1e3a8a; }
.as-due--soon    { background: #fef3c7; color: #92400e; }
.as-due--urgent  { background: #fee2e2; color: #991b1b; }
.as-due--past    { background: #1f2937; color: #fde68a; }
.as-card-desc {
  margin: .5rem 0 .5rem;
  font-size: .9rem;
  color: #334155;
  white-space: pre-wrap;
}
.as-card-link {
  display: inline-block;
  font-size: .82rem;
  color: #1d4ed8;
  text-decoration: none;
  margin-bottom: .5rem;
}
.as-card-link:hover { text-decoration: underline; }
.as-card-foot {
  display: flex; gap: .7rem; align-items: center;
  margin-top: .4rem;
  padding-top: .5rem;
  border-top: 1px solid #f1f5f9;
}
.as-prog-bar {
  flex: 1;
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.as-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  transition: width 280ms;
}
.as-prog-text {
  font-size: .78rem;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

/* Student home strip */
.bh-assigns { margin-top: 1rem; }
.bh-asn-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  border-radius: 14px;
  padding: .8rem 1rem;
  margin-bottom: .5rem;
  box-shadow: 0 4px 12px -4px rgba(139, 92, 246, .3);
  transition: opacity 200ms;
}
.bh-asn-card--done {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  opacity: .75;
}
.bh-asn-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.25);
  background: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #059669;
  margin-top: 2px;
  flex-shrink: 0;
}
.bh-asn-card--done .bh-asn-check { background: #10b981; color: #fff; border-color: #047857; }
.bh-asn-check:hover { transform: scale(1.05); }
.bh-asn-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bh-asn-body strong {
  font-size: .98rem;
  line-height: 1.3;
  color: #18181b;
}
.bh-asn-card--done .bh-asn-body strong { text-decoration: line-through; }
.bh-asn-desc {
  font-size: .82rem;
  color: #475569;
  line-height: 1.35;
}
.bh-asn-meta {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  margin-top: 2px;
  font-size: .78rem;
  color: #4338ca;
  font-weight: 600;
}
.bh-asn-link {
  color: #1d4ed8;
  text-decoration: none;
  background: rgba(255,255,255,.5);
  padding: 1px 8px;
  border-radius: 999px;
}
.bh-asn-link:hover { text-decoration: underline; }

/* v326z — WhatsApp parent buttons */
.tp-wa-btn {
  background: #25D366;
  color: #fff;
  border: 0;
  padding: .3rem .55rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.tp-wa-btn:hover { background: #1da851; }
.tp-wa-add {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px dashed #cbd5e1;
  padding: .3rem .55rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tp-wa-add:hover { background: #e2e8f0; color: #1e293b; }

/* =====================================================================
   v326w — This-week focus pill on student home
   ===================================================================== */
.bh-focus {
  margin: 1rem 0;
}
.bh-focus-inner {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #fbbf24;
  border-radius: 14px;
  padding: .75rem 1rem;
  flex-wrap: wrap;
}
.bh-focus-tag {
  background: #18181b;
  color: #fbbf24;
  font-size: .7rem;
  letter-spacing: .08em;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.bh-focus-inner strong {
  font-size: 1.05rem;
  color: #78350f;
  flex: 1 1 auto;
}
.bh-focus-sub {
  font-size: .82rem;
  flex: 0 0 auto;
  color: #92400e;
}

/* Tones — match the legacy bh-expiry-pill palette but for the bigger card */
.sp-access--soon{
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #fbbf24;
}
.sp-access--soon .sp-access-status{ color: #92400e; }
.sp-access--soon .sp-access-date,
.sp-access--soon .sp-access-code  { color: #b45309; }
.sp-access--soon .sp-access-cta   { background: #f59e0b; }
.sp-access--soon .sp-access-cta:hover{ background: #d97706; }

.sp-access--urgent{
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #f87171;
}
.sp-access--urgent .sp-access-status{ color: #991b1b; }
.sp-access--urgent .sp-access-date,
.sp-access--urgent .sp-access-code  { color: #b91c1c; }
.sp-access--urgent .sp-access-cta   { background: #dc2626; }
.sp-access--urgent .sp-access-cta:hover{ background: #b91c1c; }

.sp-access--expired{
  background: linear-gradient(135deg, #1f2937, #374151);
  border-color: #4b5563;
  color: #fff;
}
.sp-access--expired .sp-access-icon{ background: rgba(255,255,255,.18); }
.sp-access--expired .sp-access-status{ color: #fde68a; }
.sp-access--expired .sp-access-date,
.sp-access--expired .sp-access-code  { color: #fed7aa; }
.sp-access--expired .sp-access-code code{ background: rgba(255,255,255,.18); color:#fff; }
.sp-access--expired .sp-access-cta   { background: #f59e0b; color: #18181b; }
.sp-access--expired .sp-access-cta:hover{ background: #fbbf24; }

@media (max-width: 480px){
  .sp-access{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .sp-access-cta{ grid-column: 1 / -1; text-align: center; }
}

.sp-avx-card{
  background: #fff;
  border: 1.5px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  padding: 1rem;
  margin: 1rem 0;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
}
.sp-avx-card-right{ display: grid; gap: .25rem; }

.sp-badges{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .55rem;
  margin: 1rem 0;
}
.sp-badge{
  aspect-ratio: 1;
  background: #f8fafc;
  border: 2px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sp-badge--earned{
  background: linear-gradient(135deg, #FFD100 0%, #FFB300 100%);
  border-color: #FF9500;
  color: #1a1530;
  box-shadow: 0 4px 10px -4px rgba(255,179,0,.6);
}
.sp-badge--locked{ opacity: .35; filter: grayscale(.7); }
.sp-badge-label{
  position: absolute;
  bottom: 4px; left: 0; right: 0;
  font-size: .58rem; font-weight: 800;
  letter-spacing: .04em;
  color: rgba(0,0,0,.65);
  text-transform: uppercase;
}
.lc-confetti-bit{
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 12px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: lcConfettiFall 1.1s ease-out forwards;
}
@keyframes lcConfettiFall{
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--cx, 0), var(--cy, 200px)) rotate(720deg); opacity: 0; }
}
/* v283: per-answer "why" + collapsible "show me the working" block.
   Sits between the verdict (✅ / ❌) and the Next button so the kid
   reads the reason before moving on. */
.lc-found-explain{
  flex: 1 1 100%;
  margin: .15rem 0;
}
.lc-found-why{
  margin: 0 0 .35rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-ink, #15131c);
}
.lc-found-why strong{ color: var(--bh-purple, #4B2DDB); }
.lc-found-working{
  background: rgba(75,45,219,.05);
  border: 1px solid rgba(75,45,219,.18);
  border-radius: 10px;
  padding: .35rem .6rem;
  margin-top: .35rem;
}
.lc-found-working summary{
  cursor: pointer;
  font-weight: 700;
  font-size: .88rem;
  color: var(--bh-purple, #4B2DDB);
  padding: .25rem 0;
  list-style: none;
}
.lc-found-working summary::-webkit-details-marker{ display: none; }
.lc-found-working summary::after{
  content: ' ▼';
  font-size: .72rem;
  opacity: .7;
  margin-left: .3rem;
}
.lc-found-working[open] summary::after{ content: ' ▲'; }
.lc-found-working ol{
  margin: .4rem 0 .25rem;
  padding-left: 1.2rem;
  font-size: .9rem;
  line-height: 1.65;
}
.lc-found-working ol li{ margin-bottom: .2rem; }

.lc-found-done{ display: grid; gap: 1rem; }
.lc-found-done-actions{ display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1rem; }

/* v287: Duolingo-style summary card */
.lc-done-card{
  position: relative;
  background: linear-gradient(160deg, #fff 0%, #f7f5ff 60%, #fff5f0 100%);
  border: 2px solid rgba(75,45,219,.18);
  border-radius: 22px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  box-shadow: 0 12px 28px -16px rgba(75,45,219,.35);
  overflow: hidden;
}
.lc-done-eyebrow{
  display: inline-block;
  font-size: .76rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(75,45,219,.10); color: var(--bh-purple, #4B2DDB);
  padding: .3rem .7rem; border-radius: 999px;
  margin-bottom: .8rem;
}
.lc-done-title{ font-size: 1.8rem; margin: 0 0 1rem; }
.lc-done-stars{
  display: flex; justify-content: center; gap: .4rem;
  font-size: 2.6rem; line-height: 1;
  margin-bottom: 1.4rem;
}
.lc-done-star{
  color: #e2e8f0;
  text-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition: color .4s ease, transform .4s ease;
}
.lc-done-star--on{
  color: #FFD100;
  text-shadow: 0 0 8px rgba(255,209,0,.7), 0 2px 4px rgba(255,179,0,.4);
  animation: lcDoneStarPop .6s ease-out;
}
.lc-done-star--on:nth-child(2){ animation-delay: .15s; }
.lc-done-star--on:nth-child(3){ animation-delay: .3s; }
@keyframes lcDoneStarPop{
  0%   { transform: scale(.4) rotate(-30deg); opacity: 0; color: #e2e8f0; }
  60%  { transform: scale(1.3) rotate(15deg); opacity: 1; color: #FFD100; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.lc-done-stats{
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
@media (max-width: 540px){
  .lc-done-stats{ grid-template-columns: repeat(2, 1fr); }
}
.lc-done-stats li{
  display: grid; gap: .15rem; place-items: center;
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--c-line, #e2e8f0);
  border-radius: 14px;
  padding: .65rem .5rem;
}
.lc-done-stat-icon{ font-size: 1.4rem; line-height: 1; }
.lc-done-stats strong{
  font-family: var(--f-display); font-weight: 900;
  font-size: 1.4rem; color: var(--bh-purple, #4B2DDB);
  line-height: 1;
}
.lc-done-stat-label{
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-soft, #475569);
}
.lc-done-detail{
  font-size: .92rem; color: var(--c-ink-soft, #475569);
  margin: 0 0 .4rem;
}
.lc-done-cta{
  background: linear-gradient(135deg, #009B3A, #00BFA5);
  color: #fff !important;
}
.lc-done-cta:hover{ filter: brightness(1.05); }
.bh-activities-head{
  margin: 1.2rem 0 .4rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .02em;
}

/* Collapsible wrapper — uses native <details>/<summary> so it's
   keyboard-accessible without any JS wiring. Closed by default so the
   home page stays focused on Foundations + PEP; one tap reveals all 6. */
.bh-activities-collapse{
  background: #fff;
  border: 1px solid var(--c-line, #e2e8f0);
  border-radius: 16px;
  padding: .65rem 1rem .8rem;
  margin: 1rem 0 1.2rem;
  transition: box-shadow .2s ease;
}
.bh-activities-collapse[open]{
  box-shadow: 0 6px 18px -12px rgba(75,45,219,.25);
}
.bh-activities-collapse summary{
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  padding: .5rem 0;
  display: flex; align-items: center; gap: .55rem;
  user-select: none;
}
.bh-activities-collapse summary::-webkit-details-marker{ display: none; }
.bh-activities-collapse summary::after{
  content: '▾';
  margin-left: auto;
  font-size: .85rem;
  color: var(--c-ink-soft, #475569);
  transition: transform .2s ease;
}
.bh-activities-collapse[open] summary::after{
  transform: rotate(180deg);
}
.bh-activities-count{
  background: rgba(75,45,219,.10);
  color: var(--bh-purple, #4B2DDB);
  font-size: .76rem;
  padding: .15rem .55rem; border-radius: 999px;
  margin-left: .25rem;
}
.bh-activities-collapse .bh-activities{
  margin: .8rem 0 .2rem;
}

/* =====================================================================
   v294 — EduFox-inspired signed-in home hero (.bh-hero2)
   Lime-green outer band hosting a big white rounded card with a
   split-colour headline, kid-friendly body, orange CTA, lifetime
   stat row, and a right-hand collage of illustrated emoji tiles.
   Scoped entirely under .bh-hero2 so the redesign can be reverted
   by restoring .bh-pro-header in js/app.js renderHome().
   ===================================================================== */
.bh-hero2{
  position: relative;
  margin: 0 0 1.6rem;
  padding: clamp(18px, 4vw, 44px) clamp(40px, 5vw, 64px);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.25) 0%, transparent 45%),
    linear-gradient(135deg, #b8db5a 0%, #9fcf45 55%, #8cc739 100%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(40, 80, 20, .18);
}

/* Decorative leaf/petal emoji at each corner — pure ornament. */
.bh-hero2-leaf{
  position: absolute;
  font-size: clamp(28px, 4vw, 54px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  pointer-events: none;
  opacity: .85;
  animation: bhHero2LeafFloat 6s ease-in-out infinite;
}
.bh-hero2-leaf--tl{ top: 12px;  left: 18%;  transform: rotate(-30deg); animation-delay: 0s; }
.bh-hero2-leaf--tr{ top: 16px;  right: 8%;  transform: rotate(40deg);  animation-delay: 1.5s; }
.bh-hero2-leaf--bl{ bottom: 10px; left: 8%;  transform: rotate(160deg); animation-delay: 3s; }
.bh-hero2-leaf--br{ bottom: 16px; right: 22%;transform: rotate(140deg); animation-delay: 4.5s; }
@keyframes bhHero2LeafFloat{
  0%,100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%    { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}

/* Big sideways "LEARNING" word running up the left edge — soft
   white wash so it reads as a watermark, not a label. */
.bh-hero2-vert{
  position: absolute;
  left: 4px;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 72px);
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  text-shadow: 0 2px 6px rgba(0,0,0,.08);
  pointer-events: none;
}

/* The actual white card sitting on the lime-green band.
   v298: removed the right-side 4-tile collage so the headline + CTA
   could breathe. v301: brought back a two-column grid — content on
   the left, animated mascot on the right (.bh-hero2-bot). */
.bh-hero2-card{
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* Brand chip top-left of the card (two coloured dots + wordmark). */
.bh-hero2-brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: #18181b;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
.bh-hero2-brand-dot{
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
}
.bh-hero2-brand-dot--o{ background: #ff5a1f; margin-right: -8px; }
.bh-hero2-brand-dot--g{ background: #8cc739; }
.bh-hero2-brand-name{ margin-left: .35rem; }

.bh-hero2-eyebrow{
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #ff5a1f;
  margin-bottom: .65rem;
  text-transform: uppercase;
}

/* Big split-colour headline. Poppins for that EduFox geometric feel. */
.bh-hero2-h{
  font-family: "Poppins", var(--f-display, inherit);
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.bh-hero2-h-orange{ color: #ff5a1f; }
.bh-hero2-h-dark  { color: #18181b; }
.bh-hero2-h-green { color: #6cb33f; }
.bh-hero2-h-x{
  display: inline-block;
  margin-left: .35em;
  color: #ff5a1f;
  font-size: .55em;
  vertical-align: middle;
  font-weight: 900;
  transform: rotate(15deg);
}

.bh-hero2-sub{
  color: #57606a;
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.55;
  margin: 0 0 1.3rem;
  max-width: 46ch;
}

/* Orange pill CTA with a circular arrow capsule. */
.bh-hero2-cta{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: #ff5a1f;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  padding: .7rem .85rem .7rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(255,90,31,.32);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bh-hero2-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(255,90,31,.42);
}
.bh-hero2-cta-arrow{
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  background: #fff;
  color: #ff5a1f;
  border-radius: 50%;
  font-weight: 900;
}

/* Bottom-left stat cluster — three stacked avatars + line of
   text — echoing the "17,000 Creators" badge on the reference. */
.bh-hero2-stat{
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px dashed #e5e7eb;
}
.bh-hero2-stat-avis{ display: inline-flex; }
.bh-hero2-stat-av{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid #fff;
  font-size: 19px;
  margin-left: -12px;
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
}
.bh-hero2-stat-av--1{ background: #ffd97a; margin-left: 0; }
.bh-hero2-stat-av--2{ background: #ffb8a4; }
.bh-hero2-stat-av--3{ background: #c8e898; }
.bh-hero2-stat-text strong{
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: #18181b;
}
.bh-hero2-stat-text span{
  display: block;
  font-size: .78rem;
  color: #6a737d;
  margin-top: 2px;
}

/* Right-hand collage of 4 illustrated emoji tiles — alternating
   circles and rounded squares on bright backgrounds. The play
   chips on two of them give the same "video" feel as the source
   reference without needing real video assets. */
.bh-hero2-side{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: 320px;
}
.bh-hero2-tile{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  overflow: hidden;
  transition: transform .25s ease;
}
.bh-hero2-tile:hover{ transform: translateY(-3px) rotate(-1deg); }
.bh-hero2-tile--y{ background: #ffd84a; border-radius: 50%; }
.bh-hero2-tile--b{ background: #29b6e7; border-radius: 28px; }
.bh-hero2-tile--g{ background: #6cb33f; border-radius: 28px; }
.bh-hero2-tile--o{ background: #ff5a1f; border-radius: 50%; }
.bh-hero2-tile-emo{
  font-size: clamp(42px, 5.5vw, 78px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
  animation: bhHero2TileFloat 4.5s ease-in-out infinite;
}
.bh-hero2-tile--y .bh-hero2-tile-emo{ animation-delay: 0s; }
.bh-hero2-tile--b .bh-hero2-tile-emo{ animation-delay: .8s; }
.bh-hero2-tile--g .bh-hero2-tile-emo{ animation-delay: 1.6s; }
.bh-hero2-tile--o .bh-hero2-tile-emo{ animation-delay: 2.4s; }
@keyframes bhHero2TileFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-7px); }
}

/* Play-button chip overlay on the "video" style tiles. */
.bh-hero2-play{
  position: absolute;
  inset: auto;
  width: 46px; height: 46px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #18181b;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-weight: 900;
  padding-left: 3px; /* nudge the ▶ glyph optically centred */
}

/* Tablet & mobile — collapse to single column, hide watermark. */
@media (max-width: 820px){
  .bh-hero2{ padding: clamp(16px, 4vw, 28px); }
  .bh-hero2-vert{ display: none; }
  .bh-hero2-card{
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .bh-hero2-side{ min-height: 0; }
  .bh-hero2-tile-emo{ font-size: 44px; }
  .bh-hero2-leaf--tl,
  .bh-hero2-leaf--tr,
  .bh-hero2-leaf--bl,
  .bh-hero2-leaf--br{ font-size: 28px; }
}
@media (max-width: 480px){
  .bh-hero2-h{ font-size: 30px; }
  .bh-hero2-stat-av{ width: 36px; height: 36px; font-size: 17px; }
}

/* =====================================================================
   v301 — Animated mascot in the EduFox hero's right column.
   Reuses the existing .bh-hero-bot CSS robot (defined in v5-bold-home.css)
   but wraps it in .bh-hero2-bot so it sits *inside* the grid column
   instead of being absolute-positioned to the marketing hero's corner.
   ===================================================================== */
.bh-hero2-bot{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  /* The .bh-hero-bot inside is absolute-positioned by default for the
     anonymous home hero — scope it back to relative here so it lands
     inside this grid cell. */
}
.bh-hero2-bot .bh-hero-bot{
  position: relative;
  right: auto;
  bottom: auto;
  width: 340px;
  height: 410px;
  /* Drift animation already on the base class — preserved. */
}

/* v303: big-bot variant — pushed everything ~35% bigger than v302
   so the mascot fills the right column with presence. Still scoped
   under .bh-hero2-bot so the slim marketing-hero robot stays small. */
.bh-hero2-bot .bh-hero-bot-shadow{ width: 200px; height: 22px; bottom: 6px; }
.bh-hero2-bot .bh-hero-bot-antenna{ width: 32px; height: 48px; }
.bh-hero2-bot .bh-hero-bot-antenna-stick{ width: 5px; height: 30px; }
.bh-hero2-bot .bh-hero-bot-antenna-bulb{ width: 28px; height: 28px; }
.bh-hero2-bot .bh-hero-bot-head{
  top: 46px;
  width: 180px;
  height: 140px;
  border-radius: 34px 34px 28px 28px;
  border-width: 5px;
}
.bh-hero2-bot .bh-hero-bot-eye{ top: 48px; width: 24px; height: 24px; }
.bh-hero2-bot .bh-hero-bot-eye-l{ left: 30px; }
.bh-hero2-bot .bh-hero-bot-eye-r{ right: 30px; }
.bh-hero2-bot .bh-hero-bot-mouth{ width: 54px; height: 24px; bottom: 22px; border-width: 5px; border-top: none; border-radius: 0 0 28px 28px; }
.bh-hero2-bot .bh-hero-bot-torso{
  top: 200px;
  width: 220px;
  height: 140px;
  border-radius: 26px;
  border-width: 5px;
}
.bh-hero2-bot .bh-hero-bot-chip{ font-size: 1.4rem; bottom: 16px; }
.bh-hero2-bot .bh-hero-bot-arm{
  top: 18px;
  width: 30px; height: 82px;
  border-width: 5px;
  border-radius: 16px;
}
.bh-hero2-bot .bh-hero-bot-arm-l{ left: -32px; }
.bh-hero2-bot .bh-hero-bot-arm-r{ right: -32px; }
.bh-hero2-bot .bh-hero-bot-spark{ font-size: 1.8rem; }
/* v303: more headroom for the right column so the bigger bot sits
   without crowding the text. v310: scope to desktop+ only — without
   the min-width guard this rule was overriding the (max-width: 820px)
   single-column rule above, leaving mobile with a cramped 2-col
   layout (109px text + 95px empty bot column). */
@media (min-width: 821px){
  .bh-hero2-card{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* v313: bring the mascot back on mobile — kids love it and the
   earlier v301 decision to hide it under 820px was over-cautious.
   At small widths we shrink it to ~55% of desktop and let it sit
   above the headline (the hero card is single-column on mobile).
   Cap min-height so the wrapper doesn't add ~460px of dead space.
   The v5-bold-home rule .bh-hero-bot{display:none} (anonymous-hero
   responsive hide) was bleeding through — explicitly re-enable
   under our scoped .bh-hero2-bot wrapper. */
@media (max-width: 820px){
  .bh-hero2-bot{
    min-height: 280px;
    margin: 0 auto .4rem;
  }
  .bh-hero2-bot .bh-hero-bot{ display: block; width: 200px; height: 240px; }
  .bh-hero2-bot .bh-hero-bot-shadow{ width: 130px; height: 16px; bottom: 4px; }
  .bh-hero2-bot .bh-hero-bot-antenna{ width: 22px; height: 34px; }
  .bh-hero2-bot .bh-hero-bot-antenna-stick{ width: 4px; height: 22px; }
  .bh-hero2-bot .bh-hero-bot-antenna-bulb{ width: 20px; height: 20px; }
  .bh-hero2-bot .bh-hero-bot-head{
    top: 32px; width: 124px; height: 96px;
    border-radius: 24px 24px 20px 20px; border-width: 4px;
  }
  .bh-hero2-bot .bh-hero-bot-eye{ top: 32px; width: 16px; height: 16px; }
  .bh-hero2-bot .bh-hero-bot-eye-l{ left: 22px; }
  .bh-hero2-bot .bh-hero-bot-eye-r{ right: 22px; }
  .bh-hero2-bot .bh-hero-bot-mouth{
    width: 36px; height: 16px; bottom: 14px;
    border-width: 4px; border-top: none; border-radius: 0 0 20px 20px;
  }
  .bh-hero2-bot .bh-hero-bot-torso{
    top: 138px; width: 152px; height: 94px;
    border-radius: 20px; border-width: 4px;
  }
  .bh-hero2-bot .bh-hero-bot-chip{ font-size: 1rem; bottom: 10px; }
  .bh-hero2-bot .bh-hero-bot-arm{
    top: 12px; width: 22px; height: 58px;
    border-width: 4px; border-radius: 12px;
  }
  .bh-hero2-bot .bh-hero-bot-arm-l{ left: -22px; }
  .bh-hero2-bot .bh-hero-bot-arm-r{ right: -22px; }
  .bh-hero2-bot .bh-hero-bot-spark{ font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .bh-hero2-bot .bh-hero-bot{ animation: none !important; }
}

/* =====================================================================
   AUTH V2 — 3-tab sign-in card (Student / Teacher / Master Admin)
   Scoped under .bh-auth-v2 so it stacks ON TOP of any legacy .bh-auth
   styles without bleed. Tabs + inputs + CTA reuse the lime/purple
   palette of the rest of the home for visual continuity.
   ===================================================================== */
.bh-auth-v2 .bh-auth-card--v2{
  max-width: 460px;
  margin: 1.5rem auto;
  padding: 1.6rem 1.4rem 1.8rem;
}

.bh-auth-v2 .bh-auth-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  background: #f1f3fa;
  padding: .35rem;
  border-radius: 14px;
  margin: 1rem 0 1.2rem;
}
.bh-auth-v2 .bh-auth-tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: #475569;
  padding: .55rem .4rem;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font: inherit;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.bh-auth-v2 .bh-auth-tab strong{
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.bh-auth-v2 .bh-auth-tab-emo{
  font-size: 1.4rem;
  line-height: 1;
}
.bh-auth-v2 .bh-auth-tab:hover{ color: #1a1530; }
.bh-auth-v2 .bh-auth-tab.is-active{
  background: linear-gradient(135deg, #4B2DDB 0%, #6849F0 100%);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(75,45,219,.45);
  transform: translateY(-1px);
}

.bh-auth-v2 .bh-auth-tab-body{
  min-height: 320px;
}

.bh-auth-v2 .bh-auth-form{
  display: grid;
  gap: .9rem;
}
.bh-auth-v2 .bh-auth-field{
  display: grid;
  gap: .35rem;
}
.bh-auth-v2 .bh-auth-label{
  font-size: .85rem;
  font-weight: 700;
  color: #1a1530;
}
.bh-auth-v2 .bh-auth-label small{
  font-weight: 500;
  font-size: .78rem;
  color: #6b7280;
}
.bh-auth-v2 .bh-auth-form input{
  appearance: none;
  border: 2px solid #d8d8e8;
  border-radius: 10px;
  padding: .65rem .85rem;
  font: inherit;
  font-size: 1rem;
  background: #fff;
  color: #1a1530;
  transition: border-color .14s, box-shadow .14s;
}
.bh-auth-v2 .bh-auth-form input:focus{
  outline: none;
  border-color: #4B2DDB;
  box-shadow: 0 0 0 4px rgba(75,45,219,.12);
}
.bh-auth-v2 .bh-auth-input-mono{
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.bh-auth-v2 .bh-auth-input-pin{
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.8rem;
  letter-spacing: .35em;
  text-align: center;
  padding: .65rem .4rem;
  /* Hide the iOS/Android "show password" eye for tel inputs */
  -webkit-text-security: none;
}

.bh-auth-v2 .bh-auth-cta{
  background: linear-gradient(135deg, #FF6B00 0%, #FF9A3D 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.4rem;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(255,107,0,.6);
  transition: transform .14s, box-shadow .14s, filter .14s;
  margin-top: .4rem;
}
.bh-auth-v2 .bh-auth-cta:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -8px rgba(255,107,0,.7);
}
.bh-auth-v2 .bh-auth-cta:disabled{
  opacity: .65;
  cursor: not-allowed;
  filter: saturate(.7);
}
.bh-auth-v2 .bh-auth-cta-ghost{
  background: transparent;
  border: 2px solid #d8d8e8;
  color: #1a1530;
  border-radius: 999px;
  padding: .65rem 1.2rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .8rem;
}

.bh-auth-v2 .bh-auth-helper{
  margin: .2rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
}
.bh-auth-v2 .bh-auth-err{
  margin: 0;
  padding: .55rem .8rem;
  background: #fff0f0;
  border: 1px solid #ffd5d5;
  color: #b91c1c;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
}

.bh-auth-v2 .bh-auth-info{
  text-align: center;
  padding: 1.2rem .6rem;
}
.bh-auth-v2 .bh-auth-info-mascot{
  font-size: 2.4rem;
  margin-bottom: .4rem;
}
.bh-auth-v2 .bh-auth-info h3{
  margin: 0 0 .5rem;
  font-family: var(--f-display, inherit);
  font-size: 1.25rem;
}
.bh-auth-v2 .bh-auth-info p{
  margin: 0 auto .8rem;
  max-width: 32ch;
  font-size: .94rem;
  line-height: 1.5;
  color: #475569;
}

.bh-auth-v2 .bh-auth-foot{
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: .86rem;
  color: #6b7280;
}
.bh-auth-v2 .bh-auth-foot a{
  color: #4B2DDB;
  text-decoration: none;
  font-weight: 700;
}
.bh-auth-v2 .bh-auth-foot a:hover{ text-decoration: underline; }
.bh-auth-v2 .bh-auth-foot-sep{
  margin: 0 .55rem;
  color: #cbd5e1;
}

@media (max-width: 520px){
  .bh-auth-v2 .bh-auth-card--v2{
    margin: 1rem .8rem;
    padding: 1.3rem 1rem 1.5rem;
  }
  .bh-auth-v2 .bh-auth-tab-emo{ font-size: 1.2rem; }
  .bh-auth-v2 .bh-auth-tab strong{ font-size: .76rem; }
  .bh-auth-v2 .bh-auth-input-pin{ font-size: 1.5rem; }
}

/* =====================================================================
   v314 — Welcome-with-expiry card (one-time on first sign-in) +
   persistent "X days left" pill in the hero stat row.
   ===================================================================== */
.bh-welcome {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 1.4rem;
  margin: 0 0 1.2rem;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.4) 0%, transparent 50%),
    linear-gradient(135deg, #ffd84a 0%, #fbbf24 60%, #f59e0b 100%);
  color: #18181b;
  border-radius: 18px;
  box-shadow: 0 12px 30px -10px rgba(245, 158, 11, .45);
  animation: bhWelcomePopIn .35s ease-out;
  overflow: hidden;
}
.bh-welcome--expired {
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.3) 0%, transparent 50%),
    linear-gradient(135deg, #fca5a5 0%, #ef4444 60%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(220, 38, 38, .5);
}
.bh-welcome--leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
@keyframes bhWelcomePopIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bh-welcome-emoji {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  align-self: center;
}
.bh-welcome-body { min-width: 0; }
.bh-welcome-title {
  display: block;
  font-family: 'Poppins', 'Baloo 2', Fredoka, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: .25rem;
  line-height: 1.15;
}
.bh-welcome-text {
  margin: 0 0 .4rem;
  font-size: .95rem;
  line-height: 1.45;
  color: inherit;
}
.bh-welcome-text strong { font-weight: 800; }
.bh-welcome-code {
  background: rgba(0,0,0,.12);
  padding: .1rem .5rem;
  border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .04em;
}
.bh-welcome--expired .bh-welcome-code { background: rgba(255,255,255,.22); }
.bh-welcome-hint {
  font-size: .85rem;
  opacity: .9;
  padding: .55rem .8rem;
  background: rgba(255,255,255,.4);
  border-radius: 10px;
  margin: .5rem 0 .6rem;
}
.bh-welcome--expired .bh-welcome-hint { background: rgba(255,255,255,.18); }
.bh-welcome-actions {
  display: flex; gap: .55rem; flex-wrap: wrap;
  margin-top: .25rem;
}
.bh-welcome-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  font-family: inherit;
}
.bh-welcome-btn--primary {
  background: #18181b;
  color: #fff;
}
.bh-welcome-btn--primary:hover { background: #000; transform: translateY(-1px); }
.bh-welcome--expired .bh-welcome-btn--primary {
  background: #fff; color: #dc2626;
}
.bh-welcome-btn--ghost {
  background: rgba(255,255,255,.5);
  color: inherit;
}
.bh-welcome-btn--ghost:hover { background: rgba(255,255,255,.7); }
.bh-welcome-close {
  position: absolute;
  top: 10px; right: 12px;
  background: rgba(0,0,0,.1);
  color: inherit;
  border: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.bh-welcome-close:hover { background: rgba(0,0,0,.2); }
.bh-welcome--expired .bh-welcome-close { background: rgba(255,255,255,.18); }
.bh-welcome--expired .bh-welcome-close:hover { background: rgba(255,255,255,.3); }

@media (max-width: 640px){
  .bh-welcome { grid-template-columns: 1fr; padding: 1rem 1.1rem; gap: .6rem; }
  .bh-welcome-emoji { font-size: 2rem; align-self: flex-start; }
  .bh-welcome-title { font-size: 1.1rem; }
  .bh-welcome-text { font-size: .9rem; }
}

/* Persistent expiry pill in the hero stat row */
.bh-expiry-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
  margin-left: auto;
}
.bh-expiry-pill:hover { transform: translateY(-1px); }
.bh-expiry-pill-emoji { font-size: .9rem; line-height: 1; }
.bh-expiry-pill--ok {
  background: #dcfce7; color: #166534;
}
.bh-expiry-pill--soon {
  background: #ffedd5; color: #9a3412;
}
.bh-expiry-pill--urgent {
  background: #fee2e2; color: #991b1b;
  animation: bhExpiryPulse 1.8s ease-in-out infinite;
}
.bh-expiry-pill--expired {
  background: #991b1b; color: #fff;
}
@keyframes bhExpiryPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

@media (max-width: 640px){
  .bh-expiry-pill {
    margin-left: 0;
    margin-top: .5rem;
    align-self: flex-start;
  }
}

/* =====================================================================
   v315 — School Shoutouts (teacher posts visible to students)
   Two surfaces: the teacher /#/shoutouts page (.shout-*) and the
   student home strip (.bh-shouts*).
   ===================================================================== */

/* ---- Teacher feed (post + list) ---- */
.shout-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.shout-card--pinned {
  border-color: #fbbf24;
  background: #fffbeb;
}
.shout-pin {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  background: #fbbf24;
  color: #18181b;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: .4rem;
}
.shout-body {
  margin: 0 0 .4rem;
  font-size: .95rem;
  line-height: 1.5;
  color: #18181b;
  white-space: pre-wrap;
  word-break: break-word;
}
.shout-meta {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem;
  color: #64748b;
  flex-wrap: wrap;
}
.shout-meta button { margin-left: auto; }

/* ---- Student home strip ---- */
.bh-shouts {
  margin: 1.4rem 0 1rem;
}
.bh-shouts-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-bottom: .6rem; flex-wrap: wrap;
}
.bh-shouts-sub {
  font-size: .85rem;
}
.bh-shout-card {
  position: relative;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 14px;
  padding: .9rem 1.1rem;
  margin-bottom: .5rem;
  box-shadow: 0 4px 12px -4px rgba(251, 191, 36, .35);
  color: #18181b;
}
.bh-shout-card--pinned {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  box-shadow: 0 4px 12px -4px rgba(249, 115, 22, .4);
}
.bh-shout-pin {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 1rem;
}
.bh-shout-body {
  margin: 0 0 .35rem;
  font-size: .96rem;
  line-height: 1.45;
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 1.5rem;
}
.bh-shout-meta {
  display: flex; gap: .35rem; flex-wrap: wrap;
  font-size: .78rem;
  color: #92400e;
  font-weight: 600;
}

/* =====================================================================
   v325 — School Documents / Class Materials
   Teacher list (.doc-*) + student home strip (.bh-mat-*).
   ===================================================================== */

/* ---- Teacher list ---- */
.doc-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  background: #fff;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.doc-card--pinned {
  border-color: #fbbf24;
  background: #fffbeb;
}
.doc-icon {
  font-size: 1.6rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: #f1f5f9;
  border-radius: 10px;
}
.doc-card--pinned .doc-icon { background: #fef3c7; }
.doc-title {
  margin: 0 0 .35rem;
  font-size: 1rem;
  line-height: 1.35;
}
.doc-title a {
  color: #1d4ed8;
  text-decoration: none;
  word-break: break-word;
}
.doc-title a:hover { text-decoration: underline; }
.doc-desc {
  margin: 0 0 .45rem;
  font-size: .88rem;
  color: #475569;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.doc-meta {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem;
  color: #64748b;
  flex-wrap: wrap;
}
.doc-meta button { margin-left: auto; }
.doc-kind {
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .04em;
}
.doc-grade {
  background: #dcfce7;
  color: #166534;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .04em;
}
.doc-grade--all {
  background: #fee2e2;
  color: #991b1b;
}

/* ---- Student home strip ---- */
.bh-materials { margin-top: 1rem; }
.bh-mat-card {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  box-shadow: 0 4px 12px -4px rgba(59, 130, 246, .35);
  padding: 0; /* link fills the card */
  overflow: hidden;
}
.bh-mat-card.bh-shout-card--pinned {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .45);
}
.bh-mat-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  color: #1e3a8a;
  text-decoration: none;
}
.bh-mat-link:hover { background: rgba(255,255,255,.2); }
.bh-mat-icon {
  font-size: 1.8rem;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.6);
  border-radius: 12px;
}
.bh-mat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bh-mat-text strong {
  font-size: .98rem;
  line-height: 1.3;
  word-break: break-word;
}
.bh-mat-desc {
  font-size: .82rem;
  color: #1e40af;
  line-height: 1.35;
}
.bh-mat-meta {
  font-size: .75rem;
  color: #3730a3;
  font-weight: 600;
}
.bh-mat-arrow {
  font-size: 1.4rem;
  color: #1d4ed8;
  font-weight: 700;
}

/* =====================================================================
   v325 — Messages hero card + polished empty states
   ===================================================================== */
.msgs-hero{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.3rem 1.6rem;
  border-radius: 20px;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
}
.msgs-hero--student{
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 55%, #fbbf24 100%);
  color: #18181b;
  box-shadow: 0 12px 32px -16px rgba(251, 191, 36, .6);
}
.msgs-hero--teacher{
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 55%, #a78bfa 100%);
  color: #18181b;
  box-shadow: 0 12px 32px -16px rgba(139, 92, 246, .55);
}
.msgs-hero-emoji{
  font-size: 2.8rem;
  width: 4.2rem; height: 4.2rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 22px;
  flex-shrink: 0;
}
.msgs-hero-body{ display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.msgs-hero-eyebrow{
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}
.msgs-hero-title{
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 800;
}
.msgs-hero-sub{
  margin: .15rem 0 0;
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(0,0,0,.7);
  max-width: 56ch;
}
.msgs-hero-cta{
  background: #18181b;
  color: #fff;
  border: 0;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.msgs-hero-cta:hover{ background: #0f0f10; transform: translateY(-1px); }
.msgs-hero-cta span{ font-size: 1.1rem; }

@media (max-width: 720px){
  .msgs-hero{ grid-template-columns: auto 1fr; padding: 1rem 1.1rem; }
  .msgs-hero-cta{ grid-column: 1 / -1; justify-content: center; }
  .msgs-hero-title{ font-size: 1.25rem; }
}

/* Inbox column header + empty state */
.msgs-list-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 .6rem;
}
.msgs-list-head h3{ margin: 0; font-size: .95rem; }
.msgs-list-head .muted{
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
}
.msgs-loading{
  font-size: .85rem;
  padding: .5rem 0;
}
.msgs-list-empty{
  text-align: center;
  padding: 1.2rem .4rem;
  color: #64748b;
}
.msgs-list-empty span{
  font-size: 2rem;
  display: block;
  margin-bottom: .35rem;
  opacity: .7;
}
.msgs-list-empty p{
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
}

/* Thread-pane empty state (the big polished one) */
.msgs-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 1.6rem;
  text-align: center;
  height: 100%;
  gap: .6rem;
}
.msgs-empty h3{
  margin: .4rem 0 .1rem;
  font-size: 1.25rem;
  color: #1e293b;
}
.msgs-empty p{
  margin: 0;
  font-size: .95rem;
  color: #475569;
  max-width: 38ch;
  line-height: 1.5;
}
.msgs-empty-illus{
  position: relative;
  width: 110px; height: 110px;
  display: grid; place-items: center;
}
.msgs-empty-bubble{
  font-size: 3.6rem;
  display: grid; place-items: center;
  width: 100px; height: 100px;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  border-radius: 50% 50% 50% 14px;
  box-shadow: 0 16px 30px -12px rgba(99, 102, 241, .4);
  animation: msgsFloat 4s ease-in-out infinite;
}
.msgs-empty--student .msgs-empty-bubble{
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  box-shadow: 0 16px 30px -12px rgba(251, 191, 36, .55);
}
.msgs-empty-spark{
  position: absolute;
  font-size: 1.4rem;
  animation: msgsSpark 2.6s ease-in-out infinite;
}
.msgs-empty-spark--a{ top: -4px; right: -2px; animation-delay: 0s; }
.msgs-empty-spark--b{ bottom: 0; left: -8px; animation-delay: 1.1s; font-size: 1.1rem; }
@keyframes msgsFloat{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-6px) rotate(2deg); }
}
@keyframes msgsSpark{
  0%,100%{ transform: scale(.7); opacity: .55; }
  50%{ transform: scale(1.1); opacity: 1; }
}
.msgs-helpcard{
  margin-top: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .85rem 1rem;
  max-width: 380px;
  text-align: left;
  width: 100%;
  font-size: .88rem;
}
.msgs-helpcard--kid{
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  border-color: #fdba74;
}
.msgs-helpcard strong{ display: block; margin-bottom: .4rem; font-size: .92rem; color: #18181b; }
.msgs-helpcard ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.msgs-helpcard li{
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  line-height: 1.4;
  color: #334155;
}
.msgs-helpcard--kid li{ color: #7c2d12; }

/* =====================================================================
   v324 — Messages (inbox + thread + compose)
   ===================================================================== */
.msgs-page { padding-top: 0; }
.msgs-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
  height: calc(100vh - 320px);
  min-height: 480px;
  margin-top: 1rem;
}
.msgs-list {
  background: #fff;
  border-radius: 12px;
  padding: .8rem;
  overflow-y: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.msgs-thread {
  background: #fff;
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.msgs-thread-card {
  position: relative;
  display: block;
  padding: .55rem .7rem;
  margin-bottom: .35rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.msgs-thread-card:hover { background: #f6f7fb; }
.msgs-thread-card.is-active { background: #fff7ed; border-color: #fdba74; }
.msgs-thread-card--unread { background: #fef3c7; }
.msgs-thread-card-top {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .85rem;
}
.msgs-thread-time { color: #94a3b8; font-size: .72rem; flex-shrink: 0; }
.msgs-thread-preview {
  font-size: .8rem; color: #475569; margin: .25rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msgs-thread-dot {
  position: absolute; top: .5rem; right: .5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5a1f;
}
.msgs-thread-head {
  padding: .8rem 1rem; border-bottom: 1px solid #e5e7eb;
  display: flex; justify-content: space-between; align-items: center;
  background: #f8fafc;
}
.msgs-msgs {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.msg {
  max-width: 78%;
  background: #f1f5f9;
  padding: .55rem .8rem;
  border-radius: 14px 14px 14px 4px;
  font-size: .9rem;
  align-self: flex-start;
}
.msg--mine {
  background: #ff5a1f;
  color: #fff;
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
}
.msg--mine .muted { color: #ffd8c2; }
.msg-meta { font-size: .72rem; color: #64748b; margin-bottom: .2rem; }
.msg p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.msgs-compose {
  display: flex; gap: .5rem; padding: .6rem .8rem;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}
.msgs-compose textarea {
  flex: 1; resize: none; border-radius: 8px;
  border: 1px solid #cbd5e1; padding: .5rem .7rem;
  font-family: inherit; font-size: .9rem;
}
.msgs-empty {
  flex: 1; display: grid; place-items: center;
  text-align: center; padding: 2rem; color: #64748b;
}
.msgs-empty p { margin: .5rem 0; }

@media (max-width: 720px){
  .msgs-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .msgs-list { max-height: 220px; }
  .msgs-thread { min-height: 360px; }
}

/* Simple modal backdrop reused by the New-message dialog */
.lc-modal-back {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: grid; place-items: center; padding: 1rem; z-index: 200;
}
.lc-modal {
  background: #fff; border-radius: 12px; padding: 1rem 1.2rem;
  width: 100%; max-width: 520px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}

/* v325 — Friendlier recipient picker in the New-message dialog */
.msg-picked {
  display: flex; flex-wrap: wrap; gap: .35rem;
  min-height: 1.4rem;
  margin-bottom: .5rem;
}
.msg-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 2px 8px 2px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}
.msg-chip small { font-weight: 500; opacity: .8; }
.msg-chip--tea { background: #dbeafe; color: #1e3a8a; }
.msg-chip--stu { background: #dcfce7; color: #14532d; }
.msg-chip button {
  background: rgba(0,0,0,.08);
  border: 0;
  color: inherit;
  width: 18px; height: 18px;
  border-radius: 999px;
  margin-left: 4px;
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
  display: grid; place-items: center;
}
.msg-chip button:hover { background: rgba(0,0,0,.18); }

.msg-recip-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 10;
}
.msg-recip-group {
  padding: .35rem .6rem;
  font-size: .75rem;
  letter-spacing: .03em;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.msg-recip-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  padding: .5rem .6rem;
  cursor: pointer;
  text-align: left;
  font-size: .9rem;
  border-bottom: 1px solid #f1f5f9;
}
.msg-recip-row:hover { background: #eff6ff; }
.msg-recip-row small { color: #64748b; font-weight: 500; }
.msg-recip-empty {
  padding: .8rem;
  font-size: .85rem;
  color: #64748b;
  text-align: center;
}

/* =====================================================================
   v326 — Messages FAB for students (floating shortcut)
   ===================================================================== */
.lc-msg-fab {
  position: fixed;
  right: 18px;
  bottom: 86px;            /* sits just above the Brain FAB stack */
  z-index: 60;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  box-shadow: 0 12px 24px -6px rgba(249, 115, 22, .55);
  text-decoration: none;
  color: #fff;
  transition: transform 180ms cubic-bezier(.2,.8,.25,1), box-shadow 180ms;
}
.lc-msg-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 32px -6px rgba(249, 115, 22, .65);
}
.lc-msg-fab-icon {
  font-size: 1.6rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.lc-msg-fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

@media (max-width: 720px){
  .lc-msg-fab {
    right: 14px;
    bottom: calc(78px + var(--mobile-bar-h, 64px));
    width: 52px; height: 52px;
  }
  .lc-msg-fab-icon { font-size: 1.4rem; }
}

/* =====================================================================
   v326 — Messages card on the student Profile
   ===================================================================== */
.sp-msg-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1.5px solid #fbbf24;
  border-radius: 16px;
  padding: .85rem 1rem;
  margin: .7rem 0 1rem;
  text-decoration: none;
  color: #18181b;
  transition: transform 180ms, box-shadow 180ms;
}
.sp-msg-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(251, 191, 36, .5);
}
.sp-msg-card--unread {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #f87171;
}
.sp-msg-icon {
  font-size: 1.6rem;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 999px;
}
.sp-msg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-msg-body strong { font-size: 1rem; color: #18181b; }
.sp-msg-body span { font-size: .85rem; color: #92400e; font-weight: 600; }
.sp-msg-card--unread .sp-msg-body span { color: #b91c1c; }
.sp-msg-arrow {
  font-size: 1.3rem;
  color: #92400e;
  font-weight: 700;
}
.sp-msg-card--unread .sp-msg-arrow { color: #b91c1c; }

/* =====================================================================
   v326d — Teacher-name typeahead on the student signin form
   ===================================================================== */
.bh-auth-typeahead {
  position: relative;
}
.bh-auth-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  z-index: 60;
}
.bh-auth-suggest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  padding: .55rem .75rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #18181b;
  border-bottom: 1px solid #f1f5f9;
}
.bh-auth-suggest-row:last-child { border-bottom: 0; }
.bh-auth-suggest-row:hover,
.bh-auth-suggest-row:focus-visible {
  background: #f0e6ff;
  outline: none;
}
.bh-auth-suggest-grade {
  background: #dcfce7;
  color: #166534;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
}