/* ═══════════════════════════════════════════════════════════════
   Math Hero — V2.2 styles: daily workout, weekly missions, answer
   explanations, onboarding + placement, the parents' area and the
   Parent Pro paywall.

   Mirrors the iOS 2.2.0 look (ParentDesign.swift, OnboardingView.swift).
   RTL-aware; animation is transform/opacity only so it stays at 60fps
   inside the Android WebView.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Screen shell (matches the map/shop screens) ─── */
#parentScreen { display: none; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
body.view-parent #parentScreen { display: flex; animation: viewWarp .38s var(--m-snappy); }
body.view-parent #homeScreen,
body.view-parent #mapScreen,
body.view-parent #playScreen,
body.view-parent #shopScreen { display: none; }

#parentTop { display: flex; align-items: center; gap: 6px; flex: none; }
#parentTitle {
  flex: 1; min-width: 0; font-weight: 900; font-size: 16px;
  color: var(--title-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#parentScroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 12px;
}
#parentScroll::-webkit-scrollbar { display: none; }

/* ─── Shared card ─── */
.pCard {
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
  border-radius: 20px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 1px 0 var(--card-topline);
  animation: pCardIn .4s var(--m-snappy) both;
}
@keyframes pCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pCardHead { display: flex; align-items: center; gap: 8px; }
.pCardHead b { font-size: 14px; font-weight: 900; flex: 1; min-width: 0; }
.pCardHead .pIcon { font-size: 18px; }
.pCardHead .pPill {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgba(132, 94, 194, .22); color: var(--purple); border: 1px solid rgba(132, 94, 194, .4);
}
.pNote { font-size: 12px; font-weight: 600; color: var(--text-secondary); line-height: 1.55; }

/* ─── Stat tiles ─── */
.pStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.pStat {
  background: var(--track-fill); border-radius: 14px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pStat b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pStat span { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-align: center; }
.pStat.up b { color: var(--green); }
.pStat.down b { color: var(--red); }

/* ─── Weekly bars ─── */
.pBars { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding-top: 4px; }
.pBarCol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.pBarTrack {
  flex: 1; width: 100%; min-height: 4px; border-radius: 8px; background: var(--track-fill);
  display: flex; align-items: flex-end; overflow: hidden;
}
.pBarTrack i {
  display: block; width: 100%; border-radius: 8px;
  background: linear-gradient(180deg, var(--teal), var(--purple));
  transform-origin: bottom; animation: pBarGrow .5s var(--m-snappy) both;
}
@keyframes pBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.pBarCol small { font-size: 9px; font-weight: 800; color: var(--text-faint); }
.pBarCol.today small { color: var(--yellow); }

/* ─── Skill rows ─── */
.pSkill { display: flex; align-items: center; gap: 8px; }
.pSkill .pSkillEmoji { font-size: 16px; width: 22px; text-align: center; }
.pSkill .pSkillName { flex: 1; min-width: 0; font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pSkillBar { width: 74px; height: 7px; border-radius: 999px; background: var(--track-fill); overflow: hidden; }
.pSkillBar i { display: block; height: 100%; border-radius: 999px; background: var(--teal); }
.pSkillBar.weak i { background: var(--orange); }
.pSkill .pSkillPct { font-size: 11px; font-weight: 800; width: 30px; text-align: end;
  font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ─── Controls (toggles, steppers, chips) ─── */
.pRow {
  display: flex; align-items: center; gap: 10px;
  background: var(--track-fill); border-radius: 14px; padding: 10px 12px; min-height: 46px;
}
.pRow .pRowLbl { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.pRow .pRowSub { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
.pStepper { display: flex; align-items: center; gap: 6px; }
.pStepper button {
  width: 30px; height: 30px; border-radius: 50%; font-size: 16px; font-weight: 900;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
}
.pStepper button:active { transform: scale(.9); }
.pStepper b { min-width: 52px; text-align: center; font-size: 13px; font-weight: 900;
  font-variant-numeric: tabular-nums; }
.pChips { display: flex; flex-wrap: wrap; gap: 6px; }
.pChip {
  font-size: 11px; font-weight: 700; padding: 7px 11px; border-radius: 999px;
  background: var(--card-fill); border: 1px solid var(--card-stroke); color: var(--text-secondary);
}
.pChip.on { background: rgba(78, 205, 196, .2); border-color: rgba(78, 205, 196, .55); color: var(--teal); }
.pChip:active { transform: scale(.94); }
.pBtn {
  border-radius: 14px; padding: 12px; font-size: 13px; font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--teal)); color: #fff;
  box-shadow: 0 6px 16px rgba(132, 94, 194, .35);
}
.pBtn.ghost { background: var(--track-fill); color: var(--text-primary); box-shadow: none; }
.pBtn:active { transform: scale(.96); }
.pBtn[disabled] { opacity: .45; }

/* Pro lock veil over a card the parent has not subscribed to. */
.pLocked { position: relative; }
.pLocked > .pLockVeil {
  position: absolute; inset: 0; border-radius: 20px; z-index: 2;
  background: color-mix(in srgb, var(--bg-mid) 72%, transparent);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 800; text-align: center; padding: 12px;
}

/* ─── Daily workout card (home) ─── */
#workoutCard, #weeklyCard { display: flex; flex-direction: column; gap: 8px; flex: none; }
#workoutCard:empty, #weeklyCard:empty { display: none; }
.woCard {
  background: linear-gradient(135deg, rgba(78, 205, 196, .18), rgba(132, 94, 194, .16));
  border: 1px solid rgba(78, 205, 196, .38);
  border-radius: 18px; padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.woCard.done { background: var(--card-fill); border-color: var(--card-stroke); }
.woEmoji { font-size: 26px; flex: none; }
.woInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.woInfo b { font-size: 13px; font-weight: 900; }
.woInfo small { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.woChips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.woChip {
  font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 999px;
  background: var(--track-fill); color: var(--text-secondary);
}
.woBtn {
  flex: none; padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 900;
  background: linear-gradient(135deg, var(--teal), var(--green)); color: #06302c;
  box-shadow: 0 5px 14px rgba(78, 205, 196, .4);
}
.woBtn:active { transform: scale(.94); }
.woDone { font-size: 20px; flex: none; }

/* ─── Weekly missions + modes card ─── */
.wkHead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900;
  color: var(--text-secondary); padding: 0 2px; }
.wkRow {
  display: flex; align-items: center; gap: 9px;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
  border-radius: 16px; padding: 10px 12px;
}
.wkRow .wkEmoji { font-size: 18px; flex: none; }
.wkRow .wkInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wkRow .wkInfo b { font-size: 12px; font-weight: 800; }
.wkTrack { height: 6px; border-radius: 999px; background: var(--track-fill); overflow: hidden; }
.wkTrack i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.wkRow .wkCount { font-size: 10px; font-weight: 800; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.wkClaim {
  flex: none; padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 900;
  background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #3a2a00;
}
.wkClaim[disabled] { opacity: .4; filter: grayscale(.6); }
.wkClaim:active:not([disabled]) { transform: scale(.93); }
.wkDone { flex: none; font-size: 16px; }

.modeRow { display: flex; gap: 8px; }
.modeBtn {
  flex: 1; border-radius: 16px; padding: 11px 8px; text-align: center;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
  display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.modeBtn b { font-size: 12px; font-weight: 900; }
.modeBtn small { font-size: 9px; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.modeBtn:active { transform: scale(.95); }

/* ─── Play screen: the in-round streak ─── */
#roundStreakBadge {
  flex: none; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--orange); padding: 5px 9px; border-radius: 999px;
  background: rgba(255, 150, 113, .16); border: 1px solid rgba(255, 150, 113, .38);
  opacity: 0; transform: scale(.7);
  transition: opacity .2s ease, transform .3s var(--m-bouncy);
}
#roundStreakBadge.show { opacity: 1; transform: none; }

/* ─── Round end: the secondary actions ─── */
.endSecondary {
  border-radius: 16px; padding: 12px; font-size: 13px; font-weight: 900;
  background: var(--card-fill); border: 1px solid var(--card-stroke); color: var(--text-primary);
}
.endSecondary:active { transform: scale(.96); }
#endRow { display: flex; gap: 10px; justify-content: center; }

/* ─── Answer explanation ─── */
#explainCard {
  display: none; flex-direction: column; gap: 7px;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
  border-radius: 16px; padding: 12px 14px; margin-top: 2px;
  animation: expIn .32s var(--m-snappy) both;
}
#explainCard.show { display: flex; }
@keyframes expIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#explainCard .expHead { font-size: 13px; font-weight: 900; }
#explainCard .expStep { display: flex; align-items: baseline; gap: 7px; }
#explainCard .expStep i { color: var(--teal); font-style: normal; font-weight: 900; font-size: 12px; }
#explainCard .expStep span { font-size: 12px; font-weight: 600; color: var(--text-secondary); line-height: 1.5; }
/* Equation-only lines stay left-to-right inside the Hebrew layout. */
#explainCard .expStep span.eq { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* ─── Onboarding ─── */
#onboardScreen {
  position: fixed; inset: 0; z-index: 98; display: none;
  flex-direction: column; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(160deg, var(--bg-top), var(--bg-mid) 55%, var(--bg-bot));
  padding: calc(max(env(safe-area-inset-top, 0px),var(--android-inset-top, 0px)) + 22px) 22px calc(max(env(safe-area-inset-bottom, 0px),var(--android-inset-bottom, 0px)) + 22px);
}
#onboardScreen::-webkit-scrollbar { display: none; }
#onboardScreen.show { display: flex; }
.obInner {
  width: 100%; max-width: 420px; margin: auto;
  display: flex; flex-direction: column; gap: 18px; align-items: stretch;
  animation: obIn .42s var(--m-snappy) both;
}
@keyframes obIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.obHero { font-size: 66px; text-align: center; line-height: 1;
  filter: drop-shadow(0 8px 22px rgba(132, 94, 194, .5)); }
.obTitle { font-size: 24px; font-weight: 900; text-align: center; line-height: 1.25; }
.obBody { font-size: 14px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.65; }
.obDots { display: flex; gap: 7px; justify-content: center; }
.obDots i {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .2);
  transition: width .4s var(--m-snappy);
}
body[data-theme="light"] .obDots i { background: var(--track-fill); }
.obDots i.done { background: var(--yellow); }
.obDots i.on { width: 22px; }
.obGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.obOpt {
  border-radius: 16px; padding: 14px 6px; font-size: 15px; font-weight: 900;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
  font-variant-numeric: tabular-nums;
}
.obOpt.sel { background: rgba(255, 217, 61, .2); border-color: rgba(255, 217, 61, .6); color: var(--yellow); }
.obOpt:active { transform: scale(.94); }
.obPrimary {
  border-radius: 18px; padding: 15px; font-size: 16px; font-weight: 900;
  background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #3a2a00;
  box-shadow: 0 8px 22px rgba(255, 150, 113, .4);
}
.obPrimary:active { transform: scale(.97); }
.obPrimary[disabled] { opacity: .45; box-shadow: none; }
.obSkip { font-size: 12px; font-weight: 700; color: var(--text-faint); padding: 6px; }
.obInput {
  width: 100%; border-radius: 16px; padding: 14px 16px; font-size: 16px; font-weight: 700;
  background: var(--card-fill); border: 1px solid var(--card-stroke); color: var(--text-primary);
  text-align: center;
}
.obInput::placeholder { color: var(--text-faint); font-weight: 600; }

/* The 2-3 skills the plan starts with, on the closing step. */
.obStartSkills { display: flex; flex-direction: column; gap: 8px; }
.obStartSkill {
  display: flex; align-items: center; gap: 10px;
  border-radius: 14px; padding: 12px 16px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(78, 205, 196, .45);
}
body[data-theme="light"] .obStartSkill { background: var(--card-fill); }
.obStartSkill b { font-size: 15px; font-weight: 800; }

/* Placement question */
.obQCard {
  background: var(--qcard-fill); border-radius: 22px; padding: 22px 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  border: 1px solid var(--card-stroke);
}
.obQText { font-size: 30px; font-weight: 900; direction: ltr; font-variant-numeric: tabular-nums; }
.obAnswers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.obAns {
  border-radius: 18px; padding: 18px 8px; font-size: 22px; font-weight: 900;
  background: var(--ans-face); border: 1px solid var(--ans-stroke);
  box-shadow: 0 4px 0 var(--ans-base); font-variant-numeric: tabular-nums;
}
.obAns:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ans-base); }
.obProgress { height: 7px; border-radius: 999px; background: var(--track-fill); overflow: hidden; }
.obProgress i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--yellow)); transition: width .3s ease; }

/* ─── Paywall ─── */
#paywallCard { gap: 12px; max-height: 86vh; overflow-y: auto; scrollbar-width: none; }
#paywallCard::-webkit-scrollbar { display: none; }
.pwBenefit { display: flex; align-items: flex-start; gap: 9px; text-align: start; }
.pwBenefit i { font-style: normal; font-size: 16px; flex: none; }
.pwBenefit span { font-size: 12px; font-weight: 600; color: var(--text-secondary); line-height: 1.5; }
.pwPlan {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border-radius: 16px; padding: 13px 14px;
  background: var(--card-fill); border: 1.5px solid var(--card-stroke);
}
.pwPlan.best { border-color: rgba(255, 217, 61, .7); background: rgba(255, 217, 61, .12); }
.pwPlan .pwPlanName { flex: 1; min-width: 0; text-align: start; font-size: 13px; font-weight: 900; }
.pwPlan .pwPlanPrice { font-size: 13px; font-weight: 900; color: var(--yellow); }
.pwPlan .pwTag {
  font-size: 9px; font-weight: 900; padding: 3px 7px; border-radius: 999px;
  background: var(--yellow); color: #3a2a00;
}
.pwPlan:active { transform: scale(.97); }
.pwNote { font-size: 10px; font-weight: 600; color: var(--text-faint); line-height: 1.6; text-align: center; }
.pwLink { font-size: 11px; font-weight: 800; color: var(--teal); padding: 4px; }

/* ─── Coin packs ─── */
.packGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.packBtn {
  border-radius: 16px; padding: 13px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
}
.packBtn b { font-size: 14px; font-weight: 900; color: var(--yellow); }
.packBtn small { font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.packBtn:active { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
  .pCard, .obInner, #explainCard, .pBarTrack i { animation: none; }
}

/* ═══════════ Home hub: the V2.2 slabs ═══════════ */

#resumeCard, #goalStrip, #proCard, #featureRow { flex: none; }
#resumeCard:empty, #goalStrip:empty, #proCard:empty { display: none; }

/* ─── Resume a round left mid-way ─── */
.resumeSlab {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border-radius: 18px; padding: 13px 16px;
  background: linear-gradient(135deg, var(--green), var(--teal-deep));
  color: #052e28; box-shadow: 0 4px 0 var(--teal-deep), 0 8px 18px rgba(0, 201, 167, .3);
}
.resumeSlab:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-deep); }
.resumeIcon { font-size: 20px; flex: none; }
.resumeInfo { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: 2px; align-items: flex-start; text-align: start; }
.resumeInfo b { font-size: 15px; font-weight: 900; }
.resumeInfo small { font-size: 11px; font-weight: 600; opacity: .8; }
.resumeGo { font-size: 16px; flex: none; }

/* ─── Today's practice goal ─── */
.goalSlab {
  display: flex; flex-direction: column; gap: 7px;
  border-radius: 16px; padding: 11px 14px;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
}
.goalSlab b { font-size: 12px; font-weight: 800; }
.goalSlab.met b { color: var(--green); }
.goalTrack { height: 6px; border-radius: 999px; background: var(--track-fill); overflow: hidden; }
.goalTrack i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--green));
  transition: width .4s var(--m-snappy);
}

/* ─── Parent Pro slab ─── */
.proSlab {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border-radius: 18px; padding: 13px 16px;
  background: linear-gradient(135deg, rgba(132, 94, 194, .28), rgba(255, 217, 61, .18));
  border: 1px solid rgba(255, 217, 61, .42);
}
.proSlab.active { border-color: rgba(255, 217, 61, .8); }
.proSlab:active { transform: scale(.98); }
.proSlabIcon { font-size: 22px; flex: none; }
.proSlabInfo { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: 2px; align-items: flex-start; text-align: start; }
.proSlabInfo b { font-size: 14px; font-weight: 900; color: var(--title-color); }
.proSlabInfo small { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.proSlabGo { font-size: 18px; font-weight: 900; color: var(--yellow); flex: none; }

/* ─── Shop · Champions · Practice ─── */
#featureRow { display: flex; gap: 8px; }
.featTile {
  flex: 1; border-radius: 16px; padding: 11px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
}
.featTile span { font-size: 20px; }
.featTile b { font-size: 11px; font-weight: 800; color: var(--text-secondary); }
.featTile:active { transform: scale(.95); }
.featTile.dim { opacity: .55; }

/* ═══════════ Speed run: its own clock ═══════════ */
#speedClock {
  display: none; align-items: center; justify-content: center; gap: 8px;
  align-self: center; flex: none;
  padding: 6px 16px; border-radius: 999px;
  background: var(--card-fill); border: 1.5px solid var(--card-stroke);
}
#speedClock.show { display: flex; }
#speedClock b {
  font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
#speedClock #speedCombo { font-size: 14px; font-weight: 700; color: var(--orange); }
#speedClock.urgent { border-color: rgba(255, 107, 107, .6); }
#speedClock.urgent b { color: var(--red); }

/* ═══════════ Achievements: a locked badge dims, it does not vanish ═══════════ */
.achCard:not(.unlocked) i { filter: grayscale(1); opacity: .38; }

/* ═══════════ Leaderboard: loading and error detail ═══════════ */
.lbLoading {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 0;
}
.lbLoading span { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.lbDots { display: flex; gap: 6px; }
.lbDots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
  animation: lbBounce 1s ease-in-out infinite;
}
.lbDots i:nth-child(2) { animation-delay: .13s; }
.lbDots i:nth-child(3) { animation-delay: .26s; }
@keyframes lbBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-7px); opacity: 1; }
}
.lbErrHint { font-size: 11px; font-weight: 600; color: var(--text-faint); text-align: center; }

@media (prefers-reduced-motion: reduce) { .lbDots i { animation: none; } }

/* ═══════════ Paywall: plan selection ═══════════ */
.pwPlanRow { display: flex; gap: 10px; }
.pwPlanRow .pwPlan {
  flex: 1; flex-direction: column; align-items: flex-start; gap: 3px;
  position: relative; padding: 14px 13px;
}
.pwPlan.sel { border-color: var(--yellow); background: rgba(255, 217, 61, .16); }
.pwPlan .pwTag { position: absolute; inset-block-start: -9px; inset-inline-end: 10px; }
.pwPlanPeriod { font-size: 10px; font-weight: 700; color: var(--text-faint); }
.pwPlanEquiv { font-size: 10px; font-weight: 700; color: var(--teal); }
.pwCTA {
  border-radius: 18px; padding: 15px; font-size: 16px; font-weight: 900;
  background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #3a2a00;
  box-shadow: 0 8px 22px rgba(255, 150, 113, .4);
}
.pwCTA:active { transform: scale(.97); }
.pwCTA[disabled] { opacity: .5; box-shadow: none; }
.pwLoadFail {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 14px; border-radius: 16px; background: var(--track-fill);
}

/* ═══════════ Streak modal: milestones and freezes ═══════════ */
#streakMilestones { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#streakMilestones:empty, #streakFreezeRow:empty { display: none; }
.msRow { display: flex; gap: 6px; justify-content: center; }
.msCell {
  flex: 1; max-width: 54px; border-radius: 13px; padding: 7px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--track-fill); border: 1.5px solid transparent;
}
.msCell i { font-style: normal; font-size: 16px; filter: grayscale(1); opacity: .4; }
.msCell span { font-size: 10px; font-weight: 800; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.msCell.done i { filter: none; opacity: 1; }
.msCell.done span { color: var(--orange); }
.msCell.next { border-color: var(--yellow); background: rgba(255, 217, 61, .14); }
.msCell.next i { filter: none; opacity: .85; }
.msTrack { height: 6px; border-radius: 999px; background: var(--track-fill); overflow: hidden; }
.msTrack i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
}
.msNext { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-align: center; }
.msFreeze {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%;
  border-radius: 14px; padding: 9px 12px;
  background: rgba(78, 205, 196, .14); border: 1px solid rgba(78, 205, 196, .4);
}
.msFreeze i { font-style: normal; font-size: 16px; }
.msFreeze b { font-size: 12px; font-weight: 800; }
.msFreezeCount { font-size: 12px; font-weight: 900; color: var(--teal);
  margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.msFreeze small { flex-basis: 100%; font-size: 10px; font-weight: 600;
  color: var(--text-secondary); }